/*
 * wallet-modern.css
 *
 * Visual modernization layer for wallet.html.
 * Loaded last in <head> so it wins over jQuery Mobile's CDN CSS and the
 * inline <style> blocks above it.  Only CSS overrides — no HTML changes.
 */


/* ─── jQUERY MOBILE BASELINE (recreated from DevTools Coverage) ───────────── */
/* Chrome DevTools Coverage on the live wallet showed it used only ~2.2% of jQM's CSS
   (5KB of 240KB). These are jQM's exact used values, re-targeted from the .ui-* classes
   (which jQM's JS added to elements) to the real elements, so jQM can be removed entirely.
   box-sizing is intentionally NOT here - the wallet's global border-box comes from Bootstrap,
   not jQM. */

/* Height model - jQM: `.ui-mobile, .ui-mobile body { height: 99.9% }`. THIS is the piece the
   earlier attempts missed: the absolute page container's min-height:100% needs this height
   chain underneath it, or #wallet collapses and drags the header/layout down with it. */
html,
body {
    height: 99.9%;
}

/* Viewport - jQM: .ui-mobile-viewport + body.ui-mobile-viewport */
body {
    margin: 0;
    overflow-x: hidden;
    /* KAN-423: belt-and-braces with #wallet's rule, so the browser's native pull-to-refresh
       can't fire from the root scroller either. */
    overscroll-behavior-y: contain;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Page container - jQM: .ui-page / [data-role=page] + .ui-page-active (#wallet carried these).
   Page background comes from the wallet-modern #f7f7f7 re-anchor below; text colour from
   jQM's .ui-page-theme-a. */
#wallet {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    /* overflow-x:hidden forces overflow-y to `auto`, so #wallet (fixed height:100% via its inline style)
       becomes the page scroll container when a page's content is taller than the viewport. jQM hid this
       page scrollbar via .ui-page-active::-webkit-scrollbar; recreate it so the desktop config preview /
       iframe doesn't show a vertical scrollbar (real devices use overlay scrollbars, so they never did). */
    overflow-x: hidden;
    /* KAN-423: the wallet owns the pull-down gesture (custom pull-to-refresh), so stop the
       browser's native one (Chrome Android reloads the tab on overscroll) and stop overscroll
       from chaining out of the scroll container. */
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    color: #333;
}

#wallet::-webkit-scrollbar {
    display: none;
}

/* Cross-browser reset - jQM also normalized text sizing and form-control fonts:
   `html { font-size:100% }` and `body,input,select,textarea,button { font-size:1em; line-height:1.3;
   font-family:sans-serif }` plus the fieldset reset. Removing jQM let iOS Safari's UA defaults diverge
   from Chrome: Safari auto-inflates text and renders <button>/<input>/<select> in a smaller system font
   with different metrics, so padding/margins looked inconsistent between the two browsers. Recreate that
   normalization (scoped to the wallet) so both render the same. Styled controls (.wallet-btn, the form
   inputs) set their own font and win; this only catches the un-styled ones. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 100%;
    /* KAN-225: global horizontal-overflow safety net. body already has this; iOS Safari is more reliable
       when it is on the root too, so a single overflowing element can't widen the layout viewport and
       drift subsequent pages. Caveat: overflow-x:hidden forces overflow-y to `auto`, which makes <html>
       a scroll container; its scrollbar is otherwise visible (the body rule already hides body's for the
       iframe/config-preview). Hide <html>'s the same way so the desktop preview shows no stray scrollbar. */
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar {
    display: none;
}

#wallet input,
#wallet select,
#wallet textarea,
#wallet button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.3;
    /* NOTE: intentionally no `margin` reset here. Bootstrap Reboot already normalizes control margins at
       low (element) specificity, which is correct because it lets class-based margins win. An earlier
       `margin: 0` on this #wallet-prefixed (higher-specificity) rule clobbered legit margins like
       `.mobile-wallet-item-body .btn-secondary-right { margin-bottom: 20px }`, making the card's "More
       Information" button touch the card bottom. Don't reintroduce it. */
}

/* iOS Safari zooms the page in when an input/select/textarea with font-size < 16px is focused, and the
   zoom sticks to the tab, which was the real cause of the post-auth "drift" that survived refreshes
   (innerWidth ~393 -> ~369). Force >= 16px on EVERY wallet form control so no field can trigger it.
   Styled fields set 16px too; this is the catch-all. Buttons are excluded (they don't trigger the zoom). */
#wallet input,
#wallet select,
#wallet textarea {
    font-size: 16px;
}

#wallet fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}


/* ─── GLOBAL JQM CHROME REMOVAL ─────────────────────────────────────────── */

.ui-page-theme-a *,
.ui-btn,
.ui-li-static,
.ui-listview > .ui-li-static,
.ui-listview > .ui-li-divider {
    text-shadow: none !important;
}

.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-bar-a,
.ui-body-a,
.ui-overlay-a {
    background-image: none !important;
}


/* ─── PAGE BACKGROUND ────────────────────────────────────────────────────── */

.ui-mobile-viewport,
.ui-overlay-a,
.ui-page-theme-a,
.ui-page-theme-a .ui-panel-wrapper {
    background-color: #f7f7f7 !important;
}

#page.ui-page-theme-a,
#page .ui-panel-wrapper {
    background-color: #ffffff !important;
}

/* KAN-225 phase 5: the wallet page background was provided by jQuery Mobile's .ui-mobile-viewport /
   .ui-page-theme-a classes (added to body/#wallet by jQM). Those classes are gone with jQM, so
   re-anchor the background to the real elements. */
body,
#wallet {
    background-color: #f7f7f7 !important;
}


/* ─── FIXED HEADER ───────────────────────────────────────────────────────── */

