/* Sticky footer: when main content is shorter than the viewport, footer sits at
   the bottom with no white gap below (layout-shell used by _Layout.cshtml). */

/* Page chrome background — loaded in AEM + non-AEM (site.css is skipped in AEM mode).
   html + body + main paint #F5F5F7 so margins/gaps between widgets show grey, not default white. */
html {
    height: 100%;
    background-color: #F5F5F7;
    /* AEM clientlib-base sets html { font-size: 14px } which makes every rem-based
       padding/margin/spacing render 14/16 = 87.5% of origin (origin html = 16px).
       Symptom: mobile faq-accordion -32px height, plan-container drift, 100s of
       widgets visually off vs origin (1 root cause across many widget classes).
       Override with !important since layout-shell.css loads BEFORE clientlib-base
       per _Layout.cshtml; clientlib's html rule has same specificity so source
       order wins without !important. */
    font-size: 16px !important;
}

body.layout-body {
    background-color: #F5F5F7;
    /* Match AEM origin's default text color (clientlib-site.css ships
       `body { color: #2B2B2B }`). Bootstrap's reset would otherwise leave
       inherited text at #212529 — visibly blacker than origin on widget
       headings/paragraphs that have no inline color. */
    color: #2B2B2B;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body.layout-body.layout-body--minimal > .layout-main--minimal {
    flex: 1 1 auto;
    width: 100%;
    background-color: #F5F5F7;
}

body.layout-body:not(.layout-body--minimal) .layout-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    background-color: #F5F5F7;
}

body.layout-body:not(.layout-body--minimal) .layout-main {
    flex: 1 1 auto;
    width: 100%;
    background-color: #F5F5F7;
}

/* Bootstrap path: inner container still inherits grey strip behind full-width widgets */
body.layout-body .layout-main .layout-content {
    background-color: #F5F5F7;
}

body.layout-body:not(.layout-body--minimal) .layout-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* AEM CTA button (default variant): origin's clientlib-site.css paints
   `.cta-button-root .btn` with white text on orange bg. SIT inherits
   Bootstrap's `.btn { color: #212529 }`, leaving the CTA text dark on
   orange — visible regression on banner CTAs like "Pay Now" on
   /personal/postpaid-pay-bill banner 2. Force white for the default
   variant only.
   AEM marks non-default variants with EITHER prefix `variant-*` OR
   `ss-*` (sample classes observed on origin pages):
     - variant-orange-outline-transparent-bg
     - ss-orange-outline-transparent-bg
   Both paint their own colors (typically orange text on transparent
   bg) and MUST NOT be overridden — otherwise the white text becomes
   invisible against a white parent background, which regressed the
   pill buttons reported after !40211. */
body.layout-body
    .cta-button-root:not([class*="variant-"]):not([class*="ss-"]) .btn {
    color: #fff;
}

/* Bug ADO #113542 — Mobile menu language selector hidden behind notification.
   .notification-root is position:fixed z-index:10001 (always-on overlay
   covering top 62px). The mobile menu opens INSIDE
   header.layout-header.main-global-header-root which has z-index:10000 and
   creates its own stacking context. Even raising .mobile-overlay.open to a
   higher z-index does not help — the entire header stacking context paints
   at z=10000 of body, so notification (z=10001) still wins for any menu
   content overlapping the top-62px region (e.g. the language selector at
   y=27px).
   Fix: raise the header's own z-index above notification on mobile viewports
   so descendant elements (mobile menu contents) escape the conflict. Header
   geometry doesn't overlap notification (header.top=62, notification 0-62),
   so non-menu pixels are unchanged. Origin (www.u.com.my) renders
   notification as position:static so the conflict is migration-only. */
@media (max-width: 1024px) {
    header.layout-header.main-global-header-root {
        z-index: 10002 !important;
    }
}

/* Bug ADO #113541 — Mobile menu open: page-bg scrolls behind menu, and
   menu's own scroll didn't activate.

   1) Lock html scroll while menu open so touch swipes don't scroll the
      document behind the overlay (origin AEM locks scroll on html, body
      alone is not enough — clientLib base styles keep html overflow-y:scroll).

   2) The header drawer markup is:
        .mobile-overlay (fixed 100vh, overflow:hidden)
        └─ .mobile-menu-container (position:absolute, height:100%, overflow:hidden)
            └─ .mobile-menu-layer (position:absolute, height:100%, flex column)
                ├─ .mobile-header (fixed height)
                └─ .mobile-nav-list (flex:1, overflow-y:auto) ← intended scroller
      The nav-list has overflow-y:auto but its `flex:1` doesn't actually
      become scrollable because flex items default to `min-height:auto` —
      that lets the item grow with content, defeating overflow:auto. Force
      min-height:0 on the flex scrollers so overflow-y:auto activates. Also
      enable iOS momentum touch scrolling. */
@media (max-width: 1024px) {
    html:has(.mobile-overlay.open) {
        overflow: hidden !important;
    }
    /* Mirror origin's mobile drawer pattern (header-side-menu Vue widget):
         Parent slide: `overflow-hidden flex flex-col h-screen`
         Scroller:     `h-full flex-grow overflow-y-auto flex flex-col`
       SIT's .mobile-menu-layer is position:absolute + height:100% + flex
       column, but lacks `overflow:hidden`, so child flex items don't get
       a clipping bound — flex:1 + overflow-y:auto on nav-list silently
       falls back to "grow with content" (no scroll). Force the layer to
       clip + nav-list to take 100% height of layer so overflow-y:auto
       activates. Use 100svh (small viewport) to play nice with iOS URL bar. */
    .mobile-overlay.open .mobile-menu-layer {
        height: 100svh;
        overflow: hidden;
    }
    .mobile-overlay.open .mobile-nav-list,
    .mobile-overlay.open .mobile-sub-content {
        height: 100%;
        min-height: 0;
        flex-grow: 1;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        /* Tell iOS Safari this element handles vertical touch — without
           explicit touch-action, body+html overflow:hidden can swallow the
           touch stream before it reaches this scroller. */
        touch-action: pan-y;
        /* Prevent scroll chaining: when scroller hits its top/bottom edge,
           don't bubble the gesture to the (locked) document. */
        overscroll-behavior: contain;
    }
}

/* Bug ADO #113541 — BTT alignment must match origin (flush-right).
   Earlier attempt added padding-right:96px to dodge the Genesys chat
   launcher overlap on mobile — but visually BTT ended up floating in the
   middle, not matching origin's flush-right placement. User priority:
   match origin first; Genesys/BTT overlap is acceptable (chat covers BTT
   only when user is scrolled near footer AND has chat opened — rare
   transient state). No override on padding here — BTT inherits origin's
   justify-content:flex-end + standard gutter (right edge ~x=374 / 390vw). */

/* Bug ADO #113355 — "More FAQs" pill button on /en/ultra5g renders square (6px)
   instead of pill (32px) on migrated pages. AEM clientlib's
   `.btn.rounded { border-radius: 32px }` (loaded from
   /content/dam/u-mobile/next-gen-5g/2nd/css/index.css) has higher specificity
   than Bootstrap's `.rounded { border-radius: var(--bs-border-radius) }`, but
   Bootstrap adds `!important` so its 6px wins. Bootstrap is loaded by the CMS
   public site and not by origin (AEM), so origin is unaffected.
   Restore origin's pill radius with matching !important on the higher-specificity
   selector. */
.btn.rounded {
    border-radius: 32px !important;
}