/* ===== Mobile service sidebar (drawer) ===== */
#serviceSidebarBackdrop {
    display: none;
}
#serviceSidebarFab {
    display: none;
}

@media (max-width: 1023px) {
    #serviceSidebarFab {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 40;
        background: #22c55e;
        color: #fff;
        font-weight: 700;
        font-size: 14px;
        padding: 12px 24px;
        border-radius: 9999px;
        box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
        border: none;
        cursor: pointer;
    }
    #serviceSidebarBackdrop.service-sidebar-open {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 55;
    }
    #serviceSidebar {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        max-height: 100vh !important;
        width: min(320px, 92vw) !important;
        z-index: 56;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }
    #serviceSidebar.service-sidebar-open {
        display: block !important;
        transform: translateX(0);
    }
    .service-sidebar-mobile-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        border-bottom: 1px solid #e2e8f0;
        background: #fff;
    }
    .dark .service-sidebar-mobile-bar {
        background: #1e293b;
        border-bottom-color: #334155;
    }
    .service-sidebar-mobile-bar button {
        padding: 4px;
        color: #64748b;
        background: none;
        border: none;
        cursor: pointer;
    }
}

@media (min-width: 1024px) {
    .service-sidebar-mobile-bar {
        display: none;
    }
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* ===== Feature Cards ===== */
.feature-card {
    transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0,0,0,0.1);
}

/* ===== Auth Card Animation ===== */
.auth-card {
    animation: fadeInUp 0.3s ease-out;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Service Item Hover ===== */
.service-item:hover, .country-item:hover {
    background-color: #f8fafc;
}
.dark .service-item:hover, .dark .country-item:hover {
    background-color: #334155;
}

/* ===== Rules List ===== */
.rules-list {
    counter-reset: rules;
    list-style: none;
    padding-left: 0;
}
.rules-list li {
    counter-increment: rules;
    padding: 12px 16px 12px 48px;
    position: relative;
    border-bottom: 1px solid #f1f5f9;
}
.dark .rules-list li {
    border-bottom-color: #334155;
}
.rules-list li::before {
    content: counter(rules) ".";
    position: absolute;
    left: 16px;
    font-weight: 700;
    color: #22c55e;
}

/* ===== Turnstile Placeholder ===== */
.turnstile-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
}
.dark .turnstile-placeholder {
    border-color: #475569;
    color: #94a3b8;
}

/* ===== Password Toggle ===== */
.password-toggle {
    cursor: pointer;
}