#walletHeader {
    /* KAN-225 phase 4: fixed via CSS, replaces jQuery Mobile data-role="header" data-position="fixed".
       z-index 999 keeps it above content but below the drawer scrim (1000) and drawers (1001), so an
       open drawer dims the header as before. The manual #wallet padding-top clearance + the
       showScaffolding() notch/safe-area offset are plain JS and still apply. */
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    /* KAN-225: base horizontal padding so the nav + location icons don't sit flush against the device
       edges. jQuery Mobile's header bar used to provide this inset (.ui-btn-left/right ~0.4em); it was
       lost with jQM, and showScaffolding() sets padding-left/right to env(safe-area-inset-*) inline,
       which is 0 in portrait. calc() keeps that safe-area inset (landscape-notch clearance) and adds a
       base 10px; !important beats the non-important inline the JS writes. */
    padding-left: calc(env(safe-area-inset-left) + 10px) !important;
    padding-right: calc(env(safe-area-inset-right) + 10px) !important;
}

/* KAN-433: pin the hamburger during load. The header is a 3-column table (hamburger 45 /
   #companyLogoContainer / #iconPhoneVerified 45) and the centre cell is empty until the config
   resolves, while the right cell's icon is display:none until the guest is verified. Under the
   browser's default AUTO table-layout the width="45" attributes are only hints and columns are
   sized from content, so with the centre empty the surplus spreads across the columns, the
   hamburger's column takes ~a third of the bar, and align="center" floats the glyph inward until
   the logo/name lands and snaps it left. Fixed layout takes the widths from the first row and
   ignores content, so the hamburger is pinned from the first paint. This is also why the centre
   needs no placeholder image: its width no longer depends on what is (or is not) inside it, so
   an <img> (wallet.js L1520), the company name text (L1538) and empty all lay out the same. */
#walletHeader table {
    table-layout: fixed;
    width: 100%;
}


/* ─── SAFE-AREA / NOTCH (standalone PWA, viewport-fit=cover) ──────────────── */
/* With viewport-fit=cover the wallet draws edge-to-edge on notched iPhones, so
   iOS no longer letterboxes the safe-area with the theme colour. The header
   colour fills the top notch strip (insets applied in wallet.js); here we keep
   the scrolling page content clear of the side inset, which is where the notch
   sits in landscape. The neutral page background then shows through that inset
   instead of a coloured bar. env() is 0 on non-notched devices, so this is
   inert everywhere else. */
#divPages {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}


/* ─── CENTERING OF FIXED-WIDTH BLOCKS ────────────────────────────────────── */
/* KAN-225: the wallet is wrapped in a deprecated <center> element and relied on its
   `text-align: -webkit-center` to centre the fixed-width blocks (the payment card, the OTP form, the
   coupons list). That is non-standard and centred inconsistently (the offers-page payment card sat
   slightly right of centre). Centre them deterministically with auto margins, which works the same in
   every browser and no longer depends on the <center> wrapper. */
#paymentContainer,
#divAuthenticatePhoneNumber,
#collapsibleCoupons {
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ─── LEFT NAV PANEL ─────────────────────────────────────────────────────── */

#menu.ui-panel {
    background-color: #ffffff !important;
    border-right: 1px solid #ebebeb !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08) !important;
}

.ui-panel-inner {
    border-right: none !important;
    padding: 0 !important;
}

/* The icon that floats right inside each nav header.

   KAN-537: this rule used to declare `font-weight: 200 !important` and `opacity: 0.75 !important`,
   and between them they rendered these five icons practically invisible.

   FontAwesome 6 Pro Classic has faces at 100 (Thin), 300 (Light), 400 (Regular) and 900 (Solid).
   There is NO 200. CSS font matching for a desired weight below 400 searches downward first, so
   `font-weight: 200` resolved to the Thin face, and the !important beat the `.fa-regular { font-weight: 400 }`
   that the markup's own class was asking for. Every one of these icons rendered as a hairline Thin
   glyph even though its class attribute said fa-regular.

   That also made the guest wallet download the whole Thin family (~11 woff2 chunks) on every load,
   which is the payload mystery KAN-526 could not explain. Deleting the declaration fixes the visual
   bug and the download together, with the shared kit untouched.

   Do not reintroduce a font-weight here. `.fa-regular` in the markup already sets 400, which is
   the correct weight and an actual face. If a different weight is ever wanted, change the class
   (fa-light = 300, fa-solid = 900), never the CSS weight, or it silently resolves to a face nobody
   chose. test/font-face-weights.js guards this.

   The opacity went with it: these are white glyphs on the saturated lifecycle grounds set in
   wallet.html (#dfa30b Visit, #e99353 Subscribe, #6da7b9 Transact, #80b73e Member). White on that
   gold is only 2.24:1 to begin with, and dimming to 75% dropped it to 1.84:1, i.e. below the point
   where a thin stroke survives at all. The label text beside the icon is full-opacity white, so
   dimming only the icon read as a rendering fault rather than as hierarchy.

   Vertical position is deliberately NOT set here. `float: right` takes the icon out of the
   inline flow so it aligns to the top of the line box rather than to the text baseline, which
   makes it ride high next to its label. wallet.html already compensates for that in
   `#menuItems div i { margin-top: 3px }`, a rule that matches these five icons and nothing else
   (the menu item icons live inside a <ul>, so no div sits between them and #menuItems).

   This rule used to override that with `margin-top: -1px !important`, pulling the icons 4px
   back up and reintroducing exactly the misalignment the other rule exists to fix. Note it only
   won because of the !important: `#menuItems div i` is the more specific selector. Dropping the
   declaration restores the intended offset. If these ever need moving again, change the value
   in wallet.html rather than adding a competing one here. */
.wallet-ui-nav-header {
    float: right !important;
    font-size: 20px !important;
}

/* Nav list items */
.left-nav-menu-items {
    list-style: none !important;
    padding: 0 8px 6px 8px !important;
    margin: 0 !important;
}

