/*
 * 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;
    -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;
    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;
}


/* ─── 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 */
.wallet-ui-nav-header {
    float: right !important;
    font-size: 20px !important;
    font-weight: 200 !important;
    opacity: 0.75 !important;
    margin-top: -1px !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;
    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). */
.offers-heading {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 8px 0 16px !important;
}

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

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

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

.offers-outlet-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 2px 8px;
}

.offers-outlet-name {
    font-size: 16px;
    font-weight: 600;
    color: #222;
}

.offers-outlet-count {
    font-size: 12px;
    color: #9a9a9a;
    white-space: nowrap;
}

/* 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: block;
    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-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: Active/Expired offers filter, replaces the jQuery Mobile controlgroup + ui-btn-active/ui-state-persist toggle */
.wallet-filter-toggle {
    display: flex;
    width: 300px;
    max-width: calc(100% - 4px);
    margin: 14px auto 12px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    overflow: hidden;
}

/* !important + appearance:none needed: iOS Safari otherwise renders <button> as a native
   rounded pill, and global button styles add their own background/radius. Flat-fill the frame. */
.wallet-filter-toggle .filter-btn {
    flex: 1 1 50%;
    padding: 10px 12px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f4f4f4 !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.wallet-filter-toggle .filter-btn + .filter-btn {
    border-left: 1px solid #cfcfcf !important;
}

.wallet-filter-toggle .filter-btn.active {
    background: #333 !important;
    color: #fff !important;
}

/* 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);
    background: var(--wallet-theme, #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;
}

.wallet-auth-card .wallet-btn {
    width: 100%;
    margin-top: 12px;
    white-space: nowrap;
    font-size: 15px;
    padding-left: 10px;
    padding-right: 10px;
    background: var(--wallet-theme, #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;
}

/* 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;
}
