/* ============================================================
   AD Bioinformatics Platform - Main Stylesheet
   Color palette: #d8f3dc → #b7e4c7 → #95d5b2 → #74c69d
                  #52b788 → #40916c → #2d6a4f → #1b4332 → #081c15
   ============================================================ */

/* ── Typography: Yekan Bakh (variable, 100–900) ───────────── */
@font-face {
    font-family: "Yekan Bakh";
    src: url("../fonts/yekanbakh.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* This font draws ASCII digits as Persian glyphs. Let the fallback font
       render 0–9; localized numbers already contain actual Persian digits. */
    unicode-range: U+0000-002F, U+003A-10FFFF;
}

:root { --bs-font-sans-serif: "Yekan Bakh", Tahoma, sans-serif; }
body,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.tooltip,
.popover {
    font-family: "Yekan Bakh", Tahoma, sans-serif;
}
html[lang="fa"] body { line-height: 1.8; }
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4, html[lang="fa"] h5, html[lang="fa"] h6 { line-height: 1.5; }
/* Keep Latin identifiers (emails, URLs, code, card numbers) left-to-right inside RTL text. */
input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[name="q"] { direction: ltr; text-align: start; }
html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="url"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="password"] { text-align: right; }
html[dir="rtl"] input::placeholder { direction: rtl; }
code, pre, .ltr { direction: ltr; unicode-bidi: embed; }
.lang-switch { font-weight: 600; }
/* Directional icons flip in RTL */
html[dir="rtl"] .fa-arrow-right, html[dir="rtl"] .fa-chevron-right, html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-arrow-left, html[dir="rtl"] .fa-chevron-left, html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-long-arrow-alt-right, html[dir="rtl"] .fa-reply { transform: scaleX(-1); }
/* Video and player controls stay LTR */
video, .video-js, .plyr { direction: ltr; }

/* ── CSS Variables ─────────────────────────────────────────── */
:root {
    /* Brand palette */
    --bio-50:  #d8f3dc;
    --bio-100: #b7e4c7;
    --bio-200: #95d5b2;
    --bio-300: #74c69d;
    --bio-400: #52b788;
    --bio-500: #40916c;   /* primary action */
    --bio-600: #2d6a4f;   /* hover / darker */
    --bio-700: #1b4332;   /* navbar / dark sections */
    --bio-800: #081c15;   /* footer / darkest */

    /* Bootstrap overrides - replaces Bootstrap's default #198754 */
    --bs-success:                #40916c;
    --bs-success-rgb:            64, 145, 108;
    --bs-success-text-emphasis:  #2d6a4f;
    --bs-success-bg-subtle:      #d8f3dc;
    --bs-success-border-subtle:  #95d5b2;
    --bs-link-color:             #40916c;
    --bs-link-hover-color:       #2d6a4f;
    --bs-link-color-rgb:         64, 145, 108;

    --bio-text: var(--bio-700);   /* ink for headings / nav on the page background */
    --bio-surface: var(--bio-50); /* soft tint panels */
    --bio-line: var(--bio-100);   /* soft borders */

    --transition-default: 0.25s ease;
}

/* ── Smooth Scroll ─────────────────────────────────────────── */
html { scroll-behavior: smooth; }

/* ── Bootstrap success class overrides ─────────────────────── */
.btn-success {
    --bs-btn-bg:              #40916c;
    --bs-btn-border-color:    #40916c;
    --bs-btn-hover-bg:        #2d6a4f;
    --bs-btn-hover-border-color: #2d6a4f;
    --bs-btn-active-bg:       #1b4332;
    --bs-btn-active-border-color: #1b4332;
    --bs-btn-focus-shadow-rgb: 64, 145, 108;
}

.btn-outline-success {
    --bs-btn-color:           #40916c;
    --bs-btn-border-color:    #40916c;
    --bs-btn-hover-bg:        #40916c;
    --bs-btn-hover-border-color: #40916c;
    --bs-btn-active-bg:       #2d6a4f;
    --bs-btn-focus-shadow-rgb: 64, 145, 108;
}