.left-nav-menu-items li {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.left-nav-menu-items a {
    display: block !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    transition: background-color 0.12s ease !important;
}

/* The rule above forces block layout on menu items, which is needed for the
   shown items. But wallet.js gates each item's visibility with jQuery
   .fadeOut(), which hides it via an inline display:none. A non-important inline
   style loses to display:block !important, so without this every item in a
   visible section appears regardless of the merchant's config (e.g. a Tickets-
   only account would show the whole Transact group). This more-specific rule
   re-honours jQuery's hide so the config gating works again. */
.left-nav-menu-items a[style*="display: none"] {
    display: none !important;
}

.left-nav-menu-items a:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.wallet-icon {
    font-size: 15px !important;
    width: 22px !important;
    height: auto !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle !important;
}


/* ─── USER PROFILE SECTION IN NAV ────────────────────────────────────────── */

#divMenuWelcomeSection {
    padding: 16px 12px 14px 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#divWelcomeText {
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 6px 0 6px 0 !important;
}

#btnLogin {
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    padding: 5px 18px !important;
    background: #ffffff !important;
    color: #444 !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    transition: background 0.12s !important;
}

#btnLogin:hover {
    background: #f5f5f5 !important;
}



/* ─── MAIN CONTENT AREA ──────────────────────────────────────────────────── */

.wallet-page {
    background: #f7f7f7 !important;
}

.wallet-page-header {
    /* KAN-421: firmer, more intentional section heading (was thin 300-weight text with a
       flat grey inline icon). Poppins semibold + tighter tracking gives it presence; the
       leading icon becomes a soft chip below, echoing the empty-state icon. */
    font-family: "Poppins", sans-serif !important;
    font-size: 19px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #1a1a1a !important;
    padding: 14px 16px 8px 16px !important;
    display: block !important;
    float: none !important;
}

/* KAN-225: gutter ONLY the loose-text / form pages, whose body content sits directly in the page div.
   List/card pages (Products, Services, Offers, Tickets, etc.) render their cards into full-width shared
   containers (#collapsibleEvents, #divVerticalList) and self-space via card margins, so a page gutter
   would indent their header but not their cards, leaving a mismatched grey band (the "leftover gutter"
   across page views). Those stay full-bleed; the full-bleed .no-padding-page landings are untouched too.
   On the allowlisted pages the header h-padding is zeroed so header + body share the same 16px gutter. */
#divSmsOptIn,
#divSmsOptOut,
#divEmailSubscribe,
#divGiftCards,
#divGiftCertificates {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

#divSmsOptIn > .wallet-page-header,
#divSmsOptOut > .wallet-page-header,
#divEmailSubscribe > .wallet-page-header,
#divGiftCards > .wallet-page-header,
#divGiftCertificates > .wallet-page-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* The <br /> after each .wallet-page-header was there to force a line break when the
   span was inline. Now that it's display:block the <br /> creates a redundant blank
   line (~line-height tall). Hide it so all page headers have a consistent height. */
.wallet-page-header + br {
    display: none !important;
}

.wallet-page-header i {
    /* KAN-421: the leading section-title icon as a soft rounded chip, same shading/boxing
       as the empty-state icon, so the page reads as intentional rather than plain text. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--wallet-theme-soft, #f3f6f9) !important;
    color: var(--wallet-theme-icon, #6b7280) !important;
    font-size: 18px !important;
    /* KAN-439: keep the light 300 icon (John's preference). The faintness was the chip *background*
       being invisible on a white theme, fixed by darkening --wallet-theme-soft's white-brand fallback
       in applyThemeVars, not the glyph weight. */
    font-weight: 300 !important;
    margin-right: 11px !important;
    vertical-align: middle;
}

hr {
    border-color: #ebebeb !important;
    opacity: 1 !important;
    margin: 8px 0 14px 0 !important;
}


/* ─── CONTENT CARDS ──────────────────────────────────────────────────────── */

.mobile-wallet-item {
    margin: 0 0 12px 0 !important;
}

.mobile-wallet-item-details {
    border-radius: 14px !important;
    border: 1px solid #e8e8e8 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    margin: 4px 10px !important;
}

.mobile-wallet-item-title {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #111 !important;
    padding: 16px 16px 4px 16px !important;
    margin: 0 !important;
}

.mobile-wallet-date {
    font-size: 12px !important;
    color: #aaa !important;
    padding: 0 16px 6px 16px !important;
}

.mobile-wallet-item-body {
    padding: 10px 16px 16px 16px !important;
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.65 !important;
}

.mobile-wallet-item-img img {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover !important;
    display: block !important;
}

.mobile-wallet-item-body .btn-secondary,
.mobile-wallet-item-body .btn-secondary-right {
    background-color: #f2f2f2 !important;
    color: #333 !important;
    border: none !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 7px 18px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: background 0.12s !important;
}

.mobile-wallet-item-body .btn-secondary:hover,
.mobile-wallet-item-body .btn-secondary-right:hover {
    background-color: #e4e4e4 !important;
}


/* ─── JQUERY MOBILE BUTTON RESET ─────────────────────────────────────────── */

.ui-btn {
    font-family: "Poppins" !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    text-shadow: none !important;
    border-radius: 10px !important;
    border: 1px solid #e0e0e0 !important;
    background: #ffffff !important;
    background-image: none !important;
    color: #333 !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
}

.ui-btn:hover,
.ui-btn:active {
    background: #f5f5f5 !important;
    background-image: none !important;
    color: #111 !important;
}


/* ─── LISTVIEWS ──────────────────────────────────────────────────────────── */

.ui-listview > .ui-li-static,
.ui-listview > li > a.ui-btn {
    background: #ffffff !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #f2f2f2 !important;
    color: #333 !important;
    text-shadow: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    padding: 10px 16px !important;
}

.ui-listview > .ui-li-divider {
    background: #f8f8f8 !important;
    background-image: none !important;
    color: #888 !important;
    text-shadow: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    border: none !important;
    border-bottom: 1px solid #ebebeb !important;
    padding: 8px 16px !important;
}

.listview-header {
    background-color: #444444 !important;
    color: #ffffff !important;
    text-shadow: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 8px 16px !important;
    border: none !important;
    border-radius: 0 !important;
}


