/* ==========================================================================
   Mobile bottom nav — liquid glass
   Replaces the existing .mobile-bottom-nav / .mobile-dock-betslip rules.

   Assumed markup (rename selectors below if yours differ):

   <nav class="mobile-bottom-nav">
     <a class="mobile-dock-link" aria-current="page">Sports</a>
     <a class="mobile-dock-link">Lotto</a>
     <button class="mobile-dock-betslip"><svg class="mobile-dock-icon"/><span>Betslip</span></button>
     <a class="mobile-dock-link">Horse Racing</a>
     <a class="mobile-dock-link">Casino</a>
     <span class="mobile-dock-brand"><b>BET</b>INC</span>
   </nav>
   ========================================================================== */

@media (max-width: 820px) {
  .mobile-bottom-nav {
    /* --- tokens ---------------------------------------------------------- */
    --dock-radius: 28px;
    --dock-height: 72px;
    --dock-tint: rgba(14, 34, 62, 0.36);
    --dock-fill: #0b1a30;               /* opaque plate behind the brand tab */
    --dock-text: rgba(226, 234, 246, 0.94);
    --dock-accent: #ffd23f;
    --dock-betslip: 56px;
    --betslip-lift: 0px;                /* raise the centre button, e.g. 8px */

    /* rim: bright where light hits (top-left), fades, catches again low-right */
    --dock-rim: linear-gradient(
      140deg,
      rgba(255, 255, 255, 0.78) 0%,
      rgba(255, 255, 255, 0.16) 28%,
      rgba(255, 255, 255, 0.08) 62%,
      rgba(255, 255, 255, 0.42) 100%
    );

    /* --- placement -------------------------------------------------------- */
    position: fixed;
    right: max(var(--space-3, 12px), env(safe-area-inset-right));
    left: max(var(--space-3, 12px), env(safe-area-inset-left));
    /* extra 8px vs. before so the hanging brand tab clears the screen edge */
    bottom: calc(max(var(--space-2, 8px), env(safe-area-inset-bottom)) + 10px);
    z-index: 25;
    isolation: isolate;
    box-sizing: border-box;

    /* --- layout: side pairs share space equally, centre column is fixed, so
       the betslip sits on the true horizontal centre ---------------------- */
    display: grid;
    grid-template-columns:
      minmax(0, 1fr) minmax(0, 1fr)
      var(--dock-betslip)
      minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--space-1, 4px);
    align-items: center;
    min-height: var(--dock-height);
    padding: 8px var(--space-2, 8px);
    border: 0;                          /* the rim is drawn by ::before */
    border-radius: var(--dock-radius);

    /* --- glass body ------------------------------------------------------- */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 46%),
      radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 55%),
      var(--dock-tint);

    -webkit-backdrop-filter: blur(18px) saturate(180%) brightness(1.08);
    backdrop-filter: blur(18px) saturate(180%) brightness(1.08);

    box-shadow:
      inset 1px 1px 0 rgba(255, 255, 255, 0.34),      /* specular, top-left */
      inset -1px -1px 0 rgba(255, 255, 255, 0.08),    /* bounce, bottom-right */
      inset 0 0 24px rgba(255, 255, 255, 0.06),       /* inner glow */
      0 2px 6px rgba(0, 0, 0, 0.25),
      0 18px 40px rgba(0, 0, 0, 0.35);
  }

  /* Gradient rim (1px ring via mask) */
  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: var(--dock-rim);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box exclude,
      linear-gradient(#000 0 0);
    pointer-events: none;
  }

  /* --- nav items ---------------------------------------------------------- */
  .mobile-dock-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;                   /* comfortable tap target */
    padding: 0 var(--space-1, 4px);
    color: var(--dock-text);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-dock-link[aria-current="page"],
  .mobile-dock-link.is-active {
    color: var(--dock-accent);
    text-shadow:
      0 0 14px rgba(255, 210, 63, 0.55),
      0 1px 2px rgba(0, 0, 0, 0.35);
  }

  /* --- centre betslip: inline with the row, centred on both axes ----------- */
  .mobile-dock-betslip {
    /* reset anything that was pushing it out of line */
    position: relative;
    inset: auto;
    margin: 0;
    transform: translateY(calc(var(--betslip-lift) * -1));

    grid-column: 3;
    place-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: var(--dock-betslip);
    height: var(--dock-betslip);
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--dock-text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;

    /* A bead of glass sitting in the bar: no backdrop-filter here on purpose.
       Nested backdrop-filters only see the parent's own layer, so it would
       blur nothing. Light comes from gradients and inner shadows instead. */
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.06) 42%, rgba(255, 255, 255, 0) 62%),
      linear-gradient(160deg, rgba(58, 96, 148, 0.55), rgba(14, 30, 56, 0.6));
    box-shadow:
      inset 1px 1px 1px rgba(255, 255, 255, 0.6),
      inset -1px -2px 4px rgba(0, 0, 0, 0.3),
      inset 0 0 12px rgba(255, 255, 255, 0.08),
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 8px 16px rgba(0, 0, 0, 0.32);
  }

  /* gradient ring on the bead, same recipe as the bar */
  .mobile-dock-betslip::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: 50%;
    background: var(--dock-rim);
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#000 0 0) content-box exclude,
      linear-gradient(#000 0 0);
    pointer-events: none;
  }

  .mobile-dock-betslip .mobile-dock-icon {
    width: 20px;
    height: 20px;
    flex: none;
  }

  /* --- brand tab: the bar's rim runs down into it -------------------------- */
  .mobile-dock-brand {
    --tab-w: 84px;
    --tab-h: 16px;
    --tab-slant: 10px;
    --tab-shape: polygon(
      0 0,
      100% 0,
      calc(100% - var(--tab-slant)) 100%,
      var(--tab-slant) 100%
    );

    position: absolute;
    left: 50%;
    top: calc(100% - 1px);              /* first row overlaps the bar's rim */
    z-index: 1;
    width: var(--tab-w);
    height: var(--tab-h);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #fff;
    pointer-events: none;

    /* outer shape = rim colour, ::before = plate, so the tab has the same
       1px gradient outline as the bar and the two read as one piece */
    background: var(--dock-rim);
    clip-path: var(--tab-shape);
  }

  .mobile-dock-brand::before {
    content: "";
    position: absolute;
    inset: 0 1px 1px;                   /* top inset 0 = hides the bar rim above */
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%),
      var(--dock-fill);
    clip-path: var(--tab-shape);
  }

  .mobile-dock-brand b,
  .mobile-dock-brand > span:first-child {
    color: var(--dock-accent);
    font-weight: inherit;
  }

  /* --- press + focus -------------------------------------------------------- */
  .mobile-dock-link:focus-visible,
  .mobile-dock-betslip:focus-visible {
    outline: 2px solid var(--dock-accent);
    outline-offset: 2px;
    border-radius: 14px;
  }
  .mobile-dock-betslip:focus-visible { border-radius: 50%; }

  @media (prefers-reduced-motion: no-preference) {
    .mobile-dock-link,
    .mobile-dock-betslip {
      transition: transform 160ms ease, color 160ms ease, text-shadow 160ms ease;
    }
    .mobile-dock-link:active { transform: scale(0.96); }
    .mobile-dock-betslip:active {
      transform: translateY(calc(var(--betslip-lift) * -1)) scale(0.94);
    }
  }

  /* --- fallback when backdrop-filter is unavailable ------------------------- */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-bottom-nav { --dock-tint: rgba(11, 26, 48, 0.92); }
  }
}