/* ==========================================================================
   GIG — Mobile App Experience (phone-only, < 768px by default)
   ==========================================================================
   Everything in this file is scoped to `body.gig-has-mobile-app` (added
   only when Gig Settings -> Mobile App Experience -> "Enable Mobile App
   Layout" is on) and to a max-width media query, so it can never affect
   tablet or desktop rendering, and disabling the feature removes every
   visual effect instantly even though this stylesheet is still loaded.

   Breakpoint: the show/hide + spacing rules below assume the default
   768px. A site owner who changes "Mobile Breakpoint" in Gig Settings
   gets an override for exactly those rules from
   inc/dynamic-css.php::gig_build_mobile_app_css() — everything else in
   this file (colors, sizes, animations) is breakpoint-independent and
   needs no override.
   ========================================================================== */

:root{
  --gig-m-bar-h: 56px;
  --gig-m-bottomnav-h: 64px;
}

/* Hidden by default (desktop/tablet); shown only inside the max-width
   query below. Kept OUTSIDE any media query so the elements never cause
   a layout flash while CSS is still parsing. */
.gig-mobile-header,
.gig-mobile-drawer,
.gig-mobile-drawer__overlay,
.gig-mobile-bottomnav,
.gig-mobile-footer,
.gig-mobile-search{
  display: none;
}
.gig-install-banner{ display: none; }
.gig-mobile-filters-toggle{ display: none; }
.gig-mobile-listing-bar{ display: none; }
.gig-install-diagnostics{ display: none; }

/* v1.9.12 — the `hidden` attribute must always win.
   The install banner ships with `hidden` and the script clears it only
   when the card should actually appear, but the phone media query set
   `display:flex` unconditionally, which overrides the browser's own
   `[hidden] { display: none }`. The result on every default-breakpoint
   site: a fully laid-out card sitting over the bottom of the screen at
   `opacity: 0` from the moment the page loaded — invisible, but still
   swallowing taps in that strip just above the bottom navigation.
   (Only sites that had changed their Mobile Breakpoint escaped it, by
   accident: the override emitted from inc/dynamic-css.php includes this
   rule.) The attribute selector's higher specificity settles it here for
   every site, at every breakpoint, regardless of rule order. */
.gig-install-banner[hidden],
.gig-install-diagnostics[hidden]{ display: none !important; }

