/* =============================================================================
   Find an Academy — marketplace styles (Zeetius public website)
   -----------------------------------------------------------------------------
   Sits on top of Bootstrap 5 + styles.min.css and uses the landing page's brand:
   orange #EB5B2B (primary), navy #303C6F (headings / secondary), Outfit font.
   Mobile-first; logical properties so Arabic mirrors correctly.
   ========================================================================== */

:root {
    --mk-orange: #EB5B2B;
    --mk-orange-hover: #e83c02;
    --mk-orange-soft: #fff5f2;
    --mk-navy: #303C6F;
    --mk-navy-soft: #e5f3ff;
    --mk-ink: #0e1514;
    --mk-muted: #4a4a4a;
    --mk-faint: #9090a7;
    --mk-line: #e8e8e8;
    --mk-surface: #f8f9fb;
    --mk-radius: 10px;
    --mk-radius-lg: 22px;
    --mk-shadow: 0 10px 30px -18px rgba(33, 37, 41, .35);
    --mk-shadow-hover: 0 22px 44px -20px rgba(48, 60, 111, .35);
}

.mk-body { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--mk-ink); background: #fff; }
html[lang="ar"] .mk-body { font-family: 'Cairo', 'Tajawal', 'Outfit', sans-serif; }
.mk-main { min-height: 60vh; }
.mk-skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -3rem; padding: .5rem .9rem; background: var(--mk-navy); color: #fff; border-radius: 8px; z-index: 2000; }
.mk-skip:focus { inset-block-start: 1rem; }
.mk-link { color: var(--mk-orange); font-weight: 600; text-decoration: none; }
.mk-link:hover { text-decoration: underline; color: var(--mk-orange-hover); }

