/*
| Infinity Academy - Teacher public website theme
| Shared font faces reuse the Madani Arabic files already shipped with the
| student-dashboard teacher theme to avoid duplicating binaries.
*/

@font-face {
    font-family: 'Madani Arabic';
    src: url('../../../student-dashboard/teacher/fonts/MadaniArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Madani Arabic';
    src: url('../../../student-dashboard/teacher/fonts/MadaniArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Madani Arabic';
    src: url('../../../student-dashboard/teacher/fonts/MadaniArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Madani Arabic';
    src: url('../../../student-dashboard/teacher/fonts/MadaniArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Madani Arabic';
    src: url('../../../student-dashboard/teacher/fonts/MadaniArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

:root {
    --th-primary: #6A19FF;
    --th-primary-rgb: 106, 25, 255;
    --th-text-primary: #181D27;
    --th-text-secondary: #414651;
    --th-border-primary: #D5D7DA;
    --th-shadow-xs: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    --th-shadow-skeuomorphic:
        inset 0px 0px 0px 1px rgba(10, 13, 18, 0.18),
        inset 0px -2px 0px 0px rgba(10, 13, 18, 0.05);
    --th-site-max-width: 1280px;
    --th-site-gutter: 80px;
}

.th-theme,
.th-theme * {
    box-sizing: border-box;
    font-family: 'Madani Arabic', sans-serif;
}

.th-theme {
    margin: 0;
    background-color: #ffffff;
    color: var(--th-text-primary);
}

.th-theme [id] {
    scroll-margin-top: 32px;
}

@media (prefers-reduced-motion: no-preference) {
    html.th-smooth-scroll-ready {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Scroll to top button
   ========================================================================== */
.th-scroll-top {
    position: fixed;
    inset-inline-end: 24px;
    bottom: 24px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #e9eaeb;
    border-radius: 999px;
    background-color: #ffffff;
    color: var(--th-primary);
    box-shadow: 0 4px 16px rgba(10, 13, 18, 0.12);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.th-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.th-scroll-top:hover {
    border-color: rgba(var(--th-primary-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(10, 13, 18, 0.16);
}

.th-scroll-top:focus-visible {
    outline: 2px solid rgba(var(--th-primary-rgb), 0.45);
    outline-offset: 2px;
}

.th-scroll-top__icon {
    display: block;
    width: 20px;
    height: 20px;
}

@media (max-width: 639.98px) {
    .th-scroll-top {
        inset-inline-end: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   Site layout — shared width & horizontal alignment
   ========================================================================== */
.th-site-shell {
    width: 100%;
    padding-inline: var(--th-site-gutter);
}

.th-site-container {
    width: 100%;
    max-width: var(--th-site-max-width);
    margin-inline: auto;
}

.th-main {
    width: 100%;
}

.th-section {
    width: 100%;
}

.th-section__inner {
    width: 100%;
    max-width: var(--th-site-max-width);
    margin-inline: auto;
}

.th-site-shell .th-section__inner {
    padding-inline: 0;
}

.th-section--padded {
    padding-inline: var(--th-site-gutter);
}

.th-section--padded .th-section__inner {
    max-width: var(--th-site-max-width);
    margin-inline: auto;
}

/* ==========================================================================
   Header
   ========================================================================== */
.th-header {
    background-color: #ffffff;
    width: 100%;
}

.th-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 24px;
}

/* Logo sits at the inline-start (right in RTL) */
.th-header__logo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.th-header__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 60px;
}

.th-header__logo-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

/* Centered navigation */
.th-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.th-nav__link {
    font-family: 'Madani Arabic', sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: var(--th-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.th-nav__link:hover,
.th-nav__link.is-active {
    color: var(--th-primary);
}

.th-nav__link--cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--th-primary);
    font-weight: 500;
}

.th-nav__link--cta:hover {
    opacity: 0.85;
}

.th-nav__link-icon {
    flex-shrink: 0;
}

.th-nav__link--has-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.th-nav__badge {
    position: absolute;
    top: -12px;
    inset-inline-end: -30px;
    background: var(--th-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}

/* Actions group: DOM order is Subscribe → Login → Account → Language */
.th-actions {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    direction: ltr;
}

/* RTL: actions on the left → Subscribe outer (screen edge), Language inward */
.th-header[dir="rtl"] .th-actions {
    flex-direction: row;
    justify-content: flex-start;
}

/* LTR: actions on the right → Subscribe outer (screen edge), Language inward */
.th-header[dir="ltr"] .th-actions {
    flex-direction: row-reverse;
    justify-content: flex-start;
}

/* Primary "Subscribe now" button */
.th-btn-subscribe {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 120px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: var(--th-primary);
    box-shadow: var(--th-shadow-xs), var(--th-shadow-skeuomorphic);
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.th-btn-subscribe:hover {
    color: #ffffff;
    filter: brightness(0.96);
}

/* Secondary "Login" button */
.th-btn-login {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 120px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--th-border-primary);
    background-color: #ffffff;
    box-shadow: var(--th-shadow-xs), var(--th-shadow-skeuomorphic);
    color: var(--th-text-primary);
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.th-btn-login:hover {
    color: var(--th-primary);
    border-color: var(--th-primary);
}

/* Icon button (user / account) */
.th-btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--th-border-primary);
    background-color: #ffffff;
    box-shadow: var(--th-shadow-xs), var(--th-shadow-skeuomorphic);
    cursor: pointer;
    text-decoration: none;
}

.th-btn-icon img {
    width: 20px;
    height: 20px;
    display: block;
}

/* Language switcher */
.th-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.th-lang__flag {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.th-lang__text {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--th-text-secondary);
    white-space: nowrap;
}

/* Mobile toggle (hidden on desktop, part-by-part progressive enhancement) */
.th-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--th-border-primary);
    background-color: #ffffff;
    box-shadow: var(--th-shadow-xs);
    cursor: pointer;
}

.th-nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: var(--th-text-primary);
    border-radius: 2px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    :root {
        --th-site-gutter: 40px;
    }

    .th-header__inner {
        padding-block: 20px;
    }

    .th-nav {
        gap: 16px;
    }
}

.th-theme--en .th-header__inner {
    direction: ltr;
}

.th-theme--en .th-nav {
    direction: ltr;
}

@media (max-width: 991px) {
    :root {
        --th-site-gutter: 20px;
    }

    .th-header__inner {
        padding-block: 12px;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

    .th-header__logo {
        flex: 0 0 auto;
    }

    .th-header__logo-link {
        width: 64px;
        height: 44px;
    }

    .th-actions {
        flex: 0 0 auto;
        gap: 6px;
        max-width: 100%;
    }

    .th-btn-subscribe,
    .th-btn-login {
        min-width: 0;
        width: auto;
        padding: 7px 10px;
        font-size: 12px;
        line-height: 18px;
        border-radius: 8px;
        flex-shrink: 0;
    }

    /* Guest already has Login — hide redundant account icon on compact screens */
    .th-header--guest .th-btn-icon {
        display: none;
    }

    .th-btn-icon {
        padding: 7px;
        flex-shrink: 0;
    }

    .th-btn-icon img {
        width: 18px;
        height: 18px;
    }

    .th-lang {
        padding: 7px;
        flex-shrink: 0;
    }

    .th-lang__text {
        display: none;
    }

    .th-lang__flag {
        width: 18px;
        height: 18px;
    }

    .th-theme--en .th-nav {
        align-items: flex-start;
    }

    .th-nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        padding: 7px;
        gap: 3.5px;
    }

    .th-nav {
        order: 3;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 4px;
        padding: 8px 0 4px;
        border-top: 1px solid var(--th-border-primary);
        display: none;
    }

    .th-nav.is-open {
        display: flex;
    }

    .th-nav__link {
        padding: 10px 4px;
        font-size: 15px;
        line-height: 22px;
        width: 100%;
    }

    .th-nav__link--has-badge {
        display: block;
        margin-top: 10px;
    }

    .th-nav__badge {
        top: -10px;
    }
}

@media (max-width: 480px) {
    :root {
        --th-site-gutter: 16px;
    }

    .th-header__inner {
        padding-block: 10px;
        gap: 8px;
    }

    .th-header__logo-link {
        width: 56px;
        height: 40px;
    }

    .th-actions {
        gap: 4px;
    }

    .th-btn-subscribe,
    .th-btn-login {
        padding: 6px 8px;
        font-size: 11px;
        line-height: 16px;
        border-radius: 7px;
    }

    .th-btn-icon,
    .th-lang,
    .th-nav-toggle {
        width: 34px;
        height: 34px;
        padding: 6px;
    }

    .th-nav-toggle {
        gap: 3px;
    }
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.th-hero {
    width: 100%;
    margin-bottom: 48px;
}

.th-hero__frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.th-hero-swiper {
    width: 100%;
    height: 600px;
    border-radius: 12px;
    overflow: hidden;
}

.th-hero-swiper .swiper-slide {
    height: 600px;
}

.th-hero-swiper__slide--centered,
.th-hero-swiper__slide--split {
    background: #ffffff;
}

.th-hero-slide {
    width: 100%;
    height: 100%;
}

/* Banner */
.th-hero-slide--banner,
.th-hero__slide-link {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}

.th-hero__slide-img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 12px;
}

/* Shared hero UI */
.th-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    padding: 4px 4px 4px 8px;
    border-radius: 9999px;
    border: 1px solid rgba(var(--th-primary-rgb), 0.35);
    background-color: rgba(var(--th-primary-rgb), 0.08);
}

.th-hero-badge__text {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--th-primary);
    white-space: nowrap;
}

.th-hero-badge__icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
    background-color: var(--th-primary);
    -webkit-mask: url(../images/hero/icon-check-verified.svg) no-repeat center / contain;
    mask: url(../images/hero/icon-check-verified.svg) no-repeat center / contain;
}

.th-hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    box-shadow:
        0 1px 2px 0 rgba(10, 13, 18, 0.05),
        inset 0 0 0 1px rgba(10, 13, 18, 0.18),
        inset 0 -2px 0 0 rgba(10, 13, 18, 0.05);
}

.th-hero-btn img {
    width: 20px;
    height: 20px;
    display: block;
}

.th-hero-btn--primary {
    min-width: 158px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background-color: var(--th-primary);
    color: #ffffff;
}

.th-hero-btn--primary:hover {
    color: #ffffff;
    filter: brightness(0.96);
}

.th-hero-btn--secondary {
    border: 1px solid #d5d7da;
    background-color: #ffffff;
    color: #414651;
}

/* Centered layout */
.th-hero-slide--centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.th-hero-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
    max-width: 841px;
}

.th-hero-centered__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.th-hero-centered__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    width: 100%;
}

.th-hero-centered__title {
    margin: 0;
    font-size: 60px;
    line-height: 1.4;
    letter-spacing: -1.2px;
    font-weight: 400;
    color: #181d27;
}

.th-hero-centered__desc {
    margin: 0;
    max-width: 100%;
    font-size: 16px;
    line-height: normal;
    font-weight: 300;
    color: #414651;
}

.th-hero-centered__actions,
.th-hero-split__actions {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.th-hero-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

.th-hero-social__avatars {
    display: flex;
    align-items: center;
    direction: ltr;
}

.th-hero-social__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 0.75px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 0 1.5px #ffffff;
    margin-inline-end: -8px;
}

.th-hero-social__avatar:last-child {
    margin-inline-end: 0;
}

.th-hero-social__students {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: end;
    color: #181d27;
}

.th-hero-social__students strong {
    font-size: 14px;
    line-height: normal;
    font-weight: 500;
    letter-spacing: -0.55px;
}

.th-hero-social__students span {
    font-size: 11px;
    line-height: 18px;
    font-weight: 500;
}

.th-hero-social__divider {
    width: 2px;
    height: 35px;
    background: #e9eaeb;
    flex-shrink: 0;
}

.th-hero-social__rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.th-hero-social__stars {
    display: flex;
    align-items: center;
    gap: 1.6px;
}

.th-hero-social__rating-text {
    margin: 0;
    color: #181d27;
    white-space: nowrap;
}

.th-hero-social__rating-text strong {
    font-size: 11.2px;
    line-height: 16px;
    font-weight: 600;
}

.th-hero-social__rating-text span {
    font-size: 10px;
    line-height: 16px;
    font-weight: 300;
}

/* Split layout */
.th-hero-slide--split {
    padding: 0;
}

.th-hero-split {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    height: 600px;
    direction: ltr;
}

.th-hero-split__media {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 600px;
    border-radius: 16px;
    overflow: hidden;
}

.th-hero-split__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.th-hero-split__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 96.97%);
    pointer-events: none;
}