/* ─── COLLAPSIBLES ───────────────────────────────────────────────────────── */

.ui-collapsible-heading > .ui-btn {
    background: #f8f8f8 !important;
    background-image: none !important;
    border: 1px solid #ebebeb !important;
    border-radius: 10px !important;
    color: #333 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    padding: 10px 14px !important;
}

.ui-collapsible-heading > .ui-btn:hover {
    background: #f0f0f0 !important;
    background-image: none !important;
}

.ui-collapsible-content {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    padding: 6px 0 !important;
}

.ui-collapsible + .ui-collapsible > .ui-collapsible-heading > .ui-btn {
    border-top: 1px solid #ebebeb !important;
}


/* ─── MERCHANT BUTTON (right-hand panel) ─────────────────────────────────── */

.merchantButton {
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    margin: 4px 8px !important;
    padding: 8px !important;
    background: #ffffff !important;
    transition: box-shadow 0.12s !important;
}

.merchantButton:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09) !important;
}

#merchantsMenu.ui-panel {
    background-color: #ffffff !important;
    border-left: 1px solid #ebebeb !important;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08) !important;
}


/* ─── QUICK LINKS ────────────────────────────────────────────────────────── */

.link-book-section {
    border: 1px solid #e8e8e8 !important;
    border-radius: 14px !important;
    margin: 16px 10px 24px 10px !important;
    padding: 14px 12px 10px 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.link-book-title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    /* KAN-343: the Quick Links page is white; a gray label read as an off-color band against the white
       link cards. Mask the section border with white (matching the page/content) so the label reads as a
       clean legend, not a stray gray tag. Restores the original inline intent that this layer had overridden. */
    background: #ffffff !important;
    margin-top: -24px !important;
    padding: 0 8px !important;
    float: left !important;
}

.link-book-item {
    border: 1px solid #ebebeb !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 8px !important;
    background: #ffffff !important;
    transition: box-shadow 0.12s !important;
}

.link-book-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07) !important;
}

.link-book-item-link {
    color: #2c2c2c !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}


/* ─── PANEL BACKDROP ─────────────────────────────────────────────────────── */

.ui-panel-dismiss {
    background: rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: blur(2px) !important;
}


/* ─── GDPR COOKIE NOTICE ─────────────────────────────────────────────────── */

#cookieNotice {
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.14) !important;
}


/* ─── VOUCHER / PAYMENT OBJECT CARDS ─────────────────────────────────────── */

#paymentObject {
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
}

.voucherCollapsible {
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}


/* ─── HORIZONTAL CAROUSELS (KAN-92 spike, opt-in) ────────────────────────── */
/* Add class "wallet-carousel" to a list container (e.g. #collapsibleCoupons) to
   lay its .mobile-wallet-item cards out as a horizontal, snap-scrolling row.
   CSS-only, native touch swipe, no JS/library. Inert until a container opts in,
   so it changes nothing until we roll it out to a chosen list (after visual QA). */
.wallet-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding-bottom: 8px !important;
    scrollbar-width: thin;
}

/* Cards-only wrapper contract: size each direct child to one card + a peek of the next
   (signals scrollability). Targets any direct child so it works for .mobile-wallet-item,
   .offer-card, etc. */
.wallet-carousel > * {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    scroll-snap-align: start !important;
    margin-right: 0 !important;
}

.wallet-carousel::-webkit-scrollbar {
    height: 6px;
}

.wallet-carousel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 3px;
}


/* ─── MY OFFERS: modern outlet-grouped cards (KAN-223) ───────────────────── */
/* Replaces the old jQuery Mobile collapsible accordion. Offers are grouped by
   Payment Design (outlet). Each outlet's cards sit in a cards-only
   .offers-outlet-list, which defaults to a vertical stack and flips to a
   horizontal carousel when .wallet-carousel is added (same DOM, one class). */
/* KAN-531: the offers surface is left-aligned, against the centred column it sits in.
   The centring is INHERITED, not chosen: the whole wallet is wrapped in a deprecated
   <center> element (wallet.html), so every descendant gets text-align: center unless it
   says otherwise. Centred, a deck header and its stacked cards read as a poster; left
   aligned they read as the scannable list they are.

   This is separate from, and does not disturb, the auto-margin block centring of
   #collapsibleCoupons above (KAN-225). That rule centres the column; this one aligns the
   content inside it. Changing one does not affect the other. */
#collapsibleCoupons {
    text-align: left;

    /* Side breathing room for the deck, as PADDING rather than margin, and that is not a style
       preference. KAN-225 pins this element's `margin-left/right` to `auto !important` to centre
       it, so a margin here loses to that rule and silently does nothing, while the inline
       `margin:2px` in wallet.html only ever applied top and bottom for the same reason. Without
       this the deck cards run edge to edge against the phone chrome and their box-shadows are
       clipped flat, which reads as the cards being cut off rather than resting on the page. */
    padding: 0 10px;
}

.offers-heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 8px 0 16px !important;

    /* Explicitly re-centred. KAN-531 set `text-align: left` on #collapsibleCoupons so the
       list-shaped deck would stop inheriting centring from the <center> element the whole wallet
       sits inside, and this heading was collateral: it is rendered INTO that container by
       Wallet.StaticVoucher.showList (wallet.js, the `.offers-heading` div), so it drifted left
       with everything else. The cards stay left, the section label stays centred. */
    text-align: center !important;
}

.offers-heading i {
    margin-right: 6px;
    opacity: 0.65;
}

.offers-heading-expired {
    color: #999 !important;
}

.offers-outlet {
    margin-bottom: 22px;
}

