/* ============================================================
   style.css — Sprafo Custom Styles
   Layered on top of Bootstrap 5.
   ============================================================ */

/* ---- Variables ---- */
:root {
    --dl-primary:    #0056b3;
    --dl-primary-dk: #003d80;
    --dl-accent:     #ffc107;
    --dl-bg:         #f8f9fa;
    --dl-text:       #212529;
    --dl-sidebar-w:          260px;
    --dl-sidebar-collapsed-w: 68px;
    --dl-radius:     0.5rem;
    --dl-shadow:     0 2px 12px rgba(0,0,0,.08);
    --dl-transition: 0.2s ease;
    --dl-navbar-h:   72px;
    --z-content:     1;
    --z-sidebar:     10;
    --z-dropdown:    1055;
}

/* ---- Base ---- */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--dl-bg);
    color: var(--dl-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---- RTL Support ---- */
body.rtl {
    font-family: 'Segoe UI', 'Arial', 'Tahoma', sans-serif;
}

body.rtl .me-auto { margin-right: unset !important; margin-left: auto !important; }
body.rtl .ms-auto { margin-left: unset !important; margin-right: auto !important; }
body.rtl .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
body.rtl .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }

/* ---- Navbar ---- */
.navbar-brand {
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.navbar .btn {
    border-radius: 2rem;
    font-size: .875rem;
}

.navbar-nav .nav-link {
    white-space: nowrap;
}

/* ── PRO badge (gold pill in navbar button and dropdown) ─ */
.dl-pro-badge {
    background: linear-gradient(135deg, #f5a623, #e8941a);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .18em .55em;
    border-radius: 999px;
    vertical-align: middle;
    line-height: 1;
}

.dl-pro-star {
    color: #f5a623;
    font-size: .8rem;
    vertical-align: middle;
}

.dl-pro-text {
    color: #e8941a;
    font-size: .8rem;
}

/* ── Premium user dropdown ───────────────────────────── */
.dl-user-dropdown {
    min-width: 260px;
    padding: .4rem 0;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border-radius: var(--dl-radius);
    z-index: var(--z-dropdown);
    pointer-events: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 575.98px) {
    /* Escape Popper.js entirely on small screens so the dropdown is fully
       controlled by viewport anchoring. position:fixed removes it from the
       page flow; transform:none neutralises Popper's inline translate3d();
       left:auto !important neutralises any residual inline left offset. */
    .dl-user-dropdown {
        position: fixed !important;
        transform: none !important;
        top: var(--dl-navbar-h) !important;
        right: .5rem !important;
        left: auto !important;
        width: min(320px, calc(100vw - 1rem));
        max-width: calc(100vw - 1rem);
        min-width: 0;
        max-height: calc(100dvh - var(--dl-navbar-h) - 0.5rem);
        overflow-y: auto;
        padding-bottom: max(.5rem, env(safe-area-inset-bottom));
    }
}

.dl-dropdown-header {
    line-height: 1.4;
}

.dl-user-dropdown .dropdown-item {
    padding: .5rem 1rem;
    font-size: .92rem;
    display: flex;
    align-items: center;
    gap: 0;
}

.dl-user-dropdown .dropdown-item i {
    width: 1.2rem;
    text-align: center;
    margin-inline-end: .55rem;
    flex-shrink: 0;
}

.dl-user-dropdown .dropdown-divider {
    margin: .25rem 0;
}

/* Profile dropdown trigger — prominent hover to reinforce clickability */
.navbar .btn-light.dropdown-toggle {
    transition: box-shadow var(--dl-transition);
}
.navbar .btn-light.dropdown-toggle:hover,
.navbar .btn-light.dropdown-toggle:focus {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Subscribe CTA item in dropdown */
.dl-dropdown-cta {
    color: var(--dl-primary) !important;
    font-weight: 600;
}

.dl-dropdown-cta:hover,
.dl-dropdown-cta:focus {
    background-color: rgba(0, 86, 179, .07) !important;
    color: var(--dl-primary-dk) !important;
}

/* ---- Hero Section ---- */
.hero-section {
    background: linear-gradient(135deg, var(--dl-primary) 0%, var(--dl-primary-dk) 60%, #001a33 100%);
    color: #fff;
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-section h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
}

.hero-section .lead {
    font-size: clamp(1rem, 2vw, 1.2rem);
    opacity: .88;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 2rem;
    padding: .35rem 1rem;
    font-size: .85rem;
    margin-bottom: 1.5rem;
    letter-spacing: .03em;
}

/* ---- Feature Cards ---- */
.feature-card {
    border: none;
    border-radius: var(--dl-radius);
    box-shadow: var(--dl-shadow);
    transition: transform var(--dl-transition), box-shadow var(--dl-transition);
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

.feature-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* ---- Level Cards ---- */
.level-card {
    border: 2px solid #e9ecef;
    border-radius: var(--dl-radius);
    transition: all 0.25s ease;
    cursor: pointer;
    overflow: hidden;
}

.level-card:hover {
    border-color: var(--dl-primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.level-badge {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 2rem;
    padding: .25rem .75rem;
}

/* ── Per-Level Accent Colors ─────────────────────────────── */
/* Each class sets two custom properties consumed by          */
/* .level-icon-box and .btn-level. Fallbacks keep blue.       */
.level-a1 { --level-color: #198754; --level-color-soft: #d1e7dd; }
.level-a2 { --level-color: #0d9488; --level-color-soft: #ccf0e8; }
.level-b1 { --level-color: #0d6efd; --level-color-soft: #dbeafe; }
.level-b2 { --level-color: #6f42c1; --level-color-soft: #ede9fe; }
.level-c1 { --level-color: #e07b00; --level-color-soft: #fde8c8; }
.level-c2 { --level-color: #b91c1c; --level-color-soft: #fee2e2; }

/* Top border accent on leveled cards */
.level-card.level-a1, .level-card.level-a2,
.level-card.level-b1, .level-card.level-b2,
.level-card.level-c1, .level-card.level-c2 {
    border-top: 3px solid var(--level-color);
}

/* Hover: use the level accent for the full border */
.level-card.level-a1:hover, .level-card.level-a2:hover,
.level-card.level-b1:hover, .level-card.level-b2:hover,
.level-card.level-c1:hover, .level-card.level-c2:hover {
    border-color: var(--level-color);
}

/* Visual hierarchy: B levels carry a faint resting shadow */
.level-card.level-b1, .level-card.level-b2 {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

/* Visual hierarchy: C levels carry a heavier border-top + deeper resting shadow */
.level-card.level-c1, .level-card.level-c2 {
    border-top-width: 5px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.11);
}

/* Icon box — soft tinted background + accent text */
.level-icon-box {
    background-color: var(--level-color-soft, #dbeafe);
    color: var(--level-color, #0d6efd);
    transition: transform 0.2s ease;
}

/* Icon micro-interaction on card hover */
.level-card:hover .level-icon-box {
    transform: scale(1.08);
}

/* Level-aware outline button */
.btn-level {
    display: inline-flex;
    align-items: center;
    color: var(--level-color, #0d6efd);
    border: 1px solid var(--level-color, #0d6efd);
    background-color: transparent;
    border-radius: var(--bs-border-radius-sm, .25rem);
    padding: .25rem .75rem;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease,
                border-color .15s ease, transform .15s ease;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.btn-level:hover, .btn-level:focus-visible {
    background-color: var(--level-color, #0d6efd);
    border-color: var(--level-color, #0d6efd);
    color: #fff;
    transform: translateY(-1px);
}

.btn-level:active {
    background-color: var(--level-color, #0d6efd);
    border-color: var(--level-color, #0d6efd);
    color: #fff;
    opacity: .9;
    transform: none;
}

/* ── Reading page level + part filter pills ─────────── */
.level-filter {
    display: inline-block;
    border: 1px solid var(--level-color, #0d6efd);
    border-radius: 999px;
    padding: 5px 14px;
    font-weight: 600;
    font-size: .875rem;
    text-decoration: none;
    color: var(--level-color, #0d6efd);
    background-color: transparent;
    transition: background-color .15s ease, color .15s ease;
    cursor: pointer;
}
.level-filter:hover {
    background-color: var(--level-color, #0d6efd);
    color: #fff;
}
.level-filter.active {
    background-color: var(--level-color, #0d6efd);
    border-color: var(--level-color, #0d6efd);
    color: #fff;
}

.part-filter {
    display: inline-block;
    border: 1px solid #dee2e6;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
    color: #495057;
    background-color: transparent;
    transition: all .15s ease;
    cursor: pointer;
}
.part-filter:hover {
    border-color: var(--dl-primary);
    color: var(--dl-primary);
}
.part-filter.active {
    background-color: var(--dl-primary);
    border-color: var(--dl-primary);
    color: #fff;
}

/* ── Modal variant picker ─────────────────────────────── */
.variant-picker {
    border: 1px solid #dee2e6;
    border-radius: var(--dl-radius);
    padding: .75rem 1rem;
    background: #f8f9fa;
}
.variant-picker-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    margin-bottom: .5rem;
}
.variant-picker-item {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid #dee2e6;
    border-radius: calc(var(--dl-radius) - 2px);
    background: #fff;
    color: #212529;
    font-size: .9rem;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
    margin-bottom: .25rem;
}
.variant-picker-item:hover {
    border-color: var(--dl-primary);
    color: var(--dl-primary);
    background-color: rgba(0, 86, 179, .04);
}
.variant-picker-item:last-child {
    margin-bottom: 0;
}

/* ---- Pricing Cards ---- */
.pricing-card {
    border: 2px solid #e9ecef;
    border-radius: var(--dl-radius);
    transition: all 0.25s ease;
    height: 100%;
}

.pricing-card.featured {
    border-color: var(--dl-primary);
    transform: translateY(0) scale(1.02);
    box-shadow: 0 8px 32px rgba(0,86,179,.18);
}

@media (hover: hover) and (pointer: fine) {
    .pricing-card:hover {
        border-color: var(--dl-primary);
        box-shadow: 0 12px 40px rgba(0,86,179,.22);
        transform: translateY(-5px);
    }
    .pricing-card.featured:hover {
        transform: translateY(-6px) scale(1.02);
        box-shadow: 0 24px 48px -16px rgba(0,86,179,.38);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-card.featured {
        transform: scale(1.02) !important;
    }
    .pricing-card.featured:hover {
        transform: scale(1.02) !important;
    }
}

.pricing-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--dl-primary);
    line-height: 1;
}

.pricing-price sup {
    font-size: 1.2rem;
    font-weight: 600;
    vertical-align: super;
}

/* New single-price display for duration-based pricing cards */
.pricing-price-main {
    font-size: 3.4rem;
    font-weight: 800;
    color: var(--dl-primary);
    line-height: 1;
    display: inline-block;
    margin-bottom: .25rem;
}

.currency-sup {
    font-size: 1.3rem;
    font-weight: 700;
    vertical-align: super;
    margin-right: .1em;
}

/* Popular badge ribbon at top of featured card (inside card-body) */
.pricing-popular-ribbon {
    background: var(--dl-primary);
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .45rem 1rem;
    text-align: center;
    border-radius: var(--dl-radius) var(--dl-radius) 0 0;
    /* Negative margins cancel out card-body p-4 (1.5rem) to achieve full-bleed */
    margin: -1.5rem -1.5rem 1.25rem -1.5rem;
}

/* "Best Value" variant — distinct premium gold bar to set the 6-month
   plan apart from the blue "Most Popular" bar on the 3-month plan. */
.pricing-popular-ribbon--value {
    background: linear-gradient(135deg, #b8860b 0%, #d4af37 55%, #b8860b 100%);
    color: #1a1407;
    text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* Marketing subtitle under plan heading */
.pricing-subtitle {
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dl-primary);
    opacity: .75;
    margin-bottom: 1rem;
}

.pricing-features li {
    padding: .3rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
    line-height: 1.45;
}

.pricing-features li:last-child {
    border-bottom: none;
}

/* Accent icon color per feature type */
.pricing-feat-icon {
    font-size: .95rem;
    margin-top: .15rem;
    color: var(--dl-primary, #0056b3);
    opacity: .85;
}

/* Access-duration item: slightly bolder weight */
.pricing-feat-access span {
    font-weight: 600;
}

/* ---- CTA Section ---- */
.cta-section {
    background: linear-gradient(135deg, var(--dl-primary-dk) 0%, var(--dl-primary) 100%);
    color: #fff;
    padding: 4rem 0;
}

/* ---- Auth Pages ---- */
.auth-wrapper {
    min-height: calc(100vh - var(--dl-navbar-h));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    background: linear-gradient(160deg, #f0f4ff 0%, var(--dl-bg) 60%);
}

.auth-card {
    width: 100%;
    max-width: 480px;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
}

/* Header section */
.auth-card-header {
    background: linear-gradient(135deg, var(--dl-primary) 0%, var(--dl-primary-dk) 100%);
    color: #fff;
    padding: 2rem 2rem 1.75rem;
    border-bottom: none;
}

.auth-card-header h4 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.auth-subtitle {
    font-size: .875rem;
    opacity: .82;
}

/* Icon ring in header */
.auth-logo-ring {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    border: 2px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
}

/* Body padding */
.auth-card-body {
    padding: 2rem 2rem 1.5rem;
}

/* Labels */
.auth-label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .45rem;
}

/* Inputs */
.auth-input {
    height: 2.75rem;
    font-size: .95rem;
    border-color: #d1d5db;
    border-radius: .5rem !important;
    padding-left: .875rem;
    transition: border-color .18s, box-shadow .18s;
}

.auth-input:focus {
    border-color: var(--dl-primary);
    box-shadow: 0 0 0 3px rgba(0,86,179,.12);
}

/* Password field wrapper (input + toggle button) */
.auth-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-input-group .auth-input {
    flex: 1;
    padding-right: 3rem;
}

.auth-pw-toggle {
    position: absolute;
    right: .5rem;
    background: none;
    border: none;
    padding: .375rem .5rem;
    color: #6c757d;
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
    transition: color .18s;
    display: flex;
    align-items: center;
    border-radius: .375rem;
}

.auth-pw-toggle:hover { color: var(--dl-primary); }

/* Hint text under password field */
.auth-hint {
    font-size: .78rem;
    color: #9ca3af;
    margin-top: .35rem;
}

/* Submit button */
.auth-submit-btn {
    height: 2.85rem;
    font-size: 1rem;
    border-radius: .5rem;
    letter-spacing: .01em;
    box-shadow: 0 2px 8px rgba(0,86,179,.18);
    transition: background-color .18s, box-shadow .18s, transform .1s;
}

.auth-submit-btn:hover {
    box-shadow: 0 4px 16px rgba(0,86,179,.28);
    transform: translateY(-1px);
}

.auth-submit-btn:active {
    transform: translateY(0);
}

/* Footer */
.auth-card-footer {
    padding: 1.1rem 2rem;
    background: #f9fafb;
    border-top: 1px solid #e9ecef;
}

.auth-footer-link {
    font-size: .875rem;
    font-weight: 600;
    color: var(--dl-primary);
    text-decoration: none;
}

.auth-footer-link:hover {
    text-decoration: underline;
    color: var(--dl-primary-dk);
}

/* RTL: password toggle flips side */
body.rtl .auth-pw-toggle {
    right: auto;
    left: .5rem;
}

body.rtl .auth-input-group .auth-input {
    padding-right: .875rem;
    padding-left: 3rem;
}

/* Mobile */
@media (max-width: 575.98px) {
    .auth-card-header {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .auth-card-body {
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .auth-card-footer {
        padding: 1rem 1.25rem;
    }
}

/* ---- Student Layout ---- */
.student-layout {
    display: flex;
    gap: 0;
    align-items: flex-start;
    /* Fill the viewport so full-width learning pages (sidebar hidden, e.g.
       Lesen Teil 3) don't collapse to content height and leave a large blank
       band above the footer. Sidebar pages are already ~this tall, so this is
       effectively a no-op there. */
    min-height: calc(100dvh - var(--dl-navbar-h));
}

/* Sidebar sticky requirements:
   - parent .student-layout must have align-items:flex-start (not stretch)
   - .sidebar-outer (the sticky wrapper) must not be inside overflow:hidden
   Both conditions are met: .student-layout uses align-items:flex-start and
   .sidebar-outer itself is overflow:visible. */

/* ── Sidebar outer — sticky wrapper; owns width + transition ───── */
.sidebar-outer {
    position: sticky;
    top: var(--dl-navbar-h);
    height: calc(100dvh - var(--dl-navbar-h));
    width: var(--dl-sidebar-w);
    min-width: var(--dl-sidebar-w);
    max-width: var(--dl-sidebar-w);
    flex-shrink: 0;
    overflow: visible;
    transition: max-width .28s ease, min-width .28s ease;
}

/* ── Icon-rail collapsed state ──────────────────────────── */
html.nav-collapsed .sidebar-outer,
.student-layout.nav-collapsed .sidebar-outer {
    max-width: var(--dl-sidebar-collapsed-w);
    min-width: var(--dl-sidebar-collapsed-w);
}

/* ── Sidebar nav — visual container; clips animation overflow ── */
.student-sidebar {
    width: 100%;
    height: 100%;
    background: #fff;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Remove inner padding so icons fill the rail cleanly */
html.nav-collapsed .student-sidebar-inner,
.student-layout.nav-collapsed .student-sidebar-inner {
    padding: 0;
}


/* Hide profile block — too wide/complex for icon rail */
html.nav-collapsed .sidebar-profile-block,
.student-layout.nav-collapsed .sidebar-profile-block {
    display: none;
}

/* Center nav links; remove gap so the icon stands alone */
html.nav-collapsed .sidebar-nav .nav-link,
.student-layout.nav-collapsed .sidebar-nav .nav-link {
    justify-content: center;
    padding:         .65rem 0;
    gap:             0;
}

/* Visually hide labels; keep them for screen readers */
html.nav-collapsed .sidebar-nav .nav-link span,
.student-layout.nav-collapsed .sidebar-nav .nav-link span {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

/* Scale icon slightly for solo display */
html.nav-collapsed .sidebar-nav .nav-link i,
.student-layout.nav-collapsed .sidebar-nav .nav-link i {
    width:     auto;
    font-size: 1.15rem;
}

/* Suppress scrollbar gutter at narrow width; reserve top zone for toggle */
html.nav-collapsed .sidebar-nav-section,
.student-layout.nav-collapsed .sidebar-nav-section {
    scrollbar-gutter: auto;
    padding-top: 2.75rem;
}

/* Hide divider between nav groups */
html.nav-collapsed .sidebar-nav-section hr,
.student-layout.nav-collapsed .sidebar-nav-section hr {
    display: none;
}

/* ── Sidebar toggle — appearance (class, reusable) ─────── */
.sidebar-collapse-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           2.25rem;
    height:          2.25rem;
    padding:         0;
    background:      #fff;
    border:          1px solid #ced4da;
    border-radius:   50%;
    box-shadow:      0 1px 4px rgba(0,0,0,.12);
    cursor:          pointer;
    color:           #343a40;
}

/* ── Sidebar toggle — sidebar-scoped edge positioning (ID-scoped) ── */
#sidebar-collapse-btn {
    position: absolute;
    top:   0;
    right: -1.125rem;
    z-index: 50;
    transition: background .15s ease, box-shadow .15s ease,
                border-color .15s ease, color .15s ease;
}
.sidebar-collapse-btn:hover {
    background:   #f0f4ff;
    border-color: rgba(13,110,253,.4);
    box-shadow:   0 4px 14px rgba(13,110,253,.25);
    color:        var(--dl-primary);
}
.sidebar-collapse-btn:focus-visible {
    outline:        2px solid var(--dl-primary);
    outline-offset: 2px;
}
.sidebar-collapse-btn i {
    font-size:           1rem;
    flex-shrink:         0;
    line-height:         1;
    -webkit-text-stroke: 0.5px currentColor;
    transition:          transform 0.25s ease;
}
html.nav-collapsed .sidebar-collapse-btn i,
.student-layout.nav-collapsed .sidebar-collapse-btn i {
    transform: rotate(180deg);
}

/* RTL: sidebar is on the right — button protrudes from the left edge */
body.rtl #sidebar-collapse-btn {
    right: auto;
    left:  -1.125rem;
}

/* RTL chevron direction */
body.rtl .sidebar-collapse-btn i {
    transform: rotate(180deg);
}
html.nav-collapsed body.rtl .sidebar-collapse-btn i {
    transform: rotate(0deg);
}

body.rtl .student-sidebar {
    border-right: none;
    border-left: 1px solid #e9ecef;
}

.student-sidebar-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 1rem;
}

.sidebar-profile-block {
    background: #fff;
    flex-shrink: 0;
    padding-top: 2.75rem;
}

.sidebar-nav-section {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    will-change: scroll-position;
    padding-bottom: 1rem;
}

.sidebar-nav-section::-webkit-scrollbar {
    width: 4px;
}
.sidebar-nav-section::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-nav-section::-webkit-scrollbar-thumb {
    background: #dee2e6;
    border-radius: 4px;
}
.sidebar-nav-section::-webkit-scrollbar-thumb:hover {
    background: #adb5bd;
}

.student-content {
    flex: 1;
    padding: 2rem;
    min-width: 0;
}

/* ---- Avatar ---- */
.avatar-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dl-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* ---- Sidebar Nav ---- */
.sidebar-nav .nav-link {
    color: #495057;
    border-radius: var(--dl-radius);
    padding: .6rem .875rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
    transition: all var(--dl-transition);
    margin-bottom: .15rem;
}

.sidebar-nav .nav-link i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-nav .nav-link:hover {
    background: #f0f4ff;
    color: var(--dl-primary);
}

.sidebar-nav .nav-link.active {
    background: var(--dl-primary);
    color: #fff;
    font-weight: 600;
}

.sidebar-nav .nav-link.text-danger:hover {
    background: #fff0f0;
    color: #dc3545 !important;
}

/* ---- Stat Cards ---- */
.stat-card {
    border: none;
    border-radius: var(--dl-radius);
    box-shadow: var(--dl-shadow);
    border-left: 4px solid var(--dl-primary);
}

/* ---- Admin Layout ---- */
.admin-body {
    background: #f4f6f9;
}

.admin-wrapper {
    min-height: calc(100vh - 58px - 40px);
}

.admin-sidebar {
    width: var(--dl-sidebar-w);
    min-width: var(--dl-sidebar-w);
    background: #1e2535;
    color: #c4cad8;
    min-height: calc(100vh - 58px - 40px);
    padding: 1.25rem 0;
    flex-shrink: 0;
}

.admin-sidebar-inner {
    padding: 0 .75rem;
}

.admin-sidebar .sidebar-nav .nav-link {
    color: #c4cad8;
    border-radius: var(--dl-radius);
    padding: .55rem .875rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .875rem;
    transition: all var(--dl-transition);
    margin-bottom: .1rem;
}

.admin-sidebar .sidebar-nav .nav-link i {
    width: 1.25rem;
    text-align: center;
}

.admin-sidebar .sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}

.admin-sidebar .sidebar-nav .nav-link.active {
    background: var(--dl-primary);
    color: #fff;
}

.admin-sidebar .sidebar-nav .nav-link.text-danger {
    color: #ff7a7a !important;
}

.admin-sidebar .sidebar-nav .nav-link.text-danger:hover {
    background: rgba(220,53,69,.15);
}

.admin-sidebar hr {
    border-color: rgba(255,255,255,.1);
}

.sidebar-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #7a859a;
    padding: .25rem .875rem;
    margin-top: .5rem;
}

.admin-content {
    flex: 1;
    padding: 2rem 2.5rem;
    min-width: 0;
}

/* ============================================================
   Admin premium navigation — matches the student refresh but
   keeps the admin's dark, gold-accented identity. Presentation
   only; no markup/logic changes required beyond the new card.
   ============================================================ */

/* ── Profile card (dark gradient + amber avatar) ─────────── */
.admin-sidebar-profile {
    padding: 0 .25rem .25rem;
}
.admin-sidebar .sidebar-profile-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #161c2c 0%, #232c44 55%, #2b3a5e 100%);
    background-size: 200% 200%;
    animation: dlCardSheen 16s ease infinite;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1rem;
    padding: 1.15rem 1rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .85);
}
.admin-sidebar .sidebar-profile-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 80% at 80% 0%, rgba(245, 166, 35, .28), transparent 60%);
}
.admin-sidebar .sidebar-profile-card .avatar-circle {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, #f5a623, #e8941a);
    color: #1e2535;
    border: 2px solid rgba(255, 255, 255, .5);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    margin-left: auto;
    margin-right: auto;
}
.admin-sidebar .sidebar-profile-card .profile-name {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    margin: .6rem 0 0;
}
.admin-sidebar .sidebar-profile-card .profile-role {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #f5c97a;
    background: rgba(245, 166, 35, .14);
    border: 1px solid rgba(245, 166, 35, .3);
    border-radius: 999px;
    padding: .15rem .6rem;
}

/* ── Nav items (premium pills, dark theme) ───────────────── */
.admin-sidebar .sidebar-nav .nav-link {
    position: relative;
    border-radius: .7rem;
    padding: .58rem .8rem;
    gap: .7rem;
    margin-bottom: .15rem;
    transition: background-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}
.admin-sidebar .sidebar-nav .nav-link i {
    font-size: 1.02rem;
    width: 1.4rem;
}
.admin-sidebar .sidebar-nav .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    transform: translateX(2px);
}
body.rtl .admin-sidebar .sidebar-nav .nav-link:hover { transform: translateX(-2px); }
.admin-sidebar .sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, #0056b3 0%, #2f6fed 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px -7px rgba(0, 86, 179, .75);
    transform: none;
}
.admin-sidebar .sidebar-nav .nav-link.active i { color: #fff; }
.admin-sidebar .sidebar-nav .nav-link.text-danger:hover {
    background: rgba(220, 53, 69, .15);
    color: #ff7a7a !important;
    transform: translateX(2px);
}
body.rtl .admin-sidebar .sidebar-nav .nav-link.text-danger:hover { transform: translateX(-2px); }

/* ── Top-nav profile trigger ─────────────────────────────── */
.dl-admin-profile-trigger {
    transition: box-shadow var(--dl-transition), border-color var(--dl-transition);
}
.dl-admin-profile-trigger:hover,
.dl-admin-profile-trigger:focus {
    box-shadow: 0 3px 14px rgba(245, 166, 35, .3);
    border-color: var(--dl-accent);
}

/* ── Account dropdown (amber-accented header) ────────────── */
.dl-admin-dropdown .dl-dropdown-header {
    background: linear-gradient(135deg, #161c2c 0%, #2b3a5e 100%);
}
.dl-admin-dropdown .dl-dropdown-avatar {
    background: linear-gradient(135deg, #f5a623, #e8941a);
    color: #1e2535;
}
.dl-admin-role-icon { color: #f5c97a; font-size: .8rem; vertical-align: middle; }
.dl-admin-role-text { color: #f5c97a; font-size: .8rem; }

/* Reduced motion: freeze the card sheen */
@media (prefers-reduced-motion: reduce) {
    .admin-sidebar .sidebar-profile-card { animation: none !important; }
    .admin-sidebar .sidebar-nav .nav-link:hover,
    .admin-sidebar .sidebar-nav .nav-link.text-danger:hover { transform: none; }
}

/* ============================================================
   Lesen / Hören content editors (admin) — premium field UX.
   Scoped to .lc-editor so no other admin page is affected.
   CSS + safe wrapper classes only: it changes nothing about the
   fields, names, routes or saving — only how the editor looks.
   ============================================================ */
/* Fill the available admin-content width. A generous cap keeps line
   lengths readable on ultra-wide monitors and centres the workspace
   instead of leaving a lopsided blank column on the right. */
.lc-editor {
    width: 100%;
    max-width: 1640px;
    margin-inline: auto;
}

/* Roomier part tabs that wrap instead of overflowing on narrow screens. */
.lc-editor .nav-tabs { flex-wrap: wrap; row-gap: .25rem; border-bottom: 2px solid #e6ebf4; }
.lc-editor .nav-tabs .nav-link {
    font-weight: 600;
    padding: .65rem 1.2rem;
    font-size: .95rem;
    color: #51607a;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: .55rem .55rem 0 0;
    margin-bottom: -2px;
}
.lc-editor .nav-tabs .nav-link:hover { background: #f1f5fb; color: #1f2d4d; }
.lc-editor .nav-tabs .nav-link.active {
    color: var(--bs-primary, #0d6efd);
    background: transparent;
    border-bottom-color: var(--bs-primary, #0d6efd);
}

/* ── Compact top filter bars (Level picker / legacy theme filter) ──
   These are utility filters, not content fields, so they stay small
   and visually subordinate to the editor below. */
.lc-editor .lc-filter-bar {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    background: #f6f8fc;
    border: 1px solid #e4e9f2;
    border-radius: .65rem;
    box-shadow: none;
    margin-bottom: 1.1rem !important;
}
.lc-editor .lc-filter-bar .card-body { padding: .4rem .8rem; }
.lc-editor .lc-filter-bar label {
    font-size: .78rem;
    font-weight: 600;
    color: #5b6677;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.lc-editor .lc-filter-bar .form-select {
    padding: .32rem 1.9rem .32rem .65rem;
    font-size: .85rem;
    line-height: 1.4;
    max-width: 240px;
    border-radius: .45rem;
}
.lc-editor .lc-filter-bar .text-muted { font-size: .78rem; }
@media (max-width: 575.98px) {
    .lc-editor .lc-filter-bar { display: flex; width: 100%; }
    .lc-editor .lc-filter-bar .form-select { max-width: 100%; flex: 1 1 auto; }
}

/* Comfortable, readable inputs across the whole editor. */
.lc-editor .form-control,
.lc-editor .form-select {
    padding: .7rem .95rem;
    font-size: 1rem;
    line-height: 1.55;
    border-color: #d4dcea;
    border-radius: .55rem;
}
.lc-editor .form-control:focus,
.lc-editor .form-select:focus {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--bs-primary, #0d6efd) 18%, transparent);
}
.lc-editor .form-control::placeholder { color: #9aa6b8; }
.lc-editor .form-control-sm,
.lc-editor .input-group-sm .form-control,
.lc-editor .input-group-sm .input-group-text {
    padding: .5rem .75rem;
    font-size: .92rem;
    border-radius: .5rem;
}

/* Readable labels and helper text — no cramped spreadsheet feel. */
.lc-editor .form-label {
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .45rem;
    color: #2b3650;
}
.lc-editor .form-text { font-size: .85rem; line-height: 1.45; color: #6b7689; }

/* Larger, easier-to-read text areas (reading passages, cloze, texts). */
.lc-editor textarea.form-control {
    min-height: 12rem;
    line-height: 1.7;
    font-size: 1rem;
    resize: vertical;
}
.lc-editor textarea.form-control[rows="2"] { min-height: 6rem; }
.lc-editor textarea.form-control[rows="3"] { min-height: 7.5rem; }
.lc-editor textarea.form-control[rows="4"] { min-height: 9.5rem; }
.lc-editor textarea.form-control[rows="8"] { min-height: 15rem; }

/* The main editor card: premium frame + roomy body. */
.lc-editor > form > .card {
    border: 1px solid #e1e7f1;
    border-radius: .9rem;
    box-shadow: 0 18px 40px -28px rgba(20, 40, 80, .5);
    overflow: hidden;
}
.lc-editor > form > .card > .card-body { padding: 1.75rem 1.75rem 2rem; }

/* Keep the primary save header visible while scrolling long parts. */
.lc-editor form > .card > .card-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg, #ffffff, #f5f8fd);
    border-bottom: 1px solid #e6ebf4;
    padding: .9rem 1.25rem;
}
.lc-editor form > .card > .card-header .fw-semibold { font-size: 1.05rem; color: #1f2d4d; }

/* Professional save footer. */
.lc-editor form > .card > .card-footer {
    background: #f7f9fd;
    border-top: 1px solid #e6ebf4;
    padding: 1rem 1.25rem;
}
.lc-editor .btn-success {
    padding: .55rem 1.4rem;
    font-weight: 600;
    box-shadow: 0 8px 18px -10px rgba(25, 135, 84, .7);
}

/* Premium section sub-headings (e.g. "Questions", "Statements"). */
.lc-editor .card-body h6 {
    position: relative;
    margin-top: 1.6rem;
    margin-bottom: 1rem;
    padding: 0 0 .55rem .9rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1f2d4d;
    border-bottom: 1px solid #e9edf5;
}
.lc-editor .card-body h6::before {
    content: "";
    position: absolute;
    left: 0;
    top: .12rem;
    bottom: .55rem;
    width: .28rem;
    border-radius: 1rem;
    background: var(--bs-primary, #0d6efd);
}

/* Clearer separation between the per-question / per-text blocks. */
.lc-editor .card.border { border-color: #e2e7ef; }
.lc-editor .card-body > .card.border {
    margin-bottom: 1.25rem;
    background: #fbfcfe;
    border: 1px solid #e6ebf4;
    border-radius: .7rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.lc-editor .card-body > .card.border:hover {
    border-color: #d2dcee;
    box-shadow: 0 10px 26px -20px rgba(20, 40, 80, .45);
}
.lc-editor .card-body > .card.border .card-body { padding: 1.25rem 1.3rem; }

/* Numbered prefix chips in input groups (e.g. "#1"). */
.lc-editor .input-group-text {
    background: #eef3fb;
    border-color: #d4dcea;
    color: #41506b;
    font-weight: 600;
}

/* Roomier vertical rhythm for stacked rows. */
.lc-editor .row.g-2 { row-gap: .85rem; }

/* Comfortable hit area for the "correct answer" radios/checks. */
.lc-editor .form-check-input { width: 1.15rem; height: 1.15rem; }

/* Prevent any horizontal overflow inside grouped inputs on small screens. */
.lc-editor .input-group { flex-wrap: nowrap; }
.lc-editor .input-group .form-control { min-width: 0; }

@media (max-width: 575.98px) {
    .lc-editor > form > .card > .card-body { padding: 1.1rem; }
    .lc-editor .card-body { padding: 1rem; }
    .lc-editor .card-body > .card.border .card-body { padding: 1rem; }
    .lc-editor form > .card > .card-header { position: static; }
    /* Tabs become a horizontal scroll strip rather than wrapping awkwardly. */
    .lc-editor .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .lc-editor .nav-tabs .nav-link { white-space: nowrap; }
}

/* Desktop: sidebar scrolls independently so the active item stays reachable
   after navigation (JS in admin_footer.php centers the active link). */
@media (min-width: 992px) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        max-height: 100vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.admin-footer {
    font-size: .8rem;
}

/* ---- Admin Tables ---- */
.admin-table th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    font-weight: 600;
    border-top: none;
}

/* ---- Page headers ---- */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
}

/* ---- Footer ---- */
.footer {
    background-color: #111827 !important;
}

.footer-link {
    color: #9ca3af;
    font-size: .9rem;
    transition: color var(--dl-transition);
}

.footer-link:hover {
    color: #fff;
}

/* ---- Utilities ---- */
.section-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
}

.section-subtitle {
    font-size: 1.05rem;
    color: #6c757d;
}

.bg-primary-soft {
    background-color: rgba(0,86,179,.08);
}

.text-primary { color: var(--dl-primary) !important; }
.btn-primary  { background-color: var(--dl-primary); border-color: var(--dl-primary); }
.btn-primary:hover { background-color: var(--dl-primary-dk); border-color: var(--dl-primary-dk); }

/* ---- Sidebar overlay (mobile/tablet drawer backdrop) ---- */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 1040;
}
.sidebar-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ---- Mobile sidebar trigger (hamburger) ---- */
.sidebar-mobile-trigger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: .5rem;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.sidebar-mobile-trigger:hover { background: rgba(255,255,255,.1); }
.sidebar-mobile-trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .sidebar-mobile-trigger { display: inline-flex; }

    /* Hide desktop collapse chevron at this breakpoint */
    #sidebar-collapse-btn { display: none !important; }

    /* Student sidebar becomes off-canvas drawer */
    .sidebar-outer {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,.18);
    }
    .sidebar-outer.is-open { transform: translateX(0); }

    /* Neutralize the desktop icon-rail "collapsed" state inside the mobile
       drawer — a user who collapsed on desktop must still get a full,
       readable drawer (not a 68px sliver) on phones/tablets. */
    html.nav-collapsed .sidebar-outer,
    .student-layout.nav-collapsed .sidebar-outer {
        width: 280px;
        min-width: 280px;
        max-width: 280px;
    }
    html.nav-collapsed .sidebar-profile-block,
    .student-layout.nav-collapsed .sidebar-profile-block { display: block; }
    html.nav-collapsed .student-sidebar-inner,
    .student-layout.nav-collapsed .student-sidebar-inner { padding: 0 1rem; }
    html.nav-collapsed .sidebar-nav .nav-link,
    .student-layout.nav-collapsed .sidebar-nav .nav-link {
        justify-content: flex-start;
        padding: .65rem .85rem;
        gap: .75rem;
    }
    html.nav-collapsed .sidebar-nav .nav-link span,
    .student-layout.nav-collapsed .sidebar-nav .nav-link span {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal;
    }
    html.nav-collapsed .sidebar-nav-section,
    .student-layout.nav-collapsed .sidebar-nav-section { padding-top: 1rem; }
    html.nav-collapsed .sidebar-nav-section hr,
    .student-layout.nav-collapsed .sidebar-nav-section hr { display: block; }

    body.rtl .sidebar-outer {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    body.rtl .sidebar-outer.is-open { transform: translateX(0); }

    /* Clip off-canvas RTL sidebar from contributing to scrollWidth */
    body.rtl:not(.sidebar-drawer-open) {
        overflow-x: hidden;
    }

    .student-sidebar { height: 100%; }

    .student-layout { flex-direction: column; }
    /* Ensure content fills full viewport width (prevents align-items:flex-start
       from letting intrinsic content width exceed the viewport) and clip any
       Bootstrap row gutter bleed so document.scrollWidth stays ≤ innerWidth. */
    .student-content { padding: 1.25rem; width: 100%; max-width: 100%; overflow-x: hidden; }

    /* Admin sidebar drawer */
    .admin-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        width: 280px;
        min-width: 280px;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0,0,0,.4);
    }
    .admin-sidebar.is-open { transform: translateX(0); }
    body.rtl .admin-sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }
    body.rtl .admin-sidebar.is-open { transform: translateX(0); }

    .admin-content { padding: 1.25rem; }

    .pricing-card.featured { transform: none; }

    /* Lock body scroll while drawer open */
    body.sidebar-drawer-open { overflow: hidden; }
}


/* ---- Stats Band ---- */
.stats-band {
    background: #fff;
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

.stats-band-dark {
    background: var(--dl-primary-dk);
    border-top: none;
    border-bottom: none;
}

.stats-band-item {
    padding: .5rem 0;
}

.stats-band-number {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dl-primary);
    line-height: 1;
}

.stats-band-dark .stats-band-number {
    color: #ffc107;
}

.stats-band-label {
    font-size: .8rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .25rem;
}

.stats-band-dark .stats-band-label {
    color: rgba(255, 255, 255, .7);
}

/* ---- Quick-start cards (dashboard) ---- */
.quick-start-card {
    border-radius: var(--dl-radius);
    box-shadow: var(--dl-shadow);
    display: flex;
    flex-direction: column;
    transition: transform var(--dl-transition), box-shadow var(--dl-transition);
}

.quick-start-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

/* ---- Info cards (contact, about) ---- */
.info-card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: var(--dl-radius);
    transition: border-color var(--dl-transition), box-shadow var(--dl-transition);
}

.info-card:hover {
    border-color: var(--dl-primary);
    box-shadow: var(--dl-shadow);
}

/* ── Teil 1 keyword highlighting ─────────────────────────── */
mark.kw-hl {
    background-color: #fff3cd;
    color: #664d03;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 600;
}

/* ── German text body: readable line height ──────────────── */
.german-text {
    font-family: Georgia, "Times New Roman", serif;
    line-height: 1.8;
}

/* ── Theme card hover lift ───────────────────────────────── */
.theme-card {
    transition: transform .15s ease, box-shadow .15s ease;
}
.theme-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1) !important;
}

/* ── bg-primary-soft helper (if not already defined) ─────── */
.bg-primary-soft {
    background-color: rgba(13,110,253,.1);
}

/* ══════════════════════════════════════════════════════════
   ── Teil 1 — Interactive selection UI  (t1- prefix)
   ══════════════════════════════════════════════════════════ */

/* ── Title chips in the sticky sidebar panel ────────────── */
.t1-title-chip {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    width: 100%;
    padding: .55rem .75rem;
    background: #fff;
    border: 1.5px solid #dee2e6;
    border-radius: calc(var(--dl-radius) - 2px);
    cursor: pointer;
    text-align: start;
    transition: border-color .15s ease, background-color .15s ease,
                box-shadow .15s ease, transform .1s ease;
    margin-bottom: .35rem;
    font-size: .875rem;
    line-height: 1.4;
    font-family: inherit;
    color: var(--dl-text);
}
.t1-title-chip:last-child { margin-bottom: 0; }

.t1-title-chip:hover {
    border-color: var(--dl-primary);
    background: rgba(0,86,179,.04);
    transform: translateX(-2px);
}
body.rtl .t1-title-chip:hover { transform: translateX(2px); }

.t1-title-chip:focus-visible {
    outline: 2px solid var(--dl-primary);
    outline-offset: 2px;
}

.t1-chip-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #e9ecef;
    color: #495057;
    font-size: .72rem;
    font-weight: 700;
    flex-shrink: 0;
}

.t1-chip-text {
    flex: 1;
    font-weight: 500;
}

.t1-chip-used-badge {
    color: #198754;
    font-size: .85rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* Picked-up (selected, awaiting drop) */
.t1-title-chip-picked {
    border-color: var(--dl-primary) !important;
    background: #dbeafe !important;
    box-shadow: 0 0 0 3px rgba(0,86,179,.18);
}
.t1-title-chip-picked .t1-chip-num {
    background: var(--dl-primary);
    color: #fff;
}

/* Already used / assigned to a slot */
.t1-title-chip-used {
    border-color: #a3cfbb;
    background: #f0faf0;
}
.t1-title-chip-used .t1-chip-num {
    background: #d1e7dd;
    color: #0a3622;
}

/* Dragging state */
.t1-title-chip-dragging { opacity: .45; }

/* ── Drop slot inside each text card ────────────────────── */
.t1-slot {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 2px dashed #adb5bd;
    border-radius: var(--dl-radius);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease,
                box-shadow .15s ease;
    background: #f8f9fa;
    position: relative;
    -webkit-user-select: none;
    user-select: none;
}
.t1-slot:hover {
    border-color: var(--dl-primary);
    background: rgba(0,86,179,.04);
}
.t1-slot:focus-visible {
    outline: 2px solid var(--dl-primary);
    outline-offset: 2px;
}

.t1-slot-placeholder {
    color: #6c757d;
    font-size: .875rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.t1-slot-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--dl-text);
    line-height: 1.35;
    flex: 1;
}

/* Clear ✕ button inside a filled slot */
.t1-slot-clear {
    flex-shrink: 0;
    margin-inline-start: .5rem;
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: .1rem .3rem;
    border-radius: 4px;
    font-size: .85rem;
    line-height: 1;
    transition: color .12s ease;
}
.t1-slot-clear:hover { color: #dc3545; }

/* Active slot — awaiting title pick */
.t1-slot-active {
    border-color: var(--dl-primary) !important;
    border-style: solid !important;
    background: #eef4ff !important;
    box-shadow: 0 0 0 3px rgba(0,86,179,.15);
}
.t1-slot-active .t1-slot-placeholder { color: var(--dl-primary); }

/* Filled slot */
.t1-slot-filled {
    border-style: solid;
    border-color: #6ea8fe;
    background: #f0f6ff;
}

/* Drag-over visual */
.t1-slot-drag-over {
    border-color: var(--dl-primary) !important;
    border-style: solid !important;
    background: #dbeafe !important;
}

/* Panel helper text */
.t1-panel-hint {
    font-size: .78rem;
    color: #6c757d;
    margin-bottom: .65rem;
    line-height: 1.4;
    text-align: start;
}

/* Checked-mode answer badge area tweak */
.t1-answer-display {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

/* ── Mobile touch-target polish ─────────────────────────── */
@media (max-width: 767.98px) {
    .t1-title-chip {
        padding: .7rem .85rem;
        min-height: 2.75rem;
        font-size: .9rem;
    }
    .t1-chip-num {
        min-width: 1.65rem;
        height: 1.65rem;
        font-size: .78rem;
    }
    .t1-slot {
        min-height: 3.25rem;
        padding: .65rem .85rem;
    }
    .t1-slot-placeholder { font-size: .92rem; }
    .t1-slot-label       { font-size: .92rem; }
    .t1-panel-hint       { font-size: .82rem; }
}

/* ══════════════════════════════════════════════════════════
   ── Teil 1 — Premium Design (Tasks #3–#5)
   ══════════════════════════════════════════════════════════ */

/* ── Right panel sticky positioning ───────────────────── */
.t1-panel-sticky {
    position: sticky;
    top: calc(var(--dl-navbar-h) + 1rem);
    z-index: 9;
}

/* ── RTL overrides: German content always LTR ─────────── */
.german-text        { direction: ltr !important; text-align: left !important; }
.t1-chip-text       { direction: ltr; text-align: left; }
.t1-slot-label      { direction: ltr; text-align: left; }
.t1-card-chip-text  { direction: ltr; text-align: left; }

/* ── Card — modern premium design ─────────────────────── */
.t1-text-block {
    border: none !important;
    border-left: 3px solid var(--dl-primary) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}
.t1-text-block.t1-block-correct {
    border-left-color: #198754 !important;
}
.t1-text-block.t1-block-wrong {
    border-left-color: #dc3545 !important;
}

/* Card header — clean white, structure without Bootstrap gray */
.t1-text-block .card-header {
    background:    #fff !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    padding:       .75rem 1.25rem !important;
}

/* Number badge */
.t1-item-badge {
    width:   1.75rem;
    height:  1.75rem;
    border-radius: 50%;
    background: var(--dl-primary);
    color: #fff;
    font-size:   .75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.t1-text-block.t1-block-correct .t1-item-badge { background: #198754; }
.t1-text-block.t1-block-wrong   .t1-item-badge { background: #dc3545; }

/* Result pill inside header (checked mode) */
.t1-result-pill {
    font-size:     .8rem;
    font-weight:   600;
    border-radius: 1rem;
    padding:       .2rem .7rem;
    display:       inline-flex;
    align-items:   center;
    gap:           .35rem;
}
.t1-result-correct { color: #0a4f2e; background: #d1e7dd; }
.t1-result-wrong   { color: #6b1221; background: #f8d7da; }

/* ── Summary strip — full-bleed inside card-body ─────── */
.t1-summary-strip {
    margin-left:  -1.5rem;
    margin-right: -1.5rem;
    padding: .6rem 1.5rem;
    background: #fdf8f0;
    border-top:    1px solid #f0e8d8;
    border-bottom: 1px solid #f0e8d8;
    margin-bottom: 0;
    font-style: italic;
    color: #6c757d;
}
.t1-summary-strip .t1-summary-meta {
    font-style:  normal;
    font-size:   .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9a8060;
    margin-bottom: .2rem;
    display: block;
}

/* ── In-card chip zone — PRIMARY interaction area ──────── */
.t1-chips-zone {
    background:    #eef4ff;
    border:        1px solid #c7d8f8;
    border-radius: .625rem;
    padding:       .75rem .875rem;
    margin-top:    .875rem;
}
.t1-chips-zone-label {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color:          var(--dl-primary);
    display:        block;
    margin-bottom:  .5rem;
}

/* Scroll-overflow fade affordance wrapper */
.t1-chips-wrap { position: relative; }
.t1-chips-wrap.t1-chips-overflow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left:   0;
    right:  0;
    height: 1.6rem;
    background: linear-gradient(to bottom, transparent, rgba(238,244,255,.95));
    pointer-events: none;
    border-radius: 0 0 6px 6px;
}

/* ── In-card chip grid ─────────────────────────────────── */
.t1-card-chips-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
    max-height: 8rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b8cef5 transparent;
}
.t1-card-chips-grid::-webkit-scrollbar       { width: 4px; }
.t1-card-chips-grid::-webkit-scrollbar-track { background: transparent; }
.t1-card-chips-grid::-webkit-scrollbar-thumb { background: #b8cef5; border-radius: 2px; }

@media (max-width: 479px) {
    .t1-card-chips-grid { grid-template-columns: 1fr; }
}

.t1-card-chip {
    display:     flex;
    align-items: center;
    gap:         .4rem;
    padding:     .4rem .75rem;
    background:  #fff;
    border:      1px solid #c7d8f8;
    border-radius: 6px;
    cursor:      pointer;
    font-size:   .85rem;
    font-weight: 500;
    line-height: 1.35;
    color:       var(--dl-text);
    direction:   ltr;
    text-align:  left;
    transition:  border-color .12s ease, background-color .12s ease,
                 box-shadow .12s ease;
    font-family: inherit;
    width:       100%;
}
.t1-card-chip:hover {
    border-color: var(--dl-primary);
    background:   rgba(0,86,179,.05);
    box-shadow:   0 1px 4px rgba(0,86,179,.12);
}
.t1-card-chip:focus-visible {
    outline:        2px solid var(--dl-primary);
    outline-offset: 2px;
}
.t1-card-chip .t1-chip-num {
    min-width:  1.25rem;
    height:     1.25rem;
    font-size:  .65rem;
    flex-shrink: 0;
}

/* Check icon — hidden by default, shown when selected */
.t1-card-chip-check {
    display:  none;
    flex-shrink: 0;
    font-size: .95em;
    margin-inline-start: .1rem;
}

/* In-card chip — selected state */
.t1-card-chip-selected {
    background:   var(--dl-primary) !important;
    border-color: var(--dl-primary) !important;
    color:        #fff !important;
    box-shadow:   0 2px 8px rgba(0,86,179,.25) !important;
}
.t1-card-chip-selected .t1-chip-num {
    background: rgba(255,255,255,.2) !important;
    color:      #fff !important;
}
.t1-card-chip-selected .t1-card-chip-check { display: inline-block; }

/* ── Answer zone — soft elevated panel (NOT a nested card) */
.t1-answer-zone {
    background:    #f0f4ff;
    border-radius: .5rem;
    padding:       .75rem 1rem;
    margin-top:    .75rem;
}
.t1-answer-zone-label {
    font-size:      .72rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color:          #6c757d;
    display:        block;
    margin-bottom:  .5rem;
}

/* ── Sidebar secondary — lighter visual weight ─────────── */
#t1-panel .card-header {
    background:    transparent !important;
    border-bottom: 1px solid #e9ecef !important;
}
#t1-panel .t1-title-chip {
    font-size:    .8rem;
    padding:      .35rem .6rem;
    border-color: #e9ecef;
}
#t1-panel .t1-title-chip:hover {
    border-color: #adb5bd;
    background:   #f8f9fa;
    transform:    none;
}

/* ── Right panel (t1-panel-col) collapse / expand ──────── */
#t1-panel-col.t1-sidebar-hidden { display: none !important; }
#t1-content-col.t1-sidebar-expanded {
    flex:      0 0 100% !important;
    max-width: 100% !important;
    width:     100% !important;
}
html.t1-sc-init #t1-panel-col { display: none !important; }
html.t1-sc-init #t1-content-col {
    flex:      0 0 100% !important;
    max-width: 100% !important;
    width:     100% !important;
}

/* ── Profile card redesign ─────────────────────────────── */
.sidebar-profile-card {
    background:    linear-gradient(135deg, #dde9ff 0%, #e8effc 100%);
    border-radius: .875rem;
    padding:       1rem 1rem .875rem;
    margin-bottom: .75rem;
    text-align:    center;
}
.sidebar-profile-card .avatar-circle {
    width:      3rem;
    height:     3rem;
    font-size:  1.3rem;
    box-shadow: 0 0 0 3px rgba(13,110,253,.15);
    margin-left:  auto;
    margin-right: auto;
}
.sidebar-profile-card .profile-name {
    font-weight:   700;
    font-size:     .9375rem;
    line-height:   1.3;
    margin-top:    .5rem;
    margin-bottom: 0;
    color: var(--dl-text);
}
.sidebar-profile-card .profile-email {
    font-size:     .8125rem;
    color:         #6c757d;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    display:       block;
    max-width:     100%;
    margin-top:    .15rem;
}


/* ============================================================
   Pricing v2 — premium polish
   ============================================================ */
.pricing-hero {
  background: var(--brand-primary, #0d6efd);
  background: linear-gradient(135deg,
    var(--brand-primary, #0d6efd) 0%,
    color-mix(in oklab, var(--brand-primary, #0d6efd) 78%, #000) 100%);
  color: #fff;
  padding: 4rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.pricing-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.18));
  pointer-events: none;
}
.pricing-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(900px 380px at 85% -20%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
.pricing-hero > .container { position: relative; z-index: 1; }
.pricing-eyebrow {
  letter-spacing: .14em; font-size: .75rem;
  text-transform: uppercase; opacity: .9; font-weight: 600;
}
.pricing-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.pricing-hero .pricing-hero-sub { opacity: .97; font-size: 1.05rem; }
.pricing-hero-notes {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
}
.pricing-hero-note {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  padding: .375rem .75rem; border-radius: 999px;
  font-size: .8125rem;
  backdrop-filter: blur(4px);
}
/* Compact currency selector (sits above the plans) */
.pricing-currency-bar{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem;
  max-width:1040px; margin:0 auto 1.25rem;
}
.pricing-currency-note{
  display:inline-flex; align-items:center; gap:.45rem;
  color:#5b6573; font-size:.9rem;
}
.pricing-currency-note i{ color:var(--brand-primary,#0d6efd); }
.pricing-currency-select{ margin-inline-start:auto; }
.pricing-currency-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem;
  background:#fff;
  border:1px solid #d7dce5; border-radius:999px;
  font-weight:700; color:#0f172a; cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pricing-currency-toggle:hover{
  border-color:var(--brand-primary,#0d6efd);
  box-shadow:0 6px 18px -12px rgba(13,110,253,.45);
}
.pricing-currency-toggle:focus-visible{
  outline:2px solid var(--brand-primary,#0d6efd); outline-offset:2px;
}
.pricing-currency-sym{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.4rem; height:1.4rem; padding:0 .25rem;
  border-radius:.45rem;
  background:color-mix(in oklab, var(--brand-primary,#0d6efd) 12%, #fff);
  color:var(--brand-primary,#0d6efd); font-size:.8rem; font-weight:700;
}
.pricing-currency-code{ letter-spacing:.02em; }
.pricing-currency-caret{ font-size:.7rem; color:#64748b; transition:transform .2s ease; }
.pricing-currency-toggle[aria-expanded="true"] .pricing-currency-caret{ transform:rotate(180deg); }
.pricing-currency-menu{
  min-width:14rem; padding:.4rem;
  border:1px solid #e6e9ef; border-radius:.85rem;
  box-shadow:0 18px 40px -20px rgba(15,23,42,.4);
}
.pricing-currency-item{
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .65rem; border-radius:.6rem; font-weight:600; color:#0f172a;
}
.pricing-currency-item:hover,
.pricing-currency-item:focus{ background:#f3f6fc; color:#0f172a; }
.pricing-currency-item.is-active{
  background:color-mix(in oklab, var(--brand-primary,#0d6efd) 8%, #fff);
}
.pricing-currency-item-code{ min-width:2.4rem; }
.pricing-currency-item-name{ color:#64748b; font-weight:500; font-size:.85rem; }
.pricing-currency-check{ margin-inline-start:auto; color:var(--brand-primary,#0d6efd); }
@media (max-width:575.98px){
  .pricing-currency-bar{ justify-content:center; }
  .pricing-currency-select{ margin-inline-start:0; }
}

.pricing-includes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 768px) {
  .pricing-includes { grid-template-columns: repeat(2, 1fr); }
}
.pricing-include-chip {
  display: flex; align-items: center; gap: .5rem;
  padding: .625rem .9rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px; font-size: .875rem; background: #fff;
}
.pricing-include-chip i { color: var(--brand-primary, #0d6efd); }

.pricing-card { position: relative; overflow: visible; transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .pricing-card:hover { transform: translateY(-2px); }
}
.pricing-card.featured {
  border: 2px solid var(--brand-primary, #0d6efd);
  box-shadow:
    0 0 0 6px rgba(13,110,253,.10),
    0 20px 40px -20px rgba(0,0,0,.25);
  box-shadow:
    0 0 0 6px color-mix(in oklab, var(--brand-primary, #0d6efd) 10%, transparent),
    0 20px 40px -20px rgba(0,0,0,.25);
}
@media (max-width: 768px) {
  .pricing-card.featured { transform: none; }
}
.pricing-eyebrow-card {
  letter-spacing: .12em; text-transform: uppercase;
  font-size: .7rem; font-weight: 700;
  color: var(--brand-primary, #0d6efd); margin-bottom: .25rem;
}
.pricing-savings-badge {
  align-self: flex-end;
  background: #198754; color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .25rem .55rem; border-radius: .5rem;
  letter-spacing: .03em;
}
.pricing-per-month {
  color: var(--bs-secondary-color, #6c757d);
  font-size: .85rem; margin-top: .25rem;
}

.device-pills {
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px; padding: .25rem; gap: .25rem;
  background: #fff;
}
.dev-pill {
  border: 0; background: transparent;
  padding: .4rem .9rem; border-radius: 999px;
  font-weight: 600; cursor: pointer;
  min-width: 2.4rem; color: var(--bs-body-color);
  transition: background .15s ease, color .15s ease;
}
.dev-pill:hover { background: var(--bs-tertiary-bg, #f1f3f5); }
.dev-pill:focus-visible {
  outline: 2px solid var(--brand-primary, #0d6efd);
  outline-offset: 1px;
}
.dev-pill.is-active {
  background: var(--brand-primary, #0d6efd);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px -3px rgba(13, 110, 253, .55);
}
.device-discount-teaser {
  font-size: .8rem; color: var(--bs-secondary-color, #6c757d);
  margin-top: .4rem;
}

/* The popular ribbon is a full-bleed top bar (see .pricing-popular-ribbon
   above) — it is symmetric and needs no RTL repositioning. */

/* ============================================================
   Checkout v2 — premium polish
   ============================================================ */
.checkout-steps {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem;
}
.checkout-step {
  display: flex; align-items: center; gap: .5rem;
  font-size: .85rem;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}
.checkout-step.is-current { color: var(--brand-primary, #0d6efd); font-weight: 600; }
.checkout-step .dot {
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--bs-border-color); color: #fff;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
}
.checkout-step.is-done .dot,
.checkout-step.is-current .dot {
  background: var(--brand-primary, #0d6efd);
}
.checkout-step-line {
  flex: 1; height: 2px;
  background: var(--bs-border-color);
  min-width: .5rem;
}
.checkout-step.is-done + .checkout-step-line { background: var(--brand-primary, #0d6efd); }
@media (max-width: 576px) {
  .checkout-step .label { display: none; }
}

.checkout-bank-card {
  border: 1px solid var(--bs-border-color);
  border-inline-start: 4px solid var(--brand-accent, #ffc107);
  border-radius: .75rem;
  transition: transform .15s ease, box-shadow .15s ease;
  margin-bottom: 1rem;
  background: #fff;
}
.checkout-bank-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.18);
}
.copy-btn { transition: background .15s ease, color .15s ease; }
.copy-btn.is-copied {
  background: #198754 !important; color: #fff !important;
  border-color: #198754 !important;
}

.checkout-timeline {
  list-style: none; padding: 0; margin: 0;
  position: relative;
}
.checkout-timeline::before {
  content: ""; position: absolute;
  inset-inline-start: .65rem; top: .6rem; bottom: .6rem;
  width: 2px; background: var(--bs-border-color);
}
.checkout-timeline li {
  position: relative;
  padding-inline-start: 2rem;
  padding-block: .5rem;
  font-size: .9rem;
}
.checkout-timeline li::before {
  content: ""; position: absolute;
  inset-inline-start: 0; top: .65rem;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  background: #fff;
  border: 2px solid var(--brand-primary, #0d6efd);
}

.checkout-summary-sticky { position: sticky; top: 1rem; }
@media (max-width: 991.98px) {
  .checkout-summary-sticky { position: static !important; }
}

/* ============================================================
   Task 3 — Renewal polish (subscription progress, renewal chips)
   ============================================================ */
.subscription-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--bs-gray-200, #e9ecef);
  overflow: hidden;
  margin-top: .5rem;
}
.subscription-progress > span {
  display: block;
  height: 100%;
  background: var(--bs-primary, #0d6efd);
  transition: width .3s ease;
  border-radius: 999px;
}
.subscription-progress.is-warning > span { background: var(--bs-warning, #ffc107); }
.subscription-progress.is-danger  > span { background: var(--bs-danger,  #dc3545); width: 100% !important; opacity: .55; }

.renewal-chip,
.pricing-renewal-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(13, 110, 253, .08);
  color: var(--bs-primary, #0d6efd);
  font-size: .825rem;
  font-weight: 600;
  border: 1px solid rgba(13, 110, 253, .18);
}
.pricing-renewal-chip { margin-bottom: .75rem; }

.profile-subscription-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 768px) {
  .profile-subscription-grid { grid-template-columns: 1fr; }
}
.profile-sub-block {
  padding: 1rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .75rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.profile-sub-block h6 {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bs-secondary, #6c757d);
  margin: 0 0 .25rem;
  font-weight: 700;
}
.profile-sub-block .psb-row {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .9rem;
}
.profile-sub-block .psb-row .label { color: var(--bs-secondary, #6c757d); }
.profile-sub-block .psb-row .value { font-weight: 600; text-align: end; }

.pricing-card.is-renewal-target {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 4px;
}
.pricing-card .renewal-target-eyebrow {
  display: inline-block;
  margin-bottom: .25rem;
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bs-primary, #0d6efd);
}

/* ============================================================
   Admin Plans — UX polish (scoped to .admin-plans)
   ============================================================ */
.admin-plans .admin-plans__chips { display: flex; flex-wrap: wrap; gap: .375rem; }
.admin-plans .admin-plans__chips .badge { font-weight: 500; }

.admin-plans .form-section {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: #fcfcfd;
}
.admin-plans .form-section__title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7280;
    margin: 0 0 .9rem 0;
}

.admin-plans .admin-plans__tabs .nav-link { color: #4b5563; }
.admin-plans .admin-plans__tabs .nav-link.active { color: var(--bs-primary, #0d6efd); font-weight: 600; }

.admin-plans .lang-dot {
    display: inline-block;
    font-size: .7rem;
    line-height: 1;
    padding: .15rem .4rem;
    border-radius: 999px;
    border: 1px solid transparent;
}
.admin-plans .lang-dot--on  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.admin-plans .lang-dot--off { background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb; }
.admin-plans .lang-dots .lang-dot { margin-inline-end: .25rem; }

.admin-plans .danger-zone {
    border: 1px solid #fecaca;
    background: #fff5f5;
    border-radius: .5rem;
    padding: 1rem 1.25rem;
}
.admin-plans .danger-zone__title {
    color: #b91c1c;
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.admin-plans .admin-plans__prices > div { line-height: 1.35; }

/* RTL: ensure the Arabic tab pane and form section align fully */
[dir="rtl"] .admin-plans .form-section,
.admin-plans [dir="rtl"] { text-align: right; }

/* Stacked card layout on small screens */
@media (max-width: 767.98px) {
    .admin-plans .admin-plans-table thead { display: none; }
    .admin-plans .admin-plans-table,
    .admin-plans .admin-plans-table tbody,
    .admin-plans .admin-plans-table tr,
    .admin-plans .admin-plans-table td { display: block; width: 100%; }
    .admin-plans .admin-plans-table tr {
        border: 1px solid var(--bs-border-color, #e5e7eb);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .25rem;
        background: #fff;
    }
    .admin-plans .admin-plans-table td {
        border: none;
        padding: .35rem .75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
    }
    .admin-plans .admin-plans-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: .8rem;
    }
    .admin-plans .admin-plans-table td.text-end { justify-content: flex-end; }
}

/* ── Bank account logos (Bank transfer checkout + admin) ── */
.checkout-bank-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    padding: 3px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    flex-shrink: 0;
}
.admin-bank-logo-preview {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
[dir="rtl"] .checkout-bank-logo,
[dir="rtl"] .admin-bank-logo-preview { margin-left: 0; }

/* ============================================================
   Student Profile — premium tabs (Task 1)
   ============================================================ */
.profile-tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:.25rem;
    padding:.35rem;
    background:var(--bs-tertiary-bg, #f5f6f8);
    border:1px solid var(--bs-border-color, #e6e8ec);
    border-radius:.85rem;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.profile-tabs::-webkit-scrollbar{ display:none; }
.profile-tabs .nav-item{ flex:0 0 auto; }
.profile-tabs .nav-link{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.55rem 1rem;
    border-radius:.6rem;
    color:var(--bs-secondary-color, #5a6270);
    font-weight:500;
    white-space:nowrap;
    transition:background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.profile-tabs .nav-link:hover{
    color:var(--bs-body-color, #1f2330);
    background:rgba(0,0,0,.03);
}
.profile-tabs .nav-link.active{
    background:#fff;
    color:var(--bs-primary, #0d6efd);
    box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
}
.profile-card{
    border:1px solid var(--bs-border-color, #e6e8ec);
    border-radius:.85rem;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.profile-card > .card-header{
    background:transparent;
    border-bottom:1px solid var(--bs-border-color, #eef0f3);
    padding:1rem 1.25rem;
    font-size:1rem;
}
.profile-card > .card-body{ padding:1.25rem 1.25rem 1.5rem; }
.profile-history-placeholder{ background:var(--bs-tertiary-bg, #fafbfc); }

/* RTL safety */
[dir="rtl"] .profile-tabs .nav-link i{ margin-inline-end:.4rem; margin-inline-start:0; }

/* Mobile */
@media (max-width: 575.98px){
    .profile-tabs .nav-link{ padding:.5rem .8rem; font-size:.92rem; }
    .profile-card > .card-header,
    .profile-card > .card-body{ padding-left:1rem; padding-right:1rem; }
}

/* ── Task 2: Billing details form (profile.php) ───────────── */
.profile-billing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 1.25rem;
}
.profile-billing-grid > .profile-billing-grid-full {
    grid-column: 1 / -1;
}
@media (max-width: 575.98px) {
    .profile-billing-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Task 4: Premium checkout & return polish ─────────────── */
.checkout-payment-shell { display: flex; flex-direction: column; gap: 1rem; }
.checkout-method-picker {
    display: flex; gap: .5rem; flex-wrap: wrap;
}
.checkout-method-picker > button {
    flex: 1 1 0; min-width: 160px;
    padding: .85rem 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .75rem;
    background: #fff; text-align: start; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.checkout-method-picker > button:hover {
    border-color: var(--bs-primary, #0d6efd);
    transform: translateY(-1px);
}
.checkout-method-picker > button.is-selected {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .12);
    background: linear-gradient(180deg, #ffffff, #f4f8ff);
}
.checkout-method-icon { font-size: 1.4rem; color: var(--bs-primary, #0d6efd); }
.checkout-method-pane { animation: ckPaneFade .2s ease; }
.checkout-method-amount { font-size: 1.2rem; font-weight: 700; color: var(--bs-primary, #0d6efd); }
.checkout-bank-iban { word-break: break-all; }

.checkout-status-page { background: linear-gradient(180deg, #f7f9fc, #ffffff); min-height: 60vh; }
.payment-return-card {
    max-width: 560px; margin: 0 auto;
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 40px rgba(15, 23, 42, .08);
    text-align: center;
}
.payment-return-icon {
    width: 76px; height: 76px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(13, 110, 253, .08);
    color: var(--bs-primary, #0d6efd);
    font-size: 2rem;
}
.payment-return-spin { animation: ckSpin 1.6s linear infinite; display: inline-block; }

@keyframes ckPaneFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@keyframes ckSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .checkout-method-picker > button { flex-basis: 100%; min-width: 0; }
    .payment-return-card { padding: 2rem 1rem; }
}

[dir="rtl"] .checkout-method-picker > button { text-align: start; }
[dir="rtl"] .checkout-bank-iban { direction: ltr; unicode-bidi: embed; }

/* ── Billing tab — Task 5 (subscription overview + payment history) ── */
.billing-overview-card { border:1px solid var(--bs-border-color); }
.billing-method-badge { font-weight: 600; letter-spacing: .01em; padding: .35em .6em; border-radius: .5rem; }
.billing-method-badge.is-bank   { background:#eef4ff; color:#1d4ed8; }
.billing-method-badge.is-paypal { background:#fff5e6; color:#9a5a00; }
.billing-method-badge.is-card   { background:#eefaf3; color:#0a7c4a; }
.billing-method-badge.is-manual { background:#f3f4f6; color:#374151; }
.billing-method-badge.is-free   { background:#f5f3ff; color:#6d28d9; }

.billing-history th {
    font-weight: 600;
    color: var(--bs-secondary-color);
    text-transform: none;
    border-bottom: 1px solid var(--bs-border-color);
    white-space: nowrap;
}
.billing-history td { vertical-align: middle; }
.billing-history tbody tr + tr td { border-top: 1px solid var(--bs-border-color); }

.billing-status-badge { font-weight: 600; letter-spacing: .01em; padding: .35em .6em; border-radius: .5rem; }
.billing-status-badge.is-success   { background:#e7f6ec; color:#0a7c4a; }
.billing-status-badge.is-pending   { background:#fff7e6; color:#9a5a00; }
.billing-status-badge.is-rejected  { background:#fde8e8; color:#b42318; }
.billing-status-badge.is-cancelled { background:#f3f4f6; color:#374151; }
.billing-status-badge.is-failed    { background:#fde8e8; color:#b42318; }
.billing-status-badge.is-expired   { background:#f3f4f6; color:#374151; }

.billing-history-empty { text-align: center; padding: 2.25rem 1rem; color: var(--bs-secondary-color); }

@media (max-width: 767.98px) {
    .billing-history thead { display: none; }
    .billing-history, .billing-history tbody, .billing-history tr { display: block; width: 100%; }
    .billing-history tr {
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        padding: .85rem 1rem;
        margin-bottom: .75rem;
    }
    .billing-history tbody tr + tr td { border-top: none; }
    .billing-history td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: .35rem 0;
        border: none;
        text-align: end;
    }
    .billing-history td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bs-secondary-color);
        font-size: .85em;
    }
    .billing-history .text-end { text-align: end !important; }
}

[dir="rtl"] .billing-history th,
[dir="rtl"] .billing-history td { text-align: right; }
[dir="rtl"] .billing-history .text-end { text-align: left !important; }
[dir="rtl"] .billing-history .font-monospace { direction: ltr; unicode-bidi: embed; }

/* ============ Task 6: Upgrade / Extend Plan Flow ============ */
.billing-upgrade-card { border:1px dashed var(--bs-border-color); border-radius:.75rem; background:linear-gradient(180deg,#fff,#fafbff); }
.billing-upgrade-card .duration-chips { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.25rem; }
.billing-upgrade-card .duration-chip { font-size:.85rem; padding:.25rem .55rem; border-radius:.5rem; background:#eef4ff; color:#1d4ed8; font-weight:600; }
.billing-upgrade-context-note { border:1px solid #d1e3ff; background:linear-gradient(180deg,#f6faff,#eef4ff); border-radius:.6rem; padding:.75rem 1rem; margin-top:.75rem; font-size:.92rem; }
.billing-upgrade-context-note .currently-active { color:var(--bs-secondary-color,#6c757d); margin-top:.25rem; display:block; }
.billing-upgrade-pending-chip { display:inline-flex; align-items:center; gap:.35rem; font-size:.78rem; padding:.2rem .55rem; border-radius:.5rem; background:#fff7e6; color:#9a5a00; font-weight:600; }
.checkout-upgrade-note { border:1px solid #d1e3ff; background:linear-gradient(180deg,#f6faff,#eef4ff); border-radius:.75rem; padding:1rem 1.15rem; margin-bottom:1rem; }
.checkout-upgrade-note h6 { font-weight:700; margin:0 0 .35rem; }
.checkout-upgrade-note .row-meta { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; font-size:.9rem; color:var(--bs-secondary-color,#6c757d); margin-bottom:.5rem; }
.pricing-upgrade-banner { border:1px solid #d1e3ff; background:linear-gradient(180deg,#f6faff,#eef4ff); border-radius:.75rem; padding:1rem 1.25rem; margin-bottom:1.5rem; }
.pricing-card.is-upgrade-target { box-shadow:0 0 0 2px var(--bs-primary,#0d6efd); }
[dir="rtl"] .billing-upgrade-card .duration-chips { justify-content:flex-end; }
@media (max-width:575.98px) { .checkout-upgrade-note .row-meta { gap:.35rem; } }

/* ── Task 7: Billing plan preview cards (non-subscribed students) ── */
.billing-plan-preview-card-outer .billing-plan-preview-head h6 { font-size: 1rem; }
.billing-plan-preview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.billing-plan-preview-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: 14px;
    background: var(--bs-body-bg, #fff);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.billing-plan-preview-card:hover {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.11);
    border-color: rgba(13, 110, 253, 0.35);
    transform: translateY(-4px);
}
.billing-plan-preview-card:focus-visible {
    outline: none;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.11), 0 0 0 3px rgba(29, 78, 216, 0.28);
    border-color: rgba(29, 78, 216, 0.55);
    transform: translateY(-4px);
}
@media (prefers-reduced-motion: reduce) {
    .billing-plan-preview-card { transition: box-shadow .15s ease, border-color .15s ease !important; }
    .billing-plan-preview-card:hover,
    .billing-plan-preview-card:focus-visible { transform: none; }
}
.billing-plan-preview-top { display: flex; flex-direction: column; gap: 6px; }
.billing-plan-preview-duration {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
}
.billing-plan-preview-name {
    font-weight: 600;
    font-size: .98rem;
    color: var(--bs-body-color, #1f2937);
}
.billing-plan-preview-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: auto;
}
.billing-plan-preview-price-label {
    font-size: .72rem;
    color: var(--bs-secondary-color, #6b7280);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.billing-plan-preview-price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bs-body-color, #111827);
    line-height: 1.1;
}
.billing-plan-preview-cta { width: 100%; }
[dir="rtl"] .billing-plan-preview-duration { letter-spacing: 0; }
@media (max-width: 768px) {
    .billing-plan-preview { grid-template-columns: 1fr; }
}

/* Task 8.1 — Future upgrade success summary (Billing tab) */
.billing-upgrade-success-summary {
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: .6rem;
    background: color-mix(in oklab, #198754 8%, transparent);
    border: 1px solid color-mix(in oklab, #198754 25%, transparent);
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.billing-upgrade-success-summary .bus-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 600;
    font-size: .85rem;
    color: #198754;
}
.billing-upgrade-success-summary .bus-main {
    font-size: .9rem;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .billing-upgrade-success-summary { padding: .75rem; }
}

/* ============================================================
   Task 10 — Profile › Billing premium restructure
   ============================================================ */
.billing-section-card { border: 1px solid var(--bs-border-color, rgba(255,255,255,.08)); }
.billing-plan-header { gap: .5rem; }
.billing-plan-header-cta { margin-inline-start: auto; }

.billing-info-summary {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    line-height: 1.45;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .9375rem;
}
.billing-info-summary .bi-name {
    color: var(--bs-body-color, inherit);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: .15rem;
}

.payment-method-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem .9rem;
}
.payment-method-row .pm-date,
.payment-method-row .pm-ref { white-space: nowrap; }

.billing-modal .modal-content {
    background: var(--bs-body-bg, #1a1d24);
    border: 1px solid var(--bs-border-color, rgba(255,255,255,.08));
    border-radius: .75rem;
}
.billing-modal .modal-header,
.billing-modal .modal-footer {
    border-color: var(--bs-border-color, rgba(255,255,255,.08));
}
.billing-modal .form-control { background-color: var(--bs-tertiary-bg, rgba(255,255,255,.04)); }

/* ── Admin: searchable user picker (New Subscription modal) ── */
.user-picker .user-picker-native { display: none; }
.user-picker-list {
    position: absolute; top: 100%; left: 0; right: 0;
    max-height: 240px; overflow-y: auto;
    z-index: 1080; margin-top: .25rem;
}
.user-picker-list .list-group-item { cursor: pointer; padding: .4rem .75rem; }
.user-picker-list .list-group-item.active {
    background: var(--bs-primary-bg-subtle); color: inherit;
}
.user-picker-list .list-group-item.disabled { cursor: default; }
.user-picker-list .up-email {
    color: var(--bs-secondary-color); font-size: .8rem; margin-left: .35rem;
}

/* === Payment gateway logos (Task 13) === */
.checkout-payment-logo{display:inline-block;height:1.75rem;width:auto;max-width:64px;object-fit:contain;vertical-align:middle}
.checkout-payment-logo-lg{height:2.25rem;max-width:96px}
.admin-gateway-logo-preview{max-height:56px;max-width:160px;object-fit:contain;background:#f8f9fa;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:6px}
@media (prefers-color-scheme: dark){.admin-gateway-logo-preview{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}}

/* ---- Admin gateway settings: webhook URL + copy button ---- */
.gateway-webhook-url input.form-control[readonly]{background:#f8f9fa;font-size:.875rem}
.gateway-copy-btn{font-size:.75rem;padding:.25rem .6rem}

/* Task 18: Admin Plans — status badge cluster + table action group */
.admin-plans .plan-status-badges { display: flex; flex-wrap: wrap; gap: .25rem; }
.admin-plans .admin-plans-table .btn-group-sm .btn { padding: .25rem .5rem; }

/* ============================================================
   === Tier-A Pricing/Checkout polish ===
   Append-only premium polish. Does not override earlier rules.
   ============================================================ */

/* ---------- Pricing: hero pills ---------- */
.pricing-hero-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1rem; }
.pricing-hero-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .4rem .85rem;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 999px;
    font-size: .82rem; font-weight: 600;
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .12);
    transition: background .2s ease, border-color .2s ease;
}
.pricing-hero-pill:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .55);
}
.pricing-hero-pill i { color: #fff; }

/* ---------- Pricing: card meta ---------- */
.pricing-best-for {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6c757d;
    margin: .25rem 0 .5rem;
}
.pricing-price-was {
    display: block;
    font-size: .95rem;
    color: #9aa1a9;
    text-decoration: line-through;
    margin-bottom: .15rem;
    line-height: 1.1;
}
.pricing-savings-badge {
    align-self: flex-end;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .7rem;
    margin-bottom: .5rem;
    border-radius: 999px;
    font-size: .78rem; font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 4px 14px rgba(34, 197, 94, .25);
}
.pricing-billed-once { font-size: .78rem; color: #6c757d; margin-top: .35rem; }

/* ---------- Pricing: card polish ---------- */
.pricing-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Hover lift only on devices that support hover (no sticky hover on touch screens) */
@media (hover: hover) and (pointer: fine) {
    .pricing-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px -18px rgba(13, 27, 62, .25);
    }
    @media (min-width: 992px) {
        .pricing-card.featured:hover {
            transform: translateY(-6px) scale(1.02);
            box-shadow: 0 30px 60px -22px rgba(13, 110, 253, .45);
        }
    }
}
/* Explicit reset for touch/coarse-pointer devices — prevents sticky hover transforms
   from any legacy selectors that may exist further up the cascade */
@media (hover: none), (pointer: coarse) {
    .pricing-card:hover,
    .pricing-card.featured:hover {
        transform: none !important;
    }
}
.pricing-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, .25), 0 18px 40px -18px rgba(13, 27, 62, .25);
}
@media (min-width: 992px) {
    .pricing-card.featured {
        transform: translateY(0) scale(1.02);
        border: 2px solid #0d6efd;
        box-shadow: 0 22px 50px -18px rgba(13, 110, 253, .35);
    }
}

/* ---------- Pricing: device help button ---------- */
.device-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1px solid #cbd2da;
    background: #fff;
    color: #6c757d;
    font-size: .7rem; line-height: 1;
    padding: 0;
    cursor: help;
    transition: color .15s ease, border-color .15s ease;
}
.device-help-btn:hover { color: #0d6efd; border-color: #0d6efd; }

/* ---------- 7-Day Money-Back Guarantee ---------- */
.guarantee-card {
    max-width: 720px; margin: 2.5rem auto;
    padding: 2rem 1.75rem;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(13, 110, 253, .06), rgba(34, 197, 94, .05));
    border: 1px solid rgba(13, 110, 253, .15);
    text-align: center;
    box-shadow: 0 10px 30px -20px rgba(13, 27, 62, .25);
}
.guarantee-card .guarantee-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #fff;
    color: #16a34a;
    font-size: 1.65rem;
    margin-bottom: .85rem;
    box-shadow: 0 6px 18px -8px rgba(22, 163, 74, .45);
}
.guarantee-card h3 { font-weight: 700; margin-bottom: .5rem; }
.guarantee-card p { color: #4a5568; margin-bottom: .25rem; }
.guarantee-card .guarantee-note { font-size: .8rem; color: #6c757d; font-style: italic; }

.guarantee-card-compact {
    display: flex; align-items: flex-start; gap: .85rem;
    padding: 1rem 1.1rem;
    border-radius: .85rem;
    background: linear-gradient(135deg, rgba(13, 110, 253, .05), rgba(34, 197, 94, .04));
    border: 1px solid rgba(13, 110, 253, .15);
    margin-top: 1rem;
}
.guarantee-card-compact .guarantee-icon {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #16a34a;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 12px -6px rgba(22, 163, 74, .4);
}
.guarantee-card-compact .guarantee-body { font-size: .85rem; line-height: 1.4; }
.guarantee-card-compact .guarantee-body strong { display: block; margin-bottom: .15rem; font-size: .92rem; }
.guarantee-card-compact .guarantee-note { font-size: .72rem; color: #6c757d; font-style: italic; margin-top: .15rem; }

/* ---------- Testimonials ---------- */
.testimonials-section { padding: 3rem 0 1rem; }
.testimonials-section .section-eyebrow {
    font-size: .78rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: #0d6efd;
    text-align: center; margin-bottom: .5rem;
}
.testimonials-section h2 { text-align: center; font-weight: 700; }
.testimonials-section .section-subtitle { text-align: center; color: #6c757d; margin-bottom: 2rem; }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.testimonial-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: 1rem;
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: 0 10px 30px -22px rgba(13, 27, 62, .25);
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease;
}
.testimonial-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -22px rgba(13, 27, 62, .3);
}
.testimonial-card::before {
    content: "\201C";
    position: absolute; top: -.25rem; left: 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 4.5rem; line-height: 1;
    color: rgba(13, 110, 253, .18);
    pointer-events: none;
}
.testimonial-card .testimonial-quote {
    font-size: .98rem; line-height: 1.55; color: #2d3748;
    flex: 1 1 auto;
    margin-bottom: 1rem;
}
.testimonial-card .testimonial-role {
    font-size: .8rem; color: #6c757d; font-weight: 500;
    border-top: 1px solid #f1f3f5; padding-top: .75rem;
}
.testimonials-placeholder-note {
    text-align: center; color: #94a3b8; font-style: italic; font-size: .8rem;
    margin-top: 1.25rem;
}

/* ---------- Checkout: method picker selected state + badges ---------- */
.checkout-method-picker > button {
    position: relative;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.checkout-method-picker > button.is-selected {
    border: 2px solid #0d6efd !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, .12), 0 12px 28px -16px rgba(13, 110, 253, .35);
    transform: translateY(-1px);
}
.checkout-method-badges {
    display: flex; flex-wrap: wrap; gap: .35rem;
    margin-top: .65rem;
}
.checkout-method-badge {
    display: inline-flex; align-items: center;
    padding: .2rem .55rem;
    border-radius: 999px;
    font-size: .7rem; font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.4;
    border: 1px solid transparent;
}
.checkout-method-badge.is-instant {
    background: rgba(34, 197, 94, .1);
    color: #15803d;
    border-color: rgba(34, 197, 94, .25);
}
.checkout-method-badge.is-manual {
    background: rgba(234, 179, 8, .1);
    color: #92590f;
    border-color: rgba(234, 179, 8, .25);
}
.checkout-method-badge.is-secure {
    background: rgba(100, 116, 139, .1);
    color: #475569;
    border-color: rgba(100, 116, 139, .2);
}

/* ---------- Checkout: mobile collapsible summary ---------- */
.checkout-mobile-summary {
    background: #fff;
    border: 1px solid #e5e9ef;
    border-radius: .85rem;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 18px -14px rgba(13, 27, 62, .25);
}
.checkout-mobile-summary > summary {
    list-style: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 600;
    gap: .75rem;
}
.checkout-mobile-summary > summary::-webkit-details-marker { display: none; }
.checkout-mobile-summary > summary::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-weight: normal;
    color: #6c757d;
    transition: transform .2s ease;
    margin-inline-start: auto;
}
.checkout-mobile-summary[open] > summary::after { transform: rotate(180deg); }
.checkout-mobile-summary .checkout-mobile-summary-total { color: #0d6efd; }

/* ---------- RTL adjustments ---------- */
[dir="rtl"] .testimonial-card::before { left: auto; right: 1rem; }
[dir="rtl"] .guarantee-card-compact { text-align: right; }
[dir="rtl"] .checkout-mobile-summary > summary::after { margin-inline-start: auto; margin-inline-end: 0; }

/* ---------- German long-text safety ---------- */
.pricing-card h4,
.pricing-card .pricing-plan-name { hyphens: auto; word-break: break-word; }
.checkout-method-picker > button { min-height: 96px; }

/* ---------- Mobile responsive ---------- */
@media (max-width: 768px) {
    .pricing-card { padding: 1.25rem; }
    .pricing-card .btn { min-height: 48px; }
    .device-toggle .btn,
    .pricing-device-pill { min-width: 44px; min-height: 44px; }
    .testimonials-grid { grid-template-columns: 1fr; gap: 1rem; }
    .guarantee-card { padding: 1.5rem 1.1rem; margin: 1.75rem auto; }
    .guarantee-card-compact { padding: .85rem .9rem; }
    .checkout-method-badge { font-size: .65rem; padding: .15rem .45rem; }
    .pricing-hero-pill { font-size: .75rem; padding: .35rem .7rem; }
}

/* ---------- Tier-A polish patch: eyebrow + guarantee title ---------- */
.testimonials-eyebrow {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0d6efd;
    margin-bottom: .5rem;
}
.guarantee-card .guarantee-title,
.guarantee-card-compact .guarantee-title {
    font-weight: 700;
    font-size: 1.1rem;
}

/* ============================================================
   Tier-B: Pricing & Checkout premium polish
   ============================================================ */

/* ---- "All Plans Include" premium grid ---- */
.pricing-includes-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:1040px;
    margin-inline:auto;
}
@media (max-width:991.98px){ .pricing-includes-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px){ .pricing-includes-grid{ grid-template-columns:1fr; } }
.pricing-include-card{
    display:flex; align-items:flex-start; gap:.85rem;
    padding:1rem 1.1rem;
    background:#fff;
    border:1px solid rgba(13,110,253,.10);
    border-radius:14px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    min-width:0;
}
.pricing-include-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px -16px rgba(13,110,253,.35);
    border-color:rgba(13,110,253,.22);
}
.pricing-include-medallion{
    flex:0 0 auto;
    width:42px; height:42px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:12px;
    background:linear-gradient(135deg,#e7f0ff,#dbe8ff);
    color:#0d6efd;
    font-size:1.15rem;
}
.pricing-include-text{ min-width:0; }
.pricing-include-title{
    font-weight:700; font-size:.98rem; color:#0f172a;
    line-height:1.25; margin:0 0 .15rem;
    overflow-wrap:anywhere;
}
.pricing-include-sub{
    font-size:.84rem; color:#5b6577; margin:0; line-height:1.35;
    overflow-wrap:anywhere;
}

/* ---- WhatsApp help CTA ---- */
.pricing-wa-card{
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    max-width:760px; margin:2.5rem auto 0;
    padding:1rem 1.25rem;
    background:linear-gradient(135deg,#f0fbf3,#ffffff);
    border:1px solid rgba(37,211,102,.28);
    border-radius:16px;
    box-shadow:0 6px 20px -14px rgba(37,211,102,.5);
}
.pricing-wa-icon{
    flex:0 0 auto;
    width:46px; height:46px; border-radius:14px;
    display:inline-flex; align-items:center; justify-content:center;
    background:#25d366; color:#fff; font-size:1.35rem;
}
.pricing-wa-body{ flex:1 1 220px; min-width:0; }
.pricing-wa-title{ font-weight:700; color:#0f172a; margin:0 0 .15rem; line-height:1.25; }
.pricing-wa-sub{ font-size:.88rem; color:#566075; margin:0; }
.pricing-wa-btn{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:.5rem;
    padding:.6rem 1rem; min-height:44px;
    background:#25d366; color:#fff !important;
    border:1px solid #25d366; border-radius:10px;
    font-weight:600; text-decoration:none;
    transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.pricing-wa-btn:hover{ background:#1fbf5b; box-shadow:0 8px 20px -12px rgba(37,211,102,.6); transform:translateY(-1px); }
.pricing-wa-btn:focus-visible{ outline:2px solid #0d6efd; outline-offset:2px; }
@media (max-width:575.98px){
    .pricing-wa-card{ flex-direction:column; align-items:flex-start; }
    .pricing-wa-btn{ width:100%; justify-content:center; }
}

/* ---- Sticky compact CTA bar (pricing page only) ---- */
.pricing-page .pricing-sticky-cta{
    position:fixed;
    inset-inline-start:0; inset-inline-end:0;
    bottom:max(env(safe-area-inset-bottom,0px), 0px);
    z-index:1030;
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.65rem .9rem;
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(150%) blur(8px);
    border-top:1px solid rgba(13,110,253,.18);
    box-shadow:0 -8px 24px -18px rgba(15,23,42,.35);
    opacity:0; transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease;
    pointer-events:none;
}
.pricing-page .pricing-sticky-cta.is-visible{
    opacity:1; transform:translateY(0); pointer-events:auto;
}
.pricing-page .pricing-sticky-cta[hidden]{ display:none; }
.pricing-sticky-msg{ font-weight:600; color:#0f172a; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pricing-sticky-btn{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.55rem 1rem; min-height:44px;
    background:#0d6efd; color:#fff !important;
    border:1px solid #0d6efd; border-radius:10px;
    font-weight:600; text-decoration:none;
    transition:background-color .2s ease, transform .2s ease;
}
.pricing-sticky-btn:hover{ background:#0b5ed7; transform:translateY(-1px); }
.pricing-sticky-btn:focus-visible{ outline:2px solid #0f172a; outline-offset:2px; }
@media (min-width:768px){
    .pricing-page .pricing-sticky-cta{
        inset-inline-start:auto;
        inset-inline-end:1.25rem;
        bottom:1.25rem;
        max-width:380px;
        border:1px solid rgba(13,110,253,.18);
        border-radius:14px;
        box-shadow:0 18px 40px -24px rgba(15,23,42,.45);
    }
}
/* Reserve space on mobile so the bar never covers the footer/CTA */
@media (max-width:767.98px){
    .pricing-page{ padding-bottom:5rem; }
}

/* ---- Branded alerts (replace stock Bootstrap look) ---- */
.dl-alert{
    display:flex; align-items:flex-start; gap:.65rem;
    padding:.85rem 1rem;
    border-radius:12px;
    border:1px solid transparent;
    border-inline-start-width:4px;
    background:#f8fafc;
    color:#0f172a;
    line-height:1.4;
}
.dl-alert > i:first-child{ flex:0 0 auto; font-size:1.05rem; margin-top:.1rem; }
.dl-alert--info{    background:#eff6ff; border-color:#bfdbfe; border-inline-start-color:#0d6efd; color:#0c2d5e; }
.dl-alert--warning{ background:#fff8eb; border-color:#fcd9a8; border-inline-start-color:#d97706; color:#5a3a0a; }
.dl-alert--danger{  background:#fef2f2; border-color:#fecaca; border-inline-start-color:#dc2626; color:#7a1d1d; }
.dl-alert--success{ background:#f0fdf4; border-color:#bbf7d0; border-inline-start-color:#16a34a; color:#14532d; }
.dl-alert .dl-alert-body{ min-width:0; flex:1 1 auto; }
.dl-alert .dl-alert-title{ font-weight:700; margin-bottom:.1rem; }

/* ---- Subtle motion (pricing/checkout pages only) ---- */
.pricing-page .pricing-card{ animation:dlFadeRise .55s ease-out both; }
.pricing-page .row > .col-md-4:nth-child(1) .pricing-card{ animation-delay:.02s; }
.pricing-page .row > .col-md-4:nth-child(2) .pricing-card{ animation-delay:.10s; }
.pricing-page .row > .col-md-4:nth-child(3) .pricing-card{ animation-delay:.18s; }
@keyframes dlFadeRise{
    from{ opacity:0; transform:translateY(10px); }
    to  { opacity:1; transform:translateY(0); }
}
.pricing-page .pricing-price-main{ transition:opacity .2s ease; }

@media (prefers-reduced-motion: reduce){
    .pricing-page *, .pricing-page *::before, .pricing-page *::after,
    .checkout-page *, .checkout-page *::before, .checkout-page *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* ============================================================
   Pricing FAQ — premium accordion (scoped to .pricing-faq)
   ============================================================ */
.pricing-faq{
    background:#fff;
}
.pricing-faq .pricing-faq-title{
    font-size:clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
    letter-spacing:-.01em;
    color:#0f172a;
}
.pricing-faq #pricingFaq{
    --bs-accordion-border-width:0;
    background:transparent;
}
.pricing-faq .pricing-faq-item{
    background:#fff;
    border:1px solid #e6e9ef;
    border-radius:14px;
    margin-bottom:.75rem;
    overflow:hidden;
    transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.pricing-faq .pricing-faq-item:hover{
    border-color:#d6dbe4;
    box-shadow:0 6px 24px -16px rgba(15,23,42,.18);
}
.pricing-faq .pricing-faq-item:has(.accordion-button[aria-expanded="true"]){
    border-color:color-mix(in oklab, var(--bs-primary, #0d6efd) 35%, #e6e9ef);
    box-shadow:0 10px 30px -18px rgba(15,23,42,.22);
    background:color-mix(in oklab, var(--bs-primary, #0d6efd) 4%, #ffffff);
}
.pricing-faq .accordion-button{
    background:transparent !important;
    color:#0f172a !important;
    font-weight:600;
    font-size:1rem;
    line-height:1.45;
    padding:1.1rem 1.25rem;
    box-shadow:none !important;
    border-radius:14px !important;
    display:flex;
    align-items:center;
    gap:1rem;
}
.pricing-faq .accordion-button::after{
    display:none; /* hide Bootstrap's default chevron, use our own */
}
.pricing-faq .accordion-button:focus-visible{
    outline:2px solid var(--bs-primary, #0d6efd);
    outline-offset:2px;
}
.pricing-faq .pricing-faq-q{
    flex:1 1 auto;
}
.pricing-faq .pricing-faq-chevron{
    flex:0 0 auto;
    margin-inline-start:auto;
    width:1.75rem;
    height:1.75rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f1f3f7;
    color:#475569;
    font-size:.9rem;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), background-color .25s ease, color .25s ease;
}
.pricing-faq .accordion-button[aria-expanded="true"] .pricing-faq-chevron{
    transform:rotate(135deg);
    background:var(--bs-primary, #0d6efd);
    color:#fff;
}
.pricing-faq .accordion-collapse.collapsing,
.pricing-faq .accordion-collapse.collapse{
    transition:height .35s cubic-bezier(.2,.7,.2,1);
}
.pricing-faq .accordion-body{
    padding:.25rem 1.25rem 1.25rem;
    color:#5b6573;
    font-size:.97rem;
    line-height:1.75;
    opacity:0;
    transform:translateY(-2px);
    transition:opacity .25s ease .05s, transform .25s ease .05s;
}
.pricing-faq .accordion-collapse.show .accordion-body{
    opacity:1;
    transform:none;
}
/* RTL — uses logical properties already, but ensure chevron stays trailing */
[dir="rtl"] .pricing-faq .accordion-button{
    text-align:right;
}
/* Responsive */
@media (max-width:480px){
    .pricing-faq .accordion-button{
        padding:.95rem 1rem;
        font-size:.95rem;
        gap:.75rem;
    }
    .pricing-faq .accordion-body{
        padding:.25rem 1rem 1.1rem;
        font-size:.93rem;
    }
    .pricing-faq .pricing-faq-chevron{
        width:1.5rem;
        height:1.5rem;
        font-size:.8rem;
    }
}
@media (prefers-reduced-motion: reduce){
    .pricing-faq .pricing-faq-item,
    .pricing-faq .pricing-faq-chevron,
    .pricing-faq .accordion-body,
    .pricing-faq .accordion-collapse.collapsing,
    .pricing-faq .accordion-collapse.collapse{
        transition:none !important;
    }
}

/* ============================================================
   Pricing conversion upgrade — hero CTAs, ribbon, micro, after-pay, sticky meta
   ============================================================ */
.pricing-hero-cta-row{
    display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
}
.pricing-hero-cta-primary,
.pricing-hero-cta-wa{
    min-height:44px;
    padding:.65rem 1.1rem;
    border-radius:10px;
    display:inline-flex; align-items:center;
}
.pricing-hero-cta-wa{
    color:#1f9d55; border-color:#25d366;
    background:#fff;
}
.pricing-hero-cta-wa:hover{
    background:#25d366; color:#fff; border-color:#25d366;
}
@media (max-width:575.98px){
    .pricing-hero-cta-row{ width:100%; }
    .pricing-hero-cta-row .btn{ width:100%; justify-content:center; }
}

.pricing-guarantee-ribbon{
    max-width:920px;
    margin:0 auto 1.75rem;
    background:#f6faff;
    border:1px solid rgba(13,110,253,.15);
    border-radius:999px;
    padding:.6rem 1.1rem;
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:.55rem;
    font-size:.92rem; color:#1f2937; font-weight:500;
    text-align:center;
}
.pricing-guarantee-ribbon i{ color:#0d6efd; margin-inline-end:.2rem; }
.pricing-guarantee-ribbon .dot{ color:#94a3b8; }
@media (max-width:480px){
    .pricing-guarantee-ribbon{
        border-radius:14px;
        padding:.7rem .9rem;
        flex-direction:column; gap:.35rem;
    }
    .pricing-guarantee-ribbon .dot{ display:none; }
}

.pricing-cta-microcopy{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:.4rem;
    margin-top:.55rem;
    font-size:.82rem; color:#566075;
}
.pricing-cta-microcopy .sep{ color:#cbd5e1; }
.pricing-cta-microcopy i{ margin-inline-end:.2rem; }

.after-pay-section .after-pay-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.25rem;
    max-width:1040px;
}
.after-pay-step{
    background:#fff;
    border:1px solid #e6e9ef;
    border-radius:14px;
    padding:1.4rem 1.25rem;
    position:relative;
    transition:transform .25s ease, box-shadow .25s ease;
}
.after-pay-step:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 30px -18px rgba(15,23,42,.25);
}
.after-pay-step .after-pay-num{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:#0d6efd; color:#fff; font-weight:700;
    margin-bottom:.65rem;
}
.after-pay-step .after-pay-title{
    font-weight:700; color:#0f172a; margin-bottom:.25rem; font-size:1.02rem;
}
.after-pay-step .after-pay-sub{
    color:#566075; font-size:.92rem; line-height:1.55; margin:0;
}
@media (max-width:640px){
    .after-pay-section .after-pay-grid{ grid-template-columns:1fr; }
}

/* Sticky CTA: stack message + meta */
.pricing-sticky-text{
    display:flex; flex-direction:column; min-width:0; line-height:1.2;
}
.pricing-sticky-meta{
    font-size:.78rem; color:#566075; font-weight:500;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
    .after-pay-step,
    .pricing-hero-cta-primary,
    .pricing-hero-cta-wa{
        transition:none !important;
    }
}

/* =========================================================
   Instant Access — Checkout reassurance card
   ========================================================= */
.checkout-reassure-card{
    background: linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
    border: 1px solid rgba(13,110,253,.18);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.checkout-reassure-card .reassure-head{
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    margin-bottom:.75rem;
}
.checkout-reassure-card .reassure-icon{
    flex:0 0 auto;
    width:36px; height:36px;
    border-radius:50%;
    display:inline-flex;
    align-items:center; justify-content:center;
    background:#0d6efd; color:#fff;
    font-size:1.05rem;
}
.checkout-reassure-card .reassure-title{
    font-weight:700;
    font-size:1rem;
    line-height:1.2;
    color:#0b2447;
}
.checkout-reassure-card .reassure-sub{
    font-size:.85rem;
    color:#566075;
    margin-top:.2rem;
}
.checkout-reassure-card .reassure-chips{
    list-style:none;
    padding:0;
    margin:0 0 .75rem 0;
    display:flex;
    flex-wrap:wrap;
    gap:.4rem .6rem;
}
.checkout-reassure-card .reassure-chips li{
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    background:#ffffff;
    border:1px solid rgba(13,110,253,.18);
    color:#0b2447;
    font-size:.78rem;
    font-weight:600;
    padding:.3rem .6rem;
    border-radius:999px;
}
.checkout-reassure-card .reassure-chips li i{ color:#198754; }
.checkout-reassure-card .reassure-steps{
    list-style:none;
    counter-reset:none;
    padding:0; margin:0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:.5rem;
}
.checkout-reassure-card .reassure-steps li{
    display:flex;
    align-items:center;
    gap:.5rem;
    background:#fff;
    border:1px solid #e6ecf3;
    border-radius:10px;
    padding:.55rem .65rem;
    font-size:.82rem;
    font-weight:600;
    color:#0b2447;
    min-height:44px;
}
.checkout-reassure-card .reassure-step-num{
    flex:0 0 auto;
    width:22px; height:22px;
    border-radius:50%;
    background:#0d6efd; color:#fff;
    display:inline-flex; align-items:center; justify-content:center;
    font-size:.75rem; font-weight:700;
}
@media (max-width: 575.98px){
    .checkout-reassure-card .reassure-steps{
        grid-template-columns:1fr;
    }
}
[dir="rtl"] .checkout-reassure-card .reassure-head,
[dir="rtl"] .checkout-reassure-card .reassure-chips li,
[dir="rtl"] .checkout-reassure-card .reassure-steps li{
    text-align:right;
}

/* ==================== Pricing duration toggle ==================== */
.pricing-duration-toggle{
    display:inline-flex;
    align-items:stretch;
    margin:0 auto 1.5rem;
    padding:.3rem;
    background:rgba(15,23,42,.05);
    border:1px solid rgba(15,23,42,.08);
    border-radius:999px;
    gap:.25rem;
    position:relative;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
}
.pricing-plans-wrap{display:block}
section .pricing-duration-toggle{display:flex;width:max-content;max-width:100%}
.pricing-duration-toggle .pdt-tab{
    appearance:none;
    border:0;
    background:transparent;
    color:#475569;
    font-weight:600;
    font-size:.95rem;
    padding:.55rem 1.4rem;
    border-radius:999px;
    cursor:pointer;
    line-height:1.2;
    transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
    white-space:nowrap;
}
.pricing-duration-toggle .pdt-tab:hover:not(:disabled):not(.is-active){
    color:#0f172a;
    background:rgba(15,23,42,.04);
}
.pricing-duration-toggle .pdt-tab.is-active{
    background:var(--bs-primary,#0d6efd);
    color:#fff;
    box-shadow:0 4px 14px -4px rgba(13,110,253,.55);
}
.pricing-duration-toggle .pdt-tab:focus-visible{
    outline:2px solid var(--bs-primary,#0d6efd);
    outline-offset:2px;
}
.pricing-duration-toggle .pdt-tab:disabled{
    opacity:.45;
    cursor:not-allowed;
}
/* Center the pill above the cards */
#pricingPlans{display:block}
.pricing-duration-toggle{display:flex}
section > .container > .pricing-duration-toggle,
.container > .pricing-duration-toggle{margin-left:auto;margin-right:auto}
.pricing-page .pricing-duration-toggle{
    margin-left:auto;margin-right:auto;
    width:max-content;max-width:100%;
}
/* Smooth group transition */
.pricing-group{
    animation:pdtFadeIn .22s ease both;
}
@keyframes pdtFadeIn{
    from{opacity:0;transform:translateY(4px)}
    to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
    .pricing-group{animation:none}
    .pricing-duration-toggle .pdt-tab{transition:none}
}
/* RTL */
[dir="rtl"] .pricing-duration-toggle .pdt-tab.is-active{
    box-shadow:0 4px 14px -4px rgba(13,110,253,.55);
}
/* Mobile */
@media (max-width:480px){
    .pricing-duration-toggle{width:100%;justify-content:stretch}
    .pricing-duration-toggle .pdt-tab{flex:1;padding:.55rem .75rem;font-size:.9rem}
}

/* Admin: duration group badge */
.admin-plans__group-badge{
    display:inline-block;
    font-size:.7rem;
    font-weight:600;
    padding:.15rem .5rem;
    border-radius:999px;
    margin-left:.35rem;
    background:rgba(13,110,253,.08);
    color:#0d6efd;
    border:1px solid rgba(13,110,253,.18);
    vertical-align:middle;
}
.admin-plans__group-badge.is-extended{
    background:rgba(111,66,193,.08);
    color:#6f42c1;
    border-color:rgba(111,66,193,.2);
}

/* Legal pages (Privacy, Terms, Refund) — scoped readability tweaks */
.legal-page .legal-container { max-width: 860px; }
.legal-page .card { border-radius: 14px; }
.legal-page .card h2 { letter-spacing: -0.01em; }
[dir="rtl"] .legal-page .text-secondary { line-height: 2; }

/* ============================================================
   Student Dashboard — Premium Redesign (refund-free)
   ============================================================ */
.dash-hero{
    position:relative;
    border-radius:20px;
    padding:2rem 1.75rem;
    color:#fff;
    background:linear-gradient(135deg,#1e3a8a 0%,#3b5bdb 45%,#6f42c1 100%);
    box-shadow:0 12px 32px rgba(30,58,138,.18);
    overflow:hidden;
}
.dash-hero::after{
    content:"";
    position:absolute;
    inset-inline-end:-60px;
    inset-block-start:-60px;
    width:220px;height:220px;border-radius:50%;
    background:rgba(255,255,255,.08);
    pointer-events:none;
}
.dash-hero__inner{position:relative;z-index:1;max-width:760px;}
.dash-hero__eyebrow{
    text-transform:uppercase;letter-spacing:.08em;
    font-size:.72rem;font-weight:600;opacity:.85;margin-bottom:.4rem;
}
.dash-hero__title{
    font-size:clamp(1.6rem,3vw,2.25rem);
    font-weight:800;line-height:1.15;margin:0 0 .5rem;
    overflow-wrap:anywhere;
}
.dash-hero__sub{font-size:.98rem;opacity:.92;margin-bottom:1.1rem;}
.dash-hero__cta-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;}
.dash-hero__cta{color:#1e3a8a;border-radius:999px;padding:.55rem 1.25rem;}
.dash-hero__badge{
    display:inline-flex;align-items:center;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.28);
    color:#fff;font-size:.78rem;font-weight:600;
    padding:.35rem .8rem;border-radius:999px;
}

.dash-section-title{font-size:1.05rem;font-weight:700;color:#1f2937;margin:0;overflow-wrap:anywhere;}
.dash-card{border:0;border-radius:16px;box-shadow:0 4px 18px rgba(15,23,42,.06);}

.dash-next{
    display:flex;align-items:center;gap:1rem;
    padding:1.1rem 1.25rem;border-radius:16px;
    background:#fff;border:1px solid #e5e7eb;
    border-inline-start:4px solid #0d6efd;
    box-shadow:0 4px 14px rgba(15,23,42,.04);
    flex-wrap:wrap;
}
.dash-next--success{border-inline-start-color:#198754;}
.dash-next--warning{border-inline-start-color:#f59e0b;}
.dash-next--info{border-inline-start-color:#0dcaf0;}
.dash-next__icon{
    width:48px;height:48px;border-radius:12px;
    background:rgba(13,110,253,.1);color:#0d6efd;
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;flex-shrink:0;
}
.dash-next--success .dash-next__icon{background:rgba(25,135,84,.12);color:#198754;}
.dash-next--warning .dash-next__icon{background:rgba(245,158,11,.14);color:#b45309;}
.dash-next--info .dash-next__icon{background:rgba(13,202,240,.14);color:#087990;}
.dash-next__body{flex:1 1 240px;min-width:0;}
.dash-next__label{
    text-transform:uppercase;letter-spacing:.06em;
    font-size:.7rem;color:#6b7280;font-weight:600;margin-bottom:.15rem;
}
.dash-next__title{font-weight:700;color:#111827;overflow-wrap:anywhere;}
.dash-next__desc{font-size:.88rem;color:#4b5563;margin-top:.15rem;overflow-wrap:anywhere;}
.dash-next__cta{flex-shrink:0;border-radius:999px;}

.dash-module-card{
    display:flex;align-items:center;gap:.9rem;
    background:#fff;border:1px solid #e5e7eb;border-radius:14px;
    padding:1rem 1.1rem;
    text-decoration:none;color:inherit;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    height:100%;
}
.dash-module-card:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(15,23,42,.08);
    border-color:#c7d2fe;color:inherit;
}
.dash-module-card.is-locked{opacity:.7;}
.dash-module-card__icon{
    width:46px;height:46px;border-radius:12px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    font-size:1.35rem;
    background:rgba(13,110,253,.1);color:#0d6efd;
}
.dash-module-card--success .dash-module-card__icon{background:rgba(25,135,84,.12);color:#198754;}
.dash-module-card--info    .dash-module-card__icon{background:rgba(13,202,240,.14);color:#087990;}
.dash-module-card--warning .dash-module-card__icon{background:rgba(245,158,11,.14);color:#b45309;}
.dash-module-card--primary .dash-module-card__icon{background:rgba(13,110,253,.1);color:#0d6efd;}
.dash-module-card--dark    .dash-module-card__icon{background:rgba(17,24,39,.08);color:#111827;}
.dash-module-card--secondary .dash-module-card__icon{background:rgba(107,114,128,.12);color:#374151;}
.dash-module-card__body{flex:1 1 auto;min-width:0;}
.dash-module-card__title{font-weight:700;color:#111827;overflow-wrap:anywhere;}
.dash-module-card__sub{font-size:.82rem;color:#6b7280;margin-top:.1rem;overflow-wrap:anywhere;}
.dash-module-card__badge{
    display:inline-block;font-size:.65rem;font-weight:700;
    background:#198754;color:#fff;
    padding:.1rem .45rem;border-radius:999px;
    margin-inline-start:.4rem;vertical-align:middle;
    text-transform:uppercase;letter-spacing:.05em;
}
.dash-module-card__chev{color:#9ca3af;font-size:1.1rem;flex-shrink:0;}

.dash-empty{
    text-align:center;padding:1.5rem;color:#6b7280;
}
.dash-empty i{font-size:2rem;display:block;margin-bottom:.4rem;}

.dash-profile-card{
    border-inline-start:4px solid #0dcaf0;
}
.dash-profile-card__icon{
    width:44px;height:44px;border-radius:12px;
    background:rgba(13,202,240,.14);color:#087990;
    display:flex;align-items:center;justify-content:center;
    font-size:1.3rem;
}

@media (max-width: 575.98px){
    .dash-hero{padding:1.5rem 1.25rem;}
    .dash-next{padding:1rem;}
    .dash-next__cta{width:100%;justify-content:center;}
}

[dir="rtl"] .dash-hero::after{inset-inline-end:auto;inset-inline-start:-60px;}
[dir="rtl"] .dash-next__cta i.bi-arrow-right::before,
[dir="rtl"] .dash-module-card__chev i.bi-arrow-right::before{content:"\f12f";} /* mirror arrow */

/* ── Dashboard Affiliate Pill (scoped) ───────────────────── */
.dash-affiliate-pill{
    display:inline-flex;align-items:center;gap:.45rem;
    height:36px;padding:0 .95rem;
    border-radius:999px;
    font-size:.875rem;font-weight:600;line-height:1;
    color:#1f2937;text-decoration:none;
    background:linear-gradient(135deg,#fff7ed 0%,#fef3c7 100%);
    border:1px solid rgba(217,119,6,.35);
    box-shadow:0 1px 2px rgba(0,0,0,.04);
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,background .15s ease;
    max-width:100%;
    overflow-wrap:anywhere;
    white-space:normal;
    cursor:pointer;
}
.dash-affiliate-pill:hover,
.dash-affiliate-pill:focus-visible{
    color:#111827;text-decoration:none;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(217,119,6,.18);
    border-color:rgba(217,119,6,.55);
    background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);
}
.dash-affiliate-pill__icon{
    font-size:1rem;color:#b45309;flex:0 0 auto;
}
.dash-affiliate-pill__amount{
    font-weight:700;color:#92400e;margin-inline-start:.15rem;
}
.dash-affiliate-modal__list li{margin-bottom:.4rem;}
.dash-affiliate-modal__list li:last-child{margin-bottom:0;}

@media (max-width: 575.98px){
    .dash-affiliate-pill{width:100%;justify-content:center;}
}

/* ============================================================
   Affiliate admin — unified, full-width shell (scoped to .aff-admin)
   Scoped so the rest of the admin area is unaffected. Layout only;
   no business logic depends on these styles.
   ============================================================ */
.aff-admin .card{width:100%;}
.aff-admin .page-header{margin-bottom:1rem;}

/* Sub-navigation: clearly highlight the active tab */
.aff-subnav .nav-pills .nav-link{
    border-radius:.5rem;font-weight:500;transition:background-color .12s ease,color .12s ease;
}
.aff-subnav .nav-pills .nav-link:not(.active):hover{
    background:#eef2ff;color:#0d6efd;
}
.aff-subnav .nav-pills .nav-link.active{
    background:#0d6efd;color:#fff;
    box-shadow:0 2px 6px rgba(13,110,253,.28);
}

/* Forms span the full available width on large screens */
@media (min-width:992px){
    .aff-admin .aff-form-grid > [class*="col-"]{display:flex;}
    .aff-admin .aff-form-grid > [class*="col-"] > .card{flex:1 1 auto;}
}

/* ============================================================
   Pricing & Checkout premium redesign (scoped, UI only)
   ============================================================ */

/* Slim guarantee (title only) */
.guarantee-card.guarantee-card--slim{
  display:inline-flex; align-items:center; gap:.75rem;
  width:auto; max-width:none;
  padding:.85rem 1.4rem; margin-top:2.5rem;
  border-radius:999px;
}
.guarantee-card.guarantee-card--slim .guarantee-icon{
  width:40px; height:40px; font-size:1.2rem; margin-bottom:0; flex:0 0 auto;
}
.guarantee-card.guarantee-card--slim .guarantee-body{ text-align:start; }
.guarantee-card.guarantee-card--slim .guarantee-title{ margin:0; }

/* Centered full-detail guarantee block (title + body + note) */
.guarantee-card.guarantee-card--centered{
  display:block;
  max-width:600px;
  padding:1.75rem 1.5rem;
  text-align:center;
}
.guarantee-card.guarantee-card--centered .guarantee-icon{
  width:52px; height:52px; font-size:1.5rem; margin:0 auto .85rem;
}
.guarantee-card.guarantee-card--centered .guarantee-title{
  font-size:1.15rem; font-weight:700; margin-bottom:.6rem;
}
.guarantee-card.guarantee-card--centered p{
  color:#4a5568; font-size:.95rem; margin-bottom:.25rem;
}
.guarantee-card.guarantee-card--centered .guarantee-note{
  font-size:.8rem; color:#6c757d; font-style:italic; margin-bottom:0;
}

/* "Everything included" — lighter surface than the pricing cards */
.pricing-includes-section{ background:#f8fafc; }

/* FAQ show more / less */
.pricing-faq-more{ text-align:center; margin-top:1.25rem; }
.pricing-faq-more-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.25rem;
  background:#fff; color:var(--bs-primary,#0d6efd);
  border:1px solid color-mix(in oklab, var(--bs-primary,#0d6efd) 35%, #e6e9ef);
  border-radius:999px; font-weight:600; cursor:pointer;
  transition:background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pricing-faq-more-btn:hover{
  background:color-mix(in oklab, var(--bs-primary,#0d6efd) 6%, #fff);
  box-shadow:0 8px 22px -14px rgba(13,110,253,.5);
}
.pricing-faq-more-btn:focus-visible{ outline:2px solid var(--bs-primary,#0d6efd); outline-offset:2px; }
.pricing-faq-more-btn i{ font-size:.85rem; transition:transform .25s ease; }
.pricing-faq-more-btn.is-expanded i{ transform:rotate(180deg); }

/* Checkout — stronger "Choose how to pay" title */
.checkout-section-title{
  display:flex; align-items:center; gap:.6rem;
  font-size:1.15rem; font-weight:700; color:#0f172a;
  letter-spacing:-.01em;
}
.checkout-section-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:.6rem; flex:0 0 auto;
  background:color-mix(in oklab, var(--bs-primary,#0d6efd) 12%, #fff);
  color:var(--bs-primary,#0d6efd); font-size:1rem;
}

/* Checkout — premium order summary */
.checkout-summary-card{
  background:#fff;
  border:1px solid #e6e9ef;
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 12px 30px -22px rgba(15,23,42,.35);
}
.checkout-summary-head{
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1.1rem;
  background:linear-gradient(135deg,
    var(--bs-primary,#0d6efd),
    color-mix(in oklab, var(--bs-primary,#0d6efd) 78%, #000));
  color:#fff;
}
.checkout-summary-head-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9rem; height:1.9rem; border-radius:.55rem; flex:0 0 auto;
  background:rgba(255,255,255,.18); font-size:1rem;
}
.checkout-summary-head-title{ font-weight:700; letter-spacing:.01em; }
.checkout-summary-body{ padding:1rem 1.1rem 1.1rem; }
.checkout-summary-list{ list-style:none; margin:0; padding:0; }
.checkout-summary-list li{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:.5rem 0;
  border-bottom:1px dashed #eef1f6;
}
.checkout-summary-list li:last-child{ border-bottom:0; }
.checkout-summary-list .csl-label{ color:#64748b; font-size:.9rem; }
.checkout-summary-list .csl-value{ font-weight:600; color:#0f172a; text-align:end; }
.checkout-summary-total{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  margin-top:.85rem; padding-top:.85rem;
  border-top:2px solid #eef1f6;
}
.checkout-summary-total .cst-label{ font-weight:700; color:#0f172a; }
.checkout-summary-total .cst-value{
  font-weight:800; font-size:1.25rem; color:var(--bs-primary,#0d6efd);
}

/* ============================================================
   Public marketing sections (home / affiliate / about)
   Added for the premium public UI upgrade. RTL-safe via
   logical properties; Bootstrap RTL handles utility flips.
   ============================================================ */

/* Value / benefit cards */
.value-card{
  border:1px solid #eef1f6;
  box-shadow:var(--dl-shadow, 0 .5rem 1.5rem rgba(0,0,0,.06));
  transition:transform .2s ease, box-shadow .2s ease;
}
.value-card:hover{
  transform:translateY(-4px);
  box-shadow:0 1rem 2rem rgba(0,0,0,.1);
}

/* How-it-works steps */
.step-card{
  border:1px solid #eef1f6;
  box-shadow:var(--dl-shadow, 0 .5rem 1.5rem rgba(0,0,0,.06));
  transition:transform .2s ease, box-shadow .2s ease;
}
.step-card:hover{ transform:translateY(-4px); }
.step-number{
  width:2.75rem;
  height:2.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-weight:800;
  font-size:1.25rem;
  color:#fff;
  background:linear-gradient(135deg, var(--dl-primary, #0056b3), var(--dl-primary-dk, #003d80));
}

/* Pricing teaser band */
.pricing-teaser{
  background:#fff;
  border:1px solid #eef1f6;
  box-shadow:var(--dl-shadow, 0 .5rem 1.5rem rgba(0,0,0,.06));
}

/* Commission tiers table (affiliate landing) */
.tier-table thead th{
  background:var(--dl-primary, #0056b3);
  color:#fff;
  border-bottom:0;
  font-weight:600;
}
.tier-table tbody tr:hover{ background:#f8fafc; }

/* FAQ accordion polish (home + affiliate) */
.home-faq .accordion-item{
  border:1px solid #eef1f6;
  border-radius:var(--dl-radius, .5rem)!important;
  margin-bottom:.75rem;
  overflow:hidden;
}
.home-faq .accordion-button{ font-weight:600; }
.home-faq .accordion-button:not(.collapsed){
  background:var(--dl-primary-soft, #eef4fb);
  color:var(--dl-primary-dk, #003d80);
  box-shadow:none;
}
.home-faq .accordion-button:focus{
  box-shadow:0 0 0 .2rem rgba(0,86,179,.18);
}

/* Auth trust strip */
.auth-trust{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid #eef1f6;
}
.auth-trust-item{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.78rem;
  color:#64748b;
}
.auth-trust-item i{ color:var(--dl-primary, #0056b3); }

/* ============================================================
   Premium nav, dropdowns, footer & WhatsApp button (Task #24)
   Mobile-first, RTL-safe (logical properties). No new libs.
   ============================================================ */

/* ── Auth card title (h4→h1 keeps the same visual scale) ── */
.auth-card-title {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

/* ── Premium navbar ─────────────────────────────────────── */
.dl-navbar {
    backdrop-filter: saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.dl-navbar .navbar-brand img { transition: transform var(--dl-transition); }
.dl-navbar .navbar-brand:hover img { transform: scale(1.03); }

/* Nav links: subtle animated underline + clear active state */
.dl-navbar .navbar-nav .nav-link {
    position: relative;
    font-weight: 500;
    padding-inline: .15rem;
    margin-inline: .55rem;
    opacity: .9;
    transition: opacity var(--dl-transition);
}
.dl-navbar .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -.35rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dl-transition);
}
.dl-navbar .navbar-nav .nav-link:hover,
.dl-navbar .navbar-nav .nav-link:focus-visible { opacity: 1; }
.dl-navbar .navbar-nav .nav-link:hover::after,
.dl-navbar .navbar-nav .nav-link:focus-visible::after,
.dl-navbar .navbar-nav .nav-link.active::after { transform: scaleX(1); }
.dl-navbar .navbar-nav .nav-link.active { opacity: 1; font-weight: 600; }

/* Pill buttons on the right get a touch more polish */
.dl-navbar .btn { transition: transform var(--dl-transition), box-shadow var(--dl-transition); }
.dl-navbar .btn:hover { transform: translateY(-1px); }

/* ── Referral CTA pill (student area) ───────────────────── */
.dl-refer-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    color: #3d2c00;
    background: linear-gradient(135deg, #ffe7a3 0%, #f7c948 50%, #e8a200 100%);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 999px;
    padding: .42rem .85rem;
    box-shadow: 0 2px 8px rgba(232,162,0,.45);
    white-space: nowrap;
    text-decoration: none;
    transition: transform var(--dl-transition), box-shadow var(--dl-transition), filter var(--dl-transition);
}
.dl-refer-cta:hover,
.dl-refer-cta:focus-visible {
    color: #3d2c00;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(232,162,0,.6);
    filter: brightness(1.03);
}
.dl-refer-cta i { font-size: 1rem; }
/* Compact (icon-only) on cramped desktop widths to avoid nav overflow.
   Runs up to 1399.98px: the Bootstrap container is only 1140px from 1200–1399px
   (7 student links + language + refer + profile do not fit with the full CTA
   text there); at >=1400px the container widens to 1320px and full text fits. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .dl-refer-cta .dl-refer-cta-text { display: none; }
    .dl-refer-cta { padding: .42rem .55rem; }
}

/* ── Desktop nav action group: even spacing, no crowding ──── */
/* Applies to the right-hand action cluster (language / refer / profile /
   auth buttons) on the Sprafo navbar only. The cluster must never wrap to a
   second row while the navbar is expanded (>=1200px / xl): the markup no longer
   carries Bootstrap's `.flex-wrap` utility (which is `!important` and would
   override this), and we force nowrap here for robustness. Scoped to
   `.dl-navbar` so unrelated Bootstrap navbars are untouched. */
@media (min-width: 1200px) {
    .dl-navbar .navbar-collapse > .dl-nav-actions {
        gap: .75rem !important;
        flex-wrap: nowrap;
        margin-inline-start: 1rem;
    }
    .dl-navbar .navbar-collapse > .dl-nav-actions > .dropdown > .btn,
    .dl-navbar .navbar-collapse > .dl-nav-actions .dl-refer-cta,
    .dl-navbar .navbar-collapse > .dl-nav-actions .dl-profile-trigger {
        white-space: nowrap;
    }
    /* Keep the profile name from expanding without bound on tight widths */
    .dl-navbar .navbar-collapse > .dl-nav-actions .dl-profile-trigger > span {
        max-width: 14ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* Xl desktop (1200–1599px): tighten link spacing, hide referral CTA text,
   and compress profile name so the full one-row layout fits without overflow
   even with long German text (e.g. "Empfehlen & Prämien verdienen"). */
@media (min-width: 1200px) and (max-width: 1599.98px) {
    .dl-navbar .navbar-nav .nav-link { margin-inline: .28rem; padding-inline: .36rem; }
    .dl-navbar .navbar-collapse > .dl-nav-actions { gap: .45rem !important; margin-inline-start: .6rem; }
    .dl-navbar .navbar-collapse > .dl-nav-actions .dl-profile-trigger > span {
        max-width: 10ch;
    }
    /* Referral CTA: icon only at xl so long translated strings don't overflow */
    .dl-navbar .dl-refer-cta-text { display: none; }
}

/* Toggler focus ring for keyboard users */
.dl-navbar .navbar-toggler:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .35);
}

/* Mobile / tablet menu (below xl breakpoint): clearer separation + comfortable spacing */
@media (max-width: 1199.98px) {
    .dl-navbar .navbar-collapse {
        margin-top: .75rem;
        padding-top: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .dl-navbar .navbar-nav .nav-link {
        margin-inline: 0;
        padding-block: .5rem;
    }
    .dl-navbar .navbar-nav .nav-link::after { display: none; }
    .dl-navbar .navbar-nav .nav-link.active {
        border-inline-start: 3px solid rgba(255, 255, 255, .85);
        padding-inline-start: .6rem;
    }
    /* Right-side controls stack full width and breathe.
       flex-wrap:wrap replaces the Bootstrap `.flex-wrap` utility that was
       removed from the markup, so the cluster still stacks on mobile. */
    .dl-navbar .navbar-collapse > .d-flex {
        margin-top: .5rem;
        gap: .5rem !important;
        flex-wrap: wrap;
    }
    .dl-navbar .navbar-collapse > .d-flex .dropdown,
    .dl-navbar .navbar-collapse > .d-flex > .btn { width: 100%; }
    .dl-navbar .navbar-collapse > .d-flex .dropdown > .btn { width: 100%; }
}

/* ── Premium dropdown surface (language switcher) ───────── */
.dl-nav-dropdown {
    min-width: 200px;
    padding: .4rem 0;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: var(--dl-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: var(--z-dropdown);
}
.dl-nav-dropdown .dropdown-header {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.dl-nav-dropdown .dropdown-item {
    padding: .5rem 1rem;
    font-size: .92rem;
    transition: background-color var(--dl-transition), color var(--dl-transition);
}
.dl-nav-dropdown .dropdown-item.active,
.dl-nav-dropdown .dropdown-item:active {
    background-color: rgba(0, 86, 179, .1);
    color: var(--dl-primary);
    font-weight: 600;
}

/* ── Premium footer ─────────────────────────────────────── */
.dl-footer {
    background: linear-gradient(180deg, #1a1d21 0%, #121417 100%) !important;
    border-top: 3px solid var(--dl-primary);
}
.dl-footer .footer-link {
    color: #adb5bd;
    transition: color var(--dl-transition), padding-inline-start var(--dl-transition);
}
.dl-footer .footer-link:hover,
.dl-footer .footer-link:focus-visible {
    color: #fff;
    padding-inline-start: .2rem;
}
.dl-footer h6 { letter-spacing: .05em; }

/* Footer social icons */
.dl-footer-socials { margin-top: .25rem; }
.dl-footer-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    font-size: 1.05rem;
    transition: transform var(--dl-transition), background-color var(--dl-transition), color var(--dl-transition);
}
.dl-footer-social:hover,
.dl-footer-social:focus-visible {
    color: #fff;
    background: var(--dl-primary);
    transform: translateY(-2px);
}

/* ── Floating WhatsApp button ───────────────────────────── */
.dl-wa-float {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-end: 1.5rem;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.85rem;
    height: 3.85rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.9rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .24), 0 0 0 0 rgba(37, 211, 102, .4);
    animation: dl-wa-glow 2.8s ease-in-out infinite;
    transition: transform var(--dl-transition), box-shadow var(--dl-transition), background-color var(--dl-transition);
}
.dl-wa-float:hover,
.dl-wa-float:focus-visible {
    color: #fff;
    background: #1ebe5b;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3), 0 0 0 .5rem rgba(37, 211, 102, 0);
}
.dl-wa-float:focus-visible {
    outline: 3px solid rgba(37, 211, 102, .45);
    outline-offset: 2px;
}
@keyframes dl-wa-glow {
    0%   { box-shadow: 0 6px 18px rgba(0, 0, 0, .24), 0 0 0 0 rgba(37, 211, 102, .4); }
    70%  { box-shadow: 0 6px 18px rgba(0, 0, 0, .24), 0 0 0 .55rem rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .24), 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (max-width: 575.98px) {
    .dl-wa-float {
        width: 3.35rem;
        height: 3.35rem;
        font-size: 1.6rem;
        inset-block-end: 1rem;
        inset-inline-end: 1rem;
    }
}

/* ── Community group buttons (WhatsApp / Telegram) ───────── */
.dl-group-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    font-weight: 600;
    border: none;
    color: #fff;
    transition: transform var(--dl-transition), box-shadow var(--dl-transition), filter var(--dl-transition);
}
.dl-group-btn:hover,
.dl-group-btn:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    filter: brightness(1.04);
}
.dl-group-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
.dl-group-btn-wa {
    background: #25d366;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .45);
}
.dl-group-btn-wa:hover,
.dl-group-btn-wa:focus-visible { background: #1ebe5b; box-shadow: 0 10px 26px rgba(37, 211, 102, .6); }
.dl-group-btn-tg {
    background: #2aabee;
    box-shadow: 0 6px 18px rgba(42, 171, 238, .45);
}
.dl-group-btn-tg:hover,
.dl-group-btn-tg:focus-visible { background: #1d97d6; box-shadow: 0 10px 26px rgba(42, 171, 238, .6); }

.dl-community-section { background: var(--dl-light, #f8f9fa); }
.dl-community-card {
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

@media (prefers-reduced-motion: reduce) {
    .dl-wa-float,
    .dl-group-btn,
    .dl-navbar .btn,
    .dl-footer-social { transition: none; }
    .dl-wa-float { animation: none; }
}

/* ============================================================
   Student Navigation — Premium Polish (UI/UX task)
   Visual-only. Scoped to .student-sidebar and the logged-in
   profile UI so admin + public layouts are unaffected.
   ============================================================ */

/* ── Sidebar surface ─────────────────────────────────────── */
.student-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-right: 1px solid #eceff5;
}
body.rtl .student-sidebar {
    border-right: none;
    border-left: 1px solid #eceff5;
}
.student-sidebar-inner { padding: 0 .85rem; }

/* ── Premium profile card (gradient + animated sheen) ────── */
.student-sidebar .sidebar-profile-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1f3a 0%, #123a6b 55%, #0a59a6 100%);
    background-size: 200% 200%;
    animation: dlCardSheen 14s ease infinite;
    border-radius: 1rem;
    padding: 1.15rem 1rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0 14px 30px -14px rgba(11, 31, 58, .75);
}
.student-sidebar .sidebar-profile-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(120% 80% at 80% 0%, rgba(59, 130, 246, .45), transparent 60%);
}
.student-sidebar .sidebar-profile-card .avatar-circle {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .02em;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .55);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
    margin-left: auto;
    margin-right: auto;
}
.student-sidebar .sidebar-profile-card .profile-name {
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3;
    margin: .6rem 0 0;
}
.student-sidebar .sidebar-profile-card .profile-email {
    color: rgba(255, 255, 255, .78);
    font-size: .8rem;
    margin-top: .15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

/* ── Nav items (premium pills) ───────────────────────────── */
.student-sidebar .sidebar-nav .nav-link {
    position: relative;
    color: #475467;
    font-weight: 500;
    font-size: .9rem;
    padding: .62rem .8rem;
    border-radius: .7rem;
    gap: .7rem;
    margin-bottom: .2rem;
    transition: background-color .18s ease, color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}
.student-sidebar .sidebar-nav .nav-link i {
    font-size: 1.05rem;
    width: 1.4rem;
    text-align: center;
    flex-shrink: 0;
}
.student-sidebar .sidebar-nav .nav-link:hover {
    background: #eef4ff;
    color: var(--dl-primary);
    transform: translateX(2px);
}
body.rtl .student-sidebar .sidebar-nav .nav-link:hover { transform: translateX(-2px); }
.student-sidebar .sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, #0056b3 0%, #2f6fed 100%);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 18px -7px rgba(0, 86, 179, .7);
    transform: none;
}
.student-sidebar .sidebar-nav .nav-link.active i { color: #fff; }
/* Keep logout red on hover (override generic hover colour) */
.student-sidebar .sidebar-nav .nav-link.text-danger:hover {
    background: #fff0f0;
    color: #dc3545 !important;
    transform: translateX(2px);
}
body.rtl .student-sidebar .sidebar-nav .nav-link.text-danger:hover { transform: translateX(-2px); }

/* Refined separators */
.student-sidebar .sidebar-nav-section hr {
    border: 0;
    height: 1px;
    opacity: 1;
    background: linear-gradient(90deg, transparent, #e2e8f0 18%, #e2e8f0 82%, transparent);
    margin: .6rem .25rem;
}

/* Collapsed rail: no horizontal nudge on hover */
html.nav-collapsed .student-sidebar .sidebar-nav .nav-link:hover,
.student-layout.nav-collapsed .student-sidebar .sidebar-nav .nav-link:hover {
    transform: none;
}

/* ── Top-nav profile trigger — animated gradient ring ────── */
/* The ring uses a mask-composite cut-out; gate it behind @supports so
   browsers without mask-composite simply show no ring (no full overlay). */
.dl-profile-trigger { position: relative; }
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .dl-profile-trigger::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(120deg, #0056b3, #4f7cff, #00b4d8, #7b61ff, #0056b3);
        background-size: 300% 300%;
        animation: dlProfileGrad 9s ease infinite;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
                mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
    }
}
.dl-profile-trigger:hover { box-shadow: 0 3px 14px rgba(0, 86, 179, .35); }

/* ── Premium user dropdown surface ───────────────────────── */
.dl-user-dropdown {
    border-radius: .95rem;
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .32);
    overflow: hidden;
    padding-top: 0;
}
.dl-user-dropdown .dl-dropdown-header {
    background: linear-gradient(135deg, #0b1f3a 0%, #0a59a6 100%);
    color: #fff;
    line-height: 1.35;
}
.dl-user-dropdown .dl-dropdown-header .dl-dd-email {
    color: rgba(255, 255, 255, .78);
    overflow-wrap: anywhere;
}
.dl-dropdown-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #06b6d4);
    border: 2px solid rgba(255, 255, 255, .5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.dl-dropdown-id { min-width: 0; }
.dl-user-dropdown .dropdown-item {
    border-radius: .55rem;
    margin: .1rem .4rem;
    padding: .5rem .6rem;
    transition: background-color .15s ease, color .15s ease;
}
.dl-user-dropdown .dropdown-item:hover,
.dl-user-dropdown .dropdown-item:focus {
    background: #eef4ff;
    color: var(--dl-primary);
}
.dl-user-dropdown .dropdown-item.text-danger:hover,
.dl-user-dropdown .dropdown-item.text-danger:focus {
    background: #fff0f0;
    color: #dc3545 !important;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes dlProfileGrad {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes dlCardSheen {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Reduced motion: freeze decorative animations ────────── */
@media (prefers-reduced-motion: reduce) {
    .dl-profile-trigger::before,
    .student-sidebar .sidebar-profile-card {
        animation: none !important;
    }
    .student-sidebar .sidebar-nav .nav-link:hover,
    .student-sidebar .sidebar-nav .nav-link.text-danger:hover {
        transform: none;
    }
}

/* Currency selector reused inside Billing cards and Checkout Order Summary.
   Overrides the pricing-page centering so it sits neatly at the top of a card,
   and keeps the dropdown menu from being clipped by card rounding/overflow. */
.currency-selector-inline{
  max-width:100%; margin:0 0 1rem;
  justify-content:space-between;
}
.currency-selector-inline .pricing-currency-note{ font-size:.85rem; }
.checkout-summary-body .currency-selector-inline,
.checkout-mobile-summary .currency-selector-inline{ margin-bottom:1rem; }
.checkout-mobile-summary .currency-selector-inline{ margin-top:.75rem; }

/* ── Subscription Expiry Banner ─────────────────────────────────────────────
   Light-mode base. Dark-mode overrides live in sprafo-theme.css.
   Two visual variants:
     .expiry-banner--expiring  → warm yellow  (expiring soon / expires today)
     .expiry-banner--expired   → soft red     (already expired)               */
.expiry-banner {
    border-bottom: 1px solid transparent;
    font-size: .875rem;
}
.expiry-banner--expiring {
    background:    #fff8e1;
    border-bottom-color: #f0d27a;
    color:         #5b4708;
}
.expiry-banner--expiring i {
    color: #b8860b;
}
.expiry-banner--expired {
    background:    #fff0f0;
    border-bottom-color: #f5c6cb;
    color:         #58151c;
}
.expiry-banner--expired i {
    color: #dc3545;
}

/* ── Email Verification Banner ──────────────────────────────────────────────
   Light-mode base. Dark-mode overrides live in sprafo-theme.css.            */
.verify-banner {
    background:    #fff8e1;
    border-bottom: 1px solid #f0d27a;
    color:         #5b4708;
    font-size: .875rem;
}
.verify-banner i {
    color: #b8860b;
}