.th-hero-split__content {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 48px;
    padding: 24px 0;
}

.th-hero-split__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    width: 100%;
}

.th-hero-split__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    text-align: end;
}

.th-hero-split__title {
    margin: 0;
    font-size: 60px;
    line-height: 1.4;
    letter-spacing: -1.2px;
    font-weight: 400;
    color: #181d27;
}

.th-hero-split__desc {
    margin: 0;
    width: 100%;
    font-size: 16px;
    line-height: normal;
    font-weight: 300;
    color: #414651;
}

.th-theme--en .th-hero-split__content,
.th-theme--en .th-hero-split__intro,
.th-theme--en .th-hero-split__copy {
    align-items: flex-start;
    text-align: start;
}

.th-theme--en .th-hero-split__actions {
    justify-content: flex-start;
}

@media (max-width: 1200px) {
    .th-hero-centered__title,
    .th-hero-split__title {
        font-size: 48px;
    }
}

@media (max-width: 991px) {
    .th-hero-swiper,
    .th-hero-swiper .swiper-slide {
        height: auto;
        min-height: 520px;
    }

    .th-hero-slide--banner .th-hero__slide-img {
        height: auto;
        aspect-ratio: 1280 / 600;
        min-height: 220px;
    }

    .th-hero-split {
        flex-direction: column;
        height: auto;
        gap: 24px;
    }

    .th-hero-split__media {
        width: 100%;
        height: auto;
        aspect-ratio: 624 / 600;
    }

    .th-hero-split__content {
        height: auto;
        padding: 0 0 16px;
    }

    .th-hero-centered__title,
    .th-hero-split__title {
        font-size: 36px;
        letter-spacing: -0.6px;
    }

    .th-hero-centered__actions,
    .th-hero-split__actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .th-hero-social {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* Pagination — shared slider dots */
.th-slider-pagination.swiper-pagination,
.th-hero__pagination.swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17.25px;
    line-height: 0;
}

.th-slider-pagination .swiper-pagination-bullet,
.th-hero__pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    border-radius: 50%;
    background-color: #C3C5C9;
    opacity: 1;
    transition: width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, background-color 0.25s ease;
}

.th-slider-pagination .swiper-pagination-bullet-active,
.th-hero__pagination .swiper-pagination-bullet-active {
    width: 20px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--th-primary);
}

/* ==========================================================================
   About teacher section
   ========================================================================== */
.th-about-teacher {
    margin-bottom: 48px;
}

.th-about-teacher__frame {
    width: 100%;
}

.th-about-card {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 400px;
    border: 1px solid #d5d7da;
    border-radius: 12px;
    overflow: hidden;
    direction: ltr;
    background-color: #ffffff;
}

.th-about-card__content {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
}

.th-about-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    width: 100%;
    max-width: 544px;
}

.th-about-card__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
    text-align: end;
}

.th-about-card__name {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #0f172a;
}

.th-about-card__subtitle {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 400;
    color: var(--th-primary);
}

.th-about-card__desc {
    margin: 0;
    width: 100%;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #414651;
    text-align: end;
}

.th-about-card__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
}

.th-about-card__media {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: 400px;
    overflow: hidden;
}