.text-success  { color: #40916c !important; }
.border-success { border-color: #40916c !important; }
.bg-success    { background-color: #40916c !important; }

.badge.bg-success { background-color: #40916c !important; }

.badge.bg-success-subtle,
.bg-success-subtle { background-color: var(--bio-surface) !important; }
.text-success-emphasis { color: #2d6a4f !important; }

/* Alert success */
.alert-success {
    --bs-alert-color:        #1b4332;
    --bs-alert-bg:           #d8f3dc;
    --bs-alert-border-color: #95d5b2;
    color: #1b4332;
    background-color: #d8f3dc;
    border-color: #95d5b2;
}

/* Form controls focus ring */
.form-control:focus,
.form-select:focus {
    border-color: #74c69d;
    box-shadow: 0 0 0 0.2rem rgba(64, 145, 108, 0.25);
}

/* ── Brand Color Utilities ──────────────────────────────────── */
.bg-bio         { background-color: #1b4332 !important; }
.bg-bio-dark    { background-color: var(--bio-800) !important; }
.bg-bio-light   { background-color: var(--bio-50)  !important; }
.bg-bio-primary { background-color: var(--bio-500) !important; }
.text-bio       { color: var(--bio-500) !important; }
.border-bio     { border-color: var(--bio-500) !important; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar.bg-bio {
    background-color: #1b4332 !important;
    border-bottom: 3px solid var(--bio-600);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.3px;
    transition: opacity var(--transition-default);
}

.navbar-brand:hover { opacity: 0.88; }

.navbar.site-navbar { border-bottom: 3px solid var(--bio-400); }
.site-navbar .navbar-nav .nav-link { color: var(--bio-text); font-weight: 500; }
.site-navbar .navbar-nav .nav-link:hover, .site-navbar .navbar-nav .nav-link.active { color: var(--bio-500); }
.site-navbar .btn-outline-light { color: var(--bio-600); border-color: var(--bio-400); }
.site-navbar .btn-outline-light:hover { background: var(--bio-500); color: #fff; }
.site-navbar .btn-light { background: var(--bio-500); color: #fff; border-color: var(--bio-500); }

.navbar-brand img {
    height: 52px;
    width: auto;
    transition: transform var(--transition-default);
}

.navbar-brand:hover img { transform: scale(1.04); }

.navbar-dark .navbar-nav .nav-link {
    color: #b7e4c7;
    transition: color var(--transition-default);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #ffffff;
}

/* ── Hero Section ───────────────────────────────────────────── */
.hero-section {
    background: linear-gradient(135deg, #081c15 0%, #1b4332 50%, #2d6a4f 100%);
    color: #ffffff;
    padding: 5rem 0;
    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='%23d8f3dc' fill-opacity='0.06'%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;
}

/* ── Stats / Info Bar ───────────────────────────────────────── */
.stats-bar {
    background-color: var(--bio-600);
    color: #ffffff;
    padding: 0.75rem 0;
}

/* ── Course Cards ───────────────────────────────────────────── */
.course-card {
    transition: transform var(--transition-default), box-shadow var(--transition-default);
    border: 1px solid var(--bio-line);
    border-radius: 0.6rem;
    overflow: hidden;
}

.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(45, 106, 79, 0.18), 0 4px 10px rgba(0, 0, 0, 0.07);
}

.course-card .card-img-top {
    height: 180px;
    object-fit: cover;
}

/* ── Forum ──────────────────────────────────────────────────── */
.vote-btn {
    background: none;
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 1.1rem;
    color: #6c757d;
    cursor: pointer;
    transition: color var(--transition-default), transform 0.15s ease;
    line-height: 1;
}

.vote-btn:hover      { color: var(--bio-500); transform: scale(1.15); }
.vote-btn.voted      { color: var(--bio-500); font-weight: 700; }
.vote-btn:focus      { outline: 2px solid var(--bio-200); border-radius: 4px; }

.accepted-answer {
    border-inline-start: 4px solid var(--bio-500);
    background-color: var(--bio-50);
    padding-inline-start: 1rem;
    border-radius: 0 0.375rem 0.375rem 0;
}

.accepted-answer-badge {
    color: var(--bio-500);
    font-weight: 600;
    font-size: 0.85rem;
}

.forum-thread-row {
    transition: background-color var(--transition-default);
    border-radius: 0.375rem;
}

.forum-thread-row:hover {
    background-color: var(--bio-50);
    cursor: pointer;
}

.badge-solved {
    background-color: var(--bio-500);
    color: #ffffff;
    border-radius: 50rem;
    padding: 0.3em 0.75em;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* ── Progress Bars ──────────────────────────────────────────── */
.progress { border-radius: 50rem; background-color: var(--bio-line); }

.progress-bar {
    background-color: var(--bio-500);
    border-radius: 50rem;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Blog / Post Content Typography ────────────────────────── */
.post-content {
    line-height: 1.8;
    font-size: 1rem;
    color: var(--bs-body-color);
}

.post-content h2,
.post-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--bs-emphasis-color);
    font-weight: 700;
}

.post-content h2 {
    font-size: 1.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--bio-200);
}

.post-content h3 { font-size: 1.25rem; }

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.post-content blockquote {
    border-inline-start: 4px solid var(--bio-400);
    padding-inline-start: 1rem;
    color: var(--bs-secondary-color);
    font-style: italic;
    margin: 1.5rem 0;
}

.post-content code {
    background-color: var(--bio-surface);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    color: var(--bio-text);
}

.post-content pre {
    background-color: var(--bio-800);
    color: #b7e4c7;
    padding: 1.25rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
}

.post-content pre code { background: none; color: inherit; padding: 0; }

/* ── Sidebar List Groups ────────────────────────────────────── */
.list-group-item.active {
    background-color: var(--bio-500);
    border-color: var(--bio-500);
    color: #ffffff;
}

.list-group-item.active:hover {
    background-color: var(--bio-600);
    border-color: var(--bio-600);
}

.list-group-item:not(.active):hover {
    background-color: var(--bio-50);
    color: var(--bio-600);
}

/* ── Cards - general ────────────────────────────────────────── */
.card {
    border: 1px solid var(--bio-line);
}

.card-header.bg-bio-card {
    background-color: #1b4332;
    color: #ffffff;
}

/* ── Tables ─────────────────────────────────────────────────── */
.table th { background-color: var(--bio-surface); color: var(--bio-text); }
.table-hover tbody tr:hover { background-color: var(--bio-50); }

/* ── Pagination ─────────────────────────────────────────────── */
.page-item.active .page-link {
    background-color: var(--bio-500);
    border-color: var(--bio-500);
}

.page-link {
    color: var(--bio-500);
}

.page-link:hover {
    color: var(--bio-600);
    background-color: var(--bio-50);
    border-color: var(--bio-200);
}

/* ── Footer ─────────────────────────────────────────────────── */
footer.bg-dark,
footer {
    background-color: var(--bio-800) !important;
}

/* ── Utilities ──────────────────────────────────────────────── */
.text-truncate-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ── Custom Buttons ─────────────────────────────────────────── */
.btn-bio {
    background-color: var(--bio-500);
    border-color: var(--bio-500);
    color: #ffffff;
    transition: background-color var(--transition-default), border-color var(--transition-default), box-shadow var(--transition-default);
}

.btn-bio:hover,
.btn-bio:focus {
    background-color: var(--bio-600);
    border-color: var(--bio-600);
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(64, 145, 108, 0.35);
}

.btn-outline-bio {
    background-color: transparent;
    border-color: var(--bio-500);
    color: var(--bio-500);
}

.btn-outline-bio:hover,
.btn-outline-bio:focus {
    background-color: var(--bio-500);
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(64, 145, 108, 0.35);
}

/* ── Section Headings ───────────────────────────────────────── */
.section-title {
    font-weight: 700;
    color: var(--bio-text);
    border-inline-start: 4px solid var(--bio-400);
    padding-inline-start: 0.75rem;
}

/* ── Responsive Tweaks ──────────────────────────────────────── */
@media (max-width: 767.98px) {
    .hero-section { padding: 3rem 0; }
    .hero-section h1 { font-size: 1.75rem; }
    .course-card .card-img-top { height: 140px; }
    .post-content { font-size: 0.95rem; }
    .post-content h2 { font-size: 1.3rem; }
    .post-content h3 { font-size: 1.1rem; }
    .admin-sidebar { margin-bottom: 1.5rem; }
    .table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 575.98px) {
    .vote-btn { font-size: 1rem; padding: 0.2rem 0.4rem; }
    .badge-solved { font-size: 0.72rem; }
    .navbar-brand img { height: 38px; }
}

/* ── Static pages (migrated WordPress content) ─────────────── */
.site-page h1, .site-page h2, .site-page h3, .site-page h4, .site-page h5 { color: var(--bio-text); margin-top: 1.75rem; }
.site-page img { max-width: 100%; height: auto; border-radius: .5rem; }
.site-page a { color: var(--bio-500); }
.site-page h5 { font-size: 1.05rem; font-weight: 700; }


/* ============================================================
   THEME - light / dark  (Bootstrap 5.3 data-bs-theme on <html>)
   ============================================================ */
[data-bs-theme="dark"] {
    --bs-body-bg:            #0e1a15;
    --bs-body-bg-rgb:        14, 26, 21;
    --bs-secondary-bg:       #15261f;
    --bs-secondary-bg-rgb:   21, 38, 31;
    --bs-tertiary-bg:        #1a2e25;
    --bs-tertiary-bg-rgb:    26, 46, 37;
    --bs-border-color:       #28433a;
    --bs-link-color:         #74c69d;
    --bs-link-hover-color:   #95d5b2;
    --bs-link-color-rgb:     116, 198, 157;
    --bs-success-text-emphasis: #95d5b2;

    --bio-50:  #1a2e25;
    --bio-100: #28433a;
    --bio-200: #35614b;
    --bio-text:    #b7e4c7;
    --bio-surface: #1a2e25;
    --bio-line:    #28433a;
}
[data-bs-theme="dark"] .text-success { color: #74c69d !important; }
[data-bs-theme="dark"] .alert-success { --bs-alert-color: #d8f3dc; color: #d8f3dc; background-color: #17382b; border-color: #2d6a4f; }
[data-bs-theme="dark"] .badge.bg-success-subtle { color: #95d5b2 !important; }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: #52b788; }
[data-bs-theme="dark"] .card { --bs-card-bg: #132219; }
[data-bs-theme="dark"] .accordion { --bs-accordion-bg: #132219; --bs-accordion-btn-bg: #132219; --bs-accordion-active-bg: #1a2e25; --bs-accordion-active-color: #d8f3dc; }
[data-bs-theme="dark"] .dropdown-menu { --bs-dropdown-bg: #15261f; }
[data-bs-theme="dark"] .page-link { background-color: var(--bs-secondary-bg); border-color: var(--bs-border-color); color: #74c69d; }
[data-bs-theme="dark"] .page-item.disabled .page-link { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1); }

/* ── Navbar (adapts to theme) ──────────────────────────────── */
.navbar.site-navbar {
    background-color: rgba(var(--bs-body-bg-rgb), .92);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 12px rgba(8, 28, 21, .06);
}
.site-navbar .navbar-nav .nav-link { border-radius: .5rem; padding-inline: .75rem; }
.site-navbar .navbar-nav .nav-link:hover { background-color: var(--bio-surface); }
.site-navbar .navbar-toggler { border-color: var(--bs-border-color); }
.site-navbar .form-control { background-color: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .site-navbar .btn-outline-light { color: #95d5b2; border-color: #35614b; }

/* theme toggle: shows the icon of the theme you will switch TO */
.theme-toggle { background: none; border: 0; line-height: 1; padding: .5rem .75rem; cursor: pointer; }
.theme-toggle .theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-light { display: inline; }
[data-bs-theme="dark"] .theme-toggle .theme-icon-dark  { display: none; }

/* ── Page header band (course list etc.) ───────────────────── */
.page-head {
    background: linear-gradient(135deg, #081c15 0%, #1b4332 55%, #2d6a4f 100%);
    color: #fff;
    border-radius: 1.25rem;
    padding: 2rem 2rem;
    position: relative;
    overflow: hidden;
}
.page-head::after {
    content: ""; position: absolute; inset-inline-end: -60px; top: -60px; width: 220px; height: 220px;
    border-radius: 50%; background: radial-gradient(circle, rgba(116,198,157,.35), transparent 70%);
}
.page-head .form-control { background-color: rgba(255,255,255,.95); color: #1b4332; border: 0; }
.page-head .form-control::placeholder { color: #52796a; }

/* ── Category filter ───────────────────────────────────────── */
.filter-card { border-radius: 1rem; position: sticky; top: 84px; }
.filter-link {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .8rem; border-radius: .65rem; text-decoration: none;
    color: var(--bs-body-color); font-size: .92rem; transition: background-color var(--transition-default);
}
.filter-link:hover { background-color: var(--bio-surface); color: var(--bio-text); }
.filter-link.active { background-color: var(--bio-500); color: #fff; font-weight: 600; }

/* ── Course cards (list) ───────────────────────────────────── */
.course-card { border-radius: 1rem; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
[data-bs-theme="dark"] .course-card { background: #132219; }
.course-card .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bio-surface); }
.course-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.course-card:hover .thumb img { transform: scale(1.05); }
.course-card .thumb .badge { position: absolute; inset-block-start: .75rem; inset-inline-start: .75rem; backdrop-filter: blur(6px); }
.course-card .card-title a { color: var(--bs-emphasis-color); text-decoration: none; }
.course-card .card-title a::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable */
.course-card { position: relative; }
.course-card .price { font-weight: 800; font-size: 1.05rem; color: var(--bio-500); }
[data-bs-theme="dark"] .course-card .price { color: #74c69d; }
.course-card .meta { color: var(--bs-secondary-color); font-size: .8rem; }

/* ── Course detail ─────────────────────────────────────────── */
.course-hero {
    background: linear-gradient(135deg, #081c15 0%, #1b4332 55%, #2d6a4f 100%);
    color: #fff; padding: 2.5rem 0 5rem; position: relative; overflow: hidden;
}
.course-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    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='%23d8f3dc' fill-opacity='0.05'%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");
}
.course-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); --bs-breadcrumb-item-active-color: rgba(255,255,255,.7); margin-bottom: 1.25rem; }
.course-hero .breadcrumb a { color: #95d5b2; text-decoration: none; }
.course-hero .hero-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 50rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); font-size: .85rem;
}
.course-hero .hero-chip i { color: #74c69d; }
.buy-card { border-radius: 1.1rem; overflow: hidden; border: 1px solid var(--bs-border-color); box-shadow: 0 18px 45px rgba(8,28,21,.35); }
.buy-card .thumb { aspect-ratio: 16 / 9; }
.buy-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 992px) { .buy-wrap { margin-block-end: -9rem; position: relative; z-index: 2; } }
.info-card { border-radius: 1rem; }
.curriculum .accordion-item { border: 1px solid var(--bs-border-color) !important; border-radius: .9rem !important; overflow: hidden; box-shadow: none !important; }
.curriculum .accordion-button { gap: .5rem; }
.curriculum .accordion-button:not(.collapsed) { background-color: var(--bio-surface); color: var(--bio-text); box-shadow: none; }
.curriculum .accordion-button::after { margin-inline-start: .75rem; margin-inline-end: 0; }
.curriculum .lesson-row { padding: .6rem 1.1rem; border: 0; border-top: 1px solid var(--bs-border-color); background: transparent; }
.avatar-circle { border-radius: 50%; background: var(--bio-500); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.rating-summary { background: var(--bio-surface); border-radius: 1rem; }

/* ── Lesson player page ────────────────────────────────────── */
.learn-body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: var(--bs-body-bg); }
.learn-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem; min-height: 60px;
    background: var(--bs-body-bg); border-bottom: 1px solid var(--bs-border-color);
}
.learn-top .course-name { font-weight: 700; max-width: 34ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.learn-progress { min-width: 160px; }
.learn-progress .progress { height: 6px; }
.learn-shell { flex: 1 1 auto; min-height: 0; display: flex; }
.learn-side { width: 320px; flex: 0 0 320px; background-color: var(--bs-secondary-bg) !important; border-inline-end: 1px solid var(--bs-border-color); overflow-y: auto; }
.learn-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; }
.learn-content { max-width: 980px; margin-inline: auto; padding: 1.5rem; }
@media (max-width: 991.98px) {
    .learn-side { --bs-offcanvas-width: min(320px, 86vw); --bs-offcanvas-bg: var(--bs-secondary-bg); }
    .learn-content { padding: 1rem; }
}
.side-section-btn {
    display: flex; align-items: center; gap: .5rem; width: 100%; text-align: start;
    background: none; border: 0; color: var(--bs-emphasis-color); font-weight: 700; font-size: .85rem; padding: .6rem .5rem; margin-top: .5rem;
}
.side-section-btn .chev { transition: transform .2s; opacity: .55; font-size: .7rem; }
.side-section-btn[aria-expanded="false"] .chev { transform: rotate(-90deg); }
html[dir="rtl"] .side-section-btn[aria-expanded="false"] .chev { transform: rotate(90deg); }
.lesson-link {
    display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; margin-bottom: .2rem; border-radius: .7rem;
    text-decoration: none; color: var(--bs-body-color); font-size: .9rem; border: 1px solid transparent;
    transition: background-color var(--transition-default);
}
.lesson-link:hover { background-color: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
.lesson-link .idx {
    width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    font-size: .72rem; font-weight: 700; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color);
}
.lesson-link.active { background-color: var(--bio-500); color: #fff; font-weight: 600; }
.lesson-link.active .idx { background: rgba(255,255,255,.2); border-color: transparent; color: #fff; }
.player-wrap { background: #000; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(8,28,21,.25); }
.video-watermark {
    position: absolute; z-index: 2; inset-block-start: 8%; inset-inline-start: 6%;
    width: max-content; max-width: 35%; height: max-content; padding: .14rem .4rem;
    color: #fff; background: rgba(88,88,88,.82); border-radius: .35rem;
    font-size: clamp(.55rem, .85vw, .7rem); line-height: 1.35; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; pointer-events: none; user-select: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.8); animation: video-watermark-move 32s steps(1, end) infinite;
}
@keyframes video-watermark-move {
    0% { inset-block-start: 8%; inset-inline-start: 6%; }
    25% { inset-block-start: 8%; inset-inline-start: 52%; }
    50% { inset-block-start: 78%; inset-inline-start: 52%; }
    75% { inset-block-start: 78%; inset-inline-start: 6%; }
}
.player-bar { background: #0b1511; border-top: 1px solid rgba(255,255,255,.08); }
.lesson-body { line-height: 1.9; overflow-wrap: anywhere; }
.lesson-body img, .lesson-body video, .lesson-body iframe { max-width: 100%; height: auto; border-radius: .6rem; }
.learn-panel { background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: 1.25rem; }
.comment-body { overflow-wrap: anywhere; }
.reply-thread { border-inline-start: 2px solid var(--bs-border-color); padding-inline-start: .75rem; }
.min-w-0 { min-width: 0; }
.learn-top .lang-switch, .learn-top .theme-toggle { font-weight: 600; }


/* ============================================================
   Lesson action cards - downloads, video files, Telegram & Skype
   (markup is generated by Html.lesson(); icons are inline SVG masks)
   ============================================================ */
.lesson-actions {
    --lb-icon-dl:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v10.2l3.6-3.6 1.4 1.4-6 6-6-6 1.4-1.4 3.6 3.6V3h2zM5 19h14v2H5z'/%3E%3C/svg%3E");
    --lb-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    --lb-icon-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 8.5 12 4 3 8.5v7L12 20l9-4.5v-7zM12 6.2l5.6 2.8L12 11.8 6.4 9 12 6.2zM5 10.6l6 3v4.6l-6-3v-4.6zm8 7.6v-4.6l6-3v4.6l-6 3z'/%3E%3C/svg%3E");
    --lb-icon-tg:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'/%3E%3C/svg%3E");
    --lb-icon-cam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 8v8H5V8h10m1-2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4V7c0-.55-.45-1-1-1z'/%3E%3C/svg%3E");
    --lb-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.6l-9.8 9.8 1.4 1.4L19 6.4V10h2V3h-7zM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
    --lb-icon-go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.7 5.3 8 12l6.7 6.7 1.4-1.4L10.8 12l5.3-5.3z'/%3E%3C/svg%3E");

    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .85rem;
    margin: 1.5rem 0;
}
.lesson-btn {
    --lb-a: #40916c; --lb-b: #2d6a4f; --lb-icon: var(--lb-icon-dl);
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; align-items: center; gap: .9rem; min-width: 0;
    padding: .85rem 1rem; border-radius: 1rem; text-decoration: none !important;
    color: var(--bs-body-color); background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 1px 2px rgba(8,28,21,.06), 0 6px 18px -8px rgba(8,28,21,.18);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .22s;
}
[data-bs-theme="dark"] .lesson-btn { background: #132219; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 20px -10px rgba(0,0,0,.6); }
.lesson-btn::before {              /* coloured wash that grows on hover */
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .25s;
    background: linear-gradient(120deg, color-mix(in srgb, var(--lb-a) 14%, transparent), color-mix(in srgb, var(--lb-b) 6%, transparent));
}
.lesson-btn:hover { transform: translateY(-3px); border-color: var(--lb-a); color: var(--bs-body-color);
    box-shadow: 0 2px 4px rgba(8,28,21,.08), 0 16px 30px -12px color-mix(in srgb, var(--lb-b) 55%, transparent); }
.lesson-btn:hover::before { opacity: 1; }
.lesson-btn:active { transform: translateY(-1px) scale(.995); }
.lesson-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--lb-a) 55%, transparent); outline-offset: 2px; }

.lesson-btn__icon {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; position: relative;
    background: linear-gradient(145deg, var(--lb-a), var(--lb-b));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px var(--lb-b);
    transition: transform .25s;
}
.lesson-btn__icon::after {
    content: ""; position: absolute; inset: 0; background: #fff;
    -webkit-mask: var(--lb-icon) center / 52% no-repeat; mask: var(--lb-icon) center / 52% no-repeat;
}
.lesson-btn:hover .lesson-btn__icon { transform: rotate(-6deg) scale(1.06); }
.lesson-btn--download:hover .lesson-btn__icon::after, .lesson-btn--bundle:hover .lesson-btn__icon::after { animation: lb-bob .7s ease-in-out infinite alternate; }
@keyframes lb-bob { from { transform: translateY(-2px); } to { transform: translateY(3px); } }

.lesson-btn__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1 1 auto; line-height: 1.45; }
.lesson-btn__title { font-weight: 700; font-size: .98rem; color: var(--bs-emphasis-color); }
.lesson-btn__sub { font-size: .76rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; unicode-bidi: plaintext; }
html[dir="rtl"] .lesson-btn__sub { text-align: right; }
.lesson-btn__tag {
    flex: 0 0 auto; align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: .2rem .55rem; border-radius: 50rem;
    color: var(--lb-b); background: color-mix(in srgb, var(--lb-a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lb-a) 35%, transparent);
}
[data-bs-theme="dark"] .lesson-btn__tag { color: #b7e4c7; }
.lesson-btn__go { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in srgb, var(--lb-a) 16%, transparent); position: relative; transition: transform .25s; }
.lesson-btn__go::after { content: ""; position: absolute; inset: 0; background: var(--lb-b); -webkit-mask: var(--lb-icon-go) center / 62% no-repeat; mask: var(--lb-icon-go) center / 62% no-repeat; }
[data-bs-theme="dark"] .lesson-btn__go::after { background: #b7e4c7; }
.lesson-btn:hover .lesson-btn__go { transform: translateX(-4px); }

/* kinds */
.lesson-btn--video  { --lb-a: #3b82f6; --lb-b: #1d4ed8; --lb-icon: var(--lb-icon-play); }
.lesson-btn--video .lesson-btn__tag { color: #1d4ed8; }
[data-bs-theme="dark"] .lesson-btn--video .lesson-btn__tag { color: #bcd4ff; }
.lesson-btn--link   { --lb-a: #64748b; --lb-b: #334155; --lb-icon: var(--lb-icon-link); }
.lesson-btn--skype  { --lb-a: #22c1f5; --lb-b: #0078c8; --lb-icon: var(--lb-icon-cam); }

/* the "everything in one package" button: the hero of the block */
.lesson-btn--bundle {
    --lb-icon: var(--lb-icon-box); color: #fff; border-color: transparent;
    background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 55%, #40916c 100%);
    box-shadow: 0 1px 2px rgba(8,28,21,.2), 0 14px 28px -12px rgba(27,67,50,.65);
}
[data-bs-theme="dark"] .lesson-btn--bundle { background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 55%, #40916c 100%); }
.lesson-btn--bundle::before { opacity: 1; z-index: 0; background: radial-gradient(circle at 12% 0%, rgba(216,243,220,.28), transparent 55%); }
.lesson-btn--bundle > * { position: relative; z-index: 1; }
.lesson-btn--bundle .lesson-btn__icon { background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.lesson-btn--bundle .lesson-btn__title { color: #fff; }
.lesson-btn--bundle .lesson-btn__sub { color: rgba(255,255,255,.7); }
.lesson-btn--bundle .lesson-btn__tag { color: #fff; background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.lesson-btn--bundle:hover { color: #fff; border-color: transparent; box-shadow: 0 2px 4px rgba(8,28,21,.2), 0 20px 36px -12px rgba(27,67,50,.8); }

/* Telegram: full-width banner with the real logo, brand blues, a soft shine */
.lesson-btn--telegram {
    --lb-icon: var(--lb-icon-tg); grid-column: 1 / -1; padding: 1.1rem 1.25rem; color: #fff; border: 0;
    background: linear-gradient(120deg, #1a8fd1 0%, #27a7e7 55%, #43c0f4 100%);
    box-shadow: 0 1px 2px rgba(10,80,130,.25), 0 16px 32px -14px rgba(34,158,217,.85);
}
.lesson-btn--telegram::before {
    opacity: 1; z-index: 0; inset: -40% auto -40% -30%; width: 45%; transform: skewX(-18deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transition: transform .9s ease;
}
html[dir="rtl"] .lesson-btn--telegram::before { inset: -40% -30% -40% auto; }
.lesson-btn--telegram:hover::before { transform: translateX(260%) skewX(-18deg); opacity: 1; }
html[dir="rtl"] .lesson-btn--telegram:hover::before { transform: translateX(-260%) skewX(-18deg); }
.lesson-btn--telegram::after {      /* faint oversized logo watermark */
    content: ""; position: absolute; inset-block: -20%; inset-inline-end: -4%; width: 150px; z-index: 0; opacity: .12; background: #fff;
    -webkit-mask: var(--lb-icon-tg) center / contain no-repeat; mask: var(--lb-icon-tg) center / contain no-repeat;
}
.lesson-btn--telegram > * { position: relative; z-index: 1; }
.lesson-btn--telegram .lesson-btn__icon { width: 58px; height: 58px; border-radius: 50%; background: rgba(255,255,255,.18); box-shadow: 0 0 0 6px rgba(255,255,255,.1); animation: lb-pulse 2.8s ease-out infinite; }
.lesson-btn--telegram .lesson-btn__icon::after { -webkit-mask-size: 100%; mask-size: 100%; }
@keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
.lesson-btn--telegram .lesson-btn__title { color: #fff; font-size: 1.05rem; }
.lesson-btn--telegram .lesson-btn__sub { color: rgba(255,255,255,.82); font-weight: 600; letter-spacing: .04em; }
.lesson-btn--telegram .lesson-btn__go { width: 38px; height: 38px; background: #fff; }
.lesson-btn--telegram .lesson-btn__go::after { background: #1a8fd1; }
[data-bs-theme="dark"] .lesson-btn--telegram .lesson-btn__go::after { background: #1a8fd1; }
.lesson-btn--telegram:hover { color: #fff; box-shadow: 0 2px 4px rgba(10,80,130,.3), 0 22px 40px -14px rgba(34,158,217,.95); }

@media (prefers-reduced-motion: reduce) {
    .lesson-btn, .lesson-btn * { animation: none !important; transition: none !important; }
}
@media (max-width: 575.98px) {
    .lesson-btn { padding: .75rem .85rem; gap: .7rem; }
    .lesson-btn__icon { width: 42px; height: 42px; }
    .lesson-btn--telegram .lesson-btn__icon { width: 50px; height: 50px; }
}


/* ── Brand logo: one artwork per theme ─────────────────────── */
.brand-logo { display: block; width: auto; max-width: 100%; }
.brand-logo--dark { display: none; }
[data-bs-theme="dark"] .brand-logo--light { display: none; }
[data-bs-theme="dark"] .brand-logo--dark  { display: block; }
.navbar-brand { padding-block: .35rem; margin-inline-end: 1.5rem; }
.learn-brand { display: inline-flex; flex: 0 0 auto; }
.learn-brand .brand-logo { height: 40px; }
@media (max-width: 575.98px) { .learn-brand .brand-logo { height: 28px; } }
.footer-logo { height: 52px; width: auto; max-width: 100%; display: block; }


/* ============================================================
   Contrast fixes — Bootstrap's fixed light/dark utilities vs. the theme
   (templates AND migrated page/post HTML use these classes)
   ============================================================ */

/* DARK theme: "light" surfaces would stay white while the text turns light */
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}
[data-bs-theme="dark"] .bg-white:not([class*="bg-opacity"]) { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color); }
[data-bs-theme="dark"] .card-header.bg-white { background-color: rgba(255, 255, 255, .04) !important; }
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-bg: var(--bs-tertiary-bg);
}
/* dark ink only where the surface really is light (warning/info/light buttons); everywhere else follow the theme */
[data-bs-theme="dark"] .text-dark:not(.bg-warning):not(.bg-info):not(.btn-warning):not(.btn-light):not(.btn-info) { color: var(--bs-body-color) !important; }
[data-bs-theme="dark"] .text-black { color: var(--bs-body-color) !important; }
/* light buttons stay light in dark mode: their green text must be the dark green, not the pale one */
[data-bs-theme="dark"] .btn-light.text-success,
[data-bs-theme="dark"] .btn-light .text-success { color: #1b4332 !important; }
[data-bs-theme="dark"] .btn-light { --bs-btn-color: #1b2a22; }

/* LIGHT theme: grey "muted" text on surfaces that are dark in both themes */
.bg-dark .text-muted, .bg-bio .text-muted, .bg-bio-dark .text-muted, .bg-success .text-muted,
.hero-section .text-muted, .course-hero .text-muted, .page-head .text-muted, .player-wrap .text-muted,
.card.bg-success .text-muted, .card-header.bg-success .text-muted, footer .text-muted {
    color: rgba(255, 255, 255, .72) !important;
}
footer a.text-muted:hover { color: #fff !important; }
.bg-dark .small, .bg-success .small { --bs-secondary-color: rgba(255, 255, 255, .72); }
/* dark surfaces: links must not fall back to the dark-green link colour */
.bg-dark a:not(.btn):not(.text-muted), .bg-bio a:not(.btn), footer a:not(.btn):not(.text-muted) { color: #b7e4c7; }
.bg-success a:not(.btn):not(.badge) { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }

.founder-photo { width: 96px; height: 96px; object-fit: cover; object-position: top; }

/* ── Landing: grouped courses ───────────────────────────────── */
.courses-showcase { scroll-margin-top: 4rem; }
.course-group { scroll-margin-top: 5rem; }
.group-nav .group-pill {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px;
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-emphasis-color);
    text-decoration: none; font-weight: 600; font-size: .9rem; transition: all .2s ease;
}
.group-nav .group-pill i { color: var(--bio-500); }
.group-nav .group-pill .count { background: var(--bio-50); color: var(--bio-700); border-radius: 999px; padding: 0 .55rem; font-size: .75rem; }
.group-nav .group-pill:hover { background: var(--bio-500); border-color: var(--bio-500); color: #fff; transform: translateY(-2px); }
.group-nav .group-pill:hover i { color: #fff; }
.group-head { padding-bottom: .75rem; border-bottom: 2px solid var(--bio-100); }
.group-icon {
    width: 3rem; height: 3rem; border-radius: .85rem; display: grid; place-items: center; font-size: 1.25rem; color: #fff;
    background: linear-gradient(135deg, var(--bio-500), var(--bio-700));
}
.course-group.is-free .group-icon { background: linear-gradient(135deg, #f4a261, #e76f51); }
.course-group.is-free .group-head { border-bottom-color: #f9d9c4; }
[data-bs-theme="dark"] .group-head { border-bottom-color: #1b4332; }
[data-bs-theme="dark"] .group-nav .group-pill { background: #132219; }

/* ── Landing hero artwork ───────────────────────────────────── */
.hero-art {
    width: 100%; max-width: 440px; height: auto; max-height: 520px; object-fit: contain;
    filter: drop-shadow(0 0 40px rgba(64, 201, 140, .35));
    animation: hero-float 7s ease-in-out infinite;
}
@keyframes hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .hero-art { animation: none; } }

/* FAQ: native accessible disclosure controls, including keyboard support. */
.faq-hero { padding: 4.5rem 0 5rem; background: linear-gradient(145deg, rgba(64,201,140,.13), rgba(64,201,140,.03)); border-bottom: 1px solid var(--bs-border-color); }
.faq-eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--bio-700); background: rgba(64,201,140,.12); padding: .5rem 1rem; border-radius: 2rem; font-weight: 600; font-size: .9rem; }
.faq-hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; margin: 1.2rem 0; }
.faq-hero p { max-width: 620px; margin: 0 auto 1rem; color: var(--bs-secondary-color); line-height: 1.9; }
.faq-hint { display: inline-flex; gap: .5rem; align-items: center; color: var(--bs-secondary-color); font-size: .85rem; }
.faq-content { padding-top: 2.5rem; padding-bottom: 4rem; }
.faq-list { display: grid; gap: 1rem; }
.faq-item { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; box-shadow: 0 3px 14px rgba(0,0,0,.025); overflow: hidden; }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.3rem 1.5rem; font-weight: 700; line-height: 1.9; cursor: pointer; list-style: none; transition: background .15s ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(64,201,140,.06); }
.faq-item summary:focus-visible { outline: 3px solid var(--bio-500); outline-offset: -4px; border-radius: 1rem; }
.faq-toggle { position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%; background: rgba(64,201,140,.12); color: var(--bio-700); }
.faq-toggle::before, .faq-toggle::after { content: ''; position: absolute; background: currentColor; border-radius: 2px; left: 9px; top: 14px; width: 12px; height: 2px; }
.faq-toggle::after { transform: rotate(90deg); }
.faq-item[open] { border-color: var(--bio-500); }
.faq-item[open] summary { color: var(--bio-700); background: rgba(64,201,140,.06); }
.faq-item[open] .faq-toggle::after { display: none; }
.faq-answer { padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--bs-border-color); line-height: 2; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-contact { margin-top: 2.5rem; display: flex; gap: 1.2rem; align-items: center; padding: 1.75rem; border-radius: 1rem; background: rgba(64,201,140,.07); border: 1px solid var(--bs-border-color); }
.faq-contact-icon { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 14px; background: rgba(64,201,140,.13); color: var(--bio-700); font-size: 1.4rem; }
.faq-contact h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: .5rem; }
.faq-contact p { color: var(--bs-secondary-color); font-size: .9rem; margin: 0; line-height: 1.8; }
.faq-contact .btn { margin-inline-start: auto; flex-shrink: 0; }
[data-bs-theme="dark"] .faq-eyebrow, [data-bs-theme="dark"] .faq-toggle, [data-bs-theme="dark"] .faq-item[open] summary, [data-bs-theme="dark"] .faq-contact-icon { color: var(--bio-300, #95d5b2); }
@media (max-width: 575.98px) { .faq-hero { padding: 3rem 0; } .faq-item summary { padding: 1rem; } .faq-answer { padding: 1rem; } .faq-contact { flex-wrap: wrap; padding: 1.25rem; } .faq-contact-icon { display: none; } .faq-contact .btn { margin-inline-start: 0; width: 100%; } }

/* Always-on AI support chat */
.support-chat-widget { position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 1080; font-family: inherit; }
.support-chat-toggle {
    border: 0; border-radius: 999px; padding: .8rem 1.05rem; display: inline-flex; align-items: center; gap: .55rem;
    color: #fff; background: #1b7f5a; box-shadow: 0 12px 30px rgba(0,0,0,.22); font-weight: 700;
}
.support-chat-toggle:hover { background: #146c4b; }
.support-chat-panel {
    position: absolute; inset-inline-end: 0; bottom: calc(100% + .75rem); width: min(360px, calc(100vw - 2rem));
    max-height: min(620px, calc(100vh - 7rem)); display: grid; grid-template-rows: auto minmax(180px, 1fr) auto;
    overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-body-bg);
    color: var(--bs-body-color); box-shadow: 0 18px 50px rgba(0,0,0,.24);
}
.support-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; background: #1b7f5a; color: #fff; }
.support-chat-head strong { display: block; font-size: .98rem; }
.support-chat-head span { display: block; opacity: .85; font-size: .78rem; margin-top: .15rem; }
.support-chat-close { border: 0; color: #fff; background: rgba(255,255,255,.14); width: 2rem; height: 2rem; border-radius: 50%; }
.support-chat-messages { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; background: rgba(64,201,140,.04); }
.support-chat-message { display: flex; flex-direction: column; max-width: 88%; }
.support-chat-message.is-user { align-self: flex-end; align-items: flex-end; }
.support-chat-message.is-assistant { align-self: flex-start; align-items: flex-start; }
.support-chat-bubble { padding: .75rem .9rem; border-radius: 1rem; line-height: 1.65; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.support-chat-message.is-user .support-chat-bubble { background: #1b7f5a; color: #fff; border-bottom-inline-end-radius: .3rem; }
.support-chat-message.is-assistant .support-chat-bubble { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-bottom-inline-start-radius: .3rem; }
.support-chat-contact { margin-top: .45rem; font-size: .82rem; color: var(--bio-700); font-weight: 700; text-decoration: none; }
.support-chat-contact:hover { text-decoration: underline; }
.support-chat-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.support-chat-form input {
    min-width: 0; flex: 1; border: 1px solid var(--bs-border-color); border-radius: 999px; padding: .65rem .9rem;
    background: var(--bs-body-bg); color: var(--bs-body-color);
}
.support-chat-form button { flex: 0 0 2.65rem; height: 2.65rem; border: 0; border-radius: 50%; color: #fff; background: #1b7f5a; }
[data-bs-theme="dark"] .support-chat-messages { background: rgba(64,201,140,.07); }
@media (max-width: 575.98px) {
    .support-chat-widget { inset-inline: 1rem; bottom: 1rem; }
    .support-chat-toggle { margin-inline-start: auto; display: flex; }
    .support-chat-panel { inset-inline: 0; width: 100%; max-height: calc(100vh - 6rem); }
}

/* Bilingual, safely formatted support answers. */
.support-chat-bubble { text-align: start; unicode-bidi: plaintext; line-height: 1.85; }
.support-chat-message.is-assistant .support-chat-bubble { white-space: normal; }
.support-chat-bubble p { margin: 0 0 .65rem; }
.support-chat-bubble p:last-child { margin-bottom: 0; }
.support-chat-bubble .support-chat-heading { font-weight: 700; }
.support-chat-bubble ul, .support-chat-bubble ol { margin: .4rem 0 .7rem; padding-inline-start: 1.4rem; }
.support-chat-bubble li { margin-block: .35rem; }
.support-chat-bubble a { color: var(--bio-700); text-decoration: underline; text-underline-offset: .18em; unicode-bidi: isolate; }
.support-chat-bubble strong { font-weight: 700; }
.support-chat-bubble code { unicode-bidi: isolate; display: inline-block; max-width: 100%; font-size: .85em; color: inherit; background: rgba(127,127,127,.12); padding: .1rem .3rem; border-radius: .25rem; }
.support-chat-bubble pre { margin: .5rem 0; padding: .6rem; background: rgba(127,127,127,.08); border-radius: .5rem; text-align: left; white-space: pre; overflow-x: auto; }
.support-chat-bubble pre code { background: transparent; padding: 0; }
.support-chat-bubble > :last-child { margin-bottom: 0; }
.support-chat-panel[hidden] { display: none; }
.support-chat-message.is-assistant { max-width: 94%; }
.support-chat-bubble[dir="ltr"] { font-family: Tahoma, Arial, sans-serif; }
.support-chat-form input[dir="auto"] { text-align: start; }

.support-chat-table-wrap { overflow-x: auto; max-width: 100%; margin-block: .65rem; }
.support-chat-table-wrap table { border-collapse: collapse; font-size: .8rem; width: 100%; }
.support-chat-table-wrap th, .support-chat-table-wrap td { border: 1px solid var(--bs-border-color); padding: .45rem; min-width: 6rem; vertical-align: top; text-align: start; }
.support-chat-table-wrap th { background: rgba(64,201,140,.09); }
.support-chat-bubble blockquote { border-inline-start: 3px solid var(--bio-700); padding-inline-start: .65rem; margin: .5rem 0; }
.support-chat-form button:disabled { opacity: .55; cursor: wait; }

/* Keep the payment destination legible and in bank-card order on mobile. */
.payment-card-number {
    font-family: Arial, sans-serif;
    font-size: clamp(1rem, 4.5vw, 2rem);
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.order-number { font-family: Arial, Helvetica, sans-serif; direction: ltr; unicode-bidi: isolate; }