@import url('/css/global.css');

body {
    background-color: var(--dw-bg-body);
    /* Footer pinned to the bottom of the viewport on short pages (e.g. a learner-view quiz, one
       question per page): without it the footer ended mid-screen with a band of page background
       below it. Same fix as nanny-landing.css. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

    body > main[role="main"] {
        flex: 1 0 auto;
        width: 100%;
    }

/* ─────────────────────────────────────────────────────────────
   HEADER SHELL
   ───────────────────────────────────────────────────────────── */
.tg-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--dw-white);
    /* smooth transition for both scroll and page states */
    transition: background .35s ease, box-shadow .35s ease;
    padding: 30px 32px;
    height: 124px;
    display: grid;
}

.tg-header__logo {
    display: flex;
}

/* ─────────────────────────────────────────────────────────────
   NAVBAR (bottom strip) — WHITE state
   ───────────────────────────────────────────────────────────── */
.tg-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.tg-navbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Nav links */
.tg-nav-links {
    display: flex;
    gap: 26px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .tg-nav-links a {
        font-size: 1rem;
        font-weight: 400;
        color: var(--dw-gray-700);
        text-decoration: none;
        padding-bottom: 8px;
        line-height: 1.5rem;
        transition: color .2s;
    }

        .tg-nav-links a:hover {
            color: var(--dw-ink);
        }

        .tg-nav-links a.active {
            color: var(--dw-gray-800);
            border-bottom: 3px solid var(--dw-gray-800);
            border-end-start-radius: 3px;
            border-end-end-radius: 3px;
        }

.tg-nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hamburger — dark bars on white background */
.tg-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

    .tg-nav-toggle span {
        display: block;
        width: 21px;
        height: 2px;
        background: var(--dw-ink);
        border-radius: 2px;
        transition: background .35s ease, transform .25s ease, opacity .25s ease;
    }

    .tg-nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .tg-nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .tg-nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

/* Search — white background state */
.tg-search {
    position: relative;
    display: flex;
    align-items: center;
}

.tg-search__btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: var(--dw-bg-gray);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--dw-gray-b);
    fill: var(--dw-gray-b);
    font-size: 0.875rem;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background .35s, border-color .35s, color .35s;
    letter-spacing: 0.14px;
    line-height: 1.25rem;
}

    .tg-search__btn:hover {
        background: rgba(0,0,0,.09);
    }

.tg-search__input {
    display: block;
    width: 0;
    opacity: 0;
    pointer-events: none;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 20px;
    padding: 0;
    color: var(--dw-gray-b);
    font-size: 0.875rem;
    outline: none;
    transition: width .28s ease, opacity .28s ease;
}

    .tg-search__input::placeholder {
        color: var(--dw-gray-b);
    }

.tg-search.is-open .tg-search__btn {
    display: none;
}

.tg-search.is-open .tg-search__input {
    width: 200px;
    opacity: 1;
    padding: 6px 14px;
    pointer-events: auto;
}

/* Accessibility icon button — white state */
.tg-access {
    position: relative;
    display: inline-flex;
}

.tg-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 50%;
    color: var(--dw-gray-900);
    fill: var(--dw-gray-900);
    cursor: pointer;
    padding: 0;
    transition: background .35s, border-color .35s, color .35s;
}

    .tg-icon-btn:hover {
        background: rgba(0,0,0,.1);
    }

/* Language button — white state */
.tg-lang-btn {
    min-height: 40px;
    display: flex;
    align-items: center;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 26px;
    padding: 8px 12px;
    color: var(--dw-gray-900);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .35s, border-color .35s, color .35s;
    text-decoration: unset;
}

    .tg-lang-btn:hover {
        background: rgba(0,0,0,.09);
    }

/* Login button — white state */
.tg-btn-login {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--dw-gray-900);
    fill: var(--dw-gray-900);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    transition: background .35s, border-color .35s, color .35s;
}

    .tg-btn-login:hover {
        background: rgba(0,0,0,.09);
    }

/* ─────────────────────────────────────────────────────────────
   HERO HEADER — transparent on Home + About
   ───────────────────────────────────────────────────────────── */