.th-about-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.th-about-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0) 96.97%);
    pointer-events: none;
}

.th-theme--en .th-about-card__body,
.th-theme--en .th-about-card__heading,
.th-theme--en .th-about-card__desc {
    align-items: flex-start;
    text-align: start;
}

.th-theme--en .th-about-card__actions {
    justify-content: flex-start;
}

@media (max-width: 991px) {
    .th-about-teacher {
        margin-top: 32px;
    }

    .th-about-card {
        flex-direction: column-reverse;
        min-height: 0;
    }

    .th-about-card__content {
        padding: 24px 20px;
    }

    .th-about-card__media {
        width: 100%;
        height: auto;
        aspect-ratio: 640 / 400;
    }

    .th-about-card__name {
        font-size: 24px;
        line-height: 32px;
    }

    .th-about-card__subtitle {
        font-size: 18px;
        line-height: 26px;
    }

    .th-about-card__desc {
        font-size: 14px;
        line-height: 22px;
    }

    .th-about-card__actions {
        justify-content: center;
    }

    .th-theme--en .th-about-card__actions {
        justify-content: center;
    }
}

@media (max-width: 639px) {
    .th-about-card__name {
        font-size: 22px;
        line-height: 30px;
    }
}

@media (max-width: 639px) {
    .th-hero__frame {
        gap: 24px;
    }

    .th-slider-pagination.swiper-pagination,
    .th-hero__pagination.swiper-pagination {
        gap: 14px;
    }

    .th-hero-centered__title,
    .th-hero-split__title {
        font-size: 28px;
    }

    .th-hero-centered__desc,
    .th-hero-split__desc {
        font-size: 14px;
    }
}

/* ==========================================================================
   Stats section
   ========================================================================== */
.th-stats {
    margin-top: 48px;
}

.th-stats__grid {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.th-stats__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 24px;
    border-radius: 4px;
}

.th-stats__value {
    margin: 0;
    font-size: 48px;
    line-height: 60px;
    font-weight: 500;
    letter-spacing: -0.96px;
    color: var(--th-primary);
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.th-stats__label {
    margin: 0;
    width: 100%;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: #181d27;
    text-align: center;
}

@media (max-width: 1200px) {
    .th-stats__value {
        font-size: 40px;
        line-height: 52px;
    }

    .th-stats__label {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 991px) {
    .th-stats {
        margin-top: 32px;
    }

    .th-stats__grid {
        flex-wrap: wrap;
        justify-content: center;
    }

    .th-stats__item {
        flex: 1 1 calc(50% - 12px);
        min-width: calc(50% - 12px);
        padding: 24px 16px;
    }

    .th-stats__value {
        font-size: 36px;
        line-height: 44px;
    }

    .th-stats__label {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 639px) {
    .th-stats__item {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .th-stats__value {
        font-size: 32px;
        line-height: 40px;
    }

    .th-stats__label {
        font-size: 16px;
        line-height: 24px;
    }
}

/* ==========================================================================
   Grade levels section
   ========================================================================== */
.th-grade-levels {
    margin-top: 48px;
}

.th-grade-levels__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 48px 64px;
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    background-color: #fafafa;
}

.th-grade-levels__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.th-grade-levels__badge {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--th-primary);
}

.th-grade-levels__title {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #181d27;
}

.th-grade-levels__desc {
    margin: 0;
    font-size: 16px;
    line-height: normal;
    font-weight: 300;
    color: #414651;
}

.th-grade-levels__grid {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.th-grade-levels__slider {
    width: 100%;
    overflow: hidden;
}

.th-grade-levels-swiper .swiper-slide {
    height: auto;
}

.th-grade-levels-swiper .th-grade-card {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.th-grade-levels__grid .th-grade-card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: calc((100% - 48px) / 3);
    max-width: calc((100% - 48px) / 3);
}

.th-grade-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    background-color: #ffffff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.th-grade-card:hover {
    color: inherit;
    box-shadow: 0 4px 16px rgba(10, 13, 18, 0.08);
    transform: translateY(-2px);
}

.th-grade-card__media {
    width: 100%;
    aspect-ratio: 3000 / 2370;
    border-radius: 8px;
    overflow: hidden;
}

.th-grade-card__img {
    width: 100%;
    height: 100%;
    display: block;
}

.th-grade-card__title {
    margin: 0;
    width: 100%;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: #181d27;
    text-align: center;
}

@media (max-width: 1200px) {
    .th-grade-levels__panel {
        padding: 40px 32px;
    }

    .th-grade-levels__title {
        font-size: 26px;
        line-height: 34px;
    }
}

@media (max-width: 991px) {
    .th-grade-levels {
        margin-top: 32px;
    }

    .th-grade-levels__panel {
        padding: 32px 20px;
    }

    .th-grade-levels__grid .th-grade-card {
        flex-basis: calc((100% - 48px) / 3);
        min-width: calc((100% - 48px) / 3);
        max-width: calc((100% - 48px) / 3);
    }

    .th-grade-levels__title {
        font-size: 24px;
        line-height: 32px;
    }

    .th-grade-card__title {
        font-size: 18px;
        line-height: 26px;
    }
}

@media (max-width: 639px) {
    .th-grade-levels__panel {
        padding: 24px 16px;
        gap: 20px;
    }

    .th-grade-levels__title {
        font-size: 22px;
        line-height: 30px;
    }

    .th-grade-levels__desc {
        font-size: 14px;
    }
}

/* ==========================================================================
   Why choose us section
   ========================================================================== */
.th-why-choose {
    margin-top: 48px;
}

.th-why-choose__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.th-why-choose__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 768px;
    text-align: center;
}

.th-why-choose__badge {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--th-primary);
}

.th-why-choose__title {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #181d27;
}

.th-why-choose__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
}

.th-why-choose__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 32px 24px 24px;
    border: 1px solid #e9eaeb;
    border-radius: 12px;
    background-color: #ffffff;
    text-align: center;
}

.th-why-choose__icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 10px;
    background-color: var(--th-secondary, #eae5ff);
}

.th-why-choose__icon {
    display: block;
    font-size: 28px;
    line-height: 1;
}

.th-why-choose__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.th-why-choose__card-title {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: #181d27;
}

.th-why-choose__card-desc {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
    color: #414651;
}

@media (max-width: 991.98px) {
    .th-why-choose__title {
        font-size: 26px;
        line-height: 34px;
    }

    .th-why-choose__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .th-why-choose {
        margin-top: 32px;
    }

    .th-why-choose__inner {
        gap: 32px;
    }

    .th-why-choose__grid {
        grid-template-columns: 1fr;
    }

    .th-why-choose__title {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 575.98px) {
    .th-why-choose__title {
        font-size: 22px;
        line-height: 30px;
    }

    .th-why-choose__card-title {
        font-size: 18px;
        line-height: 28px;
    }

    .th-why-choose__card-desc {
        font-size: 14px;
        line-height: 22px;
    }
}

/* ==========================================================================
   Showcase sections (courses + books)
   ========================================================================== */
.th-showcase {
    margin-top: 48px;
}

.th-showcase__inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
}

.th-showcase__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    direction: ltr;
}

.th-showcase__discover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    background-color: #ffffff;
    color: #414651;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.th-showcase__discover:hover {
    border-color: var(--th-primary);
    color: #414651;
}

.th-showcase__discover-icon {
    display: block;
    flex-shrink: 0;
}

.th-showcase__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    text-align: end;
}

.th-showcase__badge {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--th-primary);
}

.th-showcase__title {
    margin: 0;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #181d27;
}

.th-showcase__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}

.th-showcase__grid > .th-bundle-card,
.th-showcase__grid > .th-book-card {
    flex: 0 1 calc((100% - 48px) / 3);
    min-width: min(100%, 280px);
    max-width: calc((100% - 48px) / 3);
}

.th-bundle-card,
.th-book-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #e9eaeb;
    border-radius: 10px;
    background-color: #ffffff;
    overflow: hidden;
}

