/* =========================================
   1. PREMIUM VARIABLES (Cinematic UI)
========================================= */
:root {
    /* Color Palette */
    --bg-super-dark: #020203;       /* Deeper Black */
    --bg-panel: #0a0a0d;            /* Main Dark Surface */
    --bg-card: rgba(255, 255, 255, 0.02); /* Frost/Glass */
    --bg-card-hover: rgba(255, 255, 255, 0.05);

    /* Text Elements */
    --text-heading: #ffffff;
    --text-body: #94a3b8;           /* Elegant Slate */
    --text-dim: #475569;            /* Deep Muted */

    /* Brand / Accent Gradients */
    --accent-main: #3b82f6;         /* Solid Blue */
    --accent-glow: rgba(59, 130, 246, 0.3);
    --gradient-accent: linear-gradient(135deg, #2563eb, #0ea5e9);
    --success: #10b981;

    /* Structural */
    --border-thin: rgba(255, 255, 255, 0.06);
    --border-highlight: rgba(255, 255, 255, 0.15);

    /* Shadow Engine */
    --shadow-float: 0 10px 30px -10px rgba(0, 0, 0, 0.8);
    --shadow-neon: 0 0 20px -5px var(--accent-main);
}


ul { list-style: none; padding: 0; margin: 0; }
a { text-decoration: none; color: inherit; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
* { box-sizing: border-box; }

/* =========================================
   2. MAIN WRAPPER & GLOW EFFECT
========================================= */
.premium-footer {
    background-color: var(--bg-panel);
    color: var(--text-body);
    font-size: 15px;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    box-shadow: 0 -20px 40px -20px rgba(0,0,0,0.5);
}

/* Cinematic Top Neon Edge */
.premium-footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-main), transparent);
    opacity: 0.6;
}

/* Background Aurora Effect */
.premium-footer::after {
    content: ''; position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 70%; height: 250px;
    background: radial-gradient(ellipse at top, rgba(37, 99, 235, 0.12), transparent 70%);
    pointer-events: none; z-index: 0;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2; /* Sits above the aurora */
}

.footer-grid {
    display: grid;
    grid-template-columns: 320px 1fr 1fr 300px; /* Precise column control */
    gap: 50px;
    margin-bottom: 70px;
}

/* =========================================
   3. BRAND & SOCIAL COLUMN
========================================= */
.brand-logo {
    height: 48px;
    width: auto;
    margin-bottom: 24px;
    display: block;
    filter: drop-shadow(0px 4px 10px rgba(0,0,0,0.5));
    transition: 0.4s;
}
.brand-logo:hover { filter: drop-shadow(0px 0px 15px rgba(255,255,255,0.2)); }

.brand-desc {
    line-height: 1.7;
    font-weight: 400;
    margin-bottom: 30px;
    color: #cbd5e1;
}

.social-row { display: flex; gap: 12px; }
.social-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-thin);
    color: var(--text-heading);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.social-btn:hover {
    background: var(--gradient-accent);
    border-color: transparent;
    transform: translateY(-5px) scale(1.05);
    box-shadow: var(--shadow-neon);
    color: white;
}

/* =========================================
   4. HEADINGS & LINKS
========================================= */
.widget-title {
    color: var(--text-heading);
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 28px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-links li { margin-bottom: 16px; position: relative; }
.footer-links a {
    display: inline-flex; align-items: center;
    color: var(--text-body);
    font-weight: 500;
}
.footer-links a i {
    margin-right: 12px; font-size: 15px;
    color: var(--accent-main);
    opacity: 0.7; transition: 0.3s;
}
.footer-links a:hover { color: var(--text-heading); transform: translateX(8px); }
.footer-links a:hover i { opacity: 1; text-shadow: var(--shadow-neon); }

.live-badge {
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    background: rgba(16, 185, 129, 0.15); color: var(--success);
    padding: 3px 8px; border-radius: 6px; margin-left: 10px;
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
    animation: pulse-badge 2s infinite;
}
@keyframes pulse-badge { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }

/* =========================================
   5. COMPATIBILITY (SMART TV STYLE CARDS)
========================================= */
.compat-item {
    display: flex; align-items: center; gap: 16px;
    background: var(--bg-card); border: 1px solid var(--border-thin);
    padding: 14px 18px; border-radius: 14px;
    margin-bottom: 12px; backdrop-filter: blur(8px);
    transition: all 0.3s ease;
    position: relative; overflow: hidden;
}
/* Glow inside the card on hover */
.compat-item::before {
    content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
    background: var(--gradient-accent); transform: scaleY(0); transition: 0.3s;
}
.compat-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-highlight);
    transform: scale(1.02);
}
.compat-item:hover::before { transform: scaleY(1); }

.c-icon-wrap { font-size: 22px; color: var(--text-heading); opacity: 0.9; }
.c-text strong { display: block; font-size: 14px; color: var(--text-heading); font-weight: 600; letter-spacing: 0.3px; }
.c-text span { display: block; font-size: 12px; color: var(--text-body); margin-top: 3px; }

