/* W2_CHECKOUT_DOCK_V4 — match the SITE footer LENGTH (the long/dark version) in
   BOTH themes. V3 wrongly shrank to the narrow (light) width because it filled
   the padded bubble. Now the pill is pinned to the site's exact width recipe
   min(92vw,520px), centered, in both themes. Glass/height/colours as before. */
@media (max-width: 639.98px) {

  /* wrapper: full-width flex that CENTERS the pill (no side padding that shrinks it) */
  html body .w2-foot .w2-foot-bubble,
  html.w2-dark body .w2-foot .w2-foot-bubble,
  body.w2-footer-compact .w2-foot .w2-foot-bubble {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 0 max(10px, env(safe-area-inset-bottom)) 0 !important;
  }

  /* the glass pill: SITE width (long version), same in both themes */
  html body .w2-foot .w2-foot-actions,
  html.w2-dark body .w2-foot .w2-foot-actions,
  html:not(.w2-dark) body .w2-foot .w2-foot-actions,
  body.w2-footer-compact .w2-foot .w2-foot-actions,
  html.w2-dark body.w2-footer-compact .w2-foot .w2-foot-actions {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
      radial-gradient(140% 86% at 50% -46%, rgba(255,255,255,0.20), transparent 52%) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    -webkit-backdrop-filter: blur(11px) saturate(1.7) brightness(1.05) contrast(1.05) !important;
    backdrop-filter: blur(11px) saturate(1.7) brightness(1.05) contrast(1.05) !important;
    box-shadow:
      0 16px 40px rgba(20,16,8,.12),
      0 3px 10px rgba(20,16,8,.05),
      inset 0 1px 0 rgba(255,255,255,.72),
      inset 0 -8px 16px rgba(201,149,47,.03) !important;
    border-radius: 999px !important;
    overflow: visible !important;
    position: relative !important;
    min-height: 68px !important;
    height: 68px !important;
    padding: 0 20px 0 8px !important;
    /* LENGTH one-to-one with the site footer (long version), both themes */
    width: min(92vw, 520px) !important;
    max-width: 520px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }

  /* top specular "eye" */
  html body .w2-foot .w2-foot-actions::before {
    content: "" !important;
    position: absolute !important; inset: 0 !important;
    border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important;
    opacity: .5 !important;
    background:
      radial-gradient(140% 80% at 50% -44%, rgba(255,255,255,0.30), transparent 44%),
      linear-gradient(to bottom, rgba(255,255,255,0.10), transparent 22%) !important;
  }
  html body .w2-foot .w2-foot-actions > * { position: relative !important; z-index: 1 !important; }

  /* one surface: frameless back + CTA */
  html body .w2-foot .w2-foot-back,
  html.w2-dark body .w2-foot .w2-foot-back { background: transparent !important; border: 0 !important; }
  html body .w2-foot .w2-foot-actions .w2-foot-cta,
  html.w2-dark body .w2-foot .w2-foot-actions .w2-foot-cta { background: none !important; border: 0 !important; box-shadow: none !important; }

  /* theme-adaptive ink */
  html.w2-dark body .w2-foot .w2-foot-back svg { stroke: #ffffff !important; }
  html.w2-dark body .w2-foot .w2-foot-actions .w2-foot-cta { color: #ffffff !important; }
  html.w2-dark body .w2-foot .w2-foot-usd { color: #ffffff !important; }
  html.w2-dark body .w2-foot .w2-foot-gbt { color: #FF8A00 !important; }
  html:not(.w2-dark) body .w2-foot .w2-foot-back svg { stroke: #111111 !important; }
  html:not(.w2-dark) body .w2-foot .w2-foot-actions .w2-foot-cta { color: #111111 !important; }
  html:not(.w2-dark) body .w2-foot .w2-foot-usd { color: #111111 !important; }
  html:not(.w2-dark) body .w2-foot .w2-foot-gbt { color: #FF8A00 !important; }

  /* red count badge */
  html body .w2-foot .w2-foot-cta[data-w2c-count]:not([data-w2c-count="0"])::after {
    background: #e23744 !important; color: #fff !important;
  }
}