/* ---------------------------------------------------------------- nav (solid, in flow — never overlaps content) */
.mk-nav { position: static; background: #fff !important; border-block-end: 1px solid var(--mk-line); border-radius: 0; margin: 0; padding-block: .5rem; }
.mk-nav .nav-link { color: var(--mk-navy); font-weight: 500; }
.mk-nav .nav-link.active { color: var(--mk-orange); font-weight: 700; }
.mk-lang__btn { border: 1px solid var(--mk-line); border-radius: 8px; min-height: 2.5rem; font-weight: 600; }
.mk-lang .dropdown-item.active { background: var(--mk-orange-soft); color: var(--mk-orange); }

/* ---------------------------------------------------------------- buttons */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.75rem; padding: .55rem 1.25rem; border-radius: var(--mk-radius); font-weight: 600; font-size: .95rem; line-height: 1.2; transition: .2s ease-in-out; }
.mk-btn--primary { background: var(--mk-orange); color: #fff; border: 1px solid var(--mk-orange); box-shadow: 0 4px 4px 0 #e0e0e0; }
.mk-btn--primary:hover, .mk-btn--primary:focus { background: var(--mk-orange-hover); border-color: var(--mk-orange-hover); color: #fff; }
.mk-btn--secondary { background: #fff; color: var(--mk-navy); border: 1px solid var(--mk-navy); }
.mk-btn--secondary:hover, .mk-btn--secondary:focus { background: var(--mk-navy); color: #fff; }
.mk-btn--ghost { background: transparent; color: var(--mk-muted); border: 1px solid var(--mk-line); }
.mk-btn--ghost:hover { border-color: var(--mk-navy); color: var(--mk-navy); }

/* ---------------------------------------------------------------- powered-by badge */
.mk-ai-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 999px; background: linear-gradient(135deg, #303C6F, #4b5aa3); color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .01em; box-shadow: 0 6px 16px -8px rgba(48, 60, 111, .6); }
.mk-ai-badge i { color: #ffb38a; }

/* ---------------------------------------------------------------- global overrides
   styles.min.css ships a "floating label" rule (form label { position:absolute; top:-10px;
   left:14px; padding:0 6px; background:#fff }) meant for the landing-page modals. Every
   marketplace form wraps its inputs in <label>, so that rule yanked the search fields out of
   the grid and made them overlap the Search button. Same specificity as the original rule
   (0,0,2) so this only wins by source order and never outranks component styles below. */
/* rtl-ltr.css forces the Arabic font on every element (html[lang="ar"] *), which also hits
   Font Awesome glyphs and renders them as empty boxes. Give icons their font back. */
html[lang="ar"] .fa, html[lang="ar"] .fas, html[lang="ar"] .far, html[lang="ar"] .fa-solid, html[lang="ar"] .fa-regular, html[lang="ar"] .fa-classic { font-family: "Font Awesome 6 Free"; }
html[lang="ar"] .fab, html[lang="ar"] .fa-brands { font-family: "Font Awesome 6 Brands"; }
:where(.mk-body) form label { position: static; inset: auto; padding: 0; margin: 0; background: transparent; font-size: inherit; color: inherit; z-index: auto; }

/* ---------------------------------------------------------------- hero */
.mk-hero { position: relative; overflow: hidden; background: radial-gradient(48rem 26rem at 12% -10%, rgba(235, 91, 43, .14), transparent 60%), radial-gradient(40rem 22rem at 100% 0%, rgba(48, 60, 111, .12), transparent 60%), var(--mk-surface); border-block-end: 1px solid var(--mk-line); padding-block: 3rem 2.25rem; }
.mk-hero__inner { display: grid; gap: 1rem; justify-items: center; text-align: center; max-inline-size: 60rem; margin-inline: auto; }
.mk-hero__kicker { margin: 0; padding: 0; }
.mk-hero__title { font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); font-weight: 800; color: var(--mk-navy); letter-spacing: -.02em; line-height: 1.08; margin: 0; max-inline-size: 18ch; }
.mk-hero__sub { color: var(--mk-muted); font-size: 1.1rem; max-inline-size: 42rem; margin: 0; }
.mk-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; color: var(--mk-muted); font-size: .9rem; }
.mk-hero__stats strong { color: var(--mk-navy); font-size: 1.05rem; }
.mk-hero__stats i { color: var(--mk-orange); margin-inline-end: .3rem; }

.mk-search { inline-size: 100%; display: grid; gap: .5rem; margin-block-start: .5rem; padding: .5rem; background: #fff; border: 1px solid var(--mk-line); border-radius: 18px; box-shadow: 0 14px 36px -22px rgba(15, 23, 42, .4); text-align: start; }
.mk-search__field { position: relative; display: block; min-inline-size: 0; margin: 0; }
.mk-search__icon { position: absolute; inset-inline-start: .95rem; inset-block-start: 50%; translate: 0 -50%; color: var(--mk-faint); pointer-events: none; }
.mk-search__field input { inline-size: 100%; min-block-size: 3.1rem; padding: .7rem .9rem .7rem 2.6rem; font: inherit; font-size: 1rem; color: var(--mk-ink); border: 1px solid transparent; border-radius: 12px; background: var(--mk-surface); text-overflow: ellipsis; }
[dir="rtl"] .mk-search__field input { padding: .7rem 2.6rem .7rem .9rem; }
.mk-search__field input:focus { outline: 2px solid rgba(235, 91, 43, .45); outline-offset: 1px; background: #fff; border-color: var(--mk-orange); }
.mk-search__btn { min-block-size: 3.1rem; border-radius: 12px; white-space: nowrap; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
@media (min-width: 48rem) { .mk-search { grid-template-columns: 1.4fr 1fr auto; align-items: center; } }

.mk-locbar { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .9rem; font-size: .9rem; }
.mk-locbar__use { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.6rem; padding-inline: .9rem; border: 1px dashed rgba(235, 91, 43, .6); border-radius: 999px; background: #fff; color: var(--mk-orange); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.mk-locbar__use:hover { background: var(--mk-orange-soft); }
.mk-locbar__use[aria-pressed="true"] { border-style: solid; background: var(--mk-orange-soft); }
.mk-locbar__status { color: var(--mk-muted); }
.mk-locbar__status[data-tone="error"] { color: #b03a2e; }
.mk-locbar__status[data-tone="approx"] { color: var(--mk-navy); }
.mk-nearby__note { margin: -.5rem 0 1rem; font-size: .9rem; color: var(--mk-muted); }
.mk-crumbs__trail { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; font-size: .85rem; color: var(--mk-muted); }
.mk-crumbs__trail li + li::before { content: "›"; margin-inline-end: .35rem; color: var(--mk-faint); }
.mk-crumbs__trail a { color: var(--mk-navy); text-decoration: none; }
.mk-crumbs__trail a:hover { text-decoration: underline; }
.mk-crumbs__trail [aria-current="page"] { color: var(--mk-ink); font-weight: 600; }
.mk-hero__list { display: inline-flex; align-items: center; gap: .45rem; margin-block-start: .25rem; font-size: .9rem; font-weight: 600; color: var(--mk-navy); text-decoration: none; border-block-end: 1px solid transparent; }
.mk-hero__list i { color: var(--mk-orange); }
.mk-hero__list:hover, .mk-hero__list:focus-visible { color: var(--mk-orange); border-block-end-color: currentColor; }
.mk-empty__list { margin-block-start: .75rem; font-size: .9rem; font-weight: 600; color: var(--mk-navy); text-decoration: underline; text-underline-offset: 3px; }
.mk-empty__list:hover { color: var(--mk-orange); }
.mk-list-cta { display: grid; gap: 1rem; align-items: center; margin-block-start: 2.5rem; padding: 1.5rem; border-radius: var(--mk-radius-lg); background: linear-gradient(135deg, var(--mk-navy) 0%, #4b5aa3 100%); color: #fff; }
.mk-list-cta__art { display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 14px; background: rgba(255, 255, 255, .14); color: #ffb38a; font-size: 1.5rem; }
.mk-list-cta__text h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .35rem; color: #fff; }
.mk-list-cta__text p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(255, 255, 255, .85); max-inline-size: 60ch; }
.mk-list-cta .mk-btn { inline-size: fit-content; white-space: nowrap; }
@media (min-width: 48rem) { .mk-list-cta { grid-template-columns: auto 1fr auto; padding: 1.75rem 2rem; } }
.mk-nav--minimal .nav-link i { margin-inline-end: .35rem; color: var(--mk-orange); }
.mk-locbar__clear { background: none; border: 0; font: inherit; font-size: .9rem; color: var(--mk-muted); text-decoration: underline; cursor: pointer; min-block-size: 2.6rem; }

/* ---------------------------------------------------------------- sections */
.mk-section { padding-block: 2.25rem; }
.mk-section + .mk-section { border-block-start: 1px solid var(--mk-line); }
.mk-section__head { margin-block-end: 1.25rem; }
.mk-section__title { font-size: clamp(1.3rem, 1rem + 1.3vw, 1.85rem); font-weight: 800; color: var(--mk-navy); margin: 0; letter-spacing: -.01em; }
.mk-section__title i { color: var(--mk-orange); margin-inline-end: .3rem; }
.mk-section__head--row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mk-section--month { background: linear-gradient(180deg, var(--mk-orange-soft), #fff); }
.mk-count { display: inline-flex; align-items: center; padding: .3rem .8rem; border-radius: 999px; background: var(--mk-navy-soft); color: var(--mk-navy); font-weight: 600; font-size: .85rem; }

.mk-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 20rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: .5rem; margin-inline: calc(-1 * var(--bs-gutter-x, .75rem)); padding-inline: var(--bs-gutter-x, .75rem); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.mk-scroller > * { scroll-snap-align: start; min-inline-size: 0; }
@media (min-width: 48rem) { .mk-scroller { grid-auto-flow: row; grid-auto-columns: unset; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; } }

.mk-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-grid--feature { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .mk-grid--feature { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); } }

/* ---------------------------------------------------------------- cards */
.mk-card { display: flex; flex-direction: column; min-inline-size: 0; background: #fff; border: 1px solid #0000000f; border-radius: var(--mk-radius-lg); overflow: hidden; box-shadow: var(--mk-shadow); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.mk-card:hover { border-color: rgba(48, 60, 111, .18); box-shadow: var(--mk-shadow-hover); }
@media (hover: hover) { .mk-card:hover { transform: translateY(-4px); } }
.mk-card__cover { position: relative; display: block; block-size: 5.5rem; background: linear-gradient(120deg, color-mix(in srgb, var(--mk-card-accent, var(--mk-orange)) 22%, #fff), color-mix(in srgb, var(--mk-card-accent, var(--mk-orange)) 55%, var(--mk-navy))); text-decoration: none; }
.mk-card__pattern { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.5px); background-size: 14px 14px; opacity: .6; }
.mk-card__cover .mk-badge { position: absolute; inset-inline-end: .85rem; inset-block-start: .85rem; z-index: 1; }
.mk-card__cover .mk-logo { position: absolute; inset-inline-start: 1.1rem; inset-block-end: -1.9rem; z-index: 2; }
.mk-card__body { display: grid; gap: .7rem; padding: 2.6rem 1.25rem 1.25rem; }
.mk-card__name { font-weight: 800; font-size: 1.15rem; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.mk-card__name a { color: var(--mk-navy); text-decoration: none; }
.mk-card__name a:hover { color: var(--mk-orange); }
.mk-card__where { font-size: .9rem; color: var(--mk-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin: 0; }
.mk-card__where i { color: var(--mk-orange); margin-inline-end: .25rem; }
.mk-card__distance { display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; background: var(--mk-orange-soft); color: var(--mk-orange); font-weight: 700; font-size: .8rem; }
.mk-card__desc { font-size: .92rem; color: var(--mk-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-card__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .78rem; color: var(--mk-faint); padding-block-start: .5rem; border-block-start: 1px dashed var(--mk-line); }
.mk-card__meta i { margin-inline-end: .25rem; color: var(--mk-navy); }
.mk-card__ai { color: var(--mk-navy); font-weight: 600; }
.mk-card__ai i { color: var(--mk-orange); }
.mk-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.mk-card__actions .mk-btn { padding-inline: .75rem; font-size: .9rem; }
.mk-card--feature .mk-card__cover { block-size: 7rem; }
.mk-card--feature .mk-card__name { font-size: 1.4rem; }
.mk-card--feature .mk-card__desc { -webkit-line-clamp: 4; font-size: 1rem; }
.mk-feature { max-inline-size: 48rem; }
@media (min-width: 48rem) { .mk-card--feature .mk-card__actions { grid-template-columns: repeat(2, minmax(0, 12rem)); } }

.mk-logo { position: relative; display: grid; place-items: center; inline-size: 4.25rem; block-size: 4.25rem; flex: none; border-radius: 16px; background: #fff; border: 3px solid #fff; box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .45); overflow: hidden; }
.mk-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: .35rem; background: #fff; }
.mk-logo__fallback { display: none; font-weight: 800; color: var(--mk-card-accent, var(--mk-orange)); font-size: 1.2rem; letter-spacing: .02em; background: var(--mk-surface); inline-size: 100%; block-size: 100%; place-items: center; }
.mk-logo:not(:has(img)) .mk-logo__fallback, .mk-logo[data-fallback="1"] .mk-logo__fallback { display: grid; }
.mk-logo--lg { inline-size: 6.5rem; block-size: 6.5rem; border-radius: 20px; border-width: 4px; }
.mk-logo--lg .mk-logo__fallback { font-size: 1.8rem; }

.mk-badge { display: inline-flex; align-items: center; gap: .3rem; inline-size: fit-content; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .01em; line-height: 1.4; white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .4); }
.mk-badge--recommended { background: #fff; color: #b8431a; }
.mk-badge--month { background: #fef3c7; color: #92400e; }
.mk-badge--spotlight { background: #ede9fe; color: #5b21b6; }

.mk-chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.mk-chip { display: inline-flex; align-items: center; padding: .28rem .7rem; border-radius: 999px; background: var(--mk-navy-soft); font-size: .8rem; font-weight: 600; color: var(--mk-navy); }
.mk-chip--more { color: var(--mk-faint); background: var(--mk-surface); }
.mk-chips--lg .mk-chip { font-size: .92rem; padding: .5rem 1rem; }

/* ---------------------------------------------------------------- toolbar & filters */
.mk-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-block-end: 1rem; padding: .9rem 1rem; background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: 16px; }
.mk-toolbar__filters { position: relative; }
.mk-toolbar__badge { display: inline-grid; place-items: center; min-inline-size: 1.35rem; block-size: 1.35rem; padding-inline: .3rem; border-radius: 999px; background: var(--mk-orange); color: #fff; font-size: .72rem; }
.mk-toolbar__inline { display: none; }
.mk-toolbar__sort { margin-inline-start: auto; }
.mk-select { display: grid; gap: .25rem; font-size: .9rem; min-inline-size: 0; margin: 0; }
.mk-select > span { color: var(--mk-faint); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.mk-select .form-select { min-block-size: 2.75rem; max-inline-size: 16rem; border-radius: var(--mk-radius); border-color: var(--mk-line); font-size: .9rem; background-color: #fff; }
.mk-select .form-select:focus { border-color: var(--mk-orange); box-shadow: 0 0 0 .2rem rgba(235, 91, 43, .2); }
.mk-check { display: inline-flex; align-items: center; gap: .5rem; min-block-size: 2.75rem; font-size: .9rem; cursor: pointer; margin: 0; }
.mk-check input { inline-size: 1.2rem; block-size: 1.2rem; accent-color: var(--mk-orange); }
.mk-check--big { padding: .5rem 0; }
@media (min-width: 48rem) { .mk-toolbar__filters { display: none; } .mk-toolbar__inline { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; } }
.mk-active { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: 1rem; }
.mk-active button { display: inline-flex; align-items: center; gap: .35rem; min-block-size: 2.25rem; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--mk-line); background: #fff; font: inherit; font-size: .8rem; cursor: pointer; }
.mk-active button:hover { border-color: #b03a2e; color: #b03a2e; }
.mk-more { display: flex; justify-content: center; margin-block-start: 1.5rem; }
.mk-more .mk-btn { min-inline-size: min(100%, 16rem); }
#mk-results[aria-busy="true"] { opacity: .6; pointer-events: none; }

.mk-sheet { inline-size: 100%; max-inline-size: 100%; margin: auto 0 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: #fff; color: var(--mk-ink); max-block-size: 88svh; }
.mk-sheet::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.mk-sheet__inner { display: grid; grid-template-rows: auto 1fr auto; max-block-size: 88svh; }
.mk-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-block-end: 1px solid var(--mk-line); }
.mk-sheet__head h2 { font-size: 1.2rem; font-weight: 700; color: var(--mk-navy); margin: 0; }
.mk-sheet__close { display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 999px; background: var(--mk-surface); color: var(--mk-ink); cursor: pointer; }
.mk-sheet__body { display: grid; gap: 1rem; padding: 1.25rem; overflow: auto; }
.mk-sheet__foot { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom)); border-block-start: 1px solid var(--mk-line); }
@media (min-width: 48rem) { .mk-sheet { margin: auto; max-inline-size: 28rem; border-radius: 20px; } }

/* ---------------------------------------------------------------- forms */
.mk-field { display: grid; gap: .3rem; }
.mk-field label { font-weight: 600; font-size: .9rem; color: var(--mk-navy); }
.mk-field__optional { font-weight: 400; color: var(--mk-faint); }
.mk-field .form-control, .mk-field .form-select { min-block-size: 2.75rem; border-radius: var(--mk-radius); border-color: var(--mk-line); }
.mk-field .form-control:focus, .mk-field .form-select:focus { border-color: var(--mk-orange); box-shadow: 0 0 0 .2rem rgba(235, 91, 43, .2); }
.mk-form { display: grid; gap: 1rem; }
.mk-form__row { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .mk-form__row { grid-template-columns: 1fr 1fr; } }
.mk-form__hint { font-size: .8rem; margin: -.5rem 0 0; }
.mk-form__submit { inline-size: 100%; }
.mk-form__submit[disabled] { opacity: .7; cursor: progress; }
.mk-consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; }
.mk-consent input[type="checkbox"] { inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: .15rem; accent-color: var(--mk-orange); flex: none; }
.mk-consent label { display: block; font-size: .88rem; line-height: 1.45; color: var(--mk-muted); cursor: pointer; }
.mk-honeypot { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mk-notice { padding: .9rem 1rem; border-radius: var(--mk-radius); border: 1px solid var(--mk-line); margin: 0; }
.mk-notice--error { border-color: #f5c2c7; background: #fdecea; color: #842029; }

/* ---------------------------------------------------------------- empty & skeleton */
.mk-empty { display: grid; justify-items: center; text-align: center; gap: .5rem; padding: 3rem 1rem; border: 1px dashed var(--mk-line); border-radius: var(--mk-radius-lg); background: var(--mk-surface); }
.mk-empty__art { display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border-radius: 999px; background: #fff; color: var(--mk-orange); font-size: 1.9rem; box-shadow: var(--mk-shadow); }
.mk-empty h3 { font-size: 1.2rem; font-weight: 700; color: var(--mk-navy); margin: .5rem 0 0; }
.mk-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-block-start: .5rem; }
.mk-notfound { display: grid; justify-items: center; text-align: center; gap: .75rem; padding-block: 3rem; }
.mk-skel { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef0f3 25%, #f8f9fb 50%, #eef0f3 75%); background-size: 200% 100%; animation: mk-shimmer 1.4s linear infinite; }
.mk-skel--line { block-size: .85rem; }
.mk-skel--btn { block-size: 2.75rem; border-radius: var(--mk-radius); }
.mk-card--skeleton { padding: 1.25rem; gap: .75rem; }
.mk-card--skeleton .mk-logo { position: static; border: 0; box-shadow: none; }
.mk-card--skeleton .mk-card__top { display: flex; gap: .85rem; align-items: center; }
.mk-card--skeleton .mk-card__title { flex: 1; display: grid; gap: .4rem; }
@keyframes mk-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mk-skel { animation: none; } .mk-card, .mk-card:hover { transform: none; transition: none; } }

/* ---------------------------------------------------------------- profile page */
.mk-crumbs { padding-block: 1rem; font-size: .9rem; }
.mk-crumbs a { color: var(--mk-muted); text-decoration: none; }
.mk-crumbs a:hover { color: var(--mk-orange); }
.mk-profile { background: linear-gradient(180deg, color-mix(in srgb, var(--mk-academy-accent, var(--mk-orange)) 12%, #fff), #fff); border-block-end: 1px solid var(--mk-line); padding-block: 1.5rem 2rem; }
.mk-profile__inner { display: grid; gap: 1rem; }
.mk-profile__text { display: grid; gap: .6rem; min-inline-size: 0; }
.mk-profile__name { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem); font-weight: 800; color: var(--mk-navy); margin: 0; overflow-wrap: anywhere; }
.mk-profile__badges { display: flex; flex-wrap: wrap; gap: .4rem; }
.mk-profile__where { color: var(--mk-muted); display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.mk-profile__where i { color: var(--mk-orange); }
.mk-profile__tagline { font-size: 1.05rem; max-inline-size: 48rem; margin: 0; }
.mk-profile__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .25rem; }
.mk-profile__actions .mk-btn { flex: 1 1 auto; }
@media (min-width: 40rem) { .mk-profile__inner { grid-template-columns: auto 1fr; align-items: start; gap: 1.5rem; } .mk-profile__actions .mk-btn { flex: 0 1 auto; } }
.mk-profile__body { display: grid; gap: 2rem; padding-block: 2rem 4rem; }
.mk-profile__main { display: grid; gap: 2rem; min-inline-size: 0; }
.mk-block { display: grid; gap: .6rem; padding: 1.25rem; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius-lg); }
.mk-block__title { font-size: 1.15rem; font-weight: 700; color: var(--mk-navy); margin: 0; }
.mk-prose p { font-size: 1rem; color: var(--mk-muted); }
.mk-address { font-style: normal; }
.mk-social { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; margin: 0; }
.mk-social a { color: var(--mk-muted); font-size: .9rem; text-decoration: none; }
.mk-social a:hover { color: var(--mk-orange); }
@media (min-width: 60rem) { .mk-profile__body { grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 1fr); align-items: start; } .mk-enquiry { position: sticky; inset-block-start: 1.5rem; } }

/* ---------------------------------------------------------------- enquiry */
.mk-enquiry { background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: var(--mk-radius-lg); padding: 1.5rem; scroll-margin-block-start: 1.5rem; box-shadow: var(--mk-shadow); }
.mk-enquiry h2 { font-size: 1.25rem; font-weight: 700; color: var(--mk-navy); margin: 0; }
.mk-enquiry__form { display: grid; gap: 1rem; }
.mk-enquiry__form[hidden], .mk-enquiry__sent[hidden] { display: none; }
.mk-enquiry__sent { display: grid; justify-items: center; text-align: center; gap: .6rem; padding-block: 1.5rem; }
.mk-enquiry__sent-icon { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; border-radius: 999px; background: var(--mk-orange-soft); color: var(--mk-orange); font-size: 1.6rem; }
.mk-enquiry__sent .mk-btn { margin-block-start: .5rem; }

/* ---------------------------------------------------------------- footer tweaks */
.mk-footer .item { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------- landing-page teaser */
.mk-teaser { inline-size: 100%; }
.mk-teaser__card { display: grid; gap: 1.25rem; padding: 2rem; border-radius: var(--mk-radius-lg); background: linear-gradient(135deg, var(--mk-orange-soft), #fff 60%); border: 1px solid #0000000b; box-shadow: var(--mk-shadow); }
.mk-teaser__points { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.mk-teaser__points li { display: flex; align-items: start; gap: .6rem; color: var(--mk-muted); }
.mk-teaser__points i { color: var(--mk-orange); margin-block-start: .25rem; }
.mk-teaser__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 48rem) { .mk-teaser__card { grid-template-columns: 1.2fr 1fr; align-items: center; padding: 2.5rem; } }

/* ---------------------------------------------------------------- Zet AI section (landing page) */
.zt-section { inline-size: 100%; }
.zt-card { position: relative; display: grid; gap: 1.5rem; padding: 2rem; border-radius: 28px; background: linear-gradient(135deg, #303C6F 0%, #3d4e7c 60%, #4b5aa3 100%); color: #fff; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(48, 60, 111, .7); }
.zt-card::before { content: ""; position: absolute; inset: -40% -20% auto auto; inline-size: 26rem; block-size: 26rem; border-radius: 999px; background: radial-gradient(circle, rgba(235, 91, 43, .45), transparent 65%); pointer-events: none; }
.zt-card__text { position: relative; display: grid; gap: .9rem; }
.zt-card__kicker { display: inline-flex; align-items: center; gap: .45rem; inline-size: fit-content; padding: .35rem .85rem; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.zt-card__kicker i { color: #ffb38a; }
.zt-card__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 800; line-height: 1.12; margin: 0; letter-spacing: -.01em; }
.zt-card__sub { margin: 0; font-size: 1.05rem; color: rgba(255, 255, 255, .85); max-inline-size: 40rem; }
.zt-points { display: grid; gap: .75rem; list-style: none; padding: 0; margin: .25rem 0 0; }
.zt-points li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.zt-points i { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #ffb38a; }
.zt-points strong { display: block; font-weight: 700; }
.zt-points span { color: rgba(255, 255, 255, .8); font-size: .92rem; }
.zt-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: .5rem; }
.zt-card__actions .zt-btn-light { background: #fff; color: var(--mk-navy); border-radius: 10px; font-weight: 700; padding: .7rem 1.4rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.zt-card__actions .zt-btn-light:hover { background: var(--mk-orange-soft); color: var(--mk-orange); }
.zt-card__actions .zt-btn-outline { border: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 10px; font-weight: 600; padding: .7rem 1.4rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.zt-card__actions .zt-btn-outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.zt-mascot-wrap { position: relative; display: grid; place-items: center; }
.zt-mascot { display: block; inline-size: min(100%, 14rem); block-size: auto; filter: drop-shadow(0 18px 26px rgba(10, 14, 34, .45)); }
/* The character renders are near-black, so on the navy panels lift the silhouette with a
   soft rim glow instead of a drop shadow that would just sink into the background. */
.zt-card .zt-mascot { filter: drop-shadow(0 0 26px rgba(255, 255, 255, .22)) drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); }
.zt-bubble { position: absolute; inset-inline-end: 0; inset-block-start: 0; max-inline-size: 13rem; padding: .7rem .9rem; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--mk-navy); font-size: .85rem; font-weight: 600; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); animation: zt-pop 6s ease-in-out infinite; }
.zt-bubble::after { content: ""; position: absolute; inset-inline-start: -.4rem; inset-block-end: .6rem; border: .45rem solid transparent; border-inline-end-color: #fff; }
.zt-poweredby { display: inline-flex; align-items: center; gap: .5rem; margin-block-start: .75rem; padding: .4rem .95rem; border-radius: 999px; background: #fff; border: 1px solid var(--mk-line); color: var(--mk-navy); font-weight: 700; font-size: .85rem; box-shadow: var(--mk-shadow); }
.zt-poweredby i { color: var(--mk-orange); }
/* The character's head stands in for the wand icon in the two "Powered by Zet AI" badges. */
.zt-poweredby .zt-mascot-head, .mk-ai-badge .zt-mascot-head { display: block; inline-size: 1.4rem; block-size: auto; flex: none; margin-inline-start: -.2rem; }
.mk-ai-badge .zt-mascot-head { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)); }
@keyframes zt-pop { 0%, 15%, 85%, 100% { opacity: 0; transform: translateY(6px); } 25%, 75% { opacity: 1; transform: translateY(0); } }
@media (min-width: 48rem) { .zt-card { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 2.75rem; } }
@media (prefers-reduced-motion: reduce) { .zt-bubble { animation: none; opacity: 1; } }