/* =========================================
   6. HELP & SUPPORT CARD (VIP STYLE)
========================================= */
.support-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.03), transparent);
    border: 1px solid var(--border-thin);
    padding: 24px; border-radius: 16px;
    position: relative; overflow: hidden;
    box-shadow: inset 0 0 20px rgba(255,255,255,0.01);
}

.support-row { margin-bottom: 18px; display: flex; align-items: flex-start; gap: 14px; }
.support-icon {
    color: #fff; background: var(--gradient-accent);
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center; font-size: 16px;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.support-info strong { display: block; color: var(--text-heading); font-size: 15px; margin-bottom: 4px; font-weight: 600; }
.support-info span { font-size: 13px; color: var(--text-body); display: block; }

.contact-btn {
    display: block; width: 100%;
    background: var(--text-heading); color: var(--bg-super-dark);
    padding: 14px; border-radius: 10px;
    font-weight: 700; font-size: 14px; text-align: center;
    margin-top: 24px; position: relative; z-index: 1;
    transition: all 0.3s ease; border: none; overflow: hidden;
}
.contact-btn::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gradient-accent); opacity: 0; z-index: -1; transition: 0.3s;
}
.contact-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 10px 20px var(--accent-glow); }
.contact-btn:hover::before { opacity: 1; }

/* =========================================
   7. FOOTER BOTTOM (Tech Partner & Crypto)
========================================= */
.footer-bottom {
    background: rgba(0,0,0,0.6);
    border-top: 1px solid var(--border-thin);
    padding: 30px 0; backdrop-filter: blur(10px);
    margin-top: 20px;
}
.bottom-flex {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}

/* Copyright & Legal */
.copy-col { font-size: 13px; color: var(--text-dim); }
.copy-text { color: var(--text-body); margin-bottom: 8px; display: block; }
.copy-text b { color: var(--text-heading); }
.legal-links { display: flex; gap: 16px; }
.legal-links a { color: var(--text-dim); position: relative; padding-bottom: 2px;}
.legal-links a:hover { color: var(--accent-main); }

/* Tech Badge Modern */
.tech-badge {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.02); padding: 8px 20px;
    border-radius: 50px; border: 1px solid rgba(255,255,255,0.05);
    transition: 0.3s; text-decoration: none !important;
}
.tech-badge span { font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.8px; color: var(--text-dim); }
.tech-badge img { height: 18px; filter: grayscale(1) opacity(0.7); transition: 0.4s; }
.tech-badge:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.15); box-shadow: 0 5px 15px rgba(0,0,0,0.3); transform: translateY(-2px); }
.tech-badge:hover img { filter: grayscale(0) opacity(1); }

/* Payment Icons */
.pay-icons { display: flex; gap: 18px; align-items: center; }
.pay-icon-box {
    color: var(--text-dim); font-size: 24px; transition: 0.3s;
    display: flex; align-items: center; justify-content: center;
}
.pay-icon-box:hover.pay-transfer { color: var(--accent-main); transform: scale(1.1) rotate(10deg); }
.pay-icon-box:hover.pay-cash { color: #f59e0b; transform: scale(1.1); }
.pay-icon-box:hover.pay-btc { color: #f7931a; transform: scale(1.1) rotate(5deg); text-shadow: 0 0 10px rgba(247, 147, 26, 0.4); }

/* =========================================
   8. RESPONSIVE MATRIX
========================================= */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 50px; }
    .col-brand, .col-help { grid-column: auto; }
}
@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .bottom-flex { flex-direction: column; text-align: center; gap: 30px; }
    .legal-links { justify-content: center; flex-wrap: wrap; }
    .brand-logo { margin: 0 auto 24px; }
    .col-brand, .brand-desc { text-align: center; margin: 0 auto; }
    .social-row { justify-content: center; margin-bottom: 20px; }
}

/* =========================================
   9. SCROLL TO TOP (Elevated)
========================================= */
.scroll-top-btn {
    position: fixed;
    bottom: 35px;
    left: 35px; /* Menținut pe stânga */
    z-index: 999;
    width: 50px;
    height: 50px;
    background: #0d6efd; /* Albastru complet / full blue */
    border: none; /* Am eliminat bordura pentru un aspect solid modern */
    color: #ffffff; /* Iconița să fie albă vizibilă */
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;

    /* MODIFICAREA CHEIE: Îl ascundem mutându-l spre stânga (Axa X) cu 40px */
    transform: translateX(-40px) scale(0.9);

    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4); /* Umbră fină albastră direct sub el */
}

/* Când se dă scroll, clasa .is-visible este adăugată de scriptul tău, iar butonul "sare" spre dreapta, pe pozitia originală */
.scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
}

/* Când ții mouse-ul pe el, culoarea se închide puțin iar butonul se ridică vioi */
.scroll-top-btn:hover {
    background: #0056b3; /* Un albastru o idee mai închis / focus hover */
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.6); /* Umbra devine mai puternică */
    transform: translateY(-5px) scale(1.1);
}
/* împinge footer-ul în jos */
/* footer nu se micșorează și stă jos */
/* footer nu se micșorează și stă jos */
.premium-footer{
  flex-shrink: 0 !important;
}