.tg-header--hero {
    position: fixed; /* overlays the hero image */
    background: transparent;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 63.02%, rgba(0, 0, 0, 0.00) 100%);
}

    .tg-header--hero ::after {
        background: linear-gradient( 180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 63.02%, rgba(0, 0, 0, 0) 100% );
    }



    /* All elements go white/light when transparent */
    .tg-header--hero:not(.is-scrolled) .tg-nav-links a {
        color: var(--dw-header);
    }

        .tg-header--hero:not(.is-scrolled) .tg-nav-links a.active {
            color: var(--dw-header);
            border-bottom-color: var(--dw-header);
        }

    .tg-header--hero:not(.is-scrolled) .tg-nav-toggle span {
        background: rgba(255,255,255,.85);
    }

    .tg-header--hero:not(.is-scrolled) .tg-search__btn {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .tg-search__input {
        color: var(--dw-gray-900);
    }

        .tg-header--hero:not(.is-scrolled) .tg-search__input::placeholder {
            color: var(--dw-gray-900);
        }

    .tg-header--hero:not(.is-scrolled) .bg-light.tg-search__input::placeholder {
        color: var(--dw-gray-b);
    }

    .tg-header--hero:not(.is-scrolled) .tg-icon-btn {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .tg-lang-btn {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .tg-btn-login {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .bg-light, .tg-header--hero:not(.is-scrolled) .tg-search__input.bg-light {
/*        background: var(--dw-bg-gray);*/
/*        color: var(--dw-gray-900);*/
/*        fill: var(--dw-gray-900);*/
    }

    /* Scrolled → back to white (JS adds .is-scrolled) */
    .tg-header--hero.is-scrolled {
        background: var(--dw-white);
        box-shadow: 0 1px 8px rgba(0,0,0,.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* TG-REG-01 (same fix as SD-REG-07 in safaridriver/header.css): the hero → scrolled swap must be instant. The
       gradient can't interpolate, so it vanished at once while background-color faded in from transparent (under the
       blur) and the links/icons faded — for that window the header was see-through and the page headings showed
       through the menu. Only the shadow animates. `.tg-header.` prefix: accessibility.css (loaded later) re-adds a
       background-color transition on `.tg-header`. */
    .tg-header.tg-header--hero {
        transition: box-shadow .35s ease;
    }

    .tg-header--hero .tg-nav-links a,
    .tg-header--hero .tg-nav-toggle span,
    .tg-header--hero .tg-search__btn,
    .tg-header--hero .tg-search__input,
    .tg-header--hero .tg-icon-btn,
    .tg-header--hero .tg-lang-btn,
    .tg-header--hero .tg-btn-login,
    .tg-header--hero .tg-language-toggle {
        transition: none;
    }

/* ─────────────────────────────────────────────────────────────
   MOBILE MENU
   ───────────────────────────────────────────────────────────── */

.tg-nav-mobile--hero {
    top: 124px;
}

.tg-nav-mobile {
    display: none;
    flex-direction: column;
    background: var(--dw-white);
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 20px 24px 24px;
}

    /* The open menu sits IN the page, right under the header, and pushes the content down — so one scroll
       moves through both: down past the menu into the page, and back up to the menu. It used to be a fixed
       overlay with no height limit, so on a short screen (a phone in landscape) Logout was off-screen and a
       swipe scrolled the hidden page behind it instead.
       --tg-nav-mobile-offset (set by the layout script) is the header height on pages whose header is
       position:fixed (the hero pages), so the menu starts below it instead of underneath it; 0 elsewhere,
       where the sticky header already takes its own space. top: 0 cancels the old .tg-nav-mobile--hero top. */
    .tg-nav-mobile.is-open {
        display: flex;
        position: relative;
        top: 0;
        width: 100%;
        z-index: 999;
        margin-top: var(--tg-nav-mobile-offset, 0px);
    }

/* The hamburger only exists up to 1100px; above that the drawer must never show, even if it was left
   open while the window was narrow (it used to stay open with no button left to close it). */
@media (min-width: 1101px) {
    .tg-nav-mobile,
    .tg-nav-mobile.is-open {
        display: none;
    }
}

    .tg-nav-mobile ul {
        list-style: none;
        padding: 0;
        margin: 0 0 4px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .tg-nav-mobile ul a {
            display: block;
            padding: 10px 0;
            font-size: .95rem;
            font-weight: 500;
            color: var(--dw-gray-700);
            text-decoration: none;
            border-bottom: 1px solid var(--dw-bdr);
            transition: color .18s;
        }

            .tg-nav-mobile ul a:hover,
            .tg-nav-mobile ul a.active {
                color: var(--dw-teal);
            }

.tg-mob-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    align-items: flex-start;
}

/* Mobile drawer: Login and Language are round icon buttons like dark mode / accessibility / search below
   them. Their word (.tg-mob-label) shows as a tooltip beside the icon on hover or keyboard focus; the
   link's aria-label keeps it for screen readers. */
.tg-mob-actions .tg-mob-icon-only {
    position: relative;
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border-radius: 50%;
}

.tg-mob-actions .tg-mob-label {
    position: absolute;
    top: 50%;
    inset-inline-start: calc(100% + 8px);
    transform: translateY(-50%);
    padding: 4px 10px;
    border-radius: 6px;
    background: var(--dw-gray-900);
    color: var(--dw-white);
    font-size: 0.75rem;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s, visibility .15s;
    z-index: 1;
}

.tg-mob-actions .tg-mob-icon-only:hover .tg-mob-label,
.tg-mob-actions .tg-mob-icon-only:focus-visible .tg-mob-label {
    opacity: 1;
    visibility: visible;
}

.tg-mob-cta {
    display: block;
    text-align: center;
    background: var(--dw-teal);
    color: var(--dw-white);
    border: none;
    border-radius: 24px;
    padding: 11px 24px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

    .tg-mob-cta:hover {
        background: var(--dw-teal-bold);
    }

.tg-mob-cta--outline {
    background: transparent;
    border: 1.5px solid var(--dw-teal);
    color: var(--dw-teal);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

    .tg-navbar {
        padding: 0;
    }

    .tg-search.is-open .tg-search__input {
        width: 160px;
    }
}

@media (max-width: 640px) {
    .tg-header {
        height: 88px;
        padding: 20px;
    }

    .tg-nav-mobile--hero {
        top: 88px;
    }

    .tg-header__logo {
        height: 26px;
    }

    .tg-navbar {
        padding: 0 16px;
        height: 46px;
    }

    .tg-nav-links {
        display: none;
    }


    .tg-search.is-open .tg-search__input {
        width: 140px;
    }

    .tg-btn-login {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 380px) {

    .tg-navbar {
        padding: 0 12px;
    }
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
.tg-hero {
    background: var(--home-hero-bg);
    padding: 80px 64px 102px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding-top: var(--tg-header-h);
}

.tg-hero__tag {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--dw-teal);
    text-transform: uppercase;
    margin-bottom: 0px;
}

.tg-hero__title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 4.4rem;
    color: var(--dw-ink);
    margin-bottom: 20px;
    margin-top: 10px;
    letter-spacing: -1.28px;
}

.d-mobile {
    display: block;
}

.d-desktop {
    display: none;
}

.tg-hero__sub {
    font-size: 1.125rem;
    color: var(--dw-muted);
    line-height: 1.8rem;
    margin-bottom: 36px;
}

.tg-hero__actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.tg-btn-uae {
    background: var(--dw-ink);
    color: var(--dw-white);
    border-radius: 12px;
    padding: 12px 20px;
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 62px;
}

.tg-btn-req {
    color: var(--dw-ink);
    border: 1px solid var(--dw-bdr-b);
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 62px;
    display: flex;
    align-items: center;
}

.tg-hero__img-col {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 530px;
}

.tg-hero__circle {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    height: 100%;
}

.tg-badge-cont {
    position: relative;
}

.tg-hero__badge {
    position: absolute;
    bottom: -32px;
    left: -10px;
    background: var(--dw-white-40);
    border: 1px solid var(--dw-brd-100);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--dw-shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tg-hero__badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--dw-teal-50);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-hero__badge-title {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--dw-ink);
    line-height: 1.225rem;
}

.tg-hero__badge-sub {
    font-size: 0.625rem;
    color: var(--dw-muted);
    margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   AVAILABLE TRIPS  —  tg-trips-* / tg-trip-card-*
   ═══════════════════════════════════════════════════════════════ */
.tg-trips {
    padding: 48px 64px;
}

.tg-trips__header {
    margin-bottom: 28px;
}

    .tg-trips__header h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--dw-teal-300);
        margin-bottom: 4px;
    }

    .tg-trips__header p {
        font-size: 1rem;
        color: var(--dw-muted);
    }

/* Users-style toast (Book Now feedback) */
.tg-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 14px);
    background: #1E3A8A;
    color: var(--dw-white);
    padding: 11px 18px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.84375rem;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(30, 58, 138, 0.35);
    z-index: 999999;
    opacity: 0;
    transition: 0.24s;
    max-width: min(420px, 92vw);
    cursor: pointer;
}

.tg-toast.is-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.tg-toast svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.tg-toast--success svg {
    color: #7ee0a8;
}

.tg-toast--error svg {
    color: #fca5a5;
}

.tg-trips__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tg-trip-card {
    background: var(--dw-white-40);
    border: 1px solid var(--dw-brd-100);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tg-trip-card--highlight {
    border-color: var(--dw-teal-500, #0F766E);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.25);
}

.tg-trip-card__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 24px;
}

.tg-trip-card__head--dark {
    background: var(--dw-teal-500);
}

.tg-trip-card__head--light {
    background: var(--dw-teal-100);
}

.tg-trip-card__icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tg-trip-card__head--dark .tg-trip-card__icon-wrap {
    background: rgba(255,255,255,.15);
}

.tg-trip-card__head--light .tg-trip-card__icon-wrap {
    background: rgba(0,102,110,.12);
}

.tg-trip-card__head h3 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.8rem;
    margin: 0;
}

.tg-trip-card__head--dark h3 {
    color: var(--dw-white);
}

.tg-trip-card__head--light h3 {
    color: var(--dw-teal-300);
}

.tg-trip-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.tg-trip-card__desc {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--dw-muted);
    line-height: 1.225rem;
    margin: 0;
}

.tg-trip-card__meta {
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .tg-trip-card__meta li {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        font-weight: 500;
        line-height: 1.225rem;
        color: var(--dw-muted);
    }

        .tg-trip-card__meta li img {
            width: 13px;
            height: 13px;
            flex-shrink: 0;
        }

/* Pickup point map — only rendered for trips whose admin dropped a pin. */
.tg-trip-card__map {
    margin-top: 12px;
}

    .tg-trip-card__map-canvas {
        width: 100%;
        height: 160px;
        border-radius: 10px;
        background: #eceae7;
        z-index: 0; /* keeps Leaflet panes from riding over the site header */
    }

.tg-trip-card__map-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0F766E;
    text-decoration: none;
}

    .tg-trip-card__map-link:hover,
    .tg-trip-card__map-link:focus {
        text-decoration: underline;
    }

.tg-trip-card__enroll {
    margin-top: auto;
}

.tg-trip-card__enroll-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

    .tg-trip-card__enroll-row span:first-child {
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--dw-teal-300);
    }

    .tg-trip-card__enroll-row span:last-child {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--dw-muted);
    }

