/* Customer app atmosphere: soft ice-blue backdrop, fog, drifting ice particles,
   glass cards with glow, a light sweep on primary actions and soft entrances.
   Presentation only. All motion stops under prefers-reduced-motion. */

/* --- Backdrop on <html>, so nothing has to be stacked behind the page ---- */
/* One continuous backdrop of soft ice-blue light, no image strips: strips left a darker
   band with hard edges between them on phones. Depth and motion come from the fog. */
html:has(> body.customer-app) {
  background:
    radial-gradient(70vmax 45vmax at 88% -12%, #11789a4d, transparent 62%),
    radial-gradient(60vmax 40vmax at -12% 108%, #0c587a4d, transparent 62%),
    radial-gradient(55vmax 38vmax at 110% 88%, #0a4a6633, transparent 60%),
    #010b13;
  background-attachment: fixed;
}
html body.customer-app { background: transparent !important; }
html body.customer-app.area-user .site-main {
  background: linear-gradient(180deg, #010d16d9 0%, #010d16a6 50%, #010d1673 100%) !important;
}
@media (min-width: 992px) {
  html body.customer-app.area-user .site-main { background: linear-gradient(180deg, #010d16eb, #010d16cc) !important; box-shadow: 0 0 0 1px #0f3445, 0 30px 120px #000a; }
  .customer-app .customer-side-nav { background: linear-gradient(180deg, #021420f2, #010c14f2); }
}

/* --- Drifting ice particles (above the backdrop, never catches clicks) --- */
body.customer-app::after, body.auth-page::after {
  content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 24px 36px, #d8fbff, transparent),
    radial-gradient(1px 1px at 130px 84px, #a6f0ff, transparent),
    radial-gradient(2px 2px at 210px 170px, #e6fdff, transparent),
    radial-gradient(1px 1px at 64px 228px, #a6f0ff, transparent),
    radial-gradient(1.4px 1.4px at 268px 42px, #c9f7ff, transparent),
    radial-gradient(1px 1px at 172px 250px, #8fe9ff, transparent);
  background-size: 300px 260px;
  animation: aoc-drift 38s linear infinite;
}
@keyframes aoc-drift { from { background-position: 0 0; } to { background-position: 90px 1040px; } }

/* --- Glass cards --------------------------------------------------------- */
.customer-app :is(.dashboard-wallet-card, .dashboard-home-action, .wallet-page .card, .wallet-features, .profile-menu, .booking-tile, .date-picker) {
  background: linear-gradient(150deg, #0b3043d9 0%, #04192ae6 55%, #021320f0 100%) !important;
  border: 1px solid #1d5068 !important;
  box-shadow: inset 0 1px 0 #8eeaff1f, 0 12px 32px #0007;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.customer-app :is(a.dashboard-wallet-card, a.dashboard-home-action):hover,
.customer-app #comboButtons .product-glass-card:not(.is-blocked):hover {
  transform: translateY(-3px);
  border-color: #33c4df !important;
  box-shadow: inset 0 1px 0 #8eeaff2e, 0 16px 36px #0009, 0 0 26px #30d7f32e;
}
.customer-app #comboButtons .product-glass-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.customer-app #comboButtons .product-glass-card.active { box-shadow: 0 0 0 1px #30d7f355, 0 0 28px #30d7f340 !important; }
.customer-app .dashboard-home-action { overflow: hidden; }
.customer-app .dashboard-home-action::before { content: ''; position: absolute; inset: -40% -20% auto; height: 80%; background: radial-gradient(closest-side, #30d7f322, transparent); pointer-events: none; }
.customer-app .wallet-pkg-chip { transition: border-color .2s, box-shadow .2s, background-color .2s; }
.customer-app .wallet-pkg-chip:hover { border-color: #2aa9c3; box-shadow: 0 0 18px #30d7f322; }

/* --- The coin cube: calm float and glow ---------------------------------- */
.customer-app :is(.dashboard-card-icon--wallet, .wallet-hero-icon) { filter: drop-shadow(0 0 14px #30d7f35c); animation: aoc-float 6s ease-in-out infinite; }
@keyframes aoc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* --- Primary actions: glow and a periodic light sweep -------------------- */
.customer-app :is(.btn-primary, .btn-info, .dashboard-card-cta), body.auth-page .auth-shell__submit { position: relative; overflow: hidden; }
.customer-app :is(.btn-primary, .btn-info, .dashboard-card-cta)::before, body.auth-page .auth-shell__submit::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, #ffffff70 50%, transparent 68%);
  transform: translateX(-130%); animation: aoc-sweep 5.5s ease-in-out infinite;
}
@keyframes aoc-sweep { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* --- Navigation ------------------------------------------------------------ */
.customer-app .dashboard-bottom-nav { background: #010d16b8 !important; -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-top: 1px solid #1a4659; box-shadow: 0 -12px 30px #0007; }
.customer-app .dashboard-bottom-nav__item { position: relative; }
.customer-app .dashboard-bottom-nav__item.is-active::before { content: ''; position: absolute; top: -13px; left: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px; background: #30d7f3; box-shadow: 0 0 10px #30d7f3; }
.customer-app .customer-side-nav__link.is-active { box-shadow: inset 2px 0 0 #30d7f3, 0 0 18px #30d7f31f; }

/* --- Entrances ------------------------------------------------------------- */
.customer-app .dashboard-screen:not([hidden]), .customer-app .wallet-page, .customer-app .customer-profile { animation: aoc-in .45s ease both; }
.customer-app .dashboard-summary > *, .customer-app .dashboard-home-actions > *, .customer-app #comboButtons > * { animation: aoc-in .5s ease both; }
.customer-app .dashboard-home-actions > :nth-child(1) { animation-delay: .08s; }
.customer-app .dashboard-home-actions > :nth-child(2) { animation-delay: .16s; }
.customer-app #comboButtons > :nth-child(2) { animation-delay: .05s; }
.customer-app #comboButtons > :nth-child(3) { animation-delay: .1s; }
.customer-app #comboButtons > :nth-child(n+4) { animation-delay: .15s; }
@keyframes aoc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* --- Brand visuals: slow drift --------------------------------------------- */
.customer-app .dashboard-hero__visual-image img { animation: aoc-kenburns 26s ease-in-out infinite alternate; transform-origin: 50% 40%; }
@keyframes aoc-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.customer-app .dashboard-brand-banner { box-shadow: 0 14px 34px #0008, 0 0 0 1px #1d5068; }
.customer-app .dashboard-brand-banner::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #bff6ff26 50%, transparent 65%); transform: translateX(-120%); animation: aoc-sweep 9s ease-in-out infinite; }

/* === Second pass: light, frost and motion — restrained ================== */
@property --aoc-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Pointer light on glass (JS sets --mx/--my). */
.customer-app :is(.dashboard-wallet-card, .dashboard-home-action, .wallet-page .card, .wallet-features, .profile-menu, .booking-tile, .date-picker) {
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, -400px), #5fe6ff26, transparent 65%),
    linear-gradient(150deg, #0b3043d9 0%, #04192ae6 55%, #021320f0 100%) !important;
}
html .customer-app #comboButtons .product-glass-card {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, -400px), #5fe6ff24, transparent 65%),
    linear-gradient(115deg, #072a3de8, #021824f2) !important;
  transform: var(--tilt, none);
}
.customer-app :is(a.dashboard-home-action):hover { transform: var(--tilt, translateY(-3px)); }
html .customer-app #comboButtons .product-glass-card:not(.is-blocked):hover { transform: var(--tilt, translateY(-3px)); }
.customer-app .wallet-pkg-chip { background-image: radial-gradient(200px circle at var(--mx, 50%) var(--my, -400px), #5fe6ff1f, transparent 65%); }

/* Product photos: soft inner frame and cold rim light. */
.customer-app #comboButtons .product-card-img { box-shadow: 0 0 0 1px #2c6d86, 0 0 18px #30d7f322; }

/* A light running along the edge of the wallet card and the chosen product. */
.customer-app .dashboard-wallet-card { position: relative; isolation: isolate; }
.customer-app .dashboard-wallet-card::after,
html .customer-app #comboButtons .product-glass-card.active::before {
  content: ''; display: block; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--aoc-ang), transparent 0 62%, #30d7f3 74%, #dcfbff 78%, #30d7f3 82%, transparent 94%);
  -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);
  animation: aoc-spin 7s linear infinite;
}
@keyframes aoc-spin { to { --aoc-ang: 360deg; } }

/* Aurora veil drifting across the top. */
body.customer-app::before, body.auth-page::before {
  content: ''; position: fixed; left: -20%; right: -20%; top: -28vh; height: 70vh; z-index: 4; pointer-events: none;
  background: radial-gradient(40% 50% at 30% 50%, #30d7f31f, transparent 70%), radial-gradient(34% 44% at 72% 42%, #4f8dff17, transparent 70%);
  filter: blur(24px); mix-blend-mode: screen; animation: aoc-aurora 18s ease-in-out infinite alternate;
}
@keyframes aoc-aurora { from { transform: translateX(-7%) scaleY(1); } to { transform: translateX(7%) scaleY(1.12); } }

/* Tap ripple (JS) and a breathing glow on the chosen date/time. */
.fx-ripple { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; transform: scale(0);
  background: radial-gradient(circle, #ffffff5c, #30d7f324 55%, transparent 70%); animation: aoc-ripple .6s ease-out forwards; }
@keyframes aoc-ripple { to { transform: scale(1); opacity: 0; } }
.customer-app :is(.wallet-pkg-chip, .time-slot-chip, .date-slot-card, .customer-side-nav__link, .wallet-method-chip) { position: relative; overflow: hidden; }
.customer-app :is(.time-slot-chip.active, .date-slot-card.active) { animation: aoc-breathe 2.6s ease-in-out infinite; }
@keyframes aoc-breathe { 0%, 100% { box-shadow: 0 0 10px #30d7f340; } 50% { box-shadow: 0 0 24px #30d7f388; } }

/* Gloss: a light pass over the mockup product motifs and the coin cube, icy rim on the chosen one. */
.customer-app .reference-product { position: relative; overflow: hidden; }
.customer-app .reference-product::after, .customer-app .dashboard-card-icon--wallet::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #e6fcff4d 50%, transparent 65%);
  transform: translateX(-130%); animation: aoc-sweep 7s ease-in-out infinite;
}
.customer-app .dashboard-card-icon--wallet { position: relative; overflow: hidden; border-radius: 50%; }
.customer-app #comboButtons .product-glass-card.active .product-card-img { box-shadow: 0 0 0 1px #30d7f3, 0 0 22px #30d7f366; }

/* Headline: a faint ice sheen on the customer's name. */
.customer-app .dashboard-hero h1 span { background: linear-gradient(100deg, #f3f8fb 30%, #9befff 50%, #f3f8fb 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aoc-sheen 7s ease-in-out infinite; }
@keyframes aoc-sheen { 0%, 60% { background-position: 100% 0; } 100% { background-position: -150% 0; } }

/* --- Drifting fog (vector noise, rendered at device resolution: never pixelated) ---
   Two layers on the root element, behind all content but above the backdrop image;
   they move by transform only, so the browser rasterises them once. */
html:has(> body.customer-app)::before, html:has(> body.auth-page)::before,
html:has(> body.customer-app)::after, html:has(> body.auth-page)::after {
  content: ''; position: fixed; top: 0; left: 0; z-index: -1; height: 100vh; pointer-events: none;
  background-repeat: repeat; will-change: transform; mix-blend-mode: screen;
}
html:has(> body.customer-app)::before, html:has(> body.auth-page)::before {
  width: calc(100vw + 1600px); opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0018 0.0042' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.85  0 0 0 0 1  0 0 0 2.6 -1.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 1600px 1000px;
  animation: aoc-fog-a 150s linear infinite;
}
html:has(> body.customer-app)::after, html:has(> body.auth-page)::after {
  width: calc(100vw + 1100px); opacity: .34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='700' viewBox='0 0 1100 700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0032 0.0075' numOctaves='5' seed='23' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.52  0 0 0 0 0.85  0 0 0 0 1  0 0 0 2.4 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 1100px 700px; background-position: 0 38vh;
  animation: aoc-fog-b 85s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}
/* Fog video (customer-effects.js): full-screen, behind content, black drops out via screen.
   While it plays, the vector fog above steps aside so the fog is not doubled. */
.aoc-fog-video { position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .55; }
/* Ice tint: multiplying a cyan-to-blue layer turns the white fog into glowing ice-blue while
   black stays black (the screen blend of the box then drops it out). */
.aoc-fog-video::after { content: ''; position: absolute; inset: 0; mix-blend-mode: multiply;
  background: linear-gradient(180deg, #1c6fd0 0%, #22a6e8 55%, #3fd6f5 100%); }
/* Login: the form sits in the lower half, where the fog is densest. */
body.auth-page .aoc-fog-video { opacity: .38; }
.aoc-fog-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.4s linear; }
html.has-fog-video::before, html.has-fog-video::after { display: none; }
@keyframes aoc-fog-a { to { transform: translate3d(-1600px, 0, 0); } }
@keyframes aoc-fog-b { to { transform: translate3d(-1100px, 0, 0); } }

/* === Animated brand marks: logo and coin cube (original artwork, CSS only) =============
   Logo: a light pass clipped to the logo's own shape (masked with the same image) and a
   slow breathing ice glow. Coin cube: a frost ring pulsing out and a slight 3D tilt. */
.customer-app .reference-wordmark,
.customer-app .customer-side-nav__brand img,
body.auth-page .auth-shell__logo { animation: aoc-mark-glow 4.5s ease-in-out infinite; }
.customer-app .reference-wordmark { position: relative; }
.customer-app .customer-side-nav__brand { position: relative; display: inline-block; }
body.auth-page .auth-shell__head { position: relative; }
.customer-app .reference-wordmark::after,
.customer-app .customer-side-nav__brand::after,
body.auth-page .auth-shell__head:has(> .auth-shell__logo[src*="logo-aoc-wordmark"])::before {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  background: linear-gradient(100deg, transparent 38%, #ffffffd9 50%, transparent 62%) 0 0 / 260% 100% no-repeat;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: aoc-mark-sweep 6s ease-in-out infinite;
}
.customer-app .reference-wordmark::after,
.customer-app .customer-side-nav__brand::after {
  inset: 0;
  -webkit-mask-image: url('../img/customer/wordmark.png'); mask-image: url('../img/customer/wordmark.png');
  -webkit-mask-position: left center; mask-position: left center;
}
body.auth-page .auth-shell__head:has(> .auth-shell__logo[src*="logo-aoc-wordmark"])::before {
  top: 0; left: 50%; width: 230px; height: 180px; transform: translateX(-50%);
  -webkit-mask-image: url('../img/customer/logo-aoc-wordmark.png'); mask-image: url('../img/customer/logo-aoc-wordmark.png');
  -webkit-mask-position: center top; mask-position: center top;
}
@keyframes aoc-mark-sweep { 0%, 62% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@keyframes aoc-mark-glow { 0%, 100% { filter: drop-shadow(0 0 4px #30d7f340); } 50% { filter: drop-shadow(0 0 14px #30d7f399); } }

.customer-app :is(.dashboard-card-icon--wallet, .wallet-page .wallet-hero-icon) {
  border-radius: 50%;
  animation: aoc-coin-idle 7s ease-in-out infinite, aoc-coin-ring 3.2s ease-out infinite;
}
.customer-app .wallet-page .wallet-hero-icon { position: relative; overflow: hidden; }
.customer-app .wallet-page .wallet-hero-icon::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, #e6fcff4d 50%, transparent 65%);
  transform: translateX(-130%); animation: aoc-sweep 7s ease-in-out infinite;
}
.customer-app #comboButtons .product-card-price::before,
.customer-app .wallet-page .wallet-pkg-chip::before,
.customer-app .dashboard-screenbar .reference-icon--coins { animation: aoc-mark-glow 4.5s ease-in-out infinite; }
@keyframes aoc-coin-idle {
  0%, 100% { transform: translateY(0) perspective(300px) rotateY(0deg); }
  25% { transform: translateY(-3px) perspective(300px) rotateY(10deg); }
  50% { transform: translateY(-4px) perspective(300px) rotateY(0deg); }
  75% { transform: translateY(-2px) perspective(300px) rotateY(-10deg); }
}
@keyframes aoc-coin-ring {
  0% { box-shadow: 0 0 0 0 #7ee6ff66, 0 0 18px #30d7f355; }
  70% { box-shadow: 0 0 0 14px #7ee6ff00, 0 0 18px #30d7f355; }
  100% { box-shadow: 0 0 0 0 #7ee6ff00, 0 0 18px #30d7f355; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(> body.customer-app)::before, html:has(> body.auth-page)::before,
  html:has(> body.customer-app)::after, html:has(> body.auth-page)::after,
  body.customer-app::before, body.auth-page::before,
  body.customer-app::after, body.auth-page::after,
  .customer-app *, .customer-app *::before, .customer-app *::after, body.auth-page .auth-shell__submit::before,
  body.auth-page .auth-shell__head::before, body.auth-page .auth-shell__logo { animation: none !important; transition: none !important; }
}

/* The light sweep must match the approved login lockup: it is 176 px wide on compact
   auth pages and keeps the preview's 1586 × 992 aspect ratio so the mask does not drift. */
body.auth-page .auth-shell__head:has(> .auth-shell__logo[src*="logo-aoc-wordmark"])::before {
  width: 176px; height: calc(176px * 992 / 1586);
}

/* --- Backdrop image: the brand ice landscape (ice rocks left and right, reflective floor, no
   chamber), pre-toned to the app palette (app-bg-*.png). Its own fixed layer (.app-backdrop in
   the layout) so iOS does not stretch it over the whole page; below the fog (z-index -1).
   Kept subtle: a veil that is densest where the content sits and thinner towards the edges.
   Landscape for wide screens, tall crops for tablets and phones in portrait. */
.app-backdrop {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 36%, #010b13d9 0%, #010b13a6 55%, #010b1359 100%),
    url('../img/customer/app-bg-wide.png') center bottom / cover no-repeat;
}
@media (max-aspect-ratio: 1/1) {
  .app-backdrop {
    background:
      radial-gradient(130% 70% at 50% 34%, #010b13d9 0%, #010b13a6 55%, #010b1359 100%),
      url('../img/customer/app-bg-tablet.png') center bottom / cover no-repeat;
  }
}
@media (max-aspect-ratio: 2/3) {
  .app-backdrop {
    background:
      radial-gradient(140% 65% at 50% 32%, #010b13d9 0%, #010b13a6 55%, #010b1359 100%),
      url('../img/customer/app-bg-phone.png') center bottom / cover no-repeat;
  }
}

/* === Ice buttons: the ice-frame artwork (ice-frame.png — glowing frame, cracks, transparent
   interior, cut from the brand button) as a 9-slice border-image on every large primary action.
   The round ends keep their shape at any width; a dark rounded ground underneath keeps the
   label readable. Small (.btn-sm) and outline buttons stay plain. === */
.customer-app :is(.btn-primary, .btn-info, .btn-success):not(.btn-sm),
.customer-app .dashboard-card-cta,
body.auth-page .auth-card .btn.auth-shell__submit,
.customer-app .wallet-checkout-btn.wallet-checkout-btn--ice {
  color: #f2fbff !important;
  background: radial-gradient(120% 140% at 50% 0%, #134e64 0%, #07293a 55%, #041a26 100%) !important;
  /* Longhands, not the `border` shorthand: with !important the shorthand would also reset
     border-image to none and win over it. */
  border-width: 1px !important; border-style: solid !important; border-color: transparent !important;
  border-image: url('../img/customer/ice-frame.png') 96 fill / 25px / 8px stretch !important;
  /* Slice 96 of the 228 px tall artwork leaves a middle band (the frame's straight sides),
     so taller buttons stretch that band instead of showing a gap — slicing at exactly
     half the height left a dark bar across 52 px buttons. The artwork carries ~30 px of
     feathered glow around the frame: the outset lets it
     spill softly past the button edge while the ice line sits exactly on it. */
  border-radius: 999px !important;
  box-shadow: 0 0 22px #30d7f340 !important;
  text-shadow: 0 1px 6px #001018cc;
  transition: filter .2s, box-shadow .2s, transform .1s;
}
.customer-app :is(.btn-primary, .btn-info, .btn-success):not(.btn-sm):hover,
.customer-app a:hover > .dashboard-card-cta,
body.auth-page .auth-card .btn.auth-shell__submit:hover,
.customer-app .wallet-checkout-btn.wallet-checkout-btn--ice:hover {
  color: #fff !important;
  filter: brightness(1.12);
  box-shadow: 0 0 30px #30d7f366 !important;
}
.customer-app :is(.btn-primary, .btn-info, .btn-success):not(.btn-sm):active,
body.auth-page .auth-card .btn.auth-shell__submit:active { transform: scale(.985); }
.customer-app :is(.btn-primary, .btn-info, .btn-success):not(.btn-sm):disabled { filter: saturate(.5); opacity: .6; }
/* The tall checkout button: wider round ends; its CSS crack pattern gives way to the artwork. */
.customer-app .wallet-checkout-btn.wallet-checkout-btn--ice { border-image-width: 36px !important; border-image-outset: 11px !important; }
/* Sign-in/registration submit is 52 px tall: matching round ends. */
body.auth-page .auth-card .btn.auth-shell__submit { border-image-width: 30px !important; border-image-outset: 9px !important; }
.customer-app .wallet-checkout-btn--ice::before { display: none; }

/* No overflow override needed: an element never clips its own border-image outset, only its
   content — the light sweep (::before) stays clipped inside the button. */