/* ─── The deck (KAN-531) ──────────────────────────────────────────────────
   Each outlet group collapses to a header card with the EDGES of the cards
   underneath peeking out, so the hidden quantity is physical rather than
   implied. This replaces the plain baseline row KAN-223 shipped
   (.offers-outlet-header / .offers-outlet-count), whose DOM is gone.

   Two rules earn their keep and are easy to undo by accident:

   1. The header carries a SUMMARY (count + soonest expiry). A collapse that
      hides content without saying what is inside is just "click to expand",
      which is the pattern KAN-223 removed and KAN-452 stripped from the SMS
      composer. If the summary ever goes, the collapse should go with it.

   2. The peek edges are NEUTRAL, never brand-tinted. They read as depth, not
      as brand, and tinting them repeats the KAN-432/439 mistake a third time:
      a white-branded merchant would have an invisible deck. Even the guarded
      --wallet-theme-fill is the wrong token here. */
.wallet-deck-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

/* Visually hidden but still FOCUSABLE. display:none would drop the deck out of
   the tab order entirely and leave a keyboard user unable to open it. */
.wallet-deck-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.wallet-deck-toggle:focus-visible ~ .wallet-deck-header {
    outline: 2px solid #1d242b;
    outline-offset: 2px;
}

/* The header is the tap target for the whole group, so it gets a real row
   height rather than just the height of its text. */
.wallet-deck-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    margin: 0;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    -webkit-tap-highlight-color: transparent;
}

.wallet-deck-collapsible .wallet-deck-header {
    cursor: pointer;
}

.wallet-deck-title {
    flex: 1 1 auto;
    min-width: 0;
}

.wallet-deck-summary {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: #6b7480;
}

/* Urgency, applied by renderDeckSummary only when the soonest offer expires
   within a week. Not brand-tinted: this is a status colour, not a brand one. */
.wallet-deck-summary b {
    color: #a3282b;
    font-weight: 600;
}

.wallet-deck-chevron {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-right: 2px solid #9aa3af;
    border-bottom: 2px solid #9aa3af;
    transform: rotate(45deg);
    margin-right: 4px;
    transition: transform 0.24s ease;
}

/* The peeking edges: one bar per hidden card, capped at two. A group with a
   single offer renders none at all, because two bars under one card would be
   depicting cards that are not there. */
.wallet-deck-peek {
    position: relative;
    height: 12px;
    margin: -6px 6px 0;
    z-index: 1;
    transition: height 0.24s ease, opacity 0.18s ease;
}

.wallet-deck-peek span {
    position: absolute;
    left: 0;
    right: 0;
    height: 12px;
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.09);
}

.wallet-deck-peek span:nth-child(1) { top: 0; opacity: 0.95; }
.wallet-deck-peek span:nth-child(2) { top: 5px; left: 7px; right: 7px; opacity: 0.7; }

/* grid-template-rows 0fr -> 1fr animates to the content's real height, which
   max-height cannot do without a magic number. The clip element is separate
   from the padded list on purpose: padding on the animating grid item itself
   would leave a sliver visible at 0fr, and the inset gives the offer cards'
   box-shadows room inside the clip. */
.wallet-deck-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.wallet-deck-clip {
    overflow: hidden;
    min-height: 0;
}

.wallet-deck-clip > .offers-outlet-list {
    padding: 10px 10px 2px;
}

.wallet-deck-toggle:checked ~ .wallet-deck-body { grid-template-rows: 1fr; }
.wallet-deck-toggle:checked ~ .wallet-deck-peek { height: 0; opacity: 0; }
.wallet-deck-toggle:checked ~ .wallet-deck-header .wallet-deck-chevron {
    transform: rotate(-135deg);
}

/* A group that is not collapsible (the only group, so a tap would buy the
   guest nothing) renders open with no toggle, chevron or peek. */
.wallet-deck-static .wallet-deck-body { grid-template-rows: 1fr; }

/* Placed AFTER the rules it guards: @media adds no specificity, so a guard
   written above its own animation is silently inert. The deck still opens and
   closes, it just does not travel, and the peek collapses either way so
   nothing is stranded mid-animation. */
@media (prefers-reduced-motion: reduce) {
    .wallet-deck-body,
    .wallet-deck-peek,
    .wallet-deck-chevron {
        transition: none;
    }
}

/* cards-only wrapper: vertical stack by default; add .wallet-carousel to flip to a row */
.offers-outlet-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offer-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.offer-card:active {
    transform: scale(0.98);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
}

.offer-card-value {
    font-size: 22px;
    font-weight: 700;
    color: #1a3300;
    line-height: 1.2;
}

.offer-card-expiry {
    font-size: 12px;
    color: #8a8a8a;
    margin-top: 6px;
}

.offer-card-expired {
    opacity: 0.6;
}

.offer-card-expired .offer-card-value {
    color: #777;
}

/* KAN-559: expiry countdown ring on the offer card (migrated from the /standards/demos expiry-ring
   prototype). A single conic-gradient, no SVG and no library. --offer-ring-pct (0-100) is the fill,
   set per card by renderOfferCard from the days remaining on a fixed 30-day scale. Colour is
   SEMANTIC (green/amber/red), not the brand token: urgency must read the same on every merchant,
   and this dodges the white-brand luminance traps (KAN-432/439). Static, so no reduced-motion
   guard is needed. */
