/* ------------------------------------------------------------------
   The Gate for Training Services - global styles (on top of MudBlazor)
   ------------------------------------------------------------------ */
:root {
    --tg-orange: #EE7A1C;
    --tg-orange-dark: #C96210;
    --tg-navy: #1E2A3A;
    --tg-navy-2: #26354A;
    --tg-sand: #F3F1EC;
    --tg-cream: #FAF9F7;
    --tg-shadow: 0 10px 30px rgba(30, 42, 58, .08);
    --tg-shadow-lg: 0 18px 50px rgba(30, 42, 58, .14);
}

html, body { font-family: 'Cairo', 'Inter', 'Segoe UI', sans-serif; scroll-behavior: smooth; }
html[dir="ltr"] body { font-family: 'Inter', 'Cairo', 'Segoe UI', sans-serif; }
img { max-width: 100%; }
a { color: var(--tg-orange); text-decoration: none; }
a:hover { color: var(--tg-orange-dark); }

/* MudMainContent assumes a fixed appbar; our header is sticky instead. */
.mud-main-content.tg-main { padding-top: 0; min-height: 100vh; display: flex; flex-direction: column; }
.tg-main > .tg-page { flex: 1 0 auto; }
.tg-main > footer { margin-top: 80px; }

/* ---------- Top bar ---------- */
.tg-topbar { background: var(--tg-navy); color: #E8ECF2; font-size: .85rem; }
.tg-topbar a { color: #E8ECF2; }
.tg-topbar-item { display: inline-flex; align-items: center; gap: 6px; }
.tg-topbar-icon.mud-icon-button { color: #E8ECF2; }
.tg-topbar-icon.mud-icon-button:hover { color: var(--tg-orange); }
.tg-lang-btn.mud-button { color: #fff; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 14px; min-width: 0; }
.tg-lang-btn.mud-button:hover { background: var(--tg-orange); }

/* ---------- Header ---------- */
.tg-header { position: sticky; top: 0; z-index: 1200; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid #E6E2DA; }
.tg-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--tg-navy); }
.tg-brand img { height: 62px; width: auto; }
.tg-brand-text { flex-direction: column; line-height: 1.2; }
.tg-brand-ar { font-weight: 800; font-size: 1.05rem; color: var(--tg-navy); }
.tg-brand-en { font-size: .72rem; color: #6B7684; letter-spacing: .02em; }
.tg-nav-link.mud-button { color: var(--tg-navy); font-weight: 600; border-radius: 999px; padding: 6px 14px; }
.tg-nav-link.mud-button:hover { background: var(--tg-sand); color: var(--tg-orange-dark); }
.tg-nav-active.mud-button { color: var(--tg-orange); background: #FFF1E6; }
.tg-login-btn.mud-button { border-radius: 999px; padding: 8px 22px; }

/* ---------- Sections ---------- */
.tg-section { padding: 72px 0; }
.tg-section-sand { background: var(--tg-sand); }
.tg-section-navy { background: linear-gradient(135deg, var(--tg-navy) 0%, var(--tg-navy-2) 100%); color: #fff; }
.tg-section-navy .mud-typography { color: inherit; }
.tg-section-title { margin-bottom: 40px; }
.tg-section-title .tg-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--tg-orange); font-weight: 700; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; }
.tg-section-title .tg-eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--tg-orange); border-radius: 3px; }
.tg-section-title.text-center .tg-eyebrow::after { content: ""; width: 28px; height: 3px; background: var(--tg-orange); border-radius: 3px; }
.tg-section-title.text-center .tg-eyebrow::before { display: inline-block; }
.tg-muted { color: #6B7684; }

/* ---------- Hero ---------- */
.tg-hero { position: relative; overflow: hidden; background: var(--tg-navy); }
.tg-hero .mud-carousel { height: 560px; }
.tg-hero-slide { position: relative; width: 100%; height: 100%; background-size: cover; background-position: center; }
.tg-hero-slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,28,40,.88) 0%, rgba(20,28,40,.55) 55%, rgba(20,28,40,.25) 100%); }
html[dir="rtl"] .tg-hero-slide::before { background: linear-gradient(270deg, rgba(20,28,40,.88) 0%, rgba(20,28,40,.55) 55%, rgba(20,28,40,.25) 100%); }
.tg-hero-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; color: #fff; max-width: 640px; }
.tg-hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(238,122,28,.18); border: 1px solid rgba(238,122,28,.6); color: #FFD3AC; padding: 6px 14px; border-radius: 999px; font-size: .85rem; font-weight: 600; width: fit-content; margin-bottom: 18px; }
.tg-hero-title { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 800; line-height: 1.25; margin-bottom: 14px; }
.tg-hero-text { font-size: 1.1rem; color: #D6DCE5; margin-bottom: 28px; }
.tg-hero .mud-carousel-bullets { bottom: 22px; }
.tg-hero .mud-carousel-bullets .mud-icon-button { color: rgba(255,255,255,.75); }
@media (max-width: 600px) { .tg-hero .mud-carousel { height: 480px; } .tg-hero-text { font-size: 1rem; } }

/* ---------- Category strip ---------- */
.tg-cat-strip { margin-top: -56px; position: relative; z-index: 2; }
.tg-cat-card { height: 100%; border-radius: 18px; transition: transform .2s ease, box-shadow .2s ease; box-shadow: var(--tg-shadow); border: 1px solid #EEEAE2; text-align: center; padding: 26px 18px; display: block; color: inherit; background: #fff; }
.tg-cat-card:hover { transform: translateY(-6px); box-shadow: var(--tg-shadow-lg); color: inherit; }
.tg-cat-icon { width: 64px; height: 64px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tg-cat-icon .mud-icon-root { font-size: 2rem; width: 2rem; height: 2rem; }
.tg-cat-name { font-weight: 800; font-size: 1.05rem; color: var(--tg-navy); }
.tg-cat-count { color: #6B7684; font-size: .85rem; }

/* ---------- Course cards ---------- */
.tg-course-card { height: 100%; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; border: 1px solid #EEEAE2; box-shadow: var(--tg-shadow); transition: transform .2s ease, box-shadow .2s ease; background: #fff; }
.tg-course-card:hover { transform: translateY(-6px); box-shadow: var(--tg-shadow-lg); }
.tg-course-media { position: relative; height: 190px; background-size: cover; background-position: center; }
.tg-course-media .tg-price-tag { position: absolute; bottom: 12px; inset-inline-start: 12px; background: var(--tg-orange); color: #fff; font-weight: 800; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(238,122,28,.4); }
.tg-course-media .tg-cat-chip { position: absolute; top: 12px; inset-inline-start: 12px; }
.tg-course-body { padding: 18px 20px 8px; flex: 1; }
.tg-course-title { font-weight: 800; font-size: 1.05rem; color: var(--tg-navy); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }
.tg-course-title a { color: inherit; }
.tg-course-title a:hover { color: var(--tg-orange); }
.tg-course-meta { display: flex; flex-wrap: wrap; gap: 14px; color: #6B7684; font-size: .85rem; margin-top: 10px; }
.tg-course-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tg-course-actions { padding: 8px 20px 18px; display: flex; align-items: center; justify-content: space-between; }

/* ---------- Featured / about ---------- */
.tg-feature-img { border-radius: 22px; overflow: hidden; box-shadow: var(--tg-shadow-lg); position: relative; }
.tg-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.tg-feature-float { position: absolute; bottom: 18px; inset-inline-end: 18px; background: #fff; border-radius: 14px; padding: 12px 18px; box-shadow: var(--tg-shadow-lg); display: flex; align-items: center; gap: 12px; }
.tg-stat { text-align: center; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid #EEEAE2; }
.tg-stat-value { font-size: 2rem; font-weight: 800; color: var(--tg-orange); line-height: 1.1; }
.tg-stat-label { color: #6B7684; font-size: .9rem; }
.tg-check-list { list-style: none; padding: 0; margin: 0; }
.tg-check-list li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.tg-check-list .mud-icon-root { color: var(--tg-orange); flex-shrink: 0; margin-top: 3px; }

/* ---------- Testimonials ---------- */
.tg-testimonial { background: #fff; border-radius: 20px; padding: 32px; box-shadow: var(--tg-shadow); border: 1px solid #EEEAE2; height: 100%; display: flex; flex-direction: column; }
.tg-testimonial .tg-quote { color: var(--tg-orange); opacity: .35; font-size: 3rem; line-height: 1; }
.tg-testimonial p { flex: 1; color: #3C4858; }
.tg-avatar { background: linear-gradient(135deg, var(--tg-orange), #FFB873); color: #fff; font-weight: 800; }

/* ---------- Video / CTA ---------- */
.tg-video { position: relative; border-radius: 22px; overflow: hidden; box-shadow: var(--tg-shadow-lg); aspect-ratio: 16 / 9; background: #000; }
.tg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tg-cta { border-radius: 24px; background: linear-gradient(120deg, var(--tg-orange) 0%, #F59A4B 100%); color: #fff; padding: 48px; box-shadow: 0 20px 50px rgba(238,122,28,.35); position: relative; overflow: hidden; }
.tg-cta::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(255,255,255,.12); top: -120px; inset-inline-end: -80px; }
.tg-cta .mud-typography { color: #fff; }

/* ---------- Partners ---------- */
.tg-partner { background: #fff; border-radius: 16px; padding: 22px; border: 1px solid #EEEAE2; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; height: 100%; }
.tg-partner img { height: 72px; width: auto; object-fit: contain; }

/* ---------- Page banner ---------- */
.tg-banner { background: linear-gradient(135deg, var(--tg-navy) 0%, #2E405A 100%); color: #fff; padding: 64px 0 48px; position: relative; overflow: hidden; }
.tg-banner::before { content: ""; position: absolute; inset: 0; background: url('https://tgoman.com/wp-content/uploads/2018/07/1-1-1024-641x500.jpg') center/cover; opacity: .12; }
.tg-banner .mud-container { position: relative; }
.tg-banner h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); font-weight: 800; margin: 0 0 10px; }
.tg-banner .mud-breadcrumbs { padding: 0; }
.tg-banner .mud-breadcrumbs a, .tg-banner .mud-breadcrumb-separator { color: #B8C2D0; }
.tg-banner .mud-breadcrumb-item:last-child, .tg-banner .mud-breadcrumb-item.mud-disabled { color: #fff !important; }

/* ---------- Course detail ---------- */
.tg-detail-hero { border-radius: 22px; overflow: hidden; box-shadow: var(--tg-shadow-lg); max-height: 420px; }
.tg-detail-hero img { width: 100%; height: 420px; object-fit: cover; display: block; }
.tg-sticky { position: sticky; top: 96px; }
.tg-info-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px dashed #E6E2DA; }
.tg-info-row:last-child { border-bottom: 0; }
.tg-info-row .tg-k { display: inline-flex; align-items: center; gap: 8px; color: #6B7684; }
.tg-info-row .tg-v { font-weight: 700; color: var(--tg-navy); }
.tg-price-big { font-size: 2.2rem; font-weight: 800; color: var(--tg-orange); line-height: 1; }

/* ---------- Gallery ---------- */
.tg-gallery-item { border-radius: 16px; overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 4 / 3; background: var(--tg-sand); }
.tg-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; }
.tg-gallery-item:hover img { transform: scale(1.06); }
.tg-gallery-item .tg-caption { position: absolute; inset-inline: 0; bottom: 0; padding: 14px; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.7), transparent); font-weight: 600; }

/* ---------- Calendar ---------- */
.tg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.tg-cal-head { text-align: center; font-weight: 700; color: #6B7684; font-size: .8rem; padding: 6px 0; }
.tg-cal-day { aspect-ratio: 1; border-radius: 12px; border: 1px solid #EEEAE2; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; position: relative; background: #fff; font-size: .9rem; }
.tg-cal-day.tg-empty { border: 0; background: transparent; }
.tg-cal-day.tg-today { border-color: var(--tg-orange); color: var(--tg-orange); }
.tg-cal-day.tg-has { background: #FFF1E6; border-color: #FFD3AC; cursor: pointer; }
.tg-cal-day.tg-has::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-orange); margin-top: 3px; }
.tg-cal-day.tg-selected { background: var(--tg-orange); color: #fff; border-color: var(--tg-orange); }
.tg-cal-day.tg-selected::after { background: #fff; }

/* ---------- Contact ---------- */
.tg-contact-card { border-radius: 18px; padding: 26px; background: #fff; border: 1px solid #EEEAE2; box-shadow: var(--tg-shadow); height: 100%; display: flex; gap: 16px; }
.tg-contact-card .tg-cat-icon { flex-shrink: 0; margin: 0; width: 54px; height: 54px; }
.tg-map { border-radius: 22px; overflow: hidden; box-shadow: var(--tg-shadow); }
.tg-map iframe { width: 100%; height: 380px; border: 0; display: block; }

/* ---------- WhatsApp FAB ---------- */
.tg-whatsapp { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 1300; display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 10px 18px 10px 14px; border-radius: 999px; font-weight: 700; box-shadow: 0 10px 30px rgba(37,211,102,.45); transition: transform .2s ease; }
.tg-whatsapp:hover { transform: translateY(-3px); color: #fff; }
.tg-whatsapp .mud-icon-root { font-size: 1.7rem; width: 1.7rem; height: 1.7rem; }
.mud-scroll-to-top { inset-inline-start: 24px; right: auto; bottom: 24px; }
html[dir="ltr"] .mud-scroll-to-top { left: 24px; }

/* ---------- Auth card ---------- */
.tg-auth { min-height: calc(100vh - 220px); display: flex; align-items: center; background: radial-gradient(1200px 500px at 50% -10%, #FFE5CF 0%, var(--tg-cream) 60%); }
.tg-auth-card { border-radius: 24px; box-shadow: var(--tg-shadow-lg); padding: 40px; background: #fff; width: 100%; max-width: 460px; margin: 0 auto; }

/* ---------- Blazor error UI ---------- */
#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }


/* ---------- Phone numbers & emails always read left-to-right ---------- */
.tg-ltr, span[dir="ltr"], a[dir="ltr"] { direction: ltr !important; unicode-bidi: isolate; display: inline-block; text-align: left; }
.mud-input-slot[type="tel"], .mud-input-slot[type="email"], input[type="tel"], input[type="email"] { direction: ltr !important; text-align: left !important; unicode-bidi: isolate; }

/* ---------- Phone & email blocks never depend on page direction ---------- */
/* top bar: contact group pinned LEFT, social + language pinned RIGHT, in both languages */
.tg-topbar .mud-container { direction: ltr; }
.tg-topbar .mud-container > div:first-child { order: 0; }
.tg-topbar .mud-container > div:last-child { order: 1; margin-inline-start: auto; }
.tg-topbar-item { direction: ltr; unicode-bidi: isolate; }
/* a phone / email row: icon on the left, value to its right, left-aligned */
/* the row itself follows the page layout; only the value is LTR */
.tg-ltr-row a[dir="ltr"], .tg-ltr-row span[dir="ltr"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* email / phone fields: always LTR (icon left, text starts at the left) */
.mud-rtl-provider:not(.mud-application-layout-rtl) { direction: ltr; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-slot, .mud-rtl-provider:not(.mud-application-layout-rtl) input { direction: ltr !important; text-align: left !important; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-label { transform-origin: left top !important; text-align: left; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-label-inputcontrol { left: 0 !important; right: unset !important; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-control-helper-container, .mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-helper-text { text-align: left; direction: ltr; }

/* video poster (YouTube embed replaced because the video is private) */
.tg-video-poster { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; }
.tg-video-poster::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,28,40,.15), rgba(20,28,40,.65)); }
.tg-video-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: #EE7A1C; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(238,122,28,.25), 0 20px 40px rgba(0,0,0,.35); transition: transform .3s var(--tg-ease); }
.tg-video-play .mud-icon-root { font-size: 2.6rem; width: 2.6rem; height: 2.6rem; }
.tg-video-poster:hover .tg-video-play { transform: scale(1.1); }
.tg-video-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; color: #fff; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.5); }

/* LTR fields inside the RTL layout: undo MudBlazor's mirrored label transforms */
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-label-outlined { transform: translate(14px, 20px) scale(1) !important; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol,
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol { transform: translate(0, 1.5px) scale(.75) !important; transform-origin: left top !important; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined { transform: translate(14px, -6px) scale(.75) !important; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-outlined-border, .mud-rtl-provider:not(.mud-application-layout-rtl) legend { direction: ltr; text-align: left; }
.mud-rtl-provider:not(.mud-application-layout-rtl) .mud-input-adornment-start { margin-left: 0; margin-right: 8px; }

/* no focus ring / border on headings (Blazor focuses h1 after navigation) */
h1, h1:focus, h1:focus-visible, h2:focus, h2:focus-visible { outline: none !important; border: 0 !important; box-shadow: none !important; }

/* partner cards in the marquee: identical height */
.tg-marquee-track { align-items: stretch; }
.tg-marquee .tg-partner { height: auto; min-height: 200px; justify-content: flex-start; }
.tg-marquee .tg-partner .mud-typography-caption { min-height: 3em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* video poster that stretches to the register card height on desktop */
@media (min-width: 960px) { .tg-video-fill { aspect-ratio: auto; height: 100%; min-height: 420px; } }
.mud-grid.align-stretch { align-items: stretch; }

/* ---------- Gallery lightbox (dialog) ---------- */
.tg-lightbox-backdrop { background: rgba(8, 12, 18, .88) !important; backdrop-filter: blur(6px); }
.mud-dialog.tg-lightbox { background: transparent !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
.tg-lightbox-body { text-align: center; outline: none; }
.tg-lightbox-body img { max-height: 76vh; max-width: 100%; width: auto; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.6); display: inline-block; animation: tgPageIn .35s var(--tg-ease) both; }
.tg-lightbox-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.tg-lightbox-caption { color: #fff !important; font-weight: 700; display: inline-flex; align-items: center; gap: 12px; }
.tg-lightbox-count { font-size: .8rem; font-weight: 600; color: #C9D1DC; background: rgba(255,255,255,.12); border-radius: 999px; padding: 2px 10px; }
.tg-lightbox-controls { display: flex; gap: 8px; }
.tg-lightbox-controls .mud-icon-button { color: #fff; background: rgba(255,255,255,.14); transition: background .25s ease, transform .25s var(--tg-ease); }
.tg-lightbox-controls .mud-icon-button:hover { background: #EE7A1C; transform: translateY(-2px); }
@media (max-width: 600px) { .tg-lightbox-body img { max-height: 60vh; } .tg-lightbox-bar { justify-content: center; } }

/* ---------- Header dropdown (courses) ---------- */
.tg-dd { position: relative; }
.tg-dd-btn .mud-button-icon-end { transition: transform .3s var(--tg-ease); }
.tg-dd:hover .tg-dd-btn .mud-button-icon-end, .tg-dd:focus-within .tg-dd-btn .mud-button-icon-end, .tg-dd:has(.tg-dd-open) .tg-dd-btn .mud-button-icon-end { transform: rotate(180deg); }
.tg-dd-panel { position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 340px; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); border: 1px solid #EEEAE2; border-radius: 18px; padding: 8px; box-shadow: 0 24px 60px rgba(30,42,58,.18); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transition: opacity .25s var(--tg-ease), transform .25s var(--tg-ease), visibility .25s; z-index: 1300; }
.tg-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.tg-dd:hover .tg-dd-panel, .tg-dd:focus-within .tg-dd-panel, .tg-dd-panel.tg-dd-open { opacity: 1; visibility: visible; transform: none; }
.tg-dd-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--tg-navy); transition: background .2s ease, transform .25s var(--tg-ease); }
.tg-dd-item:hover { background: #FFF1E6; color: var(--tg-navy); transform: translateX(-4px); }
html[dir="ltr"] .tg-dd-item:hover { transform: translateX(4px); }
.tg-dd-all { border-bottom: 1px dashed #EEEAE2; border-radius: 12px 12px 0 0; margin-bottom: 4px; }
.tg-dd-icon { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tg-dd-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
.tg-dd-text strong { font-weight: 700; font-size: .95rem; }
.tg-dd-text small { color: #6B7684; font-size: .75rem; }
.tg-dd-count { font-size: .75rem; font-weight: 700; color: #fff; background: var(--tg-orange); border-radius: 999px; padding: 2px 9px; }

/* ---------- Category cards v2 ---------- */
.tg-cat-card { text-align: start; padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 6px; }
.tg-cat-card::after { background: linear-gradient(90deg, var(--c, #EE7A1C), color-mix(in srgb, var(--c, #EE7A1C) 40%, #fff)); }
.tg-cat-orb { position: absolute; width: 160px; height: 160px; border-radius: 50%; top: -70px; inset-inline-end: -50px; background: radial-gradient(circle, color-mix(in srgb, var(--c, #EE7A1C) 22%, transparent), transparent 70%); pointer-events: none; transition: transform .5s var(--tg-ease); }
.tg-cat-card:hover .tg-cat-orb { transform: scale(1.6); }
.tg-cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.tg-cat-card .tg-cat-icon { width: 60px; height: 60px; border-radius: 18px; margin: 0; background: linear-gradient(135deg, var(--c, #EE7A1C), color-mix(in srgb, var(--c, #EE7A1C) 55%, #fff)) !important; color: #fff !important; box-shadow: 0 12px 26px color-mix(in srgb, var(--c, #EE7A1C) 38%, transparent); }
.tg-cat-pill { font-size: .72rem; font-weight: 700; color: var(--c, #EE7A1C); background: color-mix(in srgb, var(--c, #EE7A1C) 12%, #fff); border: 1px solid color-mix(in srgb, var(--c, #EE7A1C) 25%, #fff); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.tg-cat-card .tg-cat-name { font-size: 1.12rem; }
.tg-cat-tagline { color: #6B7684; font-size: .82rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tg-cat-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; font-size: .85rem; font-weight: 700; color: var(--c, #EE7A1C); }
.tg-cat-arrow { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c, #EE7A1C) 12%, #fff); color: var(--c, #EE7A1C); transition: transform .3s var(--tg-ease), background .3s ease, color .3s ease; }
.tg-cat-card:hover .tg-cat-arrow { background: var(--c, #EE7A1C); color: #fff; transform: translateX(-4px); }
html[dir="ltr"] .tg-cat-card:hover .tg-cat-arrow { transform: translateX(4px); }
@media (max-width: 600px) { .tg-cat-card { padding: 16px; } .tg-cat-tagline { display: none; } .tg-cat-card .tg-cat-icon { width: 48px; height: 48px; border-radius: 14px; } }

/* ---------- Numbered steps (services) ---------- */
.tg-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tg-steps::before { content: ""; position: absolute; top: 44px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #EE7A1C, #FFB873 50%, #0F8A7E); opacity: .45; }
.tg-step { position: relative; text-align: center; background: #fff; border: 1px solid #EEEAE2; border-radius: 20px; padding: 18px 18px 22px; box-shadow: var(--tg-shadow); transition: transform .35s var(--tg-ease), box-shadow .35s var(--tg-ease); }
.tg-step:hover { transform: translateY(-6px); box-shadow: var(--tg-shadow-lg); }
.tg-step-num { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #EE7A1C, #FFB873); color: #fff; font-weight: 800; font-size: 1.2rem; box-shadow: 0 10px 24px rgba(238,122,28,.38), 0 0 0 6px #fff; position: relative; z-index: 1; }
.tg-step:nth-child(4) .tg-step-num { background: linear-gradient(135deg, #0F8A7E, #5BC7BB); box-shadow: 0 10px 24px rgba(15,138,126,.38), 0 0 0 6px #fff; }
@media (max-width: 960px) { .tg-steps { grid-template-columns: repeat(2, 1fr); } .tg-steps::before { display: none; } }
@media (max-width: 600px) { .tg-steps { grid-template-columns: 1fr; } }

/* ---------- Top bar v2 ---------- */
.tg-topbar { position: relative; background: linear-gradient(90deg, #121A24 0%, #1E2A3A 55%, #1C3340 100%); color: #E8ECF2; font-size: .82rem; }
.tg-topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #EE7A1C, #FFB873, #0F8A7E, #EE7A1C); background-size: 300% 100%; animation: tgShimmer 8s linear infinite; opacity: .9; }
.tg-topbar .mud-container { padding-top: 6px !important; padding-bottom: 6px !important; }
.tg-topbar-item { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: #E8ECF2; transition: border-color .25s ease, background .25s ease, transform .25s var(--tg-ease); }
a.tg-topbar-item:hover { border-color: rgba(238,122,28,.7); background: rgba(238,122,28,.12); color: #fff; transform: translateY(-1px); }
.tg-topbar-item > .mud-icon-root { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: rgba(238,122,28,.2); color: #FFB873; font-size: 1rem; flex-shrink: 0; }
.tg-topbar-icon.mud-icon-button { width: 32px; height: 32px; padding: 6px; border-radius: 50%; color: #C9D1DC; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); transition: transform .3s var(--tg-ease), background .25s ease, color .25s ease, border-color .25s ease; }
.tg-topbar-icon.mud-icon-button:hover { background: #EE7A1C; border-color: #EE7A1C; color: #fff; transform: translateY(-2px) rotate(6deg); }
.tg-lang-btn.mud-button { color: #fff; background: linear-gradient(135deg, #EE7A1C, #F59A4B); border-radius: 999px; padding: 3px 14px; min-width: 0; box-shadow: 0 6px 16px rgba(238,122,28,.35); margin-inline-start: 6px; }
.tg-lang-btn.mud-button:hover { background: linear-gradient(135deg, #F59A4B, #EE7A1C); transform: translateY(-1px); }
@media (max-width: 600px) { .tg-topbar-item { padding: 2px 8px 2px 3px; font-size: .75rem; } }

/* ---------- No horizontal scroll (reveal offsets) + floating buttons below the drawer ---------- */
html, body { overflow-x: clip; }
.tg-main.mud-main-content, .tg-page { overflow-x: clip; }
.tg-whatsapp { z-index: 1050; }
.mud-scroll-to-top { z-index: 1050 !important; }

/* ---------- Login v2 ---------- */
.tg-auth { min-height: calc(100vh - 160px); background: transparent; }
.tg-auth-split { display: grid; grid-template-columns: 1.05fr 1fr; border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.9); backdrop-filter: blur(18px); box-shadow: var(--tg-shadow-lg); border: 1px solid rgba(255,255,255,.8); }
.tg-auth-side { position: relative; overflow: hidden; color: #fff; background: radial-gradient(700px 400px at 90% 10%, rgba(238,122,28,.35), transparent 60%), radial-gradient(600px 400px at 10% 90%, rgba(15,138,126,.35), transparent 60%), linear-gradient(135deg, #1E2A3A 0%, #26354A 100%); padding: 48px 44px; }
.tg-auth-side::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.tg-auth-side .tg-hero-blob { opacity: .5; }
.tg-auth-side-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.tg-auth-logo { height: 64px; width: auto; align-self: flex-start; margin-bottom: 28px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.tg-auth-title { color: #fff !important; margin-bottom: 8px; }
.tg-auth-sub { color: #C9D1DC !important; margin-bottom: 24px; }
.tg-auth-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.tg-auth-list li { display: flex; align-items: center; gap: 12px; color: #E8ECF2; font-weight: 600; }
.tg-auth-dot { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(238,122,28,.18); border: 1px solid rgba(238,122,28,.4); color: #FFB873; flex-shrink: 0; }
.tg-auth-partners { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.tg-auth-partners img { height: 40px; width: 40px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; }
.tg-auth-form { padding: 48px 44px; }
.tg-auth-btn.mud-button { border-radius: 14px; padding: 12px 20px; background: linear-gradient(135deg, #EE7A1C, #F59A4B) !important; }
.tg-auth-or { display: flex; align-items: center; gap: 12px; color: #8F9AAA; font-size: .8rem; margin: 18px 0; }
.tg-auth-or::before, .tg-auth-or::after { content: ""; flex: 1; height: 1px; background: #E6E2DA; }
@media (max-width: 960px) { .tg-auth-split { grid-template-columns: 1fr; } .tg-auth-side { padding: 32px 24px; } .tg-auth-form { padding: 32px 24px; } .tg-auth-list { margin-bottom: 20px; } .tg-auth-partners { display: none; } }

/* ---------- Stat tiles v2 ---------- */
.tg-stat { text-align: start; padding: 20px 20px 18px; border-radius: 20px; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); border: 1px solid #EEEAE2; display: flex; flex-direction: column; gap: 4px; min-height: 150px; }
.tg-stat::before { display: none; }
.tg-stat-icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; background: color-mix(in srgb, var(--c, #EE7A1C) 14%, #fff); color: var(--c, #EE7A1C); transition: transform .4s var(--tg-ease); }
.tg-stat:hover .tg-stat-icon { transform: translateY(-4px) rotate(-8deg); }
.tg-stat .tg-stat-value { font-size: 2.3rem; font-weight: 800; line-height: 1.05; background: linear-gradient(135deg, var(--c, #EE7A1C), color-mix(in srgb, var(--c, #EE7A1C) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tg-stat .tg-stat-label { color: #6B7684; font-size: .85rem; font-weight: 600; }
.tg-stat-orb { position: absolute; width: 120px; height: 120px; border-radius: 50%; bottom: -60px; inset-inline-end: -40px; background: radial-gradient(circle, color-mix(in srgb, var(--c, #EE7A1C) 22%, transparent), transparent 70%); pointer-events: none; transition: transform .5s var(--tg-ease); }
.tg-stat:hover .tg-stat-orb { transform: scale(1.7); }
.tg-stat-featured { background: linear-gradient(135deg, #EE7A1C, #F59A4B); border-color: transparent; box-shadow: 0 16px 34px rgba(238,122,28,.35); }
.tg-stat-featured .tg-stat-icon { background: rgba(255,255,255,.2); color: #fff; }
.tg-stat-featured .tg-stat-value { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
.tg-stat-featured .tg-stat-label { color: rgba(255,255,255,.85); }
.tg-stat-featured .tg-stat-orb { background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%); }

/* login: main logo on a white plate */
.tg-auth-logo-plate { display: inline-flex; align-self: flex-start; background: #fff; border-radius: 16px; padding: 8px 14px; margin-bottom: 28px; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.tg-auth-logo-plate .tg-auth-logo { height: 56px; margin-bottom: 0; filter: none; }

/* ---------- Mobile drawer v2 ---------- */
.mud-drawer .mud-drawer-content { display: flex; flex-direction: column; }
.mud-drawer .mud-divider { flex: 0 0 auto; }
.tg-drawer-head { position: relative; overflow: hidden; padding: 18px 18px 16px; color: #fff; background: radial-gradient(400px 220px at 90% 0%, rgba(238,122,28,.35), transparent 60%), linear-gradient(135deg, #1E2A3A, #26354A); flex: 0 0 auto; }
.tg-drawer-head .tg-hero-blob { opacity: .5; }
.tg-drawer-head .tg-hero-blob-1 { width: 220px; height: 220px; top: -90px; }
.tg-drawer-head .tg-hero-blob-2 { width: 180px; height: 180px; bottom: -110px; }
.tg-drawer-logo { position: relative; z-index: 1; display: inline-flex; background: #fff; border-radius: 14px; padding: 6px 12px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.tg-drawer-logo img { height: 46px; width: auto; }
.tg-drawer-close.mud-icon-button { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1; color: #fff; background: rgba(255,255,255,.12); }
.tg-drawer-tag { position: relative; z-index: 1; margin-top: 12px; font-size: .8rem; color: #C9D1DC; font-weight: 600; }
.mud-drawer .mud-navmenu { padding: 10px 8px; flex: 0 0 auto; }
.mud-drawer .mud-nav-link { border-radius: 12px; margin: 2px 0; }
.mud-drawer .mud-nav-link.active { background: #FFF1E6; color: var(--tg-orange) !important; }
.mud-drawer .mud-nav-link .mud-nav-link-icon { color: inherit; }
.tg-drawer-foot { padding: 14px 16px 18px; border-top: 1px solid #EEEAE2; background: #FAF9F7; flex: 0 0 auto; }
.tg-drawer-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.tg-drawer-pill { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 12px; font-size: .8rem; font-weight: 700; color: var(--tg-navy); background: #fff; border: 1px solid #EEEAE2; }
.tg-drawer-pill .mud-icon-root { color: var(--tg-orange); }
.tg-drawer-pill-wa { color: #1E8E4E; }
.tg-drawer-pill-wa .mud-icon-root { color: #25D366; }
.tg-drawer-lang.mud-button { border-radius: 12px; }

/* ---------- Hero on phones: keep the slide dots clear of the buttons ---------- */
@media (max-width: 600px) {
    .tg-hero .mud-carousel { height: 540px; }
    .tg-hero-content { justify-content: flex-start; padding-top: 36px; padding-bottom: 120px; }
    .tg-hero-title { font-size: 1.75rem; }
    .tg-hero-text { font-size: .95rem; margin-bottom: 18px; }
    .tg-hero-nav { bottom: 76px; }
}

/* top bar on phones: one compact row (phone + language) */
@media (max-width: 600px) {
    .tg-topbar .mud-container { flex-wrap: nowrap !important; padding-top: 4px !important; padding-bottom: 4px !important; }
    .tg-topbar .mud-container > div:first-child > :not(:first-child) { display: none !important; }
    .tg-topbar-icon.mud-icon-button { display: none !important; }
    .tg-lang-btn.mud-button { margin-inline-start: 0; padding: 2px 12px; }
}

/* mobile drawer: smaller, tighter menu text */
.mud-drawer .mud-nav-link, .mud-drawer .mud-nav-group .mud-nav-link-button { padding-top: 7px; padding-bottom: 7px; min-height: 0; }
.mud-drawer .mud-nav-link-text, .mud-drawer .mud-nav-group > .mud-nav-link-button .mud-nav-link-text { font-size: .88rem; font-weight: 600; line-height: 1.4; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-link-text { font-size: .82rem; font-weight: 500; }
.mud-drawer .mud-nav-link .mud-icon-root { font-size: 1.15rem; width: 1.15rem; height: 1.15rem; }
.mud-drawer .mud-navmenu { padding: 6px 8px; }
.mud-drawer.mud-drawer--open { width: 280px; }
.tg-drawer-tag { font-size: .75rem; }
.tg-drawer-logo img { height: 40px; }

/* drawer contact pills: single line */
.tg-drawer-pill { white-space: nowrap; font-size: .74rem; padding: 8px 6px; gap: 4px; }

/* header logo on phones */
@media (max-width: 600px) { .tg-brand img, .tg-scrolled .tg-brand img { height: 40px; } .tg-header .mud-container { padding-top: 6px !important; padding-bottom: 6px !important; } }
@media (min-width: 601px) and (max-width: 960px) { .tg-brand img { height: 50px; } }

/* ==================================================================
   PHONES ONLY: smaller typography everywhere
   ================================================================== */
@media (max-width: 600px) {
    html { font-size: 14px; }
    body, .mud-typography-body1 { font-size: .93rem; line-height: 1.65; }
    .mud-typography-body2 { font-size: .83rem; }
    .mud-typography-caption { font-size: .72rem; }
    .mud-typography-subtitle1 { font-size: .92rem; }
    .mud-typography-subtitle2 { font-size: .82rem; }
    .mud-typography-h2, .tg-section-title .mud-typography-h2 { font-size: 1.45rem; line-height: 1.3; }
    .mud-typography-h3 { font-size: 1.25rem; }
    .mud-typography-h4 { font-size: 1.1rem; }
    .mud-typography-h5 { font-size: 1rem; }
    .mud-typography-h6 { font-size: .92rem; }
    .tg-section-title .tg-eyebrow { font-size: .72rem; }
    .tg-section { padding: 44px 0; }
    .tg-hero-title { font-size: 1.5rem; }
    .tg-hero-text { font-size: .88rem; }
    .tg-hero-badge { font-size: .72rem; padding: 4px 10px; }
    .tg-banner h1 { font-size: 1.4rem; }
    .tg-banner .mud-typography-body1 { font-size: .85rem; }
    .tg-cat-card .tg-cat-name { font-size: .95rem; }
    .tg-cat-pill, .tg-cat-foot { font-size: .72rem; }
    .tg-course-title { font-size: .92rem; min-height: 2.8em; }
    .tg-course-meta { font-size: .75rem; }
    .tg-stat .tg-stat-value { font-size: 1.7rem; }
    .tg-stat .tg-stat-label { font-size: .75rem; }
    .tg-stat { min-height: 120px; padding: 14px; }
    .tg-testimonial { padding: 20px; }
    .tg-testimonial p { font-size: .85rem; }
    .tg-price-big { font-size: 1.6rem; }
    .tg-info-row { font-size: .85rem; }
    .tg-emergency { font-size: .85rem; }
    .tg-emergency-num { font-size: 1rem; padding: 4px 12px; }
    .tg-footer { font-size: .85rem; }
    .tg-footer-title { font-size: .9rem; }
    .tg-footer-links a, .tg-footer-contact li { font-size: .82rem; }
    .tg-footer-cta .mud-typography-h5 { font-size: 1rem; }
    .tg-footer-bottom { font-size: .72rem; }
    .tg-footer-badge { font-size: .72rem; }
    .mud-button-root.mud-button { font-size: .82rem; }
    .mud-button-root.mud-button-size-large { font-size: .88rem; padding: 8px 16px; }
    .mud-chip { font-size: .72rem; }
    .mud-input-control { font-size: .9rem; }
    .mud-input-label { font-size: .85rem; }
    .tg-dd-text strong { font-size: .85rem; }
    .tg-step .mud-typography-h6 { font-size: .9rem; }
    .tg-step-num { width: 44px; height: 44px; font-size: 1rem; }
    .tg-auth-title { font-size: 1.3rem; }
    .tg-cal-day { font-size: .78rem; }
    .tg-cal-head { font-size: .68rem; }
    .tg-lightbox-caption { font-size: .85rem; }
}

/* logo plates sit on the LEFT in Arabic mode */
html[dir="rtl"] .tg-footer-brand { display: flex; width: fit-content; margin-right: auto; margin-left: 0; }
html[dir="rtl"] .tg-auth-logo-plate { align-self: flex-end; }

/* WhatsApp button: perfect circle on phones */
@media (max-width: 600px) { .tg-whatsapp { width: 56px; height: 56px; padding: 0; justify-content: center; gap: 0; bottom: 18px; inset-inline-end: 18px; } .tg-whatsapp .mud-icon-root { font-size: 1.8rem; width: 1.8rem; height: 1.8rem; } }

/* header: logo always on the LEFT, menu/login on the right */
html[dir="rtl"] .tg-header .mud-container { direction: ltr; }
html[dir="rtl"] .tg-header .tg-nav { direction: rtl; }
html[dir="rtl"] .tg-header .mud-icon-button.d-lg-none { order: 10; margin-left: auto; }
html[dir="rtl"] .tg-login-btn.mud-button { margin-inline-start: 0; margin-left: 12px; }

/* ---------- Drawer: courses group as a tree with connector lines ---------- */
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-navmenu { position: relative; margin-inline-start: 26px; padding: 2px 0 4px 0; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-navmenu::before { content: ""; position: absolute; top: 0; bottom: 18px; inset-inline-start: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, #EE7A1C, #FFD3AC); }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-item { position: relative; padding-inline-start: 18px; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-item::before { content: ""; position: absolute; top: 50%; inset-inline-start: 0; width: 14px; height: 2px; background: #FFB873; border-radius: 2px; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-item::after { content: ""; position: absolute; top: 50%; inset-inline-start: 10px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; border: 2px solid #EE7A1C; box-sizing: border-box; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-link { padding-inline-start: 10px !important; padding-top: 5px; padding-bottom: 5px; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-link.active { background: #FFF1E6; }
.mud-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-item:has(.active)::after { background: #EE7A1C; }

/* logo plates smaller on phones */
@media (max-width: 600px) { .tg-footer-brand { padding: 6px 10px; border-radius: 12px; } .tg-footer-brand img { height: 42px; } .tg-auth-logo-plate { padding: 6px 10px; } .tg-auth-logo-plate .tg-auth-logo { height: 40px; } .tg-drawer-logo { padding: 4px 8px; } .tg-drawer-logo img { height: 34px; } }

/* phones: footer plate + header logo, with enough specificity to beat footer.css */
@media (max-width: 600px) {
  .tg-footer .tg-footer-brand { display: inline-flex; width: max-content; max-width: 100%; padding: 5px 10px; border-radius: 12px; margin-bottom: 14px; }
  .tg-footer .tg-footer-brand img { height: 40px !important; }
  .tg-header .tg-brand img, .tg-scrolled .tg-header .tg-brand img { height: 32px !important; }
  .tg-header .mud-container { padding-top: 4px !important; padding-bottom: 4px !important; }
  .tg-header .mud-icon-button { padding: 6px; }
}

/* broken image placeholder (set by tg.js) */
img.tg-img-fallback { object-fit: cover; background: #1E2A3A; }
.tg-partner img.tg-img-fallback, .tg-footer-badge img.tg-img-fallback, .tg-auth-partners img.tg-img-fallback { object-fit: contain; }