/* ================================================
   Popularitate.ro - Premium Red Theme
   ================================================ */

:root {
    --primary: #DC2626;
    --primary-dark: #B91C1C;
    --primary-light: #FEF2F2;
    --primary-50: #FFF5F5;
    --primary-100: #FEE2E2;
    --primary-200: #FECACA;
    --primary-glow: rgba(220, 38, 38, 0.15);
    --primary-gradient: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);

    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --info: #3B82F6;
    --info-light: #DBEAFE;

    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    --instagram: #E4405F;
    --instagram-gradient: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #8134AF 100%);
    --tiktok: #010101;
    --tiktok-gradient: linear-gradient(135deg, #69C9D0 0%, #010101 50%, #EE1D52 100%);
    --x: #000000;
    --x-gradient: linear-gradient(135deg, #1f1f1f 0%, #000000 100%);
    --facebook: #1877F2;
    --facebook-gradient: linear-gradient(135deg, #18ACFE 0%, #1877F2 50%, #0D47A1 100%);
    --youtube: #FF0000;
    --youtube-gradient: linear-gradient(135deg, #FF4E45 0%, #FF0000 50%, #C4302B 100%);
    --discord: #5865F2;
    --discord-gradient: linear-gradient(135deg, #7289DA 0%, #5865F2 55%, #3C45A5 100%);

    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 48px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.06);
    --shadow-primary: 0 8px 24px rgba(220, 38, 38, 0.25);
    --shadow-card-hover: 0 16px 40px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);

    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--gray-800);
    background: #FFFFFF;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

a { color: var(--primary); text-decoration: none; transition: var(--transition-fast); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.container-sm { max-width: 640px; }
.container-md { max-width: 800px; }
/* Abonamente checkout: coloană mai lată decât .container-sm */
.container-wide-form { max-width: 920px; }
/* Blog: wider reading column than .container-sm (640px) */
.container-blog { max-width: 820px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }

/* ================================================
   Header
   ================================================ */

/* Trust strip — semnale rapide deasupra navului (desktop only) */
.header-trust {
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-600);
    font-size: 0.745rem;
    font-weight: 500;
    letter-spacing: 0.005em;
}
.header-trust__list {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 1.6rem;
    margin: 0; padding: 0.42rem 0;
    list-style: none;
}
.header-trust__item {
    display: inline-flex; align-items: center; gap: 0.4rem;
    white-space: nowrap;
}
.header-trust__item:not(:last-child)::after {
    content: ''; width: 3px; height: 3px; border-radius: 50%;
    background: var(--gray-300);
    margin-left: 1.6rem;
}
.header-trust__icon { color: var(--primary); flex-shrink: 0; }
.header-trust__item:nth-child(1) .header-trust__icon { color: #f59e0b; }
.header-trust__item:nth-child(3) .header-trust__icon { color: #16a34a; }
.header-trust__item:nth-child(4) .header-trust__icon { color: var(--gray-700); }
.header-trust__item span strong { color: var(--gray-900); font-weight: 700; }

@media (max-width: 1024px) {
    .header-trust__list { gap: 1rem; }
    .header-trust__item:not(:last-child)::after { margin-left: 1rem; }
}
@media (max-width: 880px) {
    /* Versiune condensata pe mobil: pastram trust signals (rating, livrare, securitate)
       dar reducem padding, fonturi si gap; ascundem item-urile de detaliu daca e prea ingust. */
    .header-trust { padding: 0.35rem 0; font-size: 0.72rem; }
    .header-trust__list { gap: 0.6rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .header-trust__list::-webkit-scrollbar { display: none; }
    .header-trust__item:not(:last-child)::after { display: none; }
    .header-trust__item { white-space: nowrap; }
}
@media (max-width: 768px) {
    /* Pe mobil ascundem complet trust strip-ul — informatiile sunt vizibile in pagina principala
       si banner-ele promo de mai jos ocupa deja spatiu suficient deasupra header-ului. */
    .header-trust { display: none; }
}

.header {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    position: sticky; top: 0; z-index: 100;
}
.main { overflow-x: hidden; }

.nav {
    display: flex; align-items: center; justify-content: space-between;
    height: 64px; gap: 1rem;
}

.logo {
    display: flex; align-items: center; gap: 0.6rem;
    flex-shrink: 0; text-decoration: none;
}
.logo:hover { color: var(--gray-900); }
.logo:hover .logo-icon { transform: rotate(-6deg) scale(1.1); box-shadow: 0 6px 20px rgba(220,38,38,0.4); }
.logo:hover .logo-img { transform: scale(1.03); opacity: 0.95; }

.logo-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--primary-gradient);
    color: #fff; font-weight: 900; font-size: 1.3rem; line-height: 1;
    font-family: 'Inter', sans-serif; letter-spacing: -0.04em;
    box-shadow: 0 3px 12px rgba(220,38,38,0.3);
    transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
    flex-shrink: 0;
}
.logo-icon-lg {
    width: 56px; height: 56px; border-radius: 14px;
    font-size: 2rem; margin: 0 auto 0.75rem;
    box-shadow: 0 6px 24px rgba(220,38,38,0.35);
}

.logo-wordmark {
    font-weight: 800; font-size: 1.3rem; letter-spacing: -0.04em;
    color: var(--gray-900); line-height: 1;
}
.logo-ext {
    font-weight: 700; color: var(--primary);
}

.logo-sm .logo-icon { width: 30px; height: 30px; font-size: 1.05rem; border-radius: 8px; }
.logo-sm .logo-wordmark { font-size: 1.15rem; }

.logo-img {
    height: 48px;
    width: auto;
    max-width: min(220px, 46vw);
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.logo-sm .logo-img {
    height: 32px;
    max-width: min(168px, 40vw);
}
.logo-img--login-form {
    height: auto;
    max-height: 64px;
    max-width: min(260px, 88vw);
    width: auto;
    margin: 0 auto 0.35rem;
}

.nav-center { display: flex; align-items: center; }
.mob-prefs { display: none; }
.mob-account-link { display: none; }

.nav-links {
    display: flex; align-items: center; gap: 0.25rem; list-style: none;
}
.nav-links li a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--gray-600); font-weight: 500; font-size: 0.88rem;
    padding: 0.45rem 0.85rem; border-radius: 8px;
    transition: var(--transition-fast); white-space: nowrap;
}
.nav-item-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.05em;
    line-height: 1;
    opacity: 0.92;
}
.nav-links li a:hover { color: var(--gray-900); background: var(--gray-50); }
.nav-links li a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.nav-wheel-link { color: var(--primary) !important; font-weight: 600 !important; }

/* Servicii — link primary subtle highlight (orientare clara catre catalog) */
.nav-link--primary {
    color: var(--gray-900) !important; font-weight: 600 !important;
}
.nav-link--primary-active { color: var(--primary) !important; }

.nav-dropdown { position: relative; list-style: none; }

.nav-dropdown-toggle {
    appearance: none; border: none; background: transparent;
    color: var(--gray-600); font-weight: 500; font-size: 0.88rem;
    padding: 0.45rem 0.85rem; border-radius: 8px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: inherit; transition: var(--transition-fast); white-space: nowrap;
}
.nav-dropdown-toggle:hover { color: var(--gray-900); background: var(--gray-50); }
.nav-dropdown--active > .nav-dropdown-toggle {
    color: var(--primary); font-weight: 600;
}
.nav-dropdown-menu {
    /* top: 100% fără gap — padding-top creează „pod” sub buton ca hover-ul să nu se piardă */
    position: absolute; top: 100%; left: 0;
    min-width: 15.5rem; background: #fff;
    border: 1px solid var(--gray-200);
    border-top: 3px solid var(--primary);
    border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    list-style: none; margin: 0; padding: 0.75rem 0.35rem 0.35rem;
    z-index: 300;
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    /* la închidere: visibility după opacity — timp să muți cursorul pe linkuri */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.22s;
    pointer-events: none;
}
.nav-dropdown-menu li { margin: 0; }
.nav-dropdown-menu a {
    display: block; padding: 0.55rem 0.9rem; border-radius: 8px;
    font-size: 0.88rem; font-weight: 500; color: var(--gray-700);
    white-space: nowrap; text-decoration: none; transition: var(--transition-fast);
}
.nav-dropdown-menu a:hover { background: var(--gray-50); color: var(--gray-900); }
.nav-dropdown-menu .nav-wheel-link:hover { color: var(--primary) !important; }
.nav-dropdown-link--active {
    background: var(--primary-50) !important; color: var(--primary) !important; font-weight: 600 !important;
}

@media (min-width: 769px) {
    .nav-dropdown:hover .nav-dropdown-menu,
    .nav-dropdown:focus-within .nav-dropdown-menu {
        opacity: 1; visibility: visible; transform: translateY(0);
        pointer-events: auto;
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
    }
}

.nav-right {
    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}

.nav-switchers {
    display: flex; align-items: center; gap: 0.5rem;
}

.nav-divider {
    width: 1px; height: 16px; background: var(--gray-200);
}

.lang-switcher, .currency-switcher {
    display: flex; gap: 2px; background: var(--gray-100);
    border-radius: 7px; padding: 2px;
}
.lang-btn {
    padding: 0.25rem 0.55rem; border-radius: 5px; font-size: 0.72rem;
    font-weight: 600; color: var(--gray-400); background: transparent;
    transition: var(--transition-fast); white-space: nowrap;
}
.lang-btn.active { background: white; color: var(--gray-900); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.lang-btn:hover:not(.active) { color: var(--gray-600); }

.nav-cta { white-space: nowrap; }

/* Nav account — link discret pentru clienti existenti */
.nav-account-link {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--gray-600); font-weight: 600; font-size: 0.78rem;
    padding: 0.4rem 0.7rem 0.4rem 0.6rem; border-radius: 8px;
    background: transparent; border: 1px solid transparent;
    transition: var(--transition-fast); text-decoration: none;
    white-space: nowrap;
}
.nav-account-link:hover {
    color: var(--gray-900);
    background: var(--gray-50);
    border-color: var(--gray-200);
}
.nav-account-link svg { color: currentColor; flex-shrink: 0; }
.nav-account-link__label { line-height: 1; }
@media (max-width: 1100px) {
    .nav-account-link__label { display: none; }
    .nav-account-link {
        padding: 0.45rem 0.55rem;
        border-radius: 999px;
        background: var(--gray-50);
        border-color: var(--gray-200);
    }
}

/* Primary CTA — Comanda acum (cel mai dominant element din header) */
.nav-cta-primary {
    display: inline-flex; align-items: center; gap: 0.45rem;
    background: var(--primary-gradient);
    color: #fff !important;
    font-weight: 700; font-size: 0.86rem; letter-spacing: 0.005em;
    padding: 0.6rem 1.05rem; border-radius: 10px;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
    border: 1px solid rgba(220, 38, 38, 0.35);
    text-decoration: none; white-space: nowrap;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
    position: relative; overflow: hidden;
}
.nav-cta-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.22) 50%, transparent 70%);
    transform: translateX(-100%); transition: transform 0.6s ease;
    pointer-events: none;
}
.nav-cta-primary:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255,255,255,0.22);
    filter: brightness(1.04);
}
.nav-cta-primary:hover::before { transform: translateX(100%); }
.nav-cta-primary:active { transform: translateY(0); }
.nav-cta-primary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}
.nav-cta-primary__arrow {
    font-size: 1.05em; line-height: 1;
    transition: transform 0.18s ease;
}
.nav-cta-primary:hover .nav-cta-primary__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .nav-cta-primary, .nav-cta-primary::before, .nav-cta-primary__arrow { transition: none !important; }
    .nav-cta-primary:hover { transform: none; }
}

/* Nav preferences — globe icon dropdown (limba + moneda) pentru desktop */
.nav-prefs { position: relative; }
.nav-prefs-toggle {
    appearance: none; background: var(--gray-50); border: 1px solid var(--gray-200);
    color: var(--gray-700); font: inherit; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.45rem; border-radius: 8px;
    transition: var(--transition-fast); white-space: nowrap;
}
.nav-prefs-toggle:hover { background: white; border-color: var(--gray-300); color: var(--gray-900); box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.nav-prefs-toggle[aria-expanded="true"] { background: white; border-color: var(--primary); color: var(--primary); }
.nav-prefs-icon { color: currentColor; flex-shrink: 0; display: block; }

.nav-prefs-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 200px; background: white;
    border: 1px solid var(--gray-200); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 0.65rem; z-index: 1000;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav-prefs.is-open .nav-prefs-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
.nav-prefs-row { display: flex; flex-direction: column; gap: 0.3rem; }
.nav-prefs-row + .nav-prefs-row { margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--gray-100); }
.nav-prefs-label {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--gray-500);
    padding: 0 0.15rem;
}
.nav-prefs-seg {
    display: flex; gap: 2px; background: var(--gray-100);
    border-radius: 8px; padding: 3px;
}
.nav-prefs-opt {
    flex: 1; text-align: center;
    padding: 0.4rem 0.5rem; border-radius: 6px;
    font-size: 0.78rem; font-weight: 600; color: var(--gray-500);
    background: transparent; transition: var(--transition-fast);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
    white-space: nowrap;
}
.nav-prefs-opt:hover:not(.is-active) { color: var(--gray-800); background: rgba(255,255,255,0.55); }
.nav-prefs-opt.is-active {
    background: white; color: var(--gray-900);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.nav-prefs-flag { font-size: 0.95rem; line-height: 1; }

@media (max-width: 768px) {
    .nav-prefs { display: none; }
}

.nav-toggle {
    display: none; flex-direction: column; gap: 5px; background: none;
    border: none; cursor: pointer; padding: 6px;
    border-radius: var(--radius-sm); transition: var(--transition-fast);
}
.nav-toggle:hover { background: var(--gray-100); }
.nav-toggle span {
    width: 20px; height: 2px; background: var(--gray-700);
    border-radius: 2px; transition: var(--transition); transform-origin: center;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ================================================
   Hero
   ================================================ */
.hero {
    position: relative; padding: 7rem 0 8rem; text-align: center;
    overflow: hidden; background: linear-gradient(180deg, var(--primary-50) 0%, #ffffff 100%);
}
.hero::before {
    content: ''; position: absolute; top: -40%; left: -20%; width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(220,38,38,0.07) 0%, transparent 70%);
    border-radius: 50%; animation: floatBlob 20s ease-in-out infinite; pointer-events: none;
}
.hero::after {
    content: ''; position: absolute; bottom: -30%; right: -15%; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(239,68,68,0.05) 0%, transparent 70%);
    border-radius: 50%; animation: floatBlob 25s ease-in-out infinite reverse; pointer-events: none;
}
@keyframes floatBlob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -40px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}
.hero .container { position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1.1rem;
    background: white; border: 1px solid var(--primary-200); border-radius: 100px;
    font-size: 0.82rem; font-weight: 600; color: var(--primary);
    margin-bottom: 2rem; box-shadow: var(--shadow); animation: fadeInDown 0.6s ease-out;
}
.hero-badge-dot { width: 7px; height: 7px; background: var(--success); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.8); } }

.hero-title {
    font-size: 3.75rem; font-weight: 800; color: var(--gray-900); line-height: 1.08;
    letter-spacing: -0.04em; margin-bottom: 1.5rem; max-width: 720px;
    margin-left: auto; margin-right: auto; animation: fadeInUp 0.7s ease-out;
}
.hero-title-accent {
    background: var(--primary-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle {
    font-size: 1.2rem; color: var(--gray-500); max-width: 500px;
    margin: 0 auto 2.5rem; line-height: 1.7; animation: fadeInUp 0.8s ease-out;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; align-items: center; animation: fadeInUp 0.9s ease-out; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 3rem; justify-content: center; margin-top: 4rem; animation: fadeInUp 1s ease-out; }
.hero-stat { text-align: center; }
.hero-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; }
.hero-stat-label { font-size: 0.82rem; color: var(--gray-400); font-weight: 500; margin-top: 0.15rem; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }

/* ================================================
   Sections
   ================================================ */
.section { padding: 6rem 0; }
.section-alt { background: var(--gray-50); }
.section-dark { background: var(--gray-900); color: white; }

.section-title {
    font-size: 2.25rem; font-weight: 800; text-align: center; margin-bottom: 0.5rem;
    color: var(--gray-900); letter-spacing: -0.03em;
}
.section-dark .section-title { color: white; }

.section-subtitle {
    text-align: center; color: var(--gray-400); margin-bottom: 3.5rem;
    font-size: 1.05rem; max-width: 520px; margin-left: auto; margin-right: auto;
}
.section-dark .section-subtitle { color: var(--gray-400); }

/* Home — quick order (first section; hero removed) */
.home-quick-order {
    padding-top: 5.5rem;
    padding-bottom: 4.5rem;
    background: linear-gradient(180deg, #fff 0%, var(--gray-50) 100%);
}
.home-quick-order__h1 {
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.03em;
    color: var(--gray-900);
    line-height: 1.18;
    max-width: 920px;
    margin: 0 auto 0.75rem;
}
.home-quick-order__lead {
    margin-bottom: 2rem;
    max-width: 640px;
}
.home-quick-order__empty-cta { text-align: center; margin-top: 0.5rem; }
.home-quick-plat-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.home-quick-order__inner { position: relative; max-width: 900px; margin: 0 auto; }
.home-quick-order__plat-heading {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
    text-align: center;
    margin: 0 0 0.75rem;
}
.home-quick-tabstrip-hint {
    display: none;
    text-align: center;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--gray-400);
    margin: -0.35rem 0 0.55rem;
    letter-spacing: 0.01em;
}
.home-quick-tabstrip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.65rem;
    justify-content: center;
    overflow-x: auto;
    padding: 0.35rem 0 1rem;
    margin-bottom: 0.25rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.home-quick-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    cursor: pointer;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.88rem;
    border: 2px solid var(--gray-200);
    background: white;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}
.home-quick-tab:hover { opacity: 0.9; }
.home-quick-tab--instagram { background: var(--instagram); color: #fff; border-color: transparent; }
.home-quick-tab--tiktok { background: var(--tiktok); color: #fff; border-color: transparent; }
.home-quick-tab--x { background: var(--x); color: #fff; border-color: transparent; }
.home-quick-tab--facebook { background: var(--facebook); color: #fff; border-color: transparent; }
.home-quick-tab--youtube { background: var(--youtube); color: #fff; border-color: transparent; }
.home-quick-tab--discord { background: var(--discord); color: #fff; border-color: transparent; }
.home-quick-panels { margin-top: 0.5rem; }
.home-quick-panels .home-quick-panel { display: none; }
.home-quick-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.home-quick-service-card {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-200);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.home-quick-service-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}
.home-quick-service-card { position: relative; }
.home-quick-service-card.is-new { box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.45), var(--shadow); }
.home-quick-service-card.is-new:hover { box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.55), var(--shadow-card-hover); }

/* === NEW badge (services) === */
.service-new-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
    white-space: nowrap;
    user-select: none;
}
.service-new-badge--inline {
    padding: 0.18rem 0.5rem;
    font-size: 0.62rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}
.service-new-badge--lg {
    padding: 0.3rem 0.65rem;
    font-size: 0.7rem;
}
.service-new-badge--corner {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    padding: 0.22rem 0.55rem;
    font-size: 0.62rem;
    transform-origin: center;
    animation: serviceNewPulse 2.4s ease-in-out infinite;
}
@keyframes serviceNewPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
    50% { transform: scale(1.06); box-shadow: 0 6px 18px rgba(239, 68, 68, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}
@media (prefers-reduced-motion: reduce) {
    .service-new-badge--corner { animation: none; }
}
.services-simple-chip--new {
    border-color: rgba(249, 115, 22, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.25);
}
/* Admin: "NEW" pill alongside the toggle */
.service-new-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    color: #9ca3af;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
}
.service-new-pill.is-on {
    color: #fff;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}

.home-quick-service-card__head.platform-bg-instagram { background: var(--instagram-gradient); }
.home-quick-service-card__head.platform-bg-tiktok { background: var(--tiktok-gradient); }
.home-quick-service-card__head.platform-bg-x { background: var(--x-gradient); }
.home-quick-service-card__head.platform-bg-facebook { background: var(--facebook-gradient); }
.home-quick-service-card__head.platform-bg-youtube { background: var(--youtube-gradient); }
.home-quick-service-card__head.platform-bg-discord { background: var(--discord-gradient); }
.home-quick-service-card__head:not([class*="platform-bg-"]) { background: linear-gradient(135deg, #475569, #1f2937); }
.home-quick-service-card__head {
    padding: 0.65rem 1rem;
    color: white;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.home-quick-service-card__body { padding: 1.1rem 1.15rem 1.2rem; }
.home-quick-service-card__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 0.35rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home-quick-service-card__price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--primary);
    margin: 0 0 1rem;
}
.home-quick-service-card__price small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-500);
    line-height: 1.35;
}
.home-quick-order__footer { text-align: center; margin: 2rem 0 0; }
.home-quick-order__all {
    font-weight: 600;
    color: var(--primary);
    font-size: 1rem;
}
.home-quick-order__all:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .home-quick-order {
        padding-top: 3.75rem;
        padding-bottom: 2.85rem;
        background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 55%, #fff 100%);
    }
    .home-quick-order__h1 {
        font-size: clamp(1.35rem, 5.2vw, 1.85rem);
        margin-bottom: 0.45rem;
    }
    .home-quick-order__lead {
        margin-bottom: 1.25rem;
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .home-quick-order__inner { max-width: none; }
    .home-quick-order__plat-heading { margin-bottom: 0.45rem; }
    .home-quick-tabstrip-hint { display: block; }
    .home-quick-tabstrip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        overflow: visible;
        justify-items: stretch;
        padding: 0.15rem 0 0.85rem;
        margin-bottom: 0;
        mask-image: none;
        -webkit-mask-image: none;
        scroll-snap-type: none;
    }
    .home-quick-tab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: none;
        text-align: center;
        flex: unset;
        scroll-snap-align: unset;
        padding: 0.48rem 0.55rem;
        font-size: 0.78rem;
        border-radius: 999px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
        line-height: 1.2;
    }
    .home-quick-panels {
        margin-top: 0.15rem;
        background: #fff;
        border-radius: 18px;
        padding: 0.7rem 0.55rem 0.8rem;
        border: 1px solid var(--gray-200);
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    }
    .home-quick-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.6rem;
    }
    .home-quick-service-card {
        border-radius: 14px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    }
    .home-quick-service-card:hover {
        transform: translateY(-2px);
    }
    .home-quick-service-card__head {
        padding: 0.45rem 0.55rem;
        font-size: 0.65rem;
        letter-spacing: 0.03em;
    }
    .home-quick-service-card__body {
        padding: 0.65rem 0.55rem 0.75rem;
    }
    .home-quick-service-card__name {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
        line-height: 1.22;
    }
    .home-quick-service-card__price {
        font-size: 0.92rem;
        margin-bottom: 0.55rem;
    }
    .home-quick-service-card__price small {
        font-size: 0.6rem;
        display: block;
        margin-top: 0.12rem;
        line-height: 1.3;
    }
    .home-quick-service-card .btn.btn-block {
        padding: 0.48rem 0.35rem;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: 9px;
        line-height: 1.2;
    }
    .home-quick-order__footer { margin-top: 1.5rem; }
}

/* ================================================
   Buttons
   ================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.7rem 1.6rem; border-radius: 10px; font-weight: 600; font-size: 0.92rem;
    border: 2px solid transparent; cursor: pointer; transition: var(--transition);
    font-family: inherit; gap: 0.5rem; position: relative; overflow: hidden;
}
.btn-primary {
    background: var(--primary-gradient); color: white; border-color: transparent;
    box-shadow: var(--shadow), 0 2px 8px rgba(220,38,38,0.15);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-primary); color: white; }
.btn-primary:active { transform: translateY(0); }

.btn-outline { background: white; color: var(--primary); border-color: var(--primary-200); }
.btn-outline:hover { background: var(--primary-50); border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

.btn-white { background: white; color: var(--gray-900); border-color: white; }
.btn-white:hover { background: var(--gray-100); color: var(--gray-900); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--gray-600); border-color: transparent; }
.btn-ghost:hover { background: var(--gray-100); color: var(--gray-800); }

.btn-lg { padding: 0.9rem 2.25rem; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.8rem; border-radius: 8px; }
.btn-block { width: 100%; }

/* ================================================
   Platform Cards
   ================================================ */
.platforms-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
    max-width: 1000px; margin: 0 auto;
}

.platform-card {
    background: white; border-radius: var(--radius-xl);
    padding: 2.5rem 2rem 2rem; text-align: center;
    border: 1px solid var(--gray-200);
    transition: var(--transition-slow); position: relative;
}
.platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--gray-100);
}

.platform-popular-badge {
    position: absolute; top: 1rem; right: 1rem;
    background: var(--primary); color: white;
    font-size: 0.7rem; font-weight: 700;
    padding: 0.25rem 0.7rem; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.04em;
}

.platform-icon {
    width: 64px; height: 64px; margin: 0 auto 1.25rem;
    border-radius: 16px; display: flex; align-items: center;
    justify-content: center; padding: 14px; color: white;
    transition: var(--transition);
}
.platform-icon svg { width: 100%; height: 100%; }
.platform-icon .platform-icon-img--discord {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.platform-card:hover .platform-icon { transform: scale(1.08); }

.platform-instagram .platform-icon { background: linear-gradient(135deg, #833AB4, #E1306C, #F77737); box-shadow: 0 6px 18px rgba(225,48,108,0.25); }
.platform-tiktok .platform-icon { background: #010101; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.platform-x .platform-icon { background: #000000; box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.platform-facebook .platform-icon { background: #1877F2; box-shadow: 0 6px 18px rgba(24,119,242,0.25); }
.platform-youtube .platform-icon { background: linear-gradient(135deg, #FF4E45 0%, #FF0000 100%); box-shadow: 0 6px 18px rgba(255, 0, 0, 0.25); }
.platform-discord .platform-icon {
    background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 55%, #e8edff 100%);
    box-shadow: 0 6px 18px rgba(88, 101, 242, 0.22);
}

.platform-name {
    font-size: 1.25rem; font-weight: 700; margin-bottom: 0.35rem;
    color: var(--gray-900);
}

.platform-price {
    color: var(--gray-500); margin-bottom: 1.25rem; font-size: 0.88rem;
}
.platform-price strong {
    font-size: 1.1rem; font-weight: 700; color: var(--gray-900);
}
.platform-price span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    line-height: 1.35;
    font-weight: 500;
}

.platform-services-list {
    list-style: none; margin-bottom: 1.5rem; padding: 0;
    text-align: left;
}
.platform-services-list li {
    padding: 0.45rem 0; color: var(--gray-600);
    font-size: 0.9rem; font-weight: 500;
    display: flex; align-items: center; gap: 0.6rem;
}
.platform-services-list li svg {
    flex-shrink: 0; color: var(--success);
}

.btn-platform {
    padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600;
    font-size: 0.9rem; background: var(--gray-900); color: white;
    border: none; transition: var(--transition);
}
.btn-platform:hover {
    background: var(--primary); color: white;
    transform: translateY(-1px); box-shadow: var(--shadow-primary);
}

/* ================================================
   Home — promo highlights (wheel, story, +20%)
   ================================================ */
.home-promos-section .section-title { font-size: clamp(1.35rem, 3vw, 1.75rem); }
.home-promos-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 0.25rem;
}
.home-promo-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    padding: 1.65rem 1.4rem 1.5rem 1.65rem;
    display: flex;
    flex-direction: column;
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    isolation: isolate;
}
.home-promo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}
.home-promo-card__accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}
.home-promo-card--wheel .home-promo-card__accent { background: linear-gradient(180deg, #f97316 0%, #DC2626 100%); }
.home-promo-card--story .home-promo-card__accent { background: linear-gradient(180deg, #f97316 0%, #DC2626 100%); }
.home-promo-card--bonus .home-promo-card__accent { background: linear-gradient(180deg, #22c55e 0%, #15803d 100%); }
.home-promo-card--wheel:hover { border-color: rgba(220, 38, 38, 0.35); }
.home-promo-card--story:hover { border-color: rgba(220, 38, 38, 0.3); }
.home-promo-card--bonus:hover { border-color: rgba(22, 163, 74, 0.35); }

.home-promo-card__badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.14);
}
.home-promo-card__badge--wheel { background: linear-gradient(135deg, #f97316, #DC2626); }
.home-promo-card__badge--story { background: linear-gradient(135deg, #f97316, #DC2626); }
.home-promo-card__badge--bonus { background: linear-gradient(135deg, #22c55e, #15803d); }

.home-promo-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
    color: #fff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}
.home-promo-card--wheel .home-promo-icon { background: linear-gradient(135deg, #fb923c 0%, #DC2626 100%); }
.home-promo-card--story .home-promo-icon { background: linear-gradient(135deg, #fb923c 0%, #DC2626 100%); }
.home-promo-icon--bonus {
    font-size: clamp(0.65rem, 2.4vw, 0.95rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #15803d);
    overflow: hidden;
    box-sizing: border-box;
    padding-inline: 0.12rem;
    text-align: center;
    white-space: nowrap;
}
.home-promo-card-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 0.6rem;
    letter-spacing: -0.02em;
    padding-right: 4.5rem;
}
.home-promo-card-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--gray-600);
    margin: 0 0 1.25rem;
    flex: 1;
}
.home-promo-cta { margin-top: auto; }

.home-value-offers-section {
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
}
.home-value-offers-section .section-subtitle {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}
.home-value-offers-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
.home-value-offer-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.35rem 1.3rem 1.45rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    transition: var(--transition-fast, 0.2s ease);
    overflow: hidden;
}
.home-value-offer-card:hover {
    border-color: rgba(220, 38, 38, 0.28);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.09);
}
.home-value-offer-card__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f09433 0%, #dc2743 45%, #1877f2 100%);
}
.home-value-offer-card--subs .home-value-offer-card__accent {
    background: linear-gradient(90deg, #7c3aed 0%, #dc2626 55%, #ea580c 100%);
}
.home-value-offer-card__badge {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--gray-100, #f3f4f6);
    color: var(--gray-700, #374151);
}
.home-value-offer-card--bundles .home-value-offer-card__badge {
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #9a3412;
    border: 1px solid #fdba74;
}
.home-value-offer-card--subs .home-value-offer-card__badge {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}
.home-value-offer-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.35rem;
    margin-bottom: 0.65rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}
.home-value-offer-card--subs .home-value-offer-card__icon {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
}
.home-value-offer-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-900, #111827);
    margin: 0 0 0.5rem;
    padding-right: 4rem;
}
.home-value-offer-card__desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--gray-600, #4b5563);
    margin: 0 0 1.1rem;
    flex: 1;
}
.home-value-offer-card__cta {
    margin-top: auto;
}

/* Story promo page — conversion-focused layout + dropzone */
.story-promo-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
    padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}
.story-promo-page__wrap {
    max-width: min(72rem, 100%);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-width: 0;
}
.story-promo-page__form-col {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    min-width: 0;
}
.story-promo-head {
    text-align: center;
    margin-bottom: 1.75rem;
}
.story-promo-head--hero {
    margin-bottom: 1.9rem;
    padding-inline: clamp(0.15rem, 2vw, 1.5rem);
}
.story-promo-head__badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    box-shadow: 0 4px 16px rgba(185, 28, 28, 0.35);
    margin-bottom: 1rem;
}
.story-promo-head__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.45rem, 4.5vw, 1.85rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--gray-900);
}
.story-promo-head--hero .story-promo-head__title {
    font-size: clamp(1.55rem, 4.6vw, 2.2rem);
    line-height: 1.12;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}
.story-promo-head__lead {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.55;
    color: var(--gray-600);
    font-weight: 500;
}
.story-promo-head--hero .story-promo-head__lead {
    font-size: clamp(1rem, 2.5vw, 1.14rem);
    line-height: 1.62;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
}
.story-promo-alert {
    margin-bottom: 1.15rem;
    border-radius: 12px;
}
.story-promo-card {
    background: #fff;
    border-radius: 18px;
    padding: 1.35rem 1.25rem 1.5rem;
    border: 1px solid var(--gray-100);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
}
.story-promo-field {
    margin-bottom: 1.25rem;
}
.story-promo-field--platform {
    margin-bottom: 1.35rem;
    border: 0;
    padding: 0;
    margin-inline: 0;
    min-width: 0;
}
.story-promo-field--platform legend.story-promo-label {
    padding: 0;
    float: none;
}
.story-promo-field--drop {
    margin-bottom: 1.35rem;
}
.story-promo-label {
    display: block;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 0.45rem;
}
.story-promo-input {
    border-radius: 12px !important;
    padding: 0.85rem 1rem !important;
    font-size: max(16px, 1rem) !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.story-promo-account-hint {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
}
.story-promo-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}
.story-promo-platform {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.75rem;
    min-height: 3rem;
    border-radius: 12px;
    border: 2px solid var(--gray-200);
    background: var(--gray-50);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.story-promo-platform:hover {
    border-color: rgba(220, 38, 38, 0.35);
    background: #fff;
}
.story-promo-platform input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.story-promo-platform input:focus-visible + .story-promo-platform__text {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.story-promo-platform input:checked ~ .story-promo-platform__text {
    font-weight: 800;
    color: var(--primary-dark);
}
.story-promo-platform.is-selected,
.story-promo-platform:has(input:checked) {
    border-color: rgba(220, 38, 38, 0.55);
    background: linear-gradient(145deg, #fffefe 0%, #fff7ed 100%);
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12);
}
.story-promo-platform__text {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-800);
}
.story-promo-drop-outer {
    margin-top: 0.35rem;
}
.story-promo-dropzone {
    position: relative;
    display: block;
    margin: 0;
    min-height: 11.5rem;
    border-radius: 16px;
    border: 2px dashed rgba(251, 191, 36, 0.85);
    background: linear-gradient(165deg, rgba(255, 251, 235, 0.95) 0%, rgba(254, 243, 199, 0.35) 55%, rgba(255, 255, 255, 0.98) 100%);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}
.story-promo-dropzone:hover {
    border-color: rgba(245, 158, 11, 0.95);
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.18);
}
.story-promo-dropzone--drag {
    border-color: var(--primary);
    border-style: solid;
    transform: scale(1.01);
    box-shadow: 0 12px 36px rgba(220, 38, 38, 0.18);
}
.story-promo-dropzone--has-file {
    border-style: solid;
    border-color: rgba(34, 197, 94, 0.55);
    background: linear-gradient(165deg, #f0fdf4 0%, #ffffff 70%);
}
.story-promo-dropzone__native {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 4;
    font-size: 0;
}
.story-promo-dropzone__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 11.5rem;
    padding: 1.35rem 1rem;
    pointer-events: none;
}
.story-promo-dropzone__idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    max-width: 17rem;
}
.story-promo-dropzone__ico {
    display: flex;
    color: var(--primary);
    opacity: 0.88;
    margin-bottom: 0.15rem;
}
.story-promo-dropzone__title {
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.35;
}
.story-promo-dropzone__hint {
    font-size: 0.84rem;
    color: var(--gray-500);
    font-weight: 500;
}
.story-promo-dropzone__picked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}
.story-promo-dropzone__thumb-wrap {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}
.story-promo-dropzone__thumb {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
}
.story-promo-dropzone__thumb:not([src]) {
    display: none;
}
.story-promo-dropzone__fname {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    word-break: break-all;
    max-width: 100%;
}
.story-promo-dropzone__change {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
}
.story-promo-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--gray-600);
    margin-bottom: 1.25rem;
}
.story-promo-consent input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}
.story-promo-submit {
    width: 100%;
    border-radius: 14px !important;
    padding: 0.95rem 1.25rem !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35);
}
.story-promo-submit:hover {
    transform: translateY(-1px);
}
.story-promo-trust-line {
    margin: 0.85rem 0 0;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-500);
    letter-spacing: 0.02em;
}
.story-promo-fine {
    margin: 1.75rem 0 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--gray-500);
    text-align: center;
}
.story-promo-privacy {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    text-align: center;
}

/* === Cerinte obligatorii (rules block) === */
.story-promo-rules {
    margin: 0 0 1.5rem;
    padding: 1.25rem 1.35rem 1.35rem;
    background: linear-gradient(180deg, #fff7ed 0%, #fffaf3 100%);
    border: 1.5px solid #fed7aa;
    border-radius: 18px;
    box-shadow: 0 6px 24px -16px rgba(234, 88, 12, 0.35);
}
.story-promo-rules__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.55rem;
}
.story-promo-rules__icon {
    font-size: 1.2rem;
    line-height: 1;
}
.story-promo-rules__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #9a3412;
    letter-spacing: -0.01em;
}
.story-promo-rules__intro {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #7c2d12;
}
.story-promo-rules__list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    gap: 0.55rem;
}
.story-promo-rules__list li {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #1f2937;
    padding: 0.55rem 0.7rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    border: 1px solid rgba(254, 215, 170, 0.6);
}
.story-promo-rules__list li strong { color: #ea580c; }
.story-promo-rules__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
    font-weight: 900;
    font-size: 0.78rem;
    line-height: 1;
    margin-top: 0.05rem;
}
.story-promo-rules__forbidden {
    margin-top: 0.5rem;
    padding: 0.85rem 0.95rem 1rem;
    background: rgba(254, 226, 226, 0.65);
    border: 1px solid rgba(252, 165, 165, 0.55);
    border-radius: 12px;
}
.story-promo-rules__forbidden-label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b91c1c;
}
.story-promo-rules__forbidden ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.4rem 1rem;
}
.story-promo-rules__forbidden li {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 0.86rem;
    line-height: 1.45;
    color: #7f1d1d;
}
.story-promo-rules__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-weight: 900;
    font-size: 0.7rem;
    line-height: 1;
    margin-top: 0.1rem;
}

/* === Instagram-only banner & ack consent === */
.story-promo-platform-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: -0.25rem 0 1rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(135deg, #fef3c7 0%, #fce7f3 50%, #ede9fe 100%);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 700;
    color: #6b21a8;
}
.story-promo-platform-banner__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #f59e0b, #ec4899 50%, #8b5cf6);
    color: #fff;
    flex-shrink: 0;
}
.story-promo-consent--ack {
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.18);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    font-weight: 600;
    color: #4c1d95;
}

/* === Pagina de claim ( /promo-story/claim/:token ) === */
.story-claim-page { padding: 2.5rem 0 3rem; }
.story-claim-head {
    text-align: center;
    margin-bottom: 1.75rem;
}
.story-claim-head__badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #ec4899 50%, #8b5cf6);
    color: #fff;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
    box-shadow: 0 8px 22px -10px rgba(139, 92, 246, 0.5);
}
.story-claim-head__title {
    margin: 0 0 0.55rem;
    font-size: 1.85rem;
    line-height: 1.18;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.015em;
}
.story-claim-head__lead {
    margin: 0 auto;
    max-width: 560px;
    color: var(--gray-600);
    font-size: 1rem;
    line-height: 1.55;
}
.story-claim-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 1.75rem 1.5rem 1.65rem;
    box-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.18);
    text-align: center;
}
.story-claim-card--form { text-align: left; }
.story-claim-card__head {
    text-align: center;
    margin-bottom: 1.25rem;
}
.story-claim-card__ico {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.story-claim-card__ico--brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f59e0b, #ec4899 50%, #8b5cf6);
    color: #fff;
    margin-bottom: 0.6rem;
}
.story-claim-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.01em;
}
.story-claim-card__text {
    margin: 0 0 1.1rem;
    font-size: 0.96rem;
    line-height: 1.55;
    color: var(--gray-600);
}
.story-claim-card--success {
    border-color: #bbf7d0;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%);
}
.story-claim-card--success .story-claim-card__title { color: #14532d; }
.story-claim-card--error {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fef2f2 0%, #ffffff 100%);
}
.story-claim-card--error .story-claim-card__title { color: #7f1d1d; }
.story-claim-card__url {
    margin: 0.5rem 0 1.1rem;
    font-size: 0.85rem;
    color: var(--gray-700);
    word-break: break-all;
}
.story-claim-card__url-label {
    font-weight: 700;
    margin-right: 0.3rem;
    color: var(--gray-800);
}
.story-claim-card__url code {
    background: rgba(124, 58, 237, 0.08);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    color: #6b21a8;
    font-size: 0.85rem;
}
.story-claim-alert {
    margin-bottom: 1rem;
    border-radius: 12px;
}
.story-claim-form { margin: 0; }
.story-claim-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-700);
    margin-bottom: 0.45rem;
}
.story-claim-input {
    width: 100%;
    padding: 0.95rem 1.05rem;
    border-radius: 12px;
    font-size: 1rem;
    border: 1.5px solid var(--gray-200);
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.story-claim-input:focus-visible {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.18);
}
.story-claim-hint {
    margin: 0.45rem 0 1.1rem;
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.45;
}
.story-claim-submit {
    width: 100%;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    font-size: 1.02rem;
    font-weight: 800;
    border-radius: 12px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border: none;
    color: #fff;
    box-shadow: 0 14px 30px -16px rgba(139, 92, 246, 0.65);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.story-claim-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 36px -16px rgba(139, 92, 246, 0.7);
}
.story-claim-warnings {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    display: grid;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--gray-500);
    line-height: 1.45;
}
.story-claim-warnings li::before {
    content: "•";
    color: #8b5cf6;
    font-weight: 900;
    margin-right: 0.45rem;
}

@media (max-width: 600px) {
    .story-claim-page { padding: 1.5rem 0 2.25rem; }
    .story-claim-head__title { font-size: 1.4rem; line-height: 1.2; }
    .story-claim-head__lead { font-size: 0.92rem; }
    .story-claim-card { padding: 1.25rem 1rem 1.35rem; border-radius: 16px; }
    .story-claim-card__title { font-size: 1.1rem; }
    .story-claim-card__text { font-size: 0.9rem; }
    .story-claim-input { padding: 0.85rem 0.95rem; font-size: 0.95rem; }
    .story-promo-rules { padding: 1rem 0.95rem 1.1rem; border-radius: 14px; }
    .story-promo-rules__title { font-size: 0.98rem; }
    .story-promo-rules__intro { font-size: 0.85rem; }
    .story-promo-rules__list li { font-size: 0.86rem; padding: 0.5rem 0.6rem; }
    .story-promo-rules__forbidden li { font-size: 0.81rem; }
    .story-promo-platform-banner { font-size: 0.8rem; padding: 0.6rem 0.75rem; }
}

@media (max-width: 768px) {
    .story-promo-page {
        padding-top: 1.25rem;
        padding-bottom: 2.25rem;
    }
    .story-promo-head {
        margin-bottom: 1.4rem;
    }
    .story-promo-head__badge {
        font-size: 0.68rem;
        padding: 0.36rem 0.8rem;
    }
    .story-promo-head__lead {
        font-size: 0.96rem;
        line-height: 1.6;
        padding-inline: 0.15rem;
    }
    .story-promo-head--hero .story-promo-head__lead {
        font-size: 0.96rem;
    }
}

@media (max-width: 520px) {
    .story-promo-card {
        padding: 1.15rem 0.95rem 1.35rem;
        border-radius: 16px;
    }
    .story-promo-head__title {
        font-size: 1.38rem;
        line-height: 1.2;
        padding-inline: 0.15rem;
    }
    .story-promo-head--hero .story-promo-head__title {
        font-size: 1.38rem;
        line-height: 1.2;
        max-width: none;
    }
    .story-promo-head--hero .story-promo-head__lead {
        font-size: 0.94rem;
        max-width: none;
        padding-inline: 0.15rem;
    }
    .story-promo-label {
        font-size: 0.76rem;
        letter-spacing: 0.025em;
        line-height: 1.35;
        hyphens: auto;
        -webkit-hyphens: auto;
    }
    .story-promo-platforms {
        gap: 0.55rem;
    }
    .story-promo-platform {
        min-height: 3.15rem;
        padding: 0.95rem 0.65rem;
    }
    .story-promo-platform__text {
        font-size: 0.92rem;
    }
    .story-promo-dropzone {
        min-height: 10rem;
        border-radius: 14px;
    }
    .story-promo-dropzone__content {
        min-height: 10rem;
        padding: 1.1rem 0.85rem;
    }
    .story-promo-dropzone__idle {
        max-width: 100%;
        padding-inline: 0.2rem;
    }
    .story-promo-dropzone__ico svg {
        width: 40px;
        height: 40px;
    }
    .story-promo-dropzone__title {
        font-size: 0.98rem;
    }
    .story-promo-dropzone__hint {
        font-size: 0.8rem;
        line-height: 1.45;
    }
    .story-promo-consent {
        font-size: 0.81rem;
        gap: 0.72rem;
        align-items: flex-start;
    }
    .story-promo-consent input {
        width: 1.125rem;
        height: 1.125rem;
        margin-top: 0.18rem;
        flex-shrink: 0;
    }
    .story-promo-submit {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        min-height: 3rem;
    }
    .story-promo-trust-line {
        font-size: 0.78rem;
        padding-inline: 0.25rem;
    }
    .story-promo-fine {
        font-size: 0.73rem;
        padding-inline: 0.35rem;
    }
}

@media (max-width: 380px) {
    .story-promo-platforms {
        grid-template-columns: 1fr;
    }
    .story-promo-dropzone {
        min-height: 9.25rem;
    }
    .story-promo-dropzone__content {
        min-height: 9.25rem;
        padding: 1rem 0.65rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .story-promo-dropzone--drag {
        transform: none;
    }
    .story-promo-submit:hover {
        transform: none;
    }
}

/* ================================================
   Features / Why Us
   ================================================ */
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }

.feature-card {
    background: white; border-radius: var(--radius-lg); padding: 2.25rem 1.75rem;
    text-align: center; border: 1px solid var(--gray-200); transition: var(--transition);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-200); }

.feature-icon {
    width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: var(--primary-50);
}
.feature-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-900); }
.feature-card p { color: var(--gray-400); font-size: 0.88rem; line-height: 1.6; }

/* ================================================
   How It Works
   ================================================ */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative; }
.steps-grid::before {
    content: ''; position: absolute; top: 40px; left: 15%; right: 15%; height: 2px;
    background: linear-gradient(90deg, var(--gray-200) 0%, var(--primary-200) 50%, var(--gray-200) 100%);
}
.step-card { text-align: center; position: relative; }
.step-number {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 800; margin: 0 auto 1.5rem; position: relative; z-index: 1;
    background: white; border: 3px solid var(--gray-200); color: var(--gray-400); transition: var(--transition);
}
.step-card:hover .step-number { background: var(--primary-gradient); color: white; border-color: transparent; box-shadow: var(--shadow-primary); }
.step-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--gray-900); }
.step-card p { color: var(--gray-400); font-size: 0.9rem; line-height: 1.6; max-width: 280px; margin: 0 auto; }

/* ================================================
   FAQ
   ================================================ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
    background: white; border: 1px solid var(--gray-200); border-radius: var(--radius);
    margin-bottom: 0.75rem; overflow: hidden; transition: var(--transition);
}
.faq-item.active { border-color: var(--primary-200); box-shadow: 0 4px 16px rgba(220,38,38,0.06); }
.faq-question {
    display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem;
    cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--gray-800); transition: var(--transition-fast);
    background: none; border: none; width: 100%; text-align: left; font-family: inherit;
}
.faq-question:hover { color: var(--primary); }
.faq-icon {
    width: 28px; height: 28px; border-radius: 50%; background: var(--gray-100);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: var(--transition); font-size: 1.1rem; color: var(--gray-400); font-weight: 400;
}
.faq-item.active .faq-icon { background: var(--primary); color: white; transform: rotate(45deg); }
.faq-answer {
    max-height: 0; overflow: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-answer-inner {
    padding: 0 1.5rem 1.25rem; color: var(--gray-500); font-size: 0.92rem; line-height: 1.7;
}

/* ================================================
   CTA Banner
   ================================================ */
.cta-banner {
    background: var(--primary-gradient); border-radius: var(--radius-xl);
    padding: 4rem 3rem; text-align: center; position: relative; overflow: hidden;
}
.cta-banner::before {
    content: ''; position: absolute; top: -60%; right: -10%; width: 300px; height: 300px;
    background: rgba(255,255,255,0.08); border-radius: 50%;
}
.cta-banner::after {
    content: ''; position: absolute; bottom: -40%; left: -5%; width: 200px; height: 200px;
    background: rgba(255,255,255,0.05); border-radius: 50%;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { font-size: 2rem; font-weight: 800; color: white; margin-bottom: 0.75rem; letter-spacing: -0.02em; }
.cta-banner p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: 2rem; max-width: 450px; margin-left: auto; margin-right: auto; }

/* ================================================
   Social Proof / Counters
   ================================================ */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.proof-item { text-align: center; }
.proof-value { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; }
.section-dark .proof-value { color: white; }
.proof-label { font-size: 0.88rem; color: var(--gray-400); margin-top: 0.25rem; font-weight: 500; }

/* ================================================
   Services Page — simple (platform → chips → form)
   ================================================ */
.section.section-services--simple + .section.home-value-offers-section {
    padding-top: 2.25rem;
}
.section.home-value-offers-section + .section.services-marketing-below {
    padding-top: 3.25rem;
}
.section.section-services--simple + .section.services-marketing-below {
    padding-top: 3.5rem;
}

.services-hero-card {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
    padding: 2.1rem 2rem 1.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    border: 1px solid #eef0f7;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.03);
    overflow: hidden;
}
.services-hero-card__accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #f09433 0%, #dc2743 35%, #DC2626 65%, #1877f2 100%);
}
.services-hero-card__title {
    text-align: center;
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.55rem;
    color: var(--gray-900, #111827);
}
.services-hero-card__lead {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--gray-600, #4b5563);
    max-width: 36rem;
    margin: 0 auto 1.6rem;
}

.section-services--simple .services-simple__title {
    text-align: center;
    font-size: clamp(1.35rem, 4vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 0.6rem;
}
.services-hero-card .services-simple__title {
    margin-bottom: 0;
}
.services-hero-card .services-simple__lead {
    margin-bottom: 1.6rem;
}

.services-simple__lead {
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--gray-600, #4b5563);
    max-width: 34rem;
    margin: 0 auto 1.5rem;
}

.services-simple__step {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-bottom: 0.55rem;
}
.services-simple__step--2 {
    margin-top: 1.35rem;
    margin-bottom: 0.55rem;
}
.services-simple__step-num {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--gray-900, #111827);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 0.12rem;
}
.services-simple__step-title {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}
.services-simple__step-hint {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--gray-500, #6b7280);
}

.services-simple__placeholder {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--gray-600, #4b5563);
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    line-height: 1.45;
}

.services-simple {
    max-width: 520px;
    margin: 0 auto;
}

.services-simple__platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.services-simple-platform {
    flex: 1 1 140px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 80px;
    padding: 0.7rem 0.75rem;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--gray-800, #1f2937);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease, background 0.2s ease;
    font-family: inherit;
}
.services-simple-platform__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    line-height: 1;
    transition: color 0.2s ease;
}
.services-simple-platform__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.services-simple-platform__icon .platform-icon-img--discord {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.services-simple-platform__label {
    display: inline-block;
    line-height: 1.1;
}
.services-simple-platform--instagram .services-simple-platform__icon { color: #e1306c; }
.services-simple-platform--tiktok .services-simple-platform__icon { color: #fe2c55; }
.services-simple-platform--x .services-simple-platform__icon { color: #000000; }
.services-simple-platform--facebook .services-simple-platform__icon { color: #1877f2; }
.services-simple-platform--youtube .services-simple-platform__icon { color: #ff0000; }
.services-simple-platform--discord .services-simple-platform__icon { color: #5865f2; }
.services-simple-platform.is-active .services-simple-platform__icon { color: #fff; }
.services-simple-platform:hover {
    border-color: #cbd5e1;
    transform: translateY(-1px);
}
.services-simple-platform:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.35);
}
.services-simple-platform.is-active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}
.services-simple-platform--instagram.is-active {
    background: linear-gradient(135deg, #f09433 0%, #dc2743 50%, #bc1888 100%);
}
.services-simple-platform--tiktok.is-active {
    background: linear-gradient(135deg, #25f4ee 0%, #fe2c55 55%, #0f172a 100%);
}
.services-simple-platform--x.is-active {
    background: linear-gradient(135deg, #1f1f1f 0%, #000000 100%);
}
.services-simple-platform--facebook.is-active {
    background: linear-gradient(135deg, #1877f2 0%, #0d47a1 100%);
}
.services-simple-platform--youtube.is-active {
    background: linear-gradient(135deg, #ff4e45 0%, #ff0000 55%, #c4302b 100%);
}
.services-simple-platform--discord.is-active {
    background: linear-gradient(135deg, #7289da 0%, #5865f2 55%, #3c45a5 100%);
}
.services-simple-platform:not([class*="--instagram"]):not([class*="--tiktok"]):not([class*="--x"]):not([class*="--facebook"]):not([class*="--youtube"]):not([class*="--discord"]).is-active {
    background: linear-gradient(135deg, #64748b 0%, #334155 100%);
}

.services-simple__chips-wrap {
    min-height: 3rem;
}

.services-simple__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: center;
}
.services-simple__chips--hidden {
    display: none !important;
}

.services-simple-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.55rem 1.1rem;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--gray-800, #1f2937);
    background: #fff;
    border: 2px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.services-simple-chip:hover {
    border-color: #cbd5e1;
    color: var(--gray-900);
    transform: translateY(-1px);
}
.services-simple-chip--instagram:hover { border-color: rgba(225, 48, 108, 0.45); }
.services-simple-chip--tiktok:hover { border-color: rgba(254, 44, 85, 0.45); }
.services-simple-chip--x:hover { border-color: rgba(0, 0, 0, 0.45); }
.services-simple-chip--facebook:hover { border-color: rgba(24, 119, 242, 0.45); }
.services-simple-chip--youtube:hover { border-color: rgba(255, 0, 0, 0.45); }
.services-simple-chip--discord:hover { border-color: rgba(88, 101, 242, 0.55); }

.services-simple-chip.is-active {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
}
.services-simple-chip:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
}
.services-simple-chip__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #b45309;
    background: rgba(251, 191, 36, 0.18);
    line-height: 1;
}
.services-simple-chip__rating-star {
    color: #f59e0b;
    font-size: 0.85rem;
    line-height: 1;
}
.services-simple-chip.is-active .services-simple-chip__rating {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}
.services-simple-chip.is-active .services-simple-chip__rating-star {
    color: #fef3c7;
}
.services-simple-chip.is-active:focus-visible {
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.55), 0 4px 16px rgba(22, 163, 74, 0.35);
}
.services-simple-chip__price {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-700);
    background: var(--gray-100);
    line-height: 1;
    white-space: nowrap;
}
.services-simple-chip.is-active .services-simple-chip__price {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.platform-badge {
    display: inline-flex; align-items: center; padding: 0.3rem 0.9rem; border-radius: 100px;
    font-size: 0.78rem; font-weight: 600; color: white; letter-spacing: 0.01em;
}
.platform-badge.platform-instagram { background: var(--instagram); }
.platform-badge.platform-tiktok { background: var(--tiktok); }
.platform-badge.platform-x { background: var(--x); }
.platform-badge.platform-facebook { background: var(--facebook); }
.platform-badge.platform-youtube { background: var(--youtube); }
.platform-badge.platform-discord { background: var(--discord); }

.services-order-instant {
    margin-top: 1.5rem;
    border-radius: 14px;
    border: 1px solid var(--gray-200, #e5e7eb);
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.06);
}
.section-services--simple .services-order-instant {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Services page — wider hero + picker on tablet/desktop */
@media (min-width: 900px) {
    .services-hero-card {
        max-width: min(1040px, calc(100vw - 4rem));
        padding: 2.35rem 2.75rem 2.05rem;
        border-radius: 24px;
    }
    .services-simple {
        max-width: none;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .services-hero-card__lead {
        max-width: 52rem;
    }
    .services-simple__lead {
        max-width: 48rem;
    }
    .services-simple__platforms {
        gap: 0.85rem;
        margin-bottom: 0.35rem;
    }
    .services-simple-platform {
        flex: 1 1 160px;
        max-width: 240px;
        min-height: 82px;
        padding: 0.75rem 1rem;
    }
    .services-simple__chips {
        gap: 0.65rem;
        max-width: none;
        justify-content: flex-start;
    }
    .services-simple-chip {
        flex: 0 1 auto;
        min-height: 48px;
        padding: 0.52rem 1.25rem;
    }
}

@media (min-width: 1280px) {
    .services-hero-card {
        max-width: min(1180px, calc(100vw - 4rem));
        padding: 2.55rem 3rem 2.25rem;
    }
}
.services-order-instant[hidden] { display: none !important; }
.services-order-instant.is-loading {
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sticky mobile CTA — appears after order form loads, hides when real submit is on screen */
.services-mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(110%);
    transition: transform 0.28s ease;
    pointer-events: none;
}
.services-mobile-cta.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
.services-mobile-cta__info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1 1 auto;
    min-width: 0;
}
.services-mobile-cta__label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-500, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.services-mobile-cta__total {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900, #111827);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.services-mobile-cta__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.1rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #DC2626 0%, #b91c1c 100%);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 800;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.30);
    text-decoration: none;
    font-family: inherit;
    line-height: 1;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.services-mobile-cta__btn:hover { transform: translateY(-1px); }
.services-mobile-cta__btn:active { transform: translateY(0); }
.services-mobile-cta__btn-icon { font-size: 1rem; line-height: 1; }
@media (max-width: 768px) {
    .services-mobile-cta { display: flex; }
    body.has-services-mobile-cta { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}
.services-order-instant__loading {
    margin: 0;
    padding: 1.25rem;
    font-size: 0.9rem;
    color: var(--gray-600, #4b5563);
}

.order-embed-shell { padding: 0; }
.order-embed-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem 0.25rem;
    background: transparent;
    border-bottom: 0;
}
.order-embed-toolbar--minimal { padding: 0.35rem 0.5rem 0; }
.order-embed-close {
    font-size: 1.45rem;
    line-height: 1;
    padding: 0.2rem 0.6rem !important;
    min-width: 2.5rem;
    color: var(--gray-500, #6b7280);
    background: transparent;
}
.order-embed-close:hover, .order-embed-close:focus { color: var(--gray-900, #111827); background: var(--gray-100, #f3f4f6); }

.order-page-section--embed { padding-top: 1rem; padding-bottom: 1.5rem; }
.order-progress-bar--embed { margin-bottom: 1.25rem; }
.order-page-grid--embed .order-sidebar-col { display: none; }

/* === Embed compact pe mobil: scoatem aerul mort din partea de sus === */
@media (max-width: 768px) {
    .order-embed-toolbar { padding: 0.2rem 0.4rem 0; }
    .order-embed-toolbar--minimal { padding: 0.15rem 0.35rem 0; }
    .order-embed-close { font-size: 1.3rem; padding: 0.15rem 0.45rem !important; min-width: 2rem; }

    .order-page-section--embed {
        padding-top: 0.45rem;
        padding-bottom: 0.85rem;
    }
    .order-page-grid--embed { gap: 0.65rem; }

    .order-progress-bar--embed {
        margin-bottom: 0.7rem;
        max-width: 280px;
    }
    .order-progress-bar--embed .progress-dot { width: 24px; height: 24px; font-size: 0.65rem; }
    .order-progress-bar--embed .progress-label { font-size: 0.6rem; margin-top: 0.2rem; }
    .order-progress-bar--embed .progress-line { min-width: 22px; height: 2px; }

    .order-page-grid--embed .order-form-wrapper {
        padding: 0.85rem 0.85rem 1rem;
        border-radius: 14px;
    }
    .order-page-grid--embed .order-service-info {
        margin-bottom: 0.85rem;
        padding-bottom: 0.7rem;
        border-bottom-color: var(--gray-100, #f3f4f6);
    }
    .order-page-grid--embed .order-service-top {
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        margin-bottom: 0.4rem;
    }
    .order-page-grid--embed .order-service-info h2 {
        font-size: 1.05rem;
        margin-top: 0;
        line-height: 1.2;
    }
    .order-page-grid--embed .order-service-info p {
        font-size: 0.78rem;
        line-height: 1.35;
        margin-top: 0.25rem;
        color: var(--gray-500, #6b7280);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .order-page-grid--embed .platform-badge {
        font-size: 0.68rem;
        padding: 0.22rem 0.6rem;
    }
}

@media (max-width: 480px) {
    .order-page-section--embed { padding-top: 0.3rem; padding-bottom: 0.6rem; }
    .order-progress-bar--embed { margin-bottom: 0.55rem; max-width: 240px; }
    .order-progress-bar--embed .progress-dot { width: 22px; height: 22px; font-size: 0.6rem; }
    .order-progress-bar--embed .progress-label { font-size: 0.56rem; }
    .order-progress-bar--embed .progress-line { min-width: 16px; }

    .order-page-grid--embed .order-form-wrapper { padding: 0.75rem 0.75rem 0.9rem; }
    .order-page-grid--embed .order-service-info {
        margin-bottom: 0.7rem;
        padding-bottom: 0.6rem;
    }
    .order-page-grid--embed .order-service-info h2 { font-size: 1rem; }
    .order-page-grid--embed .order-service-info p { font-size: 0.74rem; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ================================================
   Order Progress Bar
   ================================================ */
.order-progress-bar {
    display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 2.5rem;
    max-width: 420px; margin-left: auto; margin-right: auto;
}
.progress-step {
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; z-index: 1;
}
.progress-dot {
    width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.82rem; font-weight: 700; background: var(--gray-200); color: var(--gray-500);
    border: 2px solid var(--gray-200); transition: all 0.3s ease;
}
.progress-step.completed .progress-dot {
    background: var(--success); border-color: var(--success); color: white;
}
.progress-step.active .progress-dot {
    background: var(--primary); border-color: var(--primary); color: white;
    box-shadow: 0 0 0 4px var(--primary-glow);
}
.progress-label { font-size: 0.72rem; font-weight: 600; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.04em; }
.progress-step.completed .progress-label { color: var(--success); }
.progress-step.active .progress-label { color: var(--primary); }
.progress-line {
    flex: 1; height: 3px; background: var(--gray-200); min-width: 50px;
    margin-top: -1.4rem;
}
.progress-line.completed { background: var(--success); }

/* ================================================
   Order Page Grid
   ================================================ */
.order-page-section { padding-top: 2rem; }
/* Bonus livrare — compact, sub rezumat plată (conversie) */
.order-loyalty-note {
    margin: 0.45rem 0 0.85rem;
    padding: 0.42rem 0.55rem 0.48rem;
    border-radius: 8px;
    border: 1px solid rgba(22, 163, 74, 0.2);
    background: linear-gradient(165deg, rgba(236, 253, 245, 0.85) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.order-loyalty-note__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0 0 0.22rem;
}
.order-loyalty-note__title {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #047857;
    line-height: 1.35;
}
.order-loyalty-note__text {
    margin: 0;
    font-size: 0.635rem;
    font-weight: 500;
    line-height: 1.42;
    color: #374151;
}
.order-summary-delivered-qty.order-summary-value--receive {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.1rem;
    max-width: 100%;
    white-space: normal;
    font-weight: 700;
    color: #15803d;
}
.order-summary-delivered-suffix {
    font-size: 0.88em;
    font-weight: 700;
    opacity: 0.92;
    white-space: nowrap;
}

/* Order — package picker (compact chips) */
.form-group--packages {
    margin-bottom: 1.35rem;
}
.order-packages-picker {
    padding: 0.55rem 0.6rem 0.6rem;
    background: linear-gradient(180deg, #fafafa 0%, #f4f4f5 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.order-packages-choose-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gray-500, #6b7280);
    margin-bottom: 0.4rem;
}
.order-packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.38rem;
}
.order-package-card {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}
.order-package-card:hover {
    border-color: #fca5a5;
    background: #fffafb;
}
.order-package-card:has(.order-package-radio:focus-visible) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(220, 38, 38, 0.35);
}
.order-package-radio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.order-package-radio:focus {
    outline: none;
}
.order-package-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    padding: 0.38rem 0.45rem 0.42rem 0.48rem;
    padding-right: 1.05rem;
    pointer-events: none;
}
.order-package-card__title {
    font-weight: 600;
    font-size: 0.74rem;
    line-height: 1.22;
    color: var(--gray-800, #1f2937);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.order-package-card__price {
    font-weight: 800;
    font-size: 0.8rem;
    color: var(--primary, #dc2626);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.order-package-card--selected {
    border-color: #dc2626;
    background: linear-gradient(145deg, #fffdfd 0%, #fff5f5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 6px rgba(220, 38, 38, 0.1);
}
.order-package-card--selected .order-package-card__price {
    color: #b91c1c;
}
.order-package-card--selected .order-package-card__body::after {
    content: '\2713';
    position: absolute;
    top: 0.22rem;
    right: 0.28rem;
    font-size: 0.58rem;
    font-weight: 800;
    color: #dc2626;
    line-height: 1;
}
.order-package-card__per1000 {
    font-size: 0.66rem;
    color: var(--gray-500, #6b7280);
    font-variant-numeric: tabular-nums;
    margin-top: 0.05rem;
}
.order-package-card__savings {
    display: inline-block;
    margin-top: 0.12rem;
    align-self: flex-start;
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 0.06rem 0.4rem;
    font-size: 0.50rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1.1;
}
/* Pachet "Cel mai ales" — bordura aurie + subtle warm tint + bandă sus integrată curat. */
.order-package-card--popular {
    border-color: #f59e0b;
    box-shadow:
        0 0 0 1px rgba(245, 158, 11, 0.32),
        0 4px 14px rgba(202, 138, 4, 0.18);
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 60%);
}
.order-package-card--popular:hover {
    border-color: #d97706;
    background: linear-gradient(180deg, #fef3c7 0%, #fffaf0 60%);
}
.order-package-card--popular.order-package-card--selected {
    border-color: #dc2626;
    box-shadow:
        0 0 0 1px rgba(220, 38, 38, 0.35),
        0 4px 16px rgba(220, 38, 38, 0.16);
}
/* Body cobora cu padding-top ca textul sa nu se ascunda sub banda de sus. */
.order-package-card--popular .order-package-card__body {
    padding-top: 1.55rem;
}
/* Cand e si "Cel mai ales" si "selectat", check-ul se muta sub banda. */
.order-package-card--popular.order-package-card--selected .order-package-card__body::after {
    top: 1.32rem;
}
/* Bandă lipită pe toată lățimea, prinsă curat în border-radius prin overflow:hidden de pe card. */
.order-package-card__badge {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.1rem;
    padding: 0 0.4rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(90deg, #fbbf24 0%, #f59e0b 55%, #d97706 100%);
    color: #1f1208;
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    border-radius: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        inset 0 -1px 0 rgba(124, 45, 18, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    pointer-events: none;
    white-space: nowrap;
    line-height: 1;
}
.order-package-card__badge::before {
    content: '\2605';
    font-size: 0.6rem;
    margin-right: 0.32rem;
    color: #7c2d12;
}

/* Half-price quantity boost upsell — compact promo strip */
.order-half-boost {
    position: relative;
    margin: 0.75rem 0 0.85rem;
    padding: 0.65rem 0.72rem 0.62rem 0.9rem;
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.42);
    background:
        radial-gradient(ellipse 140% 90% at 100% -20%, rgba(254, 202, 202, 0.45) 0%, transparent 52%),
        radial-gradient(ellipse 80% 60% at 0% 100%, rgba(254, 226, 226, 0.38) 0%, transparent 45%),
        linear-gradient(168deg, #fff5f5 0%, #ffffff 42%, #fff8f8 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 3px 14px rgba(220, 38, 38, 0.11),
        0 1px 4px rgba(17, 24, 39, 0.05);
    overflow: hidden;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.order-half-boost:has(.order-half-boost__input:checked):not(.order-half-boost--muted) {
    border-color: rgba(220, 38, 38, 0.62);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 0 0 2px rgba(220, 38, 38, 0.12),
        0 4px 20px rgba(220, 38, 38, 0.14),
        0 2px 6px rgba(17, 24, 39, 0.06);
}
.order-half-boost::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, #f87171 0%, #dc2626 45%, #991b1b 100%);
    box-shadow: 1px 0 5px rgba(220, 38, 38, 0.28);
}
.order-half-boost:not(.order-half-boost--muted):hover {
    border-color: rgba(220, 38, 38, 0.55);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 4px 18px rgba(220, 38, 38, 0.14),
        0 2px 6px rgba(17, 24, 39, 0.06);
}
.order-half-boost--muted {
    opacity: 0.72;
    pointer-events: none;
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
}
.order-half-boost--muted::before {
    opacity: 0.45;
    filter: grayscale(0.35);
}
.order-half-boost__checkbox-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    margin: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
.order-half-boost__input {
    margin-top: 0;
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--primary, #dc2626);
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(220, 38, 38, 0.2));
}
.order-half-boost__input:disabled {
    cursor: not-allowed;
    filter: none;
}
.order-half-boost__box {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    min-width: 0;
}
.order-half-boost__headline {
    display: block;
    font-weight: 800;
    font-size: clamp(0.82rem, 2.2vw, 0.92rem);
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: #7f1d1d;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.88);
}
.order-half-boost__detail {
    display: block;
    margin: 0;
    padding: 0.3rem 0.48rem;
    font-size: clamp(0.76rem, 2vw, 0.82rem);
    font-weight: 700;
    line-height: 1.32;
    color: #991b1b;
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.92) 0%, rgba(254, 202, 202, 0.58) 100%);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset;
}

.order-page-grid {
    display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: flex-start;
}
/* Embed / fragment: must override .order-page-grid (same specificity wins by order — was losing to rule above when only one class). */
.order-page-grid.order-page-grid--embed {
    grid-template-columns: 1fr;
    gap: 1rem;
}
.order-main-col { min-width: 0; }
.order-sidebar-col {
    display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 100px;
}

/* Plată + rezumat: mobil = coloană; desktop = 2 coloane doar cu .order-payment-layout--split-desktop */
.order-payment-layout {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-top: 0.5rem;
}
.order-payment-layout__pay {
    min-width: 0;
}
.order-payment-layout__summary {
    min-width: 0;
}
.order-summary--checkout-aside {
    margin: 0;
}

/* Buton plată + footer SSL/logo-uri/trust: sub grid-ul metode + rezumat, totul centrat */
.order-checkout-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.35rem;
}
.order-checkout-cta__submit-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.15rem 0 0.35rem;
}
.order-checkout-cta .order-submit-btn {
    width: min(100%, 32rem);
}
.order-safe-footer--checkout-cta {
    width: 100%;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.35rem;
}
.order-safe-footer--checkout-cta .order-trust-seal--footer {
    text-align: center;
}
.order-safe-footer--checkout-cta .order-trust-seal__item {
    justify-content: center;
    text-align: center;
}
.order-safe-footer--checkout-cta .order-trust-seal__rating-text {
    justify-content: center;
}

/* Desktop: latime mare — metode stânga, rezumat dreapta (clasa --split-desktop doar pe pagina completa, nu embed) */
@media (min-width: 992px) {
    .order-payment-layout--split-desktop {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
        gap: 1.75rem 2rem;
        align-items: start;
    }
    .order-payment-layout--split-desktop .order-payment-layout__pay {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
    }
    .order-payment-layout--split-desktop .order-payment-layout__summary {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }
    .order-payment-layout--split-desktop .order-payment-layout__summary .order-summary--checkout-aside {
        position: sticky;
        top: 100px;
        padding: 1.2rem 1.25rem 1.4rem;
        border-radius: 14px;
        border: 1px solid var(--gray-100, #f3f4f6);
        background: linear-gradient(165deg, #f9fafb 0%, #ffffff 38%, #fafafa 100%);
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.9) inset,
            0 10px 32px -14px rgba(15, 23, 42, 0.14);
    }
    .order-payment-layout--split-desktop .payment-method-picker {
        margin-top: 0;
    }
    .order-payment-layout--split-desktop .payment-method-picker__legend {
        font-size: 0.95rem;
        margin-bottom: 0.65rem;
        letter-spacing: -0.01em;
    }
    .order-payment-layout--split-desktop .payment-method-picker__grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .order-payment-layout--split-desktop .payment-method-card {
        padding: 0.58rem 2rem 0.58rem 0.72rem;
        border-radius: 11px;
    }
    .order-payment-layout--split-desktop .payment-method-card--paysafe {
        padding: 0;
    }
    .order-payment-layout--split-desktop .payment-method-card--paysafe > .payment-method-card__main {
        padding: 0.58rem 2rem 0.58rem 0.72rem;
    }
    .order-payment-layout--split-desktop + .order-checkout-cta {
        margin-top: 1.15rem;
    }
}

/* ================================================
   Order Form
   ================================================ */
.order-form-wrapper {
    background: white; border-radius: var(--radius-xl); padding: 2.75rem;
    box-shadow: var(--shadow-lg); border: 1px solid var(--gray-100);
}
.order-service-info { margin-bottom: 2.25rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--gray-100); }
.order-service-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.order-service-info h2 { font-size: 1.5rem; font-weight: 700; margin-top: 0.85rem; color: var(--gray-900); }
.order-service-info p { color: var(--gray-400); margin-top: 0.35rem; font-size: 0.95rem; }

.order-checkout-clarity {
    margin-bottom: 1.75rem;
    padding: 1.15rem 1.2rem;
    border-radius: 14px;
    border: 1px solid var(--gray-200);
    background: linear-gradient(165deg, var(--gray-50) 0%, #fff 100%);
}
/* Pe desktop afisat expandat; pe mobil/tableta intra in <details> sub forma de accordion. */
.order-checkout-clarity--desktop-only { display: block; }
@media (min-width: 1025px) {
    /* Pe desktop, ascundem summary-ul si fortam afisarea grid-ului indiferent de [open]. */
    .order-checkout-clarity--mobile-collapsible > summary { display: none; }
    .order-checkout-clarity--mobile-collapsible .order-checkout-clarity__grid { display: grid !important; }
}
@media (max-width: 1024px) {
    /* Pe mobil ascundem heading-ul (folosim summary-ul) ca sa evitam dublura. */
    .order-checkout-clarity--mobile-collapsible > .order-checkout-clarity__heading { display: none; }
    .order-checkout-clarity--mobile-collapsible[open] .order-checkout-clarity__grid { display: grid; }
    .order-checkout-clarity--mobile-collapsible:not([open]) .order-checkout-clarity__grid { display: none; }
    .order-checkout-clarity--mobile-collapsible > summary {
        list-style: none;
        cursor: pointer;
        padding: 0.6rem 0.85rem;
        font-weight: 700;
        font-size: 0.9rem;
        color: var(--gray-800);
        border-radius: 8px;
        background: var(--gray-50);
        margin-bottom: 0.6rem;
    }
    .order-checkout-clarity--mobile-collapsible > summary::-webkit-details-marker { display: none; }
    .order-checkout-clarity--mobile-collapsible > summary::after { content: '\25BC'; float: right; transition: transform 0.2s ease; }
    .order-checkout-clarity--mobile-collapsible[open] > summary::after { transform: rotate(180deg); }
}
.order-checkout-clarity__heading {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-900);
}
.order-checkout-clarity__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
    .order-checkout-clarity__grid { grid-template-columns: 1fr; }
}
.order-checkout-clarity__sub {
    margin: 0 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gray-500);
}
.order-checkout-clarity__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--gray-700);
}
.order-checkout-clarity__text a { font-weight: 700; }
.order-checkout-clarity__sla {
    margin: 0.65rem 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
}
.order-checkout-clarity__block--muted .order-checkout-clarity__text { color: var(--gray-600); }

.success-sla-range { font-size: 0.92rem; margin-top: 0.35rem; }

@keyframes livePulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.7); } }

.form-hint-safe { color: var(--success); font-weight: 500; }

.form-group { margin-bottom: 1.75rem; }
.form-group label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.6rem; color: var(--gray-700); }

.form-control {
    width: 100%; padding: 0.8rem 1.1rem; border: 1.5px solid var(--gray-200); border-radius: 10px;
    font-size: 0.95rem; font-family: inherit; transition: var(--transition-fast);
    background: var(--gray-50); color: var(--gray-800);
}
@media (max-width: 768px) {
    /* Min 16px pe mobil pentru a preveni zoom-ul iOS la focus pe inputuri. */
    .form-control { font-size: 16px; }
}
.form-control:hover { border-color: var(--gray-300); }
.form-control:focus { outline: none; border-color: var(--primary); background: white; box-shadow: 0 0 0 4px var(--primary-glow); }
.form-control::placeholder { color: var(--gray-400); }
.form-control-sm { padding: 0.45rem 0.7rem; font-size: 0.85rem; border-radius: 8px; }
textarea.form-control { resize: vertical; min-height: 70px; }
select.form-control { cursor: pointer; }

.form-hint { display: block; margin-top: 0.45rem; font-size: 0.78rem; color: var(--gray-400); }

/* Multi-link URL fields (checkout) */
.multi-link-urls {
    margin-top: 0.25rem;
}
.multi-link-urls__list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.multi-link-urls__row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.multi-link-urls__row .multi-link-urls__input {
    flex: 1;
    min-width: 0;
}
.multi-link-urls__remove {
    flex-shrink: 0;
    min-width: 2.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-weight: 700;
    line-height: 1.2;
}
@media (max-width: 600px) {
    /* Touch target minim ~44px pe mobil. */
    .multi-link-urls__remove { min-width: 44px; min-height: 44px; }
}
.multi-link-urls__add {
    margin-top: 0.55rem;
}
.multi-link-urls__hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Compact promo code (mini): trigger text-link + pill input + status icon. */
.order-promo-mini {
    margin: 0 0 1.25rem;
}
.order-promo-mini__summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.2rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    list-style: none;
    border: 0;
    background: transparent;
    border-radius: 6px;
    transition: color 0.15s ease;
    outline: none;
}
.order-promo-mini__summary::-webkit-details-marker,
.order-promo-mini__summary::marker { display: none; }
.order-promo-mini__summary:hover { color: var(--primary-dark); }
.order-promo-mini__summary:focus-visible {
    outline: 2px solid rgba(220, 38, 38, 0.35);
    outline-offset: 2px;
}
.order-promo-mini__trigger-text {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0,0,0,0.2);
}
.order-promo-mini__chevron {
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.22s ease;
    opacity: 0.7;
}
.order-promo-mini[open] .order-promo-mini__chevron {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
}
.order-promo-mini__field {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 0.55rem;
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: 999px;
    padding: 0.35rem 0.55rem 0.35rem 1rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.order-promo-mini__field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}
.order-promo-mini__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-900);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    outline: none;
    line-height: 1.2;
}
.order-promo-mini__input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-400);
    font-weight: 400;
}
.order-promo-mini__status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    position: relative;
    transition: background 0.18s ease, color 0.18s ease;
}
.order-promo-mini__status-spinner,
.order-promo-mini__status-check,
.order-promo-mini__status-x {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
    font-weight: 700;
    line-height: 1;
}
.order-promo-mini__status-spinner {
    width: 1.05rem;
    height: 1.05rem;
    margin: auto;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.12);
    border-top-color: var(--primary);
    inset: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orderPromoSpin 0.7s linear infinite;
    display: block;
}
.order-promo-mini__status-check { color: #16a34a; font-size: 1.1rem; }
.order-promo-mini__status-x { color: #dc2626; font-size: 1.25rem; }
@keyframes orderPromoSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Status states */
.order-promo-mini__field[data-promo-status="validating"] .order-promo-mini__status-spinner { opacity: 1; }
.order-promo-mini__field[data-promo-status="applied"] {
    border-color: #16a34a;
    background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%);
}
.order-promo-mini__field[data-promo-status="applied"] .order-promo-mini__status {
    background: rgba(22, 163, 74, 0.12);
}
.order-promo-mini__field[data-promo-status="applied"] .order-promo-mini__status-check { opacity: 1; }
.order-promo-mini__field[data-promo-status="error"] {
    border-color: #dc2626;
    background: linear-gradient(180deg, #fff 0%, #fef2f2 100%);
}
.order-promo-mini__field[data-promo-status="error"] .order-promo-mini__status {
    background: rgba(220, 38, 38, 0.12);
}
.order-promo-mini__field[data-promo-status="error"] .order-promo-mini__status-x { opacity: 1; }
.order-promo-mini__live {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--gray-500);
    min-height: 0.9rem;
}
.order-promo-mini__field[data-promo-status="applied"] ~ .order-promo-mini__live { color: #16a34a; font-weight: 600; }
.order-promo-mini__field[data-promo-status="error"] ~ .order-promo-mini__live { color: #dc2626; }
@media (max-width: 480px) {
    .order-promo-mini { margin: 0 0 1rem; }
    .order-promo-mini__input { font-size: 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .order-promo-mini__field { padding-left: 0.95rem; padding-right: 0.45rem; }
    .order-promo-mini__live { font-size: 0.85rem; }
}

/* Loyalty points block (checkout) */
.order-points-card {
    margin: 0 0 1.75rem;
    padding: 1.1rem 1.2rem 1.15rem;
    border-radius: 14px;
    border: 1px solid rgba(251, 191, 36, 0.45);
    background: linear-gradient(145deg, #fffbeb 0%, #fff7ed 42%, #ffffff 100%);
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.order-points-card__hero {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1rem;
}
.order-points-card__icon-wrap {
    flex-shrink: 0;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fde68a, #fdba74);
    box-shadow: 0 3px 10px rgba(217, 119, 6, 0.28);
}
.order-points-card__icon {
    font-size: 1.15rem;
    line-height: 1;
    color: #92400e;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
}
.order-points-card__lead {
    flex: 1;
    min-width: 0;
}
.order-points-card__title {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gray-900);
    line-height: 1.25;
}
.order-points-card__subtitle {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
    color: #78350f;
    opacity: 0.92;
}
.order-points-card__pill {
    flex-shrink: 0;
    text-align: center;
    padding: 0.35rem 0.55rem 0.42rem;
    min-width: 4.25rem;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(251, 191, 36, 0.55);
    box-shadow: 0 1px 4px rgba(146, 64, 14, 0.08);
}
.order-points-card__pill-label {
    display: block;
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    color: var(--gray-900);
}
.order-points-card__pill-unit {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: #92400e;
    margin-top: 0.06rem;
}
.order-points-card__pill-hint {
    display: block;
    margin-top: 0.18rem;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.order-points-card__control {
    padding-top: 0.05rem;
    border-top: 1px dashed rgba(251, 191, 36, 0.55);
}
.order-points-card__slider-label {
    display: block;
    margin: 0.85rem 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gray-700);
}
.order-points-card__slider {
    width: 100%;
    margin-bottom: 0.65rem;
}
.order-points-card__slider::-webkit-slider-thumb {
    background: linear-gradient(145deg, #f59e0b, #ea580c);
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.35);
}
.order-points-card__slider::-webkit-slider-thumb:hover {
    box-shadow: 0 3px 14px rgba(234, 88, 12, 0.45);
}
.order-points-card__slider::-moz-range-thumb {
    background: linear-gradient(145deg, #f59e0b, #ea580c);
    box-shadow: 0 2px 10px rgba(234, 88, 12, 0.35);
}
.order-points-card__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(251, 191, 36, 0.35);
}
.order-points-card__applied-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
}
.order-points-card__applied-stack {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    flex-shrink: 0;
}
.order-points-card__applied-num {
    font-size: 1.15rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #b45309;
}
.order-points-card__applied-unit {
    font-size: 0.72rem;
    font-weight: 700;
    color: #92400e;
}
.order-points-card__hint {
    margin: 0.55rem 0 0;
    padding: 0 0 0 0.05rem;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--gray-500);
    position: relative;
    padding-left: 1.1rem;
}
.order-points-card__hint::before {
    content: "\1F4A1";
    position: absolute;
    left: 0;
    top: 0.02rem;
    font-size: 0.75rem;
    opacity: 0.9;
}

.quantity-wrapper { display: flex; gap: 1.25rem; align-items: center; }
.quantity-slider {
    flex: 1; -webkit-appearance: none; appearance: none; height: 6px;
    border-radius: 3px; background: var(--gray-200); outline: none; transition: var(--transition-fast);
}
.quantity-slider:hover { background: var(--gray-300); }
.quantity-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--primary-gradient); cursor: pointer; box-shadow: 0 2px 8px rgba(220,38,38,0.3);
    transition: var(--transition-fast);
}
.quantity-slider::-webkit-slider-thumb:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(220,38,38,0.4); }
.quantity-slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-gradient); cursor: pointer; border: none; }

.quantity-input { width: 120px; flex-shrink: 0; text-align: center; font-weight: 700; font-size: 1.05rem; background: white; border-color: var(--gray-200); }

.currency-toggle {
    display: flex; gap: 0.75rem;
}
.currency-option {
    flex: 1; cursor: pointer; position: relative;
}
.currency-option input { position: absolute; opacity: 0; pointer-events: none; }
.currency-option-inner {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 1rem; border-radius: 12px;
    border: 2px solid var(--gray-200); background: white;
    transition: var(--transition); font-weight: 600; color: var(--gray-500);
}
.currency-option:hover .currency-option-inner {
    border-color: var(--primary-200); color: var(--gray-700);
}
.currency-option.active .currency-option-inner {
    border-color: var(--primary); background: var(--primary-50);
    color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
}
.currency-symbol { font-size: 1.15rem; font-weight: 700; }
.currency-code { font-size: 0.85rem; letter-spacing: 0.03em; }

.order-summary {
    background: var(--gray-50); border-radius: var(--radius-lg); padding: 1.25rem 1.25rem 1.35rem;
    margin-bottom: 1.75rem; border: 1px solid var(--gray-200);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.order-summary--structured { padding-bottom: 1.1rem; }
.order-summary-heading-row {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-200);
}
.order-summary-heading-icon { font-size: 1.25rem; line-height: 1; }
.order-summary-heading {
    margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em;
}
.order-summary-card {
    background: #fff; border: 1px solid var(--gray-100); border-radius: 12px;
    padding: 0.85rem 1rem 1rem; margin-bottom: 0.65rem;
}
.order-summary-card--fees {
    background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
    border-color: var(--gray-200);
}
.order-summary-section-label {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--gray-400); margin-bottom: 0.55rem;
}
.order-summary-service-block {
    display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.65rem;
    padding-bottom: 0.65rem; border-bottom: 1px dashed var(--gray-200);
}
.order-summary-muted { font-size: 0.78rem; color: var(--gray-500); font-weight: 500; }
.order-summary-service-name {
    font-size: 1rem; font-weight: 700; color: var(--gray-900); line-height: 1.35;
}
.order-summary-row {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding: 0.4rem 0; font-size: 0.9rem; color: var(--gray-600);
}
.order-summary-row > span:first-child {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}
.order-summary-row--price { align-items: center; }
/* [hidden] singur e suprascris de display:flex de pe .order-summary-row — fortam ascunderea (ex. Paysafe). */
#orderSummaryGoodsRow[hidden] {
    display: none !important;
}
.order-summary-row--subtotal {
    padding-top: 0.35rem; font-weight: 600; color: var(--gray-800);
    font-size: 0.95rem;
}
.order-summary-value { font-weight: 600; color: var(--gray-900); text-align: right; white-space: nowrap; }
.order-summary-price-cell { font-variant-numeric: tabular-nums; }
.order-summary-amount { font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); }
.order-summary-divider { height: 1px; background: var(--gray-100); margin: 0.35rem 0 0.25rem; }
.order-summary-hint {
    margin: 0.35rem 0 0; font-size: 0.72rem; line-height: 1.45; color: var(--gray-400);
}
.order-fee-label-wrap {
    display: flex; flex-direction: column; gap: 0.2rem; max-width: 68%;
}
.order-fee-explained {
    font-size: 0.72rem; font-weight: 500; color: var(--gray-400); line-height: 1.4;
}
.order-summary-fee-amount { font-weight: 700; color: var(--gray-700); font-variant-numeric: tabular-nums; }
.order-summary-total-wrap {
    margin-top: 0.5rem; padding: 1rem 1rem 0.35rem;
    background: linear-gradient(135deg, #FEF2F2 0%, #FFF1F2 100%);
    border: 1px solid #FECACA; border-radius: 12px;
}
.order-summary-total {
    border: none; margin: 0; padding: 0;
    font-weight: 800; font-size: 1.15rem; color: var(--gray-900);
    align-items: center;
}
.order-summary-total-amount {
    font-size: 1.35rem; font-weight: 900; color: var(--primary); font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.order-summary-total-hint {
    margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--gray-500); text-align: center; line-height: 1.45;
}

/* Order page — compact payment summary */
.order-summary--compact {
    padding: 0.85rem 1rem 0.95rem;
    margin-bottom: 1.35rem;
}
.order-summary--compact .order-summary-heading-row {
    margin-bottom: 0.55rem;
    padding-bottom: 0.55rem;
}
.order-summary--compact .order-summary-heading {
    font-size: 0.98rem;
}
.order-summary--compact .order-summary-heading-icon {
    font-size: 1.1rem;
}
.order-summary--compact .order-summary-card--stacked {
    padding: 0.6rem 0.75rem 0.65rem;
    margin-bottom: 0;
}
.order-summary--compact .order-summary-service-block--compact {
    margin-bottom: 0.35rem;
    padding-bottom: 0.45rem;
}
.order-summary--compact .order-summary-service-name {
    font-size: 0.92rem;
}
.order-summary--compact .order-summary-muted {
    font-size: 0.72rem;
}
.order-summary--compact .order-summary-row {
    padding: 0.22rem 0;
    font-size: 0.84rem;
    gap: 0.65rem;
}
.order-summary--compact .order-summary-divider--tight {
    margin: 0.35rem 0 0.3rem;
}
.order-summary--compact .order-summary-row--subtotal {
    padding-top: 0.2rem;
    font-size: 0.88rem;
}
.order-summary--compact .order-summary-amount {
    font-size: 0.98rem;
}
.order-summary--compact .order-fee-row {
    align-items: center;
    padding-top: 0.15rem;
}
.order-summary--compact .order-summary-total-wrap--compact {
    margin-top: 0.45rem;
    padding: 0.6rem 0.75rem 0.55rem;
}
.order-summary--compact .order-summary-total {
    font-size: 1.05rem;
}
.order-summary--compact .order-summary-total-amount {
    font-size: 1.22rem;
}

/* Cod promo în cardul rezumat, imediat sub total */
.order-summary--checkout-aside.order-summary--compact {
    margin-bottom: 0;
}
.order-summary--checkout-aside .order-summary-total-wrap--compact {
    margin-bottom: 0;
}
.order-summary-promo {
    margin-top: 0.65rem;
    padding-top: 0.9rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.1);
}
.order-summary--checkout-aside .order-summary-promo .order-promo-mini {
    margin: 0;
}
.order-promo-mini--in-summary .order-promo-mini__summary {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0.25rem 0 0.15rem;
    font-size: 0.8rem;
    gap: 0.45rem;
}
.order-promo-mini--in-summary .order-promo-mini__trigger-text {
    text-decoration: none;
    font-weight: 600;
    color: var(--gray-700, #374151);
}
.order-promo-mini--in-summary .order-promo-mini__summary:hover .order-promo-mini__trigger-text {
    color: var(--primary-dark, #b91c1c);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.order-promo-mini--in-summary .order-promo-mini__field {
    margin-top: 0.5rem;
    border-radius: 12px;
    padding: 0.32rem 0.5rem 0.32rem 0.9rem;
}
.order-promo-mini--in-summary .order-promo-mini__input {
    font-size: 0.86rem;
    padding: 0.42rem 0.45rem 0.42rem 0;
}
.order-promo-mini--in-summary .order-promo-mini__live {
    margin-top: 0.38rem;
    font-size: 0.74rem;
    line-height: 1.35;
}

.order-submit-btn {
    position: relative; font-size: 1.05rem; padding: 1rem 2rem; letter-spacing: 0.02em;
}
.order-submit-icon { margin-right: 0.4rem; }

/* ================================================
   Order Trust Seal (social proof — sub nota Stripe în footer)
   ================================================ */
.order-trust-seal {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
    background: linear-gradient(135deg, #F0FDF4 0%, #ECFDF5 50%, #EFF6FF 100%);
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    margin: 0 0 0.85rem 0;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.06);
}
.order-trust-seal--footer {
    margin: 1rem 0 0;
    text-align: left;
    max-width: 100%;
}
.order-safe-footer:not(.order-safe-footer--checkout-cta) .order-trust-seal--footer {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.order-trust-seal__item {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.82rem; line-height: 1.3; color: var(--gray-800, #1f2937);
}
.order-trust-seal__item--rating { color: var(--gray-900, #111827); }
.order-trust-seal__stars { display: inline-flex; gap: 1px; color: #FBBF24; font-size: 0.95rem; line-height: 1; }
.order-trust-seal__star { letter-spacing: -1px; }
.order-trust-seal__rating-text { display: inline-flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; }
.order-trust-seal__rating-text strong { font-size: 0.95rem; font-weight: 700; color: var(--gray-900, #111827); }
.order-trust-seal__rating-count { font-size: 0.78rem; color: var(--gray-600, #4b5563); }
.order-trust-seal__item--live { color: #047857; font-weight: 600; }
.order-trust-seal__pulse {
    position: relative; display: inline-block; width: 8px; height: 8px;
    background: #10B981; border-radius: 50%; flex-shrink: 0;
}
.order-trust-seal__pulse::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    background: #10B981; opacity: 0.35; animation: orderTrustSealPulse 2s ease-out infinite;
}
@keyframes orderTrustSealPulse {
    0% { transform: scale(0.6); opacity: 0.55; }
    100% { transform: scale(1.6); opacity: 0; }
}
.order-trust-seal__item--guarantee { color: #047857; }
.order-trust-seal__icon { color: #059669; flex-shrink: 0; }

/* ================================================
   Order Safe Footer (sub buton - reasiguranta finala)
   ================================================ */
.order-safe-footer { text-align: center; margin-top: 1.1rem; }
.order-safe-footer__row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem 0.55rem;
    margin-bottom: 0.7rem;
}
.order-safe-footer__chip {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.32rem 0.6rem;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--gray-700, #374151);
    line-height: 1.2;
}
.order-safe-footer__chip svg { color: var(--gray-500, #6b7280); flex-shrink: 0; }

.order-payment-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 0.5rem 0;
}
.payment-logo-img {
    display: block;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.06));
}
.payment-logo-img--visa { height: 22px; }
.payment-logo-img--mastercard { height: 28px; }
.payment-logo-img--apple-pay { height: 26px; }
.payment-logo-img--google-pay { height: 22px; }

.order-note {
    font-size: 0.75rem; color: var(--gray-500, #6b7280); margin: 0.7rem 0 0;
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.order-note::before { content: '\1F512'; font-size: 0.7rem; opacity: 0.7; }

/* Mobil: sub „Plătește securizat” — variantă scurtă (fără triplu chip, fără logo-uri duplicate) */
@media (max-width: 768px) {
    .order-checkout-cta .order-checkout-cta__submit-wrap {
        padding-bottom: 0.2rem;
    }
    .order-safe-footer--checkout-cta {
        margin-top: 0.2rem;
    }
    .order-safe-footer--checkout-cta .order-safe-footer__row {
        margin-bottom: 0.35rem;
        gap: 0.3rem;
    }
    .order-safe-footer--checkout-cta .order-safe-footer__chip:nth-child(2),
    .order-safe-footer--checkout-cta .order-safe-footer__chip:nth-child(3) {
        display: none;
    }
    .order-safe-footer--checkout-cta .order-safe-footer__chip:first-child {
        font-size: 0.64rem;
        padding: 0.2rem 0.48rem;
        max-width: 100%;
    }
    .order-safe-footer--checkout-cta .order-safe-footer__chip:first-child svg {
        width: 12px;
        height: 12px;
    }
    .order-safe-footer--checkout-cta .order-payment-logos {
        display: none;
    }
    .order-safe-footer--checkout-cta .order-note {
        font-size: 0.65rem;
        margin: 0.35rem 0 0;
        line-height: 1.32;
        padding: 0 0.2rem;
    }
    .order-safe-footer--checkout-cta .order-note::before {
        font-size: 0.6rem;
    }
    .order-safe-footer--checkout-cta .order-trust-seal--footer {
        margin-top: 0.5rem;
    }
    .order-safe-footer--checkout-cta .order-trust-seal {
        padding: 0.42rem 0.5rem;
        gap: 0.28rem;
        border-radius: 10px;
    }
    .order-safe-footer--checkout-cta .order-trust-seal__item--live {
        display: none;
    }
    .order-safe-footer--checkout-cta .order-trust-seal__item {
        font-size: 0.69rem;
        gap: 0.32rem;
    }
    .order-safe-footer--checkout-cta .order-trust-seal__stars {
        font-size: 0.78rem;
    }
    .order-safe-footer--checkout-cta .order-trust-seal__rating-text strong {
        font-size: 0.8rem;
    }
    .order-safe-footer--checkout-cta .order-trust-seal__rating-count {
        font-size: 0.63rem;
    }
    .order-safe-footer--checkout-cta .order-trust-seal__icon {
        width: 14px;
        height: 14px;
    }
}

/* ================================================
   Live Order Activity Feed (toast social proof)
   ================================================ */
.order-live-feed {
    position: fixed;
    left: 1rem;
    bottom: 1.25rem;
    z-index: 998;
    display: flex; align-items: center; gap: 0.7rem;
    max-width: 320px;
    padding: 0.7rem 0.85rem 0.7rem 0.7rem;
    background: white;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--gray-100, #f3f4f6);
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    pointer-events: auto;
}
.order-live-feed.is-visible {
    transform: translateY(0);
    opacity: 1;
}
.order-live-feed__avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: white;
    font-weight: 700; font-size: 0.95rem;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.order-live-feed__body { flex: 1; min-width: 0; }
.order-live-feed__title {
    font-size: 0.82rem; line-height: 1.3;
    color: var(--gray-800, #1f2937);
    margin-bottom: 0.2rem;
}
.order-live-feed__title strong { color: var(--gray-900, #111827); font-weight: 700; }
.order-live-feed__meta {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.7rem;
    color: var(--gray-500, #6b7280);
}
.order-live-feed__pulse {
    width: 6px; height: 6px;
    background: #10B981; border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
    animation: orderLiveFeedPulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes orderLiveFeedPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
    50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.05); }
}
.order-live-feed__time { font-weight: 500; }
.order-live-feed__verified {
    display: inline-flex; align-items: center; gap: 0.15rem;
    color: #047857; font-weight: 600;
    margin-left: auto;
}
.order-live-feed__close {
    position: absolute; top: 0.3rem; right: 0.4rem;
    width: 20px; height: 20px;
    border: 0; background: transparent;
    color: var(--gray-400, #9ca3af);
    font-size: 1.1rem; line-height: 1; cursor: pointer;
    border-radius: 4px; padding: 0;
}
.order-live-feed__close:hover { color: var(--gray-700, #374151); background: var(--gray-100, #f3f4f6); }
@media (max-width: 768px) {
    .order-live-feed {
        left: 0.6rem; right: 0.6rem; max-width: none;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem);
    }
}

/* ================================================
   Order Sidebar
   ================================================ */
.order-sidebar-card {
    background: white; border-radius: var(--radius-lg); padding: 1.25rem;
    border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm);
}
.order-sidebar-delivery-promise {
    background: linear-gradient(145deg, #EFF6FF 0%, #F0FDF4 100%);
    border-color: #BFDBFE;
}
.order-sidebar-delivery-promise .sidebar-card-icon {
    font-size: 1.75rem; line-height: 1; margin-bottom: 0.5rem;
}
.order-delivery-promise-title {
    font-size: 0.95rem; font-weight: 800; color: var(--gray-900); margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}
.order-delivery-promise-text {
    font-size: 0.82rem; color: var(--gray-700); line-height: 1.55; margin: 0;
}
.sidebar-card-icon { font-size: 1.4rem; flex-shrink: 0; }
.sidebar-card-text { font-size: 0.85rem; font-weight: 600; color: var(--gray-800); }

.order-sidebar-guarantees h4 {
    font-size: 0.9rem; font-weight: 700; color: var(--gray-800); margin-bottom: 0.85rem;
}
.sidebar-guarantee-list {
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem;
}
.sidebar-guarantee-list li {
    display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--gray-600); font-weight: 500;
}
.guarantee-icon { font-size: 1rem; flex-shrink: 0; }

.order-sidebar-reviews { display: flex; flex-direction: column; gap: 1rem; }
.sidebar-review { padding-bottom: 1rem; border-bottom: 1px solid var(--gray-100); }
.sidebar-review:last-child { padding-bottom: 0; border-bottom: none; }
.review-stars { color: #F59E0B; font-size: 0.9rem; margin-bottom: 0.3rem; letter-spacing: 2px; }
.review-text { font-size: 0.82rem; color: var(--gray-600); font-style: italic; line-height: 1.5; margin-bottom: 0.25rem; }
.review-author { font-size: 0.75rem; color: var(--gray-400); font-weight: 600; }

.order-sidebar-safe {
    display: flex; align-items: center; gap: 0.65rem; background: var(--success-light);
    border-color: var(--success);
}
.safe-badge-icon { font-size: 1.3rem; flex-shrink: 0; }
.safe-badge-text { font-size: 0.8rem; font-weight: 600; color: #065F46; }

/* ================================================
   Status & Track
   ================================================ */
.status-icon {
    width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 2.5rem; margin: 0 auto 1.75rem; color: white;
    font-weight: 700; animation: scaleIn 0.5s var(--bounce);
}
@keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.status-success { background: linear-gradient(135deg, #10B981, #059669); box-shadow: 0 8px 24px rgba(16,185,129,0.25); }
.status-cancel { background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 8px 24px rgba(239,68,68,0.25); }

.lead { font-size: 1.15rem; color: var(--gray-500); margin-bottom: 0.5rem; line-height: 1.6; }

.order-details-card {
    background: white; border-radius: var(--radius-lg); padding: 2.25rem;
    box-shadow: var(--shadow-md); border: 1px solid var(--gray-100); margin: 2rem auto; max-width: 520px; text-align: left;
}
.order-details-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gray-100); }
.order-details-header h2 { font-size: 1.2rem; font-weight: 700; }

.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--gray-50); font-size: 0.92rem; }
.detail-row:last-child { border-bottom: none; }
.detail-row span:first-child { color: var(--gray-400); font-weight: 500; }
.detail-row strong { color: var(--gray-900); }
.detail-row a { word-break: break-all; text-align: right; max-width: 58%; font-size: 0.88rem; }

/* Variant pe coloana: label sus, continut jos (folosit cand continutul are mai multe randuri,
   ex. lista de link-uri pentru comenzi multi-target). */
.detail-row--block { flex-direction: column; align-items: stretch; gap: 0.55rem; }
.detail-row--block > span:first-child { color: var(--gray-400); font-weight: 500; }

.order-target-links-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.order-target-links-list li {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md, 10px);
    padding: 0.65rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.order-target-links-list .otl-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.order-target-links-list .otl-qty {
    font-weight: 700;
    color: var(--gray-900);
    background: white;
    border: 1px solid var(--gray-100);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.82rem;
    line-height: 1.3;
    flex: 0 0 auto;
}
.order-target-links-list .otl-link {
    color: var(--primary);
    text-decoration: none;
    word-break: break-all;
    overflow-wrap: anywhere;
    font-size: 0.86rem;
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    max-width: 100%;
}
.order-target-links-list .otl-link:hover { text-decoration: underline; }
.order-target-links-list .otl-metrics {
    color: var(--gray-500, var(--gray-400));
    font-size: 0.8rem;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.7rem;
}
.order-target-links-list .otl-metrics strong { color: var(--gray-900); font-weight: 600; }
.order-target-links-list-note {
    color: var(--gray-400);
    font-size: 0.8rem;
    margin: 0.2rem 0 0;
    line-height: 1.4;
}

/* ================================================
   Success Page - Conversion
   ================================================ */
.success-hero { margin-bottom: 2.5rem; }
.success-check-ring {
    width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 0.5rem;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(5,150,105,0.05));
    border: 3px solid var(--success-light);
}
.success-check-ring .status-icon { margin: 0; }
.order-code-highlight { color: var(--primary); font-size: 1rem; letter-spacing: 0.04em; }
.success-email-note { margin-top: 1rem; font-size: 0.85rem; }

.success-next-steps {
    background: white; border-radius: var(--radius-lg); padding: 2rem; margin: 2rem auto;
    max-width: 520px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100);
}
.success-next-steps h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--gray-800); }
.next-steps-list { display: flex; flex-direction: column; gap: 0.85rem; }
.next-step-item { display: flex; align-items: center; gap: 0.85rem; }
.next-step-num {
    width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700; background: var(--primary-100); color: var(--primary);
    flex-shrink: 0;
}
.next-step-text { font-size: 0.88rem; color: var(--gray-600); font-weight: 500; }

.success-upsell {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200); border-radius: var(--radius-lg);
    padding: 2rem; margin: 2rem auto; max-width: 520px; text-align: center;
}
.upsell-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.success-upsell h3 { font-size: 1.1rem; font-weight: 700; color: var(--gray-800); margin-bottom: 0.5rem; }
.success-upsell p { font-size: 0.88rem; color: var(--gray-500); margin-bottom: 1.25rem; line-height: 1.5; }
.success-upsell--cards { max-width: 720px; padding: 1.75rem 1.5rem; }
.success-upsell__lead { font-size: 0.92rem; color: var(--gray-600); margin: 0 0 1rem; }
.success-upsell__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem; text-align: left;
}
.success-upsell__card {
    display: flex; flex-direction: column; justify-content: space-between;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: var(--radius, 10px); padding: 0.85rem 0.95rem;
    text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.success-upsell__card:hover { border-color: var(--primary, #dc2626); box-shadow: 0 4px 14px rgba(220, 38, 38, 0.12); transform: translateY(-2px); }
.success-upsell__card-title { font-weight: 700; font-size: 0.95rem; color: var(--gray-800, #1f2937); margin-bottom: 0.25rem; }
.success-upsell__card-meta { font-size: 0.78rem; color: var(--gray-500, #6b7280); }
.success-upsell__card-meta strong { color: var(--primary, #dc2626); }
.success-upsell__card-cta {
    display: inline-block; margin-top: 0.6rem; font-size: 0.78rem; font-weight: 700;
    color: var(--primary, #dc2626); letter-spacing: 0.01em;
}

/* ================================================
   Referral Hero Card (customer + success)
   ================================================ */
.referral-hero-card {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.08);
}
.referral-hero-card--success { max-width: 720px; margin-left: auto; margin-right: auto; }
.referral-hero-card__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.referral-hero-card__icon {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px;
    background: #fde68a; color: #92400e; font-size: 1.6rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.referral-hero-card__title { font-size: 1.15rem; font-weight: 800; color: #92400e; margin: 0 0 0.25rem; }
.referral-hero-card__lead { font-size: 0.9rem; color: #78350f; margin: 0; line-height: 1.5; }
.referral-hero-card__share {
    display: flex; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap;
}
.referral-hero-card__input {
    flex: 1 1 240px; min-width: 0; font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 0.85rem; background: #fff; border-color: #fcd34d;
}
.referral-hero-card__copy-btn { flex: 0 0 auto; }
.referral-hero-card__quick { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.referral-hero-card__share-btn {
    flex: 1 1 100px; text-align: center; padding: 0.55rem 0.9rem;
    border-radius: 8px; font-size: 0.85rem; font-weight: 600; text-decoration: none;
    color: #fff; transition: opacity 0.15s ease;
}
.referral-hero-card__share-btn:hover { opacity: 0.9; }
.referral-hero-card__share-btn--wa { background: #25d366; }
.referral-hero-card__share-btn--tg { background: #0088cc; }
.referral-hero-card__share-btn--mail { background: #6b7280; }
.referral-hero-card__points {
    margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed #fcd34d;
    font-size: 0.85rem; color: #78350f;
}

/* ================================================
   Cancel Page - Recovery
   ================================================ */
.cancel-hero { margin-bottom: 2.5rem; }
.cancel-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; margin-top: 0.5rem; }
.cancel-actions__form { display: inline-flex; }
.cancel-actions__btn { white-space: nowrap; }
@media (max-width: 480px) {
    .cancel-actions { flex-direction: column; gap: 0.6rem; align-items: stretch; }
    .cancel-actions__form { display: block; width: 100%; }
    .cancel-actions__btn { width: 100%; min-height: 50px; }
    .cancel-help .btn-outline { width: 100%; max-width: 360px; }
}
.cancel-reasons {
    background: white; border-radius: var(--radius-lg); padding: 2rem; margin: 0 auto 2rem;
    max-width: 520px; box-shadow: var(--shadow-sm); border: 1px solid var(--gray-100);
}
.cancel-reasons h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--gray-800); }
.cancel-reasons-list {
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem;
}
.cancel-reasons-list li {
    display: flex; align-items: center; gap: 0.65rem; font-size: 0.9rem; color: var(--gray-600); font-weight: 500;
}
.reason-icon { font-size: 1.1rem; flex-shrink: 0; }

.cancel-help {
    text-align: center; padding: 1.5rem; background: var(--gray-50); border-radius: var(--radius);
    max-width: 520px; margin: 0 auto;
}
.cancel-help p { font-size: 0.88rem; color: var(--gray-500); margin-bottom: 1rem; }

/* ================================================
   Track Page - Upsell
   ================================================ */
.track-upsell {
    background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
    border: 1px solid var(--primary-200); border-radius: var(--radius-lg);
    padding: 1.75rem; margin-top: 2rem; text-align: center;
}
.track-upsell-text { font-size: 0.95rem; font-weight: 600; color: var(--gray-700); margin: 0.5rem 0 1rem; }
.track-progress-banner {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem;
    background: var(--primary-light); border: 1px solid var(--primary-200); border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 500; color: var(--primary-dark); margin-bottom: 1.25rem;
}
.track-progress-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
    animation: livePulse 1.5s ease-in-out infinite; flex-shrink: 0;
}

.track-live-panel {
    display: flex; flex-direction: column; gap: 0.85rem;
    padding: 1rem 1.1rem 1.05rem;
    background: linear-gradient(180deg, var(--primary-light) 0%, #ffffff 100%);
    border: 1px solid var(--primary-200); border-radius: var(--radius);
    margin-bottom: 1.4rem;
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
}
.track-live-panel.is-just-updated {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
    border-color: var(--primary);
}
.track-live-panel__header {
    display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; justify-content: space-between;
}
.track-live-panel__title {
    display: flex; align-items: center; gap: 0.55rem;
    font-weight: 700; font-size: 0.95rem; color: var(--primary-dark);
}
.track-live-panel__status {
    font-size: 0.72rem; padding: 0.2rem 0.65rem; letter-spacing: 0.02em;
}
.track-progress-bar {
    position: relative; width: 100%; height: 22px; background: rgba(255,255,255,0.85);
    border: 1px solid var(--primary-200); border-radius: 999px; overflow: hidden;
}
.track-progress-bar__fill {
    position: relative; height: 100%; min-width: 2%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(.2,.8,.2,1);
    display: flex; align-items: center; justify-content: flex-end;
    padding-right: 0.6rem;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.track-progress-bar__fill::after {
    content: ''; position: absolute; inset: 0; border-radius: 999px;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.18) 0 8px, transparent 8px 16px);
    animation: livePulse 2.5s linear infinite;
    pointer-events: none;
}
.track-progress-bar__label {
    position: relative; z-index: 1;
    font-size: 0.72rem; font-weight: 700; color: #fff; letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
.track-live-panel__metrics {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}
.track-live-metric {
    background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-sm, 8px);
    padding: 0.55rem 0.7rem; min-width: 0;
}
.track-live-metric__label {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--gray-600); font-weight: 600; margin-bottom: 0.15rem;
}
.track-live-metric__value {
    font-size: 1rem; font-weight: 700; color: var(--gray-900); line-height: 1.15;
    word-break: break-word;
}
.track-live-metric__value--accent { color: var(--primary-dark); }
.track-live-metric__unit { font-size: 0.78rem; font-weight: 500; color: var(--gray-500); }
.track-live-panel__note {
    margin: 0; font-size: 0.82rem; color: var(--gray-700); line-height: 1.45;
}
.track-live-panel__synced {
    margin: 0; font-size: 0.72rem; color: var(--gray-500); font-style: italic;
}
@media (max-width: 600px) {
    .track-live-panel__metrics { grid-template-columns: 1fr; }
    .track-live-metric { padding: 0.5rem 0.65rem; }
    .track-live-metric__value { font-size: 0.95rem; }
}

/* Track page mobile readability + conversion polish */
@media (max-width: 480px) {
    .track-live-panel__status { font-size: 0.85rem; padding: 0.25rem 0.7rem; }
    .track-live-panel__title { font-size: 1rem; }
    .track-live-metric__label { font-size: 0.78rem; }
    .track-live-metric__value { font-size: 1.05rem; }
    .track-live-metric__unit { font-size: 0.85rem; }
    .track-live-panel__note { font-size: 0.9rem; }
    .track-live-panel__synced { font-size: 0.8rem; }
    .track-progress-bar__label { font-size: 0.82rem; }
    .track-progress-banner { font-size: 0.92rem; padding: 0.85rem 0.95rem; }
    /* Stack detail rows ca o chitanta - label sus, value jos */
    .detail-row:not(.detail-row--block) {
        flex-direction: column; align-items: flex-start;
        gap: 0.2rem; padding: 0.6rem 0;
    }
    .detail-row:not(.detail-row--block) > :first-child {
        font-size: 0.72rem; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--gray-600); font-weight: 600;
    }
    .detail-row:not(.detail-row--block) > :last-child {
        font-size: 0.95rem; font-weight: 600; color: var(--gray-900);
    }
    /* CTA-uri full-width pe pagina rezultat track */
    .track-upsell .btn,
    .track-upsell .btn-lg { width: 100%; max-width: 360px; }
    section.section .text-center > .btn-outline { width: 100%; max-width: 360px; }
}
/* Separator vizual cand input + buton sunt stacked (521-768px) */
@media (max-width: 768px) and (min-width: 521px) {
    .track-input-group .track-submit-btn { border-top: 1px solid var(--gray-200); margin-top: 0.25rem; padding-top: 0.85rem; }
}
/* Padding strans pe ecrane foarte mici */
@media (max-width: 360px) {
    .track-form--card { padding: 1rem; }
    .order-details-card { padding: 1.1rem; }
}

/* ================================================
   Services Page - Conversion
   ================================================ */
.services-trust-strip {
    display: flex; justify-content: center; gap: 2rem; margin-bottom: 2.5rem;
    padding: 0.75rem 1.25rem; background: var(--gray-50); border-radius: var(--radius);
    border: 1px solid var(--gray-100); flex-wrap: wrap;
}
.trust-strip-item {
    display: flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--gray-600);
}
.trust-strip-icon { font-size: 1rem; }

.service-social-proof { margin-bottom: 0.75rem; }
.service-orders-badge {
    display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600;
    color: var(--success); background: var(--success-light); padding: 0.2rem 0.6rem; border-radius: 100px;
}

.status-badge {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.85rem;
    border-radius: 100px; font-size: 0.75rem; font-weight: 600;
}
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
.status-pending { background: var(--warning-light); color: #92400E; }
.status-pending::before { background: var(--warning); }
.status-warning { background: #E0E7FF; color: #3730A3; }
.status-warning::before { background: #4F46E5; }
.status-paid { background: var(--info-light); color: #1E40AF; }
.status-paid::before { background: var(--info); }
.status-processing { background: #FEE2E2; color: #991B1B; }
.status-processing::before { background: var(--primary); }
.status-partial { background: #FFEDD5; color: #9A3412; }
.status-partial::before { background: #FB923C; }
.status-completed { background: var(--success-light); color: #065F46; }
.status-completed::before { background: var(--success); }
.status-cancelled { background: var(--gray-100); color: var(--gray-600); }
.status-cancelled::before { background: var(--gray-400); }
.status-refunded { background: #F3E8FF; color: #6B21A8; }
.status-refunded::before { background: #8B5CF6; }
/* Roată admin — rotire premium (cumpărare) */
.status-premium { background: #FEFCE8; color: #854D0E; border: 1px solid #FDE047; }
.status-premium::before { background: #EAB308; box-shadow: 0 0 0 1px rgba(161, 98, 7, 0.15); }

.track-form { max-width: 500px; margin: 0 auto; }
.track-input-group { display: flex; gap: 0.75rem; }
.track-input-group .form-control { flex: 1; }

/* ================================================
   Track lookup hero (pretty but simple)
   ================================================ */
.track-lookup-section { padding-top: 3rem; padding-bottom: 4rem; }

.track-hero {
    text-align: center;
    margin-bottom: 1.75rem;
}
.track-hero__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary, #6c5ce7) 0%, var(--secondary, #a29bfe) 100%);
    color: #fff;
    box-shadow: 0 14px 32px -12px rgba(108, 92, 231, 0.45);
}
.track-hero__title {
    font-size: clamp(1.6rem, 2.4vw + 0.5rem, 2.1rem);
    font-weight: 700;
    margin: 0 0 0.55rem;
    color: var(--gray-900, #111827);
    line-height: 1.2;
}
.track-hero__subtitle {
    color: var(--gray-500, #6b7280);
    font-size: 0.98rem;
    line-height: 1.55;
    max-width: 520px;
    margin: 0 auto;
}

.track-form--card {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 18px;
    padding: 1.5rem;
    box-shadow: 0 8px 30px -18px rgba(15, 23, 42, 0.18);
    max-width: 560px;
    margin: 0 auto 1.25rem;
}
.track-form__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gray-500, #6b7280);
    margin: 0 0 0.55rem;
}
.track-form--card .track-input-group {
    align-items: stretch;
    gap: 0;
    border: 2px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    background: #fff;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    overflow: hidden;
}
.track-form--card .track-input-group:focus-within {
    border-color: var(--primary, #6c5ce7);
    box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.12);
}
.track-input-group__prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem 0 1rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-weight: 600;
    color: var(--gray-400, #9ca3af);
    background: transparent;
    user-select: none;
}
.track-form--card .track-input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.95rem 0.5rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gray-900, #111827);
    text-transform: uppercase;
    min-width: 0;
}
.track-form--card .track-input:focus { outline: none; box-shadow: none; }
.track-form--card .track-input::placeholder {
    color: var(--gray-400, #9ca3af);
    font-weight: 500;
    letter-spacing: 0.02em;
}
.track-submit-btn {
    border-radius: 0;
    padding: 0 1.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
    font-weight: 600;
    margin: 0;
}
.track-submit-btn svg { transition: transform 0.18s ease; }
.track-submit-btn:hover svg { transform: translateX(3px); }
.track-form__hint {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    color: var(--gray-500, #6b7280);
    line-height: 1.5;
}

.track-chips {
    list-style: none;
    padding: 0;
    margin: 0 auto 1.25rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 560px;
}
.track-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--gray-600, #4b5563);
}
.track-chip__icon {
    color: var(--primary, #6c5ce7);
    display: inline-flex;
    align-items: center;
}
.track-help-line {
    text-align: center;
    margin: 0;
    font-size: 0.86rem;
    color: var(--gray-500, #6b7280);
}
.track-help-line a {
    color: var(--primary, #6c5ce7);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.25rem;
}
.track-help-line a:hover { text-decoration: underline; }

@media (max-width: 520px) {
    .track-form--card { padding: 1.15rem; border-radius: 14px; }
    .track-form--card .track-input-group { flex-direction: column; align-items: stretch; }
    .track-input-group__prefix { padding: 0.75rem 1rem 0; align-self: flex-start; }
    .track-form--card .track-input { padding: 0.5rem 1rem 0.95rem; font-size: 1rem; text-align: left; }
    .track-submit-btn { width: 100%; justify-content: center; padding: 0.85rem 1rem; border-top: 1px solid var(--gray-200, #e5e7eb); }
    .track-hero__icon { width: 56px; height: 56px; border-radius: 16px; }
}

.text-center { text-align: center; }
.text-muted { color: var(--gray-400); }

/* ================================================
   Alerts
   ================================================ */
.alert {
    padding: 0.95rem 1.35rem; border-radius: 10px; margin-bottom: 1.5rem;
    font-size: 0.9rem; font-weight: 500; transition: opacity 0.3s, transform 0.3s;
    display: flex; align-items: center; gap: 0.6rem;
}
.alert::before { font-size: 1.1rem; }
.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-error::before { content: '\26A0'; }
.alert-success { background: #F0FDF4; color: #065F46; border: 1px solid #BBF7D0; }
.alert-success::before { content: '\2713'; }

/* ================================================
   Footer
   ================================================ */
.footer {
    background: var(--gray-900); color: var(--gray-400);
    padding: 4.5rem 0 0; font-size: 0.88rem;
    position: relative;
}
.footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--primary), #F59E0B, #10B981, #3B82F6, var(--primary));
}

.footer-top {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem;
    padding-bottom: 3rem;
}

.footer-brand p {
    margin-top: 1rem; line-height: 1.7; font-size: 0.88rem; max-width: 300px;
}

.footer-socials {
    display: flex; gap: 0.5rem; margin-top: 1.25rem;
}
.footer-social {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(255,255,255,0.08); color: var(--gray-400);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition-fast);
}
.footer-social:hover {
    background: var(--primary); color: white;
    transform: translateY(-2px);
}

.footer-col h4 {
    color: white; font-size: 0.78rem; font-weight: 700;
    margin-bottom: 1.1rem; text-transform: uppercase;
    letter-spacing: 0.06em;
}
.footer-col-title-gap { margin-top: 1.5rem; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 0.55rem; }
.footer-col ul li a {
    color: var(--gray-400); transition: var(--transition-fast);
    font-size: 0.88rem; display: inline-flex; align-items: center; gap: 0.3rem;
}
.footer-col ul li a:hover { color: white; padding-left: 3px; }

.footer-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent);
}

.footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.5rem 0; flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p {
    color: var(--gray-500); font-size: 0.82rem;
}

.footer-bottom-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.85rem;
}
.footer-sol-link {
    display: block; line-height: 0; opacity: 0.95; transition: opacity var(--transition-fast);
}
.footer-sol-link:hover { opacity: 1; }
.footer-sol-img {
    display: block; max-width: min(168px, 92vw); height: auto; max-height: 36px; width: auto;
}

.footer-badges {
    display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
}
.footer-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.7rem; border-radius: 6px;
    background: rgba(255,255,255,0.06); color: var(--gray-500);
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.08);
}

.footer .logo { margin-bottom: 0.25rem; }
.footer .logo:hover { color: white; }
.footer .logo-wordmark { color: #fff; }
.footer .logo-ext { color: #FCA5A5; }
.footer .logo-icon {
    background: linear-gradient(135deg, #F87171, #EF4444);
    box-shadow: 0 3px 12px rgba(248,113,113,0.3);
}
.footer .logo:hover .logo-icon { box-shadow: 0 6px 20px rgba(248,113,113,0.45); }
.footer .logo:hover .logo-img { transform: scale(1.04); filter: drop-shadow(0 4px 14px rgba(0,0,0,0.2)); }
.footer .logo-img { max-height: 36px; }

/* ================================================
   Admin Layout
   ================================================ */
.admin-body {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}
.admin-sidebar {
    width: 270px; background: #111827; color: #9ca3af;
    display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
}
.admin-sidebar-header {
    padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex; align-items: center; justify-content: space-between;
}
.admin-sidebar .logo:hover { color: white; }
.admin-sidebar .logo-wordmark { color: #fff; }
.admin-sidebar .logo-ext { color: #FCA5A5; }
.admin-sidebar .logo-icon {
    background: linear-gradient(135deg, #F87171, #EF4444);
    box-shadow: 0 3px 12px rgba(248,113,113,0.25);
}
.admin-sidebar .logo:hover .logo-icon { box-shadow: 0 6px 20px rgba(248,113,113,0.4); }
.admin-sidebar .logo:hover .logo-img { transform: scale(1.04); opacity: 0.95; }
.admin-sidebar .logo-img { max-height: 30px; }
.admin-badge {
    font-size: 0.65rem; font-weight: 700; padding: 0.2rem 0.55rem;
    background: rgba(239,68,68,0.15); color: #f87171; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.06em;
}

.admin-nav { flex: 1; padding: 1rem 0.85rem; overflow-y: auto; }
.admin-nav-section {
    display: block; font-size: 0.68rem; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.75rem 0.85rem 0.35rem; margin-top: 0.25rem;
}
.admin-nav-link {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.85rem;
    color: #9ca3af; font-weight: 500; font-size: 0.88rem;
    transition: all 0.2s; border-radius: 8px; margin-bottom: 1px;
}
.admin-nav-link:hover { background: rgba(255,255,255,0.06); color: #e5e7eb; }
.admin-nav-link.active {
    background: rgba(239,68,68,0.12); color: #f87171; font-weight: 600;
}
.admin-nav-icon { font-size: 1rem; width: 20px; text-align: center; flex-shrink: 0; }
.admin-nav-link-text { flex: 1; min-width: 0; }
.admin-nav-badge {
    flex-shrink: 0;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.35rem;
    text-align: center;
    border-radius: 999px;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.35);
}
.admin-nav-badge--story {
    background: linear-gradient(135deg, #d97706, #b45309);
}
.admin-nav-badge--orders {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.admin-nav-badge--resellers {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.admin-nav-link.active .admin-nav-badge {
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.35);
}

.admin-sidebar-footer { padding: 1rem; border-top: 1px solid rgba(255,255,255,0.07); }
.admin-user-card {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.65rem 0.75rem; margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.04); border-radius: 8px;
}
.admin-user-avatar {
    width: 34px; height: 34px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
    background: linear-gradient(135deg, #DC2626, #B91C1C); color: white;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.admin-user-info { display: flex; flex-direction: column; }
.admin-user-name { font-size: 0.85rem; font-weight: 600; color: #e5e7eb; }
.admin-user-role { font-size: 0.72rem; color: #6b7280; }
.admin-logout {
    color: #ef4444 !important; font-size: 0.82rem !important;
    padding: 0.5rem 0.85rem !important;
}

.admin-content {
    flex: 1 1 0%;
    min-width: 0;
    margin-left: 270px;
    padding: 1.5rem 2rem;
    box-sizing: border-box;
    max-width: max(0px, calc(100vw - 270px));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-content-full {
    margin-left: 0;
    max-width: none;
    width: 100%;
}

/* Mobile / tablet shell (hidden on desktop; activated in media query below) */
.admin-mobile-topbar,
.admin-sidebar-backdrop { display: none; }

.admin-login-wrapper {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    padding: 2rem; background: linear-gradient(180deg, var(--primary-50) 0%, var(--gray-50) 100%);
}
.admin-login-card {
    background: white; border-radius: var(--radius-xl); padding: 3rem;
    box-shadow: var(--shadow-xl); width: 100%; max-width: 400px; border: 1px solid var(--gray-100);
}
.admin-login-header { text-align: center; margin-bottom: 2.25rem; }
.admin-login-header { display: flex; flex-direction: column; align-items: center; }
.admin-login-header h1 { font-size: 1.5rem; color: var(--gray-900); font-weight: 700; }

/* Full-width main column in admin (sidebar remains fixed) */
.admin-body .admin-page {
    max-width: none;
    min-width: 0;
}
.admin-wheel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
    align-items: center;
}
.home-wheel-email-cell { max-width: 14rem; }
.admin-page-title {
    font-size: 1.65rem; font-weight: 800; margin-bottom: 0; color: var(--gray-900);
    letter-spacing: -0.01em;
}
.admin-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.75rem; gap: 1rem; flex-wrap: wrap;
}
.admin-page-count {
    font-size: 0.82rem; color: var(--gray-400); font-weight: 500;
    background: white; padding: 0.3rem 0.8rem; border-radius: 6px;
    border: 1px solid var(--gray-100);
}
.admin-page-date {
    font-size: 0.85rem; color: var(--gray-400); font-weight: 500;
}

/* Dense typography & cards — all admin views using .admin-page */
.admin-body .admin-page-title {
    font-size: 1.35rem;
}
.admin-body .admin-page-header {
    margin-bottom: 1rem;
}
.admin-body .admin-page .admin-card:not(.admin-card--flush) {
    padding: 1rem 1.1rem;
    border-radius: 10px;
}
.admin-body .admin-page .admin-card.admin-card--flush {
    border-radius: 10px;
}
.admin-body .admin-page .admin-card h2 {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--gray-600);
    margin: 0 0 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--gray-100);
}
.admin-body .admin-page .admin-card-header {
    padding: 0 0 0.65rem;
}
.admin-body .admin-page .form-group {
    margin-bottom: 0.55rem;
}
.admin-body .admin-page .form-group label,
.admin-body .admin-page .form-row .form-group label {
    font-size: 0.72rem;
    margin-bottom: 0.22rem;
}
.admin-body .admin-page .form-control {
    font-size: 0.8125rem;
    padding: 0.38rem 0.55rem;
    min-height: 2.15rem;
}
.admin-body .admin-page .form-row {
    gap: 0.55rem;
}
.admin-body .admin-page .form-actions,
.admin-body .admin-page .form-actions-row {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
}
.admin-body .admin-page .admin-card .btn:not(.btn-lg) {
    font-size: 0.8125rem;
    padding: 0.38rem 0.8rem;
}
.admin-body .admin-page .settings-desc {
    margin-bottom: 0.65rem;
    font-size: 0.8125rem;
}
.admin-body .admin-page .admin-table th,
.admin-body .admin-page .admin-table td {
    padding: 0.55rem 0.65rem;
}
.admin-body .admin-page .admin-settings-tabs__nav {
    margin-bottom: 1rem;
    padding: 0.4rem;
}
.admin-body .admin-page .admin-settings-tabs__panel > .admin-card + .admin-card {
    margin-top: 1rem;
}

.admin-dashboard-header-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.admin-dashboard-range {
    display: inline-flex;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    background: var(--gray-50);
}
.admin-dashboard-range a {
    padding: 0.42rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    border-right: 1px solid var(--gray-200);
    transition: background 0.15s ease, color 0.15s ease;
}
.admin-dashboard-range a:last-child { border-right: 0; }
.admin-dashboard-range a:hover {
    background: white;
    color: var(--gray-900);
}
.admin-dashboard-range a.is-active {
    background: white;
    color: var(--primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.admin-dashboard-stale {
    border: 1px solid #F59E0B;
    background: #FFFBEB;
    margin-bottom: 1.25rem;
}
.admin-dashboard-stale-inner {
    display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; justify-content: space-between;
    padding: 0.15rem 0;
}
.admin-dashboard-stale-desc { margin: 0.35rem 0 0.75rem; color: var(--gray-700); font-size: 0.9rem; }
.admin-dashboard-stale-list { list-style: none; margin: 0; padding: 0; min-width: 200px; max-width: 100%; }
.admin-dashboard-stale-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; font-size: 0.88rem; margin-bottom: 0.35rem; }
.admin-activity-log-intro { color: var(--gray-600); font-size: 0.9rem; margin: 0 0 1rem; }
.admin-activity-log-meta { max-width: 360px; vertical-align: top; }
.admin-activity-pre {
    margin: 0; font-size: 0.68rem; white-space: pre-wrap; word-break: break-word;
    max-height: 6rem; overflow: auto; background: var(--gray-50); padding: 0.4rem 0.5rem; border-radius: 4px;
}

.admin-dashboard-summary {
    margin: 0 0 1.35rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%);
    border: 1px solid var(--gray-100);
    font-size: 0.9rem;
    color: var(--gray-700);
    line-height: 1.55;
}
.admin-dashboard-summary strong { color: var(--gray-900); font-weight: 700; }
.admin-dashboard-muted {
    color: var(--gray-400);
    font-weight: 500;
}
.admin-dashboard-charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.75rem;
}
.admin-dashboard-charts .admin-card--wide {
    grid-column: 1 / -1;
}
.admin-dashboard-charts .admin-card-header h2 {
    margin-bottom: 0;
}
.admin-dashboard-chart-desc {
    margin: 0.28rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    max-width: 44rem;
}
.admin-dashboard-chart-canvas {
    padding: 0.35rem 0.75rem 1.2rem;
    min-height: 260px;
    position: relative;
}
.admin-dashboard-chart-canvas--tall {
    min-height: 300px;
}
.admin-dashboard-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--gray-400);
    font-size: 0.88rem;
}
@media (max-width: 1024px) {
    .admin-dashboard-charts {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .admin-dashboard-header-right {
        width: 100%;
        justify-content: space-between;
    }
    .admin-dashboard-range {
        flex: 1;
        min-width: 0;
    }
    .admin-dashboard-range a {
        flex: 1;
        text-align: center;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
}

/* Dashboard Stats */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
.stat-card {
    background: white; border-radius: 14px; padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid var(--gray-100);
    position: relative; overflow: hidden;
    display: flex; align-items: flex-start; gap: 1rem;
}
.stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--primary-gradient); }
.stat-card.stat-warning::after { background: linear-gradient(90deg, #F59E0B, #FBBF24); }
.stat-card.stat-success::after { background: linear-gradient(90deg, #10B981, #34D399); }
.stat-card.stat-revenue::after { background: linear-gradient(90deg, #3B82F6, #60A5FA); }
.stat-revenue-lines {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
}
.stat-revenue-line { display: block; line-height: 1.2; }
.stat-revenue-lines .stat-revenue-line + .stat-revenue-line { font-size: 0.88em; font-weight: 700; color: var(--gray-600); }
.stat-card-icon {
    width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
}
.stat-card-icon--primary { background: #fef2f2; }
.stat-card-icon--warning { background: #fffbeb; }
.stat-card-icon--success { background: #f0fdf4; }
.stat-card-icon--revenue { background: #eff6ff; }
.stat-card-content { flex: 1; }
.stat-value { font-size: 1.65rem; font-weight: 800; color: var(--gray-900); margin-bottom: 0.15rem; line-height: 1.2; }
.stat-label { font-size: 0.78rem; color: var(--gray-400); font-weight: 500; }

/* Admin Cards */
.admin-card {
    background: white; border-radius: 14px; padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04); border: 1px solid var(--gray-100);
}
.admin-card--flush { padding: 0; }
.admin-card--flush .table-responsive { margin: 0; }
.admin-card--flush .admin-table th:first-child,
.admin-card--flush .admin-table td:first-child { padding-left: 1.5rem; }
.admin-card--flush .admin-table th:last-child,
.admin-card--flush .admin-table td:last-child { padding-right: 1.5rem; }
.admin-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--gray-800); }

/* Admin settings — tabbed layout */
.admin-settings-tabs {
    margin-top: 0.5rem;
}
.admin-settings-tabs__hint {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin-bottom: 0.75rem;
}
.admin-settings-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    padding: 0.45rem;
    background: var(--gray-50);
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.admin-settings-tabs__btn {
    flex: 0 0 auto;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-700);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-settings-tabs__btn:hover {
    background: rgba(255, 255, 255, 0.75);
    border-color: var(--gray-200);
}
.admin-settings-tabs__btn.is-active {
    background: #fff;
    border-color: var(--gray-300);
    color: var(--gray-900);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.admin-settings-tabs__panel {
    display: none;
}
.admin-settings-tabs__panel.is-active {
    display: block;
}
.admin-settings-tabs__panel .admin-card:first-child {
    margin-top: 0;
}
.admin-settings-tabs__panel > .admin-card + .admin-card {
    margin-top: 1.25rem;
}

.admin-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 0 1rem; margin-bottom: 0;
}
.admin-card-header h2 { margin-bottom: 0; }

/* Admin Empty State */
.admin-empty {
    text-align: center; padding: 3rem 1rem; color: var(--gray-400);
}
.admin-empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
.admin-empty p { font-size: 0.9rem; }

/* Tables */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table th {
    text-align: left; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--gray-100);
    color: var(--gray-400); font-weight: 600; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.05em; white-space: nowrap; background: #fafbfc;
}
.admin-table--modern th { background: transparent; }
.admin-table td {
    padding: 0.75rem 0.85rem; border-bottom: 1px solid #f1f5f9;
    vertical-align: middle; color: var(--gray-700);
}
.admin-table tbody tr { transition: background 0.15s; }
.admin-table tbody tr:hover { background: #f8fafc; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-th-sort,
.admin-td-sort { width: 1%; white-space: nowrap; vertical-align: middle; text-align: center; }
.admin-service-sort {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
}
.admin-sort-form { margin: 0; display: inline; }
.admin-sort-form .btn {
    padding: 0.2rem 0.45rem;
    font-size: 0.72rem;
    min-height: 0;
    line-height: 1.1;
    border-radius: 6px;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
.text-muted { color: var(--gray-400); }
.text-muted-sm { color: var(--gray-500); font-size: 0.82rem; }
.text-sm { font-size: 0.82rem; }
.font-mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.82rem; }

/* Order Code Badge */
.order-code-badge {
    font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.8rem;
    font-weight: 600; color: var(--gray-900); background: var(--gray-50);
    padding: 0.2rem 0.55rem; border-radius: 5px; border: 1px solid var(--gray-100);
    white-space: nowrap;
}
a.order-code-badge--link {
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
a.order-code-badge--link:hover,
a.order-code-badge--link:focus-visible {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #1d4ed8;
    text-decoration: none;
    outline: none;
}

/* Link Cell (admin orders list) */
.link-cell { max-width: 180px; }
.admin-table--orders {
    width: 100%;
}
.admin-table--orders th,
.admin-table--orders td {
    padding: 0.6rem 0.65rem;
}
.admin-table--orders .link-cell {
    max-width: 14rem;
    min-width: 9rem;
    overflow: hidden;
    vertical-align: middle;
}
.admin-table--orders td:nth-child(6),
.admin-table--orders th:nth-child(6) {
    max-width: 14rem;
    min-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.order-link {
    display: inline-flex; align-items: center; min-width: 0; max-width: 100%;
    overflow: hidden; font-size: 0.82rem;
    color: var(--gray-500); transition: color 0.15s;
}
.order-link-text {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle;
}
.admin-table--orders .order-link {
    flex: 1 1 auto; min-width: 0; line-height: 1.35;
}
.order-link:hover { color: var(--primary); }

.admin-order-promo-cell {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    align-items: flex-start;
    max-width: 11rem;
}
.admin-table--orders .admin-order-promo-code {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--gray-800);
}
.admin-table--orders .admin-order-promo-disc {
    font-size: 0.74rem;
}

.admin-order-points-cell {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    align-items: flex-start;
    max-width: 10rem;
}
.admin-table--orders .admin-order-points-n {
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
}
.admin-table--orders .admin-order-points-disc {
    font-size: 0.74rem;
}

/* Status Inline Select */
.status-inline { display: flex; }
.status-select {
    appearance: none; -webkit-appearance: none;
    padding: 0.3rem 1.6rem 0.3rem 0.6rem; border-radius: 6px;
    font-size: 0.78rem; font-weight: 600; border: 1px solid transparent;
    cursor: pointer; transition: all 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.5rem center;
}
.status-select--pending { background-color: #fffbeb; color: #92400E; border-color: #fef3c7; }
.status-select--paid { background-color: #eff6ff; color: #1e40af; border-color: #dbeafe; }
.status-select--processing { background-color: #fef2f2; color: #991b1b; border-color: #fecaca; }
.status-select--completed { background-color: #f0fdf4; color: #065f46; border-color: #bbf7d0; }
.status-select--cancelled { background-color: #f9fafb; color: #6b7280; border-color: #e5e7eb; }
.status-select--refunded { background-color: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
.status-select.is-saving { opacity: 0.6; cursor: progress; }

/* Action Buttons */
.action-btns { display: flex; gap: 0.35rem; justify-content: center; }
.action-btn {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--gray-100);
    display: inline-flex; align-items: center; justify-content: center;
    background: white; color: var(--gray-400); cursor: pointer;
    transition: all 0.15s;
}
.action-btn:hover { border-color: var(--gray-200); }
.action-btn--edit:hover { color: #3b82f6; border-color: #bfdbfe; background: #eff6ff; }
.action-btn--reminder:hover { color: #d97706; border-color: #fde68a; background: #fffbeb; }
.action-btn--delete:hover { color: #ef4444; border-color: #fecaca; background: #fef2f2; }
.inline-form { display: inline; }

/* Filters */
.admin-filters {
    display: flex; gap: 0.3rem; margin-bottom: 1.5rem; flex-wrap: wrap;
    background: white; border-radius: 10px; padding: 4px; border: 1px solid var(--gray-100);
    width: fit-content; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.filter-btn {
    padding: 0.4rem 1rem; border-radius: 7px; font-size: 0.8rem; font-weight: 500;
    color: var(--gray-500); background: transparent; border: none; transition: all 0.2s;
    cursor: pointer;
}
.filter-btn.active { background: var(--primary-gradient); color: white; box-shadow: 0 1px 4px rgba(220,38,38,0.25); }
.filter-btn:hover:not(.active) { background: var(--gray-50); color: var(--gray-700); }

/* Admin orders — header toolbar (Comandă nouă, sync, bulk) */
.admin-orders-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.admin-orders-header-actions .btn-secondary {
    background: var(--gray-100);
    color: var(--gray-800);
    border: 2px solid var(--gray-200);
    box-shadow: none;
}
.admin-orders-header-actions .btn-secondary:hover {
    background: var(--gray-200);
    border-color: var(--gray-300);
    color: var(--gray-900);
}

/* Admin orders: search + filters form */
.admin-orders-filters-form { margin-bottom: 1rem; }
.admin-orders-filters-row {
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end;
    background: white; border: 1px solid var(--gray-100); border-radius: 10px;
    padding: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.admin-orders-filter { display: flex; flex-direction: column; gap: 0.2rem; min-width: 140px; }
.admin-orders-filter--grow { flex: 1 1 220px; min-width: 180px; }
.admin-orders-filter .form-control { font-size: 0.85rem; padding: 0.4rem 0.55rem; }
.admin-orders-filter-label { font-size: 0.7rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-orders-filter-attention { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--gray-700); cursor: pointer; padding: 0.35rem 0.6rem; border-radius: 7px; background: var(--gray-50); border: 1px solid var(--gray-100); }
.admin-orders-filter-attention input { accent-color: var(--primary); width: 16px; height: 16px; }
.admin-orders-filter-actions { display: flex; gap: 0.35rem; align-items: center; margin-left: auto; }

.admin-orders-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-500);
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--gray-200);
    background: #fafbfc;
}
.admin-orders-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    animation: adminLivePulse 2s ease-in-out infinite;
}
.admin-orders-live-dot.is-paused {
    animation: none;
    background: var(--gray-400);
    box-shadow: none;
}
.admin-orders-live-time {
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
@keyframes adminLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(0.92); }
}

/* Admin orders: totals bar */
.admin-orders-totals {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin: 0 0 1rem; padding: 0.55rem 0.85rem;
    background: var(--gray-50); border: 1px solid var(--gray-100);
    border-radius: 8px; font-size: 0.85rem; color: var(--gray-700);
}
.admin-orders-totals-item { font-weight: 500; }
.admin-orders-totals-sep { color: var(--gray-300); }

/* Sticky thead for the orders table */
.admin-table--orders thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--gray-50);
}

/* Attention badges + row highlight */
.order-row--attention { background: linear-gradient(0deg, rgba(254, 226, 226, 0.18), rgba(254, 226, 226, 0.18)); }
.attention-badges { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.25rem; }
.attention-badge {
    display: inline-flex; align-items: center; gap: 0.2rem;
    font-size: 0.66rem; font-weight: 600; line-height: 1;
    padding: 0.18rem 0.4rem; border-radius: 4px;
    background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
    white-space: nowrap;
}
.attention-badge--panel_err,
.attention-badge--cancel_err { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
.attention-badge--proc_nopanel { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.attention-badge--pending_old { background: #fef3c7; color: #92400e; border-color: #fde68a; }

/* Copy buttons + cell wrappers */
.order-code-cell,
.order-link-cell,
.order-email-cell { display: flex; align-items: center; gap: 0.3rem; max-width: 100%; min-width: 0; }
.order-email-text { cursor: help; border-bottom: 1px dotted transparent; transition: border-color 0.15s ease, color 0.15s ease; }
.order-email-text:hover, .order-email-text:focus-visible {
    border-bottom-color: var(--gray-400);
    color: var(--gray-800);
    outline: none;
}

/* ========== Email hover popover ========== */
.admin-email-popover {
    position: absolute; z-index: 9997;
    width: 340px; max-width: calc(100vw - 16px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 18px 40px -12px rgba(15,23,42,0.35);
    font-size: 0.82rem;
    color: #0f172a;
    pointer-events: auto;
}
.admin-email-popover[hidden] { display: none; }
.admin-email-popover__body { padding: 0.7rem 0.85rem 0.6rem; display: flex; flex-direction: column; gap: 0.4rem; }
.admin-email-popover__loading,
.admin-email-popover__error { text-align: center; color: #64748b; padding: 0.6rem 0.4rem; }
.admin-email-popover__error { color: #b91c1c; }
.admin-email-popover__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    flex-wrap: wrap;
    padding-bottom: 0.4rem; border-bottom: 1px solid #f1f5f9;
}
.admin-email-popover__email {
    font-weight: 700; color: #0f172a;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
    font-size: 0.8rem;
}
.admin-email-popover__pill {
    flex-shrink: 0;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 0.2rem 0.55rem; border-radius: 999px;
}
.admin-email-popover__pill--accent {
    color: #b45309;
    background: rgba(245, 158, 11, 0.14);
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.admin-email-popover__pill--muted {
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}
.admin-email-popover__stats {
    font-size: 0.78rem; color: #334155; line-height: 1.45;
}
.admin-email-popover__stats--muted { color: #64748b; font-size: 0.74rem; }
.admin-email-popover__recent-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: #94a3b8; margin-top: 0.25rem;
}
.admin-email-popover__list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.admin-email-popover__item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.3rem 0.5rem;
    padding: 0.35rem 0.45rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.75rem;
}
.admin-email-popover__item.is-current {
    background: #fffbeb;
    border-color: #fcd34d;
}
.admin-email-popover__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.74rem; font-weight: 700;
    color: #1d4ed8; text-decoration: none;
}
.admin-email-popover__code:hover { text-decoration: underline; }
.admin-email-popover__status { font-size: 0.65rem; padding: 0.1rem 0.45rem; }
.admin-email-popover__amount { font-weight: 700; text-align: right; color: #0f172a; }
.admin-email-popover__when { grid-column: 1 / -1; font-size: 0.7rem; color: #64748b; }
.admin-email-popover__filter {
    display: block; text-align: center;
    margin-top: 0.4rem; padding: 0.45rem 0.5rem;
    background: #1e293b; color: #fff; border-radius: 6px;
    font-size: 0.74rem; font-weight: 600; text-decoration: none;
    transition: background 0.15s ease;
}
.admin-email-popover__filter:hover { background: #0f172a; color: #fff; }
.order-link-cell .order-link { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.order-email-cell > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.copy-btn,
.order-track-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 5px; border: 1px solid transparent;
    background: transparent; color: var(--gray-400); cursor: pointer;
    opacity: 0.55; transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.copy-btn:hover,
.order-track-link:hover { opacity: 1; background: var(--gray-50); color: var(--gray-700); border-color: var(--gray-100); }
.copy-btn.is-copied { color: #047857; border-color: #a7f3d0; background: #ecfdf5; opacity: 1; }
tr:hover .copy-btn,
tr:hover .order-track-link { opacity: 0.95; }

/* Date cell w/ relative age */
.order-date-cell { display: inline-flex; flex-direction: column; gap: 0.1rem; }
.order-date-age { font-size: 0.7rem; color: var(--gray-400); }

/* Pagination */
.admin-orders-pagination {
    display: flex; align-items: center; justify-content: center; gap: 0.75rem;
    margin: 1rem 0 0; padding: 0.5rem;
}
.admin-orders-pagination-info { font-size: 0.85rem; color: var(--gray-500); }

/* Copy toast */
.admin-copy-toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: #111827; color: white; padding: 0.55rem 1rem; border-radius: 8px;
    font-size: 0.85rem; font-weight: 500; z-index: 9999;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    opacity: 0; pointer-events: none; transition: opacity 0.18s;
}
.admin-copy-toast.is-visible { opacity: 1; }

/* ========== Admin modal (used by Provider IDs popup) ========== */
.admin-modal {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.admin-modal[hidden] { display: none; }
.admin-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.admin-modal__panel {
    position: relative;
    background: #fff;
    width: min(720px, 100%);
    max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column;
    border-radius: 14px;
    box-shadow: 0 24px 60px -16px rgba(15,23,42,0.45);
    overflow: hidden;
}
.admin-modal__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
}
.admin-modal__title {
    margin: 0; font-size: 1.05rem; font-weight: 700; color: #0f172a;
}
.admin-modal__close {
    background: transparent; border: 0; color: #64748b;
    font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 0 0.25rem;
}
.admin-modal__close:hover { color: #0f172a; }
.admin-modal__desc {
    margin: 0; padding: 0.85rem 1.25rem 0;
    font-size: 0.85rem; color: #475569; line-height: 1.55;
}
.admin-modal__meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem 0.4rem;
}
.admin-modal__total {
    font-size: 0.78rem; font-weight: 600; color: #0f172a;
    background: #f1f5f9; padding: 0.25rem 0.6rem; border-radius: 999px;
}
.admin-modal__body {
    padding: 0.5rem 1.25rem 1rem;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex; flex-direction: column; gap: 0.85rem;
}
.admin-modal__loading,
.admin-modal__empty,
.admin-modal__error {
    margin: 0; padding: 1.25rem; text-align: center;
    color: #64748b; font-size: 0.9rem;
}
.admin-modal__error { color: #b91c1c; }
.admin-modal__foot {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #f1f5f9;
    display: flex; justify-content: flex-end; gap: 0.5rem;
}
body.admin-modal-open { overflow: hidden; }

.admin-provider-block {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    padding: 0.85rem 0.95rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.admin-provider-block__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.admin-provider-block__name {
    margin: 0; font-size: 0.95rem; font-weight: 700; color: #0f172a;
}
.admin-provider-block__count {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: #047857;
    background: rgba(16,185,129,0.12);
    border: 1px solid rgba(16,185,129,0.25);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.admin-provider-block__ids {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.82rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
    resize: vertical;
    min-height: 2.4rem;
    line-height: 1.45;
}
.admin-provider-block__ids:focus { outline: 2px solid #2563eb33; border-color: #93c5fd; }
.admin-provider-block__actions {
    display: flex; justify-content: flex-end; gap: 0.4rem;
}
.admin-provider-block__details {
    margin-top: 0.25rem;
    border-top: 1px dashed #e2e8f0;
    padding-top: 0.5rem;
    font-size: 0.8rem;
    color: #475569;
}
.admin-provider-block__details summary {
    cursor: pointer; font-weight: 600; color: #334155;
    list-style: none;
}
.admin-provider-block__details summary::-webkit-details-marker { display: none; }
.admin-provider-block__details summary::before { content: '▸'; display: inline-block; margin-right: 0.35rem; transition: transform 0.15s ease; }
.admin-provider-block__details[open] summary::before { transform: rotate(90deg); }
.admin-provider-block__list {
    list-style: none; padding: 0.4rem 0 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.25rem 0.85rem;
}
.admin-provider-block__list li {
    font-size: 0.78rem; color: #475569;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.admin-provider-block__list code {
    font-size: 0.78rem; background: #fff; border: 1px solid #e2e8f0;
    padding: 0 0.3rem; border-radius: 4px;
}

@media (max-width: 640px) {
    .admin-modal { padding: 0.5rem; }
    .admin-modal__panel { max-height: calc(100vh - 1rem); border-radius: 12px; }
    .admin-modal__head { padding: 0.85rem 1rem 0.6rem; }
    .admin-modal__desc,
    .admin-modal__meta,
    .admin-modal__body,
    .admin-modal__foot { padding-left: 1rem; padding-right: 1rem; }
    .admin-provider-block__list { grid-template-columns: 1fr; }
}

/* ========== Admin orders — Tablet (≤1024px) ========== */
@media (max-width: 1024px) {
    .admin-table--orders th,
    .admin-table--orders td { padding: 0.55rem 0.55rem; font-size: 0.8rem; }
    .admin-table--orders .order-code-badge { font-size: 0.74rem; padding: 0.18rem 0.45rem; }
    .admin-table--orders .platform-badge { font-size: 0.7rem; }
    .admin-table--orders .status-select { font-size: 0.74rem; padding: 0.28rem 1.5rem 0.28rem 0.5rem; }
    .admin-table--orders .link-cell,
    .admin-table--orders td:nth-child(6) { max-width: 11rem; min-width: 7rem; }
    .admin-table--orders .order-link { font-size: 0.78rem; }
    .copy-btn, .order-track-link { width: 20px; height: 20px; }
    .action-btn { width: 28px; height: 28px; }
    .action-btns { gap: 0.25rem; }
}

/* ========== Admin orders — Tablet filters/controls (≤900px) ========== */
@media (max-width: 900px) {
    .admin-orders-filters-row { gap: 0.5rem; padding: 0.6rem; }
    .admin-orders-filter--grow { flex: 1 1 100%; }
    .admin-orders-filter { min-width: 130px; flex: 1 1 30%; }
    .admin-orders-filter-actions { margin-left: 0; flex: 1 1 100%; justify-content: flex-end; }
}

/* ========== Admin orders — Mobile / tablet cards (≤1024px) ========== */
@media (max-width: 1024px) {
    .admin-orders-filters-row { flex-direction: column; align-items: stretch; }
    .admin-orders-filter { min-width: 0; width: 100%; flex: none; }
    .admin-orders-filter-actions { margin-left: 0; justify-content: stretch; flex-direction: row; }
    .admin-orders-filter-actions .btn { flex: 1; }
    .admin-orders-totals { font-size: 0.8rem; padding: 0.5rem 0.7rem; gap: 0.35rem; }
    .admin-orders-totals-sep { display: none; }

    .admin-page.admin-orders-page .admin-card--flush {
        background: transparent; border: none; box-shadow: none; padding: 0;
    }
    .admin-page.admin-orders-page .admin-card--flush .table-responsive {
        overflow: visible;
    }
    .admin-page.admin-orders-page .admin-table--orders {
        display: block; border: 0; background: transparent;
    }
    .admin-page.admin-orders-page .admin-table--orders thead {
        position: absolute; left: -9999px; top: -9999px;
        width: 1px; height: 1px; overflow: hidden;
    }
    .admin-page.admin-orders-page .admin-table--orders tbody {
        display: flex; flex-direction: column; gap: 0.7rem;
    }
    .admin-page.admin-orders-page .admin-table--orders tr {
        display: block; background: white;
        border: 1px solid var(--gray-100); border-radius: 12px;
        padding: 0.75rem 0.85rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
        position: relative;
    }
    .admin-page.admin-orders-page .admin-table--orders tr:hover { background: white; }
    .admin-page.admin-orders-page .admin-table--orders tr.order-row--attention {
        border-color: #fecaca; background: #fffafa;
    }
    .admin-page.admin-orders-page .admin-table--orders td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 0.75rem; padding: 0.4rem 0;
        border: none; border-bottom: 1px dashed #f1f5f9;
        text-align: right; min-width: 0; width: 100%;
        font-size: 0.85rem;
    }
    .admin-page.admin-orders-page .admin-table--orders td:last-child { border-bottom: none; }
    .admin-page.admin-orders-page .admin-table--orders td::before {
        content: attr(data-label);
        font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
        color: var(--gray-400); text-transform: uppercase;
        text-align: left; flex-shrink: 0; padding-right: 0.5rem;
    }
    .admin-page.admin-orders-page .admin-table--orders td[data-label]:empty::before { content: none; }

    /* First cell (code + badges) → hero of the card */
    .admin-page.admin-orders-page .admin-table--orders td:first-child {
        flex-direction: column; align-items: stretch; text-align: left;
        gap: 0.4rem; padding-top: 0.1rem; padding-bottom: 0.55rem;
        border-bottom: 1px solid var(--gray-100); margin-bottom: 0.25rem;
    }
    .admin-page.admin-orders-page .admin-table--orders td:first-child::before { display: none; }
    .admin-page.admin-orders-page .admin-table--orders td:first-child .order-code-cell { gap: 0.4rem; }
    .admin-page.admin-orders-page .admin-table--orders td:first-child .order-code-badge { font-size: 0.85rem; padding: 0.25rem 0.6rem; }

    /* Right-side content alignment */
    .admin-page.admin-orders-page .admin-table--orders td.text-right,
    .admin-page.admin-orders-page .admin-table--orders td.text-center { text-align: right; }
    .admin-page.admin-orders-page .admin-table--orders td .order-link-cell,
    .admin-page.admin-orders-page .admin-table--orders td .order-email-cell,
    .admin-page.admin-orders-page .admin-table--orders td .order-date-cell {
        flex: 1 1 auto; min-width: 0; justify-content: flex-end;
    }
    .admin-page.admin-orders-page .admin-table--orders td .order-link-cell { display: inline-flex; max-width: 100%; }
    .admin-page.admin-orders-page .admin-table--orders td .order-link {
        max-width: 100%; min-width: 0; flex: 1 1 auto; justify-content: flex-end;
    }
    .admin-page.admin-orders-page .admin-table--orders td .order-link-text { max-width: 100%; }
    .admin-page.admin-orders-page .admin-table--orders td .order-email-cell { display: inline-flex; }
    .admin-page.admin-orders-page .admin-table--orders td .order-email-cell > span { text-align: right; }
    .admin-page.admin-orders-page .admin-table--orders td .order-date-cell {
        flex-direction: row; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end;
    }
    .admin-page.admin-orders-page .admin-table--orders td .admin-delivery-progress {
        margin-left: auto;
        width: min(150px, 58vw);
        max-width: 150px;
    }

    /* Status select fills available space on mobile for easier tapping */
    .admin-page.admin-orders-page .admin-table--orders td .status-inline { width: auto; }
    .admin-page.admin-orders-page .admin-table--orders td .status-select {
        font-size: 0.82rem; padding: 0.4rem 1.7rem 0.4rem 0.7rem;
    }

    /* Actions row spans full width with bigger tap targets */
    .admin-page.admin-orders-page .admin-table--orders td:last-child {
        flex-direction: row-reverse; justify-content: flex-start;
        padding-top: 0.55rem; padding-bottom: 0.1rem;
        border-top: 1px solid var(--gray-100); margin-top: 0.25rem;
    }
    .admin-page.admin-orders-page .admin-table--orders td:last-child::before {
        flex: 1; text-align: right; padding-right: 0;
    }
    .admin-page.admin-orders-page .admin-table--orders td:last-child .action-btns {
        gap: 0.4rem; justify-content: flex-start;
    }
    .admin-page.admin-orders-page .admin-table--orders td:last-child .action-btn {
        width: 36px; height: 36px;
    }

    .admin-page.admin-orders-page .attention-badges { margin-top: 0.15rem; }
}

/* ========== Admin orders — Small phones (≤420px) ========== */
@media (max-width: 420px) {
    .admin-page.admin-orders-page .admin-table--orders td { font-size: 0.82rem; padding: 0.35rem 0; }
    .admin-page.admin-orders-page .admin-table--orders tr { padding: 0.65rem 0.7rem; }
    .admin-page.admin-orders-page .admin-table--orders td .order-link-text { font-size: 0.78rem; }
    .admin-page.admin-orders-page .admin-table--orders td .order-email-cell > span { font-size: 0.78rem; }
}

/* ========== Admin smart tables — card layout (≤1024px, non-orders) ========== */
@media (max-width: 1024px) {
    .admin-body .admin-content .table-responsive:has(table.admin-table--smart),
    .admin-body .admin-content .admin-table-wrap:has(table.admin-table--smart) {
        overflow-x: visible;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) {
        display: block;
        width: 100%;
        border: 0;
        background: transparent;
        min-width: 0 !important;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) thead {
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) tbody {
        display: flex;
        flex-direction: column;
        gap: 0.65rem;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) tbody tr {
        display: block;
        background: #fff;
        border: 1px solid var(--gray-100);
        border-radius: 12px;
        padding: 0.65rem 0.8rem;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) tbody tr:hover {
        background: #fff;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) td {
        display: grid;
        grid-template-columns: minmax(6.25rem, 34%) 1fr;
        gap: 0.35rem 0.65rem;
        align-items: start;
        padding: 0.4rem 0;
        border: none;
        border-bottom: 1px dashed #f1f5f9;
        width: 100%;
        text-align: left;
        vertical-align: top;
        font-size: 0.84rem;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) td:last-child {
        border-bottom: none;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) td::before {
        content: attr(data-label);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--gray-400);
        line-height: 1.35;
        padding-top: 0.1rem;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) td:not([data-label])::before,
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) td[data-label=""]::before {
        content: none;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) td:not([data-label]) {
        grid-template-columns: 1fr;
    }
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) .text-right,
    .admin-body .admin-content table.admin-table--smart:not(.admin-table--orders) .text-center {
        text-align: left;
    }
}

.toggle-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; cursor: pointer; }
.toggle-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.toggle-label-lg { padding: 0.75rem 0; }

/* Admin Edit Page */
.admin-edit-grid {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start;
}
.form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0;
}
.form-row-5 {
    display: grid; grid-template-columns: 2fr 1.5fr 0.8fr 0.8fr auto; gap: 0.75rem; align-items: end;
}
.form-actions {
    display: flex; gap: 0.75rem; align-items: center; margin-top: 2rem;
    padding-top: 1.5rem; border-top: 1px solid var(--gray-100);
}
.form-actions-row {
    display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem;
    padding-top: 1.25rem; border-top: 1px solid var(--gray-100);
}
.action-group { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; }
.action-cell-extra { padding: 0.6rem 0.65rem; vertical-align: middle; }
.admin-delivery-progress {
    min-width: 96px;
    max-width: 132px;
}
.admin-delivery-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.28rem;
    font-size: 0.72rem;
    white-space: nowrap;
}
.admin-delivery-progress-top strong {
    color: var(--gray-900);
    font-size: 0.78rem;
}
.admin-delivery-progress-top span {
    color: var(--gray-500);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
}
.admin-delivery-progress-bar {
    width: 100%;
    height: 7px;
    overflow: hidden;
    background: #e5e7eb;
    border-radius: 999px;
}
.admin-delivery-progress-bar span {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    transition: width 0.25s ease;
}
.admin-delivery-progress--active .admin-delivery-progress-bar span {
    background: linear-gradient(90deg, #38bdf8, #2563eb);
}
.admin-delivery-progress--empty .admin-delivery-progress-bar span,
.admin-delivery-progress--pending .admin-delivery-progress-bar span,
.admin-delivery-progress--unknown .admin-delivery-progress-bar span,
.admin-delivery-progress--stopped .admin-delivery-progress-bar span {
    background: #cbd5e1;
}
.admin-delivery-progress--unknown .admin-delivery-progress-top strong,
.admin-delivery-progress--pending .admin-delivery-progress-top strong,
.admin-delivery-progress--stopped .admin-delivery-progress-top strong {
    color: var(--gray-500);
    font-size: 0.7rem;
}
.admin-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--gray-100); color: var(--gray-600); font-weight: 700;
    font-size: 0.78rem; min-width: 26px; height: 26px; border-radius: 8px; padding: 0 0.45rem;
}
.admin-inline-form { margin-bottom: 0; }
.admin-inline-form .form-group { margin-bottom: 0.5rem; }
.admin-inline-form .form-group label { font-size: 0.78rem; margin-bottom: 0.25rem; }
.btn-danger-outline {
    padding: 0.55rem 1.25rem; border-radius: 8px; font-size: 0.88rem;
    font-weight: 600; color: #ef4444; border: 1px solid #fecaca;
    background: white; cursor: pointer; transition: all 0.2s;
}
.btn-danger-outline:hover { background: #fef2f2; border-color: #ef4444; }
.btn.btn-danger-outline.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
    border-radius: 7px;
}

.order-meta-list { display: flex; flex-direction: column; gap: 1rem; }
.order-meta-item {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-50);
}
.order-meta-item:last-child { border-bottom: none; padding-bottom: 0; }
.order-meta-label { font-size: 0.82rem; color: var(--gray-400); font-weight: 500; }
.order-meta-value { font-size: 0.88rem; color: var(--gray-800); font-weight: 600; }
.order-meta-value--lg { font-size: 1.25rem; font-weight: 800; color: var(--gray-900); }

/* Order edit — two columns: narrow form + wide meta / panel tools */
.admin-page--order-edit .admin-edit-grid {
    grid-template-columns: minmax(252px, 360px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.admin-page--order-edit .admin-edit-grid > * {
    min-width: 0;
}
.admin-page--order-edit .admin-edit-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.admin-page--order-edit .admin-edit-col > .admin-card {
    margin: 0;
}
.admin-page--order-edit .psb-group {
    max-width: 100%;
}
.admin-page--order-edit .psb {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    line-height: 1.25;
    white-space: nowrap;
}
.admin-page--order-edit .order-meta-card .order-meta-list {
    gap: 0.45rem;
}
.admin-page--order-edit .order-meta-item {
    padding-bottom: 0.42rem;
    align-items: flex-start;
    gap: 0.75rem;
}
.admin-page--order-edit .order-meta-label {
    font-size: 0.7rem;
    flex: 0 1 42%;
}
.admin-page--order-edit .order-meta-value {
    font-size: 0.78rem;
    font-weight: 600;
    text-align: right;
}
.admin-page--order-edit .order-meta-value--lg {
    font-size: 1.05rem;
}
.admin-page--order-edit .order-meta-item .admin-table-wrap {
    width: 100%;
}
.admin-page--order-edit .order-meta-item--panel-manual {
    margin-top: 0.65rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
    max-width: none;
}
.admin-page--order-edit .order-meta-item--panel-manual .settings-form {
    max-width: none;
}
.admin-page--order-edit .order-meta-item--targets-table {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.admin-page--order-edit .order-meta-item--targets-table .order-meta-label {
    flex: none;
    width: 100%;
    text-align: left;
}
.admin-page--order-edit .admin-card--order-edit-refund {
    margin-top: 1rem;
}

/* ================================================
   Admin Settings
   ================================================ */
.settings-desc {
    color: var(--gray-500); font-size: 0.9rem; margin-bottom: 2rem;
    line-height: 1.6; max-width: 560px;
}
.settings-form { max-width: 560px; }

.settings-rate-row {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem;
    flex-wrap: wrap;
}
.settings-rate-label {
    display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0;
}
.settings-currency-badge {
    display: inline-flex; align-items: center; padding: 0.65rem 1rem;
    background: var(--gray-100); border-radius: 10px;
    font-weight: 700; font-size: 0.95rem; color: var(--gray-700);
    white-space: nowrap;
}
.settings-rate-equals {
    font-size: 1.25rem; font-weight: 600; color: var(--gray-400);
}
.settings-rate-input {
    display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 160px;
}
.settings-rate-input .form-control {
    max-width: 140px; font-size: 1.1rem; font-weight: 700;
    text-align: center;
}
.settings-currency-suffix {
    font-weight: 600; font-size: 0.95rem; color: var(--gray-500);
    white-space: nowrap;
}

.settings-preview {
    background: var(--gray-50); border-radius: 12px; padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem; border: 1px solid var(--gray-100);
}
.settings-preview-title {
    font-size: 0.8rem; font-weight: 600; color: var(--gray-400);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.75rem;
}
.settings-preview-grid {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
}
.settings-preview-item {
    display: flex; flex-direction: column; gap: 0.15rem;
}
.settings-preview-item span:first-child {
    font-size: 0.85rem; color: var(--gray-500);
}
.settings-preview-item span:last-child {
    font-size: 1rem; font-weight: 700; color: var(--gray-900);
}

.settings-smtp-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-bottom: 0.5rem;
}
.settings-smtp-grid .form-group { margin-bottom: 0; }
.settings-smtp-grid .form-label {
    display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-600);
    margin-bottom: 0.35rem;
}
.settings-smtp-info {
    display: flex; flex-direction: column; gap: 1rem;
}
.smtp-info-item {
    display: flex; gap: 0.85rem; align-items: flex-start;
    padding: 0.85rem 1rem; background: var(--gray-50); border-radius: 10px;
    border: 1px solid var(--gray-100);
}
.smtp-info-item .smtp-info-icon { font-size: 1.3rem; flex-shrink: 0; line-height: 1.3; }
.smtp-info-item strong { display: block; font-size: 0.92rem; color: var(--gray-800); margin-bottom: 0.15rem; }
.smtp-info-item p { margin: 0; font-size: 0.82rem; color: var(--gray-500); line-height: 1.5; }

@media (max-width: 600px) {
    .settings-smtp-grid { grid-template-columns: 1fr; }
}

/* ================================================
   Order delivery notice (e.g. slower TikTok followers)
   ================================================ */
.order-delivery-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border: 1px solid #fcd34d;
    border-left: 4px solid #d97706;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    margin: 0 0 1rem;
    color: #78350f;
    font-size: 0.92rem;
    line-height: 1.45;
}
.order-delivery-notice__icon {
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}
.order-delivery-notice__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.order-delivery-notice__title {
    font-weight: 700;
    color: #7c2d12;
}
.order-delivery-notice__text {
    color: #78350f;
}
@media (max-width: 480px) {
    .order-delivery-notice {
        padding: 0.7rem 0.85rem;
        font-size: 0.85rem;
        gap: 0.55rem;
    }
    .order-delivery-notice__icon { font-size: 1.1rem; }
}

/* ================================================
   Discount Tiers (Order Page)
   ================================================ */
.discount-tiers-banner {
    background: linear-gradient(135deg, #fef2f2, #fff1f2);
    border: 1px solid #fecaca;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}
.discount-tiers-title {
    font-weight: 700; font-size: 0.9rem; color: var(--gray-800);
    margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.4rem;
}
.discount-icon { font-size: 1.1rem; }
.discount-tiers-list {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.discount-tier {
    display: flex; flex-direction: column; align-items: center;
    background: white; border: 2px solid #fecaca;
    border-radius: 10px; padding: 0.5rem 0.9rem;
    min-width: 72px; transition: all 0.25s ease;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.discount-tier:hover:not(.active) {
    border-color: #f87171;
    box-shadow: 0 2px 10px rgba(220, 38, 38, 0.12);
    transform: translateY(-1px);
}
.discount-tier:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.discount-tier:active:not(.active) {
    transform: translateY(0);
}
.discount-tier.active {
    border-color: var(--primary);
    background: var(--primary);
    transform: scale(1.05);
}
.discount-tier.active .discount-tier-qty,
.discount-tier.active .discount-tier-pct {
    color: white;
}
.discount-tier-qty {
    font-size: 0.78rem; color: var(--gray-500); font-weight: 500;
}
.discount-tier-pct {
    font-size: 1.05rem; font-weight: 800; color: var(--primary);
}
.order-discount-row .discount-value {
    color: #16a34a; font-weight: 700;
}
.order-fee-row {
    font-size: 0.9rem; color: var(--gray-600); border: none; padding: 0.15rem 0 0;
    align-items: flex-start;
}
.order-summary-card--fees .order-fee-row { padding-top: 0; }
.price-original {
    text-decoration: line-through; color: var(--gray-400);
    font-size: 0.85em; margin-right: 0.25rem;
}

/* Discount Editor (Admin) */
.discount-editor { max-width: 500px; }
.discount-editor-header {
    display: grid; grid-template-columns: 1fr 1fr 40px;
    gap: 0.75rem; font-size: 0.82rem; font-weight: 600;
    color: var(--gray-500); margin-bottom: 0.5rem;
    padding: 0 0.25rem;
}
.discount-editor-row {
    display: grid; grid-template-columns: 1fr 1fr 40px;
    gap: 0.75rem; margin-bottom: 0.5rem; align-items: center;
}
.discount-editor-row .form-control-sm {
    font-size: 0.9rem;
}

/* Admin — pachete: lățime completă + etichete RO/EN late (nu max-width:500px de la .discount-editor) */
.discount-editor.packages-editor {
    max-width: none;
    width: 100%;
}
.discount-editor.packages-editor .discount-editor-header.admin-packages-header,
.discount-editor.packages-editor .discount-editor-row.admin-packages-row {
    display: grid;
    grid-template-columns:
        56px
        minmax(76px, 92px)
        minmax(100px, 118px)
        minmax(140px, 1.35fr)
        minmax(140px, 1.35fr)
        44px
        44px
        40px;
    gap: 0.6rem;
    align-items: center;
}
.discount-editor.packages-editor .discount-editor-header.admin-packages-header {
    font-size: 0.78rem;
}
.discount-editor.packages-editor .discount-editor-header.admin-packages-header > span:last-child {
    text-align: center;
}
.discount-editor.packages-editor .admin-packages-cell--order {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
}
.discount-editor.packages-editor .pkg-reorder-btn {
    width: 100%;
    max-width: 44px;
    height: 26px;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1;
    border-radius: 6px;
    border: 1px solid var(--gray-300, #d1d5db);
    background: var(--gray-50, #f9fafb);
    color: var(--gray-700, #374151);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.discount-editor.packages-editor .pkg-reorder-btn:hover:not(:disabled) {
    background: var(--gray-100, #f3f4f6);
    border-color: var(--gray-400, #9ca3af);
}
.discount-editor.packages-editor .pkg-reorder-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.discount-editor.packages-editor .admin-packages-cell--tick {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
}
.discount-editor.packages-editor .admin-packages-cell--tick label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.discount-editor.packages-editor .admin-packages-cell--tick input[type="radio"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}
.discount-editor.packages-editor .admin-packages-cell--del {
    display: flex;
    align-items: center;
    justify-content: center;
}
.discount-editor.packages-editor .admin-packages-cell--del .remove-pkg-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
}
.discount-editor.packages-editor .discount-editor-row.admin-packages-row .form-control-sm {
    width: 100%;
    min-width: 0;
}
@media (max-width: 1200px) {
    .discount-editor.packages-editor .discount-editor-header.admin-packages-header {
        display: none;
    }
    .discount-editor.packages-editor .discount-editor-row.admin-packages-row {
        grid-template-columns: 1fr;
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.75rem;
        border: 1px solid var(--gray-200, #e5e7eb);
        border-radius: 10px;
        background: #fafbfc;
    }
    .discount-editor.packages-editor .admin-packages-cell--order {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.35rem;
        margin-bottom: 0.35rem;
    }
    .discount-editor.packages-editor .pkg-reorder-btn {
        max-width: 48px;
        height: 32px;
    }
}

.btn-danger {
    background: #ef4444; color: white; border: none;
    border-radius: 6px; cursor: pointer; font-size: 1.1rem;
    width: 32px; height: 32px; display: flex;
    align-items: center; justify-content: center;
    transition: background 0.2s;
}
.btn-danger:hover { background: #dc2626; }
.admin-page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}

/* ================================================
   Wheel of Destiny
   ================================================ */
/* Wheel Section */
.wheel-section { padding-top: 2rem; padding-bottom: 1rem; }

.wheel-hero {
    text-align: center; margin-bottom: 2.5rem;
}
.wheel-hero-title {
    font-size: 2.25rem; font-weight: 800; color: var(--gray-900);
    margin-bottom: 0.5rem; letter-spacing: -0.02em;
}
.wheel-hero-subtitle {
    font-size: 1.05rem; color: var(--gray-500); max-width: 440px;
    margin: 0 auto; line-height: 1.6;
}

.wheel-stage {
    position: relative; display: flex; justify-content: center;
    padding: 2rem 0 1rem;
}
.wheel-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
    width: 540px; height: 540px; border-radius: 50%;
    background: radial-gradient(circle, rgba(220,38,38,0.08) 0%, transparent 70%);
    pointer-events: none; z-index: 0;
}

.wheel-wrapper {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
}

.wheel-ring {
    position: relative; width: 524px; height: 524px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #d4d4d8, #a1a1aa, #d4d4d8, #e4e4e7, #d4d4d8, #a1a1aa, #d4d4d8, #e4e4e7);
    padding: 12px;
    box-shadow:
        0 0 0 3px rgba(0,0,0,0.08),
        0 10px 40px rgba(0,0,0,0.15),
        0 2px 8px rgba(0,0,0,0.06),
        inset 0 2px 0 rgba(255,255,255,0.9);
}

.wheel-inner-ring {
    width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
    box-shadow: inset 0 0 0 3px rgba(0,0,0,0.06);
}
.wheel-inner-ring canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }

.wheel-pointer {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    z-index: 10;
    animation: pointerPulse 2s ease-in-out infinite;
}
@keyframes pointerPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(2px); }
}

.wheel-action {
    margin-top: 2rem; text-align: center;
}

.wheel-spin-btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 1rem 2.5rem; border-radius: 16px;
    background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
    color: #fff; font-size: 1.1rem; font-weight: 700;
    border: none; cursor: pointer;
    box-shadow: 0 4px 16px rgba(220,38,38,0.35), 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.25s ease;
    letter-spacing: 0.01em;
    min-width: 220px; justify-content: center;
}
.wheel-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(220,38,38,0.45), 0 2px 6px rgba(0,0,0,0.1);
}
.wheel-spin-btn:active:not(:disabled) {
    transform: translateY(0);
}
.wheel-spin-btn--disabled {
    background: linear-gradient(135deg, #9ca3af, #6b7280) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    cursor: not-allowed !important;
}
.wheel-spin-btn--spinning {
    animation: btnPulse 0.8s ease-in-out infinite;
}
@keyframes btnPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.wheel-spin-btn-icon { font-size: 1.3rem; }
.wheel-spin-btn-text { font-size: 1.05rem; }

.wheel-cooldown {
    margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
}
.wheel-cooldown-label {
    color: var(--gray-500); font-size: 0.88rem; font-weight: 500;
}
.wheel-cooldown-timer {
    font-weight: 800; color: var(--primary); font-size: 1.35rem;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.wheel-section .wheel-flash-msg {
    margin: 0 auto 1rem;
    max-width: 42rem;
}
.wheel-banned-msg {
    margin-top: 1rem;
    max-width: 26rem;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--gray-600);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* Wheel Rules */
.wheel-rules {
    max-width: 1100px; margin: 2.5rem auto 0;
    background: var(--gray-50); border-radius: var(--radius-xl);
    padding: 1.75rem 2rem; border: 1px solid var(--gray-100);
}
.wheel-rules h3 {
    font-size: 1.1rem; font-weight: 700; margin-bottom: 1.15rem;
    color: var(--gray-800); text-align: center;
}
.wheel-rules-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.85rem;
}
.wheel-rule {
    display: flex; align-items: flex-start; gap: 0.6rem;
    font-size: 0.9rem; color: var(--gray-600); line-height: 1.5;
    padding: 0.85rem 1rem;
    background: white; border-radius: var(--radius);
    border: 1px solid var(--gray-100);
}
.wheel-rule-icon {
    font-size: 1.2rem; flex-shrink: 0; margin-top: 1px;
}

/* Wheel Modal */
.wheel-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: none; align-items: center; justify-content: center;
    padding: 1rem;
}
.wheel-modal.active { display: flex; }

.wheel-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);
}

.wheel-modal-content {
    position: relative; background: white;
    border-radius: 20px; padding: 1.35rem 1.15rem 1.15rem;
    max-width: 380px; width: 100%; text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    animation: modalSlideIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wheel-modal-content--claim {
    max-width: 360px;
}

/* Close button (X) — top right of modal, above confetti */
.wheel-modal-close {
    position: absolute;
    top: 0.75rem; right: 0.75rem;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(243, 244, 246, 0.85);
    color: var(--gray-600);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
    padding: 0; margin: 0;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    z-index: 5;
    -webkit-tap-highlight-color: transparent;
}
.wheel-modal-close:hover {
    background: #DC2626; color: #ffffff;
    transform: rotate(90deg);
    border-color: #DC2626;
}
.wheel-modal-close:focus-visible {
    outline: 2px solid #DC2626;
    outline-offset: 2px;
}
.wheel-modal-close svg { display: block; }
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(40px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.wheel-modal-confetti {
    position: absolute; top: 0; left: 0; right: 0; height: 100%;
    pointer-events: none; overflow: hidden;
}
.confetti-piece {
    position: absolute; top: -10px;
    border-radius: 2px; opacity: 0;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0% { opacity: 1; transform: translateY(0) rotate(0deg); }
    100% { opacity: 0; transform: translateY(450px) rotate(900deg); }
}

.wheel-modal-header {
    margin-bottom: 0.65rem;
}
.wheel-modal-icon {
    font-size: 2.35rem; margin-bottom: 0.25rem; display: block;
    animation: iconBounce 0.6s ease-out;
}
.wheel-modal-icon--sad { filter: none; }
@keyframes iconBounce {
    0% { transform: scale(0); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.wheel-modal-content h2 {
    font-size: 1.22rem; font-weight: 800; color: var(--gray-900);
    margin-bottom: 0; line-height: 1.2;
}

.wheel-prize-card {
    border: 2px solid var(--primary);
    border-radius: 14px; padding: 0.85rem 0.75rem;
    margin: 0.55rem 0 0.65rem;
    background: linear-gradient(145deg, #fefefe, #f9fafb);
}
.wheel-prize-platform {
    display: inline-block; padding: 0.25rem 0.65rem;
    border-radius: 20px; color: white; font-size: 0.72rem;
    font-weight: 700; letter-spacing: 0.02em;
    margin-bottom: 0.45rem;
}
.wheel-prize-amount {
    font-size: 2.65rem; font-weight: 900; color: var(--gray-900);
    display: block; line-height: 1; margin-bottom: 0.15rem;
}
.wheel-prize-type {
    font-size: 0.92rem; color: var(--gray-500); font-weight: 600;
    text-transform: capitalize;
}

.wheel-modal-upsell {
    margin-bottom: 0 !important;
    font-size: 0.78rem !important;
    color: var(--gray-500);
}

.wheel-bonus-wrap {
    margin-top: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    background: var(--gray-50, #f9fafb);
    text-align: left;
}
.wheel-bonus-wrap--hero {
    margin-top: 0.35rem;
    margin-bottom: 0.15rem;
    padding: 0.85rem 0.9rem 0.9rem;
    border: 2px solid var(--primary);
    border-radius: 14px;
    background: linear-gradient(165deg, #fff8f8 0%, #fff 55%, #fafafa 100%);
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.12);
}
.wheel-bonus-kicker {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    margin-bottom: 0.35rem;
}
.wheel-bonus-headline {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.28;
    color: var(--gray-900);
}
.wheel-bonus-hook {
    margin: 0 0 0.65rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--gray-600);
}
.wheel-bonus-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.15rem;
}
.wheel-bonus-decline {
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    border-width: 2px !important;
    color: var(--gray-600) !important;
    background: #fff !important;
}
.wheel-bonus-decline:hover {
    color: var(--gray-800) !important;
    border-color: var(--gray-400) !important;
    background: var(--gray-50) !important;
}
.wheel-bonus-wrap--hero .wheel-bonus-btn {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.65rem 1rem;
    border-radius: 12px;
    margin-top: 0.1rem;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.3);
}
.wheel-bonus-wrap .wheel-bonus-btn {
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.5rem 0.85rem;
    border-radius: 12px;
    margin-top: 0;
}
.wheel-claim-block--after-pay {
    margin-top: 0.55rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--gray-200, #e5e7eb);
    text-align: left;
}
.wheel-claim-secondary__label {
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-500);
}
.wheel-claim-block--after-pay .wheel-claim-info {
    font-size: 0.76rem;
    margin-bottom: 0.35rem;
    color: var(--gray-500);
}
.wheel-claim-block--after-pay .wheel-claim-email-label {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}
.wheel-claim-block--after-pay .wheel-claim-email-group {
    margin-bottom: 0.65rem;
}
.wheel-claim-submit--secondary {
    background: #fff !important;
    color: var(--gray-700) !important;
    border: 2px solid var(--gray-300) !important;
    box-shadow: none !important;
    min-height: 44px;
    font-weight: 700;
    font-size: 0.86rem;
}
.wheel-claim-submit--secondary:hover {
    background: var(--gray-50) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    transform: none;
}
.wheel-bonus-lead {
    margin: 0 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gray-800);
}
.wheel-bonus-wrap--page {
    padding: 0.75rem 0.85rem;
    margin-bottom: 1.25rem;
}

.wheel-claim-info {
    font-size: 0.82rem; color: var(--gray-500);
    margin-bottom: 0.5rem; line-height: 1.4;
}

.wheel-claim-form .form-group { margin-bottom: 1rem; text-align: left; }
.wheel-claim-form label {
    display: block; font-weight: 600; font-size: 0.85rem;
    color: var(--gray-700); margin-bottom: 0.3rem;
}

/* === Friendly claim-email block (mobile-first) === */
.wheel-claim-email-group { margin-bottom: 1rem; }
.wheel-claim-email-label {
    display: inline-flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    color: var(--gray-800) !important;
    margin-bottom: 0.45rem !important;
}
.wheel-claim-email-label__icon { font-size: 1.05rem; line-height: 1; }
.wheel-claim-email-input-wrap {
    position: relative;
    display: block;
}
.wheel-claim-email-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.18s ease;
}
.wheel-claim-email-input.form-control {
    padding-left: 2.6rem;
    padding-top: 0.95rem;
    padding-bottom: 0.95rem;
    font-size: 16px; /* avoid iOS zoom on focus */
    border-radius: 14px;
    background: #fff;
    border-width: 2px;
    scroll-margin-top: 1rem;
    scroll-margin-bottom: 1rem;
}
.wheel-claim-email-input.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow), 0 4px 14px rgba(220, 38, 38, 0.08);
}
.wheel-claim-email-input-wrap:focus-within .wheel-claim-email-input-icon {
    color: var(--primary);
}
.wheel-claim-email-input.is-invalid {
    border-color: #ef4444;
    background: #fef2f2;
}
.wheel-claim-email-input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}
.wheel-claim-email-hint {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.4;
    text-align: left;
    transition: color 0.18s ease;
}
.wheel-claim-email-hint.is-error {
    color: #dc2626;
    font-weight: 600;
}
.wheel-claim-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 12px;
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    min-height: 46px;
}
.wheel-claim-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(220, 38, 38, 0.35); }
.wheel-claim-submit:active { transform: translateY(0); }
.wheel-claim-submit__arrow {
    display: inline-block;
    font-size: 1.1em;
    transition: transform 0.18s ease;
}
.wheel-claim-submit:hover .wheel-claim-submit__arrow { transform: translateX(3px); }
.wheel-claim-submit.is-loading { opacity: 0.7; cursor: wait; }
.wheel-claim-submit.is-loading .wheel-claim-submit__text::after {
    content: '...';
    display: inline-block;
    margin-left: 0.15em;
    animation: wheelClaimDots 1.1s steps(3, end) infinite;
}
.wheel-claim-submit.is-loading .wheel-claim-submit__arrow { display: none; }
@keyframes wheelClaimDots {
    0%, 20% { content: ''; }
    40% { content: '.'; }
    60% { content: '..'; }
    80%, 100% { content: '...'; }
}
.wheel-claim-email-trust {
    margin: 0.55rem 0 0;
    font-size: 0.7rem;
    color: var(--gray-400);
    text-align: center;
    line-height: 1.35;
}
.wheel-claim-email-trust span {
    margin-right: 0.2rem;
    color: var(--gray-500);
}
.wheel-success-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: #10B981; color: white;
    font-size: 1.5rem; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem;
}
.wheel-claim-success p {
    font-size: 1rem; color: var(--gray-600); margin-bottom: 1.5rem;
}
.wheel-no-prize-retry {
    text-align: center; margin-top: 1.5rem;
}
.wheel-no-prize-retry p {
    font-size: 1rem; color: var(--gray-600); margin-bottom: 1.25rem;
}

/* ================================================
   Promo Banner
   ================================================ */
.promo-banner {
    background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 50%, #EF4444 100%);
    color: white; padding: 0.55rem 0; font-size: 0.82rem; position: relative; z-index: 101;
    animation: promoSlideDown 0.5s ease-out;
}
@keyframes promoSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.promo-banner.hidden { display: none; }
.promo-banner-content {
    display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.promo-banner-text { font-weight: 500; }
.promo-banner-btn {
    background: white; color: var(--primary-dark); padding: 0.25rem 0.85rem; border-radius: 100px;
    font-weight: 700; font-size: 0.78rem; text-decoration: none; white-space: nowrap;
    transition: var(--transition-fast);
}
.promo-banner-btn:hover { background: var(--primary-50); transform: scale(1.03); }
.promo-banner-close {
    background: none; border: none; color: rgba(255,255,255,0.7); font-size: 1.25rem;
    cursor: pointer; line-height: 1; padding: 0.2rem; transition: var(--transition-fast);
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
}
.promo-banner-close:hover { color: white; }

/* ================================================
   Reseller Promo Banner
   ================================================ */
.reseller-promo-banner {
    background: linear-gradient(90deg, #0f172a 0%, #7f1d1d 60%, #991b1b 100%);
    color: #f8fafc;
    padding: 0.55rem 0;
    font-size: 0.82rem;
    position: relative;
    z-index: 100;
    animation: promoSlideDown 0.35s ease-out;
}
.reseller-promo-banner[hidden] { display: none; }
.reseller-promo-banner__icon {
    flex-shrink: 0;
    font-size: 1rem;
}
.reseller-promo-banner__text {
    font-weight: 500;
    text-align: center;
}
.reseller-promo-banner__cta {
    background: #fff;
    color: var(--primary-dark);
    padding: 0.25rem 0.85rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.78rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition-fast);
}
.reseller-promo-banner__cta:hover {
    background: var(--primary-50);
    color: var(--primary-dark);
    transform: scale(1.03);
}
.reseller-promo-banner__close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem;
    transition: var(--transition-fast);
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}
.reseller-promo-banner__close:hover { color: #fff; }
.reseller-promo-banner > :not(.reseller-promo-banner__close) {
    display: inline;
}
.reseller-promo-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

@media (max-width: 768px) {
    .reseller-promo-banner {
        font-size: 0.7rem;
        padding: 0.4rem 2.2rem 0.4rem 0.65rem;
        gap: 0.4rem;
        flex-wrap: nowrap;
    }
    .reseller-promo-banner__icon { font-size: 0.85rem; }
    .reseller-promo-banner__text {
        line-height: 1.3;
        text-align: left;
        flex: 1;
        min-width: 0;
        font-weight: 500;
    }
    .reseller-promo-banner__cta {
        font-size: 0.66rem;
        padding: 0.18rem 0.55rem;
        flex-shrink: 0;
    }
    .reseller-promo-banner__close { right: 0.4rem; font-size: 1rem; width: 22px; height: 22px; }
}
@media (max-width: 480px) {
    .reseller-promo-banner { font-size: 0.65rem; padding: 0.35rem 2rem 0.35rem 0.55rem; }
    .reseller-promo-banner__icon { display: none; }
}

/* ================================================
   Verified Reviews (Homepage)
   ================================================ */
.reviews-section { position: relative; }
.reviews-section__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.reviews-section__head .section-title { margin-bottom: 0; }
.reviews-section__head .section-subtitle { margin-bottom: 0; }
.reviews-section__eyebrow {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    background: linear-gradient(135deg, rgba(16,185,129,0.12) 0%, rgba(16,185,129,0.05) 100%);
    color: #047857;
    border: 1px solid rgba(16,185,129,0.25);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.reviews-section__eyebrow svg { display: block; }

.reviews-summary {
    display: flex; align-items: center; justify-content: center; gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, #fffaf0 0%, #fff 100%);
    border: 1px solid #fde68a;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px -16px rgba(245, 158, 11, 0.45);
    max-width: 520px;
    margin: 0 auto 2rem;
}
.reviews-summary__score {
    display: flex; align-items: baseline; gap: 0.25rem;
    color: var(--gray-900);
    line-height: 1;
}
.reviews-summary__avg {
    font-size: 2.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.reviews-summary__max { font-size: 1rem; color: var(--gray-500); font-weight: 600; }
.reviews-summary__meta {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
}
.reviews-summary__count {
    margin: 0; font-size: 0.85rem; color: var(--gray-600); font-weight: 600;
}

.reviews-stars {
    position: relative; display: inline-block;
    font-size: 1.05rem; line-height: 1; letter-spacing: 3px;
    color: #e5e7eb;
}
.reviews-stars__bg { display: inline-block; }
.reviews-stars__fill {
    position: absolute; inset: 0;
    overflow: hidden; white-space: nowrap;
    color: #f59e0b;
    text-shadow: 0 1px 0 rgba(217, 119, 6, 0.25);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}
.review-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.5rem 1.25rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.review-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    opacity: 0.85;
}
.review-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(245, 158, 11, 0.35);
}
.review-card__quote {
    position: absolute;
    top: 0.25rem; right: 1rem;
    font-size: 4.5rem; line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
    color: rgba(245, 158, 11, 0.18);
    pointer-events: none;
    user-select: none;
}
.review-card__stars { margin-bottom: 0.75rem; font-size: 1rem; }
.review-card__text {
    margin: 0 0 1.25rem;
    font-size: 0.95rem; line-height: 1.6;
    color: var(--gray-700);
    font-style: italic;
    flex: 1;
}
.review-card__text::before { content: '\201C'; }
.review-card__text::after { content: '\201D'; }
.review-card__footer {
    display: flex; align-items: center; gap: 0.75rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--gray-100);
}
.review-card__avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-gradient);
    color: #fff; font-weight: 700; font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px -4px rgba(220, 38, 38, 0.45);
}
.review-card__who { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.review-card__author {
    font-size: 0.9rem; font-weight: 700; color: var(--gray-800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.review-card__verified {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.72rem; font-weight: 600;
    color: #047857;
}
.review-card__verified svg { color: #10b981; flex-shrink: 0; }

.reviews-empty {
    text-align: center; color: var(--gray-500);
    padding: 1.5rem; margin: 0;
}

/* ================================================
   Testimonials
   ================================================ */
.testimonials-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
}
.testimonial-card {
    background: white; border-radius: var(--radius-lg); padding: 1.75rem;
    border: 1px solid var(--gray-100); box-shadow: var(--shadow-sm);
    transition: var(--transition); position: relative;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.testimonial-stars { color: #F59E0B; font-size: 1rem; letter-spacing: 2px; margin-bottom: 0.85rem; }
.testimonial-text {
    font-size: 0.88rem; color: var(--gray-600); line-height: 1.65; margin-bottom: 1.25rem; font-style: italic;
}
.testimonial-author { display: flex; align-items: center; gap: 0.75rem; }
.testimonial-avatar {
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--primary-gradient); color: white; font-weight: 700; font-size: 0.95rem; flex-shrink: 0;
}
.testimonial-name { font-size: 0.85rem; font-weight: 700; color: var(--gray-800); }
.testimonial-role { font-size: 0.75rem; color: var(--gray-400); }

/* ================================================
   Wheel Promo (Homepage)
   ================================================ */
.wheel-promo-section { padding: 0; }
.wheel-promo-banner {
    background: linear-gradient(135deg, var(--gray-900) 0%, #1a1a2e 50%, var(--gray-800) 100%);
    border-radius: var(--radius-xl); padding: 4rem 3.5rem; display: flex;
    align-items: center; gap: 3rem; overflow: hidden; position: relative;
    color: white; margin: 3rem 0;
}
.wheel-promo-banner::before {
    content: ''; position: absolute; top: -50%; right: -10%; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(220,38,38,0.15) 0%, transparent 70%); border-radius: 50%;
}
.wheel-promo-content { flex: 1; position: relative; z-index: 1; }
.wheel-promo-icon { font-size: 3rem; margin-bottom: 1rem; }
.wheel-promo-content h2 { font-size: 2rem; font-weight: 800; margin-bottom: 0.75rem; }
.wheel-promo-content p { font-size: 1rem; color: var(--gray-400); margin-bottom: 1.5rem; line-height: 1.6; max-width: 480px; }
.wheel-promo-visual { flex-shrink: 0; position: relative; z-index: 1; }
.wheel-promo-ring {
    width: 180px; height: 180px; border-radius: 50%;
    background: conic-gradient(var(--primary) 0deg, #F59E0B 60deg, var(--success) 120deg, var(--info) 180deg, #8B5CF6 240deg, var(--primary) 300deg, var(--primary) 360deg);
    display: flex; align-items: center; justify-content: center;
    animation: wheelPromoPulse 3s ease-in-out infinite;
    box-shadow: 0 0 40px rgba(220,38,38,0.3), 0 0 80px rgba(220,38,38,0.1);
}
@keyframes wheelPromoPulse { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.05) rotate(5deg); } }
.wheel-promo-spin {
    width: 140px; height: 140px; border-radius: 50%; background: var(--gray-900);
    display: flex; align-items: center; justify-content: center; font-size: 3.5rem;
}

/* ================================================
   Live Order Notification
   ================================================ */
.live-notification {
    position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 98;
    background: white; border-radius: var(--radius-lg); padding: 0.85rem 1.15rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex; align-items: center; gap: 0.75rem; max-width: 340px;
    transform: translateX(-120%); opacity: 0; transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
    pointer-events: none;
}
.live-notification.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
.live-notif-avatar {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary-gradient); display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 0.85rem;
}
.live-notif-text { font-size: 0.82rem; font-weight: 500; color: var(--gray-700); line-height: 1.4; }
.live-notif-text strong { font-weight: 700; color: var(--gray-900); }
.live-notif-time { font-size: 0.7rem; color: var(--gray-400); margin-top: 0.15rem; }
.live-notif-verified {
    display: inline-flex; align-items: center; gap: 0.2rem; color: var(--success);
    font-size: 0.7rem; font-weight: 600;
}

/* ================================================
   Hero Pulse CTA
   ================================================ */
.btn-hero-pulse { animation: fadeInUp 0.9s ease-out, heroPulse 2.5s ease-in-out 1.5s infinite; }
@keyframes heroPulse {
    0%, 100% { box-shadow: var(--shadow), 0 2px 8px rgba(220,38,38,0.15); }
    50% { box-shadow: var(--shadow-primary), 0 0 20px rgba(220,38,38,0.25); }
}

/* ================================================
   Responsive — Tablet (1024px)
   ================================================ */
@media (max-width: 1024px) {
    .platforms-grid { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .admin-body .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-title { font-size: 3rem; }
    .hero-stats { gap: 2rem; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .order-page-grid { grid-template-columns: 1fr 300px; gap: 1.5rem; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================================
   Admin — tablet & phone (drawer nav, touch targets)
   ================================================ */
@media (max-width: 1024px) {
    :root {
        --admin-mobile-top-h: 52px;
    }

    .admin-mobile-topbar {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 80;
        min-height: var(--admin-mobile-top-h);
        height: calc(var(--admin-mobile-top-h) + env(safe-area-inset-top, 0px));
        padding-left: calc(0.5rem + env(safe-area-inset-left, 0px));
        padding-right: calc(0.5rem + env(safe-area-inset-right, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: 0;
        background: #ffffff;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    }

    .admin-sidebar-backdrop {
        display: block;
        position: fixed;
        top: calc(var(--admin-mobile-top-h) + env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 75;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        background: rgba(15, 23, 42, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    body.admin-body--with-sidebar {
        padding-top: calc(var(--admin-mobile-top-h) + env(safe-area-inset-top, 0px));
    }

    .admin-body.admin-nav-open .admin-sidebar-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .admin-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 10px;
        background: var(--gray-100);
        color: var(--gray-900);
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.15s, color 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .admin-menu-toggle:hover { background: var(--gray-200); }
    .admin-body.admin-nav-open .admin-menu-toggle { background: var(--gray-800); color: #fff; }

    .admin-menu-toggle-bars {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
        height: 14px;
    }
    .admin-menu-toggle-bars span {
        display: block;
        height: 2px;
        border-radius: 1px;
        background: currentColor;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }
    .admin-body.admin-nav-open .admin-menu-toggle-bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }
    .admin-body.admin-nav-open .admin-menu-toggle-bars span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .admin-body.admin-nav-open .admin-menu-toggle-bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .admin-mobile-topbar-brand {
        display: flex;
        align-items: center;
        min-width: 0;
        flex: 1;
    }
    .admin-mobile-topbar-brand .logo { min-width: 0; }
    .admin-mobile-topbar-brand .logo-img {
        max-height: 30px;
        width: auto;
        height: auto;
        display: block;
    }
    .admin-mobile-topbar-spacer { flex: 0 0 0.25rem; }
    .admin-mobile-topbar-logout {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        color: #ef4444;
        text-decoration: none;
        font-size: 1.15rem;
        flex-shrink: 0;
        transition: background 0.15s;
        -webkit-tap-highlight-color: transparent;
    }
    .admin-mobile-topbar-logout:hover { background: #fef2f2; }

    .admin-body { flex-direction: column; }
    .admin-sidebar {
        position: fixed;
        top: calc(var(--admin-mobile-top-h) + env(safe-area-inset-top, 0px));
        left: 0;
        bottom: 0;
        width: min(300px, 88vw);
        max-width: 320px;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 90;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.18);
    }
    .admin-body.admin-nav-open .admin-sidebar {
        transform: translateX(0);
    }

    .admin-sidebar-header {
        flex-shrink: 0;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .admin-nav {
        display: block !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.65rem 0.75rem 0.85rem;
        scrollbar-width: thin;
    }
    .admin-nav-section {
        display: block !important;
        margin-top: 0.35rem;
    }
    .admin-nav-section:first-child { margin-top: 0; }
    .admin-nav-link {
        flex-shrink: 0;
        white-space: normal;
        padding: 0.65rem 0.75rem;
        font-size: 0.9rem;
        line-height: 1.3;
    }
    .admin-sidebar-footer {
        flex-shrink: 0;
        display: block;
        padding: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .admin-user-card { margin-bottom: 0.5rem; }
    .admin-user-info { display: flex !important; }

    .admin-content {
        margin-left: 0 !important;
        width: 100%;
        max-width: none;
        padding: 1rem;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .admin-page { max-width: none; }
    .admin-page-title { font-size: 1.35rem; }
    .admin-page-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .admin-card-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .admin-body .stats-grid { gap: 0.75rem; }
    .admin-body .stat-card { padding: 1rem; border-radius: 10px; }
    .admin-body .stat-value { font-size: 1.35rem; }
    .admin-body .stat-label { font-size: 0.72rem; }
    .admin-body .stat-card-icon { width: 36px; height: 36px; border-radius: 8px; font-size: 1.1rem; }
    .admin-edit-grid { grid-template-columns: 1fr; }
    /* Order edit on mobile: flatten the column wrappers and push Refund card to the very end */
    .admin-page--order-edit { display: flex; flex-direction: column; gap: 1rem; }
    .admin-page--order-edit > * { order: 0; }
    .admin-page--order-edit .admin-edit-grid { display: contents; }
    .admin-page--order-edit .admin-edit-col { display: contents; }
    .admin-page--order-edit .admin-card--order-edit-refund { order: 999; }
    .admin-body .form-row { grid-template-columns: 1fr; }
    .admin-body .form-row-5 { grid-template-columns: 1fr; }
    .admin-body .form-actions,
    .admin-body .form-actions-row { flex-wrap: wrap; }
    .admin-body .action-group { flex-wrap: wrap; }

    .admin-card { padding: 1rem; border-radius: 10px; }
    .admin-card h2 { font-size: 0.95rem; margin-bottom: 1rem; }
    .admin-card--flush .admin-table th:first-child,
    .admin-card--flush .admin-table td:first-child { padding-left: 0.85rem; }
    .admin-card--flush .admin-table th:last-child,
    .admin-card--flush .admin-table td:last-child { padding-right: 0.85rem; }

    .admin-filters {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }
    .admin-filters::-webkit-scrollbar { display: none; }
    .filter-btn { flex-shrink: 0; }

    .admin-table { font-size: 0.78rem; }
    .admin-table th { padding: 0.6rem 0.65rem; font-size: 0.66rem; }
    .admin-table td { padding: 0.6rem 0.65rem; }
    .order-code-badge { font-size: 0.72rem; padding: 0.15rem 0.4rem; }
    .action-btn { width: 32px; height: 32px; }

    .admin-body .settings-form { max-width: 100%; }
    .admin-body .settings-rate-row { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .admin-body .settings-rate-input { min-width: 100%; }
    .admin-body .settings-rate-input .form-control { max-width: 100%; }
    .admin-body .settings-preview-grid { flex-direction: column; gap: 0.75rem; }
    .admin-body .discount-editor { max-width: 100%; }
    .admin-body .discount-editor:not(.packages-editor) .discount-editor-header,
    .admin-body .discount-editor:not(.packages-editor) .discount-editor-row {
        grid-template-columns: 1fr 1fr 36px;
    }
    .admin-body .discount-editor.packages-editor .discount-editor-row.admin-packages-row {
        grid-template-columns: 1fr;
    }

    .admin-login-wrapper { padding: 1rem; min-height: 100dvh; }
    .admin-login-card { padding: 1.75rem 1.35rem; max-width: 100%; }
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    .admin-sidebar,
    .admin-sidebar-backdrop,
    .admin-menu-toggle-bars span {
        transition: none !important;
    }
}

/* ================================================
   Responsive — Mobile (768px)
   ================================================ */
@media (max-width: 768px) {
    html { font-size: 16px; -webkit-text-size-adjust: 100%; }

    .container { padding: 0 1rem; }
    .container-sm { max-width: 100%; }
    .container-blog { padding-left: 1.15rem; padding-right: 1.15rem; max-width: 100%; }

    /* --- Header & Navigation --- */
    .header { position: sticky; top: 0; z-index: 100; }
    .nav { height: 56px; gap: 0.5rem; }

    .logo-icon { width: 30px; height: 30px; font-size: 1.1rem; border-radius: 8px; }
    .logo-wordmark { font-size: 1.15rem; }

    .nav-toggle { display: flex; }
    .nav-center {
        display: none; position: absolute; top: 56px; left: 0; right: 0;
        background: white; z-index: 200;
        flex-direction: column; padding: 0.75rem 1rem 1rem;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    }
    .nav-center.open { display: flex; }
    .nav-links {
        flex-direction: column; gap: 0.15rem; width: 100%;
    }
    .nav-links li a {
        padding: 0.75rem 1rem; border-radius: 10px; display: block;
        font-size: 0.95rem; -webkit-tap-highlight-color: transparent;
    }
    .nav-links li a:active { background: var(--gray-100); }

    .nav-dropdown { width: 100%; }
    .nav-dropdown-toggle {
        width: 100%; justify-content: space-between; text-align: left;
        padding: 0.75rem 1rem; font-size: 0.95rem; border-radius: 10px;
    }
    .nav-dropdown-menu {
        position: static; opacity: 1; visibility: visible; transform: none;
        pointer-events: auto;
        display: none; box-shadow: none; border: none; border-radius: 0;
        padding: 0.15rem 0 0.35rem 0.75rem; min-width: 0; margin-top: 0.15rem;
    }
    .nav-dropdown.is-open .nav-dropdown-menu { display: block; }
    .nav-dropdown-menu a {
        padding: 0.65rem 1rem; font-size: 0.92rem; border-radius: 10px;
    }

    /* Pe mobil: ascund globul, cont icon-ul si CTA-ul — ramane doar logo + hamburger */
    .nav-right { display: none; }

    .mob-account-link {
        display: flex; align-items: center; gap: 0.6rem;
        margin-top: 0.85rem; padding: 0.85rem 1rem;
        border-radius: 10px; background: var(--gray-50);
        border: 1px solid var(--gray-100);
        font-size: 0.92rem; font-weight: 600; color: var(--gray-800);
        text-decoration: none; -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease;
    }
    .mob-account-link svg { color: var(--primary); flex-shrink: 0; }
    .mob-account-link span:not(.mob-pref-arrow) { flex: 1; }
    .mob-account-link:active { background: var(--gray-100); }

    .mob-prefs {
        display: flex; gap: 0.5rem; margin-top: 0.5rem; padding-top: 0.85rem;
        border-top: 1px solid var(--gray-100);
    }
    .mob-pref-btn {
        flex: 1; display: flex; align-items: center; justify-content: space-between;
        gap: 0.5rem; white-space: nowrap;
        padding: 0.7rem 0.9rem; border-radius: 10px;
        background: var(--gray-50); border: 1px solid var(--gray-100);
        font-size: 0.88rem; font-weight: 600; color: var(--gray-700);
        text-decoration: none; transition: background 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }
    .mob-pref-btn:active { background: var(--gray-100); }
    .mob-pref-arrow {
        color: var(--gray-400); font-size: 1.2rem; font-weight: 400; line-height: 1;
    }

    /* --- Hero --- */
    .hero { padding: 3rem 0 3.5rem; }
    .hero::before, .hero::after { display: none; }
    .hero-badge { font-size: 0.75rem; padding: 0.35rem 0.85rem; margin-bottom: 1.25rem; }
    .hero-title { font-size: 2rem; margin-bottom: 1rem; line-height: 1.12; }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 1.75rem; max-width: 100%; line-height: 1.6; }
    .hero-actions {
        flex-direction: column; gap: 0.6rem; align-items: stretch;
    }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-stats {
        gap: 0; margin-top: 2.5rem;
        display: grid; grid-template-columns: repeat(3, 1fr);
    }
    .hero-stat {
        padding: 0 0.5rem; position: relative;
    }
    .hero-stat:not(:last-child)::after {
        content: ''; position: absolute; right: 0; top: 15%; height: 70%;
        width: 1px; background: var(--gray-200);
    }
    .hero-stat-value { font-size: 1.35rem; }
    .hero-stat-label { font-size: 0.72rem; }

    /* --- Sections --- */
    .section { padding: 3rem 0; }
    .section-title { font-size: 1.65rem; margin-bottom: 0.35rem; }
    .section-subtitle {
        font-size: 0.9rem; margin-bottom: 2rem; max-width: 100%;
        padding: 0 0.5rem;
    }

    /* --- Platform Cards (2 pe rând, fără scroll) --- */
    .platforms-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100%;
        gap: 0.65rem;
    }
    .platform-card { padding: 1.1rem 0.75rem 1.1rem; border-radius: var(--radius-lg); }
    .platform-card:hover { transform: none; }
    .platform-icon { width: 44px; height: 44px; margin-bottom: 0.75rem; }
    .platform-name { font-size: 0.95rem; }
    .platform-price { margin-bottom: 0.75rem; font-size: 0.8rem; }
    .platform-services-list li { font-size: 0.78rem; padding: 0.3rem 0; }
    .btn-platform { padding: 0.6rem 0.75rem; font-size: 0.8rem; }

    /* --- Features / Why Us --- */
    .features-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .feature-card {
        padding: 1.5rem 1rem; border-radius: var(--radius);
    }
    .feature-card:hover { transform: none; }
    .feature-icon { width: 44px; height: 44px; margin-bottom: 0.85rem; font-size: 1.25rem; }
    .feature-card h3 { font-size: 0.9rem; }
    .feature-card p { font-size: 0.8rem; line-height: 1.5; }

    /* --- Home promos --- */
    .home-promos-grid { grid-template-columns: 1fr; gap: 1.1rem; }
    .home-promo-card { padding: 1.25rem 1.1rem 1.2rem 1.4rem; border-radius: 16px; }
    .home-promo-card:hover { transform: none; }
    .home-promo-card-desc { font-size: 0.84rem; }
    .home-promo-card__badge { top: 0.75rem; right: 0.75rem; font-size: 0.6rem; padding: 0.18rem 0.5rem; }
    .home-promo-card-title { padding-right: 4rem; }
    .home-promo-icon { width: 48px; height: 48px; font-size: 1.5rem; margin-bottom: 0.85rem; }
    .home-promo-icon.home-promo-icon--bonus {
        font-size: 0.7rem;
        letter-spacing: -0.06em;
        padding-inline: 0.1rem;
    }
    .home-value-offers-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 1.15rem;
    }
    .home-value-offer-card {
        padding: 1.2rem 1.1rem 1.15rem 1.25rem;
        border-radius: 16px;
    }
    .home-value-offer-card:hover {
        box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    }
    .home-value-offer-card__title {
        font-size: 1rem;
        padding-right: 3.5rem;
    }
    .home-value-offer-card__desc {
        font-size: 0.84rem;
    }
    /* --- Steps / How it Works --- */
    .steps-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .steps-grid::before { display: none; }
    .step-number { width: 48px; height: 48px; font-size: 1.1rem; margin-bottom: 1rem; }
    .step-card h3 { font-size: 1rem; }
    .step-card p { font-size: 0.85rem; max-width: 100%; }

    /* --- Proof / Counters --- */
    .proof-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .proof-value { font-size: 2rem; }
    .proof-label { font-size: 0.78rem; }

    /* --- FAQ --- */
    .faq-list { max-width: 100%; }
    .faq-question { padding: 1rem 1rem; font-size: 0.88rem; }
    .faq-icon { width: 24px; height: 24px; font-size: 0.95rem; }
    .faq-answer-inner { padding: 0 1rem 1rem; font-size: 0.85rem; }

    /* --- CTA --- */
    .cta-banner {
        padding: 2.5rem 1.25rem; border-radius: var(--radius-lg);
    }
    .cta-banner::before, .cta-banner::after { display: none; }
    .cta-banner h2 { font-size: 1.35rem; }
    .cta-banner p { font-size: 0.92rem; margin-bottom: 1.5rem; }
    .cta-banner .btn { width: 100%; }

    /* --- Services Page (mobile) --- */
    .section-services--simple.section {
        padding-top: 2rem;
        padding-bottom: 2.25rem;
    }
    .container--services-simple {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
    .services-hero-card {
        padding: 1.4rem 1.1rem 1.2rem;
        border-radius: 18px;
        box-shadow: 0 12px 36px rgba(15, 23, 42, 0.07);
    }
    .services-hero-card__title {
        font-size: 1.4rem;
        margin-bottom: 0.4rem;
    }
    .services-hero-card__lead {
        font-size: 0.86rem;
        line-height: 1.5;
        margin-bottom: 1.1rem;
    }
    .section-services--simple .services-simple__title {
        font-size: 1.38rem;
        padding: 0 0.25rem;
    }
    .services-simple__lead {
        font-size: 0.86rem;
        line-height: 1.5;
        margin-bottom: 1.2rem;
        padding: 0 0.2rem;
    }
    .services-simple-platform {
        min-height: 70px;
        gap: 0.3rem;
    }
    .services-simple-platform__icon {
        width: 22px;
        height: 22px;
    }
    .services-simple__step {
        gap: 0.55rem;
        margin-bottom: 0.45rem;
    }
    .services-simple__step--2 {
        margin-top: 1.1rem;
    }
    .services-simple__step-num {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.8rem;
    }
    .services-simple__step-title {
        font-size: 0.94rem;
    }
    .services-simple__step-hint {
        font-size: 0.76rem;
    }
    .services-simple__placeholder {
        font-size: 0.8rem;
        padding: 0.75rem 0.85rem;
        margin-bottom: 0.85rem;
    }
    .services-simple {
        max-width: 100%;
    }
    .services-simple__platforms {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        align-items: stretch;
        overflow: visible;
        padding: 0 0 0.35rem;
        margin: 0 0 0.85rem;
        scroll-snap-type: none;
    }
    .services-simple-platform {
        flex: unset;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 52px;
        font-size: 0.82rem;
        padding: 0.5rem 0.45rem;
        scroll-snap-align: unset;
    }
    .services-simple__chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        align-items: stretch;
    }
    .services-simple-chip {
        flex: unset;
        width: auto;
        min-width: 0;
        min-height: 60px;
        font-size: 0.84rem;
        font-weight: 600;
        padding: 0.5rem 0.5rem 0.55rem;
        border-radius: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.22rem;
        text-align: center;
        hyphens: auto;
        overflow-wrap: anywhere;
        word-break: break-word;
        line-height: 1.15;
    }
    .services-simple-chip__rating,
    .services-simple-chip__price {
        margin-left: 0;
        font-size: 0.74rem;
        padding: 0.1rem 0.45rem;
        font-weight: 600;
    }
    .services-simple-chip__price {
        white-space: normal;
        max-width: 100%;
    }
    .section-services--simple .services-order-instant {
        margin-top: 1.15rem;
        border-radius: 12px;
    }

    /* --- Order Progress --- */
    .order-progress-bar { margin-bottom: 1.75rem; max-width: 320px; }
    .progress-dot { width: 30px; height: 30px; font-size: 0.72rem; }
    .progress-label { font-size: 0.65rem; }
    .progress-line { min-width: 35px; }

    /* --- Order Page Grid --- */
    .order-page-grid { grid-template-columns: 1fr; }
    .order-sidebar-col { position: static; order: 2; }
    .order-page-section { padding-top: 1rem; }

    /* --- Order package picker --- */
    .form-group--packages { margin-bottom: 1.05rem; }
    .order-packages-picker {
        padding: 0.45rem 0.5rem 0.52rem;
        border-radius: 9px;
    }
    .order-packages-choose-label {
        font-size: 0.78rem;
        margin-bottom: 0.45rem;
        font-weight: 600;
    }
    .order-packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.32rem;
    }
    .order-packages-grid:has(> .order-package-card:only-child) {
        grid-template-columns: 1fr;
        max-width: 200px;
    }
    .order-package-card__body {
        padding: 0.5rem 0.55rem 0.55rem 0.58rem;
        padding-right: 1.05rem;
    }
    .order-package-card--popular .order-package-card__body {
        padding-top: 1.55rem;
    }
    .order-package-card__badge {
        height: 1rem;
        font-size: 0.48rem;
        letter-spacing: 0.11em;
    }
    .order-package-card__badge::before {
        font-size: 0.54rem;
        margin-right: 0.26rem;
    }
    .order-package-card--popular.order-package-card--selected .order-package-card__body::after {
        top: 1.18rem;
    }
    .order-package-card__title { font-size: 0.88rem; line-height: 1.2; font-weight: 600; }
    .order-package-card__price { font-size: 0.98rem; font-weight: 800; }
    .order-package-card--selected .order-package-card__body::after {
        font-size: 0.52rem;
        top: 0.18rem;
        right: 0.22rem;
    }

    /* --- Order Form --- */
    .order-form-wrapper {
        padding: 1.25rem; border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
    }
    .order-service-info { margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
    .order-service-top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .order-service-info h2 { font-size: 1.25rem; margin-top: 0.65rem; }
    .order-service-info p { font-size: 0.88rem; }
    .form-group { margin-bottom: 1.25rem; }
    .form-group label { font-size: 0.85rem; margin-bottom: 0.4rem; }
    .form-control { padding: 0.75rem 0.9rem; font-size: 0.95rem; border-radius: 8px; }
    .quantity-wrapper { flex-direction: column; gap: 0.75rem; }
    .quantity-input { width: 100%; }
    .quantity-slider { width: 100%; }
    .order-summary { padding: 1rem; border-radius: 10px; }
    .order-summary-heading { font-size: 0.98rem; }
    .order-summary-card { padding: 0.75rem 0.85rem 0.9rem; }
    .order-summary-row { font-size: 0.82rem; }
    .order-summary-total { font-size: 1.02rem; }
    .order-summary-total-amount { font-size: 1.2rem; }
    .order-note { font-size: 0.72rem; }
    .order-payment-logos { gap: 0.4rem; }
    .payment-logo-img--visa { height: 19px; }
    .payment-logo-img--mastercard { height: 24px; }
    .payment-logo-img--apple-pay { height: 22px; }
    .payment-logo-img--google-pay { height: 19px; }
    .order-trust-seal { padding: 0.7rem 0.75rem; gap: 0.5rem; margin-bottom: 0.7rem; }
    .order-trust-seal--footer { margin-top: 0.85rem; margin-bottom: 0; }
    .order-trust-seal__item { font-size: 0.78rem; }
    .order-trust-seal__rating-text strong { font-size: 0.92rem; }
    .order-trust-seal__rating-count { font-size: 0.74rem; }
    .order-safe-footer__chip { font-size: 0.7rem; padding: 0.28rem 0.55rem; }

    /* --- Discount Tiers --- */
    .discount-tiers-banner { padding: 1rem 1.15rem; border-radius: var(--radius); }
    .discount-tiers-title { font-size: 0.82rem; }
    .discount-tiers-list { gap: 0.35rem; }
    .discount-tier { padding: 0.4rem 0.65rem; min-width: 60px; }
    .discount-tier-qty { font-size: 0.72rem; }
    .discount-tier-pct { font-size: 0.92rem; }

    /* --- Order Sidebar --- */
    .order-sidebar-card { padding: 1rem; }
    .sidebar-card-text { font-size: 0.8rem; }
    .sidebar-guarantee-list li { font-size: 0.78rem; }
    .review-text { font-size: 0.78rem; }

    /* --- Track Order --- */
    .track-form { max-width: 100%; }
    .track-input-group { flex-direction: column; gap: 0.5rem; }
    .track-input-group .btn { width: 100%; }
    .track-upsell { padding: 1.25rem; }
    .track-progress-banner { font-size: 0.8rem; padding: 0.7rem 0.85rem; }

    /* --- Order Details --- */
    .order-details-card {
        padding: 1.5rem; border-radius: var(--radius);
        max-width: 100%; margin: 1.5rem auto;
    }
    .order-details-header { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
    .detail-row { font-size: 0.85rem; flex-wrap: wrap; gap: 0.25rem; }
    .detail-row a { max-width: 100%; font-size: 0.82rem; word-break: break-all; text-align: left; }

    /* --- Status / Success / Cancel Pages --- */
    .status-icon { width: 72px; height: 72px; font-size: 2rem; margin-bottom: 1.25rem; }
    .lead { font-size: 1rem; }
    .success-check-ring { width: 90px; height: 90px; }
    .success-next-steps { padding: 1.5rem; max-width: 100%; }
    .success-upsell { padding: 1.5rem; max-width: 100%; }
    .cancel-reasons { padding: 1.5rem; max-width: 100%; }
    .cancel-help { max-width: 100%; }

    /* --- Promo Banner --- */
    .promo-banner { font-size: 0.72rem; padding: 0.45rem 0; }
    .promo-banner-content { gap: 0.5rem; padding-right: 2rem; }
    .promo-banner-text { text-align: center; line-height: 1.4; }
    .promo-banner-close { right: 0.5rem; font-size: 1.1rem; }

    /* --- Testimonials --- */
    .testimonials-grid { grid-template-columns: 1fr; gap: 1rem; }
    .testimonial-card { padding: 1.25rem; }
    .testimonial-card:hover { transform: none; }
    .testimonial-text { font-size: 0.82rem; margin-bottom: 1rem; }

    /* --- Verified Reviews --- */
    .reviews-summary {
        flex-direction: column;
        gap: 0.6rem;
        padding: 1rem 1.25rem;
        text-align: center;
    }
    .reviews-summary__meta { align-items: center; }
    .reviews-summary__avg { font-size: 2rem; }
    .reviews-grid { grid-template-columns: 1fr; gap: 0.85rem; }
    .review-card { padding: 1.25rem 1.25rem 1rem; }
    .review-card:hover { transform: none; }
    .review-card__text { font-size: 0.9rem; margin-bottom: 1rem; }
    .review-card__quote { font-size: 3.5rem; right: 0.75rem; }

    /* --- Wheel Promo --- */
    .wheel-promo-banner { flex-direction: column; padding: 2.5rem 1.5rem; text-align: center; gap: 2rem; }
    .wheel-promo-content h2 { font-size: 1.5rem; }
    .wheel-promo-content p { font-size: 0.9rem; max-width: 100%; }
    .wheel-promo-ring { width: 140px; height: 140px; }
    .wheel-promo-spin { width: 108px; height: 108px; font-size: 2.75rem; }

    /* --- Live Notification --- */
    /* Pe mobil dezactivăm bula de social proof: ocupă spațiu valoros pe ecran. */
    .live-notification { display: none !important; }

    /* --- Wheel --- */
    .wheel-section { padding-top: 1rem; }
    .wheel-hero { margin-bottom: 1.5rem; }
    .wheel-hero-title { font-size: 1.65rem; }
    .wheel-hero-subtitle { font-size: 0.9rem; max-width: 100%; }
    .wheel-glow { width: min(380px, calc(100vw - 1rem)); height: min(380px, calc(100vw - 1rem)); }
    .wheel-ring { width: min(340px, calc(100vw - 2rem)); height: min(340px, calc(100vw - 2rem)); padding: 10px; }
    .wheel-pointer svg { width: 28px; height: 34px; }
    .wheel-spin-btn {
        padding: 0.85rem 2rem; font-size: 1rem;
        min-width: 200px; border-radius: 14px;
    }
    .wheel-cooldown-timer { font-size: 1.15rem; }
    .wheel-rules {
        padding: 1.5rem; margin-top: 2rem;
        border-radius: var(--radius-lg);
    }
    .wheel-rules-grid { grid-template-columns: 1fr; gap: 0.5rem; }
    .wheel-rule { font-size: 0.82rem; padding: 0.5rem 0.65rem; }

    /* --- Wheel Modal --- */
    /* Center the modal vertically so the on-screen keyboard can push it up
       without hiding the email input. Use 100dvh (dynamic viewport) when
       supported so the modal automatically shrinks when the keyboard opens. */
    .wheel-modal {
        padding: 0.75rem;
        align-items: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wheel-modal-content {
        border-radius: 18px;
        padding: 1.15rem 0.95rem 1rem;
        max-width: 100%;
        max-height: 90vh;
        max-height: calc(var(--vvh, 100vh) - 1.5rem);
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: auto 0;
    }
    .wheel-modal-header { margin-bottom: 0.55rem; }
    .wheel-modal-icon { font-size: 2rem; margin-bottom: 0.2rem; }
    .wheel-modal-content h2 { font-size: 1.08rem; }
    .wheel-prize-amount { font-size: 2.15rem; }
    .wheel-prize-card { padding: 0.75rem 0.65rem; margin: 0.5rem 0 0.6rem; }
    .wheel-claim-info { font-size: 0.78rem; margin-bottom: 0.45rem; }
    .wheel-bonus-headline { font-size: 0.98rem; }
    .wheel-bonus-wrap--hero { padding: 0.75rem 0.8rem 0.85rem; }
    .wheel-claim-form .form-group { margin-bottom: 0.75rem; }
    .wheel-claim-email-label { font-size: 0.88rem !important; }
    .wheel-claim-email-input.form-control {
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
    }
    /* Lock body scroll so background doesn't shift when modal/keyboard opens */
    body.wheel-modal-open { overflow: hidden; touch-action: none; }

    /* --- Footer --- */
    .footer { padding: 3rem 0 0; }
    .footer::before { height: 2px; }
    .footer-top { grid-template-columns: 1fr; gap: 1.75rem; padding-bottom: 2rem; }
    .footer-brand p { max-width: 100%; font-size: 0.85rem; }
    .footer-col h4 { margin-bottom: 0.75rem; }
    .footer-col ul li { margin-bottom: 0.4rem; }
    .footer-col ul li a { font-size: 0.85rem; }
    .footer-col-title-gap { margin-top: 1rem; }
    .footer-bottom {
        flex-direction: column; text-align: center;
        padding: 1.25rem 0; gap: 0.75rem;
    }
    .footer-badges { justify-content: center; }
    .footer-badge { font-size: 0.68rem; }
    .footer-bottom-right { align-items: center; width: 100%; }
    .footer-sol-img { max-height: 30px; max-width: min(150px, 92vw); }

    /* --- Legal Pages --- */
    .legal-content h1 { font-size: 1.65rem; }
    .legal-content h2 { font-size: 1.1rem; margin-top: 1.5rem; }
    .legal-content p { font-size: 0.9rem; line-height: 1.65; }
    .legal-content ul { margin-left: 1.15rem; font-size: 0.9rem; }
    .breadcrumb { font-size: 0.82rem; padding: 0.5rem 0 1rem; }

}

/* ================================================
   Responsive — Small Mobile (480px)
   ================================================ */
@media (max-width: 480px) {
    .container { padding: 0 0.85rem; }

    /* Form hints mai citibile pe mobil ca user-ul sa nu rateze instructiunile critice */
    .form-hint { font-size: 0.85rem; line-height: 1.45; color: var(--gray-500); }

    .hero { padding: 2.5rem 0 3rem; }
    .hero-title { font-size: 1.7rem; line-height: 1.15; }
    .hero-badge { font-size: 0.7rem; padding: 0.3rem 0.75rem; }
    .hero-subtitle { font-size: 0.88rem; }
    .hero-stat-value { font-size: 1.15rem; }
    .hero-stat-label { font-size: 0.68rem; }

    /* .section { padding: 2.25rem 0; } -- dezactivat pentru a lasa fiecare sectiune sa-si gestioneze propriul padding pe mobil */
    .section-title { font-size: 1.4rem; }
    .section-subtitle { font-size: 0.82rem; margin-bottom: 1.5rem; }

    .features-grid { grid-template-columns: 1fr; gap: 0.65rem; }
    .feature-card { padding: 1.25rem 1rem; }

    .proof-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .proof-value { font-size: 1.65rem; }
    .proof-label { font-size: 0.72rem; }

    .btn-lg { padding: 0.8rem 1.75rem; font-size: 0.95rem; }

    .cta-banner h2 { font-size: 1.2rem; }
    .cta-banner p { font-size: 0.85rem; }

    .order-form-wrapper { padding: 1rem; }
    .order-service-info h2 { font-size: 1.1rem; }
    .order-summary-total { font-size: 0.95rem; }
    .order-summary-total-amount { font-size: 1.08rem; }
    .order-progress-bar { max-width: 280px; margin-bottom: 1.5rem; }
    .progress-dot { width: 26px; height: 26px; font-size: 0.65rem; }
    .progress-label { font-size: 0.6rem; }
    .progress-line { min-width: 25px; }

    .testimonials-grid { grid-template-columns: 1fr; }
    .wheel-promo-banner { padding: 2rem 1.25rem; margin: 1.5rem 0; }
    .wheel-promo-content h2 { font-size: 1.3rem; }
    .wheel-promo-ring { width: 120px; height: 120px; }
    .wheel-promo-spin { width: 90px; height: 90px; font-size: 2rem; }
    .promo-banner-btn { font-size: 0.7rem; padding: 0.2rem 0.65rem; }
    /* .live-notification e ascunsă pe ≤ 768px (vezi regula de mai sus). */

    .wheel-ring { width: calc(100vw - 2.5rem); height: calc(100vw - 2.5rem); max-width: 340px; max-height: 340px; padding: 8px; }
    .wheel-glow { width: calc(100vw - 1rem); height: calc(100vw - 1rem); max-width: 380px; max-height: 380px; }
    .wheel-hero-title { font-size: 1.5rem; }
    .wheel-spin-btn { min-width: 180px; padding: 0.75rem 1.75rem; font-size: 0.95rem; }
    .wheel-modal-content { padding: 1rem 0.8rem 0.9rem; border-radius: 16px; }
    .wheel-modal-icon { font-size: 1.85rem; }
    .wheel-modal-content h2 { font-size: 1.02rem; }
    .wheel-prize-amount { font-size: 1.95rem; }
    .wheel-prize-card { padding: 0.7rem 0.55rem; margin: 0.45rem 0 0.55rem; }
    .wheel-claim-info { font-size: 0.76rem; margin-bottom: 0.4rem; }
    .wheel-claim-email-input.form-control { padding-top: 0.8rem; padding-bottom: 0.8rem; padding-left: 2.45rem; }
    .wheel-claim-email-input-icon { left: 0.75rem; }
    .wheel-claim-submit { min-height: 50px; }

    .admin-body .stats-grid { grid-template-columns: 1fr; }
    .admin-body .admin-content { padding: 0.75rem; }
    .admin-body .admin-page-title { font-size: 1.2rem; }

    .footer-brand .logo-icon { width: 28px; height: 28px; font-size: 1rem; border-radius: 7px; }
    .footer-brand .logo-wordmark { font-size: 1.05rem; }
    .footer-brand .logo-img { max-height: 32px; }
    .footer-socials { gap: 0.35rem; }
    .footer-social { width: 32px; height: 32px; }

    .legal-content h1 { font-size: 1.4rem; }
    .legal-content h2 { font-size: 1rem; }
    .legal-content p { font-size: 0.85rem; }
}

/* ================================================
   Responsive — Extra Small (360px)
   ================================================ */
@media (max-width: 360px) {
    .hero-title { font-size: 1.5rem; }
    .hero-stats { grid-template-columns: 1fr; gap: 0.75rem; }
    .hero-stat:not(:last-child)::after { display: none; }
    .hero-stat { padding: 0.35rem 0; text-align: center; }

    .section-title { font-size: 1.25rem; }
    .proof-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }

    .platform-card { padding: 1.25rem 1rem 1.25rem; }

    .wheel-ring { width: calc(100vw - 2rem); height: calc(100vw - 2rem); }
    .wheel-spin-btn { min-width: 160px; font-size: 0.88rem; padding: 0.7rem 1.5rem; }
}

/* ================================================
   Touch & Mobile UX Optimizations
   ================================================ */
@media (hover: none) and (pointer: coarse) {
    .platform-card:hover,
    .feature-card:hover,
    .step-card:hover .step-number {
        transform: none;
        box-shadow: inherit;
    }
    .platform-card:hover .platform-icon { transform: none; }

    .btn:active { transform: scale(0.97); }
    .btn-primary:active { box-shadow: var(--shadow); }

    .faq-question:hover { color: var(--gray-800); }
    .footer-col ul li a:hover { padding-left: 0; }
    .footer-social:hover { transform: none; }
}

@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .form-control { min-height: 44px; font-size: 16px; }
    .nav-toggle { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .lang-btn { min-height: 30px; display: inline-flex; align-items: center; }
    .tab-btn { min-height: 40px; }
    .filter-btn { min-height: 36px; }
    .faq-question { min-height: 48px; }
}

/* Safe area for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer-bottom { padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
    .wheel-modal { padding-bottom: env(safe-area-inset-bottom); }
    .admin-content { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ================================================
   Legal Pages & Breadcrumb
   ================================================ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0 1.5rem;
    font-size: 0.9rem;
    color: var(--text-light);
}
.breadcrumb a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s;
}
.breadcrumb a:hover { color: var(--primary-dark); }
.breadcrumb span { color: var(--text-color); font-weight: 500; }

.legal-content {
    max-width: 780px;
    margin: 0 auto;
}
.legal-content h1 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}
.legal-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2rem 0 0.75rem;
    color: var(--text-color);
}
.legal-content p {
    color: var(--text-light);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.legal-content ul {
    margin: 0.5rem 0 1rem 1.5rem;
    color: var(--text-light);
    line-height: 1.75;
}
.legal-content ul li {
    margin-bottom: 0.35rem;
}
.legal-content a {
    color: var(--primary);
    text-decoration: underline;
}
.legal-content a:hover {
    color: var(--primary-dark);
}

/* ================================================
   FAQ / Help Page
   ================================================ */
.container-faq { max-width: 900px; }
.faq-page { padding-top: 1rem; }
.faq-page-header {
    text-align: center; max-width: 640px; margin: 0 auto 2.5rem;
}
.faq-page-header h1 {
    font-size: 2.2rem; font-weight: 800; color: var(--gray-900);
    letter-spacing: -0.03em; margin-bottom: 0.75rem;
}
.faq-page-lead {
    font-size: 1.05rem; color: var(--gray-500); line-height: 1.7;
}

.faq-highlights {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-bottom: 3rem;
}
.faq-highlight-card {
    background: #fff; border: 1px solid var(--gray-100); border-radius: var(--radius-lg);
    padding: 1.5rem; text-align: center;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.faq-highlight-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06); transform: translateY(-2px);
}
.faq-highlight-icon {
    display: block; font-size: 2rem; margin-bottom: 0.65rem;
}
.faq-highlight-card h3 {
    font-size: 1rem; font-weight: 700; color: var(--gray-900); margin-bottom: 0.4rem;
}
.faq-highlight-card p {
    font-size: 0.88rem; color: var(--gray-500); line-height: 1.6; margin: 0;
}

.faq-categories { margin-bottom: 2.5rem; }

.faq-category { margin-bottom: 2rem; }
.faq-category-title {
    display: flex; align-items: center; gap: 0.6rem;
    font-size: 1.25rem; font-weight: 700; color: var(--gray-900);
    margin-bottom: 1rem; padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--gray-100);
}
.faq-category-icon { font-size: 1.35rem; }

/* Scoped to /faq only — home FAQ uses .faq-icon + JS, not ::after */
.faq-page .faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-page .faq-item {
    border: 1px solid var(--gray-100); border-radius: var(--radius);
    margin-bottom: 0.5rem; overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.faq-page .faq-item[open] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    border-color: var(--gray-200);
}
.faq-page .faq-question {
    padding: 1rem 1.25rem; font-weight: 600; font-size: 0.95rem;
    color: var(--gray-800); cursor: pointer; list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.faq-page .faq-question:hover { background: var(--gray-50); }
.faq-page .faq-question::-webkit-details-marker { display: none; }
.faq-page .faq-question::marker { display: none; content: ''; }
.faq-page .faq-question::after {
    content: '+'; font-size: 1.3rem; font-weight: 400; color: var(--gray-400);
    flex-shrink: 0; transition: transform 0.2s ease;
    width: 24px; text-align: center; line-height: 1;
}
.faq-page .faq-item[open] .faq-question { background: var(--gray-50); color: var(--primary); }
.faq-page .faq-item[open] .faq-question::after {
    content: '−'; color: var(--primary);
}
.faq-page .faq-answer {
    padding: 0 1.25rem 1.15rem;
    animation: faqSlide 0.2s ease;
}
.faq-page .faq-answer p {
    margin: 0; font-size: 0.92rem; color: var(--gray-600);
    line-height: 1.75;
}
@keyframes faqSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-important {
    display: flex; gap: 1rem; align-items: flex-start;
    padding: 1.25rem 1.5rem; background: #FFF7ED; border: 1px solid #FED7AA;
    border-radius: var(--radius-lg); margin-bottom: 2rem;
}
.faq-important-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.3; }
.faq-important strong {
    display: block; font-size: 0.95rem; color: #92400E; margin-bottom: 0.25rem;
}
.faq-important p {
    margin: 0; font-size: 0.88rem; color: #B45309; line-height: 1.65;
}

.faq-help-more {
    text-align: center; padding: 2.5rem 2rem; background: var(--gray-50);
    border-radius: var(--radius-lg); border: 1px solid var(--gray-100);
}
.faq-help-more h2 {
    font-size: 1.4rem; font-weight: 800; color: var(--gray-900); margin-bottom: 0.5rem;
}
.faq-help-more p {
    font-size: 0.95rem; color: var(--gray-500); margin-bottom: 1.25rem;
    max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.65;
}

@media (max-width: 768px) {
    .faq-page-header h1 { font-size: 1.6rem; }
    .faq-page-lead { font-size: 0.92rem; }
    .faq-highlights { grid-template-columns: 1fr; gap: 0.75rem; }
    .faq-highlight-card { padding: 1.15rem; text-align: left; display: flex; gap: 0.85rem; align-items: flex-start; }
    .faq-highlight-icon { font-size: 1.5rem; margin-bottom: 0; flex-shrink: 0; }
    .faq-highlight-card h3 { margin-bottom: 0.2rem; }
    .faq-category-title { font-size: 1.1rem; }
    .faq-page .faq-question { font-size: 0.9rem; padding: 0.85rem 1rem; }
    .faq-page .faq-answer { padding: 0 1rem 1rem; }
    .faq-page .faq-answer p { font-size: 0.86rem; }
    .faq-help-more { padding: 2rem 1.25rem; }
    .faq-help-more h2 { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .faq-page-header h1 { font-size: 1.35rem; }
}

/* ================================================
   Referral program landing (/recomanda)
   ================================================ */
.refprog-hero {
    background: linear-gradient(145deg, #1c1917 0%, #292524 40%, #7f1d1d 100%);
    color: #fff;
    padding: 3.5rem 0 4rem;
    position: relative;
    overflow: hidden;
}
.refprog-hero::before {
    content: '';
    position: absolute;
    inset: -40% -20% auto;
    height: 120%;
    background: radial-gradient(ellipse at 30% 20%, rgba(248, 113, 113, 0.35), transparent 55%),
                radial-gradient(ellipse at 80% 60%, rgba(251, 191, 36, 0.12), transparent 45%);
    pointer-events: none;
}
.refprog-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    text-align: center;
    margin: 0 auto;
}
.refprog-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fecaca;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}
.refprog-hero-title {
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}
.refprog-hero-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #e7e5e4;
    margin-bottom: 1.75rem;
}
.refprog-hero-cta {
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.45);
}

.refprog-stats {
    margin-top: -2rem;
    padding-top: 0;
    position: relative;
    z-index: 2;
}
.refprog-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.refprog-stat {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.25rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);
    text-align: center;
}
.refprog-stat-icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; }
.refprog-stat strong { display: block; font-size: 0.95rem; color: var(--gray-900); margin-bottom: 0.35rem; }
.refprog-stat span { font-size: 0.8rem; color: var(--gray-500); line-height: 1.45; }

.refprog-section-title {
    font-size: 1.65rem;
    font-weight: 800;
    text-align: center;
    color: var(--gray-900);
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}
.refprog-benefit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.refprog-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.35rem;
    transition: var(--transition);
}
.refprog-card:hover {
    border-color: var(--primary-200);
    box-shadow: var(--shadow-md);
}
.refprog-card--accent {
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-color: var(--primary-200);
}
.refprog-card-num {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 0.08em;
    display: block;
    margin-bottom: 0.5rem;
}
.refprog-card h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}
.refprog-card p {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.65;
    margin: 0;
}

.refprog-step-list {
    list-style: none;
    max-width: 640px;
    margin: 0 auto;
    counter-reset: refstep;
}
.refprog-step-list li {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 1.15rem 0;
    border-bottom: 1px solid var(--gray-200);
}
.refprog-step-list li:last-child { border-bottom: 0; }
.refprog-step-ix {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--primary-gradient);
    color: #fff;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-primary);
}
.refprog-step-list p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.65;
    padding-top: 0.15rem;
}

.refprog-milestones { background: var(--gray-50); }
.refprog-mile-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto;
}
.refprog-mile {
    text-align: center;
    padding: 1.5rem 1rem;
}
.refprog-mile-ring {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    border: 3px solid var(--primary);
    color: var(--primary);
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.refprog-mile--mid .refprog-mile-ring {
    width: 4rem;
    height: 4rem;
    font-size: 1.15rem;
    border-width: 4px;
    box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.08);
}
.refprog-mile h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.35rem;
}
.refprog-mile p {
    font-size: 0.82rem;
    color: var(--gray-600);
    line-height: 1.55;
    margin: 0;
}

.container--narrow { max-width: 520px; }
.refprog-form-section { padding-bottom: 4rem; }
.refprog-alert { margin-bottom: 1.25rem; }
.refprog-success {
    background: linear-gradient(180deg, #ecfdf5 0%, #fff 55%);
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
}
.refprog-success-icon { font-size: 2.25rem; margin-bottom: 0.5rem; }
.refprog-success-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}
.refprog-success-text {
    font-size: 0.92rem;
    color: var(--gray-600);
    margin-bottom: 1.25rem;
    line-height: 1.6;
}
.refprog-link-box { margin-bottom: 1.25rem; }
.refprog-link-input {
    font-size: 0.82rem !important;
    text-align: center;
    word-break: break-all;
}
.refprog-success-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
}
.refprog-copy-toast {
    display: block;
    margin-top: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #047857;
}

.refprog-form-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 2rem 1.75rem;
    box-shadow: var(--shadow-lg);
}
.refprog-form-title {
    font-size: 1.35rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--gray-900);
}
.refprog-form-note {
    font-size: 0.78rem;
    color: var(--gray-500);
    line-height: 1.55;
    margin: -0.25rem 0 1.25rem;
}
.refprog-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .refprog-stats-grid { grid-template-columns: 1fr; }
    .refprog-benefit-grid { grid-template-columns: 1fr; }
    .refprog-mile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .refprog-hero { padding: 2.5rem 0 3rem; }
    .refprog-form-card { padding: 1.5rem 1.15rem; }
}

/* ================================================
   Accessibility — Reduced Motion
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-on-scroll { opacity: 1 !important; transform: none !important; }
    .hero-title, .hero-subtitle, .hero-actions, .hero-stats, .hero-badge { animation: none !important; opacity: 1; }
}

.track-panel-card {
    margin: 1.25rem 0 1.5rem;
    padding: 1.25rem 1.35rem;
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
}
.track-panel-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 1rem;
    color: var(--gray-900);
}
.track-panel-partial {
    font-size: 0.9rem;
    color: #b45309;
    margin: 0.35rem 0 0.75rem;
    line-height: 1.55;
}
.track-panel-synced {
    font-size: 0.88rem;
    color: var(--gray-600);
}

.faq-admin-note {
    margin-top: 1rem;
    padding: 1rem 1.15rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-lg);
    color: #1e40af;
    font-size: 0.95rem;
    line-height: 1.6;
}

.customer-session-card {
    padding: 1.5rem;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: #fff;
    margin-bottom: 1rem;
}
.customer-session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.customer-orders-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 1.15rem;
    margin-top: 1.35rem;
}
.customer-order-card {
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.customer-order-card:hover {
    border-color: #e5e7eb;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.07);
}
.customer-order-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.cookie-consent {
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: rgba(17, 24, 39, 0.92);
    color: #f9fafb;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
}
/* Cand bannerul de cookies este vizibil, lasam loc in josul paginii ca sa nu acopere CTA-uri sticky. */
body:has(.cookie-consent:not([hidden])) { padding-bottom: 7.5rem; }
@media (max-width: 600px) {
    body:has(.cookie-consent:not([hidden])) { padding-bottom: 11rem; }
}
.cookie-consent-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cookie-consent-text {
    margin: 0;
    flex: 1 1 280px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #e5e7eb;
}
.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* btn-outline global = fundal alb; aici trebuie fundal explicit ca textul deschis sa fie vizibil */
.cookie-consent .btn-outline {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #ffffff;
    font-weight: 600;
    min-height: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
}
.cookie-consent .btn-outline:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: #ffffff;
    color: #ffffff;
}
.cookie-consent .btn-primary {
    background: linear-gradient(135deg, #EF4444, #DC2626);
    border: none;
    color: #fff;
    font-weight: 600;
    min-height: 40px;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Customer portal — layout lat, navigare, carduri */
.customer-portal-section {
    padding-top: 2rem;
    padding-bottom: 3.5rem;
    background: linear-gradient(165deg, #fff5f5 0%, #fafafa 22%, #f4f4f5 100%);
}
.customer-portal-section--guest .customer-portal__title {
    text-align: center;
}
.customer-portal-section--guest .customer-portal__subtitle {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.customer-portal {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: var(--container-pad, 1rem);
    padding-right: var(--container-pad, 1rem);
}
.customer-portal__header {
    margin-bottom: 1.5rem;
}
.customer-portal__title {
    font-size: clamp(1.65rem, 2.8vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0 0 0.5rem;
    color: var(--gray-900, #111827);
    line-height: 1.15;
}
.customer-portal__subtitle {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--gray-600, #4b5563);
    max-width: 52rem;
}
.customer-portal-breadcrumb {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    color: var(--gray-600, #6b7280);
}
.customer-portal-breadcrumb a {
    color: #b91c1c;
    font-weight: 600;
    text-decoration: none;
}
.customer-portal-breadcrumb a:hover {
    text-decoration: underline;
}
.customer-portal-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.75rem;
    padding: 0.45rem 0.55rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.customer-portal-nav__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.customer-portal-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gray-700, #374151);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.customer-portal-nav__link:hover {
    background: #f3f4f6;
    color: #111827;
}
.customer-portal-nav__link.is-active {
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
    border-color: #fecaca;
    color: #b91c1c;
    box-shadow: 0 1px 0 rgba(220, 38, 38, 0.08);
}
.customer-portal-nav__logout {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-500, #6b7280);
    text-decoration: none;
    padding: 0.45rem 0.65rem;
    border-radius: 8px;
}
.customer-portal-nav__logout:hover {
    color: #b91c1c;
    background: #fef2f2;
}
.customer-portal-nav__right {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.vip-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
}
.vip-badge--bronze { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.vip-badge--silver { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.vip-badge--gold { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%); color: #78350f; border-color: #d97706; }

.form-error--inline {
    margin-top: 0.45rem;
    padding: 0.55rem 0.7rem;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #b91c1c;
    font-size: 0.85rem;
    line-height: 1.4;
}
.form-control.is-invalid {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 2px rgba(252, 165, 165, 0.25);
}
.customer-portal-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 1.75rem;
}
.customer-portal-feature {
    padding: 1.2rem 1.35rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.customer-portal-feature:hover {
    border-color: #fecaca;
    box-shadow: 0 8px 28px rgba(220, 38, 38, 0.07);
}
.customer-portal-feature__icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.customer-portal-feature__title {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--gray-900, #111827);
}
.customer-portal-feature__text {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--gray-600, #4b5563);
}
.customer-portal-auth-card {
    max-width: 460px;
    margin: 0 auto;
    padding: 1.75rem 1.85rem 1.9rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
}
.customer-portal-auth-card .track-form {
    max-width: none;
}
.customer-portal-auth-card .btn-primary {
    width: 100%;
    margin-top: 0.25rem;
}
.customer-portal-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin-top: 1.35rem;
}
.customer-portal-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.35rem 1.4rem;
    min-height: 7.5rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.customer-portal-tile:hover {
    border-color: #fca5a5;
    box-shadow: 0 12px 36px rgba(220, 38, 38, 0.1);
    transform: translateY(-3px);
}
.customer-portal-tile--muted {
    border-style: dashed;
    opacity: 0.92;
}
.customer-portal-tile--muted:hover {
    transform: none;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.customer-portal-tile__icon {
    font-size: 1.85rem;
    line-height: 1;
    margin-bottom: 0.65rem;
}
.customer-portal-tile__title {
    font-weight: 800;
    font-size: 1.02rem;
    margin: 0 0 0.4rem;
    color: var(--gray-900, #111827);
}
.customer-portal-tile__hint {
    font-size: 0.84rem;
    line-height: 1.45;
    color: var(--gray-600, #6b7280);
    margin: 0;
    margin-top: auto;
}
.customer-portal-userbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    font-size: 0.95rem;
    color: var(--gray-700, #374151);
}
.customer-portal-userbar strong {
    color: var(--gray-900, #111827);
    word-break: break-all;
}
.customer-ledger-card {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    padding: 0.5rem 0 1rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.customer-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
}
.customer-ledger-table th,
.customer-ledger-table td {
    padding: 0.65rem 1.15rem;
    text-align: left;
    border-bottom: 1px solid #f3f4f6;
}
.customer-ledger-table th {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500, #6b7280);
    background: #fafafa;
}
.customer-ledger-table td:last-child {
    text-align: right;
    font-weight: 700;
}
.customer-ledger-table tr:last-child td {
    border-bottom: none;
}
.customer-ledger-table .is-negative {
    color: #b91c1c;
}
.customer-ledger-table .is-positive {
    color: #15803d;
}
.customer-prefs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.customer-referrals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}
.customer-referrals-grid .customer-loyalty-card {
    margin: 0;
    height: 100%;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
.customer-balance-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #14532d;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
}
.customer-portal-userbar strong {
    color: var(--gray-900, #111827);
    font-weight: 800;
}
@media (max-width: 720px) {
    .customer-portal-nav {
        flex-direction: column;
        align-items: stretch;
    }
    .customer-portal-nav__logout {
        text-align: center;
        border-top: 1px solid #f3f4f6;
        padding-top: 0.65rem;
    }
    .customer-portal-nav__links {
        justify-content: center;
    }
}

/* Customer account: filters, preferences, order summary (print) */
.customer-orders-toolbar {
    margin-bottom: 1rem;
}
.customer-orders-filters {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--gray-50, #f9fafb);
    border-radius: 10px;
    border: 1px solid var(--gray-200, #e5e7eb);
}
.customer-orders-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}
.customer-orders-filters__row .form-group {
    flex: 1 1 160px;
    margin-bottom: 0;
}
.customer-orders-filters__submit {
    flex: 0 0 auto;
}
.customer-orders-filters__spacer {
    display: block;
    margin: 0;
    height: 0;
    overflow: hidden;
}
.customer-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.customer-prefs-card {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
}
.customer-prefs-card__title {
    font-size: 1.05rem;
    margin: 0 0 0.5rem;
}
.customer-prefs-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
}
.checkbox-label input {
    margin-top: 0.2rem;
}

.layout-summary {
    margin: 0;
    padding: 0;
    background: #fff;
    color: #111827;
}
.order-summary-doc {
    max-width: 640px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}
.order-summary-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.order-summary-brand {
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}
.order-summary-brand-img {
    display: block;
    margin: 0 auto;
    max-height: 52px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}
.order-summary-meta {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: #6b7280;
}
.order-summary-title {
    font-size: 1.35rem;
    margin: 0 0 1.25rem;
    text-align: center;
}
.order-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.order-summary-table th,
.order-summary-table td {
    text-align: left;
    padding: 0.5rem 0.35rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
}
.order-summary-table th {
    width: 38%;
    color: #6b7280;
    font-weight: 600;
}
.order-summary-track {
    margin: 1.25rem 0 0;
}
.order-summary-disclaimer {
    margin: 1.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #6b7280;
}
.order-summary-actions {
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.order-summary-denied {
    margin: 0 0 1rem;
}

.customer-loyalty-card {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 10px;
}
.customer-loyalty-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

/* Loialitate — bară progres (praguri 3 / 10 comenzi) */
.loyalty-bar {
    margin-top: 1.15rem;
}
.loyalty-bar__track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, #e5e7eb 0%, #e5e7eb 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.loyalty-bar__fill {
    height: 100%;
    border-radius: 999px;
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(90deg, #f97316, #ef4444, #dc2626);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.35);
    transition: width 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.loyalty-bar__tick {
    position: absolute;
    top: -3px;
    width: 3px;
    height: calc(100% + 6px);
    border-radius: 2px;
    background: rgba(17, 24, 39, 0.35);
    transform: translateX(-1.5px);
    pointer-events: none;
}
.loyalty-bar__tick--silver {
    left: 30%;
}
.loyalty-bar__zones {
    display: flex;
    margin-top: 0.65rem;
    gap: 0.35rem 0.5rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--gray-600, #4b5563);
}
.loyalty-bar__zone {
    min-width: 0;
    padding: 0.35rem 0.4rem;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color 0.15s, background 0.15s;
}
.loyalty-bar__zone:nth-child(1) {
    flex: 0 0 30%;
    max-width: 30%;
}
.loyalty-bar__zone:nth-child(2) {
    flex: 1 1 auto;
    min-width: 0;
}
.loyalty-bar__zone--gold {
    flex: 0 0 22%;
    max-width: 22%;
    text-align: right;
}
.loyalty-bar__zone.is-active {
    background: rgba(255, 255, 255, 0.65);
    border-color: #fbbf24;
    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2);
}
.loyalty-bar__zone-name {
    display: block;
    font-weight: 800;
    color: var(--gray-900, #111827);
    letter-spacing: -0.02em;
}
.loyalty-bar__zone-range {
    display: block;
    font-size: 0.72rem;
    color: var(--gray-500, #6b7280);
    margin-top: 0.1rem;
}
.loyalty-bar__zone.is-active .loyalty-bar__zone-name {
    color: #b45309;
}
.loyalty-bar__caption {
    margin-top: 0.85rem !important;
    margin-bottom: 0 !important;
}
@media (max-width: 520px) {
    .loyalty-bar__zones {
        flex-wrap: wrap;
    }
    .loyalty-bar__zone:nth-child(1),
    .loyalty-bar__zone:nth-child(2),
    .loyalty-bar__zone--gold {
        flex: 1 1 100%;
        max-width: none;
        text-align: left;
    }
}

.order-draft-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    transition: opacity 0.32s ease, transform 0.32s ease;
}
.order-draft-banner--restored {
    background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
    border: 1px solid #BBF7D0;
    color: #065F46;
    padding: 0.6rem 0.85rem;
    border-radius: 10px;
    font-size: 0.86rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.05);
}
.order-draft-banner--fading { opacity: 0; transform: translateY(-4px); }
.order-draft-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #10B981;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    flex-shrink: 0;
}
.order-draft-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}
.order-draft-banner__clear {
    color: #047857;
    font-weight: 600;
    background: transparent;
    border: 0;
    padding: 0.3rem 0.55rem !important;
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    min-height: auto !important;
}
.order-draft-banner__clear:hover, .order-draft-banner__clear:focus { color: #064E3B; background: rgba(16, 185, 129, 0.08); }
@media (max-width: 480px) {
    .order-draft-banner { gap: 0.55rem; }
    .order-draft-banner--restored { padding: 0.55rem 0.7rem; font-size: 0.82rem; }
    .order-draft-banner__actions {
        margin-left: auto;
        width: auto;
    }
    .order-draft-banner__clear {
        font-size: 0.78rem;
    }
}
.support-thread {
    margin: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.support-msg {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--gray-200, #e5e7eb);
    background: #fff;
}
.support-msg--customer {
    border-left: 4px solid #dc2626;
}
.support-msg--admin {
    border-left: 4px solid #2563eb;
    background: #f8fafc;
}
.support-msg__meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 0.5rem;
}
.support-msg__body {
    line-height: 1.5;
}
.support-msg__files a {
    display: inline-block;
    margin-right: 0.75rem;
    margin-top: 0.35rem;
}
.support-reply-form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.admin-support-thread {
    margin-bottom: 1.5rem;
}

@media print {
    .no-print {
        display: none !important;
    }
    .layout-summary,
    body.layout-summary {
        background: #fff;
    }
    .order-summary-doc {
        padding: 0;
        max-width: 100%;
    }
    .order-summary-actions {
        display: none;
    }
}

/* ========== Public account warning alert (order form) ========== */
@keyframes alertPublicIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes alertPublicGlow {
    0%, 100% { box-shadow: 0 4px 14px rgba(217, 119, 6, 0.10), inset 0 0 0 1px rgba(217, 119, 6, 0.18); }
    50% { box-shadow: 0 6px 22px rgba(217, 119, 6, 0.22), inset 0 0 0 1px rgba(217, 119, 6, 0.36); }
}
@keyframes alertPublicIconPulse {
    0%, 100% { transform: scale(1) rotate(0deg); }
    18% { transform: scale(1.18) rotate(-6deg); }
    32% { transform: scale(1.05) rotate(5deg); }
    46% { transform: scale(1.12) rotate(-3deg); }
    60% { transform: scale(1) rotate(0deg); }
}

.alert-public {
    display: flex; align-items: center; gap: 0.55rem;
    margin-top: 0.5rem; padding: 0.45rem 0.7rem 0.45rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
    color: #92400e;
    border: 1px solid #fcd34d;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.08);
    font-size: 0.82rem; line-height: 1.35;
    position: relative; overflow: hidden;
    animation: alertPublicIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both,
               alertPublicGlow 2.6s ease-in-out 0.5s infinite;
}
.alert-public::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px; background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    border-radius: 10px 0 0 10px;
}
.alert-public__icon {
    flex-shrink: 0; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(245, 158, 11, 0.18); color: #b45309;
    animation: alertPublicIconPulse 2.6s ease-in-out 0.6s infinite;
    transform-origin: center;
}
.alert-public__icon svg { width: 14px; height: 14px; }
.alert-public__body {
    display: flex; flex-direction: row; align-items: baseline;
    flex-wrap: wrap; gap: 0.35rem; min-width: 0;
}
.alert-public__title {
    font-weight: 700; font-size: 0.85rem; color: #78350f;
    letter-spacing: -0.005em;
}
.alert-public__text { color: #92400e; font-size: 0.8rem; }
.alert-public--compact {
    margin-top: 0.4rem;
    padding: 0.35rem 0.6rem 0.35rem 0.75rem;
    line-height: 1.28;
}
.alert-public__body--single {
    flex: 1;
    min-width: 0;
    color: #92400e;
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Subtle danger variant if reused elsewhere */
.alert-public--danger {
    background: linear-gradient(135deg, #fef2f2 0%, #fff5f5 100%);
    color: #991b1b; border-color: #fecaca;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.10);
    animation: alertPublicIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.alert-public--danger::before { background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%); }
.alert-public--danger .alert-public__icon { background: rgba(239, 68, 68, 0.18); color: #991b1b; }
.alert-public--danger .alert-public__title { color: #7f1d1d; }
.alert-public--danger .alert-public__text { color: #991b1b; }

@media (prefers-reduced-motion: reduce) {
    .alert-public,
    .alert-public__icon { animation: none !important; }
}

@media (max-width: 480px) {
    .alert-public {
        padding: 0.4rem 0.6rem 0.4rem 0.7rem;
        font-size: 0.78rem;
        gap: 0.45rem;
        line-height: 1.3;
    }
    .alert-public__icon { width: 20px; height: 20px; }
    .alert-public__icon svg { width: 12px; height: 12px; }
    .alert-public__body { gap: 0.25rem; }
    .alert-public__title { font-size: 0.8rem; }
    .alert-public__text { font-size: 0.76rem; }
}

/* =====================================================
   CS:GO-style case opener (replaces canvas wheel)
   ===================================================== */

.wheel-stage.case-stage {
    flex-direction: column; align-items: center; padding: 1.5rem 0 0.5rem;
}

.wheel-section__container {
    max-width: 1140px;
}

.case-opener {
    width: 100%; max-width: 1100px; padding: 0 0.5rem;
    position: relative; z-index: 1;
}
.case-opener-frame {
    position: relative;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #ffffff 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 18px;
    padding: 22px 0;
    box-shadow:
        0 24px 48px -22px rgba(15, 23, 42, 0.18),
        0 8px 18px -8px rgba(15, 23, 42, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    overflow: hidden;
}
.case-opener-frame::before,
.case-opener-frame::after {
    content: ''; position: absolute; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(220, 38, 38, 0.45) 30%, rgba(220, 38, 38, 0.75) 50%, rgba(220, 38, 38, 0.45) 70%, transparent 100%);
    pointer-events: none;
}
.case-opener-frame::before { top: 0; }
.case-opener-frame::after { bottom: 0; }

.case-opener-pointer {
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 6; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(220, 38, 38, 0.4));
}
.case-opener-pointer--top { top: 6px; animation: caseArrowTop 1.6s ease-in-out infinite; }
.case-opener-pointer--bottom { bottom: 6px; animation: caseArrowBottom 1.6s ease-in-out infinite; }
@keyframes caseArrowTop { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 4px); } }
@keyframes caseArrowBottom { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }

.case-opener-line {
    position: absolute; top: 12px; bottom: 12px; left: 50%; width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0) 0%, rgba(220, 38, 38, 0.85) 12%, rgba(220, 38, 38, 0.85) 88%, rgba(220, 38, 38, 0) 100%);
    box-shadow: 0 0 12px rgba(220, 38, 38, 0.55);
    z-index: 5; pointer-events: none;
}

.case-opener-fade {
    position: absolute; top: 0; bottom: 0; width: 110px; z-index: 4;
    pointer-events: none;
}
.case-opener-fade--left {
    left: 0; background: linear-gradient(90deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.85) 35%, rgba(15, 23, 42, 0) 100%);
}
.case-opener-fade--right {
    right: 0; background: linear-gradient(270deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.85) 35%, rgba(15, 23, 42, 0) 100%);
}

.case-opener-viewport {
    position: relative; overflow: hidden;
    width: 100%; height: 168px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.case-opener-strip {
    display: flex; gap: 8px; height: 100%; padding: 0 8px;
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* ---------- Cards ---------- */
.case-card {
    flex: 0 0 130px; width: 130px; height: 100%;
    position: relative; border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 4px 10px -4px rgba(15, 23, 42, 0.12);
    color: var(--gray-900, #0f172a);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.case-card__bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 50% 0%, var(--card-color, #DC2626), transparent 65%),
        linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.04) 100%);
    opacity: 0.18;
    pointer-events: none;
}
.case-card__inner {
    position: relative; z-index: 2;
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 12px 8px 10px;
    text-align: center; gap: 2px;
}
.case-card__amount {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.55rem; font-weight: 800; line-height: 1; color: var(--gray-900, #0f172a);
    letter-spacing: -0.02em;
}
.case-card__type {
    font-size: 0.72rem; font-weight: 600; color: var(--gray-600, #475569);
    letter-spacing: 0.02em; margin-top: 2px;
}
.case-card__platform {
    margin-top: auto; padding-top: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.68rem; font-weight: 600; color: var(--gray-500, #64748b);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.case-card__emoji { font-size: 0.85rem; }
.case-card__platform-name { white-space: nowrap; }

.case-card__rarity {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-color-2, #DC2626) 0%, var(--card-color, #DC2626) 50%, var(--card-color-2, #DC2626) 100%);
    box-shadow: 0 0 6px var(--card-color, #DC2626);
}

/* No-prize card variant */
.case-card--none .case-card__bg {
    background:
        radial-gradient(circle at 50% 0%, #94a3b8, transparent 65%);
    opacity: 0.14;
}
.case-card__amount--none {
    font-size: 1.2rem; font-weight: 700; color: var(--gray-700, #334155);
}
.case-card__type--none {
    font-size: 1.2rem; font-weight: 800; color: var(--gray-800, #1e293b);
    letter-spacing: -0.01em;
}
.case-card--none .case-card__platform { font-size: 1.1rem; opacity: 0.7; }
.case-card--none .case-card__rarity { background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 50%, #cbd5e1 100%); box-shadow: none; }

/* Winning card highlight after stop */
.case-card--won {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 2px var(--card-color, #DC2626),
        0 0 22px var(--card-color, #DC2626),
        0 12px 28px -4px rgba(15, 23, 42, 0.25);
    animation: caseCardWonPulse 1.6s ease-in-out infinite;
}
@keyframes caseCardWonPulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--card-color, #DC2626), 0 0 16px var(--card-color, #DC2626), 0 10px 24px -4px rgba(15, 23, 42, 0.22); }
    50% { box-shadow: 0 0 0 3px var(--card-color, #DC2626), 0 0 28px var(--card-color, #DC2626), 0 14px 32px -4px rgba(15, 23, 42, 0.3); }
}
.case-card--won .case-card__rarity {
    height: 5px;
    box-shadow: 0 0 12px var(--card-color, #DC2626);
}

/* ---------- Action area ---------- */
.case-action { margin-top: 1.4rem; }
.case-spin-btn { min-width: 220px; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .case-opener { padding: 0; }
    .case-opener-frame { border-radius: 14px; padding: 18px 0; }
    .case-opener-viewport { height: 150px; }
    .case-card { flex: 0 0 110px; width: 110px; }
    .case-card__amount { font-size: 1.35rem; }
    .case-card__type { font-size: 0.68rem; }
    .case-card__platform { font-size: 0.62rem; }
    .case-opener-fade { width: 80px; }
}

@media (max-width: 480px) {
    .case-opener-frame { border-radius: 12px; padding: 16px 0; }
    .case-opener-viewport { height: 138px; }
    .case-card { flex: 0 0 96px; width: 96px; border-radius: 10px; }
    .case-card__inner { padding: 10px 6px 8px; }
    .case-card__amount { font-size: 1.2rem; }
    .case-card__type { font-size: 0.65rem; }
    .case-card__emoji { font-size: 0.78rem; }
    .case-card__platform { font-size: 0.58rem; gap: 3px; padding-top: 4px; }
    .case-card__platform-name { display: none; }
    .case-card__amount--none { font-size: 1rem; }
    .case-card__type--none { font-size: 1rem; }
    .case-card--none .case-card__platform { font-size: 0.9rem; }
    .case-opener-fade { width: 60px; }
    .case-opener-pointer svg { width: 18px; height: 12px; }
    .case-spin-btn { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .case-opener-pointer--top,
    .case-opener-pointer--bottom { animation: none; }
    .case-card--won { animation: none; }
}

/* =====================================================
   CS:GO-style prize list (under roller)
   ===================================================== */
.case-prize-list {
    max-width: 1100px; margin: 2rem auto 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 18px;
    padding: 1.6rem 1.3rem 1.4rem;
    color: var(--gray-900, #0f172a);
    box-shadow: 0 18px 40px -22px rgba(15, 23, 42, 0.18);
}
.case-prize-list__header { text-align: center; margin-bottom: 1.1rem; }
.case-prize-list__title {
    margin: 0; color: var(--gray-900, #0f172a);
    font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em;
}
.case-prize-list__subtitle {
    margin: 0.35rem 0 0; color: var(--gray-500, #64748b);
    font-size: 0.9rem;
}
.case-prize-list__legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45rem;
    margin: 0 auto 1.2rem; max-width: 720px;
}
.case-rarity-chip {
    display: inline-flex; align-items: center;
    padding: 3px 9px;
    font-size: 0.68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.07em;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid currentColor;
}
.case-rarity-chip--legendary { color: #c2410c; background: rgba(251, 191, 36, 0.14); border-color: rgba(194, 65, 12, 0.45); }
.case-rarity-chip--epic { color: #7e22ce; background: rgba(168, 85, 247, 0.12); border-color: rgba(126, 34, 206, 0.4); }
.case-rarity-chip--rare { color: #1d4ed8; background: rgba(59, 130, 246, 0.12); border-color: rgba(37, 99, 235, 0.4); }
.case-rarity-chip--uncommon { color: #047857; background: rgba(16, 185, 129, 0.12); border-color: rgba(5, 150, 105, 0.38); }
.case-rarity-chip--common { color: #4b5563; background: rgba(107, 114, 128, 0.1); border-color: rgba(75, 85, 99, 0.35); }

.case-prize-grid {
    display: grid; gap: 0.65rem;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.case-prize {
    position: relative; overflow: hidden;
    border-radius: 11px;
    --prize-color: #6b7280;
    --prize-color-2: #4b5563;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    padding: 0.85rem 0.7rem 0.85rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 6px -3px rgba(15, 23, 42, 0.08);
}
.case-prize:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px rgba(15, 23, 42, 0.22);
}
.case-prize::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 50% -5%, var(--prize-color), transparent 70%);
    opacity: 0.2; pointer-events: none;
}
.case-prize__chance {
    position: absolute; top: 8px; right: 8px;
    z-index: 2;
    padding: 2px 7px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    font-size: 0.66rem; font-weight: 700;
    color: #ffffff; letter-spacing: 0.02em;
}
.case-prize__body {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.case-prize__emoji {
    font-size: 1.4rem; margin-bottom: 0.25rem; line-height: 1;
}
.case-prize__amount {
    font-size: 1.6rem; font-weight: 800; color: var(--gray-900, #0f172a);
    line-height: 1.1; letter-spacing: -0.02em;
}
.case-prize__amount--none { font-size: 1rem; font-weight: 700; color: var(--gray-700, #334155); }
.case-prize__type-line {
    margin-top: 2px;
    font-size: 0.74rem; font-weight: 600; color: var(--gray-700, #334155);
    letter-spacing: 0.02em;
}
.case-prize__platform {
    margin-top: 1px;
    font-size: 0.66rem; font-weight: 600;
    color: var(--gray-500, #64748b);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.case-prize__rarity-bar {
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--prize-color-2) 0%, var(--prize-color) 45%, var(--prize-color-2) 100%);
    box-shadow: 0 0 12px var(--prize-color);
}

/* Culori card = raritate (nu platforma) */
.case-prize--legendary {
    --prize-color: #ea580c;
    --prize-color-2: #fbbf24;
    border-color: rgba(234, 88, 12, 0.5);
    background: linear-gradient(180deg, #fffbeb 0%, #ffffff 48%, #ffedd5 100%);
}
.case-prize--legendary::before { opacity: 0.32; }
.case-prize--legendary .case-prize__chance { background: linear-gradient(135deg, #fbbf24, #ea580c); }

.case-prize--epic {
    --prize-color: #9333ea;
    --prize-color-2: #d8b4fe;
    border-color: rgba(147, 51, 234, 0.48);
    background: linear-gradient(180deg, #faf5ff 0%, #ffffff 48%, #f3e8ff 100%);
}
.case-prize--epic::before { opacity: 0.3; }
.case-prize--epic .case-prize__chance { background: linear-gradient(135deg, #c084fc, #7e22ce); }

.case-prize--rare {
    --prize-color: #2563eb;
    --prize-color-2: #93c5fd;
    border-color: rgba(37, 99, 235, 0.45);
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 48%, #dbeafe 100%);
}
.case-prize--rare::before { opacity: 0.28; }
.case-prize--rare .case-prize__chance { background: linear-gradient(135deg, #60a5fa, #1d4ed8); }

.case-prize--uncommon {
    --prize-color: #059669;
    --prize-color-2: #6ee7b7;
    border-color: rgba(5, 150, 105, 0.42);
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 48%, #d1fae5 100%);
}
.case-prize--uncommon::before { opacity: 0.26; }
.case-prize--uncommon .case-prize__chance { background: linear-gradient(135deg, #34d399, #047857); }

.case-prize--common:not(.case-prize--none) {
    --prize-color: #4b5563;
    --prize-color-2: #9ca3af;
    border-color: rgba(75, 85, 99, 0.38);
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 48%, #f3f4f6 100%);
}
.case-prize--common:not(.case-prize--none)::before { opacity: 0.18; }
.case-prize--common:not(.case-prize--none) .case-prize__chance { background: linear-gradient(135deg, #6b7280, #1f2937); }

.case-prize--none {
    --prize-color: #64748b;
    --prize-color-2: #94a3b8;
    border-color: rgba(100, 116, 139, 0.4);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
}
.case-prize--none::before {
    background: radial-gradient(circle at 50% -5%, #94a3b8, transparent 70%);
    opacity: 0.14;
}
.case-prize--none .case-prize__chance { background: linear-gradient(135deg, #94a3b8, #475569); }
.case-prize--none .case-prize__rarity-bar {
    background: linear-gradient(90deg, #cbd5e1 0%, #64748b 50%, #cbd5e1 100%);
    box-shadow: 0 0 6px rgba(100, 116, 139, 0.35);
}

@media (max-width: 720px) {
    .case-prize-list { padding: 1.25rem 1rem 1.1rem; border-radius: 14px; }
    .case-prize-list__title { font-size: 1.15rem; }
    .case-prize-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.5rem; }
    .case-prize { padding: 0.75rem 0.55rem; }
    .case-prize__amount { font-size: 1.35rem; }
    .case-prize__emoji { font-size: 1.2rem; }
    .case-prize__chance { font-size: 0.62rem; padding: 2px 6px; }
}

@media (max-width: 480px) {
    .case-prize-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.4rem; }
    .case-prize { padding: 0.65rem 0.4rem; border-radius: 10px; }
    .case-prize__amount { font-size: 1.2rem; }
    .case-prize__type-line { font-size: 0.68rem; }
    .case-prize__platform { font-size: 0.6rem; }
}

/* ================================================
   Cross-platform bundles — premium redesign
   ================================================ */

/* Hero */
.bundles-hero { padding-top: 1.75rem; padding-bottom: 0.5rem; }
.bundles-hero__inner { text-align: center; max-width: 720px; margin: 0 auto; }
.bundles-hero__eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(250,204,21,0.12));
    color: var(--primary, #dc2626);
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem; border-radius: 999px;
    border: 1px solid rgba(220,38,38,0.18);
    margin-bottom: 0.7rem;
}
.bundles-hero__title {
    font-size: clamp(1.45rem, 3.2vw, 2rem);
    line-height: 1.18; font-weight: 800;
    color: var(--gray-900, #111827);
    margin: 0 0 0.55rem;
    letter-spacing: -0.015em;
}
.bundles-hero__lead {
    font-size: clamp(0.9rem, 1.4vw, 1rem);
    color: var(--gray-600, #4b5563);
    line-height: 1.5; margin: 0 auto 1rem; max-width: 600px;
}
.bundles-trust {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 0.4rem 1rem; padding: 0; margin: 0;
    list-style: none;
}
.bundles-trust li {
    display: inline-flex; align-items: center; gap: 0.35rem;
    color: var(--gray-600, #4b5563);
    font-size: 0.78rem; font-weight: 600;
}
.bundles-trust svg { width: 14px; height: 14px; color: #10b981; flex-shrink: 0; }

/* Section wrapper */
.bundles-section { padding-top: 0.75rem; padding-bottom: 2.25rem; }

/* Grid — wider, denser, more cards per row on big screens */
.bundles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
@media (min-width: 1100px) {
    .bundles-grid { gap: 1.15rem; }
}

/* Card */
.bundle-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 14px;
    padding: 1.1rem 1.15rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.22s ease, transform 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
}
.bundle-card::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(220,38,38,0.025) 0%, transparent 35%);
    pointer-events: none; opacity: 0; transition: opacity 0.22s ease;
}
.bundle-card:hover {
    box-shadow: 0 18px 38px rgba(220, 38, 38, 0.12), 0 4px 12px rgba(15,23,42,0.06);
    transform: translateY(-4px);
    border-color: rgba(220, 38, 38, 0.28);
}
.bundle-card:hover::before { opacity: 1; }

/* Ribbon -X% (top-right corner) */
.bundle-card__ribbon {
    position: absolute; top: 12px; right: -38px;
    background: linear-gradient(135deg, #fde047, #facc15);
    color: #78350f; font-weight: 800; font-size: 0.78rem;
    padding: 0.28rem 2.5rem; transform: rotate(35deg);
    box-shadow: 0 2px 8px rgba(250,204,21,0.35);
    letter-spacing: 0.04em; z-index: 2;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(120,53,15,0.15);
}

/* Platforms stack */
.bundle-card__platforms {
    display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
    position: relative; z-index: 1;
}
.bundle-card__pf {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.bundle-card__pf svg { width: 14px; height: 14px; }
.bundle-card__pf--instagram { background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.bundle-card__pf--tiktok { background: #000; }
.bundle-card__pf--x { background: #000; }
.bundle-card__pf--facebook { background: #1877f2; }
.bundle-card__pf--youtube { background: #ff0000; }
.bundle-card__pf--discord { background: var(--discord); }

/* Title & description */
.bundle-card__title { font-size: 1.1rem; margin: 0; line-height: 1.2; position: relative; z-index: 1; }
.bundle-card__title a { color: var(--gray-900, #111827); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.bundle-card__title a:hover { color: var(--primary, #dc2626); }
.bundle-card__desc { font-size: 0.82rem; color: var(--gray-600, #4b5563); margin: 0; line-height: 1.45; position: relative; z-index: 1; }

/* Includes list */
.bundle-card__list-label {
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--gray-500, #6b7280);
    margin-bottom: -0.25rem; position: relative; z-index: 1;
}
.bundle-card__items {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.4rem;
    position: relative; z-index: 1;
}
.bundle-card__items li {
    display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap;
    font-size: 0.85rem; color: var(--gray-800, #1f2937);
    line-height: 1.3;
}
.bundle-card__check {
    width: 17px; height: 17px; border-radius: 50%;
    background: rgba(16,185,129,0.12); color: #10b981;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.bundle-card__check svg { width: 10px; height: 10px; }
.bundle-card__qty { font-weight: 800; color: var(--gray-900, #111827); font-variant-numeric: tabular-nums; }
.bundle-card__svc { color: var(--gray-700, #334155); font-weight: 500; }
.bundle-card__chip {
    margin-left: auto;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 0.14rem 0.42rem; border-radius: 5px;
    background: var(--gray-100, #f3f4f6); color: var(--gray-600, #6b7280);
    text-transform: uppercase;
    border: 1px solid var(--gray-200, #e5e7eb);
}
.bundle-card__chip--instagram { background: rgba(220,39,67,0.08); color: #c2185b; border-color: rgba(220,39,67,0.18); }
.bundle-card__chip--tiktok { background: rgba(0,0,0,0.05); color: #1a1a1a; border-color: rgba(0,0,0,0.12); }
.bundle-card__chip--facebook { background: rgba(24,119,242,0.08); color: #1877f2; border-color: rgba(24,119,242,0.2); }
.bundle-card__chip--youtube { background: rgba(255,0,0,0.06); color: #c00; border-color: rgba(255,0,0,0.18); }
.bundle-card__chip--discord { background: rgba(88,101,242,0.1); color: #4752c4; border-color: rgba(88,101,242,0.22); }

/* Price box */
.bundle-card__price-box {
    margin-top: auto;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
    border-radius: 10px; padding: 0.65rem 0.8rem;
    position: relative; z-index: 1;
}
.bundle-card__compare {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.35rem; font-size: 0.72rem; margin-bottom: 0.2rem;
}
.bundle-card__compare-label { color: #78350f; font-weight: 600; opacity: 0.85; }
.bundle-card__strike {
    text-decoration: line-through; color: var(--gray-500, #6b7280);
    font-weight: 600; font-variant-numeric: tabular-nums;
}
.bundle-card__price-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; flex-wrap: wrap;
}
.bundle-card__price {
    font-size: 1.5rem; font-weight: 800; color: var(--primary, #dc2626);
    line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.bundle-card__save {
    background: #10b981; color: #fff;
    border-radius: 5px; padding: 0.16rem 0.42rem;
    font-size: 0.66rem; font-weight: 800; letter-spacing: 0.02em;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(16,185,129,0.3);
}

/* CTA */
.bundle-card__cta {
    width: 100%; justify-content: center;
    font-weight: 700; padding-top: 0.65rem; padding-bottom: 0.65rem;
    border-radius: 9px; position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.92rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.bundle-card__cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(220,38,38,0.28); }
.bundle-card__cta-arrow { transition: transform 0.18s ease; display: inline-block; }
.bundle-card__cta:hover .bundle-card__cta-arrow { transform: translateX(3px); }

/* Abonamente — hero lat + panou premium */
.business-sub-hero {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    background: linear-gradient(165deg, #f1f5f9 0%, #e8eef5 42%, #ffffff 100%);
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
.business-sub-hero__panel {
    max-width: min(980px, 100%);
    margin: 0 auto;
    padding: clamp(1.35rem, 4vw, 2.65rem) clamp(1.1rem, 3.5vw, 2.4rem);
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 22px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow:
        0 4px 6px -1px rgba(15, 23, 42, 0.05),
        0 18px 40px -12px rgba(15, 23, 42, 0.1);
}
.business-sub-hero__platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}
.business-sub-hero__platform-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.65rem;
    height: 2.65rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    color: #fff;
}
.business-sub-hero__platform-badge svg {
    width: 1.3rem;
    height: 1.3rem;
}
.business-sub-hero__platform-badge--instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border: none;
}
.business-sub-hero__platform-badge--tiktok {
    background: #000;
    border: none;
}
.business-sub-hero__platform-badge--facebook {
    background: #1877f2;
    border: none;
}
.business-sub-hero__eyebrow {
    margin-bottom: 0.85rem;
}
.business-sub-hero__title.bundles-hero__title {
    font-size: clamp(1.55rem, 3.6vw, 2.35rem);
    line-height: 1.15;
    margin-bottom: 0.85rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.business-sub-hero__lead {
    margin: 0 auto 1.5rem;
    max-width: 52rem;
    font-size: clamp(1.02rem, 1.45vw, 1.14rem);
    line-height: 1.68;
    color: var(--gray-600, #4b5563);
    text-wrap: balance;
}
.business-sub-hero__meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.15rem;
    text-align: left;
    margin-top: 0.35rem;
}
.business-sub-hero__card {
    padding: 1rem 1.15rem 1.05rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.business-sub-hero__card--note {
    border-left: 4px solid var(--primary, #dc2626);
}
.business-sub-hero__card--trust {
    border-left: 4px solid #10b981;
}
.business-sub-hero__card-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500, #6b7280);
    margin-bottom: 0.45rem;
}
.business-sub-hero__card-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.58;
    color: var(--gray-600, #4b5563);
}
.business-sub-hero__trust {
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
}
.business-sub-hero__trust li {
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
}
@media (max-width: 700px) {
    .business-sub-hero__meta-grid {
        grid-template-columns: 1fr;
    }
}

/* Abonamente — optimizare mobil (safe-area, tipografie, tap targets) */
@media (max-width: 768px) {
    .business-sub-hero {
        padding-top: calc(1.35rem + env(safe-area-inset-top, 0px));
        padding-bottom: 1.75rem;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .business-sub-hero .container,
    .business-sub-section .container {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
    .business-sub-hero__panel {
        border-radius: 18px;
        padding: 1.2rem 1rem 1.35rem;
        box-shadow: 0 2px 16px rgba(15, 23, 42, 0.07);
    }
    .business-sub-hero__title.bundles-hero__title {
        font-size: clamp(1.35rem, 5.8vw, 1.95rem);
    }
    .business-sub-hero__lead {
        font-size: 1rem;
        line-height: 1.62;
        margin-bottom: 1.15rem;
    }
    .business-sub-hero__card-text,
    .business-sub-hero__trust li {
        font-size: 0.92rem;
        line-height: 1.55;
    }
    .business-sub-section {
        padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
    .business-sub-audience-block__title {
        font-size: 1.02rem;
        line-height: 1.35;
        padding-bottom: 0.45rem;
        margin-bottom: 0.75rem;
    }
    .business-sub-grid.business-sub-grid {
        gap: 0.85rem;
    }
}
@media (max-width: 540px) {
    .business-sub-hero__platform-badge {
        width: 2.5rem;
        height: 2.5rem;
    }
    .business-sub-card.business-sub-card .bundle-card__cta {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-top: 0.85rem;
        padding-bottom: 0.85rem;
        font-size: 0.95rem;
        font-weight: 700;
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(220, 38, 38, 0.15);
    }
    .business-sub-card .bundle-card__title a {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
    }
    .business-sub-platform-group__title,
    .business-sub-card .bundle-card__svc {
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}
@media (max-width: 380px) {
    .business-sub-hero .container,
    .business-sub-section .container {
        padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
        padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
    }
    .business-sub-hero__panel {
        padding: 1rem 0.85rem 1.15rem;
        border-radius: 16px;
    }
    .business-sub-hero__meta-grid {
        gap: 0.75rem;
    }
}
.section.business-sub-detail-page .back-link {
    display: inline-block;
    padding: 0.35rem 0;
    margin-bottom: 0.25rem;
    min-height: 44px;
    line-height: 1.5;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.06);
}
.business-sub-detail__urls-legend {
    margin: 0 0 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    line-height: 1.45;
}
.business-sub-detail__target-urls {
    display: grid;
    gap: 1rem;
    margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
    .business-sub-detail__target-urls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 1.25rem;
    }
}
@media (min-width: 1000px) {
    .business-sub-detail__target-urls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.business-sub-detail__target-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.45rem;
    color: var(--gray-900, #111827);
}
.business-sub-detail__target-label-icon {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.business-sub-detail__target-label-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}
.business-sub-detail__target-row .form-hint {
    margin-top: 0.35rem;
}
@media (max-width: 540px) {
    .section.business-sub-detail-page .container.container-wide-form {
        padding-left: max(1rem, env(safe-area-inset-left, 0px));
        padding-right: max(1rem, env(safe-area-inset-right, 0px));
    }
    .section.business-sub-detail-page .bundle-detail {
        padding: 1.1rem 1rem 1.25rem;
        border-radius: 14px;
    }
    .section.business-sub-detail-page .bundle-detail__header h1 {
        font-size: clamp(1.2rem, 5.2vw, 1.45rem);
        line-height: 1.25;
    }
    .section.business-sub-detail-page .bundle-detail__total {
        font-size: clamp(1.45rem, 6vw, 1.85rem);
    }
    .section.business-sub-detail-page .bundle-detail__price-box {
        padding: 0.9rem 1rem;
    }
    .section.business-sub-detail-page {
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
    .section.business-sub-detail-page .bundle-detail__form .btn-primary {
        min-height: 48px;
        touch-action: manipulation;
    }
    .section.business-sub-detail-page .bundle-detail__svc-name {
        overflow-wrap: anywhere;
    }
}

.business-sub-section { padding-top: 1.5rem; }
.business-sub-audience-block {
    margin-bottom: 2.25rem;
}
.business-sub-audience-block:last-child {
    margin-bottom: 0;
}
.business-sub-audience-block__title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--gray-900, #111827);
    margin: 0 0 0.85rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--primary, #dc2626);
    max-width: 100%;
}
.business-sub-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.1rem;
}
@media (min-width: 1100px) {
    .business-sub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.business-sub-card__price-row { align-items: flex-end; }
.business-sub-card__price-block {
    display: flex;
    align-items: baseline;
    gap: 0.2rem;
    flex-wrap: wrap;
}
.business-sub-card__interval {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--gray-600, #4b5563);
    letter-spacing: 0.03em;
    text-transform: lowercase;
}
.business-sub-card__segment {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary, #dc2626);
}
.business-sub-detail__segment {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary, #dc2626);
}
.business-sub-card__platform-groups {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 0.25rem;
}
.business-sub-detail__groups {
    margin-top: 0.35rem;
    margin-bottom: 1rem;
}
.business-sub-platform-group {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    padding: 0.55rem 0.65rem 0.45rem;
    background: rgba(248, 250, 252, 0.65);
}
.business-sub-platform-group__head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px dashed var(--gray-200, #e5e7eb);
}
.business-sub-platform-group__icon {
    width: 1.35rem;
    height: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.business-sub-platform-group__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}
.business-sub-platform-group__title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--gray-800, #1f2937);
}
.business-sub-platform-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.business-sub-platform-group__list li {
    padding: 0.2rem 0;
}
.bundle-detail__items--chips li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.bundle-detail__items--chips .bundle-card__check { flex-shrink: 0; }
.bundle-detail__qty { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primary, #dc2626); }
.bundle-detail__svc-name {
    flex: 1;
    min-width: 6rem;
    color: var(--gray-800, #1f2937);
    font-weight: 500;
    font-size: 0.88rem;
}

/* Ribbon corner — make it slightly smaller too */
.bundle-card__ribbon { font-size: 0.72rem; padding: 0.24rem 2.2rem; right: -34px; top: 10px; }

/* Tablet */
@media (max-width: 768px) {
    .bundles-hero { padding-top: 1.25rem; padding-bottom: 0.25rem; }
    .bundles-hero__title { font-size: clamp(1.3rem, 5.5vw, 1.65rem); }
    .bundles-hero__lead { font-size: 0.88rem; margin-bottom: 0.85rem; }
    .bundles-hero__eyebrow { font-size: 0.62rem; padding: 0.25rem 0.7rem; margin-bottom: 0.55rem; }
    .bundles-section { padding-top: 0.5rem; padding-bottom: 1.5rem; }
    .bundles-grid { gap: 0.85rem; }
}

/* Phone */
@media (max-width: 540px) {
    .bundles-hero { padding-top: 1rem; }
    .bundles-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .bundle-card {
        padding: 0.9rem 0.95rem;
        border-radius: 12px;
        gap: 0.55rem;
    }
    .bundle-card__title { font-size: 1rem; }
    .bundle-card__desc { font-size: 0.78rem; }
    .bundle-card__price { font-size: 1.4rem; }
    .bundle-card__items li { font-size: 0.82rem; }
    .bundle-card__ribbon { font-size: 0.62rem; padding: 0.18rem 1.7rem; right: -26px; top: 8px; }
    .bundle-card__pf { width: 24px; height: 24px; }
    .bundle-card__pf svg { width: 12px; height: 12px; }
    .bundle-card__price-box { padding: 0.55rem 0.7rem; }
    .bundle-card__cta { padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.88rem; }
    .bundles-trust { gap: 0.35rem 0.7rem; }
    .bundles-trust li { font-size: 0.72rem; }
    .bundles-trust svg { width: 12px; height: 12px; }
}

/* Small phone */
@media (max-width: 360px) {
    .bundle-card__chip { display: none; } /* save space — platform icon already visible up top */
    .bundle-card__items li { gap: 0.35rem; }
}

.bundle-detail { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: var(--radius-lg, 12px); padding: 1.75rem; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); }
.bundle-detail__header h1 { margin-top: 0; }
.bundle-detail__desc { color: var(--gray-600, #4b5563); font-size: 0.96rem; line-height: 1.55; }
.bundle-detail__items { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.bundle-detail__items li { background: var(--gray-50, #f9fafb); padding: 0.55rem 0.75rem; border-radius: 8px; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.bundle-detail__items strong { color: var(--primary, #dc2626); font-weight: 800; }
.bundle-detail__platform { background: #fff; border: 1px solid var(--gray-200, #e5e7eb); padding: 0.06rem 0.45rem; border-radius: 999px; font-size: 0.72rem; color: var(--gray-600, #6b7280); }
.bundle-detail__price-box { background: linear-gradient(135deg, #fff7ed, #ffedd5); border: 1px solid #fdba74; border-radius: 10px; padding: 1rem 1.25rem; text-align: center; margin-bottom: 1.25rem; }
.bundle-detail__compare { display: flex; gap: 0.6rem; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 0.4rem; font-size: 0.88rem; }
.bundle-detail__strike { text-decoration: line-through; color: var(--gray-500, #6b7280); }
.bundle-detail__save { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; border-radius: 999px; padding: 0.12rem 0.55rem; font-weight: 700; font-size: 0.78rem; }
.bundle-detail__total { font-size: 2rem; font-weight: 800; color: var(--primary, #dc2626); }
.bundle-detail__form { margin-top: 1rem; }

/* ================================================
   Blog — list & article (wider reading column, prose)
   ================================================ */
.section-blog--post {
    padding-top: 0.35rem;
    padding-bottom: 1.5rem;
}
.section-blog--list {
    padding-top: 0;
    padding-bottom: 1.5rem;
}
.section-blog--index .blog-index-hero {
    text-align: center;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}
.section-blog--index .page-hero-title { font-size: clamp(1.4rem, 3.6vw, 2rem); margin-bottom: 0.4rem; }
.section-blog--index .page-hero-subtitle { font-size: clamp(0.92rem, 2.2vw, 1.02rem); line-height: 1.5; }
.section-blog { padding: 1.5rem 0; }
.section-blog--index { padding-top: 1.25rem; padding-bottom: 0.5rem; }
.section-blog--list { padding-top: 0.75rem; }

.blog-breadcrumb {
    margin-bottom: 0.85rem;
}
.blog-breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--gray-600);
    text-decoration: none;
    padding: 0.3rem 0.55rem;
    margin-left: -0.55rem;
    border-radius: 7px;
    transition: background 0.15s, color 0.15s;
}
.blog-breadcrumb__link:hover {
    color: var(--primary);
    background: var(--gray-50);
}

.blog-article {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: clamp(0.95rem, 2.5vw, 1.65rem);
    box-shadow: 0 3px 18px rgba(15, 23, 42, 0.05);
}
.blog-article__header {
    margin-bottom: 1.1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--gray-100);
}
.blog-article__title {
    font-size: clamp(1.35rem, 3.4vw, 1.8rem);
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin: 0 0 0.5rem;
    color: var(--gray-900);
    font-weight: 800;
}
.blog-article__meta {
    margin: 0;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.blog-article__meta time {
    color: inherit;
}
.blog-article__lead {
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--gray-600);
    margin: 0.7rem 0 0;
    max-width: 60ch;
    font-weight: 500;
}

.blog-article__cover {
    margin: 0 0 1.2rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--gray-100);
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}
.blog-article__cover img {
    width: 100%;
    display: block;
    max-height: 360px;
    object-fit: cover;
}

/* Article body: clear hierarchy for HTML from CMS / AI */
.blog-article__prose {
    font-size: 0.96rem;
    line-height: 1.65;
    color: var(--gray-800);
    max-width: none;
}
.blog-article__prose > *:first-child {
    margin-top: 0;
}
.blog-article__prose h2 {
    font-size: clamp(1.1rem, 2.2vw, 1.28rem);
    margin: 1.5rem 0 0.55rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--gray-100);
    letter-spacing: -0.015em;
    color: var(--gray-900);
    line-height: 1.3;
    font-weight: 800;
}
.blog-article__prose h2:first-child {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.blog-article__prose h3 {
    font-size: 1.04rem;
    margin: 1.15rem 0 0.4rem;
    color: var(--gray-900);
    font-weight: 700;
    line-height: 1.3;
}
.blog-article__prose h4 {
    font-size: 0.96rem;
    margin: 1rem 0 0.35rem;
    color: var(--gray-800);
    font-weight: 700;
}
.blog-article__prose p {
    margin: 0 0 0.95em;
}
.blog-article__prose ul,
.blog-article__prose ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}
.blog-article__prose li {
    margin-bottom: 0.35em;
}
.blog-article__prose ul li::marker {
    color: var(--primary);
}
.blog-article__prose ol li::marker {
    color: var(--primary);
    font-weight: 800;
}
.blog-article__prose blockquote {
    margin: 1.1rem 0;
    padding: 0.75rem 0.9rem 0.75rem 0.95rem;
    border-left: 3px solid var(--primary);
    background: linear-gradient(90deg, rgba(220, 38, 38, 0.06), transparent);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: var(--gray-700);
    font-size: 0.94rem;
}
.blog-article__prose blockquote p:last-child {
    margin-bottom: 0;
}
.blog-article__prose a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    word-break: break-word;
}
.blog-article__prose a:hover {
    color: var(--primary-dark);
}
.blog-article__prose strong {
    color: var(--gray-900);
    font-weight: 700;
}
.blog-article__prose hr {
    border: 0;
    height: 1px;
    background: var(--gray-200);
    margin: 1.4rem 0;
}

.blog-article__cta {
    margin-top: 1.5rem;
}
.blog-article__cta-inner {
    background: linear-gradient(135deg, #fef2f2 0%, #fff 42%, #fff7ed 100%);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(220, 38, 38, 0.06);
}
.blog-article__cta-title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    color: var(--gray-900);
    font-weight: 800;
}
.blog-article__cta-text {
    margin: 0 0 0.75rem;
    color: var(--gray-600);
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}
.blog-article__cta-btn {
    min-width: 160px;
    padding: 0.55rem 1.2rem;
    font-size: 0.92rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 0.9rem;
}
.blog-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.04);
}
.blog-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.09);
}
.blog-card__media {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, var(--gray-100), var(--gray-50));
    display: block;
    overflow: hidden;
}
.blog-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.blog-card:hover .blog-card__media img {
    transform: scale(1.03);
}
.blog-card__media-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 130px;
    font-size: 2rem;
    opacity: 0.55;
}
.blog-card__body {
    padding: 0.75rem 0.85rem 0.9rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-card__meta {
    margin: 0 0 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-500);
}
.blog-card__title {
    margin: 0 0 0.35rem;
    font-size: 0.96rem;
    line-height: 1.3;
    letter-spacing: -0.015em;
}
.blog-card__title a {
    color: var(--gray-900);
    text-decoration: none;
}
.blog-card__title a:hover {
    color: var(--primary);
}
.blog-card__excerpt {
    margin: 0 0 0.55rem;
    font-size: 0.83rem;
    color: var(--gray-600);
    line-height: 1.45;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card__cta {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--primary);
    margin-top: auto;
    align-self: flex-start;
    text-decoration: none;
}
.blog-card__cta:hover {
    text-decoration: underline;
}

/* Tablet breakpoint — compact intermediar */
@media (max-width: 768px) {
    .container-blog { padding-left: 1.15rem; padding-right: 1.15rem; }
    .blog-article { padding: clamp(0.85rem, 2vw, 1.25rem); border-radius: 12px; }
    .blog-article__title { font-size: clamp(1.2rem, 3vw, 1.55rem); }
    .blog-article__header { margin-bottom: 0.85rem; padding-bottom: 0.7rem; }
    .blog-article__lead { font-size: 0.92rem; }
    .blog-article__cover img { max-height: 280px; }
    .blog-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.75rem; }
    .blog-card__body { padding: 0.65rem 0.75rem 0.8rem; }
    .blog-card__title { font-size: 0.92rem; }
    .blog-card__excerpt { font-size: 0.8rem; }
    .blog-card__media-fallback { min-height: 110px; font-size: 1.6rem; }
    .blog-pagination__btn { padding: 0.38rem 0.65rem; font-size: 0.78rem; }
    .blog-pagination__page { min-width: 28px; height: 28px; font-size: 0.78rem; }
    .blog-index-summary { padding: 0.65rem 0.85rem; }
    .blog-index-summary__list { font-size: 0.8rem; }
    .blog-faq__title { font-size: 0.98rem; }
    .blog-faq__q { font-size: 0.85rem; }
    .blog-related__title { font-size: 0.96rem; }
    .blog-related__media { flex: 0 0 70px; min-height: 70px; }
    .section-blog--post { padding-bottom: 1rem; }
    .section-blog--list { padding-bottom: 1rem; }
}

@media (max-width: 640px) {
    .container-blog {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
    .section-blog { padding: 1rem 0; }
    .section-blog--index { padding-top: 0.75rem; padding-bottom: 0.25rem; }
    .blog-article {
        border-radius: 10px;
        padding: 0.85rem 0.9rem;
    }
    .blog-article__header { margin-bottom: 0.75rem; padding-bottom: 0.65rem; }
    .blog-article__title { font-size: 1.18rem; line-height: 1.2; }
    .blog-article__lead { font-size: 0.92rem; line-height: 1.5; margin-top: 0.55rem; }
    .blog-article__cover { margin-bottom: 0.85rem; border-radius: 8px; }
    .blog-article__cover img { max-height: 240px; }
    .blog-article__prose {
        font-size: 0.92rem;
        line-height: 1.6;
    }
    .blog-article__prose h2 {
        font-size: 1.04rem;
        margin: 1.15rem 0 0.4rem;
        padding-top: 0.7rem;
    }
    .blog-article__prose h3 { font-size: 0.96rem; margin: 0.9rem 0 0.3rem; }
    .blog-article__prose ul, .blog-article__prose ol { padding-left: 1.1em; }
    .blog-article__prose blockquote { padding: 0.6rem 0.7rem; font-size: 0.88rem; margin: 0.85rem 0; }
    .blog-article__cta { margin-top: 1.1rem; }
    .blog-article__cta-inner { padding: 0.85rem 0.9rem; border-radius: 10px; }
    .blog-article__cta-title { font-size: 0.94rem; }
    .blog-article__cta-text { font-size: 0.82rem; margin-bottom: 0.6rem; }
    .blog-article__cta-btn { min-width: 140px; padding: 0.5rem 1rem; font-size: 0.88rem; }
    .blog-grid {
        gap: 0.7rem;
        grid-template-columns: 1fr;
    }
    .blog-card { border-radius: 10px; }
    .blog-card__media { aspect-ratio: 16 / 9; }
    .blog-card__body { padding: 0.65rem 0.75rem 0.8rem; }
    .blog-card__title { font-size: 0.92rem; }
    .blog-card__excerpt { font-size: 0.8rem; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ==============================================================
   Paysafecard - payment method picker, paysafe code page,
   landing page, top promo banner, admin review modal
   ============================================================== */
.payment-method-picker {
    border: 0;
    padding: 0;
    margin: 1.4rem 0 0.4rem;
}
.payment-method-picker__legend {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-color, #1f2937);
    margin-bottom: 0.55rem;
    padding: 0;
    letter-spacing: 0.01em;
}
.payment-method-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.55rem;
    align-items: stretch;
}
.payment-method-picker__grid > .payment-method-card { height: 100%; }
.payment-method-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.62rem 2.1rem 0.62rem 0.78rem;
    background: var(--card-bg, #ffffff);
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.payment-method-card:hover {
    border-color: #DC2626;
    box-shadow: 0 6px 18px -10px rgba(220, 38, 38, 0.4);
}
.payment-method-card.is-selected {
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.03), transparent 60%);
}
.payment-method-card__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.payment-method-card__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 8px;
    font-size: 1.3rem;
    color: #DC2626;
}
.payment-method-card__icon--paysafe {
    flex: 0 0 56px;
    width: 56px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 2px 5px -2px rgba(0, 38, 78, 0.22);
}
.payment-method-card__icon--paysafe img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.payment-method-card--crypto {
    background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 60%, #ffffff 100%);
}
.payment-method-card--crypto.is-selected {
    border-color: #f59e0b;
    box-shadow: 0 4px 18px -10px rgba(245, 158, 11, 0.45);
}
.payment-method-card__icon--crypto {
    flex: 0 0 58px;
    width: 58px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
}
.payment-method-card__crypto-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 0.7rem;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    font-family: ui-sans-serif, system-ui, sans-serif;
}
.payment-method-card__crypto-coin--btc { background: #f7931a; }
.payment-method-card__crypto-coin--eth { background: #627eea; }
.payment-method-card__crypto-coin--usdt { background: #26a17b; }

.payment-method-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}
.payment-method-card__title {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    flex-wrap: wrap;
    font-weight: 700;
    color: var(--text-color, #111827);
    font-size: 0.88rem;
    line-height: 1.25;
}
.payment-method-card__subtitle {
    font-size: 0.76rem;
    color: var(--muted-text, #6b7280);
    line-height: 1.32;
}
.payment-method-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.12rem;
}
.payment-method-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.42rem;
    background: rgba(34, 197, 94, 0.1);
    color: #047857;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.payment-method-card__badge--muted {
    background: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}
.payment-method-card__new-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.36rem;
    background: linear-gradient(135deg, #DC2626, #b91c1c);
    color: #fff;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.payment-method-card__check {
    position: absolute;
    top: 0.48rem;
    right: 0.52rem;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #DC2626;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.payment-method-card.is-selected .payment-method-card__check {
    opacity: 1;
    transform: scale(1);
}

/* Paysafe: rând principal + selector voucher în același card (vizibil doar când metoda e aleasă) */
.payment-method-card--paysafe {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
}
.payment-method-card--paysafe > .payment-method-card__main {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.62rem 2.1rem 0.62rem 0.78rem;
    cursor: pointer;
    border-radius: inherit;
}
.payment-method-card--paysafe:has(#paysafeDenomBlock:not([hidden])) > .payment-method-card__main {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-bottom: 0.52rem;
}
.payment-method-card--paysafe > .paysafe-denomination--embedded {
    margin: 0;
    border-radius: 0 0 10px 10px;
    border: 0;
    border-top: 1px solid rgba(134, 239, 172, 0.55);
    padding: 0.5rem 0.78rem 0.55rem;
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.95) 0%, rgba(236, 254, 255, 0.45) 100%);
    box-shadow: none;
}
.payment-method-card--paysafe > .paysafe-denomination--embedded .paysafe-denomination__label {
    font-size: 0.68rem;
    margin-bottom: 0.32rem;
}
.payment-method-card--paysafe > .paysafe-denomination--embedded .paysafe-denomination__select {
    max-width: 100%;
}

.payment-method-picker__note {
    margin: 0.7rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--muted-text, #6b7280);
}
.payment-method-picker__note-icon {
    font-size: 1rem;
}
.paysafe-denomination {
    margin: 0.85rem 0 0;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #f0fdf4, #ecfeff);
    border: 1.5px solid #86efac;
    border-radius: 12px;
    box-shadow: 0 4px 14px -10px rgba(34, 197, 94, 0.45);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.paysafe-denomination[hidden] { display: none; }
.paysafe-denomination__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #166534;
}
.paysafe-denomination__select {
    appearance: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #166534 50%), linear-gradient(135deg, #166534 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 50%, calc(100% - 0.7rem) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    border: 1.5px solid #86efac;
    border-radius: 10px;
    padding: 0.55rem 2.2rem 0.55rem 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #064e3b;
    cursor: pointer;
    width: 100%;
    max-width: 240px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.paysafe-denomination__select:focus {
    outline: none;
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}
.paysafe-denomination__select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.paysafe-denomination__hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.45;
    color: #166534;
    font-weight: 500;
    min-height: 1.1em;
}
.paysafe-recap__row--denom {
    background: linear-gradient(135deg, #ecfeff, #f0fdf4);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    margin-top: 0.3rem;
}
.paysafe-recap__denom-hint {
    margin: 0.45rem 0 0;
    font-size: 0.82rem;
    color: var(--muted-text, #6b7280);
    line-height: 1.45;
}
.payment-method-picker__warn {
    margin: 0.7rem 0 0;
    padding: 0.75rem 0.9rem 0.75rem 2.6rem;
    position: relative;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    color: #7c2d12;
    border: 1.5px solid #f59e0b;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.45;
    box-shadow: 0 6px 18px -8px rgba(245, 158, 11, 0.55);
}
.payment-method-picker__warn::before {
    content: "\26A0";
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    color: #b45309;
    line-height: 1;
}
.payment-method-picker__warn--shake {
    animation: paymentWarnShake 0.55s cubic-bezier(.36,.07,.19,.97) both;
    border-color: #d97706;
    background: linear-gradient(135deg, #ffedd5, #fde68a);
}
@keyframes paymentWarnShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

@media (max-width: 600px) {
    /* === Payment picker — design simplu, aerisit, organizat pentru mobil === */
    .payment-method-picker {
        margin: 1.1rem 0 0.3rem;
        max-width: 100%;
    }
    .payment-method-picker__legend {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--gray-500, #6b7280);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 0.55rem;
    }
    .payment-method-picker__grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        width: 100%;
    }

    .payment-method-card {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.55rem 0.65rem;
        border-radius: 10px;
        border-width: 1.5px;
        background: #fff;
        min-height: 50px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    }
    .payment-method-card:hover {
        box-shadow: none;
    }
    .payment-method-card.is-selected {
        background: linear-gradient(180deg, #FEF2F2 0%, #ffffff 80%);
        box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.55);
    }
    .payment-method-card--crypto.is-selected {
        background: linear-gradient(180deg, #FFFBEB 0%, #ffffff 80%);
        box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.55);
    }

    .payment-method-card--paysafe {
        padding: 0;
    }
    .payment-method-card--paysafe > .payment-method-card__main {
        padding: 0.55rem 0.65rem;
        gap: 0.55rem;
        align-items: center;
    }
    .payment-method-card--paysafe > .paysafe-denomination--embedded {
        padding: 0.5rem 0.65rem 0.55rem;
    }

    .payment-method-card__icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        font-size: 1.12rem;
        border-radius: 8px;
        background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.04));
    }
    .payment-method-card__icon--paysafe {
        flex: 0 0 46px;
        width: 46px;
        height: 30px;
        background: transparent;
    }
    .payment-method-card__icon--crypto {
        flex: 0 0 48px;
        width: 48px;
        height: 30px;
        background: linear-gradient(135deg, rgba(247, 147, 26, 0.08), rgba(98, 126, 234, 0.06));
        border-radius: 10px;
        gap: 0.12rem;
    }
    .payment-method-card__crypto-coin {
        width: 16px;
        height: 16px;
        font-size: 0.65rem;
    }

    .payment-method-card__body {
        flex: 1 1 auto;
        gap: 0.12rem;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    .payment-method-card__title {
        font-size: 0.92rem;
        gap: 0.4rem;
        line-height: 1.2;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .payment-method-card__new-pill {
        font-size: 0.58rem;
        padding: 0.1rem 0.4rem;
        letter-spacing: 0.05em;
        flex-shrink: 0;
    }
    /* Subtitlu compact si scurt, o singura linie cu ellipsis */
    .payment-method-card__subtitle {
        font-size: 0.74rem;
        color: var(--gray-500, #6b7280);
        line-height: 1.3;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        max-width: 100%;
    }
    /* Ascundem badge-urile pentru claritate maxima pe mobil */
    .payment-method-card__badges {
        display: none;
    }

    /* Radio-button in flow flex (al treilea element), nu mai e absolut.
       Nu mai are nevoie de padding-right pe card => zero risc de clipping. */
    .payment-method-card__check {
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex: 0 0 22px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid var(--gray-300, #d1d5db);
        color: transparent;
        font-size: 0;
        opacity: 1;
        margin-left: auto;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }
    .payment-method-card.is-selected .payment-method-card__check {
        background: #DC2626;
        border-color: #DC2626;
        color: #fff;
        font-size: 0.78rem;
        transform: none;
    }
    .payment-method-card--crypto.is-selected .payment-method-card__check {
        background: #f59e0b;
        border-color: #f59e0b;
    }

    .payment-method-picker__warn {
        font-size: 0.82rem;
        padding: 0.7rem 0.75rem 0.7rem 2.4rem;
        margin-top: 0.6rem;
    }
    .payment-method-picker__warn::before {
        left: 0.7rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 380px) {
    .payment-method-card {
        padding: 0.5rem 0.55rem;
        gap: 0.45rem;
        min-height: 48px;
    }
    .payment-method-card--paysafe {
        padding: 0;
    }
    .payment-method-card--paysafe > .payment-method-card__main {
        padding: 0.5rem 0.55rem;
        gap: 0.45rem;
    }
    .payment-method-card__icon {
        flex: 0 0 32px;
        width: 32px;
        height: 32px;
        font-size: 1.05rem;
    }
    .payment-method-card__icon--paysafe,
    .payment-method-card__icon--crypto {
        flex: 0 0 42px;
        width: 42px;
        height: 28px;
    }
    .payment-method-card__title {
        font-size: 0.84rem;
    }
    .payment-method-card__subtitle {
        font-size: 0.68rem;
    }
    .payment-method-card__check {
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
    }
}

/* Paysafecard code submission page */
.paysafe-page {
    padding: 2.2rem 0 3.5rem;
}
.paysafe-page__container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}
.paysafe-page__eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.32rem 0.72rem;
    border-radius: 999px;
    margin-bottom: 0.7rem;
}
.paysafe-page__title {
    font-size: clamp(1.5rem, 3.5vw, 2.05rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 0.7rem;
    color: var(--text-color, #111827);
}
.paysafe-page__subtitle {
    font-size: 1.02rem;
    color: var(--muted-text, #6b7280);
    line-height: 1.55;
    margin: 0 0 1.6rem;
}

/* Stripe Payment Element (in-page) — fundal, card, mobil */
.stripe-pay-page {
    padding: clamp(1rem, 4vw, 2rem) 0 clamp(2rem, 6vw, 3.75rem);
    padding-left: max(0px, env(safe-area-inset-left, 0px));
    padding-right: max(0px, env(safe-area-inset-right, 0px));
    background:
        radial-gradient(1200px 480px at 50% -120px, rgba(220, 38, 38, 0.07), transparent 55%),
        radial-gradient(800px 400px at 100% 20%, rgba(37, 99, 235, 0.05), transparent 45%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 35%, #f8fafc 100%);
}
.stripe-pay-page__container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 clamp(0.75rem, 4vw, 1.25rem);
}
@media (min-width: 768px) {
    .stripe-pay-page__container {
        max-width: 720px;
    }
}
@media (min-width: 1100px) {
    .stripe-pay-page__container {
        max-width: 800px;
    }
}
.stripe-pay-page__card {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: clamp(16px, 4vw, 22px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 22px 50px -28px rgba(15, 23, 42, 0.22),
        0 8px 24px -12px rgba(15, 23, 42, 0.1);
    padding: clamp(0.85rem, 3vw, 1.35rem) clamp(0.85rem, 3vw, 1.35rem) clamp(1rem, 3vw, 1.5rem);
}
/* DOM: formular primul (mobil). Desktop: flex order păstrează titlul și rezumatul deasupra formularului. */
@media (min-width: 769px) {
    .stripe-pay-recap__label--amount-mobile {
        display: none;
    }
    .stripe-pay-page__card > .stripe-pay-page__header {
        order: 1;
    }
    .stripe-pay-page__card > .stripe-pay-alert {
        order: 2;
    }
    .stripe-pay-page__card > .stripe-pay-recap {
        order: 3;
    }
    .stripe-pay-page__card > .stripe-pay-trust-row {
        order: 4;
    }
    .stripe-pay-page__card > .stripe-pay-payment {
        order: 5;
    }
    .stripe-pay-page__card > .stripe-pay-hint {
        order: 6;
    }
    .stripe-pay-page__card > .stripe-pay-page__logos {
        order: 7;
    }
    .stripe-pay-page__card > .stripe-pay-cancel-wrap {
        order: 8;
    }
}
@media (max-width: 768px) {
    /* Sus: antet + total, apoi formular (order vizual; DOM rămâne pentru desktop) */
    .stripe-pay-page__card > .stripe-pay-page__header {
        order: 1;
    }
    .stripe-pay-page__card > .stripe-pay-alert {
        order: 2;
    }
    .stripe-pay-page__card > .stripe-pay-recap {
        order: 3;
    }
    .stripe-pay-page__card > .stripe-pay-payment {
        order: 4;
        margin: 0;
        margin-top: 0.75rem;
        padding-top: 0.85rem;
        padding-bottom: 0;
        border-top: 1px solid var(--gray-100, #f3f4f6);
        border-bottom: 0;
    }
    .stripe-pay-page__card > .stripe-pay-trust-row {
        order: 5;
    }
    .stripe-pay-page__card > .stripe-pay-hint {
        order: 6;
        margin-top: 0.35rem;
    }
    .stripe-pay-page__card > .stripe-pay-page__logos {
        order: 7;
    }
    .stripe-pay-page__card > .stripe-pay-cancel-wrap {
        order: 8;
        display: none;
    }
    .stripe-pay-page__header {
        margin-bottom: 0.5rem;
        justify-content: center;
    }
    .stripe-pay-page__intro {
        text-align: center;
        min-width: 0;
    }
    .stripe-pay-page__eyebrow {
        margin-left: auto;
        margin-right: auto;
    }
    .stripe-pay-page__title {
        text-align: center;
        margin-bottom: 0.35rem;
    }
    .stripe-pay-page__subtitle {
        text-align: center;
        max-width: 22rem;
        margin-left: auto;
        margin-right: auto;
    }
    .stripe-pay-payment__heading {
        display: none;
    }
    .stripe-pay-recap__heading {
        display: none;
    }
    .stripe-pay-recap__label--amount-desktop {
        display: none;
    }
    .stripe-pay-recap .stripe-pay-recap__row:not(.stripe-pay-recap__row--total) {
        display: none;
    }
    .stripe-pay-recap {
        padding: 0.45rem 0.65rem;
        margin-bottom: 0;
    }
    .stripe-pay-recap__row--total {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
    }
}
.stripe-pay-page__header {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    margin-bottom: 0.85rem;
}
.stripe-pay-page__lock {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.28);
}
.stripe-pay-page__lock-icon {
    display: block;
    width: 22px;
    height: 22px;
}
.stripe-pay-page__intro {
    min-width: 0;
}
.stripe-pay-page__eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.4rem;
}
.stripe-pay-page__title {
    font-size: clamp(1.05rem, 3.2vw, 1.35rem);
    font-weight: 800;
    line-height: 1.22;
    margin: 0 0 0.35rem;
    color: var(--text-color, #111827);
    letter-spacing: -0.02em;
}
.stripe-pay-page__subtitle {
    font-size: clamp(0.78rem, 2.2vw, 0.88rem);
    color: var(--muted-text, #6b7280);
    line-height: 1.45;
    margin: 0;
}
.stripe-pay-alert {
    margin: 0 0 1rem;
    border-radius: 12px;
    padding: 0.75rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.45;
}
.stripe-pay-recap {
    background: linear-gradient(165deg, #f9fafb 0%, #ffffff 42%, #f8fafc 100%);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 11px;
    padding: 0.55rem 0.72rem 0.62rem;
    margin-bottom: 0.65rem;
}
.stripe-pay-recap__heading {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.055em;
    color: var(--muted-text, #6b7280);
    margin: 0 0 0.38rem;
}
.stripe-pay-recap__rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.stripe-pay-recap__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 0.65rem;
    padding: 0.32rem 0;
    border-bottom: 1px dashed var(--border-color, #e5e7eb);
    font-size: 0.8rem;
    line-height: 1.3;
}
.stripe-pay-recap__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.stripe-pay-recap__row--total {
    padding-top: 0.45rem;
    margin-top: 0.05rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    border-bottom: 0;
}
.stripe-pay-recap__row--total .stripe-pay-recap__label {
    font-weight: 700;
    color: var(--text-color, #111827);
}
.stripe-pay-recap__label {
    color: var(--muted-text, #6b7280);
    flex-shrink: 0;
}
.stripe-pay-recap__value {
    text-align: right;
    color: var(--text-color, #111827);
    word-break: break-word;
}
.stripe-pay-recap__value--code {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
.stripe-pay-recap__value--amount {
    color: #dc2626;
    font-weight: 800;
    font-size: 0.92rem;
}
.stripe-pay-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem 0.4rem;
    margin-bottom: 0.7rem;
}
.stripe-pay-trust-row__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.22rem 0.48rem;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--gray-700, #374151);
    line-height: 1.2;
}
.stripe-pay-trust-row__chip svg {
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    color: var(--gray-500, #6b7280);
}
.stripe-pay-payment__heading {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.045em;
    color: var(--muted-text, #6b7280);
    margin: 0 0 0.5rem;
}
.stripe-pay-form {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}
.stripe-pay-element {
    margin-bottom: 1rem;
    padding: 0.15rem 0;
    min-height: 2rem;
}
/* Stripe iframe wrapper — evită overflow orizontal pe mobil */
.stripe-pay-element .StripeElement,
.stripe-pay-element iframe {
    max-width: 100%;
}
.stripe-pay-message {
    color: #b91c1c;
    font-size: 0.88rem;
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    line-height: 1.4;
}
.stripe-pay-submit {
    width: 100%;
    margin-top: 0.35rem;
    min-height: 3.05rem;
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 12px;
    box-shadow: 0 4px 14px -4px rgba(220, 38, 38, 0.55);
}
.stripe-pay-submit[aria-busy="true"] {
    opacity: 0.85;
    cursor: wait;
}
.stripe-pay-hint {
    font-size: 0.8rem;
    color: var(--muted-text, #6b7280);
    margin: 1rem 0 0.85rem;
    line-height: 1.5;
    text-align: center;
    padding: 0 0.25rem;
}
.stripe-pay-page__logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.55rem 0.75rem;
    margin-bottom: 1.15rem;
    padding: 0.65rem 0.5rem 0.35rem;
    border-top: 1px solid var(--gray-100, #f3f4f6);
}
.stripe-pay-page__logos .payment-logo-img--visa { height: 20px; }
.stripe-pay-page__logos .payment-logo-img--mastercard { height: 26px; }
.stripe-pay-page__logos .payment-logo-img--apple-pay { height: 24px; }
.stripe-pay-page__logos .payment-logo-img--google-pay { height: 20px; }
.stripe-pay-cancel-wrap {
    margin: 0;
    text-align: center;
}
.stripe-pay-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--muted-text, #6b7280);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    padding: 0.5rem 0.75rem;
    min-height: 44px;
    box-sizing: border-box;
}
.stripe-pay-cancel:hover {
    color: var(--text-color, #111827);
}

@media (max-width: 480px) {
    .stripe-pay-page__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .stripe-pay-page__intro {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* Rânduri ascunse pe mobil; păstrăm totalul pe un singur rând */
    .stripe-pay-recap__row:not(.stripe-pay-recap__row--total) {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
    }
    .stripe-pay-recap__row:not(.stripe-pay-recap__row--total) .stripe-pay-recap__value {
        text-align: left;
    }
    .stripe-pay-recap__row--total .stripe-pay-recap__value--amount {
        font-size: 1.02rem;
    }
}
@media (min-width: 481px) {
    .stripe-pay-trust-row__chip {
        font-size: 0.66rem;
    }
}

/* Mobil: după regulile .stripe-pay-* cu display:flex — altfel lacătul și trust/logo revin vizibile */
@media (max-width: 768px) {
    .stripe-pay-page__card .stripe-pay-page__lock {
        display: none;
    }
    .stripe-pay-page__card > .stripe-pay-trust-row,
    .stripe-pay-page__card > .stripe-pay-hint,
    .stripe-pay-page__card > .stripe-pay-page__logos {
        display: none;
    }
    .stripe-pay-page {
        padding-top: 0.6rem;
        padding-bottom: 1.35rem;
    }
    .stripe-pay-page__card {
        padding: 0.72rem 0.8rem 0.95rem;
        border-radius: 14px;
    }
    .stripe-pay-page__header {
        margin-bottom: 0.4rem;
    }
    .stripe-pay-page__subtitle {
        font-size: 0.74rem;
        line-height: 1.38;
    }
    .stripe-pay-page__card > .stripe-pay-payment {
        margin-top: 0.5rem;
        padding-top: 0.6rem;
    }
    .stripe-pay-recap {
        padding: 0.35rem 0.5rem;
    }
    /* Fără linie deasupra totalului când rândurile anterioare sunt ascunse pe mobil */
    .stripe-pay-recap .stripe-pay-recap__row--total {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
    }
    .stripe-pay-recap__row--total .stripe-pay-recap__value--amount {
        font-size: 1.08rem;
    }
    .stripe-pay-submit {
        min-height: 2.8rem;
        font-size: 0.97rem;
        margin-top: 0.2rem;
    }
    .stripe-pay-element {
        margin-bottom: 0.75rem;
    }
}

.paysafe-recap {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.4rem;
}
.paysafe-recap__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted-text, #6b7280);
    margin: 0 0 0.6rem;
}
.paysafe-recap__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border-color, #e5e7eb);
    font-size: 0.94rem;
}
.paysafe-recap__row:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.paysafe-recap__row strong {
    color: #DC2626;
    font-weight: 700;
}
.paysafe-steps {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1.6rem;
}
.paysafe-step {
    display: flex;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    background: var(--card-bg, #fff);
}
.paysafe-step__num {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    font-weight: 800;
}
.paysafe-step__body h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: var(--text-color, #111827);
}
.paysafe-step__body p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--muted-text, #6b7280);
    line-height: 1.5;
}
.paysafe-form {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
}
.paysafe-form__label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.4rem;
    color: var(--text-color, #111827);
}
.paysafe-form__textarea {
    width: 100%;
    min-height: 130px;
    padding: 0.75rem 0.9rem;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    border: 1.5px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: #f9fafb;
    color: var(--text-color, #111827);
    resize: vertical;
}
.paysafe-form__textarea:focus {
    outline: none;
    border-color: #DC2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    background: #fff;
}
.paysafe-form__help {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--muted-text, #6b7280);
}
.paysafe-form__submit {
    margin-top: 1.1rem;
    width: 100%;
    padding: 0.95rem;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    border: 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}
.paysafe-form__submit:hover {
    filter: brightness(1.05);
}
.paysafe-form__submit:active {
    transform: translateY(1px);
}
.paysafe-form__security-note {
    margin: 1rem 0 0;
    padding: 0.7rem 0.9rem;
    background: rgba(34, 197, 94, 0.08);
    color: #047857;
    border-left: 3px solid #10b981;
    border-radius: 6px;
    font-size: 0.83rem;
    line-height: 1.5;
}

/* Tracking - paysafe in review block */
.track-paysafe-card {
    background: linear-gradient(135deg, rgba(0, 38, 78, 0.04), rgba(0, 70, 168, 0.06));
    border: 1px solid rgba(0, 70, 168, 0.2);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    margin-bottom: 1.2rem;
}
.track-paysafe-card__head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.track-paysafe-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.78rem;
}
.track-paysafe-card__title {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-color, #111827);
}
.track-paysafe-card__body {
    margin: 0;
    color: var(--muted-text, #4b5563);
    line-height: 1.55;
    font-size: 0.93rem;
}
.track-paysafe-card--rejected {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.25);
}
.track-paysafe-card--rejected .track-paysafe-card__icon {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
}

/* Top promo banner */
.paysafe-top-banner {
    background: linear-gradient(90deg, #00264e, #0046a8 50%, #DC2626);
    color: #fff;
    text-align: center;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    position: relative;
    z-index: 90;
}
.paysafe-top-banner a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.paysafe-top-banner a:hover {
    text-decoration: underline;
}
.paysafe-top-banner__close {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.paysafe-top-banner__close:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* Promo top banner (POP10) */
.promo-top-banner {
    position: relative;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.5rem 2.6rem 0.5rem 1rem;
    background: linear-gradient(90deg, #f59e0b 0%, #DC2626 55%, #b91c1c 100%);
    color: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
}
.promo-top-banner__icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}
.promo-top-banner__text {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: center;
}
.promo-top-banner__code {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.6rem;
    background: rgba(255, 255, 255, 0.95);
    color: #b91c1c;
    border: 0;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.promo-top-banner__code:hover, .promo-top-banner__code:focus {
    background: #fff;
    transform: translateY(-1px);
    outline: 0;
}
.promo-top-banner__code.is-copied {
    background: #10B981;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0;
}
.promo-top-banner__code.is-copied .promo-top-banner__code-icon { display: none; }
.promo-top-banner__code-icon { font-size: 0.85rem; opacity: 0.85; }
.promo-top-banner__close {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
}
.promo-top-banner__close:hover {
    background: rgba(255, 255, 255, 0.32);
}
@media (max-width: 768px) {
    .promo-top-banner {
        padding: 0.4rem 2.2rem 0.4rem 0.7rem;
        font-size: 0.74rem;
        gap: 0.35rem;
        line-height: 1.25;
    }
    .promo-top-banner__icon { font-size: 0.9rem; }
    .promo-top-banner__text { gap: 0.3rem; flex-wrap: nowrap; }
    .promo-top-banner__code { font-size: 0.72rem; padding: 0.12rem 0.5rem; gap: 0.2rem; }
    .promo-top-banner__code-icon { font-size: 0.75rem; }
    .promo-top-banner__close { width: 22px; height: 22px; font-size: 0.85rem; right: 0.4rem; }
}
@media (max-width: 480px) {
    .promo-top-banner {
        padding: 0.35rem 2rem 0.35rem 0.55rem;
        font-size: 0.7rem;
    }
    .promo-top-banner__icon { display: none; }
    .promo-top-banner__code { font-size: 0.68rem; padding: 0.1rem 0.45rem; }
}

/* Landing page /plata-paysafecard */
.paysafe-landing {
    padding: 2.5rem 0 3.5rem;
}
.paysafe-landing__hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.4rem;
}
.paysafe-landing__eyebrow {
    display: inline-block;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.paysafe-landing h1 {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.15;
    margin: 0 0 0.9rem;
    font-weight: 800;
}
.paysafe-landing__lead {
    font-size: 1.12rem;
    color: var(--muted-text, #4b5563);
    line-height: 1.6;
    margin: 0 0 1.5rem;
}
.paysafe-landing__cta {
    display: inline-block;
    padding: 0.95rem 1.6rem;
    background: linear-gradient(135deg, #DC2626, #b91c1c);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 12px 24px -12px rgba(220, 38, 38, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.paysafe-landing__cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -12px rgba(220, 38, 38, 0.7);
}
.paysafe-landing__benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2.8rem;
}
.paysafe-landing__benefit {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 1.2rem;
}
.paysafe-landing__benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
}
.paysafe-landing__benefit h3 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}
.paysafe-landing__benefit p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-text, #6b7280);
    line-height: 1.55;
}
.paysafe-landing__section-title {
    text-align: center;
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    font-weight: 800;
    margin: 0 0 1.5rem;
}
.paysafe-landing__how-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 2.8rem;
}
.paysafe-landing__how-step {
    background: linear-gradient(180deg, rgba(0, 70, 168, 0.04), transparent 70%);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 1.2rem;
}
.paysafe-landing__how-step h3 {
    margin: 0 0 0.4rem;
    color: #0046a8;
    font-size: 1.05rem;
}
.paysafe-landing__how-step p {
    margin: 0;
    color: var(--muted-text, #6b7280);
    font-size: 0.93rem;
    line-height: 1.55;
}
.paysafe-landing__partners {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    padding: 1.4rem;
    margin-bottom: 2.5rem;
    text-align: center;
}
.paysafe-landing__partners-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1rem;
}
.paysafe-landing__partner {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.9rem;
    background: rgba(0, 70, 168, 0.08);
    color: #0046a8;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
}
.paysafe-landing__faq {
    max-width: 760px;
    margin: 0 auto;
}
.paysafe-landing__faq-item {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.7rem;
}
.paysafe-landing__faq-q {
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    color: var(--text-color, #111827);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}
.paysafe-landing__faq-q::after {
    content: '+';
    color: #DC2626;
    font-weight: 800;
}
.paysafe-landing__faq-item[open] .paysafe-landing__faq-q::after {
    content: '\2212';
}
.paysafe-landing__faq-a {
    margin: 0.6rem 0 0;
    color: var(--muted-text, #6b7280);
    line-height: 1.55;
    font-size: 0.93rem;
}

/* Admin: paysafe modal & badges */
.admin-paysafe-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: linear-gradient(135deg, #00264e, #0046a8);
    color: #fff;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    margin-left: 0.35rem;
    letter-spacing: 0.04em;
}
.admin-paysafe-row-pending {
    background: rgba(245, 158, 11, 0.06) !important;
    border-left: 3px solid #f59e0b;
}
.admin-paysafe-pending-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: rgba(245, 158, 11, 0.16);
    color: #92400e;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.4rem;
}
.admin-paysafe-modal__codes {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}
.admin-paysafe-modal__code {
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    padding: 0.55rem 0.7rem;
    background: #f1f5f9;
    border-radius: 6px;
    letter-spacing: 0.08em;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}
.admin-paysafe-modal__actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.admin-paysafe-modal__reason {
    width: 100%;
    min-height: 70px;
    margin-top: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font: inherit;
}

/* Admin orders list - payment-method badges + paysafe row highlight */
.payment-method-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 6px;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    margin-left: 0.3rem;
    white-space: nowrap;
}
.payment-method-badge--stripe {
    background: #eef2ff;
    color: #4338ca;
    border: 1px solid #c7d2fe;
}
.payment-method-badge--paysafe {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid #c4b5fd;
}
.payment-method-badge--paysafe-pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    animation: paysafePendingPulse 2.4s ease-in-out infinite;
}
.payment-method-badge--paysafe-rejected {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
@keyframes paysafePendingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
}
.order-row--paysafe-pending {
    background: rgba(245, 158, 11, 0.06) !important;
    border-left: 3px solid #f59e0b;
}
.action-btn--paysafe-review {
    color: #5b21b6;
    border-color: #c4b5fd;
}
.action-btn--paysafe-review:hover {
    background: #ede9fe;
    color: #4c1d95;
}

/* Admin orders list - traffic source badge (de unde a venit cumparatorul) */
.traffic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    border: 1px solid transparent;
    white-space: nowrap;
    text-transform: capitalize;
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}
.traffic-badge::before {
    content: '';
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}
.traffic-badge--facebook  { background: #e7f1ff; color: #1d4ed8; border-color: #c7dbff; }
.traffic-badge--instagram { background: #fdecf3; color: #be185d; border-color: #fbcfe8; }
.traffic-badge--tiktok    { background: #111827; color: #f9fafb; border-color: #111827; }
.traffic-badge--youtube   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.traffic-badge--google    { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.traffic-badge--bing      { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.traffic-badge--twitter   { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; }
.traffic-badge--linkedin  { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.traffic-badge--reddit    { background: #ffe4d6; color: #9a3412; border-color: #fed7aa; }
.traffic-badge--pinterest { background: #ffe4e6; color: #9f1239; border-color: #fecdd3; }
.traffic-badge--snapchat  { background: #fef9c3; color: #713f12; border-color: #fde68a; }
.traffic-badge--discord   { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
.traffic-badge--telegram  { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.traffic-badge--whatsapp  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.traffic-badge--direct    { background: #f3f4f6; color: #4b5563; border-color: #e5e7eb; }
.traffic-badge--admin     { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.traffic-badge--wheel     { background: #fdf4ff; color: #86198f; border-color: #f5d0fe; }
.traffic-badge--referral  { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.traffic-badge--unknown   { color: #9ca3af; }
.filter-btn--accent {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    border-color: #fcd34d;
    font-weight: 700;
}
.filter-btn--accent.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-color: #b45309;
}
.filter-btn-count {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.45rem;
    background: rgba(146, 64, 14, 0.15);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.4em;
    text-align: center;
}
.filter-btn--accent.active .filter-btn-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Admin order edit - Paysafe review box wrapper (inline styles handle most) */
.admin-paysafe-review-box .copy-btn {
    cursor: pointer;
}

/* Landing page extras for new view classnames */
.paysafe-landing-section {
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.paysafe-landing__h2 {
    font-size: 1.5rem;
    margin: 1.6rem 0 1rem;
    color: #1f2937;
}
.paysafe-landing__cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 1.1rem 0 1.3rem;
}
.paysafe-landing__quick-bullets {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.55rem 1.4rem;
    font-size: 0.93rem;
    color: #374151;
}
.paysafe-landing__quick-bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
}
.paysafe-landing__bullet-icon {
    color: #16a34a;
    font-weight: 700;
    flex-shrink: 0;
}
.paysafe-landing__benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 0.6rem;
}
.paysafe-landing__benefit-card {
    padding: 1rem 1.1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.paysafe-landing__benefit-card h3 {
    margin: 0.4rem 0 0.3rem;
    font-size: 1.05rem;
    color: #111827;
}
.paysafe-landing__benefit-card p {
    margin: 0;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.5;
}
.paysafe-landing__benefit-icon {
    font-size: 1.7rem;
    line-height: 1;
}
.paysafe-landing__howto-intro {
    margin: 0 0 1rem;
    color: #4b5563;
}
.paysafe-landing__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.8rem;
}
.paysafe-landing__step {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.paysafe-landing__step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.05rem;
}
.paysafe-landing__step-body h3 {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
    color: #111827;
}
.paysafe-landing__step-body p {
    margin: 0;
    color: #4b5563;
    font-size: 0.93rem;
    line-height: 1.5;
}
.paysafe-landing__partners-grid {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem;
}
.paysafe-landing__partners-grid li {
    padding: 0.55rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    color: #1f2937;
    font-size: 0.9rem;
}
.paysafe-landing__partners-help {
    margin-top: 0.7rem;
    color: #4b5563;
    font-size: 0.88rem;
}
.paysafe-landing__faq-list {
    display: grid;
    gap: 0.55rem;
}
.paysafe-landing__faq-item {
    padding: 0.7rem 0.95rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}
.paysafe-landing__faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: #111827;
    list-style: none;
}
.paysafe-landing__faq-item summary::-webkit-details-marker { display: none; }
.paysafe-landing__faq-item summary::after {
    content: '+';
    float: right;
    color: #7c3aed;
    font-weight: 800;
}
.paysafe-landing__faq-item[open] summary::after { content: '-'; }
.paysafe-landing__faq-item p {
    margin: 0.55rem 0 0;
    color: #4b5563;
    line-height: 1.55;
    font-size: 0.93rem;
}
.paysafe-landing__bottom-cta {
    margin-top: 2rem;
    padding: 1.4rem 1.2rem;
    background: linear-gradient(135deg, #ede9fe, #fef3c7);
    border-radius: 14px;
    text-align: center;
}
.paysafe-landing__bottom-cta h2 {
    margin: 0 0 0.4rem;
    color: #1f2937;
}
.paysafe-landing__bottom-cta p {
    margin: 0 0 1rem;
    color: #4b5563;
}

/* --- Conversion Uplift Roadmap (Val 1-3) --- */

/* #2 Social proof ticker */
.social-proof-bubble{position:fixed;left:16px;bottom:18px;z-index:9500;background:#fff;color:#111827;border-radius:14px;box-shadow:0 12px 30px rgba(15,23,42,.18);padding:10px 38px 10px 12px;display:flex;gap:10px;align-items:center;max-width:320px;font-size:.85rem;line-height:1.35;transform:translateY(20px);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .3s ease}
.social-proof-bubble.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.social-proof-bubble__avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#dc2626,#f97316);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex-shrink:0}
.social-proof-bubble__title{font-weight:500}
.social-proof-bubble__meta{color:#4b5563;font-size:.78rem;margin-top:2px}
.social-proof-bubble__close{position:absolute;top:6px;right:8px;background:none;border:0;color:#9ca3af;font-size:1rem;cursor:pointer;line-height:1;padding:2px}
.social-proof-bubble__close:hover{color:#111827}
@media (max-width:640px){.social-proof-bubble{left:10px;right:10px;bottom:78px;max-width:none}}
@media (max-width:768px){.social-proof-bubble{display:none!important}}

/* #3 Sticky bottom CTA on mobile - conversion optimized */
.order-mobile-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:8500;background:linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);border-top:1px solid rgba(15,23,42,.08);box-shadow:0 -10px 28px rgba(15,23,42,.12),0 -2px 6px rgba(15,23,42,.06);padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);display:none;align-items:center;gap:10px;justify-content:space-between;transform:translateY(100%);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.order-mobile-sticky-cta[aria-hidden="false"]{transform:translateY(0)}
.order-mobile-sticky-cta__info{display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0;flex:0 0 auto}
.order-mobile-sticky-cta__price-label{display:flex;align-items:center;gap:4px;font-weight:500;color:#6b7280;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1px}
.order-mobile-sticky-cta__lock{font-size:.7rem;line-height:1;opacity:.85}
.order-mobile-sticky-cta__price{font-weight:800;color:#0f172a;font-size:1.25rem;letter-spacing:-.01em;display:inline-block;transition:transform .25s cubic-bezier(.34,1.56,.64,1),color .25s ease;will-change:transform}
.order-mobile-sticky-cta--pulse .order-mobile-sticky-cta__price{transform:scale(1.08);color:#dc2626}
.order-mobile-sticky-cta__hint{display:flex;align-items:center;gap:4px;margin-top:2px;font-size:.7rem;color:#10b981;font-weight:600;line-height:1}
.order-mobile-sticky-cta__hint-icon{font-size:.78rem;line-height:1}
.order-mobile-sticky-cta__btn{flex:1 1 auto;min-height:50px;background:linear-gradient(135deg,#dc2626 0%,#ef4444 60%,#f97316 100%);color:#fff;border:0;border-radius:12px;padding:10px 14px;font-weight:800;font-size:1rem;cursor:pointer;text-align:center;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 18px rgba(220,38,38,.32),inset 0 -2px 0 rgba(0,0,0,.10);letter-spacing:.01em;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;animation:order-mobile-sticky-cta-glow 2.6s ease-in-out infinite}
.order-mobile-sticky-cta__btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);transform:skewX(-20deg);animation:order-mobile-sticky-cta-shine 3.4s ease-in-out infinite}
.order-mobile-sticky-cta__btn:active{transform:scale(.98);box-shadow:0 3px 10px rgba(220,38,38,.28),inset 0 -1px 0 rgba(0,0,0,.10)}
.order-mobile-sticky-cta__btn:disabled{opacity:.6;cursor:not-allowed;animation:none}
.order-mobile-sticky-cta__btn:disabled::after{display:none}
.order-mobile-sticky-cta__btn-arrow{font-size:1.15rem;line-height:1;display:inline-block;transition:transform .25s ease}
.order-mobile-sticky-cta__btn:active .order-mobile-sticky-cta__btn-arrow{transform:translateX(3px)}
@keyframes order-mobile-sticky-cta-glow{0%,100%{box-shadow:0 6px 18px rgba(220,38,38,.32),inset 0 -2px 0 rgba(0,0,0,.10)}50%{box-shadow:0 8px 26px rgba(220,38,38,.50),inset 0 -2px 0 rgba(0,0,0,.10)}}
@keyframes order-mobile-sticky-cta-shine{0%{left:-60%}55%,100%{left:120%}}
@media (max-width:768px){.order-mobile-sticky-cta{display:flex} body.has-mobile-cta{padding-bottom:88px}}
@media (max-width:380px){.order-mobile-sticky-cta__price{font-size:1.15rem} .order-mobile-sticky-cta__btn{font-size:.95rem;padding:10px 10px} .order-mobile-sticky-cta__btn-arrow{display:none}}
@media (prefers-reduced-motion:reduce){.order-mobile-sticky-cta{transition:none} .order-mobile-sticky-cta__btn,.order-mobile-sticky-cta__btn::after{animation:none} .order-mobile-sticky-cta--pulse .order-mobile-sticky-cta__price{transform:none}}

/* #4 Exit-intent popup */
.exit-intent-overlay{position:fixed;inset:0;background:rgba(15,23,42,.72);z-index:10000;display:none;align-items:center;justify-content:center;padding:16px;animation:fadeIn .2s ease both}
.exit-intent-overlay.is-visible{display:flex}
.exit-intent-modal{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:34px 26px 26px;text-align:center;position:relative;box-shadow:0 30px 60px rgba(15,23,42,.4)}
.exit-intent-modal__close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:1.4rem;color:#9ca3af;cursor:pointer}
.exit-intent-modal__icon{font-size:2.4rem;margin-bottom:.5rem}
.exit-intent-modal__title{font-size:1.4rem;font-weight:700;color:#dc2626;margin:0 0 .4rem}
.exit-intent-modal__lead{color:#374151;margin-bottom:1.1rem;font-size:.95rem}
.exit-intent-modal__code{display:inline-block;background:#fef2f2;color:#dc2626;font-weight:700;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;padding:10px 18px;border:2px dashed #dc2626;border-radius:10px;letter-spacing:.08em;font-size:1.05rem;margin-bottom:.4rem;cursor:pointer}
.exit-intent-modal__expiry{color:#6b7280;font-size:.78rem;margin-bottom:1rem}
.exit-intent-modal__cta{display:inline-block;background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;border:0;border-radius:10px;padding:12px 22px;font-weight:600;text-decoration:none;cursor:pointer}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* #6 Auto-detect URL toast */
.url-detect-toast{position:absolute;background:#111827;color:#fff;padding:8px 12px;border-radius:8px;font-size:.85rem;margin-top:8px;display:none;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(15,23,42,.2)}
.url-detect-toast.is-visible{display:inline-flex}
.url-detect-toast a{color:#fda4af;text-decoration:underline;font-weight:600}

/* #11 Reorder button */
.reorder-btn{display:inline-flex;align-items:center;gap:6px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:8px;padding:6px 12px;font-weight:600;font-size:.85rem;text-decoration:none;transition:background .15s}
.reorder-btn:hover{background:#fee2e2}

/* #12 Cross-sell */
.cross-sell-card{background:linear-gradient(135deg,#fef3c7,#fff7ed);border:1px solid #fcd34d;border-radius:14px;padding:18px 20px;margin-top:1.5rem}
.cross-sell-card__head{display:flex;align-items:center;gap:10px;margin-bottom:.6rem}
.cross-sell-card__title{font-weight:700;color:#92400e;font-size:1.05rem;margin:0}
.cross-sell-card__lead{color:#78350f;margin:0 0 1rem;font-size:.92rem}
.cross-sell-card__code{display:inline-block;background:#fff;border:2px dashed #d97706;color:#b45309;font-weight:700;padding:6px 12px;border-radius:8px;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 .6rem}
.cross-sell-card__items{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:.4rem}
.cross-sell-card__item{display:block;background:#fff;border:1px solid #fde68a;border-radius:10px;padding:10px 12px;color:#111827;text-decoration:none;font-size:.85rem;transition:transform .15s}
.cross-sell-card__item:hover{transform:translateY(-2px);border-color:#fbbf24}
.cross-sell-card__item-name{font-weight:600;display:block;margin-bottom:2px}
.cross-sell-card__item-meta{color:#6b7280;font-size:.78rem}

/* #13 Comparator */
.comparator-table{margin:1.5rem 0;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;background:#fff}
.comparator-table__row{display:grid;grid-template-columns:1.6fr repeat(3, 1fr);gap:1px;background:#f3f4f6}
.comparator-table__row > div{background:#fff;padding:12px 14px;font-size:.9rem}
.comparator-table__row--head > div{background:#f9fafb;font-weight:700;color:#374151;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
.comparator-table__row--ours > div{background:#fef2f2}
.comparator-table__check{color:#16a34a;font-weight:700}
.comparator-table__cross{color:#9ca3af}
.comparator-table__brand{font-weight:700;color:#dc2626}
@media (max-width:640px){
    .comparator-table{border:0}
    .comparator-table__row{grid-template-columns:1fr;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:10px}
    .comparator-table__row--head{display:none}
    .comparator-table__row > div::before{content:attr(data-label);display:block;font-size:.7rem;text-transform:uppercase;color:#9ca3af;margin-bottom:2px;letter-spacing:.04em}
}

/* #16 Lead magnet form */
.lead-magnet-card{max-width:520px;margin:2.5rem auto;background:linear-gradient(135deg,#fef2f2,#fff);border:1px solid #fecaca;border-radius:18px;padding:30px 26px;text-align:center;box-shadow:0 8px 30px rgba(220,38,38,.08)}
.lead-magnet-card__title{color:#dc2626;font-size:1.5rem;margin:0 0 .4rem}
.lead-magnet-card__lead{color:#374151;margin-bottom:1.2rem}
.lead-magnet-card input[type=email],.lead-magnet-card input[type=url]{display:block;width:100%;padding:12px 14px;border:1px solid #e5e7eb;border-radius:10px;margin-bottom:.7rem;font-size:.95rem}
.lead-magnet-card button{width:100%;background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;border:0;border-radius:10px;padding:12px;font-weight:700;font-size:1rem;cursor:pointer}
.lead-magnet-card__hint{color:#6b7280;font-size:.78rem;margin-top:.6rem}

/* #17 Funnel dashboard */
.funnel-dashboard{padding:1.5rem 0}
.funnel-dashboard__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
.funnel-dashboard__card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem 1.2rem}
.funnel-dashboard__card-label{color:#6b7280;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.funnel-dashboard__card-value{font-size:1.6rem;font-weight:700;color:#111827}

/* #18 SSO autofill */
.sso-autofill{display:flex;gap:8px;justify-content:center;margin-bottom:1rem;flex-wrap:wrap}
.sso-autofill__btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:8px 14px;color:#374151;text-decoration:none;font-size:.85rem;font-weight:500;transition:background .15s}
.sso-autofill__btn:hover{background:#f9fafb}
.sso-autofill__btn--google::before{content:'G';color:#4285f4;font-weight:700;font-size:1rem}
.sso-autofill__btn--facebook::before{content:'f';color:#1877f2;font-weight:700;font-size:1rem;font-family:Georgia,serif}

/* ===== Landing pages (Val 2 #10) + comparator (Val 2 #13) ===== */
.landing-wrap{padding:2rem 0 4rem}
.landing-hero{text-align:center;padding:2.5rem 1rem;background:linear-gradient(135deg,#fff8f6 0%,#ffe6e1 100%);border-radius:18px;margin-bottom:2rem}
.landing-hero__eyebrow{display:inline-block;background:#dc2626;color:#fff;border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.landing-hero__title{font-size:clamp(1.7rem,4vw,2.7rem);font-weight:700;color:#111827;margin:0 0 12px}
.landing-hero__subtitle{color:#4b5563;font-size:1.05rem;max-width:680px;margin:0 auto 1.5rem}
.landing-hero__cta-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px}
.landing-hero__rating{display:flex;align-items:center;gap:8px;color:#374151;font-size:.95rem;font-weight:500}
.landing-hero__stars{color:#facc15;font-size:1.05rem;letter-spacing:.04em}
.landing-benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:2rem 0}
.landing-benefit{background:#fff;border:1px solid #f3f4f6;border-radius:14px;padding:1.25rem;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.landing-benefit__icon{font-size:2rem;display:inline-block;margin-bottom:.5rem}
.landing-benefit h3{margin:0 0 .25rem;font-size:1.05rem;color:#111827}
.landing-benefit p{margin:0;color:#6b7280;font-size:.92rem;line-height:1.5}
.landing-cta-block{text-align:center;background:#0f172a;color:#fff;padding:2rem 1rem;border-radius:14px;margin:2rem 0}
.landing-cta-block h2{margin:0 0 1rem}
.landing-faq{margin:2.5rem 0}
.landing-faq h2{margin:0 0 1rem;font-size:1.4rem;color:#111827}
.landing-faq details{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem 1.25rem;margin-bottom:.5rem}
.landing-faq summary{font-weight:600;cursor:pointer;color:#1f2937}
.landing-faq p{margin:.5rem 0 0;color:#4b5563}
.landing-final-cta{text-align:center;padding:2rem 1rem;background:linear-gradient(135deg,#fef2f2,#fee2e2);border-radius:14px;margin-top:2rem}
.landing-final-cta h2{font-size:1.4rem;color:#111827;margin:0 0 1rem}

.comparator-section{margin:2.5rem 0}
.comparator-title{font-size:1.4rem;color:#111827;margin:0 0 1rem;text-align:center}
.comparator-table-wrap{overflow-x:auto;border-radius:12px;border:1px solid #e5e7eb;background:#fff;display:block}
.comparator-table{width:100%;border-collapse:collapse;min-width:520px}
.comparator-table th,.comparator-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid #f3f4f6;font-size:.95rem}
.comparator-table th{background:#f9fafb;color:#374151;font-weight:600}
.comparator-table .comparator-us{background:#fef2f2;color:#991b1b;font-weight:600}
.comparator-table th.comparator-us{background:#dc2626;color:#fff}
.comparator-cards{display:none;flex-direction:column;gap:.75rem;margin-top:.5rem}
.comparator-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:1rem}
.comparator-card__label{font-weight:600;color:#111827;margin-bottom:.5rem}
.comparator-card__rows>div{display:flex;justify-content:space-between;padding:.35rem 0;font-size:.92rem;color:#4b5563;border-top:1px dashed #f3f4f6}
.comparator-card__rows>div:first-child{border-top:0}
.comparator-card__rows strong{color:#dc2626}
@media(max-width:600px){.comparator-table-wrap{display:none}.comparator-cards{display:flex}}

/* ===== Order success cross-sell (Val 2 #12) ===== */
.cross-sell-card{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fdba74;border-radius:14px;padding:1.5rem;margin:1.5rem 0;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.cross-sell-card__copy{flex:1 1 280px}
.cross-sell-card__title{margin:0 0 .35rem;color:#9a3412;font-size:1.1rem}
.cross-sell-card__desc{margin:0;color:#7c2d12;font-size:.95rem}
.cross-sell-card__promo{display:inline-block;background:#fff;border:2px dashed #ea580c;border-radius:10px;padding:.5rem 1rem;color:#dc2626;font-family:monospace;font-weight:700;letter-spacing:.05em;margin-top:.6rem}
.cross-sell-card__cta{flex:0 0 auto}
.cross-sell-countdown{font-size:.85rem;color:#9a3412;margin-top:.4rem}

/* ===== Reorder button (Val 2 #11) ===== */
.btn-reorder{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #dc2626;color:#dc2626;border-radius:8px;padding:6px 12px;font-size:.85rem;font-weight:600;text-decoration:none;transition:all .15s}
.btn-reorder:hover{background:#dc2626;color:#fff}

/* ===== Lead magnet (Val 3 #16) ===== */
.lead-magnet-wrap{max-width:540px;margin:3rem auto;padding:2rem;background:#fff;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.lead-magnet-wrap h1{font-size:1.6rem;color:#111827;margin:0 0 .5rem;text-align:center}
.lead-magnet-wrap .lead-sub{color:#6b7280;text-align:center;margin:0 0 1.5rem}
.lead-magnet-form .form-group{margin-bottom:1rem}
.lead-magnet-form label{display:block;font-weight:500;color:#374151;margin-bottom:.35rem;font-size:.92rem}
.lead-magnet-form input{width:100%;padding:.65rem .85rem;border:1px solid #e5e7eb;border-radius:8px;font-size:1rem}
.lead-magnet-form button{width:100%}
.lead-magnet-tos{font-size:.78rem;color:#6b7280;text-align:center;margin-top:1rem}

/* ===== Funnel dashboard (Val 3 #17) ===== */
.funnel-dashboard{padding:1rem}
.funnel-dashboard .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
.funnel-dashboard .stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:1rem}
.funnel-dashboard .stat-label{font-size:.78rem;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}
.funnel-dashboard .stat-value{font-size:1.6rem;font-weight:700;color:#111827;margin-top:.25rem}

/* ===== Success page AOV boost ===== */
/* Trust strip */
.success-trust-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;max-width:760px;margin:1.25rem auto 1.75rem;padding:.85rem 1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px}
.success-trust-strip__item{display:flex;align-items:center;gap:.55rem;font-size:.82rem;color:#374151;line-height:1.3}
.success-trust-strip__icon{font-size:1rem;flex-shrink:0}
.success-trust-strip__text{font-weight:500}
@media (max-width:600px){
    .success-trust-strip{grid-template-columns:1fr 1fr;padding:.75rem .85rem}
    .success-trust-strip__item{font-size:.78rem}
}

/* Cross-sell card — strong layout (override pe .cross-sell-card--strong) */
.cross-sell-card--strong{position:relative;display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:center;padding:1.5rem 1.6rem;background:linear-gradient(135deg,#fff7ed,#fef3c7);border:2px solid #fb923c;box-shadow:0 8px 26px rgba(251,146,60,.18);max-width:760px;margin:1.5rem auto 0}
.cross-sell-card--strong .cross-sell-card__badge{position:absolute;top:-12px;left:1.5rem;background:#dc2626;color:#fff;font-weight:700;font-size:.78rem;padding:4px 12px;border-radius:999px;letter-spacing:.04em;box-shadow:0 4px 10px rgba(220,38,38,.3)}
.cross-sell-card--strong .cross-sell-card__title{font-size:1.2rem;color:#9a3412;margin:0 0 .35rem;line-height:1.3}
.cross-sell-card--strong .cross-sell-card__desc{color:#78350f;font-size:.9rem;margin:0 0 .75rem;line-height:1.45}
.cross-sell-card__pricing{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap;margin-bottom:.65rem}
.cross-sell-card__price-old{color:#9a3412;text-decoration:line-through;font-size:.95rem;opacity:.7}
.cross-sell-card__price-new{font-size:1.5rem;font-weight:800;color:#dc2626;line-height:1}
.cross-sell-card__savings{background:#fee2e2;color:#991b1b;font-weight:700;font-size:.78rem;padding:3px 9px;border-radius:6px}
.cross-sell-card--strong .cross-sell-countdown{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;color:#9a3412;background:#fff;border:1px dashed #fb923c;border-radius:8px;padding:5px 10px}
.cross-sell-card--strong .cross-sell-countdown strong{color:#b45309;font-variant-numeric:tabular-nums}
.cross-sell-card__cta{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;min-width:200px}
.cross-sell-card__btn{font-size:1rem;padding:.8rem 1.4rem;white-space:nowrap;text-align:center}
.cross-sell-card__cta-hint{font-size:.72rem;color:#78350f;margin:0;text-align:center;line-height:1.35}
@media (max-width:640px){
    .cross-sell-card--strong{grid-template-columns:1fr;padding:1.4rem 1.1rem}
    .cross-sell-card__cta{min-width:0}
    .cross-sell-card__btn{width:100%}
    .cross-sell-card--strong .cross-sell-card__title{font-size:1.05rem}
    .cross-sell-card__price-new{font-size:1.3rem}
}

/* Upsell cards cu pret old/new + badge discount */
.success-upsell__card{position:relative}
.success-upsell__card--discounted{border-color:#fb923c;box-shadow:0 4px 12px rgba(251,146,60,.12)}
.success-upsell__card--discounted:hover{border-color:#dc2626;box-shadow:0 6px 18px rgba(220,38,38,.18)}
.success-upsell__price-old{display:inline-block;color:#9ca3af;text-decoration:line-through;font-size:.78rem;margin-right:.25rem;font-weight:500}
.success-upsell__price-new{color:#dc2626;font-weight:700;font-size:.95rem}
.success-upsell__card-savings{margin-top:.35rem;font-size:.72rem;color:#16a34a;font-weight:600}
.success-upsell__shared-countdown{margin:1rem auto 0;text-align:center;font-size:.82rem;color:#78350f;background:#fff7ed;border:1px dashed #fb923c;border-radius:8px;padding:.5rem .75rem;max-width:360px}
.success-upsell__shared-countdown strong{color:#b45309;font-variant-numeric:tabular-nums;font-weight:800}
.badge-discount{position:absolute;top:-9px;right:.75rem;background:#dc2626;color:#fff;font-weight:700;font-size:.7rem;padding:3px 8px;border-radius:999px;letter-spacing:.04em;line-height:1;box-shadow:0 3px 8px rgba(220,38,38,.28);z-index:1}

/* Reorder card — +20% bonus */
.success-reorder-card{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;max-width:720px;margin:1.5rem auto 0;padding:1.1rem 1.3rem;background:linear-gradient(135deg,#eef2ff,#fdf4ff);border:1px solid #c7d2fe;border-radius:14px}
.success-reorder-card__icon{font-size:1.8rem;line-height:1}
.success-reorder-card__title{font-size:1rem;font-weight:700;color:#3730a3;margin:0 0 .2rem}
.success-reorder-card__desc{font-size:.86rem;color:#4338ca;margin:0;line-height:1.45}
.success-reorder-card__desc strong{color:#1e1b4b;font-weight:700}
.success-reorder-card__btn{white-space:nowrap;padding:.65rem 1.1rem;font-size:.9rem}
@media (max-width:640px){
    .success-reorder-card{grid-template-columns:auto 1fr;grid-template-rows:auto auto;row-gap:.6rem;padding:1rem 1.05rem}
    .success-reorder-card__cta{grid-column:1/-1}
    .success-reorder-card__btn{width:100%;text-align:center}
}

/* Mini FAQ accordion */
.success-faq{max-width:720px;margin:2rem auto 0}
.success-faq__heading{font-size:1.1rem;font-weight:700;color:#111827;margin:0 0 1rem;text-align:center}
.success-faq__list{display:flex;flex-direction:column;gap:.55rem}
.success-faq__item{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:0;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.success-faq__item[open]{border-color:#fb923c;box-shadow:0 4px 12px rgba(251,146,60,.1)}
.success-faq__question{cursor:pointer;list-style:none;padding:.85rem 1.1rem;font-weight:600;font-size:.92rem;color:#1f2937;position:relative;padding-right:2.4rem;transition:background .15s}
.success-faq__question::-webkit-details-marker{display:none}
.success-faq__question::after{content:'+';position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:300;color:#9ca3af;transition:transform .2s,color .15s;line-height:1}
.success-faq__item[open] .success-faq__question::after{content:'\2212';color:#dc2626}
.success-faq__question:hover{background:#f9fafb}
.success-faq__answer{padding:0 1.1rem 1rem;font-size:.86rem;color:#4b5563;line-height:1.55}

/* ============================================================
   Bootstrap Grid Fallback — ensures columns work even if CDN fails
   ============================================================ */
.row {
    display: flex;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
    box-sizing: border-box;
}
.g-3 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
    .col-sm-6 { flex: 0 0 auto; width: 50%; }
}
@media (min-width: 992px) {
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.33333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.66667%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.33333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.66667%; }
    .d-lg-none { display: none !important; }
}
.h-100 { height: 100% !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.d-none { display: none !important; }
@media (min-width: 576px) {
    .d-sm-table-cell { display: table-cell !important; }
}
@media (min-width: 768px) {
    .d-md-table-cell { display: table-cell !important; }
    .d-md-inline { display: inline !important; }
}
.table { width: 100%; margin-bottom: 1rem; vertical-align: top; border-color: #dee2e6; }
.table > :not(caption) > * > * { padding: .5rem .5rem; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: inherit; }
.table > tbody { vertical-align: inherit; }
.table > thead { vertical-align: bottom; }
.table-sm > :not(caption) > * > * { padding: .25rem .25rem; }
.table-hover > tbody > tr:hover > * { background-color: rgba(0,0,0,.075); }
.table-light { --bs-table-bg: #f8f9fa; }
.table-light th { background-color: #f8f9fa; }
.align-middle { vertical-align: middle !important; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.text-nowrap { white-space: nowrap !important; }
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.bg-light { background-color: #f8f9fa !important; }
.text-dark { color: #212529 !important; }
.btn-outline-secondary { color: #6c757d; border-color: #6c757d; background-color: transparent; }
.btn-outline-secondary:hover { color: #fff; background-color: #6c757d; border-color: #6c757d; }

/* ============================================================
   Reseller Panel — Shell, Sidebar, Layout
   ============================================================ */
.reseller-shell { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; background: linear-gradient(to right, #0f172a 260px, #f1f5f9 260px); }
.reseller-sidebar { background: #0f172a; color: #fff; padding: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1050; display: flex; flex-direction: column; }
.reseller-sidebar__top { display: flex; justify-content: space-between; align-items: flex-start; }
.reseller-brand { display: block; text-decoration: none; margin-bottom: 6px; }
.reseller-brand__logo { display: block; height: 32px; width: auto; margin-bottom: 4px; filter: brightness(0) invert(1); }
.reseller-brand span { display: block; color: #f87171; font-size: .7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.reseller-sidebar__profile { display: flex; align-items: center; gap: 12px; padding: 16px 0; margin: 10px 0 6px; border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); }
.reseller-sidebar__avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #EF4444, #DC2626); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); }
.reseller-sidebar__avatar img { width: 100%; height: 100%; object-fit: cover; }
.reseller-sidebar__avatar span { color: #fff; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; }
.reseller-sidebar__profile-info { min-width: 0; }
.reseller-sidebar__profile-info strong { display: block; color: #f1f5f9; font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reseller-sidebar__profile-info small { display: block; color: #94a3b8; font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reseller-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; flex: 1; }
.reseller-nav a { color: #94a3b8; text-decoration: none; border-radius: 10px; padding: 10px 12px; font-size: 0.88rem; font-weight: 500; display: flex; align-items: center; gap: 10px; transition: all 0.15s ease; border-left: 3px solid transparent; }
.reseller-nav a:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
.reseller-nav a.is-active { background: rgba(220,38,38,.12); color: #f87171; font-weight: 600; border-left-color: #DC2626; }
.reseller-nav a svg { width: 20px; height: 20px; flex-shrink: 0; opacity: 0.7; }
.reseller-nav a.is-active svg { opacity: 1; }
.reseller-nav__spacer { flex: 1; }
.reseller-main { padding: 32px; min-width: 0; }

/* Reseller — Top bar (mobile only) */
.reseller-topbar { display: none; }

/* Reseller — Bottom Nav (mobile only) */
.reseller-bottomnav { display: none; }

/* ============================================================
   Reseller — Page Header
   ============================================================ */
.reseller-page-header { margin: 0 0 24px; }
.reseller-page-header h1 { margin: 0 0 4px; font-size: 1.5rem; font-weight: 700; color: #0f172a; letter-spacing: -0.02em; }
.reseller-page-header__sub { margin: 0; color: #64748b; font-size: 0.88rem; }
.reseller-auth-card h1 { margin: 0 0 18px; }

/* ============================================================
   Reseller — Cards & Stat Blocks
   ============================================================ */
.reseller-auth-card, .reseller-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 4px 16px rgba(15,23,42,.03); padding: 24px; }
.reseller-auth-card__logo { text-align: center; margin-bottom: 18px; }
.reseller-auth-card__logo img { height: 36px; width: auto; }
.reseller-auth-card { max-width: 460px; margin: 8vh auto; }
.reseller-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.reseller-card__head h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #0f172a; }
.reseller-card__link { color: #DC2626; text-decoration: none; font-size: 0.82rem; font-weight: 600; }
.reseller-card__link:hover { text-decoration: underline; }
.reseller-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; height: 100%; border-left: 4px solid #e2e8f0; position: relative; transition: box-shadow 0.15s ease; }
.reseller-stat:hover { box-shadow: 0 4px 12px rgba(15,23,42,0.06); }
.reseller-stat--balance { border-left-color: #10b981; }
.reseller-stat--commission { border-left-color: #DC2626; }
.reseller-stat--credited { border-left-color: #059669; }
.reseller-stat--pending { border-left-color: #f59e0b; }
.reseller-stat span { display: block; color: #64748b; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.reseller-stat strong { color: #0f172a; font-size: 1.35rem; font-weight: 700; display: block; }
.reseller-stat small { display: block; color: #64748b; font-size: 0.78rem; margin-top: 6px; }
.reseller-stats, .reseller-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.reseller-grid { grid-template-columns: 2fr 1fr; }
.reseller-ledger-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.reseller-ledger-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.reseller-ledger-list li:last-child { border-bottom: 0; }
.reseller-ledger-list__type { color: #64748b; font-size: 0.82rem; margin-left: 8px; text-transform: capitalize; }
.reseller-section-title { margin: 28px 0 6px; font-size: 1rem; font-weight: 700; color: #0f172a; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
.attention-badge--reseller { background: #FEF2F2; color: #991B1B; border-color: #FECACA; }

/* ============================================================
   Reseller — Mobile (Bottom nav + responsive)
   ============================================================ */
@media (max-width: 991.98px) {
    .reseller-shell { grid-template-columns: 1fr; background: #f1f5f9; align-content: start; }
    .reseller-sidebar { display: none; }
    .reseller-topbar {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0f172a;
        padding: 8px 16px;
        position: sticky;
        top: 0;
        z-index: 1050;
    }
    .reseller-topbar__logo { height: 22px; width: auto; filter: brightness(0) invert(1); }
    .reseller-main { padding: 16px; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

    .reseller-bottomnav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1060;
        background: #0f172a;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding: 6px 0;
        padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        justify-content: space-around;
        align-items: stretch;
    }
    .reseller-bottomnav__item {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px;
        flex: 1;
        text-decoration: none;
        color: #64748b;
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        padding: 6px 2px;
        border-radius: 8px;
        transition: color 0.15s;
        position: relative;
    }
    .reseller-bottomnav__item svg { width: 22px; height: 22px; flex-shrink: 0; }
    .reseller-bottomnav__item span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; text-align: center; }
    .reseller-bottomnav__item.is-active { color: #f87171; }
    .reseller-bottomnav__item.is-active::before {
        content: '';
        position: absolute;
        top: 0; left: 50%;
        transform: translateX(-50%);
        width: 24px; height: 3px;
        background: #DC2626;
        border-radius: 0 0 3px 3px;
    }
    .reseller-stats { grid-template-columns: repeat(2, 1fr); }
    .reseller-grid { grid-template-columns: 1fr; }
    .reseller-stat strong { font-size: 1.15rem; }
    .reseller-stat { padding: 14px; }
    .reseller-page-header { margin-bottom: 16px; }
    .reseller-page-header h1 { font-size: 1.25rem; }
    .reseller-card { padding: 18px; border-radius: 14px; }
    .reseller-link-hero__head { flex-direction: column; }
    .reseller-link-hero__stats { width: 100%; justify-content: space-between; }
    .reseller-link-hero__copy { flex-direction: column; }
    .reseller-payout-cta { flex-direction: column; align-items: stretch; text-align: center; }
    .reseller-balance-card__value { font-size: 1.6rem; }
}
@media (max-width: 575.98px) {
    .reseller-stats { grid-template-columns: 1fr; }
    .reseller-main { padding: 12px; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .reseller-stat { padding: 12px; }
    .reseller-card { padding: 14px; border-radius: 12px; }
    .reseller-page-header { margin-bottom: 12px; }
    .reseller-page-header h1 { font-size: 1.15rem; }
    .reseller-page-header__sub { font-size: 0.8rem; }
    .reseller-link-hero { padding: 16px; border-radius: 14px; }
    .reseller-link-hero h2 { font-size: 1rem; }
    .reseller-link-hero__stats strong { font-size: 1.1rem; }
    .reseller-link-hero__copy input { font-size: 0.82rem; padding: 10px 12px; }
    .reseller-balance-card__value { font-size: 1.3rem; }
    .reseller-avatar-dropzone { padding: 14px; gap: 12px; }
    .reseller-social-section { padding: 14px; }
    .reseller-fee-preview { padding: 10px 12px; }
    .reseller-payout-empty { flex-direction: column; }
}

/* ============================================================
   Admin Resellers — Tabs, KPI tiles, badges, dense tables
   ============================================================ */
.admin-reseller-tabs {
    display: flex;
    gap: 4px;
    background: var(--gray-100, #F3F4F6);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.admin-reseller-tabs__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-500, #6B7280);
    cursor: pointer;
    transition: all 0.15s ease;
}
.admin-reseller-tabs__btn:hover { color: var(--gray-700, #374151); background: rgba(255,255,255,0.5); }
.admin-reseller-tabs__btn.is-active {
    background: #fff;
    color: var(--gray-900, #111827);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.admin-reseller-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--gray-200, #E5E7EB);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gray-600, #4B5563);
}
.admin-reseller-tabs__btn.is-active .admin-reseller-tabs__count {
    background: var(--primary-100, #FEE2E2);
    color: var(--primary-dark, #B91C1C);
}
.admin-reseller-tabs__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--warning-light, #FEF3C7);
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 700;
}
.admin-reseller-tab-panel { display: none; }
.admin-reseller-tab-panel.is-active { display: block; }

.admin-page--resellers .admin-page-header,
.admin-page--reseller-edit .admin-page-header {
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.admin-page-header-stack { display: flex; flex-direction: column; gap: 0.25rem; }
.admin-page-meta { color: var(--gray-500); font-size: 0.85rem; }
.admin-page-meta a { color: inherit; text-decoration: none; border-bottom: 1px dashed var(--gray-300); }
.admin-page-meta a:hover { color: var(--primary); border-bottom-color: var(--primary); }

.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.admin-kpi {
    background: #fff;
    border: 1px solid var(--gray-100);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 96px;
}
.admin-kpi-label { color: var(--gray-500); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.admin-kpi-value { color: var(--gray-900); font-size: 1.55rem; font-weight: 700; line-height: 1.1; }
.admin-kpi-meta { color: var(--gray-500); font-size: 0.78rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.admin-kpi-meta--success { color: #047857; font-weight: 600; }
.admin-kpi-meta--warning { color: #b45309; font-weight: 600; }
.admin-kpi-pill {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.18rem 0.5rem; border-radius: 999px; font-weight: 600; font-size: 0.72rem;
    background: var(--gray-100); color: var(--gray-700);
}
.admin-kpi-pill--active { background: #dcfce7; color: #166534; }
.admin-kpi-pill--warning { background: #fef3c7; color: #92400e; }
.admin-kpi-pill--danger { background: #fee2e2; color: #991b1b; }

.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.55rem; border-radius: 999px; font-weight: 600; font-size: 0.74rem;
    background: var(--gray-100); color: var(--gray-700); line-height: 1;
}
.badge-soft { background: var(--gray-100); color: var(--gray-700); }
.badge-success { background: #dcfce7; color: #166534; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-danger { background: #fee2e2; color: #991b1b; }

.text-success { color: #047857; }
.text-danger { color: #b91c1c; }

.admin-cell-stack { display: flex; flex-direction: column; gap: 0.15rem; line-height: 1.3; }
.admin-cell-meta { color: var(--gray-500); font-size: 0.78rem; }
.admin-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace); font-size: 0.82rem; color: var(--gray-700); }

.admin-table-actions { white-space: nowrap; text-align: right; }
.admin-table-actions .action-group { justify-content: flex-end; }

.admin-resellers-search {
    max-width: 320px;
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}

.admin-table--resellers th,
.admin-table--resellers td,
.admin-table--reseller-orders th,
.admin-table--reseller-orders td,
.admin-table--reseller-orders-edit th,
.admin-table--reseller-orders-edit td {
    vertical-align: middle;
}
.admin-table--reseller-orders-edit .admin-row-edit > td { background: #f8fafc; padding: 1rem 1.25rem; }
.admin-row-edit-form { background: #fff; border: 1px solid var(--gray-100); border-radius: 12px; padding: 1rem 1.1rem; }
.admin-row-edit-form .form-row { margin-bottom: 0.75rem; }

.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }

.admin-balance-display {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
}

.empty-state {
    color: var(--gray-500);
    font-size: 0.9rem;
    padding: 1.25rem 0;
    text-align: center;
}

@media (max-width: 1100px) {
    .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .admin-kpi-grid { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: 1fr; }
    .admin-table-actions { text-align: left; }
    .admin-table-actions .action-group { justify-content: flex-start; }
    .admin-resellers-search { max-width: 100%; }
    .admin-page--resellers .admin-card-header,
    .admin-page--reseller-edit .admin-card-header { flex-direction: column; align-items: stretch; gap: 0.5rem; }
}

/* ============================================================
   Reseller — Link Hero, Payout, Balance
   ============================================================ */
.reseller-page .settings-form { max-width: none; }
.reseller-page .form-group { margin-bottom: 0.85rem; }
.reseller-page .form-group label { margin-bottom: 0.4rem; }
/* ============================================================
   Reseller — Order list & detail
   ============================================================ */
.reseller-order-list { display: grid; gap: 8px; }
.reseller-order-row {
    display: grid;
    grid-template-columns: 1fr auto auto 24px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.reseller-order-row:hover { border-color: #FECACA; box-shadow: 0 2px 8px rgba(220,38,38,0.06); }
.reseller-order-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reseller-order-row__code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.82rem; font-weight: 600; color: #0f172a; }
.reseller-order-row__platform { font-size: 0.75rem; color: #64748b; }
.reseller-order-row__details { display: flex; align-items: center; gap: 8px; }
.reseller-order-row__qty { font-size: 0.82rem; font-weight: 600; color: #334155; }
.reseller-order-row__commission { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.reseller-order-row__commission strong { font-size: 0.88rem; color: #0f172a; }
.reseller-order-row__cs { font-size: 0.68rem; font-weight: 600; }
.reseller-cs--credited { color: #059669; }
.reseller-cs--pending { color: #d97706; }
.reseller-cs--reversed { color: #dc2626; }
.reseller-cs-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.reseller-cs-badge.reseller-cs--credited { background: #d1fae5; color: #065f46; }
.reseller-cs-badge.reseller-cs--pending { background: #fef3c7; color: #92400e; }
.reseller-cs-badge.reseller-cs--reversed { background: #fee2e2; color: #991b1b; }
.reseller-order-row__arrow { font-size: 1.4rem; color: #cbd5e1; font-weight: 300; line-height: 1; }
.reseller-empty-card { text-align: center; padding: 32px 16px; }

.reseller-back-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 600; color: #64748b; text-decoration: none; margin-bottom: 4px; }
.reseller-back-link:hover { color: #DC2626; }

.reseller-order-detail {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.reseller-order-detail__status-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #f1f5f9; }
.reseller-order-detail__date { font-size: 0.78rem; color: #94a3b8; }
.reseller-order-detail__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.reseller-order-detail__field { display: flex; flex-direction: column; gap: 4px; }
.reseller-order-detail__field--full { margin-bottom: 16px; }
.reseller-order-detail__label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.reseller-order-detail__value { font-size: 0.92rem; font-weight: 600; color: #0f172a; }
.reseller-order-detail__value--commission { font-size: 1.1rem; font-weight: 700; color: #059669; }
.reseller-order-detail__link { font-size: 0.82rem; color: #DC2626; word-break: break-all; text-decoration: none; }
.reseller-order-detail__link:hover { text-decoration: underline; }

.reseller-order-detail__progress { padding-top: 16px; border-top: 1px solid #f1f5f9; }
.reseller-order-detail__progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.reseller-order-detail__progress-header strong { font-size: 0.92rem; color: #0f172a; }
.reseller-order-detail__progress-meta { font-size: 0.75rem; color: #64748b; margin-top: 6px; display: block; }
.reseller-progress-bar { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.reseller-progress-bar__fill { height: 100%; background: linear-gradient(90deg, #EF4444, #DC2626); border-radius: 999px; transition: width 0.6s ease; min-width: 0; }

@media (max-width: 575.98px) {
    .reseller-order-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .reseller-order-row__details { justify-content: flex-end; }
    .reseller-order-row__commission { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; text-align: left; }
    .reseller-order-row__arrow { display: none; }
    .reseller-order-detail__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.reseller-payout-form-card h2 { margin-top: 0; font-size: 1.05rem; padding-bottom: 12px; border-bottom: 1px solid #f1f5f9; }
.reseller-history-card { margin-top: 0; }

.reseller-link-hero {
    background: linear-gradient(135deg, #FEF2F2 0%, #ecfdf5 100%);
    border: 1px solid #FECACA;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.05);
}
.reseller-link-hero__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.reseller-link-hero h2 { margin: 0 0 2px; font-size: 0.92rem; color: #0f172a; font-weight: 700; }
.reseller-link-hero__sub { margin: 0; color: #475569; font-size: 0.78rem; }
.reseller-link-hero__stats { display: flex; gap: 10px; }
.reseller-link-hero__stats > div { text-align: center; background: rgba(255,255,255,0.7); border: 1px solid rgba(254,202,202,0.5); border-radius: 8px; padding: 4px 12px; }
.reseller-link-hero__stats strong { display: block; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.reseller-link-hero__stats span { display: block; font-size: 0.65rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.reseller-link-hero__copy { display: flex; gap: 8px; align-items: stretch; }
.reseller-link-hero__copy input {
    flex: 1; background: #fff; border: 1px solid #FECACA; border-radius: 8px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    padding: 8px 12px; font-size: 0.82rem; color: #1e293b;
}
.reseller-link-hero__hint { margin: 6px 0 0; color: #64748b; font-size: 0.75rem; }

/* Reseller — Avatar dropzone */
.reseller-avatar-dropzone {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border: 2px dashed #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    margin-bottom: 6px;
    transition: border-color 0.2s, background 0.2s;
    cursor: default;
}
.reseller-avatar-dropzone.is-dragover {
    border-color: #DC2626;
    background: #FEF2F2;
}
.reseller-avatar-dropzone__preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid #e2e8f0;
}
.reseller-avatar-dropzone__preview img { width: 100%; height: 100%; object-fit: cover; }
.reseller-avatar-dropzone__initials { font-size: 1.15rem; font-weight: 800; color: #DC2626; letter-spacing: 0.04em; }
.reseller-avatar-dropzone__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reseller-avatar-dropzone__info strong { font-size: 0.95rem; color: #0f172a; }
.reseller-avatar-dropzone__info span { font-size: 0.82rem; color: #64748b; }
.reseller-avatar-dropzone__btn {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #DC2626;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    align-self: flex-start;
}
.reseller-avatar-dropzone__btn:hover { background: #DC2626; color: #fff; border-color: #DC2626; }

/* Reseller — Social media inputs */
.reseller-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 0.72rem; font-weight: 800; margin-right: 4px; vertical-align: middle; }
.reseller-social-icon[data-social="facebook"] { background: #1877f2; color: #fff; }
.reseller-social-icon[data-social="instagram"] { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.reseller-social-icon[data-social="tiktok"] { background: #010101; color: #fff; }
.reseller-social-icon[data-social="youtube"] { background: #ff0000; color: #fff; }
.reseller-social-icon[data-social="website"] { background: #475569; color: #fff; }

/* Reseller — Profile header (removed, replaced by dropzone) */

/* Reseller — Social section card */
.reseller-social-section { background: #fafbfc; border: 1px solid #f1f5f9; border-radius: 14px; padding: 20px; margin-top: 8px; }
.reseller-social-section .reseller-section-title { margin-top: 0; border-bottom: 0; padding-bottom: 4px; }

/* Admin — Reseller identity (avatar + socials) */
.admin-reseller-identity { display: flex; align-items: center; gap: 10px; }
.admin-reseller-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #FEE2E2, #FECACA); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 2px solid #e2e8f0; }
.admin-reseller-avatar img { width: 100%; height: 100%; object-fit: cover; }
.admin-reseller-avatar span { font-size: 0.65rem; font-weight: 700; color: #DC2626; letter-spacing: 0.04em; }
.admin-reseller-socials { display: flex; gap: 4px; margin-top: 2px; }
.admin-reseller-socials a { display: inline-block; padding: 1px 6px; font-size: 0.65rem; font-weight: 700; border-radius: 4px; background: #f1f5f9; color: #475569; text-decoration: none; border: 1px solid #e2e8f0; transition: background 0.15s, color 0.15s; }
.admin-reseller-socials a:hover { background: #DC2626; color: #fff; border-color: #DC2626; }

.reseller-payout-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: 14px; }

.reseller-balance-card { display: flex; flex-direction: column; gap: 8px; border-top: 4px solid #10b981; }
.reseller-balance-card__label { color: #64748b; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.reseller-balance-card__value { font-size: 2rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; }
.reseller-balance-card__breakdown { list-style: none; margin: 12px 0 0; padding: 14px 0 0; border-top: 1px solid #f1f5f9; display: grid; gap: 8px; }
.reseller-balance-card__breakdown li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.88rem; }
.reseller-balance-card__breakdown span { color: #64748b; }

.reseller-payout-mini { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.reseller-payout-mini li { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.reseller-payout-status { font-size: 0.75rem; padding: 2px 8px; border-radius: 999px; }
.reseller-payout-status--pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.reseller-payout-status--approved { background: #FEE2E2; color: #991B1B; border: 1px solid #FECACA; }
.reseller-payout-status--paid { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.reseller-payout-status--rejected { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Reseller — Payout history rows */
.reseller-payout-list { display: grid; gap: 0; }
.reseller-payout-row {
    padding: 16px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}
.reseller-payout-row:last-child { border-bottom: 0; }
.reseller-payout-row:hover { background: #f8fafc; }
.reseller-payout-row__main {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
}
.reseller-payout-row__amount { display: flex; flex-direction: column; gap: 2px; }
.reseller-payout-row__gross { font-size: 1rem; font-weight: 700; color: #0f172a; }
.reseller-payout-row__fee { font-size: 0.78rem; color: #dc2626; }
.reseller-payout-row__net { text-align: right; }
.reseller-payout-row__net-label { display: block; font-size: 0.68rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.reseller-payout-row__net strong { font-size: 1.05rem; color: #059669; }
.reseller-payout-row__meta { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.reseller-payout-row__method { font-size: 0.82rem; font-weight: 600; color: #334155; }
.reseller-payout-row__date { font-size: 0.75rem; color: #94a3b8; }
.reseller-payout-row__status { min-width: 72px; text-align: center; }
.reseller-payout-row__note {
    margin-top: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #475569;
    line-height: 1.45;
}
.reseller-payout-row__note span { font-weight: 600; color: #64748b; margin-right: 4px; }
.reseller-payout-row--pending { border-left: 3px solid #f59e0b; }
.reseller-payout-row--approved { border-left: 3px solid #DC2626; }
.reseller-payout-row--paid { border-left: 3px solid #10b981; }
.reseller-payout-row--rejected { border-left: 3px solid #ef4444; }
@media (max-width: 640px) {
    .reseller-payout-row__main {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .reseller-payout-row__net { text-align: left; }
    .reseller-payout-row__meta { text-align: left; }
    .reseller-payout-row__status { text-align: left; }
    .reseller-payout-row { padding: 14px; }
}

/* Reseller — Ledger rows */
.reseller-ledger-rows { display: grid; gap: 0; }
.reseller-ledger-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.12s ease;
}
.reseller-ledger-row:last-child { border-bottom: 0; }
.reseller-ledger-row:hover { background: #f8fafc; }
.reseller-ledger-row__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}
.reseller-ledger-row--credit .reseller-ledger-row__icon { background: #dcfce7; color: #166534; }
.reseller-ledger-row--debit .reseller-ledger-row__icon { background: #fee2e2; color: #991b1b; }
.reseller-ledger-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.reseller-ledger-row__type { font-size: 0.88rem; font-weight: 600; color: #0f172a; text-transform: capitalize; }
.reseller-ledger-row__date { font-size: 0.75rem; color: #94a3b8; }
.reseller-ledger-row__note { font-size: 0.78rem; color: #64748b; margin-top: 2px; }
.reseller-ledger-row__amounts { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.reseller-ledger-row__amounts strong { font-size: 1rem; }
.reseller-ledger-row__balance { font-size: 0.72rem; color: #94a3b8; }
@media (max-width: 480px) {
    .reseller-ledger-row { padding: 12px 14px; gap: 10px; }
    .reseller-ledger-row__icon { width: 28px; height: 28px; font-size: 0.82rem; }
}

/* ============================================================
   Reseller — Unified Tabs (Balance history + Account)
   ============================================================ */
.reseller-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin: 0 0 20px; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 12px; }
.reseller-tabs__btn { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 160px; justify-content: center; padding: 10px 16px; font-size: 0.88rem; font-weight: 600; color: #475569; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: all 0.18s ease; }
.reseller-tabs__btn:hover { color: #1e293b; background: rgba(255, 255, 255, 0.6); }
.reseller-tabs__btn:focus-visible { outline: 2px solid #DC2626; outline-offset: 2px; }
.reseller-tabs__btn.is-active { background: #fff; color: #B91C1C; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(220, 38, 38, 0.08); }
.reseller-tabs__icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.reseller-tabs__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; font-size: 0.72rem; font-weight: 700; border-radius: 8px; background: #e2e8f0; color: #475569; margin-left: 2px; }
.reseller-tabs__btn.is-active .reseller-tabs__count { background: #FEE2E2; color: #B91C1C; }
.reseller-tab-panel { display: none; }
.reseller-tab-panel.is-active { display: block; animation: resellerTabFadeIn 0.18s ease; }
@keyframes resellerTabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
    .reseller-tabs { padding: 4px; }
    .reseller-tabs__btn { padding: 9px 10px; font-size: 0.82rem; flex-basis: 0; }
}

/* Reseller — Payout details card */
.reseller-payout-card { display: grid; gap: 14px; }
.reseller-payout-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.reseller-payout-card__header h2 { margin: 0; }
.reseller-payout-card__updated { font-size: 0.78rem; color: #6b7280; background: #f3f4f6; padding: 4px 10px; border-radius: 999px; }
.reseller-payout-card__updated strong { color: #111827; font-weight: 600; }

.reseller-payout-summary { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; margin: 0 0 18px; background: linear-gradient(135deg, #FEF2F2 0%, #ecfdf5 100%); border: 1px solid #FECACA; border-radius: 14px; }
.reseller-payout-summary__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #DC2626; color: #fff; flex-shrink: 0; }
.reseller-payout-summary__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.reseller-payout-summary__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: #991B1B; font-weight: 700; }
.reseller-payout-summary__lines { display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; color: #0f172a; line-height: 1.45; word-break: break-word; }
.reseller-payout-summary__lines strong { color: #1e3a8a; font-weight: 600; }
.reseller-payout-summary__edit { align-self: flex-start; font-size: 0.85rem; color: #B91C1C; text-decoration: none; padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,0.85); border: 1px solid #FECACA; transition: all 0.15s ease; flex-shrink: 0; }
.reseller-payout-summary__edit:hover { background: #DC2626; color: #fff; border-color: #DC2626; }

.reseller-fee-preview { margin: 14px 0 4px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; display: grid; gap: 6px; }
.reseller-fee-preview__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.88rem; color: #475569; }
.reseller-fee-preview__row strong { font-size: 0.92rem; }
.reseller-fee-preview__row--net { padding-top: 6px; border-top: 1px solid #e2e8f0; }
.reseller-fee-preview__row--net span { font-weight: 600; color: #0f172a; }
.reseller-fee-preview__row--net strong { color: #16a34a; font-size: 1rem; }

.reseller-payout-warn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin: 0 0 14px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; color: #92400e; font-size: 0.9rem; line-height: 1.45; }
.reseller-payout-warn[hidden] { display: none !important; }
.reseller-payout-warn a { color: #b45309; font-weight: 600; text-decoration: underline; }
.reseller-payout-warn a:hover { color: #92400e; }

.reseller-payout-empty { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px dashed #fbbf24; border-radius: 14px; }
.reseller-payout-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #f59e0b; color: #fff; flex-shrink: 0; }
.reseller-payout-empty p { margin: 0 0 12px; color: #78350f; font-size: 0.95rem; line-height: 1.5; }
.reseller-payout-empty .btn { margin: 0; }

@media (max-width: 540px) {
  .reseller-payout-summary { flex-direction: column; align-items: stretch; }
  .reseller-payout-summary__edit { align-self: flex-end; }
}

.font-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.text-muted-sm { color: #64748b; font-size: 0.85rem; }

/* Admin payout tools */
.admin-card--reseller-link { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; padding:18px 22px; }
.admin-card--reseller-link .admin-card-header { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.admin-link-copy { display:flex; gap:8px; align-items:stretch; }
.admin-link-copy input { flex:1; }
.admin-link-copy--inline input { font-size:0.78rem; padding:0.35rem 0.55rem; min-width: 220px; }

/* Admin — Payout item cards (reseller edit page) */
.admin-payout-cards { display: grid; gap: 12px; }
.admin-payout-item {
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 12px;
    padding: 16px;
    background: #fff;
    border-left: 4px solid var(--gray-300, #D1D5DB);
}
.admin-payout-item--pending { border-left-color: var(--gray-400, #9CA3AF); }
.admin-payout-item--approved { border-left-color: var(--warning, #F59E0B); }
.admin-payout-item--paid { border-left-color: var(--success, #10B981); }
.admin-payout-item--rejected { border-left-color: var(--danger, #EF4444); }
.admin-payout-item__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.admin-payout-item__amount { font-size: 1.1rem; font-weight: 700; color: var(--gray-900, #111827); }
.admin-payout-item__fee { display: block; font-size: 0.75rem; color: var(--gray-500, #6B7280); margin-top: 2px; }
.admin-payout-item__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--gray-600, #4B5563); margin-bottom: 8px; }
.admin-payout-item__meta strong { font-weight: 600; }
.admin-payout-item__details { font-size: 0.8rem; color: var(--gray-600, #4B5563); margin-bottom: 8px; }
.admin-payout-item__details code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--gray-50, #F9FAFB); padding: 2px 6px; border-radius: 4px; font-size: 0.78rem; word-break: break-all; white-space: normal; }
.admin-payout-item__note { font-size: 0.8rem; color: var(--gray-500, #6B7280); padding: 8px 10px; background: var(--gray-50, #F9FAFB); border-radius: 8px; margin-bottom: 8px; }
.admin-payout-item__actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--gray-100, #F3F4F6);
}
.admin-payout-action-form {
    display: flex;
    gap: 6px;
    align-items: center;
}
.admin-payout-action-form .form-control-sm { flex: 1; min-width: 0; }
.admin-payout-action-form .btn { white-space: nowrap; flex-shrink: 0; }
.admin-row-highlight { animation: adminRowFlash 1.6s ease 1; }
.admin-payout-item.admin-row-highlight { animation: adminRowFlash 1.6s ease 1; }
@keyframes adminRowFlash {
    0% { background:#fef9c3; }
    100% { background: transparent; }
}

/* ============================================================
   Reseller tier card — bandă profesionistă cu KPI strip
   ============================================================ */
.reseller-tier-card {
    --tier-color: #b45309;
    --tier-color-soft: color-mix(in srgb, var(--tier-color) 8%, #fff 92%);
    position: relative;
    margin: 0 0 22px;
    padding: 0;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 14px -10px rgba(15, 23, 42, 0.18);
    overflow: hidden;
    isolation: isolate;
}
.reseller-tier-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--tier-color-soft), transparent 38%);
    z-index: 0;
}
.reseller-tier-card__strip {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr minmax(110px, auto) minmax(120px, auto) auto;
    align-items: stretch;
    gap: 0;
}
.reseller-tier-card__cell {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    border-right: 1px solid #eef2f7;
}
.reseller-tier-card__cell:last-child { border-right: 0; }
.reseller-tier-card__cell-label {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
.reseller-tier-card__cell-value {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Cell 1 — tier badge */
.reseller-tier-card__cell--tier {
    background: linear-gradient(135deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 80%, #000 20%));
    color: #fff;
    border-right: 0;
    padding: 16px 22px;
    gap: 6px;
    position: relative;
    overflow: hidden;
}
.reseller-tier-card__cell--tier::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 0;
    bottom: 0;
    width: 24px;
    background: inherit;
    transform: skewX(-12deg);
    z-index: 0;
}
.reseller-tier-card__cell--tier > * { position: relative; z-index: 1; }
.reseller-tier-card__cell--tier .reseller-tier-card__cell-label {
    color: rgba(255, 255, 255, 0.78);
}
.reseller-tier-card__cell--tier .reseller-tier-card__cell-value {
    color: #fff;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    letter-spacing: 0.01em;
}
.reseller-tier-card__crown {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.78rem;
    line-height: 1;
}

/* Cell 2 — progress */
.reseller-tier-card__cell--progress { gap: 6px; }
.reseller-tier-card__progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: #475569;
    font-size: 0.78rem;
}
.reseller-tier-card__progress-meta strong {
    color: #0f172a;
    font-weight: 700;
    font-size: 0.85rem;
}
.reseller-tier-card__progress-bar {
    height: 8px;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.reseller-tier-card__progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 60%, #f59e0b 40%));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.22,.9,.36,1);
}
.reseller-tier-card__min-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #0f172a;
    align-self: flex-start;
}
.reseller-tier-card__min-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tier-color);
}

/* Cell 3 — comision lifetime */
.reseller-tier-card__cell--earned { text-align: right; }
.reseller-tier-card__cell--earned .reseller-tier-card__cell-value {
    font-size: 1.1rem;
    color: var(--tier-color);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Cell 4 — toggle */
.reseller-tier-card__cell--toggle {
    padding: 10px 14px;
    border-right: 0;
}
.reseller-tier-card__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 7px 12px;
    border-radius: 10px;
    color: #334155;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.reseller-tier-card__toggle:hover {
    border-color: var(--tier-color);
    color: var(--tier-color);
}
.reseller-tier-card__toggle::after {
    content: "\25BE";
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.reseller-tier-card__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.reseller-tier-card__max {
    margin: 0;
    color: var(--tier-color);
    font-weight: 700;
    font-size: 0.85rem;
}

.reseller-tier-card__list {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 14px 18px 16px;
    border-top: 1px solid #eef2f7;
    background: #fafbfc;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.reseller-tier-card__list[hidden] { display: none; }
.reseller-tier-card__list li {
    --tier-row-color: #b45309;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 4px 10px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    border-left: 3px solid var(--tier-row-color);
    transition: all 0.15s ease;
}
.reseller-tier-card__list li.is-current {
    background: color-mix(in srgb, var(--tier-row-color) 8%, #fff 92%);
    border-color: var(--tier-row-color);
    box-shadow: 0 4px 12px -8px var(--tier-row-color);
}
.reseller-tier-card__list-name {
    color: var(--tier-row-color);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}
.reseller-tier-card__list-fee {
    color: #dc2626;
    font-weight: 600;
    font-size: 0.78rem;
}
.reseller-tier-card__list li.is-current .reseller-tier-card__list-fee {
    color: #b91c1c;
    font-weight: 700;
}
.reseller-tier-card__list-min {
    color: #0f172a;
    font-weight: 700;
    font-size: 0.78rem;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 999px;
}
.reseller-tier-card__list li.is-current .reseller-tier-card__list-min {
    background: var(--tier-row-color);
    color: #fff;
}
.reseller-tier-card__list-thresh {
    grid-column: 1 / -1;
    color: #64748b;
    font-size: 0.72rem;
}

@media (max-width: 991.98px) {
    .admin-payout-item__actions { grid-template-columns: 1fr; }
    .admin-payout-action-form { flex-direction: column; }
    .admin-payout-action-form .form-control-sm { width: 100%; }
}
@media (max-width: 900px) {
    .reseller-tier-card__strip {
        grid-template-columns: 1fr 1fr 1fr;
    }
    .reseller-tier-card__cell {
        border-right: 0;
        border-bottom: 1px solid #eef2f7;
    }
    .reseller-tier-card__cell--tier {
        grid-column: 1 / -1;
    }
    .reseller-tier-card__cell--tier::after { display: none; }
    .reseller-tier-card__cell--progress {
        grid-column: 1 / -1;
    }
    .reseller-tier-card__cell--earned { text-align: left; }
    .reseller-tier-card__cell--toggle {
        border-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .reseller-tier-card__list {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px;
    }
}
@media (max-width: 580px) {
    .reseller-tier-card__strip {
        grid-template-columns: 1fr 1fr;
    }
    .reseller-tier-card__cell--toggle {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
@media (max-width: 480px) {
    .reseller-tier-card__list { grid-template-columns: 1fr; }
}

/* ============================================================
   Reseller auth pages — full-screen split with program pitch
   ============================================================ */
.reseller-auth-shell {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: auto;
    background: radial-gradient(circle at top left, #7f1d1d 0%, #0f172a 55%, #020617 100%);
    color: #e2e8f0;
    padding: 36px 28px 60px;
    -webkit-font-smoothing: antialiased;
}

.reseller-auth-card__tabs {
    display: flex;
    gap: 0;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 20px;
}
.reseller-auth-card__tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 9px;
    text-decoration: none;
    color: #64748b;
    background: transparent;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.reseller-auth-card__tab:hover {
    color: #0f172a;
}
.reseller-auth-card__tab--active,
.reseller-auth-card__tab--active:hover {
    color: #fff;
    background: #DC2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
}

.reseller-auth-shell a.reseller-auth-back,
a.reseller-auth-back:link,
a.reseller-auth-back:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #f8fafc;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 10px;
    padding: 7px 14px;
    font-size: 0.82rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(226, 232, 240, 0.4);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    backdrop-filter: blur(6px);
}
.reseller-auth-shell a.reseller-auth-back:hover,
a.reseller-auth-back:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateX(-2px);
}

.reseller-auth-grid {
    max-width: 1200px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: start;
}

.reseller-auth-pitch { padding: 8px 8px 8px 0; }
.reseller-auth-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.35);
    padding: 6px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.reseller-auth-title {
    font-size: clamp(2rem, 3.4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    color: #f8fafc;
    margin: 0 0 18px;
    letter-spacing: -0.01em;
}
.reseller-auth-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #fecaca;
    margin: 0 0 24px;
    max-width: 560px;
}

.reseller-auth-highlight {
    display: flex;
    align-items: baseline;
    gap: 14px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(220, 38, 38, 0.18));
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 18px;
    padding: 18px 22px;
    margin-bottom: 28px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.45);
}
.reseller-auth-highlight strong {
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #4ade80;
    line-height: 1;
}
.reseller-auth-highlight span { color: #e2e8f0; font-size: 0.98rem; max-width: 320px; }

.reseller-auth-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: grid;
    gap: 14px;
}
.reseller-auth-features li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 14px;
    padding: 14px 16px;
    backdrop-filter: blur(8px);
}
.reseller-auth-features__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(248, 113, 113, 0.18);
    border: 1px solid rgba(248, 113, 113, 0.35);
    display: grid;
    place-items: center;
    color: #fecaca;
    font-size: 1.05rem;
}
.reseller-auth-features__icon::before {
    content: '\2022';
    font-weight: 800;
    color: #fca5a5;
}
.reseller-auth-features__icon[data-icon="percent"]::before { content: '%'; }
.reseller-auth-features__icon[data-icon="link"]::before { content: '\1f517'; font-size: 1rem; }
.reseller-auth-features__icon[data-icon="wallet"]::before { content: '\1f4b3'; font-size: 1rem; }
.reseller-auth-features__icon[data-icon="chart"]::before { content: '\1f4ca'; font-size: 1rem; }

.reseller-auth-features li strong {
    display: block;
    color: #f8fafc;
    margin-bottom: 4px;
    font-size: 0.98rem;
}
.reseller-auth-features li span {
    color: #94a3b8;
    font-size: 0.88rem;
    line-height: 1.5;
}

.reseller-auth-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 22px;
}
.reseller-auth-trust div { text-align: left; }
.reseller-auth-trust strong { display: block; font-size: 1.4rem; color: #f8fafc; line-height: 1.1; }
.reseller-auth-trust span { display: block; font-size: 0.78rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

.reseller-auth-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #0f172a;
    border-radius: 22px;
    padding: 32px;
    box-shadow: 0 30px 80px rgba(8, 15, 35, 0.45);
    max-width: 440px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.45);
}
.reseller-auth-card--register { padding-top: 28px; }
.reseller-auth-card__header { margin-bottom: 22px; }
.reseller-auth-card__header h2 { margin: 0 0 6px; font-size: 1.6rem; color: #0f172a; letter-spacing: -0.01em; }
.reseller-auth-card__header p { margin: 0; color: #64748b; font-size: 0.95rem; }

.reseller-auth-form .form-group { margin-bottom: 14px; }
.reseller-auth-form .form-group label {
    display: block;
    font-size: 0.82rem;
    color: #475569;
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.reseller-auth-form .form-control {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.65);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.reseller-auth-form .form-control:focus {
    border-color: #DC2626;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.18);
    outline: none;
}
.reseller-auth-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reseller-auth-form .btn-block { display: block; width: 100%; padding: 12px 18px; font-size: 1rem; margin-top: 8px; }

.reseller-auth-terms { font-size: 0.8rem; color: #475569; margin: 4px 0 16px; line-height: 1.55; }

.reseller-auth-switch {
    margin: 18px 0 0;
    text-align: center;
    color: #334155;
    font-size: 0.92rem;
}
.reseller-auth-switch a { color: #DC2626; font-weight: 700; text-decoration: none; margin-left: 4px; }
.reseller-auth-switch a:hover { text-decoration: underline; }

.reseller-auth-card__more { display: none; }
.reseller-auth-card__more-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    margin-top: 14px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #DC2626;
    background: rgba(220, 38, 38, 0.06);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.reseller-auth-card__more-btn::after {
    content: ' \2193';
    transition: transform 0.2s ease;
}
.reseller-auth-card__more-btn.is-open::after {
    content: ' \2191';
}
.reseller-auth-card__more-btn:hover {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.35);
}
.reseller-auth-card__more-content {
    margin-top: 16px;
}
.reseller-auth-highlight--inline {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(34, 197, 94, 0.08));
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.reseller-auth-highlight--inline strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: #DC2626;
    line-height: 1;
}
.reseller-auth-highlight--inline span { color: #475569; font-size: 0.85rem; }
.reseller-auth-features--inline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}
.reseller-auth-features--inline li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
}
.reseller-auth-features--inline li strong {
    display: block;
    color: #0f172a;
    font-size: 0.88rem;
    margin-bottom: 2px;
}
.reseller-auth-features--inline li span { color: #64748b; font-size: 0.82rem; line-height: 1.45; }
.reseller-auth-features--inline .reseller-auth-features__icon {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.2);
    color: #DC2626;
}

.reseller-auth-steps {
    list-style: none !important;
    padding: 18px 20px;
    margin: 0 0 22px;
    display: grid;
    gap: 16px;
    background: #FFF5F5;
    border: 1px solid #FECACA;
    border-radius: 14px;
    counter-reset: none;
}
.reseller-auth-steps li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    list-style: none !important;
    padding: 0;
    margin: 0;
}
.reseller-auth-steps li::before,
.reseller-auth-steps li::marker { content: none !important; display: none !important; }
.reseller-auth-steps__num {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(220, 38, 38, 0.35), 0 0 0 4px #ffffff, 0 0 0 5px #FECACA;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.reseller-auth-steps strong {
    display: block;
    color: #0b1220;
    font-size: 0.97rem;
    margin-bottom: 4px;
    font-weight: 700;
}
.reseller-auth-steps span {
    color: #1f2937;
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (max-width: 1024px) {
    .reseller-auth-grid { grid-template-columns: 1fr; gap: 28px; }
    .reseller-auth-card { max-width: 440px; }
    .reseller-auth-pitch { text-align: left; }
}
@media (max-width: 768px) {
    .reseller-auth-shell { padding: 0 0 40px; text-align: center; }
    .reseller-auth-shell > .reseller-auth-back {
        display: inline-flex;
        align-items: center;
        margin: 14px 0 0;
        font-size: 0.82rem;
        padding: 7px 14px;
    }
    .reseller-auth-grid { padding: 24px 16px 0; gap: 24px; }
    .reseller-auth-pitch { display: none; }
    .reseller-auth-card__more { display: block; }
    .reseller-auth-card {
        max-width: 400px;
        border-radius: 18px;
        padding: 24px 20px;
        box-shadow: 0 16px 48px rgba(8, 15, 35, 0.4);
    }
    .reseller-auth-card__logo { margin-bottom: 14px; }
    .reseller-auth-card__tabs { margin-bottom: 16px; }
    .reseller-auth-card__header { margin-bottom: 18px; }
    .reseller-auth-card__header h2 { font-size: 1.4rem; }
    .reseller-auth-form .form-control { padding: 13px 14px; font-size: 1rem; border-radius: 12px; }
    .reseller-auth-form .btn-block { padding: 14px 18px; font-size: 1rem; border-radius: 12px; }
    .reseller-auth-form .form-row { grid-template-columns: 1fr; }
    .reseller-auth-switch { margin-top: 20px; font-size: 0.95rem; }
}
@media (max-width: 640px) {
    .reseller-auth-card { max-width: 360px; padding: 20px 16px; border-radius: 16px; }
    .reseller-auth-card__header h2 { font-size: 1.3rem; }
    .reseller-auth-trust { grid-template-columns: 1fr; }
    .reseller-auth-form .form-row { grid-template-columns: 1fr; }
    .reseller-auth-highlight { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 16px; }
    .reseller-auth-highlight strong { font-size: 2rem; }
    .reseller-auth-features li { flex-direction: row; padding: 12px 14px; }
    .reseller-auth-features__icon { width: 34px; height: 34px; }
    .reseller-auth-title { font-size: 1.8rem; }
    .reseller-auth-steps { padding: 14px 16px; }
    .reseller-auth-steps__num { width: 36px; height: 36px; font-size: 0.82rem; }
}

/* ============================================================
   BLOG — paginare, breadcrumb, ToC, TL;DR, FAQ, related
   (SEO + GEO friendly + UI compact, mobile-first)
   ============================================================ */

/* Reset list semantic pentru grid-ul de articole. */
.blog-grid { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.blog-grid__item { display: flex; }
.blog-grid__item > .blog-card { width: 100%; }

.blog-breadcrumb__list {
    list-style: none; padding: 0; margin: 0 0 0.5rem;
    display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center;
    font-size: 0.74rem; color: var(--gray-500, #6b7280);
    line-height: 1.3;
}
.blog-breadcrumb__list li { display: inline-flex; align-items: center; gap: 0.25rem; }
.blog-breadcrumb__list li + li::before { content: "/"; color: var(--gray-400, #9ca3af); margin-right: 0.15rem; }
.blog-breadcrumb__list a {
    color: var(--gray-600, #4b5563); text-decoration: none;
    font-weight: 500; padding: 1px 3px; border-radius: 5px;
}
.blog-breadcrumb__list a:hover { color: var(--primary, #dc2626); background: rgba(220, 38, 38, 0.06); }
.blog-breadcrumb__current { color: var(--gray-900, #111827); font-weight: 600; }

.blog-index-hero__count {
    display: inline-flex; align-items: center; gap: 0.4rem;
    margin: 0.55rem auto 0; padding: 0.25rem 0.65rem;
    background: rgba(220, 38, 38, 0.08); color: var(--primary, #dc2626);
    border-radius: 999px; font-size: 0.74rem; font-weight: 600;
}

.blog-index-summary {
    margin: 1rem auto 0; max-width: 50rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px; padding: 0.75rem 0.95rem;
}
.blog-index-summary__title {
    margin: 0 0 0.4rem; font-size: 0.7rem; font-weight: 700;
    color: var(--gray-700, #374151); text-transform: uppercase; letter-spacing: 0.05em;
}
.blog-index-summary__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.3rem 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    font-size: 0.82rem; line-height: 1.4; color: var(--gray-700, #374151);
}
.blog-index-summary__list strong { color: var(--gray-900, #111827); }

.blog-list-meta {
    font-size: 0.74rem; color: var(--gray-500, #6b7280);
    margin: 0 0 0.6rem;
}

.blog-card__tag {
    display: inline-flex; align-items: center;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(220, 38, 38, 0.08); color: var(--primary, #dc2626);
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    margin-left: 0.3rem;
}

/* PAGINARE — compact */
.blog-pagination {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 0.35rem;
    margin: 1.4rem 0 0.25rem;
    padding: 0.25rem 0;
}
.blog-pagination__btn {
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.4rem 0.75rem; border-radius: 8px;
    background: #fff; border: 1px solid var(--gray-300, #d1d5db);
    font-size: 0.8rem; font-weight: 600;
    color: var(--gray-700, #374151); text-decoration: none;
    transition: all 0.15s ease;
}
.blog-pagination__btn:hover {
    border-color: var(--primary, #dc2626); color: var(--primary, #dc2626);
    background: #fff;
}
.blog-pagination__btn.is-disabled {
    opacity: 0.4; cursor: not-allowed; pointer-events: none;
    background: #f9fafb;
}
.blog-pagination__pages {
    list-style: none; padding: 0; margin: 0;
    display: inline-flex; align-items: center; gap: 0.2rem;
    flex-wrap: wrap;
}
.blog-pagination__page {
    min-width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 0.4rem; border-radius: 7px;
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    font-size: 0.8rem; font-weight: 600;
    color: var(--gray-700, #374151); text-decoration: none;
    transition: all 0.15s ease;
}
.blog-pagination__page:hover {
    border-color: var(--primary, #dc2626); color: var(--primary, #dc2626);
}
.blog-pagination__page.is-current {
    background: var(--primary, #dc2626); border-color: var(--primary, #dc2626);
    color: #fff; cursor: default;
}
.blog-pagination__ellipsis {
    color: var(--gray-400, #9ca3af); padding: 0 0.15rem; font-weight: 700; font-size: 0.85rem;
}

/* TL;DR — compact */
.blog-tldr {
    margin: 1rem 0;
    background: linear-gradient(180deg, #fff7ed 0%, #fffaf3 100%);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
}
.blog-tldr__title {
    margin: 0 0 0.25rem; font-size: 0.66rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: #b45309;
}
.blog-tldr__content {
    margin: 0; font-size: 0.9rem; line-height: 1.5;
    color: var(--gray-800, #1f2937);
}

/* TOC — compact */
.blog-toc {
    margin: 1rem 0;
    background: #f9fafb;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 9px;
    padding: 0.65rem 0.9rem;
}
.blog-toc__title {
    margin: 0 0 0.4rem; font-size: 0.66rem;
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--gray-600, #4b5563);
}
.blog-toc__list {
    list-style: decimal; padding-left: 1.15rem; margin: 0;
    color: var(--gray-700, #374151);
    font-size: 0.86rem;
}
.blog-toc__item { margin: 0.15rem 0; line-height: 1.4; }
.blog-toc__item--lvl3 { padding-left: 0.7rem; list-style: circle; font-size: 0.82rem; }
.blog-toc__item a {
    color: var(--gray-700, #374151); text-decoration: none; font-weight: 500;
}
.blog-toc__item a:hover { color: var(--primary, #dc2626); text-decoration: underline; }

/* META extins (reading time, updated) */
.blog-article__meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
}
.blog-article__meta-sep { color: var(--gray-400, #9ca3af); }
.blog-article__meta-mod, .blog-article__meta-reading {
    font-size: 0.72rem; color: var(--gray-500, #6b7280);
    text-transform: none; letter-spacing: 0;
}

/* FAQ — compact */
.blog-faq {
    margin: 1.4rem 0 0;
    border-top: 1px solid var(--gray-200, #e5e7eb);
    padding-top: 1rem;
}
.blog-faq__title {
    margin: 0 0 0.6rem; font-size: 1.05rem; font-weight: 800;
    color: var(--gray-900, #111827);
}
.blog-faq__item {
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.4rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.blog-faq__item[open] {
    border-color: var(--primary, #dc2626);
    box-shadow: 0 3px 12px rgba(220, 38, 38, 0.07);
}
.blog-faq__q {
    font-weight: 700; font-size: 0.88rem; line-height: 1.35;
    color: var(--gray-900, #111827);
    cursor: pointer; list-style: none; position: relative; padding-right: 1.2rem;
}
.blog-faq__q::-webkit-details-marker { display: none; }
.blog-faq__q::after {
    content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 1.1rem; color: var(--primary, #dc2626); font-weight: 400;
    transition: transform 0.2s ease;
    line-height: 1;
}
.blog-faq__item[open] .blog-faq__q::after {
    content: "−";
}
.blog-faq__a {
    margin-top: 0.4rem; color: var(--gray-700, #374151); line-height: 1.5;
    font-size: 0.84rem;
}
.blog-faq__a p { margin: 0; }

/* ARTICOLE SIMILARE — compact */
.blog-related {
    margin-top: 1.6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200, #e5e7eb);
}
.blog-related__title {
    margin: 0 0 0.65rem; font-size: 1rem; font-weight: 800;
    color: var(--gray-900, #111827);
}
.blog-related__list {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 0.55rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.blog-related__link {
    display: flex; gap: 0.55rem; align-items: stretch;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    overflow: hidden; text-decoration: none;
    transition: all 0.18s ease;
    height: 100%;
}
.blog-related__link:hover {
    border-color: var(--primary, #dc2626);
    box-shadow: 0 3px 12px rgba(15, 23, 42, 0.07);
    transform: translateY(-1px);
}
.blog-related__media {
    flex: 0 0 76px; min-height: 76px; display: block;
    background: #f3f4f6; overflow: hidden;
}
.blog-related__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.blog-related__body {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.5rem 0.7rem 0.5rem 0.15rem;
    min-width: 0;
}
.blog-related__h {
    font-weight: 700; font-size: 0.84rem; color: var(--gray-900, #111827);
    line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.blog-related__exc {
    font-size: 0.74rem; color: var(--gray-600, #4b5563); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 640px) {
    .blog-pagination { gap: 0.25rem; margin-top: 1rem; }
    .blog-pagination__btn { padding: 0.35rem 0.55rem; font-size: 0.74rem; }
    .blog-pagination__btn--prev, .blog-pagination__btn--next { flex: 1; justify-content: center; min-width: 0; }
    .blog-pagination__pages { order: -1; width: 100%; justify-content: center; margin-bottom: 0.4rem; }
    .blog-pagination__page { min-width: 28px; height: 28px; font-size: 0.74rem; padding: 0 0.3rem; border-radius: 6px; }
    .blog-tldr { margin: 0.85rem 0; padding: 0.55rem 0.7rem; }
    .blog-tldr__content { font-size: 0.84rem; }
    .blog-toc { margin: 0.85rem 0; padding: 0.55rem 0.75rem; }
    .blog-toc__list { font-size: 0.8rem; }
    .blog-faq__title { font-size: 0.96rem; }
    .blog-faq__item { padding: 0.5rem 0.7rem; }
    .blog-faq__q { font-size: 0.84rem; }
    .blog-faq__a { font-size: 0.8rem; }
    .blog-related { margin-top: 1.2rem; padding-top: 0.75rem; }
    .blog-related__title { font-size: 0.94rem; }
    .blog-related__list { grid-template-columns: 1fr; gap: 0.4rem; }
    .blog-related__media { flex: 0 0 68px; min-height: 68px; }
    .blog-related__h { font-size: 0.8rem; }
    .blog-related__exc { font-size: 0.72rem; -webkit-line-clamp: 1; line-clamp: 1; }
    .blog-index-summary { padding: 0.6rem 0.75rem; }
    .blog-index-summary__list { font-size: 0.78rem; }
    .blog-breadcrumb__list { font-size: 0.7rem; }
    .blog-article__meta { font-size: 0.66rem; }
}

@media (max-width: 380px) {
    .blog-pagination__page { min-width: 24px; height: 26px; font-size: 0.7rem; }
    .blog-card__title { font-size: 0.88rem; }
    .blog-card__excerpt { font-size: 0.76rem; }
    .blog-article__title { font-size: 1.08rem; }
    .blog-article__prose { font-size: 0.88rem; }
}