.th-bundle-card__media,
.th-book-card__media {
    display: block;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.th-book-card__media-btn {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: inherit;
}

.th-book-card__link {
    cursor: pointer;
    font: inherit;
}

.th-media-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.th-media-img--placeholder {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    object-position: center;
}

.th-hero__slide-img.th-media-img--placeholder,
.th-hero-split__img.th-media-img--placeholder,
.th-about-card__img.th-media-img--placeholder {
    width: 56px;
    height: 56px;
    max-width: 56px;
    max-height: 56px;
    object-fit: contain;
    object-position: center;
}

.th-grade-card__media.th-media-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3000 / 2370;
    background-color: #f5f5f5;
}

.th-grade-card__img.th-media-img--placeholder {
    width: 48px;
    height: 48px;
    max-width: 48px;
    max-height: 48px;
}

.th-hero-slide--banner.th-media-cover--placeholder,
.th-hero-split__media.th-media-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
        145deg,
        rgba(var(--th-primary-rgb), 0.28) 0%,
        rgba(var(--th-primary-rgb), 0.1) 45%,
        #f5f5f5 100%
    );
}

.th-hero-slide--banner.th-media-cover--placeholder .th-hero__slide-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.th-about-card__media.th-media-cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
}

.th-hero-social__avatar.th-media-img--placeholder {
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    background-color: #f5f5f5;
    border-radius: 50%;
}

.th-bundle-card__img,
.th-book-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.th-bundle-card__body,
.th-book-card__body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px;
    flex: 1 1 auto;
}

.th-bundle-card__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: 100%;
}

.th-bundle-card__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    text-align: start;
}

.th-bundle-card__title,
.th-book-card__title {
    margin: 0;
    width: 100%;
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
    color: #181d27;
}

.th-book-card__title {
    text-align: center;
}

.th-bundle-card__desc {
    margin: 0;
    font-size: 16px;
    line-height: normal;
    font-weight: 300;
    color: #414651;
}

.th-bundle-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.th-bundle-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px 2px 8px;
    border: 1px solid #e9eaeb;
    border-radius: 6px;
    background-color: #fafafa;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    color: #414651;
    white-space: nowrap;
}

.th-bundle-card__badge img {
    display: block;
    flex-shrink: 0;
}

.th-bundle-card__actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    direction: ltr;
}

.th-book-card__actions {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    direction: rtl;
}

.th-bundle-card__link,
.th-book-card__link {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 10px 14px;
    border-radius: 8px;
    color: #535862;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    background: transparent;
    border: 0;
}

.th-bundle-card__link:hover,
.th-book-card__link:hover {
    color: var(--th-primary);
}

.th-bundle-card__cta,
.th-book-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    max-width: 100%;
    flex-shrink: 0;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background-color: var(--th-primary);
    color: #ffffff;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-shadow:
        inset 0 0 0 1px rgba(10, 13, 18, 0.18),
        inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

.th-bundle-card__cta:hover,
.th-book-card__cta:hover {
    color: #ffffff;
    opacity: 0.96;
}

.th-book-card__body {
    align-items: flex-start;
    text-align: start;
}

@media (max-width: 991.98px) {
    .th-showcase__title {
        font-size: 26px;
        line-height: 34px;
    }

    .th-showcase__grid > .th-bundle-card,
    .th-showcase__grid > .th-book-card {
        flex: 0 1 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 767.98px) {
    .th-showcase {
        margin-top: 32px;
    }

    .th-showcase__inner {
        gap: 32px;
    }

    .th-showcase__header {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .th-showcase__heading {
        align-items: center;
        text-align: center;
    }

    .th-showcase__discover {
        align-self: center;
    }

    .th-showcase__grid > .th-bundle-card,
    .th-showcase__grid > .th-book-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .th-showcase__title {
        font-size: 24px;
        line-height: 32px;
    }

    .th-bundle-card__actions,
    .th-book-card__actions {
        flex-direction: column;
    }

    .th-bundle-card__cta,
    .th-book-card__cta {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .th-showcase__title {
        font-size: 22px;
        line-height: 30px;
    }

    .th-bundle-card__title,
    .th-book-card__title {
        font-size: 16px;
        line-height: 26px;
    }

    .th-bundle-card__desc {
        font-size: 14px;
    }
}

/* ==========================================================================
   Courses listing page
   ========================================================================== */
.th-courses-page {
    padding-block: 40px;
}

.th-courses-page__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: 100%;
}

.th-courses-page__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.th-courses-page__title {
    margin: 0;
    width: 100%;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #181d27;
    text-align: start;
}

.th-courses-tabs__wrap {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid #e9eaeb;
}

.th-courses-tabs {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    max-width: 100%;
}

.th-courses-tabs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-bottom: -1px;
    padding: 0 4px 12px;
    border-bottom: 2px solid transparent;
    color: #717680;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.th-courses-tabs__item:hover {
    color: #535862;
}

.th-courses-tabs__item.is-active {
    color: #6819fa;
    border-bottom-color: #6a19ff;
}

.th-courses-page__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}

.th-courses-page__grid > .th-bundle-card {
    flex: 0 1 calc((100% - 48px) / 3);
    min-width: min(100%, 280px);
    max-width: calc((100% - 48px) / 3);
}

html[dir="rtl"] .th-courses-page__grid,
html[dir="rtl"] .th-showcase__grid {
    direction: rtl;
}

html[dir="ltr"] .th-courses-page__grid,
html[dir="ltr"] .th-showcase__grid {
    direction: ltr;
}

.th-courses-page__empty {
    margin: 0;
    padding: 48px 0;
    width: 100%;
    text-align: center;
    color: #717680;
    font-size: 16px;
    line-height: 24px;
}

/* ==========================================================================
   Books listing page
   ========================================================================== */
.th-books-page {
    padding-block: 40px;
}

.th-books-page__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    width: 100%;
}

.th-books-page__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.th-books-page__title {
    margin: 0;
    width: 100%;
    font-size: 30px;
    line-height: 38px;
    font-weight: 500;
    color: #181d27;
    text-align: start;
}

.th-books-tabs__wrap {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid #e9eaeb;
}

.th-books-tabs {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    max-width: 100%;
}

.th-books-tabs__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    margin-bottom: -1px;
    padding: 0 4px 12px;
    border-bottom: 2px solid transparent;
    color: #717680;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.th-books-tabs__item:hover {
    color: #535862;
}

.th-books-tabs__item.is-active {
    color: #6819fa;
    border-bottom-color: #6a19ff;
}

.th-books-page__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 24px;
    width: 100%;
}

.th-books-page__grid > .th-book-card {
    flex: 0 1 calc((100% - 48px) / 3);
    min-width: min(100%, 280px);
    max-width: calc((100% - 48px) / 3);
}

html[dir="rtl"] .th-books-page__grid {
    direction: rtl;
}

html[dir="ltr"] .th-books-page__grid {
    direction: ltr;
}

.th-books-page__empty {
    margin: 0;
    padding: 48px 0;
    width: 100%;
    text-align: center;
    color: #717680;
    font-size: 16px;
    line-height: 24px;
}

.th-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid #e9eaeb;
}

.th-pagination__side {
    display: flex;
    align-items: center;
    min-height: 20px;
}

.th-pagination__side--next {
    justify-content: flex-start;
}

.th-pagination__side--prev {
    justify-content: flex-end;
}

.th-pagination__nav {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #535862;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.th-pagination__nav.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.th-pagination__numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.th-pagination__number,
.th-pagination__dots {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    color: #717680;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
}

.th-pagination__number.is-active {
    background-color: #fafafa;
    color: #414651;
}

.th-pagination__number:hover:not(.is-active) {
    background-color: #fafafa;
}

/* ==========================================================================
   App download CTA (Figma 1328:34668)
   ========================================================================== */
.th-app-cta {
    margin-top: 48px;
}

.th-app-cta__panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    width: 100%;
    padding: 40px 32px;
    border: 1px solid #d5d7da;
    border-radius: 20px;
    background-color: #fafafa;
    overflow: hidden;
}

