/* Re-skin the default-new / Bootstrap components with Spedia tokens. Loaded after spedia.css. */
:root { --bs-primary: #0dbbc3; --bs-body-font-family: "Al Qabas", "Segoe UI", Tahoma, Arial, sans-serif; }
body, button, input, select, textarea { font-family: "Al Qabas", "Segoe UI", Tahoma, Arial, sans-serif; }
.btn-primary, .asl-btn-primary { background: var(--turquoise); border-color: var(--turquoise); border-radius: 999px; }
.btn-primary:hover, .asl-btn-primary:hover { background: var(--turquoise-dark); border-color: var(--turquoise-dark); }
.form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); }
.form-control:focus, .form-select:focus { border-color: var(--turquoise); box-shadow: 0 0 0 3px rgba(13, 187, 195, .18); }
.card { border-radius: var(--radius-md); border-color: var(--border); }
a:hover { color: var(--turquoise-dark); }

/* Force Al Qabas over legacy per-class fonts, but keep icon fonts intact. */
body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="icon-"]):not(svg):not(svg *) {
    font-family: "Al Qabas", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Legacy asl-pages.css paints the whole site beige with a high-specificity selector; restore Spedia's backgrounds. */
:root:not([data-bs-theme="dark"]) body { background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #f7fbfc 100%); }
:root:not([data-bs-theme="dark"]) body.legal-body { background: #f7fbfc; }

/* Auth pages: extra fields Spedia's OTP card doesn't have */
.sp-auth .login-form .login-label { margin-top: 14px; }
.sp-auth .login-form .login-primary-button { margin-top: 22px; }
.sp-auth-check { display: flex; gap: 8px; align-items: center; margin-top: 16px; font-size: 14px; }
.sp-auth-file { width: 100%; margin-top: 6px; }
.sp-auth-help { display: block; opacity: .7; margin-top: 4px; }
.sp-auth-textarea { width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); padding: 12px; font: inherit; margin-top: 6px; }
.sp-auth-social { margin-top: 18px; text-align: center; }
.login-brand-text { font-size: 24px; color: var(--navy); }

.sp-auth .login-legal, .sp-auth .login-legal a { color: var(--gray); opacity: 1; }

/* Cookie consent in Spedia style: compact white card instead of the big dark box */
.cookieConsentContainer {
    background: #fff !important; color: var(--navy) !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important; padding: 16px 18px !important;
    width: min(380px, calc(100vw - 32px)) !important; inset-inline-end: 16px !important; bottom: 16px !important;
    opacity: 1 !important;
}
.cookieConsentContainer .cookieDesc p, .cookieConsentContainer .cookieDesc { color: var(--navy) !important; font-size: 13px !important; line-height: 1.6 !important; }
.cookieConsentContainer .cookieDesc a { color: var(--turquoise-dark) !important; }
.cookieConsentContainer .cookieButton a { background: var(--turquoise) !important; border-radius: 999px !important; color: #fff !important; padding: 8px 18px !important; }

/* Legacy default-new styles share the .course-card class name (negative margin, etc.); reset inside Spedia's catalog. */
.catalog-grid .course-card { margin: 0; transform: none; }

/* Course page: our extra actions (buy now / remove / gift) and the "about" block */
.course-access-button { display: flex; align-items: center; justify-content: center; text-decoration: none; width: 100%; text-align: center; }
.course-access-button + .course-access-button { margin-top: 10px; }
.course-access-button.sp-access-secondary { background: transparent; color: var(--navy); border: 1px solid var(--border); box-shadow: none; }
.sp-course-about-body { line-height: 1.9; color: var(--navy); }
.sp-course-about-body img { max-width: 100%; height: auto; }
.course-topic[onclick] { cursor: pointer; }

/* Account pages: stack the old sidebar (now Spedia hero + tabs) above the content, Spedia width */
body.account-page .bread-crumb { display: none; }
body.account-page .wish-list-body > .container { max-width: 1120px; padding-top: 28px; padding-bottom: 60px; }
body.account-page .wish-list-body > .container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; width: 100%; }
/* The strip is fit-content in spedia.css, so on narrow screens it grows past the
   viewport and its fixed 112px tabs let long labels (e.g. "Instructor followings")
   spill into the neighbouring "Account" tab. Pin it to the column, size every tab to
   its own label and let the rows wrap instead of clipping. */
body.account-page .account-tabs { margin: 18px 0 26px; width: 100%; max-width: 100%; flex-wrap: wrap; row-gap: 6px; align-content: flex-start; overflow-x: auto; }
body.account-page .account-tab { flex: 1 1 auto; min-width: 112px; text-decoration: none; white-space: nowrap; }
body.account-page .account-tab .badge { margin-inline-start: 6px; }
.sp-progress { height: 6px; border-radius: 999px; background: var(--cyan-light); overflow: hidden; margin: 10px 0 14px; }
.sp-progress > span { display: block; height: 100%; background: var(--turquoise); border-radius: inherit; }
body.account-page .account-payment-heading h3 a, body.account-page .account-payment-numbers a { color: inherit; text-decoration: none; }
body.account-page .account-course-actions { grid-template-columns: 1fr !important; gap: 10px !important; }
body.account-page .account-course-action { text-decoration: none; }

/* Breadcrumb: replace old photo with Spedia navy gradient */
.bread-crumb {
    background-image:
        linear-gradient(135deg, var(--navy, #0b1f3a) 0%, #0d2a52 50%, #0a1e38 100%) !important;
    background-size: cover !important;
    min-height: 200px !important;
    position: relative;
}
.bread-crumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 20% 50%, rgba(13,187,195,.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(13,187,195,.08) 0%, transparent 70%);
    pointer-events: none;
}
.bread-crumb .container { position: relative; z-index: 1; }
.bread-crumb h1 { color: #fff; }
.bread-crumb a, .bread-crumb .breadcrumb-item, .bread-crumb .breadcrumb-item span { color: rgba(255,255,255,.75) !important; }
.bread-crumb .breadcrumb-item.active span { color: var(--turquoise, #0dbbc3) !important; }
.bread-crumb .fa-chevron-right { color: rgba(255,255,255,.4); font-size: .7rem; }

/* ── Header height token (matches spedia.css header padding + ~44px nav row) ── */
:root {
    --header-h: 72px;  /* mobile: 18px safe-area padding + ~54px nav */
}
@media (min-width: 480px)  { :root { --header-h: 78px; } }
@media (min-width: 760px)  { :root { --header-h: 90px; } }  /* desktop: 25px padding + ~65px nav */
@media (min-width: 1024px) { :root { --header-h: 96px; } }

/* ── Breadcrumb: push content below the absolute header at every breakpoint ── */
.bread-crumb {
    padding-top: calc(var(--header-h) + 20px) !important;
    min-height: calc(var(--header-h) + 120px) !important;
}

/* ── Header brand/nav text: white on non-home pages (header floats over navy breadcrumb) ── */
body:not(.home-page) .site-header .brand-logo-text,
body:not(.home-page) .site-header .brand-copy strong {
    color: #fff;
}
body:not(.home-page) .site-header .brand-copy small {
    background: var(--turquoise, #0dbbc3);
    color: #fff;
}
body:not(.home-page) .site-header .catalog-back-link {
    color: rgba(255,255,255,.85);
}
body:not(.home-page) .site-header .catalog-back-link:hover {
    color: #fff;
}

/* ── Visited link color fix: prevent browser default purple from showing after hover ── */
.nav-account-menu-link:visited { color: #40545d; }
.nav-account-menu-link:visited:hover { color: #178f80; }
.catalog-back-link:visited { color: #536273; }
body:not(.home-page) .site-header .catalog-back-link:visited { color: rgba(255,255,255,.85); }


/* ── Subscription paywall modal (locked lessons) ── */
.sp-paywall { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px;
    background: rgba(11, 31, 58, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sp-paywall[hidden] { display: none; }
.sp-paywall-card { position: relative; width: 100%; max-width: 410px; padding: 32px 26px 22px; text-align: center;
    background: #fff; border-radius: 28px; box-shadow: var(--shadow-lg); animation: spPaywallIn .22s ease-out; }
@keyframes spPaywallIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .sp-paywall-card { animation: none; } }
.sp-paywall-close { position: absolute; top: 14px; left: 14px; width: 36px; height: 36px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: #f1f3f6; color: var(--navy); cursor: pointer; }
.sp-paywall-close:hover { background: #e6e9ef; }
.sp-paywall-icon { width: 60px; height: 60px; margin: 0 auto 12px; display: grid; place-items: center;
    border-radius: 16px; background: var(--cyan-light); color: var(--turquoise-dark); }
.sp-paywall-brand { display: block; margin-bottom: 6px; color: var(--turquoise-dark); font-size: 13px; font-weight: 800; }
.sp-paywall-title { margin: 0 0 10px; color: var(--navy); font-size: 22px; font-weight: 900; line-height: 1.4; }
.sp-paywall-text { margin: 0 0 22px; color: var(--gray); font-size: 15px; line-height: 1.7; }
.sp-paywall-primary, .sp-paywall-secondary { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px;
    border-radius: 14px; font: inherit; font-size: 16px; font-weight: 800; text-decoration: none; cursor: pointer; }
.sp-paywall-primary { border: 0; background: var(--turquoise); color: #fff !important; box-shadow: 0 10px 24px rgba(13, 187, 195, .28); }
.sp-paywall-primary:hover { background: var(--turquoise-dark); }
.sp-paywall-secondary { margin-top: 10px; border: 1.5px solid #dfe3ea; background: #fff; color: var(--navy); }
.sp-paywall-secondary:hover { border-color: var(--turquoise); }
.sp-paywall-primary:focus-visible, .sp-paywall-secondary:focus-visible, .sp-paywall-close:focus-visible { outline: 3px solid rgba(13, 187, 195, .45); outline-offset: 2px; }
.sp-paywall-legal { margin: 18px 0 0; color: var(--gray); font-size: 12px; }
.sp-paywall-legal a { color: inherit; text-decoration: none; }
.sp-paywall-legal a:hover { color: var(--turquoise-dark); }
.sp-paywall-legal span[aria-hidden] { margin: 0 6px; opacity: .6; }