.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #111; color: #fff;
  box-shadow: 0 -10px 30px rgba(0,0,0,.2);
}
.cookie-banner__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 20px 24px;
}
.cookie-banner__text { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); max-width: 640px; margin: 0; }
.cookie-banner__text a { color: #C9A96E; text-decoration: underline; margin-left: 4px; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn { padding: 10px 18px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.cookie-btn-outline { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.cookie-btn-outline:hover { border-color: #fff; }
.cookie-btn-gold { background: #C9A96E; color: #111; }
.cookie-btn-gold:hover { background: #d8bc85; }

.cookie-banner__customize {
  max-width: 1200px; margin: 0 auto; padding: 0 24px 20px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px;
}
.cookie-toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(255,255,255,.85); }
.cookie-toggle span { font-size: 10.5px; color: rgba(255,255,255,.4); }

@media (max-width: 640px) {
  /* Confirmed in the supplied mobile recording: once "Customise" is
     tapped, the banner + customize panel together grew tall enough
     to cover most of the viewport (including the page's own primary
     action, e.g. Passport's Verify button). Cap the whole banner's
     height and let it scroll internally instead, so it always stays
     a compact sheet rather than a second full page. */
  .cookie-banner {
    max-height: 70vh;
    overflow-y: auto;
    border-radius: 16px 16px 0 0;
  }
  .cookie-banner__inner { flex-direction: column; align-items: flex-start; padding: 16px 18px; gap: 14px; }
  .cookie-banner__text { font-size: 12.5px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; padding: 11px 14px; }

  .cookie-banner__customize {
    padding: 14px 18px 18px;
    gap: 12px;
  }
  .cookie-toggle { width: 100%; justify-content: space-between; }
}

/* The portal bottom nav (account/corporate/partner) is also fixed to
   bottom:0 below 1024px — without this, the cookie banner (z-index
   9999) renders on top of it, hiding primary navigation on first
   visit. Push the banner up to sit above the nav bar instead. */
@media (max-width: 1024px) {
  body:has(.portal-bottom-nav) .cookie-banner {
    bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }
}