.tg-trip-card__bar {
    height: 5px;
    background: var(--dw-bdr);
    border-radius: 99px;
    overflow: hidden;
}

.tg-trip-card__bar-fill {
    height: 100%;
    background: var(--dw-teal-300);
    border-radius: 99px;
}

.tg-trip-card__btn {
    width: 100%;
    padding: 12px;
    background: var(--dw-teal);
    color: var(--dw-white);
    border: none;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    margin-top: 14px;
}

    .tg-trip-card__btn:hover {
        background: var(--dw-teal-600);
    }

/* ═══════════════════════════════════════════════════════════════
   REGISTRATION MODAL  —  tg-modal-*
   ═══════════════════════════════════════════════════════════════ */
.tg-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(25,28,30,.45);
    z-index: 1005;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

    .tg-modal-overlay.open {
        display: flex;
    }

.tg-modal {
    background: var(--dw-white);
    border-radius: 20px;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--dw-shadow-lg);
}

.tg-modal__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 32px 0;
}

.tg-modal__title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tg-modal__icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--dw-teal-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .tg-modal__icon-wrap svg {
        width: 22px;
        height: 22px;
    }

.tg-modal__title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--dw-teal-300);
    margin: 0;
}

.tg-modal__subtitle {
    font-size: 1rem;
    color: var(--dw-muted);
    margin-top: 2px;
}

.tg-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--dw-body);
    line-height: 1;
    flex-shrink: 0;
}

    .tg-modal__close svg {
        width: 20px;
        height: 20px;
    }

.tg-modal__body {
    padding: 30px 32px 32px;
}

.tg-modal__label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--dw-teal-300);
    margin-bottom: 8px;
}

.tg-modal__desc {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.625rem;
    margin: 0 0 22px;
}

.tg-modal__objectives {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .tg-modal__objectives li {
        font-size: 1rem;
        color: var(--dw-muted);
        padding-left: 20px;
        position: relative;
        line-height: 1.6rem;
    }

.tg-modal__divider {
    height: 1px;
    background: #BCC9CA;
    margin: 0 0 25px;
}

.tg-modal__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 25px;
}

.tg-modal__detail-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--dw-muted);
    margin-bottom: 4px;
}

.tg-modal__detail-value {
    font-size: 1rem;
    font-weight: 500;
    color: var(--dw-ink);
}

.tg-modal__terms {
    border: 1px solid var(--dw-bdr-200);
    background: var(--dw-surf);
    border-radius: 12px;
    padding: 16px;
    font-size: 0.75rem;
    color: var(--dw-muted);
    margin-bottom: 20px;
}

.tg-modal__actions {
    display: flex;
    gap: 12px;
}

.tg-modal__cancel {
    flex: 1;
    padding: 16px;
    background: var(--dw-white);
    border: 1px solid var(--dw-bdr-200);
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-ink);
    cursor: pointer;
    transition: border-color .2s;
}

    .tg-modal__cancel:hover {
        border-color: var(--dw-teal);
    }

.tg-modal__continue {
    flex: 1;
    padding: 16px;
    background: var(--dw-stats-to);
    color: var(--dw-white);
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}

    .tg-modal__continue:hover {
        background: var(--dw-teal-bold);
    }


/* ─────────────────────────────────────────────────────────────
   FEATURES
   ───────────────────────────────────────────────────────────── */
.tg-features {
    padding: 48px 64px 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.tg-feat-title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 2.4rem;
    color: var(--dw-ink);
    margin-bottom: 24px;
    margin-top: 0;
}

.tg-feat-sub {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.6rem;
    margin: 0;
}

.tg-feat-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tg-feat-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.tg-feat-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--dw-teal);
}

.tg-feat-item h3 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--dw-ink);
    margin: 0 0 5px;
}

.tg-feat-item p {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.6rem;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   ELIGIBILITY
   ───────────────────────────────────────────────────────────── */
.tg-elig-outer {
    background: var(--dw-surf);
    padding: 48px 64px;
}

.tg-elig {
    background: var(--dw-white);
    border-radius: 20px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    box-shadow: var(--dw-shadow);
}

.tg-elig-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dw-ink);
    margin-bottom: 14px;
}

.tg-elig-desc {
    font-size: 1.125rem;
    color: var(--dw-muted);
    line-height: 1.8rem;
    margin-bottom: 35px;
}

.tg-elig-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tg-elig-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--dw-ink);
}

.tg-elig-img {
    width: 100%;
    border-radius: 14px;
    object-fit: cover;
}

/* ─────────────────────────────────────────────────────────────
   PATH TO LICENSE
   ───────────────────────────────────────────────────────────── */
.tg-path {
    padding: 30px 64px 80px;
    text-align: center;
}

    .tg-path h2 {
        font-size: 2rem;
        font-weight: 600;
        color: var(--dw-ink);
        margin-bottom: 48px;
    }

.tg-path-steps {
    display: flex;
    margin: 0 auto;
    gap: 8px;
    justify-content: center;
    width: 100%;
}

.tg-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 0;
}

.tg-step-data {
    width: 100%;
}

.tg-step-num {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--dw-teal);
    color: var(--dw-white);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.tg-step-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--dw-ink);
    margin: 12px 0 6px;
}