@media (max-width: 767px){

  body.gig-has-mobile-app header.gig-header,
  body.gig-has-mobile-app footer.gig-footer{
    display: none !important;
  }

  /* Room for the fixed bottom nav so it never covers page content. */
  body.gig-has-mobile-app{
    padding-bottom: calc(var(--gig-m-bottomnav-h) + env(safe-area-inset-bottom));
  }
  body.gig-has-mobile-app.gig-drawer-open,
  body.gig-has-mobile-app.gig-filters-open{
    overflow: hidden;
  }

  /* -----------------------------------------------------------------
     Sticky compact header
     ----------------------------------------------------------------- */
  .gig-mobile-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: var(--gig-m-bar-h);
    padding: 0 8px 0 4px;
    background: var(--gig-navy);
    color: var(--gig-white);
    position: sticky;
    top: 0;
    z-index: 600;
    box-shadow: 0 2px 10px rgba(20,33,61,.12);
  }
  /* Sits below any WordPress admin bar instead of under it. */
  body.admin-bar .gig-mobile-header{ top: 32px; }
  @media screen and (max-width: 782px){
    body.admin-bar .gig-mobile-header{ top: 46px; }
  }

  .gig-mobile-header__burger,
  .gig-mobile-header__post{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 auto;
    background: transparent; border: 0; color: var(--gig-white); border-radius: 50%;
    transition: background .15s ease;
  }
  .gig-mobile-header__burger:active,
  .gig-mobile-header__post:active{ background: rgba(255,255,255,.12); }
  .gig-mobile-header__post{ background: var(--gig-amber); color: var(--gig-navy); }

  .gig-mobile-header__logo{
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--gig-white);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .gig-mobile-header__logo img{ max-height: 28px; width: auto; }

  /* -----------------------------------------------------------------
     Slide-out drawer
     ----------------------------------------------------------------- */
  .gig-mobile-drawer__overlay{
    position: fixed; inset: 0; background: rgba(12,17,30,.55);
    z-index: 690; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .gig-mobile-drawer__overlay.is-open{ opacity: 1; pointer-events: auto; }

  .gig-mobile-drawer{
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(85vw, 340px);
    background: var(--gig-navy); color: var(--gig-white);
    z-index: 700;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 8px 0 24px rgba(0,0,0,.2);
  }
  html[dir="rtl"] .gig-mobile-drawer{ left: auto; right: 0; transform: translateX(100%); }
  .gig-mobile-drawer.is-open{ transform: translateX(0); }

  .gig-mobile-drawer__head{
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px; border-bottom: 1px solid rgba(255,255,255,.12);
    flex: 0 0 auto;
  }
  .gig-mobile-drawer__brand{ font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--gig-white); }
  .gig-mobile-drawer__close{ background: none; border: 0; color: var(--gig-white); width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; border-radius: 50%; }
  .gig-mobile-drawer__close:active{ background: rgba(255,255,255,.12); }

  .gig-mobile-drawer__body{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px 28px; }

  .gig-mobile-drawer__cta{ width: 100%; justify-content: center; margin-bottom: 14px; }

  .gig-mobile-drawer__search{
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--gig-radius-sm); padding: 10px 12px; margin-bottom: 16px;
  }
  .gig-mobile-drawer__search svg{ flex: 0 0 auto; opacity: .8; }
  .gig-mobile-drawer__search input{
    flex: 1 1 auto; min-width: 0; background: none; border: 0; color: var(--gig-white); font-size: 14.5px;
  }
  .gig-mobile-drawer__search input::placeholder{ color: rgba(255,255,255,.6); }

  .gig-drawer__links{ display: flex; flex-direction: column; margin-bottom: 6px; }
  .gig-drawer__links a{
    display: flex; align-items: center; gap: 12px; padding: 11px 4px;
    color: var(--gig-white); font-weight: 600; font-size: 14.5px;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .gig-drawer__links a svg{ flex: 0 0 auto; opacity: .85; }

  .gig-drawer__section{ margin-top: 18px; }
  .gig-drawer__section h5{
    color: rgba(255,255,255,.55); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
    margin: 0 0 8px; padding: 0 4px; font-family: var(--font-body); font-weight: 700;
  }

  .gig-drawer__cats{ display: flex; flex-direction: column; }
  .gig-drawer__cat{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .gig-drawer__cat-row{ display: flex; align-items: center; }
  .gig-drawer__cat-row a{
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 11px 4px; color: var(--gig-white); font-weight: 600; font-size: 14.5px;
    overflow-wrap: anywhere;
  }
  .gig-drawer__cat-toggle{
    flex: 0 0 auto; background: none; border: 0; color: rgba(255,255,255,.7);
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease;
  }
  .gig-drawer__cat.is-open > .gig-drawer__cat-row .gig-drawer__cat-toggle{ transform: rotate(90deg); }
  .gig-drawer__subcats{
    display: none; flex-direction: column; padding-left: 14px; margin-bottom: 6px;
  }
  html[dir="rtl"] .gig-drawer__subcats{ padding-left: 0; padding-right: 14px; }
  .gig-drawer__cat.is-open .gig-drawer__subcats{ display: flex; }
  .gig-drawer__subcats a{
    padding: 9px 4px; color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 500;
    display: block; overflow-wrap: anywhere;
  }

  .gig-drawer__lang :is(a,button){ color: var(--gig-white); }

  .gig-drawer__logout{
    display: block; text-align: center; padding: 11px; margin-top: 6px;
    border: 1px solid rgba(255,255,255,.25); border-radius: var(--gig-radius-sm);
    color: var(--gig-white); font-weight: 600; font-size: 14px;
  }

  /* -----------------------------------------------------------------
     Fixed bottom navigation
     ----------------------------------------------------------------- */
  .gig-mobile-bottomnav{
    display: flex; align-items: stretch; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 600;
    height: calc(var(--gig-m-bottomnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--gig-white); border-top: 1px solid var(--gig-line);
    box-shadow: 0 -2px 14px rgba(20,33,61,.08);
  }
  .gig-mobile-bottomnav.is-hidden{ transform: translateY(100%); transition: transform .2s ease; }

  .gig-mobile-bottomnav > a,
  .gig-mobile-bottomnav > button{
    flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; background: none; border: 0; color: var(--gig-slate);
  }
  .gig-mobile-bottomnav > a span,
  .gig-mobile-bottomnav > button span{
    font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .gig-mobile-bottomnav > a.is-active,
  .gig-mobile-bottomnav > a:active,
  .gig-mobile-bottomnav > button:active{ color: var(--gig-navy); }

  .gig-mobile-bottomnav__cta{ position: relative; }
  .gig-mobile-bottomnav__cta-icon{
    width: 40px; height: 40px; margin-top: -22px; border-radius: 50%;
    background: var(--gig-amber); color: var(--gig-navy);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 3px 10px rgba(255,182,39,.45); border: 3px solid var(--gig-white);
  }
  .gig-mobile-bottomnav__cta span:last-child{ color: var(--gig-navy); font-weight: 700; }

  /* -----------------------------------------------------------------
     Compact footer
     ----------------------------------------------------------------- */
  .gig-mobile-footer{
    display: block;
    background: var(--gig-navy); color: rgba(255,255,255,.8);
    padding: 24px 18px calc(24px + var(--gig-m-bottomnav-h));
    text-align: center;
  }
  .gig-mobile-footer__tagline{ margin: 0 0 12px; font-size: 13.5px; }
  .gig-mobile-footer__links{
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-bottom: 12px;
  }
  .gig-mobile-footer__links a,
  .gig-mobile-footer__more{
    background: none; border: 0; color: rgba(255,255,255,.85); font-size: 13px; font-weight: 600;
  }
  .gig-mobile-footer__copy{ margin: 0; font-size: 11.5px; color: rgba(255,255,255,.5); }

  /* -----------------------------------------------------------------
     Install banner
     ----------------------------------------------------------------- */
  /* Visibility only — the card's own styling lives in the wider query
     below, so a site that raises "Mobile Breakpoint" in Gig Settings
     still gets a fully styled card. Previously every banner rule was
     locked to this hard-coded 767px query while the show/hide toggle
     followed the configurable breakpoint, so raising the breakpoint
     produced an unstyled block dumped into the footer. */
  .gig-install-banner{ display: flex; }

  /* Keep the floating back-to-top button clear of the bottom navigation
     and of the install card, instead of overlapping the "More" item. */
  .gig-back-to-top{
    bottom: calc(var(--gig-m-bottomnav-h) + env(safe-area-inset-bottom) + 12px);
    right: 12px; width: 40px; height: 40px; z-index: 590;
  }
  /* Set by the install script while the card is on screen. A sibling
     selector can't do this: the back-to-top button is printed earlier in
     footer.php than the banner. */
  body.gig-install-open .gig-back-to-top{ display: none; }

  /* Admin-only "why isn't it showing" panel — deliberately compact and
     anchored near the TOP of the screen (below the sticky header),
     never near the bottom where the install banner and bottom nav
     live, so the two can never visually overlap or be mistaken for
     one another (they're always shown together when both are on). */
  .gig-install-diagnostics{
    display: block;
    position: fixed; left: 8px;
    top: calc(env(safe-area-inset-top) + var(--gig-m-bar-h) + 8px);
    width: min(320px, calc(100vw - 16px));
    max-height: 220px; overflow-y: auto; -webkit-overflow-scrolling: touch;
    z-index: 10000;
    background: rgba(15, 20, 32, .92); color: #d7ffb0;
    font: 10px/1.35 var(--font-mono), monospace;
    padding: 10px 22px 10px 12px; border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.3);
  }
  .gig-install-diagnostics[hidden]{ display: none; }
  .gig-install-diagnostics strong{ color: #fff; display: block; margin-bottom: 4px; font-size: 11px; }
  .gig-install-diagnostics__close{
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px;
    background: rgba(255,255,255,.12); border: 0; border-radius: 50%;
    color: #fff; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
  }

  /* -----------------------------------------------------------------
     Homepage / listing grid density — v1.8.0.1: two compact cards per
     row (matches the reference layout), not one full-width card.
     ----------------------------------------------------------------- */
  body.gig-has-mobile-app .gig-grid{ grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  body.gig-has-mobile-app .gig-cat-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  body.gig-has-mobile-app .container{ padding: 0 14px !important; }
  body.gig-has-mobile-app .gig-section{ padding: 28px 0 !important; }
  body.gig-has-mobile-app .gig-hero{ padding: 20px 14px 32px !important; }
  /* v1.8.7 — the search card no longer overlaps the hero's own
     headline/subtitle text. It previously used the same large negative
     pull-up (-60px) as desktop's "floating card" effect, but on a
     phone-height hero there isn't enough clearance below the subtitle
     to absorb that before it climbs back up into the text — worse the
     shorter the hero or the more the subtitle wraps. A small, fixed,
     always-positive gap can never overlap anything above it,
     regardless of how many lines the heading/subtitle wrap to. */
  body.gig-has-mobile-app .gig-search{ margin-top: 18px !important; }
  body.gig-has-mobile-app .gig-section__head{ margin-bottom: 16px !important; }

  /* Compact card styling inside the 2-column phone grid. */
  body.gig-has-mobile-app .gig-grid .gig-card__body{ padding: 10px !important; }
  body.gig-has-mobile-app .gig-grid .gig-card__title{
    font-size: 13.5px !important; line-height: 1.3 !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body.gig-has-mobile-app .gig-grid .gig-card__price-tag{ font-size: 13px !important; padding: 4px 8px !important; }
  body.gig-has-mobile-app .gig-grid .gig-card__meta{ font-size: 11px !important; flex-wrap: wrap; gap: 4px 8px !important; }
  body.gig-has-mobile-app .gig-grid .gig-card__email,
  body.gig-has-mobile-app .gig-grid .gig-card__phone{ font-size: 11px !important; }
  body.gig-has-mobile-app .gig-grid .gig-card__footer{ font-size: 11px !important; }

  /* -----------------------------------------------------------------
     Mobile search filters: full-screen/bottom-sheet drawer instead of
     a sidebar squeezed next to the listings.
     ----------------------------------------------------------------- */
  body.gig-has-mobile-app .gig-mobile-filters-toggle{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--gig-white); border: 1px solid var(--gig-line); border-radius: 30px;
    padding: 9px 16px; font-weight: 600; font-size: 13.5px; color: var(--gig-navy);
    margin-bottom: 14px;
  }
  body.gig-has-mobile-app .gig-listing-layout{ display: block; }
  body.gig-has-mobile-app .gig-filters{
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--gig-white); border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    z-index: 700; box-shadow: 0 -6px 24px rgba(0,0,0,.18);
    transform: translateY(100%); transition: transform .25s ease;
  }
  body.gig-has-mobile-app .gig-filters.is-open{ transform: translateY(0); }
  body.gig-has-mobile-app .gig-filters .gig-filters__handle{
    width: 40px; height: 4px; background: var(--gig-line); border-radius: 4px; margin: 0 auto 12px;
  }
  body.gig-has-mobile-app .gig-filters .gig-filters__head{
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
  }
  body.gig-has-mobile-app .gig-filters .gig-filters__close{
    background: none; border: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  }
  body.gig-has-mobile-app .gig-filters .gig-filters__reset{
    display: block; text-align: center; margin-top: 8px; font-size: 13.5px; font-weight: 600; color: var(--gig-slate);
    text-decoration: underline;
  }

  /* -----------------------------------------------------------------
     Listing detail page: sticky contact bar
     ----------------------------------------------------------------- */
  .gig-mobile-listing-bar{
    display: flex; align-items: center; gap: 10px;
    position: sticky; bottom: calc(var(--gig-m-bottomnav-h) + env(safe-area-inset-bottom));
    z-index: 400;
    background: var(--gig-white); border-top: 1px solid var(--gig-line);
    padding: 10px 14px; box-shadow: 0 -2px 10px rgba(20,33,61,.08);
  }
  .gig-mobile-listing-bar__price{ font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--gig-navy); white-space: nowrap; }
  .gig-mobile-listing-bar__call{
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    background: var(--gig-paper-dim); color: var(--gig-navy);
    display: flex; align-items: center; justify-content: center;
  }
  .gig-mobile-listing-bar__cta{ flex: 1 1 auto; justify-content: center; min-width: 0; }
  /* -----------------------------------------------------------------
     Dedicated full-screen Search
     ----------------------------------------------------------------- */
  .gig-mobile-search{
    position: fixed; inset: 0; z-index: 720;
    background: var(--gig-paper);
    transform: translateY(100%); transition: transform .22s ease;
    display: flex; flex-direction: column;
  }
  .gig-mobile-search.is-open{ transform: translateY(0); }

  .gig-mobile-search__bar{
    display: flex; align-items: center; gap: 8px;
    background: var(--gig-navy); padding: 10px 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    flex: 0 0 auto;
  }
  .gig-mobile-search__back{
    background: none; border: 0; color: var(--gig-white);
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  }
  .gig-mobile-search__form{
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: var(--gig-white); border-radius: 30px; padding: 9px 14px;
  }
  .gig-mobile-search__form svg{ flex: 0 0 auto; color: var(--gig-slate); }
  .gig-mobile-search__form input{
    flex: 1 1 auto; min-width: 0; border: 0; background: none; font-size: 15px; color: var(--gig-ink);
  }

  .gig-mobile-search__body{ flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 14px; }
  .gig-mobile-search__body h5{
    margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--gig-slate);
  }
  .gig-mobile-search__chips{ display: flex; flex-wrap: wrap; gap: 8px; }
  .gig-mobile-search__chip{
    background: var(--gig-white); border: 1px solid var(--gig-line); border-radius: 20px;
    padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--gig-navy);
  }

}