.th-app-cta__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    max-width: 576px;
    min-width: 0;
}

.th-app-cta__title {
    margin: 0;
    color: #181d27;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
    text-align: start;
}

.th-app-cta__description {
    margin: 0;
    color: #414651;
    font-size: 16px;
    font-weight: 300;
    line-height: normal;
    text-align: start;
}

.th-app-cta__actions {
    display: flex;
    flex-shrink: 0;
    align-items: flex-start;
    gap: 25.55px;
}

.th-app-cta__badge {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

.th-app-cta__badge img {
    display: block;
    height: 56px;
    width: auto;
}

.th-app-cta__badge--google img {
    width: 189px;
}

.th-app-cta__badge--apple img {
    width: 168px;
}

.th-app-cta__badge--disabled {
    opacity: 0.35;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .th-app-cta__panel {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 32px 24px;
    }

    .th-app-cta__content {
        max-width: none;
        align-items: center;
        text-align: center;
    }

    .th-app-cta__title,
    .th-app-cta__description {
        text-align: center;
    }

    .th-app-cta__actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media (max-width: 639.98px) {
    .th-app-cta {
        margin-top: 32px;
    }

    .th-app-cta__panel {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .th-app-cta__title {
        font-size: 24px;
        line-height: 32px;
    }

    .th-app-cta__description {
        font-size: 14px;
    }

    .th-app-cta__badge img {
        height: 48px;
    }

    .th-app-cta__badge--google img {
        width: 162px;
    }

    .th-app-cta__badge--apple img {
        width: 144px;
    }
}

/* ==========================================================================
   Shared footer (Figma 1328:34904) — logical RTL/LTR
   ========================================================================== */
.th-footer {
    background-color: #ffffff;
    padding-block: 48px;
}

.th-footer__frame {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 100%;
}

.th-footer__main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px 96px;
    width: 100%;
}

.th-footer__brand {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 320px;
    min-width: min(100%, 320px);
}

.th-footer__logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 86px;
    height: 60px;
}

.th-footer__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.th-footer__description {
    margin: 0;
    color: #535862;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: start;
    width: 100%;
}

.th-footer__stores {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.th-footer__store-badge {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.th-footer__store-badge--google {
    width: 135px;
    height: 40px;
}

.th-footer__store-badge--apple {
    width: 120px;
    height: 40px;
}

.th-footer__store-badge img {
    display: block;
    width: 100%;
    height: 100%;
}

.th-footer__store-badge--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.th-footer__links {
    display: flex;
    flex: 1 1 800px;
    align-items: flex-start;
    gap: 32px;
    min-width: min(100%, 800px);
}

.th-footer__column {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-width: 96px;
}

.th-footer__column-title {
    margin: 0;
    width: 100%;
    color: #717680;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: start;
}

.th-footer__link-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}

.th-footer__link-list a {
    color: #414651;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    text-align: start;
}

.th-footer__column--pages .th-footer__link-list a {
    color: #181d27;
    font-weight: 300;
}

.th-footer__link-list a:hover {
    color: var(--th-primary);
}

.th-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px 16px;
    width: 100%;
    padding-top: 32px;
    border-top: 1px solid #e9eaeb;
}

.th-footer__social {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    min-width: 0;
}

.th-footer__social-link {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    line-height: 0;
    text-decoration: none;
}

.th-footer__social-link img {
    display: block;
    width: 20px;
    height: 20px;
}

.th-footer__social-link--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.th-footer__powered {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.th-footer__powered-logo {
    display: inline-flex;
    align-items: center;
    gap: 4.5px;
    line-height: 0;
    height: 12px;
}

.th-footer__powered-logomark {
    display: block;
    flex-shrink: 0;
    width: 23.665px;
    height: 12px;
}

.th-footer__powered-wordmark {
    display: block;
    flex-shrink: 0;
    width: 49.479px;
    height: 8.188px;
}

.th-footer__powered-text {
    color: #181d27;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    white-space: nowrap;
}

.th-footer__copyright {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.35em;
    flex: 1 1 0;
    margin: 0;
    min-width: 0;
    color: #535862;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-align: start;
}

.th-footer__copyright-mark,
.th-footer__copyright-prefix,
.th-footer__copyright-name,
.th-footer__copyright-year {
    display: inline-block;
}

.th-footer__copyright-name,
.th-footer__copyright-year {
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
}

.th-footer__copyright-name {
    font-weight: 500;
}

@media (max-width: 991.98px) {
    .th-footer__main {
        gap: 48px;
    }

    .th-footer__brand {
        align-items: center;
        max-width: none;
        min-width: 0;
        text-align: center;
    }

    .th-footer__description {
        text-align: center;
    }

    .th-footer__stores {
        justify-content: center;
    }

    .th-footer__links {
        flex-wrap: wrap;
        justify-content: center;
        min-width: 0;
    }

    .th-footer__column {
        flex: 1 1 calc(50% - 16px);
        align-items: center;
    }

    .th-footer__column-title,
    .th-footer__link-list {
        align-items: center;
        text-align: center;
    }

    .th-footer__link-list a {
        text-align: center;
    }

    .th-footer__bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .th-footer__social {
        flex: 0 1 auto;
        justify-content: center;
    }

    .th-footer__copyright {
        flex: 0 1 auto;
        text-align: center;
    }
}

@media (max-width: 991.98px) {
    .th-courses-page__grid > .th-bundle-card {
        flex: 0 1 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }

    .th-books-page__grid > .th-book-card {
        flex: 0 1 calc((100% - 24px) / 2);
        max-width: calc((100% - 24px) / 2);
    }
}

@media (max-width: 767.98px) {
    .th-courses-page {
        padding-block: 24px;
    }

    .th-courses-page__inner {
        gap: 32px;
    }

    .th-courses-page__title {
        font-size: 24px;
        line-height: 32px;
    }

    .th-courses-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .th-courses-tabs__wrap {
        justify-content: flex-start;
    }

    .th-courses-page__grid > .th-bundle-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .th-books-page {
        padding-block: 24px;
    }

    .th-books-page__inner {
        gap: 32px;
    }

    .th-books-page__title {
        font-size: 24px;
        line-height: 32px;
    }

    .th-books-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .th-books-tabs__wrap {
        justify-content: flex-start;
    }

    .th-books-page__grid > .th-book-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .th-pagination {
        grid-template-columns: 1fr;
        justify-items: center;
        row-gap: 12px;
    }

    .th-pagination__side--next,
    .th-pagination__side--prev {
        justify-content: center;
    }
}

/* ==========================================================================
   Book detail modal
   ========================================================================== */
body.th-book-modal-open {
    overflow: hidden;
}

.th-book-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 16px 24px;
    overflow-y: auto;
}

.th-book-modal[hidden] {
    display: none;
}

.th-book-modal__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
}

.th-book-modal__mount {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: 40px auto 32px;
}

.th-book-modal__dialog {
    position: relative;
    overflow: hidden;
    border: 1px solid #e9eaeb;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 48px -12px rgba(10, 13, 18, 0.18);
    text-align: start;
}

.th-book-modal__close {
    position: absolute;
    top: 12px;
    left: 15px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.th-book-modal__cover {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.th-book-modal__cover-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.th-book-modal__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px;
}

.th-book-modal__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.th-book-modal__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.th-book-modal__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding-block: 4px;
    padding-inline: 8px 6px;
    border: 1px solid #e9eaeb;
    border-radius: 6px;
    background: #fafafa;
    color: #181d27;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
}

.th-book-modal__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    color: #181d27;
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    text-align: start;
}

.th-book-modal__subtitle {
    margin: 0;
    width: 100%;
    color: #414651;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    text-align: start;
}

.th-book-modal__price {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}

.th-book-modal__price img {
    flex-shrink: 0;
}

.th-book-modal__section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