.tg-step-desc {
    font-size: 0.75rem;
    color: var(--dw-muted);
    line-height: 1.125rem;
}

/* ─────────────────────────────────────────────────────────────
   CURRICULUM
   ───────────────────────────────────────────────────────────── */
.tg-curr {
    background: var(--dw-white);
    padding: 30px 64px;
}

    .tg-curr h2 {
        font-size: 2rem;
        font-weight: 600;
        color: var(--dw-ink);
        text-align: center;
        margin-bottom: 32px;
    }

.tg-curr-grid1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
    margin-bottom: 25px
}

.tg-curr-grid2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
}

/* 5–6 curriculum items: a uniform grid, 3 per row (2 per row ≤1024px, 1 per row ≤480px — see the media queries). */
.tg-curr-grid3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

@media (max-width: 1024px) {
    .tg-curr-grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .tg-curr-grid3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.tg-curr-card {
    border-radius: 16px;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tg-curr-card--photo {
    position: relative;
    justify-content: flex-end;
}

.tg-curr-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tg-curr-card__overlay {
    position: relative;
    z-index: 1;
    padding: 24px;
    background: linear-gradient(to top, rgba(0,0,0,1.65) 0%, rgba(0,0,0,0) 100%);
}

    .tg-curr-card__overlay h3 {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--dw-header);
        margin-bottom: 8px;
    }

    /* .tg-curr-card__text wraps the subtitle, which is admin rich text (its own <p>s) — or plain text
       on items saved before the editor, which the wrapper itself has to style. */
    .tg-curr-card__overlay p,
    .tg-curr-card__overlay .tg-curr-card__text {
        font-size: 1rem;
        color: var(--dw-header);
        line-height: 1.6rem;
        margin: 0;
    }

    .tg-curr-card__text p + p,
    .tg-curr-card__text p + ul, .tg-curr-card__text p + ol,
    .tg-curr-card__text ul + p, .tg-curr-card__text ol + p {
        margin-top: 0.5rem;
    }

    .tg-curr-card__text ul, .tg-curr-card__text ol {
        margin: 0;
        padding-inline-start: 1.25rem;
    }

.tg-curr-card--teal {
    background: var(--dw-teal-100);
    padding: 28px;
}

.tg-curr-card--surf {
    background: var(--dw-surf);
    padding: 28px;
}

.tg-curr-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
}

.tg-curr-card--teal h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dw-teal);
    margin-bottom: 8px;
}

.tg-curr-card--teal p,
.tg-curr-card--teal .tg-curr-card__text {
    font-size: 1rem;
    color: var(--dw-teal-400);
    line-height: 1.6rem;
    margin: 0;
}

.tg-curr-card--surf h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dw-ink);
    margin-bottom: 8px;
}

.tg-curr-card--surf p,
.tg-curr-card--surf .tg-curr-card__text {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.6rem;
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────
   DCT CERTIFICATION
   ───────────────────────────────────────────────────────────── */
.tg-dct {
    border-top: 1px solid rgba(188, 201, 202, 0.20);
    border-bottom: 1px solid rgba(188, 201, 202, 0.20);
    background: rgba(214, 210, 196, 0.10);
    padding: 64px;
    text-align: center;
}

.tg-dct-icon {
    width: 42px;
    height: 53px;
    margin: 0 auto 20px;
    display: block;
}

.tg-dct h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--dw-ink);
    margin-bottom: 16px;
}

.tg-dct p {
    font-size: 1.125rem;
    color: var(--dw-muted);
    line-height: 1.8rem;
    max-width: 47.1875rem;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────
   CTA BANNER
   ───────────────────────────────────────────────────────────── */
.tg-cta-outer {
    padding: 55px 64px 64px;
}

.tg-cta {
    background: var(--dw-teal-500);
    border-radius: 20px;
    padding: 56px 64px;
    text-align: center;
}

.tg-cta-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-white-100);
    margin-bottom: 20px;
}

.tg-cta-sub {
    font-size: 1rem;
    color: var(--dw-white-100);
    line-height: 1.5rem;
    max-width: 37.6875rem;
    margin: 0 auto 55px;
}

.tg-btn-start {
    background: var(--dw-bg-body);
    color: var(--dw-teal);
    border-radius: 32px;
    padding: 20px 40px;
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    transition: opacity .2s ease;
}

    .tg-btn-start:hover {
        opacity: .9;
    }

/* ─────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────── */
.tg-footer {
    background: var(--dw-surf-b);
    border-top: 1px solid var(--dw-bdr-200);
}

/* ── Main 3-column content ── */
.tg-footer__main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 48px;
    padding: 48px 64px;
}

/* Brand column */
.tg-footer__brand-logo {
    display: block;
    margin-bottom: 16px;
}

.tg-footer__brand-desc {
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--dw-muted);
    margin-bottom: 20px;
    max-width: 21.875rem;
}

.tg-footer__social {
    display: flex;
    gap: 8px;
}

.tg-footer__icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--dw-bdr-b);
    border-radius: 9999px;
    background: none;
    color: var(--dw-ink);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

    .tg-footer__icon-btn:hover {
        border-color: var(--dw-teal);
        color: var(--dw-teal);
    }

/* Nav columns */
.tg-footer__col-heading {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dw-ink);
    margin-bottom: 16px;
    margin-top: 0;
}

.tg-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .tg-footer__links a {
        font-size: 1rem;
        color: var(--dw-muted);
        font-weight: 400;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        transition: opacity .18s;
    }

        .tg-footer__links a:hover {
            opacity: .72;
        }

/* ── Footer responsive ── */
@media (max-width: 900px) {
    .tg-footer__main {
        padding: 20px;
        gap: 32px;
    }
}

@media (max-width: 640px) {
    .tg-footer__main {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 20px;
    }
}

/* ── Brand-only footer ──
   The Explore / Support link columns are commented out in _TourGuideLayout until they have real targets.
   With only the brand column left, the 3-column grid and its 48px padding leave a tall empty band, so
   the brand block lays out as one compact row (logo · description · social icons) instead. Keyed on the
   columns being absent, so restoring them brings back the normal 3-column layout. */
.tg-footer__main:not(:has(.tg-footer__col)) {
    display: block;
    padding: 28px 64px 20px;
}

    .tg-footer__main:not(:has(.tg-footer__col)) .tg-footer__brand {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 32px;
    }

    .tg-footer__main:not(:has(.tg-footer__col)) .tg-footer__brand-logo,
    .tg-footer__main:not(:has(.tg-footer__col)) .tg-footer__brand-desc {
        margin-bottom: 0;
    }

    .tg-footer__main:not(:has(.tg-footer__col)) .tg-footer__brand-desc {
        flex: 1 1 20rem;
        max-width: 36rem;
    }

    .tg-footer__main:not(:has(.tg-footer__col)) .tg-footer__social {
        margin-inline-start: auto;
    }

.tg-footer__main:not(:has(.tg-footer__col)) + .tg-footer__legal_cont .tg-footer__legal {
    padding-top: 20px;
}

