/**
 * EDU — Native mobile app shell (≤820px)
 * App-like canvas: grouped cards, edge hero, floating tab bar, touch scroll strips.
 * Covers phones, large phones, and small tablets in portrait.
 */

@media (max-width: 820px) {
  :root {
    --native-bg: #f2f2f7;
    --native-card: #ffffff;
    --native-ink: #0b1426;
    --native-muted: #64748b;
    --native-accent: #f97316;
    --native-line: rgba(11, 20, 38, 0.08);
    --native-gutter: clamp(16px, 4.5vw, 24px);
    --native-gap: clamp(10px, 1.8vw, 14px);
    --native-card-w: clamp(148px, 34vw, 228px);
    --native-radius: 16px;
    --native-radius-sm: 12px;
    --native-shadow: 0 2px 14px rgba(11, 20, 38, 0.07);
    --native-nav-space: calc(88px + env(safe-area-inset-bottom, 0px));
    --native-touch: 44px;
  }

  html {
    background: var(--native-bg);
    scroll-behavior: smooth;
  }

  html,
  body,
  .edu-web-shell,
  .edu-web-content,
  .edu-home-app {
    background: var(--native-bg) !important;
  }

  html.edu-view-web body.edu-view-web-body,
  body.auth-body {
    background: var(--native-bg) !important;
    padding-bottom: var(--native-nav-space) !important;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }

  /* Footer hidden on mobile — header stays visible (compact bar from web_shell.css) */
  html.edu-view-web .edu-web-footer {
    display: none !important;
  }

  html.edu-view-web .edu-web-shell {
    min-height: 100dvh;
    background: var(--native-bg) !important;
  }

  html.edu-view-web .edu-web-content {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* —— App root —— */
  .edu-app:not(:is(
    .edu-home-app,
    .inst-portal-app,
    .schools-portal-app,
    .edu-page-community--shell,
    .edu-page-cert-verify,
    .edu-packages-app--premium,
    .edu-ambassador-app,
    .company-page-app,
    .company-app,
    .settings-app,
    .crs-acct,
    .student-home-app,
    .student-page-app,
    .parent-home-app,
    .parent-page-app,
    .trainer-home-app,
    .trainer-page-app,
    .child-home-app,
    .child-page-app
  )),
  html.edu-view-web .edu-web-content .edu-app:not(:is(
    .edu-home-app,
    .inst-portal-app,
    .schools-portal-app,
    .edu-page-community--shell,
    .edu-page-cert-verify,
    .edu-packages-app--premium,
    .edu-ambassador-app,
    .company-page-app,
    .company-app,
    .settings-app,
    .crs-acct,
    .student-home-app,
    .student-page-app,
    .parent-home-app,
    .parent-page-app,
    .trainer-home-app,
    .trainer-page-app,
    .child-home-app,
    .child-page-app
  )) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 var(--native-gap) !important;
    background: transparent !important;
  }

  .edu-home-app.edu-app,
  html.edu-view-web .edu-web-content .edu-home-app.edu-app {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: var(--native-gutter) !important;
    padding-bottom: 4px !important;
    padding-inline-start: max(var(--native-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-inline-end: max(var(--native-gutter), env(safe-area-inset-right, 0px)) !important;
    background: transparent !important;
    box-sizing: border-box;
  }

  .inst-portal-app.edu-app,
  html.edu-view-web .edu-web-content .inst-portal-app.edu-app,
  html.edu-view-web .edu-web-content .inst-portal-app,
  .schools-portal-app.edu-app,
  html.edu-view-web .edu-web-content .schools-portal-app,
  .edu-page-community--shell.edu-app,
  html.edu-view-web .edu-web-content .edu-page-community--shell,
  .edu-page-cert-verify.edu-app,
  html.edu-view-web .edu-web-content .edu-page-cert-verify,
  .edu-packages-app--premium.edu-app,
  html.edu-view-web .edu-web-content .edu-packages-app--premium,
  .edu-ambassador-app.edu-app,
  html.edu-view-web .edu-web-content .edu-ambassador-app,
  .edu-app:is(
    .company-page-app,
    .company-app,
    .settings-app,
    .crs-acct,
    .student-home-app,
    .student-page-app,
    .parent-home-app,
    .parent-page-app,
    .trainer-home-app,
    .trainer-page-app,
    .child-home-app,
    .child-page-app
  ),
  html.edu-view-web .edu-web-content .edu-app:is(
    .company-page-app,
    .company-app,
    .settings-app,
    .crs-acct,
    .student-home-app,
    .student-page-app,
    .parent-home-app,
    .parent-page-app,
    .trainer-home-app,
    .trainer-page-app,
    .child-home-app,
    .child-page-app
  ) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: var(--native-nav-space) !important;
    padding-inline-start: max(var(--native-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-inline-end: max(var(--native-gutter), env(safe-area-inset-right, 0px)) !important;
    background: transparent !important;
    box-sizing: border-box;
    overflow-x: clip;
  }

  /* —— Floating lang switch (below compact mobile header) —— */
  .edu-lang-switch {
    position: fixed !important;
    top: max(calc(env(safe-area-inset-top) + 112px), 112px) !important;
    inset-inline-end: max(var(--native-gutter), env(safe-area-inset-right)) !important;
    z-index: 130 !important;
    margin: 0 !important;
    padding: 2px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 999px !important;
    border: 1px solid var(--native-line) !important;
    box-shadow: var(--native-shadow) !important;
  }

  .edu-lang-dropdown__trigger {
    min-height: 36px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* —— Native card shell —— */
  .edu-home-block,
  .edu-home-carousel-section,
  .edu-trainers-section,
  .edu-empty-card,
  .edu-home-app .gx-home-promo,
  .edu-home-app .inst-b2b-banner--home,
  .edu-home-app .edu-mkt-banner,
  .student-hero,
  .edu-card,
  .edu-empty-card,
  .settings-group,
  .notification-list,
  .edu-page-block {
    margin: 0 var(--native-gutter) var(--native-gap) !important;
    padding: 14px var(--native-gutter) !important;
    border-radius: var(--native-radius) !important;
    background: var(--native-card) !important;
    border: 1px solid var(--native-line) !important;
    box-shadow: var(--native-shadow) !important;
  }

  /* —— Section headers (app style) —— */
  .edu-section-head,
  .edu-section-head--start,
  .edu-accreditation-marquee__head,
  .edu-trainers-section .edu-section-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
  }

  .edu-section-head h2,
  .edu-accreditation-marquee__head h2,
  .edu-trainers-section .edu-section-head h2 {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    color: var(--native-ink) !important;
    letter-spacing: -0.01em;
  }

  .edu-section-head a,
  .edu-section-head .edu-link-more {
    flex-shrink: 0;
    font-size: 11px !important;
    font-weight: 800 !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    background: #eef2ff !important;
    color: var(--native-ink) !important;
    text-decoration: none !important;
    border: 1px solid rgba(11, 20, 38, 0.06) !important;
  }

  /* —— Hero: edge-to-edge app banner —— */
  .edu-home-app .edu-home-hero--corp,
  .edu-home-app .edu-mkt-banner {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    --ov-min-h: min(46vw, 210px) !important;
  }

  .edu-home-app .edu-home-hero__viewport,
  .edu-home-app .edu-home-hero__panel-inner {
    min-height: min(46vw, 210px) !important;
  }

  .edu-home-app .edu-home-hero__panel-inner {
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding: 12px var(--native-gutter) 40px !important;
  }

  .edu-home-app .edu-home-hero__title {
    font-size: clamp(18px, 4.6vw, 22px) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  .edu-home-app .edu-home-hero__lead {
    font-size: 11px !important;
    line-height: 1.5 !important;
    opacity: 0.92;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .edu-home-app .edu-home-hero__actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100%;
  }

  .edu-home-app .edu-home-hero__btn {
    min-height: var(--native-touch) !important;
    border-radius: var(--native-radius-sm) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .edu-home-app .edu-home-hero__btn--primary {
    flex: 1 1 100% !important;
  }

  .edu-home-app .edu-home-hero__btn--outline {
    flex: 1 1 calc(50% - 4px) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(4px);
  }

  .edu-home-hero--corp .edu-home-hero__visual-fallback,
  .edu-home-hero--corp .edu-home-hero__visual-ring,
  .edu-home-hero--corp .edu-home-hero__visual-icon {
    display: none !important;
  }

  .edu-home-app .edu-home-hero__panel:not(.is-active) {
    display: none !important;
  }

  .edu-home-app .edu-home-hero__dots {
    bottom: 10px;
  }

  /* —— Stats: floating pill card —— */
  .edu-home-app .edu-trust-stats--corp {
    margin: -16px var(--native-gutter) var(--native-gap) !important;
    padding: 10px 8px !important;
    border-radius: var(--native-radius) !important;
    background: var(--native-card) !important;
    border: 1px solid var(--native-line) !important;
    box-shadow: 0 10px 28px rgba(11, 20, 38, 0.1) !important;
    position: relative;
    z-index: 2;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    max-width: none !important;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stat {
    min-height: auto !important;
    padding: 6px 2px !important;
    gap: 4px !important;
    background: #f8fafc !important;
    border-radius: var(--native-radius-sm) !important;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stat__icon .edu-app-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 10px !important;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stat__value {
    font-size: 14px !important;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stat__label {
    font-size: 9px !important;
    line-height: 1.2 !important;
    color: var(--native-muted) !important;
  }

  /* —— Home: in-page search + categories —— */
  .edu-home-app > .edu-home-mobile-search {
    display: block !important;
    order: 0;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .edu-home-app > .edu-home-mobile-search .edu-home-mobile-search__form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Home — no floating lang switch (header area stays clean) */
  html.edu-view-web body:has([data-home-app]) > .edu-lang-switch,
  html.edu-view-web body:has([data-inst-portal-app]) > .edu-lang-switch,
  html.edu-view-web body:has([data-schools-portal-app]) > .edu-lang-switch,
  html.edu-view-web body:has([data-community-app]) > .edu-lang-switch,
  html.edu-view-web body:has(.edu-page-community--shell) > .edu-lang-switch,
  html.edu-view-web body:has([data-cert-verify-app]) > .edu-lang-switch,
  html.edu-view-web body:has([data-packages-app]) > .edu-lang-switch,
  html.edu-view-web body:has([data-ambassador-app]) > .edu-lang-switch,
  html.edu-view-web body:has([data-account-app]) > .edu-lang-switch,
  html.edu-view-web body:has(.company-page-app) > .edu-lang-switch,
  html.edu-view-web body:has(.company-app) > .edu-lang-switch,
  html.edu-view-web body:has(.settings-app) > .edu-lang-switch,
  html.edu-view-web body:has(.crs-acct) > .edu-lang-switch,
  html.edu-view-web body:has(.student-home-app) > .edu-lang-switch,
  html.edu-view-web body:has(.student-page-app) > .edu-lang-switch,
  html.edu-view-web body:has(.parent-home-app) > .edu-lang-switch,
  html.edu-view-web body:has(.parent-page-app) > .edu-lang-switch,
  html.edu-view-web body:has(.trainer-home-app) > .edu-lang-switch,
  html.edu-view-web body:has(.trainer-page-app) > .edu-lang-switch,
  html.edu-view-web body:has(.child-home-app) > .edu-lang-switch,
  html.edu-view-web body:has(.child-page-app) > .edu-lang-switch {
    display: none !important;
  }

  .edu-home-app > .edu-home-block--categories-top {
    order: 1;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 var(--native-gap) !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
  }

  .edu-home-app > .edu-home-block--categories-top .edu-section-head {
    display: none !important;
  }

  .edu-home-app > .edu-accreditation-marquee {
    order: 2;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-inline: calc(50% - 50vw) !important;
    margin-block: 0 !important;
    padding: 6px 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    direction: ltr !important;
  }

  .edu-home-app > .edu-accreditation-marquee .edu-accreditation-marquee__head,
  .edu-home-app > .edu-accreditation-marquee .marquee-fade {
    display: none !important;
  }

  .edu-home-app > .edu-home-hero--corp {
    order: 3;
  }

  .edu-home-app > .edu-course-marquee,
  .edu-home-app > .edu-home-carousel-section {
    order: 4;
  }

  .edu-home-app > .edu-programs-marquee {
    order: 5;
  }

  .edu-home-app > .edu-trust-stats--corp,
  .edu-home-app > .edu-mkt-banner,
  .edu-home-app > .gx-home-promo,
  .edu-home-app > .edu-home-carousel-section,
  .edu-home-app > .edu-trainers-section,
  .edu-home-app > .edu-admin-home-strip,
  .edu-home-app > .edu-empty-card:not(.edu-home-block) {
    display: none !important;
  }

  .edu-home-app {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--native-gap) !important;
  }

  .edu-home-app > .edu-course-marquee,
  .edu-home-app > .edu-programs-marquee {
    margin: 0 !important;
    padding: 12px 0 8px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  .edu-home-app > .edu-course-marquee .edu-section-head,
  .edu-home-app > .edu-programs-marquee .edu-section-head {
    padding-inline: 0 !important;
  }

  .edu-home-app > .edu-programs-marquee .edu-section-sub {
    display: none !important;
  }

  /* —— Horizontal strips — auto marquee (categories, partners, courses, programs) —— */
  .edu-home-app .edu-category-marquee {
    touch-action: manipulation;
  }

  .edu-home-app .edu-course-carousel,
  .edu-home-app .courses-marquee-track,
  .edu-home-app .edu-trainer-marquee__track,
  .edu-home-app .programs-marquee-track,
  .edu-home-app > .edu-home-block--categories-top .marquee-track,
  html.edu-view-web .edu-web-content .edu-course-marquee__track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    gap: clamp(10px, 2vw, 14px) !important;
    padding-bottom: 4px !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    animation: eduMarquee 38s linear infinite !important;
    scroll-snap-type: none !important;
    will-change: transform;
  }

  .edu-home-app .edu-accreditation-marquee .accreditation-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    animation: eduAccreditationMarquee 28s linear infinite !important;
    scroll-snap-type: none !important;
    will-change: transform;
  }

  .edu-home-app > .edu-home-block--categories-top .marquee-track {
    animation: eduHomeCategoryMarquee 28s linear infinite !important;
  }

  .edu-home-app .programs-marquee-track {
    animation-duration: 40s !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .edu-home-app .edu-category-marquee:hover .marquee-track,
    .edu-home-app .edu-accreditation-marquee:hover .accreditation-track,
    .edu-home-app .edu-course-marquee:hover .courses-marquee-track,
    .edu-home-app .edu-programs-marquee:hover .programs-marquee-track {
      animation-play-state: paused !important;
    }
  }

  .edu-home-app .edu-course-carousel::-webkit-scrollbar,
  .edu-home-app .courses-marquee-track::-webkit-scrollbar,
  .edu-home-app .edu-trainer-marquee__track::-webkit-scrollbar,
  .edu-home-app .programs-marquee-track::-webkit-scrollbar {
    display: none;
  }

  .edu-home-app .edu-trainer-marquee__fade {
    display: none !important;
  }

  .edu-home-app .edu-course-carousel > *,
  .edu-home-app .courses-marquee-track > .pro-course-mini-wrap,
  .edu-home-app .courses-marquee-track > .edu-shop-wrap,
  html.edu-view-web .edu-web-content .edu-course-marquee__track > * {
    flex: 0 0 var(--native-card-w) !important;
    min-width: var(--native-card-w) !important;
    max-width: var(--native-card-w) !important;
    scroll-snap-align: unset;
  }

  .edu-home-app .edu-trainer-card-v2 {
    flex: 0 0 clamp(128px, 30vw, 168px) !important;
    min-width: clamp(128px, 30vw, 168px) !important;
    scroll-snap-align: start;
    animation: none !important;
  }

  .edu-home-app .pro-program-mini,
  .edu-home-app > .edu-programs-marquee .pro-program-mini {
    flex: 0 0 var(--native-card-w) !important;
    min-width: var(--native-card-w) !important;
    max-width: var(--native-card-w) !important;
    scroll-snap-align: unset;
  }

  .edu-home-app .courses-marquee-track > .pro-course-mini-wrap,
  .edu-home-app > .edu-course-marquee .courses-marquee-track > .pro-course-mini-wrap {
    flex: 0 0 var(--native-card-w) !important;
    min-width: var(--native-card-w) !important;
    max-width: var(--native-card-w) !important;
    scroll-snap-align: unset;
  }

  .edu-home-app > .edu-home-block--categories-top .marquee-category-pill {
    flex: 0 0 auto;
    scroll-snap-align: unset;
    min-width: clamp(120px, 32vw, 148px);
  }

  .edu-home-app > .edu-accreditation-marquee .accreditation-logo-pill {
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 96px;
    height: 48px;
    padding: 6px 12px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    scroll-snap-align: unset;
  }

  .edu-home-app > .edu-home-hero--corp .edu-home-hero__actions {
    display: none !important;
  }

  .pro-program-mini-cover img,
  .pro-program-mini img {
    height: clamp(88px, 22vw, 112px) !important;
  }

  /* —— Promo banners inside cards —— */
  .edu-home-app .edu-mkt-banner__inner {
    min-height: 140px !important;
    padding: 14px var(--native-gutter) !important;
  }

  .edu-home-app .edu-mkt-banner__title {
    font-size: 17px !important;
  }

  .edu-home-app .edu-mkt-banner__cta {
    min-height: var(--native-touch);
    border-radius: var(--native-radius-sm);
    font-size: 13px;
    font-weight: 800;
  }

  /* —— Top bar / page headers —— */
  .edu-topbar {
    margin: 0 var(--native-gutter) var(--native-gap) !important;
    padding: 8px 12px !important;
    border-radius: var(--native-radius) !important;
    background: var(--native-card) !important;
    border: 1px solid var(--native-line) !important;
    box-shadow: var(--native-shadow) !important;
  }

  .edu-topbar__title,
  .edu-topbar h1 {
    font-size: 17px !important;
    font-weight: 900 !important;
  }

  /* —— Lists (settings, notifications) —— */
  .settings-list,
  .notification-list {
    margin: 0 var(--native-gutter) var(--native-gap) !important;
    border-radius: var(--native-radius) !important;
    overflow: hidden;
    background: var(--native-card) !important;
    border: 1px solid var(--native-line) !important;
    box-shadow: var(--native-shadow) !important;
  }

  .settings-list a,
  .settings-list button,
  .notification-list a,
  .notification-item {
    min-height: var(--native-touch) !important;
    padding: 12px 14px !important;
  }

  /* —— Inputs & buttons —— */
  .edu-input,
  .edu-control,
  .auth-control {
    min-height: var(--native-touch) !important;
    border-radius: var(--native-radius-sm) !important;
    font-size: 15px !important;
  }

  .edu-btn,
  .edu-btn-primary,
  button.edu-btn {
    min-height: var(--native-touch) !important;
    border-radius: var(--native-radius-sm) !important;
    font-weight: 800 !important;
  }

  /* —— Bottom tab bar (native iOS/Material) —— */
  .edu-bottom-nav {
    position: fixed !important;
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    transform: none !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
    min-height: 64px !important;
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow:
      0 12px 40px rgba(11, 20, 38, 0.14),
      0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    z-index: 10000 !important;
  }

  .edu-bottom-nav a {
    min-height: 48px !important;
    border-radius: 14px !important;
    gap: 3px !important;
  }

  .edu-bottom-nav a b {
    font-size: 9px !important;
    font-weight: 800 !important;
  }

  .edu-bottom-nav a.is-featured {
    margin-top: -12px !important;
  }

  .edu-bottom-nav a.is-featured .edu-nav-icon {
    width: 46px !important;
    height: 46px !important;
    box-shadow: 0 6px 18px rgba(11, 20, 38, 0.22) !important;
  }

  /* Hide desktop-only chrome on all mobile widths */
  .edu-shop-fab-bar,
  .edu-web-header__search-band {
    display: none !important;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  :root {
    --native-gutter: 14px;
    --native-gap: 8px;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stats__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  .edu-home-app .edu-trust-stats--corp .edu-trust-stat__label {
    font-size: 8px !important;
  }
}

/* Desktop: hide floating lang switch (shown in web header) */
@media (min-width: 821px) {
  html.edu-view-web > body > .edu-lang-switch {
    display: none !important;
  }
}

@media (max-width: 820px) {
  html.edu-view-web .edu-web-header .edu-lang-switch {
    display: none !important;
  }

  /* —— Auth pages —— */
  body.auth-body.auth-bakkah-body {
    overflow-x: hidden !important;
    padding-bottom: var(--native-nav-space) !important;
  }

  .auth-bakkah,
  html[dir="rtl"] .auth-bakkah,
  html[dir="ltr"] .auth-bakkah,
  html[dir="rtl"] .auth-bakkah--register,
  html[dir="ltr"] .auth-bakkah--register {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 100dvh;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .auth-bakkah__visual,
  .auth-bakkah--register .auth-bakkah__visual,
  .auth-bakkah:not(.auth-bakkah--register):not(.auth-bakkah--solo) .auth-bakkah__visual {
    display: none !important;
  }

  .auth-bakkah__form-side,
  html[dir="rtl"] .auth-bakkah__form-side,
  html[dir="ltr"] .auth-bakkah__form-side,
  .auth-bakkah--register .auth-bakkah__form-side,
  .auth-bakkah--solo .auth-bakkah__form-side,
  .auth-bakkah--forgot .auth-bakkah__form-side {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-block-start: max(10px, env(safe-area-inset-top)) !important;
    padding-block-end: max(calc(var(--native-nav-space) + 8px), env(safe-area-inset-bottom, 0px)) !important;
    padding-inline-start: max(var(--native-gutter), env(safe-area-inset-left, 0px)) !important;
    padding-inline-end: max(var(--native-gutter), env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  .auth-bakkah__form-inner,
  .auth-bakkah__form-inner--wide {
    width: 100% !important;
    max-width: min(420px, 100%) !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  .auth-bakkah__topbar {
    width: 100%;
  }

  .auth-form-grid--basic,
  .auth-form-grid--contact,
  .auth-form-grid--trainer-profile,
  .auth-form-grid--trainer-files,
  .auth-form-grid--wizard,
  .auth-form-block--security .auth-form-grid {
    grid-template-columns: 1fr !important;
  }

  .auth-control,
  .auth-country-picker__trigger {
    height: 48px;
    min-height: 48px;
    font-size: 14px;
    border-radius: 12px;
  }

  .auth-phone-prefix__trigger {
    min-height: 48px;
    height: 48px;
    padding: 0 8px 0 10px;
    font-size: 12px;
  }

  .auth-phone-input {
    height: 48px;
    font-size: 14px;
  }

  .auth-bakkah__submit {
    min-height: 50px;
    font-size: 15px;
  }

  .auth-picker-panel--portaled {
    max-height: min(58vh, 500px) !important;
    z-index: 10050 !important;
  }

  .auth-picker-panel--portaled .auth-country-picker__list,
  .auth-picker-panel--portaled .auth-phone-prefix__list {
    max-height: calc(min(58vh, 500px) - 68px);
  }
}

@media (max-width: 820px) and (max-height: 940px) {
  .auth-bakkah--register .auth-bakkah__form-side {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

/* Large phones / small tablets — wider cards & hero */
@media (max-width: 820px) and (min-width: 601px) {
  :root {
    --native-card-w: clamp(200px, 26vw, 228px);
  }

  .edu-home-app .edu-home-hero--corp,
  .edu-home-app .edu-mkt-banner {
    --ov-min-h: clamp(180px, 28vw, 240px) !important;
  }

  .edu-home-app .edu-home-hero__viewport,
  .edu-home-app .edu-home-hero__panel-inner {
    min-height: clamp(180px, 28vw, 240px) !important;
  }

  .edu-bottom-nav {
    width: min(640px, calc(100% - 24px)) !important;
  }
}