.th-book-modal__section-title {
    margin: 0;
    width: 100%;
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-align: start;
}

.th-book-modal__about {
    width: 100%;
    color: #414651;
    font-size: 16px;
    line-height: 24px;
    text-align: start;
}

.th-book-modal__about p {
    margin: 0;
}

.th-book-modal__benefits {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.th-book-modal__benefit {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}

.th-book-modal__benefit-text {
    flex: 1 1 auto;
    min-width: 0;
    color: #414651;
    font-size: 16px;
    line-height: 24px;
    text-align: start;
}

.th-book-modal__benefit img {
    flex-shrink: 0;
}

.th-book-modal__actions {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    padding-top: 16px;
    direction: rtl;
}

.th-book-modal__locations {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    background: #ffffff;
    color: #414651;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
}

.th-book-modal__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #6a19ff;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
}

.th-book-modal__price-value {
    color: #181d27;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}

html[dir="ltr"] .th-book-modal__dialog,
html[dir="ltr"] .th-book-modal__actions,
html[dir="ltr"] .th-book-card__actions {
    direction: ltr;
}

html[dir="ltr"] .th-book-modal__title-row {
    flex-direction: row-reverse;
}

html[dir="ltr"] .th-book-modal__actions {
    flex-direction: row-reverse;
}

.th-book-modal__locations:hover {
    border-color: rgba(106, 25, 255, 0.35);
    color: #181d27;
}

.th-book-modal__buy:hover {
    background: #5b12e6;
    color: #ffffff;
}

@media (max-width: 639.98px) {
    .th-book-modal__mount {
        margin-top: 20px;
    }

    .th-book-modal__title {
        font-size: 20px;
        line-height: 28px;
    }

    .th-book-modal__actions {
        flex-direction: column;
        direction: rtl;
    }

    .th-book-modal__locations,
    .th-book-modal__buy {
        width: 100%;
    }
}

/* ==========================================================================
   Course detail page — Hero (Figma 1328:35544)
   ========================================================================== */

.th-course-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 332px;
    padding: 40px var(--th-site-gutter);
    background-color: #181d27;
}

.th-course-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.th-course-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.th-course-hero__overlay-img,
.th-course-hero__veil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.th-course-hero__veil {
    background:
        linear-gradient(
            to inline-start,
            rgba(0, 0, 0, 0.08) 0%,
            rgba(0, 0, 0, 0.28) 42%,
            rgba(0, 0, 0, 0.58) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.08) 55%,
            rgba(0, 0, 0, 0.35) 100%
        );
}

.th-course-hero--fallback .th-course-hero__veil {
    background:
        linear-gradient(
            to inline-start,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.55) 45%,
            rgba(0, 0, 0, 0.72) 100%
        );
}

.th-course-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #252525;
}

.th-course-hero__placeholder img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    opacity: 0.55;
}

.th-course-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--th-site-max-width);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex: 1 1 auto;
}

.th-course-hero__stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* RTL: right edge — matches Figma text column */
    justify-content: center;
    gap: 28px;
    width: 100%;
}

.th-course-hero__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.th-course-hero__back:hover {
    color: #ffffff;
    opacity: 0.9;
}

.th-course-hero__back-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.th-course-hero__back-icon img {
    display: block;
    width: 20px;
    height: 20px;
}

/* RTL: arrow-right points toward page start (back). LTR: flip to point left. */
html[dir="ltr"] .th-course-hero__back-icon img,
.th-theme--en .th-course-hero__back-icon img {
    transform: scaleX(-1);
}

.th-course-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: auto;
    max-width: min(560px, 100%);
    color: #ffffff;
    text-align: start;
}

.th-course-hero__title {
    margin: 0;
    color: #ffffff;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
    white-space: nowrap;
}

.th-course-hero__desc {
    margin: 0;
    width: 100%;
    color: #ffffff;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: start;
}

.th-course-hero__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
}

.th-course-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Icon at inline-start: start pad 6 / end pad 8 (Figma pr-6 / pl-8) */
    padding-block: 2px;
    padding-inline-start: 6px;
    padding-inline-end: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

.th-course-hero__badge-icon {
    display: inline-flex;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.th-course-hero__badge-icon img {
    display: block;
    width: 12px;
    height: 12px;
}

.th-course-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: var(--th-primary, #6a19ff);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(10, 13, 18, 0.18),
        inset 0 -2px 0 rgba(10, 13, 18, 0.05);
}

.th-course-hero__cta:hover {
    color: #ffffff;
    opacity: 0.95;
}

.th-course-hero__cta-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 2px;
}

.th-course-hero__cta-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.th-course-hero__cta-icon img {
    display: block;
    width: 20px;
    height: 20px;
}

.th-course-detail {
    padding-block: 40px;
}

.th-course-detail__layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

.th-course-detail__main {
    flex: 1 1 auto;
    min-width: 0;
}

.th-course-detail__sidebar {
    flex: 0 0 360px;
    width: 360px;
    position: sticky;
    top: 24px;
}

.th-course-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e9eaeb;
}

.th-course-tabs__btn {
    margin: 0;
    padding: 0 4px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #717680;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
}

.th-course-tabs__btn.is-active {
    border-bottom-color: var(--th-primary);
    color: var(--th-primary);
}

.th-course-tab-panel {
    display: none;
}

.th-course-tab-panel.is-active {
    display: block;
}

.th-course-detail__empty,
.th-course-about__text {
    margin: 0;
    color: var(--th-text-secondary);
    font-size: 14px;
    line-height: 22px;
}

.th-course-about__title {
    margin: 24px 0 8px;
    color: var(--th-text-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.th-course-about__title:first-child { margin-top: 0; }

.th-course-about__list {
    margin: 8px 0 0;
    padding: 0 20px 0 0;
    color: var(--th-text-primary);
    font-size: 14px;
    line-height: 24px;
}

/* "Who is this for" reads as statements rather than a checklist. */
.th-course-about__list--plain { list-style: disc; }

.th-course-sidebar-card {
    overflow: hidden;
    border: 1px solid var(--th-border-primary);
    border-radius: 10px;
    background: #fff;
    box-shadow:
        0 20px 24px -4px rgba(10, 13, 18, 0.08),
        0 8px 8px -4px rgba(10, 13, 18, 0.03),
        0 3px 3px -1.5px rgba(10, 13, 18, 0.04);
}

.th-course-sidebar-card__media {
    position: relative;
    height: 160px;
    overflow: hidden;
}

.th-course-sidebar-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.th-course-sidebar-card__play {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--th-primary);
}

.th-course-sidebar-card__body {
    padding: 16px;
    text-align: center;
}

.th-course-sidebar-card__eyebrow {
    margin: 0 0 4px;
    color: #717680;
    font-size: 12px;
    line-height: 18px;
}

.th-course-sidebar-card__title {
    margin: 0;
    color: var(--th-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.th-course-sidebar-card__grade {
    margin: 4px 0 0;
    color: var(--th-primary);
    font-size: 14px;
    line-height: 20px;
}

.th-course-sidebar-card__footer {
    padding: 0 16px 16px;
}

.th-course-sidebar-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: var(--th-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
}

.th-course-sidebar-card__cta:hover {
    color: #fff;
    opacity: 0.95;
}

.th-course-unit {
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #e9eaeb;
    border-radius: 8px;
}

.th-course-unit__header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border: 0;
    background: #fafafa;
    text-align: right;
    cursor: pointer;
}

.th-course-unit.is-open .th-course-unit__header {
    background: #fafafa;
}

.th-course-unit__summary {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.th-course-unit__progress {
    position: relative;
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    color: var(--th-primary);
}

.th-course-unit__progress span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--th-text-primary);
}

.th-course-unit__text {
    min-width: 0;
}

.th-course-unit__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    color: #717680;
    font-size: 14px;
    line-height: 20px;
}