@media (max-width: 900px) {
    .tg-footer__main:not(:has(.tg-footer__col)) {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    /* Stacked again on phones; the icons sit under the text, not pushed to the far edge. */
    .tg-footer__main:not(:has(.tg-footer__col)) .tg-footer__social {
        margin-inline-start: 0;
    }
}

/* ── Legal / copyright bar ── */
.tg-footer__legal_cont {
    background: var(--dw-surf-b);
    padding: 0px 64px 24px;
}

.tg-footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 32px;
}

.brd-top {
    border-top: 1px solid rgba(109, 121, 122, 0.20);
}

.tg-footer__copy {
    font-size: 1rem;
    color: var(--dw-muted);
}

.tg-footer__legal-links {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px;
}

    .tg-footer__legal-links a {
        font-size: 1rem;
        color: var(--dw-muted);
        text-decoration: none;
        transition: color .18s;
    }

        .tg-footer__legal-links a:hover {
            color: var(--dw-teal);
        }

/* Responsive */
@media (max-width: 900px) {
    .tg-footer__legal {
        padding: 14px 28px;
    }


    .tg-footer__legal_cont {
        padding: 20px;
    }
}

@media (max-width: 640px) {
    .tg-footer__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 14px 20px;
    }

    .tg-footer__legal-links {
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ── Tablet  (≤ 1024px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Navbar */
    .tg-navbar {
        padding: 0 32px;
    }

    /* Hero */
    .tg-hero {
        padding: 122px 32px 56px;
        gap: 32px;
    }

    .tg-hero__title {
        font-size: 2.2rem;
        line-height: 2.75rem;
    }

    .tg-hero__circle {
        width: 260px;
        height: 260px;
    }

    /* Features */
    .tg-features {
        padding: 56px 32px;
        gap: 40px;
    }

    .tg-feat-title {
        font-size: 1.6rem;
    }

    /* Eligibility */
    .tg-elig-outer {
        padding: 48px 32px;
    }

    .tg-elig {
        padding: 36px;
        gap: 32px;
    }

    /* Path */
    .tg-path {
        padding: 48px 32px 64px;
    }

    /* Curriculum */
    .tg-curr {
        padding: 56px 32px;
    }

    /* DCT */
    .tg-dct {
        padding: 48px 32px;
    }

    /* CTA */
    .tg-cta-outer {
        padding: 24px 32px 48px;
    }

    .tg-cta {
        padding: 48px 32px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ── Mobile  (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Navbar ── */
    .tg-navbar {
        padding: 0;
    }

    .tg-nav-links {
        display: none;
    }

    .tg-nav-actions {
        display: none;
    }

    .tg-nav-toggle {
        display: flex;
    }

    /* ── Hero ── */
    .tg-hero {
        grid-template-columns: 1fr;
        padding: 148px 20px 40px;
        text-align: center;
        gap: 0;
    }

    .tg-hero__tag {
        margin-bottom: 12px;
    }

    .tg-hero__title {
        font-size: 2.2rem;
        line-height: 2.75rem;
        letter-spacing: -0.8px;
        max-width: 25rem;
        margin: auto;
    }

    .tg-hero__sub {
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }

    .tg-hero__actions {
        margin-top: 45px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .tg-btn-uae, .tg-btn-req {
        justify-content: center;
        width: 100%;
    }

    .d-desktop {
        display: block;
    }

    .d-mobile {
        display: none;
    }

    .tg-hero__img-col {
        margin: 8px auto;
        width: 282px;
        height: 282px;
    }

    .tg-hero__circle {
        width: 100%;
        height: 100%;
    }

    .tg-hero__badge {
        left: 32px;
        transform: translateX(-50%);
        bottom: -30px;
        white-space: nowrap;
        padding: 12px 16px;
    }

    /* ── tg-trips ── */
    .tg-trips {
        padding: 40px 20px;
    }

    .tg-trips__grid {
        grid-template-columns: 1fr;
    }

    .tg-modal-overlay {
        padding: 16px;
    }

    .tg-modal__details {
        grid-template-columns: 1fr;
    }

    /* ── Features ── */
    .tg-features {
        grid-template-columns: 1fr;
        padding: 48px 20px;
        gap: 32px;
    }

    .tg-feat-title {
        font-size: 1.5rem;
    }

    /* ── Eligibility ── */
    .tg-elig-outer {
        padding: 32px 20px;
    }

    .tg-elig {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
    }

    .tg-elig-title {
        margin-bottom: 24px;
    }

    .tg-elig-desc {
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.6rem;
        margin-bottom: 24px;
    }

    .tg-elig-items {
        margin: 16px 0;
    }

    .tg-elig-img {
        height: 200px;
    }

    /* ── Path to License ── */
    .tg-path {
        padding: 48px 20px;
    }

        .tg-path h2 {
            margin-top: 0;
            line-height: 2.4rem;
            letter-spacing: -0.32px;
        }

    .tg-path-steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px 0;
        max-width: 100%;
    }

    .tg-step:not(:last-child)::after {
        display: none;
    }

    .tg-step-name {
        font-size: .8rem;
    }

    .tg-step-desc {
        font-size: .72rem;
        max-width: 90px;
    }

    /* ── Curriculum ── */
    .tg-curr {
        padding: 48px 20px;
    }

        .tg-curr h2 {
            font-size: 1.4rem;
        }

    .tg-curr-grid {
        grid-template-columns: 1fr;
    }

    .tg-curr-card {
        min-height: 258px;
    }

    /* ── DCT ── */
    .tg-dct {
        padding: 48px 20px;
    }

        .tg-dct p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6rem;
        }

    /* ── CTA ── */
    .tg-cta-outer {
        padding: 16px 20px 40px;
    }

    .tg-cta {
        padding: 40px 24px;
        border-radius: 16px;
    }

    .tg-cta-title {
        font-size: 1.75rem;
        font-weight: 400;
        line-height: 2.1875rem;
        margin-bottom: 24px;
    }

    .tg-cta-sub {
        max-width: 100%;
        margin: 0 auto 24px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ── Small Mobile  (≤ 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .d-mobile {
        display: none;
    }

    .tg-hero__sub {
        max-width: 20rem;
        font-size: 1rem;
    }

    .tg-hero__badge {
        padding: 12px 16px;
        gap: 8px;
    }

    .tg-hero__badge-title {
        display: flex;
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 0.9375rem;
    }

    .tg-btn-uae, .tg-btn-req {
        padding: 11px 16px;
        font-size: 1.0625rem;
    }

    .tg-feat-title {
        font-size: 2rem;
        letter-spacing: -0.32px;
        margin-bottom: 12px;
    }

    .tg-feat-item span {
        width: 48px;
        height: 48px;
        justify-content: center;
        align-items: center;
        display: flex;
        border-radius: 9999px;
        background: rgba(0, 102, 110, 0.05);
        padding: 10px 13px;
    }

    .tg-feat-icon {
        width: 23.333px;
        height: 23.333px;
    }

    /* Journey steps on phones: see "JOURNEY TIMELINE — PHONES" at the end of this file. */

    .tg-curr-grid1 {
        grid-template-columns: 1fr;
    }

    .tg-curr-grid2 {
        grid-template-columns: 1fr;
    }

    .tg-curr-card__overlay h3 {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.6875rem;
        margin-bottom: 4px;
    }

    .tg-curr-card__overlay p,
    .tg-curr-card__overlay .tg-curr-card__text {
        font-size: 0.875rem;
        line-height: 1.3125rem;
    }

    .tg-curr-card--teal, .tg-curr-card--surf {
        padding: 24px;
        justify-content: unset;
        min-height: 100%;
    }

    .tg-curr-card__icon {
        width: 33.333px;
        height: 33.333px;
        margin-bottom: 7px;
    }

    .tg-curr-card--teal h3, .tg-curr-card--surf h3 {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.6875rem;
        margin-bottom: 7px;
    }

    .tg-cta {
        padding: 32px;
    }

    .tg-btn-start {
        padding: 16px 24px;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5rem;
        width: 100%;
    }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE  —  tg-about-*
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.tg-about-hero {
    position: relative;
    min-height: 690px;
    display: flex;
    align-items: center;
    padding: 56px 64px;
    overflow: hidden;
    padding-top: var(--tg-header-h);
}

.tg-about-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 150%;
/*    object-fit: cover;*/
    z-index: 0;
}

.tg-about-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.51);
    z-index: 1;
}

.tg-about-hero__content {
    position: relative;
    z-index: 2;
    color: var(--dw-header);
    width: 100%;
}

.tg-about-hero__tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
    color: var(--dw-header);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.tg-about-hero__title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1rem;
    margin-bottom: 18px;
}

.tg-about-hero__sub {
    font-size: 1rem;
    color: var(--dw-header);
    line-height: 1.5rem;
    max-width: 30rem;
    margin-top: 42px;
}

/* ── Who We Are ───────────────────────────────────────────────── */
.tg-about-who {
    background: var(--dw-bg-body);
    padding: 48px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

/*.tg-about-who__img-wrap {
    background: var(--dw-white);
    border-radius: 20px;
    padding: 20px;
    box-shadow: var(--dw-shadow);
}
*/
.tg-about-who__img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
    /* The source PNG has ~5% extra transparent shadow/glow padding at the bottom,
       so its visible card sits above the image-box center. Nudge it down so the
       card is vertically centered against the "Who We Are" text. */
    transform: translateY(4.8%);
}

.tg-about-who__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dw-teal-300);
    margin-bottom: 16px;
}