.offer-card-main { flex: 1 1 auto; min-width: 0; }
.offer-card-ring {
    flex: 0 0 auto; position: relative; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--offer-ring-color, #9aa3af) calc(var(--offer-ring-pct, 0) * 1%), #e9edf1 0);
}
.offer-card-ring::before {
    content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; background: #fff;
}
.offer-ring-num {
    position: relative; font-size: 13px; font-weight: 800; line-height: 1;
    color: var(--offer-ring-color, #6b7480); font-variant-numeric: tabular-nums;
}
.offer-ring-green   { --offer-ring-color: #2f9e6e; }
.offer-ring-amber   { --offer-ring-color: #e08a1e; }
.offer-ring-red     { --offer-ring-color: #d64545; }
.offer-ring-expired { --offer-ring-color: #b8bfc7; }

/* KAN-571: not-yet-valid (future StartDate) offers render as pending, not redeemable. Greyed like
   the expired card but a touch less faded (they are coming, not gone), with a neutral SLATE ring
   (this indicator is "opens in N days", not expiry urgency, so it deliberately reuses none of the
   green/amber/red urgency colours) and a lock note. Semantic, not brand: no white-brand risk. */
.offer-ring-pending { --offer-ring-color: #64748b; }
.offer-card-pending { opacity: 0.72; }
.offer-card-pending .offer-card-value { color: #64748b; }
.offer-card-note {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin-top: 5px;
}
.offer-card-note i { margin-right: 3px; }

/* KAN-584: dynamic voucher refresh ring. Seconds until the code rotates, depleting over the poll
   cycle. Driven by Wallet.DynamicVoucher's 1s countdownInterval, which sets --dv-pct each second;
   the transition sweeps the fill smoothly BETWEEN the per-second ticks (so it drives off the
   existing timer, no second loop). @property makes --dv-pct animatable (iOS 16.4+; older Safari
   simply steps per second, which is also the reduced-motion behaviour). Colour is one calm cadence
   hue, NOT the green/amber/red urgency scale, because it resets every cycle. Prototype:
   /standards/demos/dynamic-voucher-ring.html. */
@property --dv-pct {
    syntax: '<number>';
    inherits: false;
    initial-value: 100;
}

.dv-refresh-ring {
    --dv-color: #0d9488;
    position: relative;
    width: 72px;
    height: 72px;
    margin: 14px auto 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--dv-color) calc(var(--dv-pct, 100) * 1%), #e6ebf0 0);
    transition: --dv-pct 1s linear;
}

.dv-refresh-ring::before {
    content: "";
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ffffff;
}

.dv-ring-num {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    color: var(--dv-color);
    font-variant-numeric: tabular-nums;
}

/* Reduced motion: no smooth sweep, the ring steps once per second (still a live countdown). Placed
   AFTER the base rule so it wins on source order (a @media wrapper adds no specificity). KAN-524. */
@media (prefers-reduced-motion: reduce) {
    .dv-refresh-ring { transition: none; }
}

/* KAN-225: merchants menu list, replaces jQuery Mobile data-role="listview" (which zeroed the default <ul> padding) */
.merchants-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* KAN-225 phase 5: primary action button for the wallet's bare <button>s (Request OTP, Authenticate,
   Subscribe, Email Subscribe, Opt-Out, Get Directions, Live Chat). These lost their styling when jQM's
   auto-added .ui-btn class was removed (Bootstrap 4 has no .btn-default). They are the primary action on
   their screen, and a light pill (#f2f2f2) vanished against the #f7f7f7 page, so use the dark primary
   pill (same #333 token as Submit/Claim below) for clear contrast. Full-width block: all sit under a
   full-width input as form submits. */
.wallet-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    margin: 0.5em 0;
    padding: 12px 18px;
    border: none;
    border-radius: 20px;
    background-color: #333;
    color: #ffffff;
    font-family: "Poppins";
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
}

.wallet-btn:hover,
.wallet-btn:active {
    background-color: #1f1f1f;
}

/* KAN-225: affirmative form CTAs (email/phone Submit, Claim complimentary ticket) were raw Bootstrap 4
   green/blue buttons, foreign to the wallet's neutral palette. Re-cast as a primary dark pill (the #333
   emphasis already used by the Active/Expired toggle's active state), keeping their Bootstrap layout
   (float/margins) intact. ID selectors so no other .btn-success / .btn-primary is affected. */
#btnSubmit,
#btnSubmit2,
#btnClaimTicket {
    background-color: #333 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    font-family: "Poppins" !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 22px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#btnSubmit:hover,
#btnSubmit2:hover,
#btnClaimTicket:hover {
    background-color: #1f1f1f !important;
}

/* KAN-225: opt-in form pages (SMS Opt-In, Email Opt-In). With jQM gone these rendered as bare,
   edge-to-edge text + inputs. Group each form container into a modern card on the grey page, with
   consistent rounded inputs and a focus ring. The intro line ("Enter your ... to stay connected:")
   sits at the top of the card as its label; the dark .wallet-btn is the card's primary action.
   The same input rule also covers the Authenticate/OTP inputs (#divAuthenticatePhoneNumber), which
   needed the identical box so their edges line up with the full-width .wallet-btn below them; scoped
   by id so no other input in the wallet is affected. */
#divOptInNumber,
#divEmailSubscribeForm {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 18px 16px;
    margin: 12px 0 6px;
    text-align: left;
}

#divOptInNumber input[type="text"],
#divEmailSubscribeForm input[type="text"],
#divAuthenticatePhoneNumber input {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 10px 0 !important;
    padding: 12px 14px !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 12px !important;
    background: #fbfbfb !important;
    font-family: "Poppins" !important;
    /* Must be >= 16px: iOS Safari auto-zooms the page when you focus an input with a smaller font-size,
       and that zoom sticks to the tab, which made the phone/OTP auth flow leave every later page looking
       drifted (innerWidth dropped ~393 -> ~369) and survived refreshes. 16px prevents the zoom. */
    font-size: 16px !important;
    color: #222 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

#divOptInNumber input[type="text"]:focus,
#divEmailSubscribeForm input[type="text"]:focus,
#divAuthenticatePhoneNumber input:focus {
    outline: none !important;
    border-color: #333 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.08) !important;
}

#divOptInNumber input[type="text"]::placeholder,
#divEmailSubscribeForm input[type="text"]::placeholder,
#divAuthenticatePhoneNumber input::placeholder {
    color: #9a9a9a;
}

/* KAN-225 / KAN-507: Active/Expired offers filter. Segmented control ported from
   public/standards/demos/segmented.html onto the existing .wallet-filter-toggle / .filter-btn
   classes, so it is a CSS-only change: state still lives in the .active class wallet.js already
   toggles (no markup, no JS, no bundle rebuild). A brand-tinted pill slides between the two cells
   as an @supports(:has()) enhancement over a baseline that fills the selected cell directly, so a
   browser without :has() still gets a working, brand-coloured, 44px control rather than a pill it
   cannot move. The fill is the luminance-guarded --wallet-theme-fill (KAN-432/439), never raw
   --wallet-theme, so a white-branded merchant stays visible. */
.wallet-filter-toggle {
    position: relative;
    display: flex;
    width: 300px;
    max-width: calc(100% - 4px);
    margin: 14px auto 12px;
    padding: 3px;
    border-radius: 10px;
    background: #eef1f5;
    isolation: isolate;
}

/* !important + appearance:none needed: iOS Safari otherwise renders <button> as a native
   rounded pill, and global button styles add their own background/radius. */
.wallet-filter-toggle .filter-btn {
    position: relative;
    z-index: 1;
    flex: 1 1 50%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px 12px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 7px !important;
    box-shadow: none !important;
    background: transparent !important;
    color: #5a6472 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: color 0.22s ease;
}

/* BASELINE selected state: fill the cell itself. No :has(), no JS. Already an improvement on the
   old flat #333 (brand colour, 44px target). */
.wallet-filter-toggle .filter-btn.active {
    background: var(--wallet-theme-fill, #16181d) !important;
    color: var(--wallet-theme-btn-text, #ffffff) !important;
}

/* ENHANCEMENT: replace the filled cell with one pill that slides. Gated on :has() being usable,
   so a browser that can paint but not position it keeps the baseline. */
@supports selector(:has(*)) {
    .wallet-filter-toggle::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 3px;
        left: 3px;
        width: calc(50% - 3px);
        height: calc(100% - 6px);
        border-radius: 7px;
        background: var(--wallet-theme-fill, #16181d);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
        transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* the pill now provides the fill, so the cell must not */
    .wallet-filter-toggle .filter-btn.active {
        background: transparent !important;
    }

    .wallet-filter-toggle:has(.filter-btn:last-child.active)::after {
        transform: translateX(100%);
    }
}

/* KAN-524: reduced-motion guard, AFTER the rules it guards (neither @media nor @supports adds
   specificity). The pill still moves as the state indicator; it just arrives instead of sliding. */
@media (prefers-reduced-motion: reduce) {
    .wallet-filter-toggle::after,
    .wallet-filter-toggle .filter-btn {
        transition: none;
    }
}

/* KAN-225 phase 3: custom off-canvas drawers replace the jQuery Mobile panels (#menu left, #merchantsMenu right).
   Positioning/slide/scrim were previously provided by jQM's panel widget; reproduced here. The notch/safe-area
   offset that showScaffolding() applies to #menu/#merchantsMenu (margin-top / padding-inset) still works over these. */
/* KAN-225: full-viewport clipping layer for the off-canvas drawers. position:fixed + transform makes it
   the containing block for the fixed .wallet-drawer children and (with overflow:hidden) clips them, so a
   closed drawer translated off-screen can no longer widen the layout viewport / drift pages on iOS. It is
   transparent + pointer-events:none so it never blocks the page; drawers re-enable pointer-events below.
   The fixed header sits OUTSIDE this layer, so it stays fixed to the viewport as before. */
#walletDrawerLayer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateZ(0);
    z-index: 1001;
}

.wallet-drawer {
    /* KAN-225: absolute, not fixed. The drawers live inside #walletDrawerLayer (position:fixed; inset:0;
       overflow:hidden), so absolute positioning makes the layer their containing block and its
       overflow:hidden RELIABLY clips the off-screen (closed) drawer. A position:fixed drawer is NOT
       clipped by iOS this way, it still contributes to the scrollable width and drifts every page. The
       layer is viewport-locked, so the absolute drawers still behave like fixed visually (stay put on
       scroll). */
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 80%;
    max-width: 320px;
    pointer-events: auto;
    overflow-y: auto;
    /* KAN-225: clip horizontal overflow. The drawer is position:fixed and always in the DOM (translated
       off-screen when closed); without this, content wider than the drawer (e.g. the Active Memberships
       tier bars) spills past it, and because it's fixed that overflow isn't clipped by #wallet, so it
       expands the layout viewport and drifts every page. */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
    transition: transform 0.3s ease;
    will-change: transform;
}

.wallet-drawer-left {
    left: 0;
    transform: translateX(-100%);
    border-right: 1px solid #ebebeb;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08);
}

.wallet-drawer-right {
    right: 0;
    transform: translateX(100%);
    border-left: 1px solid #ebebeb;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
}

.wallet-drawer.wallet-drawer-open {
    transform: translateX(0);
}

.wallet-drawer-scrim {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.wallet-drawer-scrim.wallet-drawer-open {
    display: block;
}

body.noscroll {
    overflow: hidden;
}

/* ===========================================================================
   KAN-421: Wallet section empty states.
   The section pages funnel their "nothing here" message into one shared element
   (#divNoneToDisplay; representatives uses #divRepresentativesNone), which
   shipped as a bare, left-aligned line of grey text. Wallet.Page.emptyState()
   fills it with a FontAwesome per-section icon + message; this styles that into
   a centered, friendly card matching the flat-modern look (Poppins, soft rounded
   card, muted text, fa-light glyph in a soft circle). :empty keeps it invisible
   when there is no message (the reset sets .text('')).
   =========================================================================== */
#divNoneToDisplay,
#divRepresentativesNone {
    box-sizing: border-box;
    max-width: 320px;
    margin: 16px auto 24px !important;
    padding: 40px 26px 34px !important;
    text-align: center !important;
    padding-left: 26px !important; /* override the inline padding-left:10px */
    font-family: "Poppins", sans-serif !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    color: #7c828c;
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.045);
}

/* The fa-light glyph sits in a soft circle. Sizing lives on the circle span so it
   renders the same whether the FA kit is in webfont or SVG-auto-replace mode. */
.wallet-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--wallet-theme-soft, #f3f6f9);
    color: var(--wallet-theme-icon, #9aa3af);
    font-size: 30px;
    line-height: 1;
}

.wallet-empty-text {
    display: block;
}

/* KAN-421: optional CTA button (phone-verify states). Picks up the merchant brand colour,
   with a luminance-guarded label colour so it stays readable on light brands. */
.wallet-empty-cta {
    display: inline-block;
    margin-top: 22px;
    padding: 11px 22px;
    border: 0;
    border-radius: 12px;
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--wallet-theme-btn-text, #ffffff);
    /* KAN-432: -fill, not -theme: a near-white brand would make the button vanish on the card. */
    background: var(--wallet-theme-fill, #4b5563);
    cursor: pointer;
}

/* KAN-424: header-image placeholder, shown only in the config preview (see wallet.js) to
   nudge the merchant to add a hero image. Soft brand-tinted drop-zone at the 410x200 ratio. */
.wallet-hero-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    aspect-ratio: 410 / 200;
    min-height: 150px;
    padding: 18px;
    box-sizing: border-box;
    text-align: center;
    font-family: "Poppins", sans-serif;
    color: var(--wallet-theme-icon, #9aa3af);
    background: var(--wallet-theme-soft, #f4f6f9);
    border: 2px dashed var(--wallet-theme-line, #d4d9df);
    border-radius: 14px;
}

.wallet-hero-placeholder i {
    font-size: 34px;
    margin-bottom: 4px;
}

.wallet-hero-placeholder-title {
    font-size: 15px;
    font-weight: 600;
}

.wallet-hero-placeholder-size {
    font-size: 12px;
    opacity: 0.7;
}

/* KAN-424: the phone-verify screen as a single tailored card - chip + message (rendered into
   #divAuthHeader by the verify states) + field + OTP + button, replacing the old generic hand
   graphic + "Verify Phone Number to Receive Rewards" heading. */
.wallet-auth-card {
    box-sizing: border-box;
    max-width: 320px;
    width: auto !important;
    margin: 16px auto 24px !important;
    padding: 10px 24px 30px !important;
    text-align: center;
    background: #ffffff;
    border: 1px solid #eef0f2;
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.045);
}

.wallet-auth-card #divAuthHeader {
    margin-bottom: 4px;
}

.wallet-auth-card input {
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}

/* KAN-570: segmented OTP entry. Six boxes, native auto-advance. These come AFTER the rule above
   (equal specificity, later in source) so each box sizes itself instead of stretching to 100%.
   flex:1 with a max-width keeps all six on one line down to the narrowest phone inside the 320px
   card, and min-width:0 lets them shrink rather than overflow. 22px type on purpose: an input under
   16px makes iOS Safari zoom the page on focus and the zoom sticks (documented wallet gotcha).
   Focus / filled borders use the guarded --wallet-theme-fill so a white-branded merchant never gets
   an invisible ring (KAN-432/439); the neutral fallback is the same #16181d the verify CTA uses. */
.wallet-otp {
    display: flex;
    gap: 7px;
    justify-content: center;
    margin-top: 12px;
}

.wallet-otp input {
    flex: 1 1 0;
    min-width: 0;
    max-width: 46px;
    width: auto;
    height: 52px;
    margin-top: 0;
    padding: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #16181d;
    background: #fbfcfd;
    border: 1.5px solid #d8dde2;
    border-radius: 12px;
    box-sizing: border-box;
    -moz-appearance: textfield;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.wallet-otp input::-webkit-outer-spin-button,
.wallet-otp input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.wallet-otp input:focus {
    outline: none;
    border-color: var(--wallet-theme-fill, #16181d);
    box-shadow: 0 0 0 3px rgba(22, 24, 29, 0.12);
}

.wallet-otp input.is-filled {
    border-color: var(--wallet-theme-fill, #16181d);
    background: #ffffff;
}

.wallet-auth-card .wallet-btn {
    width: 100%;
    margin-top: 12px;
    white-space: nowrap;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    /* KAN-432: -fill, not -theme (see .wallet-btn): this is the verify CTA on a white card, so a
       white-branded merchant lost the button entirely and it read as bare text. */
    background: var(--wallet-theme-fill, #16181d) !important;
    color: var(--wallet-theme-btn-text, #ffffff) !important;
}

/* KAN-424: the reward-hand illustration is the verify card's hero, so size it and hide the
   flat page chip here (the page-specific message below it keeps the tailoring). */
.wallet-auth-graphic {
    display: block;
    max-width: 150px;
    height: auto;
    margin: 6px auto 8px;
}

.wallet-auth-card .wallet-empty-icon {
    display: none !important;
}

/* KAN-423: pull-to-refresh indicator. Parked above its anchor (JS sets `top` to the header
   height, which varies with the notch) and z-indexed under the fixed header (999) so it emerges
   from behind it as the guest pulls. wallet.js drives transform/opacity during the pull. */
.wallet-ptr {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--wallet-theme-icon, #9aa3af);
    font-size: 16px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
    opacity: 0;
    transform: translateY(-50px);
    pointer-events: none;
}

/* past the threshold: brand-coloured, so the guest can feel when the pull will take. -fill, not
   -theme: the chip is white, so a near-white brand would make the arrow disappear (KAN-432). */
.wallet-ptr.is-ready {
    color: var(--wallet-theme-fill, #16181d);
}

.wallet-ptr.is-refreshing i {
    animation: wallet-ptr-spin 0.8s linear infinite;
}

@keyframes wallet-ptr-spin {
    to {
        transform: rotate(360deg);
    }
}

/* KAN-524: reduced-motion guard. The spinner is the only feedback that the pull actually
   took, so it must not vanish: freeze it as a static glyph instead of hiding it. Must stay
   AFTER the rule above; @media adds no specificity, so this wins on source order alone. */
@media (prefers-reduced-motion: reduce) {
    .wallet-ptr.is-refreshing i {
        animation: none;
    }
}

/* No message set (reset path sets .text('')): show nothing, not an empty card. */
#divNoneToDisplay:empty,
#divRepresentativesNone:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
}