/* Overlay used when the mobile filters sheet is open, shared markup
   with the drawer overlay component but its own trigger class. */
@media (max-width: 767px){
  body.gig-filters-open .gig-mobile-drawer__overlay{ display: block; }
}

/* --------------------------------------------------------------------
   Install banner appearance.
   Kept in a query at the MAXIMUM allowed Mobile Breakpoint (1024px)
   rather than the default one, so the card is styled correctly at any
   breakpoint an administrator configures. Whether it is displayed at
   all is decided separately, by the breakpoint-specific display rules
   above and in inc/dynamic-css.php — these properties are simply inert
   while the element is display:none.
   -------------------------------------------------------------------- */
@media (max-width: 1024px){

  /* v1.9.12 — the card is now allowed to wrap instead of forcing every
     element onto one row. The old rule was a single non-wrapping flex
     line, so a long instruction string (the manual-install variants are
     a full sentence, and translations run longer still) pushed the
     button out of the card and over the close control. Wrapping, a
     hard cap on the button's width, and reserved space for the close
     button mean no combination of text and language can overflow. */
  .gig-install-banner{
    /* No `display` here on purpose — that is the breakpoint's job, and
       setting it in this wider query would show the card on tablets. */
    flex-wrap: wrap; align-items: center; gap: 10px;
    position: fixed; left: 10px; right: 10px;
    bottom: calc(var(--gig-m-bottomnav-h) + env(safe-area-inset-bottom) + 10px);
    /* Above the bottom nav (600) and the back-to-top button (900), below
       the drawer/filters (1000+). The previous rule declared z-index
       twice — 650 then 550 — and the second one won, putting the card
       underneath the floating back-to-top button. */
    z-index: 950;
    background: var(--gig-white); border: 1px solid var(--gig-line); border-radius: var(--gig-radius);
    box-shadow: var(--gig-shadow-lg);
    padding: 12px 34px 12px 12px; /* right padding reserves the close button's corner */
    transform: translateY(12px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
  }
  .gig-install-banner.is-visible{ transform: translateY(0); opacity: 1; }
  .gig-install-banner__close{
    position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--gig-slate);
    width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
  }
  .gig-install-banner__icon{ flex: 0 0 auto; }
  .gig-install-banner__icon img{
    width: 44px; height: 44px; border-radius: 11px; display: block;
    /* contain, not cover: the icon is already a square generated PNG,
       and contain guarantees nothing is cropped if a site is still
       serving an older non-square one from cache. */
    object-fit: contain; background: var(--gig-paper-dim);
  }
  .gig-install-banner__body{ flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .gig-install-banner__body[hidden]{ display: none; }
  .gig-install-banner__body strong{
    font-size: 13.5px; line-height: 1.25; color: var(--gig-navy);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .gig-install-banner__body span{
    font-size: 12px; line-height: 1.35; color: var(--gig-slate); overflow-wrap: anywhere;
  }
  .gig-install-banner__glyph{
    display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--gig-navy);
  }

  .gig-install-banner__cta{
    flex: 0 0 auto; padding: 9px 16px; font-size: 13px;
    white-space: nowrap; max-width: 45%;
    overflow: hidden; text-overflow: ellipsis;
  }
  .gig-install-banner__cta[hidden]{ display: none; }
  .gig-install-banner__cta:disabled{ opacity: .7; cursor: default; }

  /* The guidance variants carry no button, so the instructions get the
     card's full width and are free to run to two or three lines. */
  .gig-install-banner[data-variant="ios"] .gig-install-banner__body,
  .gig-install-banner[data-variant="manual"] .gig-install-banner__body{
    flex: 1 1 100%;
  }
  .gig-install-banner[data-variant="ios"] .gig-install-banner__body strong,
  .gig-install-banner[data-variant="manual"] .gig-install-banner__body strong{
    white-space: normal; /* a full "Add {App} to your Home Screen" title may wrap */
  }

  .gig-install-banner__note{
    flex: 1 1 100%; font-size: 11px; font-weight: 600; color: var(--gig-slate);
    background: var(--gig-paper-dim); border-radius: 6px; padding: 6px 8px; text-align: center;
  }
  .gig-install-banner__note[hidden]{ display: none; }
}

/* v1.8.7 — extra compactness on the narrowest phones (≤380px), where
   the install banner's icon + title/description + note badge could
   crowd and wrap awkwardly. A separate top-level media query (rather
   than nesting one @media inside another, which not every mobile
   browser supports) so this works everywhere. Scales everything down
   together rather than letting content wrap unpredictably. */
@media (max-width: 380px){
  .gig-install-banner{ padding: 9px 30px 9px 9px; gap: 8px; }
  .gig-install-banner__icon img{ width: 36px; height: 36px; border-radius: 9px; }
  .gig-install-banner__body{ flex-basis: 120px; }
  .gig-install-banner__body strong{ font-size: 12.5px; }
  .gig-install-banner__body span{ font-size: 11px; }
  .gig-install-banner__cta{ padding: 7px 12px; font-size: 12px; max-width: 42%; }
  .gig-install-banner__note{ font-size: 10px; padding: 4px 6px; }
  .gig-install-banner__close{ width: 24px; height: 24px; top: 4px; right: 4px; }
}

/* ==========================================================================
   v1.8.4 — "Force Show Banner for Testing" (admin-only)
   ==========================================================================
   v1.8.5 correction: Force Show must still respect the mobile-only
   breakpoint — it means "ignore eligibility/delay/dismissal", not
   "ignore the breakpoint and show this everywhere". The gating now
   happens in JS (matchMedia check before ever calling show()), so no
   CSS override is needed or wanted here anymore; keeping one around
   was exactly what let the banner render at desktop widths with none
   of its component sizing (which only exists inside the media query
   above) applied — hence the giant icon/button/full-bleed banner.
   A hard backstop lives right below regardless, independent of any
   JS state, so this can never happen again even if a future change
   reintroduces a similar bug. */
@media (min-width: 768px){
  .gig-install-banner,
  .gig-install-diagnostics,
  .gig-mobile-header,
  .gig-mobile-drawer,
  .gig-mobile-drawer__overlay,
  .gig-mobile-bottomnav,
  .gig-mobile-footer,
  .gig-mobile-search{
    display: none !important;
  }
}