.tg-about-who__text p {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.5rem;
    margin-bottom: 14px;
}

.tg-about-who__badges {
    display: flex;
    gap: 35px;
    margin-top: 24px;
}

.tg-about-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-ink);
}

/* ── Our DNA ──────────────────────────────────────────────────── */
.tg-about-dna {
    background: var(--dw-surf);
    padding: 35px 64px;
    text-align: center;
}

    .tg-about-dna h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--dw-teal-300);
        margin-bottom: 10px;
    }

.tg-about-dna__sub {
    font-size: 1rem;
    color: var(--dw-muted);
    margin-bottom: 48px;
}

.tg-about-dna__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    text-align: left;
}

.tg-about-dna__card {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(206, 206, 206, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--dw-shadow);
}

.tg-about-dna__card-teal {
    background: rgba(0, 102, 110, 0.02);
    border: 1px solid rgba(0, 102, 110, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 28px;
    box-shadow: var(--dw-shadow);
}

.tg-about-dna__icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 102, 110, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--dw-teal);
}

.tg-about-dna__card h3, .tg-about-dna__card-teal h3 {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-teal-300);
    margin-bottom: 8px;
}

.tg-about-dna__card p, .tg-about-dna__card-teal p {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.5rem;
}

/* ── Path to Mastery ──────────────────────────────────────────── */
.tg-about-path {
    padding: 64px;
    border-top: 1px solid var(--dw-bdr);
}

    .tg-about-path h2 {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--dw-teal-300);
        margin-bottom: 40px;
    }

.tg-about-path__steps {
    display: flex;
    gap: 0;
}

.tg-about-path__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.tg-about-path__num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--dw-teal);
    color: var(--dw-white);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.tg-about-path__name {
    font-weight: 400;
    font-size: 1rem;
    color: var(--dw-ink);
    margin: 20px 0 0px;
}

.tg-about-path__desc {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.5rem;
    max-width: 14.0625rem;
}

/* ── Stats Banner ─────────────────────────────────────────────── */
.tg-about-stats {
    background-image: url('/images/tourguide/Stats-Banner.svg');
    background-size: cover;
    background-position: center 40%;
    padding: 56px 64px;
}

.tg-about-stats__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 32px;
    margin: 0 auto;
    text-align: center;
}

.tg-about-stats__num {
    display: block;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--dw-white);
    line-height: 2.5rem;
    margin-bottom: 8px;
}

.tg-about-stats__label {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-white);
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

/* ── CTA ──────────────────────────────────────────────────────── */
.tg-about-cta {
    padding: 64px;
    text-align: center;
}

.tg-about-cta__tag {
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-teal-300);
    margin-bottom: 12px;
}

.tg-about-cta__sub {
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.5rem;
    margin: 0 auto;
}

.tg-about-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 45px;
}

.tg-about-cta__btn-primary {
    background: linear-gradient(135deg, var(--dw-stats-from) 0%, var(--dw-stats-to) 100%);
    color: var(--dw-white);
    border-radius: 32px;
    padding: 16.5px 32px 17.5px;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
}

.tg-about-cta__btn-outline {
    color: var(--dw-teal);
    border: 1px solid var(--dw-teal);
    border-radius: 32px;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
}