.th-course-unit__free-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--th-primary-rgb), 0.12);
    border: 1px solid rgba(var(--th-primary-rgb), 0.32);
    color: var(--th-primary);
    font-size: 12px;
    font-weight: 500;
}

.th-course-unit__title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.th-course-unit__subject {
    margin: 0;
    color: var(--th-text-primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
}

.th-course-unit__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.th-course-unit__stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid #e9eaeb;
    border-radius: 6px;
    background: #fff;
    color: #717680;
    font-size: 12px;
    line-height: 18px;
}

.th-course-unit__chevron {
    flex: 0 0 auto;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-course-unit:not(.is-open) .th-course-unit__chevron {
    transform: rotate(180deg);
}

.th-course-unit__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-course-unit.is-open .th-course-unit__body {
    grid-template-rows: 1fr;
}

.th-course-unit__body-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-course-unit.is-open .th-course-unit__body-inner {
    opacity: 1;
    transition-delay: 0.08s;
}

@media (prefers-reduced-motion: reduce) {
    .th-course-unit__body,
    .th-course-unit__body-inner,
    .th-course-unit__chevron {
        transition: none;
    }

    .th-course-unit__body-inner {
        opacity: 1;
    }

    .th-course-unit:not(.is-open) .th-course-unit__body {
        display: none;
    }

    .th-course-unit.is-open .th-course-unit__body {
        display: block;
    }
}

.th-course-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border-top: 1px solid #e9eaeb;
    background: #fff;
}

.th-course-row--free {
    background: rgba(var(--th-primary-rgb), 0.09);
}

.th-course-row__main {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
}

.th-course-row__icon {
    flex: 0 0 auto;
}

.th-course-row__content {
    min-width: 0;
    flex: 1 1 auto;
}

.th-course-row__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--th-text-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.th-course-row__free-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--th-primary-rgb), 0.12);
    border: 1px solid rgba(var(--th-primary-rgb), 0.32);
    color: var(--th-primary);
    font-size: 12px;
    font-weight: 500;
}

.th-course-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    color: #717680;
    font-size: 12px;
    line-height: 18px;
}

.th-course-row__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.th-course-row__meta-dot {
    color: #717680;
}

.th-course-row__progress {
    margin-top: 12px;
    width: 100%;
    max-width: 240px;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #fff;
}

.th-course-row__progress span {
    display: block;
    height: 8px;
    margin-top: 1px;
    border-radius: 999px;
    background: var(--th-primary);
}

.th-course-row__action {
    flex: 0 0 auto;
}

.th-course-row__watch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: var(--th-primary);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
}

.th-course-row__watch-btn:hover {
    color: #fff;
    opacity: 0.95;
}

.th-course-row__lock-btn {
    display: inline-flex;
    line-height: 0;
}

@media (max-width: 1023px) {
    .th-course-detail__layout {
        flex-direction: column;
    }

    .th-course-detail__sidebar {
        position: static;
        width: 100%;
        flex-basis: auto;
        order: -1;
    }

    .th-course-hero {
        min-height: 280px;
        padding-block: 32px;
    }

    .th-course-hero__title {
        font-size: 24px;
        line-height: 32px;
        white-space: normal;
    }

    .th-course-hero__desc {
        max-width: 100%;
    }

    .th-course-hero__stack {
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .th-course-hero {
        min-height: 0;
        padding-block: 28px;
    }

    .th-course-hero__stack {
        gap: 20px;
    }

    .th-course-hero__badges {
        flex-wrap: wrap;
        gap: 8px;
    }

    .th-course-hero__cta {
        width: 100%;
        justify-content: center;
    }

    .th-course-unit__header {
        align-items: flex-start;
        padding: 12px;
    }

    .th-course-unit__summary {
        align-items: flex-start;
        gap: 12px;
    }

    .th-course-unit__progress {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .th-course-unit__progress svg {
        width: 36px;
        height: 36px;
    }

    .th-course-unit__subject {
        font-size: 16px;
        line-height: 24px;
    }

    .th-course-unit__stats {
        gap: 6px;
    }

    .th-course-row {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
        gap: 12px;
    }

    .th-course-row__action {
        display: flex;
        justify-content: flex-end;
    }

    .th-course-unit__title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .th-course-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .th-course-sidebar-card__cta {
        width: 100%;
        justify-content: center;
    }
}


/* ==========================================================================
   Locations page (Figma 1328:35016)
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.th-locations {
    background: #fff;
    padding-block: 40px;
}

.th-locations__frame {
    width: 100%;
}

.th-locations__layout {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 40px;
    width: 100%;
}

.th-locations__panel {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    min-width: 0;
}

.th-locations__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    width: 100%;
}

.th-locations__title {
    margin: 0;
    color: #181d27;
    font-size: 30px;
    font-weight: 500;
    line-height: 38px;
    text-align: start;
}

.th-locations__desc {
    margin: 0;
    color: #414651;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    text-align: start;
}

.th-locations__tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    max-width: 620px;
    padding: 6px;
    border: 1px solid #e9eaeb;
    border-radius: 8px;
    background: #fafafa;
}

.th-locations__tab {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #717680;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-locations__tab img {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.72;
    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-locations__tab.is-active {
    background: color-mix(in srgb, var(--th-primary) 10%, white);
    color: var(--th-primary);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
}

.th-locations__tab.is-active img {
    opacity: 1;
    filter: none;
}

.th-locations__list-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    width: 100%;
}

.th-locations__filter {
    width: 100%;
}

.th-locations__filter-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.th-locations__filter-select {
    appearance: none;
    width: 100%;
    height: 44px;
    padding-block: 8px;
    padding-inline: 44px 40px;
    border: 1px solid #d5d7da;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: #717680;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: start;
    cursor: pointer;
}

.th-locations__filter-select:focus {
    outline: 2px solid color-mix(in srgb, var(--th-primary) 35%, white);
    outline-offset: 1px;
    border-color: var(--th-primary);
}

.th-locations__filter-search,
.th-locations__filter-chevron {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.th-locations__filter-search {
    inset-inline-start: 12px;
}

.th-locations__filter-chevron {
    inset-inline-end: 12px;
}

.th-locations__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-height: 520px;
    overflow: auto;
    padding-inline-end: 2px;
    scroll-behavior: smooth;
}

.th-locations__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid #e9eaeb;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.th-locations__card:hover,
.th-locations__card.is-active {
    border-color: color-mix(in srgb, var(--th-primary) 45%, #e9eaeb);
    box-shadow: 0 4px 16px rgba(10, 13, 18, 0.06);
}

.th-locations__card-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.th-locations__card-title {
    margin: 0;
    color: #181d27;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: start;
}

.th-locations__card-address {
    margin: 0;
    color: #414651;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-align: start;
}

.th-locations__card-phone {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    color: #414651;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    text-decoration: none;
}

.th-locations__card-phone img {
    display: block;
    width: 18px;
    height: 18px;
}

.th-locations__card-phone:hover {
    color: var(--th-primary);
}

.th-locations__empty {
    margin: 0;
    padding: 24px 16px;
    color: #717680;
    font-size: 14px;
    text-align: center;
}

.th-locations__map-wrap {
    flex: 0 0 620px;
    width: 620px;
    max-width: 100%;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
    background: #f5f5f5;
}

.th-locations__map {
    width: 100%;
    height: 100%;
    min-height: 600px;
}

.th-locations__marker-wrap {
    background: transparent !important;
    border: 0 !important;
}

.th-locations__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(10, 13, 18, 0.18);
}

@media (max-width: 1199.98px) {
    .th-locations__layout {
        gap: 28px;
    }

    .th-locations__map-wrap {
        flex-basis: 460px;
        width: 460px;
        height: 560px;
    }

    .th-locations__map {
        min-height: 560px;
    }
}

@media (max-width: 991.98px) {
    .th-locations {
        padding-block: 28px;
    }

    .th-locations__layout {
        flex-direction: column;
        gap: 24px;
    }

    .th-locations__tabs {
        max-width: none;
    }

    .th-locations__map-wrap {
        order: -1;
        flex-basis: auto;
        width: 100%;
        height: 320px;
    }

    .th-locations__map {
        min-height: 320px;
    }

    .th-locations__cards {
        max-height: none;
    }
}

@media (max-width: 575.98px) {
    .th-locations__title {
        font-size: 24px;
        line-height: 32px;
    }

    .th-locations__tab {
        font-size: 13px;
        gap: 6px;
        padding-inline: 8px;
    }

    .th-locations__map-wrap {
        height: 260px;
    }

    .th-locations__map {
        min-height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-locations__tab,
    .th-locations__card {
        transition: none;
    }
}

/* ── Contact page ───────────────────────────────────────────── */
.th-contact {
    --th-contact-primary: #6A19FF;
    /* Figma Hero frame: px 200 / py 40 — inset more than header/footer (80px) */
    --th-contact-gutter-x: 200px;
    --th-contact-gutter-y: 40px;
    background: #fff;
    padding-inline: var(--th-contact-gutter-x);
    padding-block: var(--th-contact-gutter-y);
}

.th-contact__frame {
    width: 100%;
    max-width: 1040px; /* 1440 - 200*2 — keeps desktop composition like Figma */
    margin-inline: auto;
}

/*
 * DOM: info | form
 * RTL → info on the right, form on the left (Figma)
 * LTR → info on the left, form on the right (mirror)
 * Figma gap: 40px
 */
.th-contact__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 478px);
    gap: 40px;
    align-items: start;
}