/* ── About Responsive  (≤ 768px) ─────────────────────────────── */
@media (max-width: 768px) {
    .tg-about-hero {
        padding: 150px 20px 25px;
        min-height: 300px;
    }

    /* Crop (don't stretch) the background to the shorter mobile hero */
    .tg-about-hero__bg {
        height: 100%;
        object-fit: cover;
    }

    .tg-about-hero__title {
        font-size: 1.9rem;
        line-height: 2.1875rem;
    }

    .tg-about-hero__sub {
        margin-top: 16px;
        max-width: 100%;
    }

    .tg-about-who {
        grid-template-columns: minmax(0, 1fr);
        padding: 48px 20px;
        gap: 32px;
    }

    .tg-about-who__img-wrap img {
        max-width: 100% !important;
        height: auto;
    }

    .tg-about-who__badges {
        flex-wrap: wrap;
        gap: 16px 24px;
    }

    /* Stacked layout: no side-by-side text to center against, so drop the nudge. */
    .tg-about-who__img-wrap img {
        transform: none;
    }

    .tg-about-dna {
        padding: 48px 20px;
    }

    .tg-about-dna__grid {
        grid-template-columns: 1fr;
    }

    .tg-about-path {
        padding: 48px 20px;
    }

    .tg-about-path__steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 0;
    }

    .tg-about-path__step {
        min-width: 50%;
    }

        .tg-about-path__step:not(:last-child)::after {
            display: none;
        }

    .tg-about-stats {
        padding: 40px 20px;
    }

    .tg-about-stats__grid {
        grid-template-columns: repeat(2,1fr);
        gap: 24px;
    }

    .tg-about-stats__num {
        font-size: 2rem;
    }

    .tg-about-cta {
        padding: 48px 20px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   FAQ PAGE  —  tg-faq-*
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────── */
.tg-faq-hero {
    padding: 25px 64px 48px;
    text-align: center;
}

    .tg-faq-hero h1 {
        font-size: 4rem;
        font-weight: 700;
        color: var(--dw-teal-300);
        margin-bottom: 28px;
        line-height: 4.4rem;
        letter-spacing: -1.28px;
    }

/* Search */
.tg-faq-search {
    position: relative;
    max-width: 480px;
    margin: 0 auto 36px;
}

    .tg-faq-search input {
        width: 100%;
        padding: 14px 20px 14px 48px;
        border: 1.5px solid var(--dw-bdr);
        border-radius: 32px;
        background: var(--dw-white);
        font-size: .9rem;
        color: var(--dw-ink);
        outline: none;
        transition: border-color .2s;
    }

        .tg-faq-search input::placeholder {
            color: var(--dw-placeholder);
        }

        .tg-faq-search input:focus {
            border-color: var(--dw-teal);
        }

.tg-faq-search__icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dw-body);
    pointer-events: none;
    width: 18px;
    height: 18px;
}

/* Filter tabs */
.tg-faq-tabs {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.tg-faq-tab {
    background: var(--dw-white);
    border: 1.5px solid #F2F2F2;
    border-radius: 24px;
    padding: 12px 32px;
    font-size: 1rem;
    font-weight: 400;
    color: var(--dw-muted);
    cursor: pointer;
    transition: all .2s;
}

    .tg-faq-tab:hover {
        border-color: var(--dw-teal);
        color: var(--dw-teal);
    }

    .tg-faq-tab.active {
        background: var(--dw-teal);
        border-color: var(--dw-teal);
        color: var(--dw-white);
    }

/* ── Accordion ────────────────────────────────────────────────── */
.tg-faq-body {
    padding: 10px 64px 64px;
}

.tg-faq-list {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tg-faq-item {
    overflow: hidden;
    transition: border-color .2s;
    border-radius: 12px;
    border: 1px solid #EFEFEF;
    background: rgba(255, 255, 255, 0.40);
    backdrop-filter: blur(10px);
}

    .tg-faq-item.open {
/*        border-color: rgba(0,102,110,.25);*/
    }

.tg-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}

    .tg-faq-q span {
        font-size: 1.5rem;
        font-weight: 400;
        line-height: 1.95rem;
        color: var(--dw-teal-300);
    }

.tg-faq-chevron {
    width: 20px;
    height: 20px;
    color: var(--dw-teal);
    flex-shrink: 0;
    transition: transform .25s ease;
}

.tg-faq-item.open .tg-faq-chevron {
    transform: rotate(180deg);
}

.tg-faq-a {
    display: none;
    padding: 0 24px 24px;
    font-size: 1rem;
    color: var(--dw-muted);
    line-height: 1.7;
}

.tg-faq-item.open .tg-faq-a {
    display: block;
}

/* No results */
.tg-faq-empty {
    text-align: center;
    padding: 48px;
    color: var(--dw-body);
    font-size: .95rem;
    display: none;
}

    .tg-faq-empty.visible {
        display: block;
    }

/* ── Support CTA ──────────────────────────────────────────────── */
.tg-faq-support {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin: 0 64px 64px;
    border-radius: 16px;
    padding: 36px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

    .tg-faq-support h3 {
        font-size: 2rem;
        font-weight: 600;
        color: var(--dw-teal-300);
        margin-bottom: 6px;
    }

    .tg-faq-support p {
        font-size: 1rem;
        color: var(--dw-muted);
    }

.tg-faq-support__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.tg-faq-btn-contact {
    background: var(--dw-teal);
    color: var(--dw-white);
    border-radius: 32px;
    padding: 17px 32px;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

    .tg-faq-btn-contact svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

.tg-faq-btn-chat {
    color: var(--dw-teal);
    border: 1px solid var(--dw-teal);
    border-radius: 32px;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

/* ── FAQ Responsive (≤ 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
    .tg-faq-hero {
        padding: 48px 20px 36px;
    }

        .tg-faq-hero h1 {
            font-size: 1.9rem;
        }

    .tg-faq-body {
        padding: 36px 20px 48px;
    }

    .tg-faq-support {
        flex-direction: column;
        align-items: flex-start;
        margin: 0 20px 48px;
        padding: 28px 24px;
    }

    .tg-faq-support__actions {
        flex-direction: column;
        width: 100%;
    }

    .tg-faq-btn-contact, .tg-faq-btn-chat {
        text-align: center;
        justify-content: center;
    }
}


/* =========================================================
   LANGUAGE DROPDOWN
   ========================================================= */

.tg-language-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Important: don't affect header row sizing */
    flex: 0 0 auto;
}


    /* Button has exactly the same visual language as .tg-lang-btn */
    .tg-language-dropdown .tg-language-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 8px 12px;
        border: none;
        border-radius: 26px;
        background: var(--dw-bg-gray);
        color: var(--dw-gray-900);
        font-family: inherit;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.25rem;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background .35s ease, color .35s ease;
    }


        /* Same hover as .tg-lang-btn */
        .tg-language-dropdown .tg-language-toggle:hover {
            background: rgba(0, 0, 0, .09);
        }


        /* Remove browser / Bootstrap button effects */
        .tg-language-dropdown .tg-language-toggle:focus,
        .tg-language-dropdown .tg-language-toggle:focus-visible,
        .tg-language-dropdown .tg-language-toggle:active {
            outline: none;
            border: none;
            box-shadow: none;
        }


/* Arrow */
.tg-language-toggle svg {
    flex-shrink: 0;
    transition: transform .2s ease;
}

.tg-language-dropdown.is-open .tg-language-toggle svg {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.tg-language-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 7px;
    border: none;
    border-radius: 16px;
    background: var(--dw-bg-gray);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    list-style: none;
    display: none;
    z-index: 1050;
}

.tg-language-dropdown.is-open .tg-language-menu {
    display: block;
}


/* Items */
.tg-language-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-language-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    margin: 2px 0;
    padding: 9px 12px;
    box-sizing: border-box;
    border-radius: 10px;
    background: transparent;
    color: var(--dw-gray-900);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}


    /* Same hover feeling */
    .tg-language-menu .dropdown-item:hover {
        background: rgba(0, 0, 0, .09);
        color: var(--dw-gray-900);
    }


    /* Active language */
    .tg-language-menu .dropdown-item.active {
        background: rgba(0, 0, 0, .06);
        color: var(--dw-gray-900);
        font-weight: 600;
    }


/* Check */
.tg-language-check {
    flex-shrink: 0;
    color: var(--dw-gray-900);
}


/* RTL */
html[dir="rtl"] .tg-language-menu {
    right: auto;
    left: 0;
    text-align: right;
}

/* ─────────────────────────────────────────────────────────────
   HEADER LAYOUT — logo left, nav links centred, actions right.

   `.tg-navbar` on its own only spaces the three columns apart, so
   Home/About/FAQ/Courses ended up hard against the logo instead of
   centred. Giving the two OUTER columns an equal flex basis puts the
   middle column on the header's true horizontal centre, however much
   wider the action buttons are than the logo.

   The child combinator matters: `.tg-header__logo` is on both the
   wrapper div and the <img> inside it, and `flex` on the image would
   stretch it.
   ───────────────────────────────────────────────────────────── */
.tg-navbar {
    gap: 16px;
}

.tg-navbar > .tg-header__logo {
    flex: 1 1 0;
    min-width: 0;
}

.tg-navbar > .tg-navbar__left {
    flex: 0 1 auto;
    justify-content: center;
}

/* Must be `1 1 0`, the same basis the logo column gets — that equal pair is what
   puts the middle column on the header's true centre. It read `flex: 1 1 1 auto`,
   a four-value shorthand the browser rejects outright, so the declaration was
   dropped: the actions column never grew, the logo column absorbed all the free
   space, and the links sat right of centre. `min-width: max-content` went with it
   — it would have let a long action row push the centre column off-centre. */
.tg-navbar > .tg-nav-actions {
    flex: 1 1 0;
    justify-content: flex-end;
    min-width: 0;
}


/* Below the nav-links breakpoint the middle column holds only the
   hamburger, so centring it would park that button mid-header. */
@media (max-width: 768px) {
    .tg-navbar > .tg-navbar__left {
        flex: 0 0 auto;
        justify-content: flex-start;
    }
}





/* ─────────────────────────────────────────────────────────────
   HEADER RESPONSIVENESS — keeping the links on the centre.

   True centring only works while the logo column can mirror the action
   column, i.e. while 2 × (action row) + (links) fits the bar. The action
   row is `justify-content: flex-end`, so once its column is squeezed
   below its content the overflow runs LEFT, straight across the links —
   that is what put "About Us" underneath the search pill between 769px
   and ~1100px. Three measures keep it honest: the column never shrinks
   below its content, the labels come off in two steps, and the whole bar
   collapses to the hamburger at 1100px instead of 768px. The drawer
   already carries the links, login/profile, language and accessibility,
   so collapsing earlier loses nothing.
   ───────────────────────────────────────────────────────────── */
.tg-navbar {
    /* Grid item of `.tg-header`: without this the track grows to the bar's
       min-content width and the header spills past the viewport. */
    min-width: 0;
}

.tg-navbar > .tg-nav-actions {
    min-width: max-content;
}

/* Show the trainee's full name. The old 12.5rem cap clipped ordinary UAE Pass names mid-letter
   (text-overflow never applies to a flex container's bare text, so there was no ellipsis either),
   taking the caret with it. Only a truly extreme name is shortened now, on its own span, with the
   full name in the tooltip. Below 1340px the name is hidden altogether (see below). */
.tg-navbar .tg-profile-toggle {
    white-space: nowrap;
}

.tg-navbar .tg-profile-name {
    min-width: 0;
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1470px) {
    .tg-nav-links {
        gap: 18px;
    }

    .tg-navbar > .tg-nav-actions {
        gap: 6px;
    }

    .tg-search__btn span {
        display: none;
    }
}

@media (max-width: 1340px) {
    /* The name is a bare text node between the two icons, so `font-size: 0`
       is what hides it; the SVGs carry explicit width/height attributes and
       are unaffected. Specificity has to beat portal-profile-menu.css, which
       loads after this file. */
    .tg-navbar .tg-profile-toggle {
        font-size: 0;
        gap: 4px;
    }
}

@media (max-width: 1100px) {
    .tg-nav-links {
        display: none;
    }

    .tg-nav-toggle {
        display: flex;
    }

    .tg-navbar > .tg-header__logo {
        flex: 1 1 auto;
    }

    /* The middle column now holds only the hamburger, so centring it would
       park that button mid-header. */
    .tg-navbar > .tg-navbar__left {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    /* Search / language / accessibility / profile all repeat inside the
       drawer, so the action row keeps the notification bell alone — the bell
       is NOT in the drawer, its markup carries fixed element ids and cannot
       be rendered twice on a page. */
    .tg-navbar > .tg-nav-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
    }

        .tg-navbar > .tg-nav-actions > *:not(.tg-notif) {
            display: none;
        }
}

/* ─────────────────────────────────────────────────────────────
   JOURNEY TIMELINE — PHONES / SMALL TABLETS
   The "Your Journey to Certification" steps are admin-managed, so their number and text length vary.
   Below 768px they stack as a vertical timeline where every step has the same geometry: the number
   circle, then the title and description start-aligned beside it, and one connector line running
   from each circle to the next regardless of how long the text is. Steps stretch to the full row
   (they used to shrink to their own text with the description centred inside, so no two lined up).
   Kept last so it wins over the earlier 768px wrap rules (flex-wrap, 90px description cap).
   ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .tg-path-steps {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        max-width: 560px;
        margin: 0 auto;
    }

    .tg-step {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
        position: relative;
        padding-bottom: 28px;
        text-align: start;
    }

        .tg-step:last-child {
            padding-bottom: 0;
        }

        /* Connector: from the bottom of this circle to the top of the next one. */
        .tg-step:not(:last-child)::after {
            content: '';
            display: block;
            position: absolute;
            inset-inline-start: calc(1.5rem - 0.5px);
            top: 3rem;
            bottom: 0;
            width: 0;
            border-inline-start: 1px solid var(--dw-stats-to);
        }

    .tg-step-num {
        flex-shrink: 0;
    }

    .tg-step-data {
        flex: 1;
        min-width: 0;
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        /* Title sits level with the middle of the 3rem circle. */
        padding-top: 0.8rem;
    }

    .tg-step-name {
        margin: 0;
        font-size: 0.875rem;
        line-height: 1.225rem;
        letter-spacing: 0.14px;
    }

    .tg-step-desc {
        margin: 0;
        max-width: none;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.3125rem;
        overflow-wrap: anywhere;
    }
}

/* Drawer language picker: a native select, so it stays one control however many languages are configured. */
.tg-lang-select {
    -webkit-appearance: none;
    appearance: none;
    min-width: 10rem;
    max-width: 100%;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

    html[dir="rtl"] .tg-lang-select {
        background-position: left 12px center;
    }