.th-contact__info {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    text-align: start;
}

.th-contact__header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.th-contact__title {
    margin: 0;
    color: #181D27;
    font-size: 30px;
    font-weight: 600;
    line-height: 38px;
    text-align: start;
}

.th-contact__desc {
    margin: 0;
    color: #414651;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
    text-align: start;
}

.th-contact__channels {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 280px;
    align-items: stretch;
}

/* DOM: icon then text → icon sits on the inline-start side (right in RTL / left in LTR) */
.th-contact__channel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.th-contact__channel-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--th-contact-primary);
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.th-contact__channel-icon img {
    width: 20px;
    height: 20px;
    display: block;
    object-fit: contain;
}

.th-contact__channel-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    width: max-content;
    max-width: calc(100% - 56px);
    text-align: start;
}

.th-contact__channel-label {
    color: #414651;
    font-size: 14px;
    line-height: 20px;
    text-align: start;
}

.th-contact__channel-value {
    display: block;
    color: #181D27;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

.th-contact__social {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    /* Keep icon order identical in AR/EN (TikTok → LinkedIn LTR), like Figma */
    direction: ltr;
}

.th-contact__social-link {
    display: inline-flex;
    width: 20px;
    height: 20px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.th-contact__social-link:hover {
    opacity: 1;
}

.th-contact__social-link--disabled {
    opacity: 0.35;
    pointer-events: none;
}

.th-contact__social-link img {
    width: 20px;
    height: 20px;
    display: block;
}

.th-contact__form-card {
    background: #fff;
    border: 1px solid #D5D7DA;
    border-radius: 10px;
    padding: 28px;
    width: 100%;
    max-width: 478px;
    text-align: start;
    justify-self: stretch;
}

.th-contact__form {
    display: flex;
    flex-direction: column;
    gap: 21px;
}

/*
 * DOM: first_name | last_name
 * RTL → first name right, last name left (Figma)
 * LTR → first name left, last name right
 */
.th-contact__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.th-contact__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    text-align: start;
}

.th-contact__label {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    color: #414651;
    font-size: 12.3px;
    font-weight: 500;
    line-height: 17.5px;
    text-align: start;
}

.th-contact__req {
    color: var(--th-contact-primary);
}

.th-contact__input,
.th-contact__select,
.th-contact__textarea,
.th-contact__country-select {
    width: 100%;
    border: 1px solid #D5D7DA;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    color: #181D27;
    font-size: 14px;
    line-height: 21px;
    padding: 9px 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    text-align: start;
}

.th-contact__input[dir="ltr"],
.th-contact__phone-input {
    text-align: start;
    unicode-bidi: plaintext;
}

.th-contact__input::placeholder,
.th-contact__textarea::placeholder {
    color: #717680;
}

.th-contact__input:focus,
.th-contact__select:focus,
.th-contact__textarea:focus,
.th-contact__country-select:focus {
    border-color: var(--th-contact-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-contact-primary) 18%, transparent);
}

.th-contact__input.is-invalid,
.th-contact__select.is-invalid,
.th-contact__textarea.is-invalid,
.th-contact__checkbox.is-invalid {
    border-color: #F04438;
}

.th-contact__select-wrap,
.th-contact__country {
    position: relative;
    display: block;
}

.th-contact__select,
.th-contact__country-select {
    padding-inline-end: 36px;
    color: #717680;
}

.th-contact__select-chevron {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/*
 * Phone field stays LTR in both locales (matches Figma):
 * [country | number] — country on the left, number on the right.
 */
.th-contact__phone {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 0;
    border: 1px solid #D5D7DA;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    overflow: hidden;
    background: #fff;
    direction: ltr;
}

.th-contact__country {
    border-inline-end: 1px solid #D5D7DA;
}

.th-contact__country-select,
.th-contact__phone-input {
    border: 0;
    box-shadow: none;
    border-radius: 0;
}

.th-contact__country-select {
    color: #535862;
    height: 100%;
    padding-inline: 10px 28px;
    text-align: start;
}

.th-contact__phone:focus-within {
    border-color: var(--th-contact-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--th-contact-primary) 18%, transparent);
}

.th-contact__textarea {
    min-height: 120px;
    resize: vertical;
}

/* DOM: checkbox then text → checkbox on inline-start (right in RTL) */
.th-contact__privacy {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    color: #535862;
    font-size: 14px;
    line-height: 21px;
    text-align: start;
}

.th-contact__privacy > span {
    flex: 1 1 auto;
    min-width: 0;
}

.th-contact__privacy a {
    color: var(--th-contact-primary);
    text-decoration: none;
}

.th-contact__privacy a:hover {
    text-decoration: underline;
}

.th-contact__checkbox {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1px solid #D5D7DA;
    border-radius: 5px;
    accent-color: var(--th-contact-primary);
}

.th-contact__submit {
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: var(--th-contact-primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    padding: 11px 16px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(10, 13, 18, 0.05);
    transition: filter 0.2s ease, transform 0.2s ease;
}

.th-contact__submit:hover {
    filter: brightness(1.05);
}

.th-contact__submit:active {
    transform: translateY(1px);
}

.th-contact__alert {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
    text-align: start;
}

.th-contact__alert--success {
    background: #ECFDF3;
    color: #067647;
    border: 1px solid #ABEFC6;
}

.th-contact__alert--error {
    background: #FEF3F2;
    color: #B42318;
    border: 1px solid #FECDCA;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1200px) {
    .th-contact {
        --th-contact-gutter-x: 64px;
        --th-contact-gutter-y: 36px;
    }

    .th-contact__frame {
        max-width: none;
    }
}

@media (max-width: 991px) {
    .th-contact {
        --th-contact-gutter-x: 24px;
        --th-contact-gutter-y: 28px;
    }

    .th-contact__layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .th-contact__info,
    .th-contact__channels {
        max-width: none;
        width: 100%;
    }

    .th-contact__channel {
        min-width: 0;
        width: 100%;
    }

    .th-contact__form-card {
        max-width: none;
    }
}

@media (max-width: 575px) {
    .th-contact {
        --th-contact-gutter-x: 16px;
        --th-contact-gutter-y: 24px;
    }

    .th-contact__form-card {
        padding: 20px 16px;
    }

    .th-contact__row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .th-contact__phone {
        grid-template-columns: 78px minmax(0, 1fr);
    }

    .th-contact__title {
        font-size: 26px;
        line-height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .th-contact__submit,
    .th-contact__social-link {
        transition: none;
    }
}