/* ==========================================================================
   Avanta Web styles
   Sections: design tokens, fonts, top level & base, bootstrap button
   overrides, forms & validation, tables, cards & panels, action buttons,
   schedule appointment, flex benefits, store, cart & checkout, transactions
   ========================================================================== */

/*----------------------- DESIGN TOKENS --------------------*/
:root {
    --avanta-navy: #093c58;
    --avanta-navy-tint: #c9dae4;
    --avanta-navy-wash: #eef4f8;
    --avanta-red: #b32121;
    --avanta-darkest-red: #871b1c;
    --avanta-dark-red: #9e1c21;
    --avanta-off-white: #fdfdff;
    --avanta-lighter-gray: hwb(0 95% 5%);
    --avanta-light-gray: #ccc;
    --avanta-green: #0f691f;
    --avanta-dark-green: #0d5e1b;
    /* Bookable appointment slots. Kept separate from --avanta-green because that one is a text/icon
       colour on white, whereas these are fills carrying white text on top.
       #17803a rather than the brighter #22ae50 it started as: white on #22ae50 is only 2.9:1, which
       fails WCAG AA for text this size. This is 5.0:1. Anything lighter needs dark label text
       instead of white. */
    --avanta-slot-green: #17803a;
    --avanta-slot-green-dark: #125f2c;
    --avanta-amber: #a05f00;
    --avanta-amber-tint: #fff4e5;

    --page-gutter-narrow: 5vw;
    --header-height: 75px;

    /* The site's side inset above 840px - header content, .page, and the rail's text all line up
       on it. Change here to widen or narrow the whole page. */
    --page-inset: 8vw;

    /* Width of the left rail column, matched by .sidebar so the content column starts past it. */
    --nav-rail-width: 20vw;

    /* Breathing room between the rail's panel edge and the content column. */
    --nav-rail-gutter: 20px;
    
    /* Notif bell & hamburger layout width fix */
    --nav-toggler-width: 3.5rem;
    --nav-toggler-right: 2.25rem;
}

/*----------------------- FONTS --------------------*/
@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('fonts/Nunito-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

.mud-typography, .mud-input, .mud-button-label {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
}

/*----------------------- TOP LEVEL & BASE ----------------------------*/
html, body {
    font-family: 'Nunito', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

.background-pattern {
    background-color: var(--avanta-off-white);
    background: radial-gradient(circle, transparent 20%, var(--avanta-off-white) 20%, var(--avanta-off-white) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, var(--avanta-off-white) 20%, var(--avanta-off-white) 80%, transparent 80%, transparent) 27.5px 27.5px, linear-gradient(#f8f8ff 2.2px, transparent 2.2px) 0 -1.1px, linear-gradient(90deg, #f8f8ff 2.2px, var(--avanta-off-white) 2.2px) -1.1px 0;
    background-size: 55px 55px, 55px 55px, 27.5px 27.5px, 27.5px 27.5px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}

a {
    color: var(--avanta-navy)
}

a:hover {
    color: var(--avanta-dark-red);
}

/* FocusOnNavigate lands here after every route change. Programmatic focus counts as
   focus-visible on load, so any ring here is drawn for mouse users too - no ring at all:
   the heading is not interactive, and the focus itself still serves screen readers. */
h1:focus {
    outline: none;
}

/*----------------------- KEYBOARD FOCUS ----------------------------*/
/* One ring for every custom-styled control; none of these classes had a designed
   focus state, leaving keyboard users with no marker on the solid navy/red fills.
   outline-offset keeps a gap of page background so the ring reads on any fill. */
.action-btn:focus-visible, .continue-btn:focus-visible, .back-btn:focus-visible,
.time-slot-btn:focus-visible, .provider-filter-header:focus-visible,
.provider-filter-row:focus-visible, .category-pill:focus-visible,
.add-to-cart-btn:focus-visible, .qty-btn:focus-visible, .page-nav-btn:focus-visible,
.clear-cart-btn:focus-visible, .delivery-toggle-btn:focus-visible,
.checkout-btn:focus-visible, .nav-link:focus-visible,
.request-ack input:focus-visible {
    outline: 3px solid var(--avanta-navy);
    outline-offset: 2px;
}

/* Step headings receive focus only programmatically, to announce the new wizard
   step; they are not interactive, so no ring. */
.step-panel h5:focus, .step-panel:focus {
    outline: none;
}

.click-hover-text:hover {
    color: var(--avanta-navy);
    cursor: pointer;
}

.larger-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.w-80 {
    width: 80%;
}

@media (max-width: 840px) {
    .desktop-only {
        display: none;
    }
}

@media (min-width: 841px) {
    .mobile-only {
        display: none;
    }
}

/*----------------------- BOOTSTRAP BUTTON OVERRIDES ----------------------------*/
.btn-primary {
    color: #ffffff;
    background-color: var(--avanta-navy);
    border-width: 0;
    height: 40px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .btn-primary:hover, .btn-primary:active {
        background-color: var(--avanta-navy);
        filter: brightness(0.9);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    /* No :focus:hover companion here on purpose. One used to paint dark red, so the same button
       hovered darkened navy before it was clicked and red afterwards. Hover is the rule above,
       whatever the focus state - which is also what .navy-bg does for the solid action buttons. */
    .btn-primary:focus {
        background-color: var(--avanta-navy);
        box-shadow: none !important;
    }

    .btn-primary:disabled {
        background-color: var(--avanta-navy);
    }

    .btn-primary, .btn.btn-lg {
        border-radius: 12px;
        font-weight: 600;
    }

.btn.btn-lg {
    color: #ffffff;
    background-color: var(--avanta-navy);
    height: 50px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn.btn-lg:hover {
    background-color: var(--avanta-dark-red);
    box-shadow: rgba(50, 50, 93, 0.25) 0 50px 100px -20px, rgba(0, 0, 0, 0.3) 0 30px 60px -30px, rgba(10, 37, 64, 0.35) 0 -2px 6px 0 inset;
}

.btn-lg:focus {
    box-shadow: none !important;
}

.btn:focus, .btn:active:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/*----------------------- FORMS & VALIDATION ----------------------------*/
.form-control:focus {
    box-shadow: none !important;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

/*----------------------- TABLES (legal document content) ----------------------------*/
table {
    width: 100%;
}

th {
    text-align: center;
    padding-bottom: 10px;
}

td {
    text-align: center;
    padding-bottom: 10px;
}

tr:not(:first-child) td {
    padding-top: 15px;
}

tr:last-child td {
    padding-bottom: 0;
}

tr {
    border-bottom: 1px solid var(--avanta-light-gray); /* Border between rows */
    vertical-align: top;
}

tr:last-child {
    border-bottom: none; /* Remove border for the last row */
}

/*----------------------- CARDS & PANELS ----------------------------*/
/* Paints nothing - navy moved to .page-hero. Block, not flex: .content-area and .step-panel pair flex:1 with overflow-y:auto, which as flex items collapses them to zero height. */
.custom-home-card {
    display: block;
}

/* The page's title band. Rounded card on desktop, edge to edge under the header on narrow.
   The gap beneath it is the band's own margin rather than top padding on whatever follows: pages
   built around .content-area / .step-panel used to supply it, so the pages without one sat flush
   against the band. Stated here, every page clears it by the same amount. */
.page-hero {
    background-color: var(--avanta-navy);
    color: var(--avanta-off-white);
    border-radius: 10px;
    padding: 20px 24px;
    margin: 16px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.page-hero h1 {
    margin: 0;
    font-size: 1.75rem;
}

/* Band carrying something beside the title rather than beneath it - Avanta Mart's wallet status.
   Everything in it inherits the band's off-white, so a status reads as white on navy like the title. */
.page-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Second line in the band - the member greeting on Home. Tinted so it sits under the title. */
.page-hero-sub {
    margin: 6px 0 0;
    font-size: 0.95rem;
    color: var(--avanta-navy-tint);
}

/* Two names for one thing: .content-area holds a page that does not change under the member,
   .step-panel one step of a wizard. Identical apart from the entry animation below.

   Neither paints a surface any more. They used to fill off-white with 16px corners, which on the
   page's own near-identical off-white showed up as nothing but a rounded outline - a card boundary
   around content that had no reason to be in a card. The rows inside (.action-btn, .primary-panel)
   bring their own fill, so everything stays readable sitting straight on the page. */
.content-area,
.step-panel {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    color: #000000
}

/* The only thing that separates the two: a step slides in as the wizard advances. */
.step-panel {
    animation: slide-in 0.25s ease-out;
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Narrow screens take the band full width and stop the panel below it being a panel at all, so the rows inside get the full width rather than a channel inset twice over. */
@media (max-width: 840px) {
    /* Negative gutter cancels .page's margins so the band meets the header seam; the matching padding puts its text back in line with the content below. */
    .page-hero {
        margin: 0 calc(-1 * var(--page-gutter-narrow)) 16px;
        border-radius: 0 0 12px 12px;
        padding: 18px var(--page-gutter-narrow) 22px;
    }

    .page-hero h1 {
        font-size: 1.4rem;
    }
}

/* Sized and centered like .primary-panel: both pages that show this callout stack it
   with those cards, and at full width it read as a separate band rather than one of them. */
.info-panel {
    background: var(--avanta-off-white);
    border-left: 4px solid var(--avanta-darkest-red);
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 14px;
    color: var(--avanta-navy);
    width: 100%;
    max-width: 670px;
    box-sizing: border-box;
    margin: 0.5rem auto;
}

.back-btn {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    background: none;
    border: none;
    color: var(--avanta-navy);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
}

.back-btn:hover {
    color: var(--avanta-dark-red);
}

/* The shared card row - icon | text | trailing element, on an off-white card. .primary-panel states
   one, .action-btn is the same row made clickable, and the whole block below was duplicated verbatim
   between them. Modifiers (.primary-panel-w-btn, .continue-btn, .navy-bg and friends) all tie on
   specificity with this, so they have to stay further down the file to win. */
.primary-panel,
.action-btn {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 16px;
    width: 100%;
    max-width: 670px;
    box-sizing: border-box;

    background: var(--avanta-off-white);
    color: var(--avanta-navy);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    padding: 1rem 1.25rem;
    margin: 0.5rem auto;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.primary-panel .primary-icon {
    font-size: 1.5rem;
    color: var(--avanta-navy);
    justify-self: start;
    box-sizing: border-box;
    padding: 5px;
}

.primary-panel .primary-text {
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow-wrap: break-word;
    box-sizing: border-box;
    padding: 5px;
}

/* The one panel on the site that reports a good outcome. Green earns the eye here in a way
   the navy every other icon uses does not, and it reads before the words do. */
.primary-panel .primary-icon.icon-success {
    color: var(--avanta-green);
}

/* Sits above .primary-title, so it has to out-weigh it: darkest red rather than the button red,
   which fails contrast at this size, and a shade larger than the title it precedes. Members reading
   this are often older, so the distinction between a request and a booking cannot rest on colour
   alone - the copy says NOT in words, and role="alert" carries it to a screen reader. */
.primary-panel .primary-alert,
.info-panel .primary-alert {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--avanta-darkest-red);
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}

/* Sole child of the callout card, so it owns the whole line and needs no trailing gap. */
.info-panel .primary-alert {
    display: block;
    margin-bottom: 0;
}

.primary-panel .primary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--avanta-navy);
    overflow-wrap: break-word;
}

.primary-panel .primary-subtitle {
    font-size: clamp(12px, 0.95rem, 30px);
    font-weight: 400;
    color: #000000;
    margin-top: 2px;

    max-width: 60ch;
    overflow-wrap: break-word;
}

.primary-panel-w-btn {
    grid-template-columns: 10% 65% 25%;
    column-gap: 0;
}

/* That 25% column is under 100px on a phone, narrow enough to wrap even a short label, so the action
   drops beneath the text and takes the row's full width instead. */
@media (max-width: 840px) {
    .primary-panel-w-btn {
        grid-template-columns: auto 1fr;
        row-gap: 10px;
    }

    .primary-panel-w-btn .panel-btn-cell {
        grid-column: 1 / -1;
    }
}

/*----------------------- ACTION BUTTONS ----------------------------*/
/* Card row shared with .primary-panel above; being clickable is the only difference. */
.action-btn {
    cursor: pointer;
}

.action-btn:active {
    transform: scale(0.98);
}

.action-btn:hover {
    background: var(--avanta-lighter-gray);
}

.action-btn:disabled, .action-btn:disabled:hover,
.action-btn:disabled:focus, .action-btn:disabled:active{
    transform: scale(1);
    background: var(--avanta-light-gray);
    cursor: not-allowed;
}

.action-btn .btn-icon {
    font-size: 1.5rem;
    color: var(--avanta-navy);
    justify-self: start;
}

.action-btn .btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.action-btn .btn-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--avanta-navy);
}

.action-btn .btn-subtitle {
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    margin-top: 2px;
}

.action-btn .btn-arrow {
    font-size: 1rem;
    color: var(--avanta-navy);
    justify-self: end;
}

/* Home page action buttons use slightly smaller text */
.primary-btn .btn-title {
    font-size: 1.05rem;
}

.primary-btn .btn-subtitle {
    font-size: 0.85rem;
}

/* Full-width row with no leading icon: the label takes the 1fr column and the arrow, where there is
   one, sits beside it. Labels range left, matching the Close button every dialog pairs this with.
   A .center-btn twin used to exist for a centred label; it also carried the white text that
   .navy-bg and .red-bg now own, and having two variants only meant the two buttons in a dialog
   disagreed on where their labels sat. */
.continue-btn {
    justify-content: center;
    grid-template-columns: 1fr auto;
    width: 100%;
    column-gap: 0;
}

/* The action in the trailing column of a .primary-panel row. .action-btn on its own is sized to be
   a full-width row in its own right, so dropped into a 25% column its 1.35rem label wrapped onto two
   lines and its 1rem padding made the button taller than the text it sat beside. Sized just under
   .primary-title so it reads as the row's action rather than the loudest thing on the page. */
.panel-btn {
    grid-template-columns: 1fr;
    justify-content: center;
    column-gap: 0;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
}

.panel-btn .btn-text {
    text-align: center;
}

.panel-btn .btn-title {
    font-size: 0.95rem;
}

.navy-bg {
    background-color: var(--avanta-navy);
}

.navy-bg:active, .navy-bg:focus, .navy-bg:hover {
    background: #092d45;
}

/* A solid button keeps its colour when disabled, or its white label would sit on light grey. */
.action-btn.navy-bg:disabled, .action-btn.navy-bg:disabled:hover,
.action-btn.navy-bg:disabled:focus, .action-btn.navy-bg:disabled:active {
    background: var(--avanta-navy);
    opacity: 0.55;
}

.red-bg {
    background-color: var(--avanta-red);
}

.red-bg:active, .red-bg:focus, .red-bg:hover {
    background: var(--avanta-dark-red);
}

/* A solid background owns its own foreground, so a dark fill is never applied without the label
   turning white with it. The two fills used to state this separately, and navy's .btn-title was
   covered by neither - it inherited its white from a layout class instead. */
.navy-bg .btn-title,
.navy-bg .btn-arrow,
.navy-bg .primary-title,
.red-bg .btn-title,
.red-bg .btn-arrow,
.red-bg .primary-title {
    color: white;
}

/*----------------------- SCHEDULE APPOINTMENT ----------------------------*/
.reason-panel {
    margin-top: 8px;
}

.reason-input .mud-input-outlined {
    border-radius: 12px !important;
}

.reason-input .mud-input-outlined:focus-within,
.reason-input .mud-input-outlined.mud-shrink {
    border-color: var(--avanta-navy) !important;
}

/* A field answered on an earlier step is tinted, so it does not read as editable. */
.readonly-input .mud-input-outlined,
.readonly-input .mud-input-outlined:focus-within,
.readonly-input .mud-input-outlined:hover {
    background: var(--avanta-lighter-gray);
    border-color: var(--avanta-light-gray) !important;
}

.readonly-input .mud-input-slot,
.readonly-input .mud-input-adornment {
    cursor: not-allowed;
}

/* Optional provider filter above the calendar, collapsed until the header is clicked. */
.provider-filter {
    width: 100%;
    max-width: 670px;
    margin: 0 auto;
}

.provider-filter-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 16px;
    width: 100%;
    box-sizing: border-box;
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    padding: 0.85rem 1.25rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.15s ease;
}

.provider-filter-header:hover {
    background: var(--avanta-lighter-gray);
}

.provider-filter-icon,
.provider-filter-arrow {
    font-size: 1.1rem;
    color: var(--avanta-navy);
}

.provider-filter-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.provider-filter-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--avanta-navy);
}

.provider-filter-subtitle {
    font-size: 0.9rem;
    font-weight: 400;
    color: #000000;
    margin-top: 2px;
}

.provider-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
    padding: 10px 4px 4px;
}

.provider-filter-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--avanta-light-gray);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.provider-filter-row:hover {
    background: var(--avanta-lighter-gray);
}

.provider-filter-row.selected {
    border-color: var(--avanta-navy);
    background: var(--avanta-lighter-gray);
    box-shadow: inset 0 0 0 1px var(--avanta-navy);
}

.provider-filter-row .provider-check {
    font-size: 1.25rem;
    color: var(--avanta-navy);
}

.provider-filter-row .provider-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.provider-filter-row .provider-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--avanta-navy);
}

.provider-filter-row .provider-specialty {
    font-size: 0.875rem;
    font-weight: 400;
    color: #000000;
    margin-top: 2px;
}

.provider-filter-clear {
    margin: 4px 0 0;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

/* Date & time step: calendar on the left, everything else in a column to its right. */
.datetime-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

/* Left to its natural size so the calendar stays readable. */
.datetime-calendar {
    flex: 0 0 auto;
}

.datetime-details {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Panels centre themselves via auto side margins, which would misalign them here. */
.datetime-details .primary-panel,
.datetime-details .provider-filter {
    margin-left: 0;
    margin-right: 0;
}

.time-slot-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Desired-time entry: separate hour and minute boxes, then AM/PM and the dial toggle. */
.time-input-header {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--avanta-navy);
}

/* Shrink-wraps instead of stretching down the panel, so the boxes sit together. */
/* nowrap throughout: the boxes, AM/PM and the clock all stay on one row. */
.time-input-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    align-self: flex-start;
    width: fit-content;
    gap: 8px;
}

.time-hm-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
}

/* Two digits and the floating label, with a floor so the boxes are never squeezed. */
.time-part-field {
    flex: 0 0 64px;
    min-width: 64px;
    max-width: 64px;
}

.time-part-field input {
    text-align: center;
}

.time-part-separator {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--avanta-navy);
    line-height: 1;
}

.time-meridiem {
    flex: 0 0 auto;
    margin-left: 4px;
}

.time-clock-btn {
    color: var(--avanta-navy);
    margin-left: 4px;
}

/* Only the picker's input is hidden, so it costs no line of its own while the clock
   button opens it. Never put a width on .time-dial-picker itself: the dial's popover
   sizes off that root, and constraining it breaks the card open. */
.time-dial-picker .mud-input-control {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

.time-slot-header {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--avanta-navy);
}

.time-slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}

/* Bookable slots. Green because this is the affirmative choice on the page - the previous red read
   as a warning on the one control the member is meant to click. The dashed amber .not-recommended
   variant below is unchanged and still carries the "we are not open then" signal. */
.time-slot-btn {
    flex: 0 0 auto;
    background: var(--avanta-slot-green);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.time-slot-btn:hover {
    background: var(--avanta-slot-green-dark);
}

.time-slot-btn:active {
    transform: scale(0.96);
}

.time-slot-btn.selected {
    background: var(--avanta-navy);
    box-shadow: 0 0 0 2px var(--avanta-off-white), 0 0 0 4px var(--avanta-navy);
}

.time-slot-btn.not-recommended {
    background: #ffffff;
    color: var(--avanta-amber);
    border: 2px dashed var(--avanta-amber);
    padding: 8px 14px;
}

.time-slot-btn.not-recommended:hover {
    background: var(--avanta-amber-tint);
}

.time-slot-btn.not-recommended.selected {
    background: var(--avanta-amber);
    color: #ffffff;
    border-style: solid;
    box-shadow: 0 0 0 2px var(--avanta-off-white), 0 0 0 4px var(--avanta-amber);
}

/* Narrow screens stack the calendar above the rest and centre the column under it. */
@media (max-width: 840px) {
    .datetime-layout {
        flex-direction: column;
        align-items: center;
    }

    .datetime-details {
        width: 100%;
        align-items: center;
    }

    .time-slot-section {
        align-items: center;
    }

    .time-input-row {
        align-self: center;
        gap: 4px;
    }

    /* Still floored, so the AM/PM toggle and clock give up room before these do. */
    .time-part-field {
        flex: 0 0 56px;
        min-width: 56px;
        max-width: 56px;
    }

    .time-hm-group {
        gap: 4px;
    }

    .time-meridiem,
    .time-clock-btn {
        margin-left: 0;
    }

    .time-slot-grid {
        justify-content: center;
    }
}

/*----------------------- FLEX BENEFITS WALLET ----------------------------*/
.wallet-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--avanta-navy);
    font-size: 2.5rem;
    font-weight: 800;
}

.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.summary-row.summary-heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--avanta-navy);
    border-bottom: 1px solid var(--avanta-light-gray);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/*----------------------- STORE ----------------------------*/
.category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1rem;
}

.category-pill {
    background: var(--avanta-off-white);
    color: var(--avanta-navy);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.category-pill:hover {
    border-color: var(--avanta-navy);
}

.category-pill.active {
    background: var(--avanta-green);
    border-color: var(--avanta-green);
    color: var(--avanta-off-white);
}

.store-main-card {
    background-color: var(--avanta-off-white);
    color: var(--avanta-navy);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.store-card {
    background-color: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    overflow: visible;
    display: flex;
    flex-direction: column;
    min-height: 380px;
    transition: box-shadow 0.15s ease;
}

/* Guests get no add-to-cart row, so the height held for one is dead space. */
.store-card:not(:has(.store-item-actions)) {
    min-height: 0;
    padding-bottom: 12px;
}

.store-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.store-item-image-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 140px;
    background: white;
    border-radius: 16px 16px 0 0;
    position: relative;
    overflow: hidden;
}

.store-item-image-wrap img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.store-item-body {
    flex-grow: 1;
    padding: 10px 12px 0 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.store-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--avanta-navy);
    margin-bottom: 2px;
}

.store-item-meta {
    font-size: 0.85rem;
    font-weight: 400;
    color: #000000;
    margin: 0;
}

.store-item-actions {
    padding: 10px 12px 12px 12px;
    margin-top: auto;
}

.add-to-cart-btn {
    width: 100%;
    background: var(--avanta-green);
    color: var(--avanta-off-white);
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.add-to-cart-btn:hover {
    background: var(--avanta-dark-green);
}

.add-to-cart-btn:active {
    transform: scale(0.98);
}

.store-item-details-btn {
    width: 100%;
    background: var(--avanta-navy);
    color: var(--avanta-off-white);
    border: none;
    border-radius: 999px;
    padding: 0.6rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.15s ease, transform 0.1s ease;
    
    :hover {
        background: var(--avanta-darkest-red);
    }
    :active {
        transform: scale(0.98);
    }
}

.qty-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.qty-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--avanta-green);
    color: var(--avanta-off-white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.4rem;
    transition: background-color 0.15s ease;
}

.qty-btn:hover {
    background: var(--avanta-dark-green);
}

.qty-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--avanta-navy);
    min-width: 16px;
    text-align: center;
}

.in-cart-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.store-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
}

.page-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    color: var(--avanta-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.page-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.page-label {
    font-weight: 600;
    color: var(--avanta-navy);
}

/*----------------------- CART & CHECKOUT ----------------------------*/
/* Horizontal item row (cart, checkout preview, history) */
.cart-item-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background-color: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    overflow: hidden;
    min-height: 130px;
    margin-bottom: 12px;
}

.cart-item-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 22%;
    min-width: 180px;
    max-width: 220px;
    max-height: 220px;
    background: white;
    position: relative;
    flex-shrink: 0;
}

.cart-item-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    padding: 8px;
}

.cart-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 24px;
    min-width: 0;
}

.cart-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--avanta-navy);
    margin-bottom: 2px;
}

.cart-item-meta {
    font-size: 1rem;
    font-weight: 400;
    color: #000000;
    margin: 0;
}

.cart-item-price {
    font-size: 1.05rem;
    color: var(--avanta-navy);
    margin: 2px 0 0 0;
}

.cart-item-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: auto;
    margin-left: auto;
    padding: 8px 24px 8px 8px;
    flex-shrink: 0;
}

.cart-item-qty-static {
    background: white;
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 700;
    color: var(--avanta-navy);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* Compact variant - the cart page's rows, sized down so five of them sit in
   proportion with the summary card and pager instead of dominating the page. */
.cart-item-row-sm {
    min-height: 96px;
}

.cart-item-row-sm .cart-item-image {
    min-width: 110px;
    max-width: 130px;
    max-height: 130px;
}

.cart-item-row-sm .cart-item-body {
    padding: 12px 16px;
}

.cart-item-row-sm .cart-item-title {
    font-size: 1.1rem;
}

.cart-item-row-sm .cart-item-meta {
    font-size: 0.9rem;
}

.cart-item-row-sm .cart-item-price {
    font-size: 0.95rem;
}

.cart-item-row-sm .cart-item-side {
    padding: 8px 16px 8px 8px;
}

.cart-item-row-sm .qty-btn {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
}

.cart-item-row-sm .qty-value {
    font-size: 1.05rem;
}

/* Clear-cart sits right-aligned above the rows it empties; red on quiet chrome
   so the destructive action reads as such without shouting. */
.cart-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.clear-cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--avanta-dark-red);
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.clear-cart-btn:hover {
    background: var(--avanta-dark-red);
    color: var(--avanta-off-white);
}

/* Order summary card */
.order-summary-card {
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 20px;
    margin-bottom: 16px;
}

.order-summary-card .summary-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--avanta-navy);
    margin-bottom: 12px;
}

.order-summary-card .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
    color: var(--avanta-navy);
    margin-bottom: 8px;
}

.order-summary-card .summary-row.total {
    font-weight: 800;
    font-size: 1.05rem;
    border-top: 1px solid var(--avanta-light-gray);
    padding-top: 10px;
    margin-top: 4px;
}

/* Delivery type toggle (Delivery / Pickup) */
.delivery-toggle-group {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.delivery-toggle-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    padding: 14px 8px;
    color: var(--avanta-navy);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.delivery-toggle-btn i {
    font-size: 1.3rem;
}

.delivery-toggle-btn:hover {
    border-color: var(--avanta-navy);
}

.delivery-toggle-btn.active {
    background: var(--avanta-navy);
    border-color: var(--avanta-navy);
    color: var(--avanta-off-white);
}

/* Address selection rows */
.address-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.address-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.address-row:hover {
    border-color: var(--avanta-navy);
}

.address-row .address-text p {
    margin: 0;
    color: var(--avanta-navy);
}

/* Checkout / Place Order CTA */
.checkout-btn {
    width: 100%;
    background: var(--avanta-green);
    color: var(--avanta-off-white);
    border: none;
    border-radius: 999px;
    padding: 0.9rem 1.5rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.checkout-btn:hover {
    background: var(--avanta-dark-green);
}

.checkout-btn:active {
    transform: scale(0.98);
}

.checkout-btn:disabled {
    background: var(--avanta-light-gray);
    color: #8a94a6;
    cursor: not-allowed;
}

/*----------------------- TRANSACTIONS / HISTORY ----------------------------*/
.transaction-card {
    background: var(--avanta-off-white);
    border: 1px solid var(--avanta-light-gray);
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 18px;
    margin-bottom: 16px;
}

.transaction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--avanta-light-gray);
}

.transaction-header .transaction-date {
    font-weight: 700;
    color: var(--avanta-navy);
}

.transaction-header .transaction-status {
    font-weight: 600;
    color: var(--avanta-green);
}

.transaction-id {
    font-size: 0.85rem;
    color: #000000;
    margin-bottom: 10px;
}

/* Ordered items as a quiet name + quantity list - the full image panels made
   each transaction card taller than the history page could afford. */
.transaction-item-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--avanta-light-gray);
    border-radius: 12px;
    background: white;
    overflow: hidden;
}

.transaction-item-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 8px 14px;
}

.transaction-item-line + .transaction-item-line {
    border-top: 1px solid var(--avanta-lighter-gray);
}

.transaction-item-name {
    color: var(--avanta-navy);
    font-weight: 600;
    min-width: 0;
}

.transaction-item-qty {
    color: var(--avanta-navy);
    font-weight: 700;
    white-space: nowrap;
}

.transaction-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 12px;
}

.transaction-footer h5 {
    margin-bottom: 6px;
    color: var(--avanta-navy);
}


.flex-container-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;

    > * {
        height: 100%;
        width: 95%;
        flex-basis: content;
    }
}

/* Labelled fields sharing a row: equal shares at any width, top-aligned so a validation message under one cannot shift the other. */
.field-row {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 1rem;
}

.field-row > * {
    flex: 1 1 0;
    min-width: 0;
}

.field-row .mud-input-control {
    width: 100%;
}

/* Acknowledgement above the submit button on the request summary step. A label wrapping the input so
   the text is part of the hit target - the box alone is a small target on a phone, which is where
   most of these requests come from. */
.request-ack {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    margin: 4px 0 14px;
    padding: 12px 14px;
    border: 1px solid var(--avanta-light-gray);
    border-radius: 8px;
    background: var(--avanta-off-white);
    cursor: pointer;
    text-align: left;
}

/* 2px nudge lines the box up with the first line of text rather than the centre of the block. */
.request-ack input[type="checkbox"] {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--avanta-navy);
    cursor: pointer;
}

.request-ack-text {
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--avanta-navy);
}

/* Stacks a dialog's actions instead of the side-by-side pair the other dialogs use. The
   delete-account dialog wants the safe choice above the destructive one rather than beside it,
   so the two are never a coin flip at a glance. */
.dialog-action-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Destructive navigation row: the Account deletion entry at the foot of Settings. Colour only -
   it keeps .action-btn's own field so it still reads as a row rather than a filled button. The
   whole label is red rather than just the word "deletion": the phrase is one resource string in
   five languages whose word order and grammar differ, so there is no second word to colour. */
.action-btn.danger-btn .btn-title,
.action-btn.danger-btn .btn-icon {
    color: var(--avanta-red);
}

/* ---------------------------------------------------------------------------
   Notifications page

   Mirrors the app's layout: one row per setting, label left, control hard right.
   Sections exist so the per-notification-type rows planned to sit under each
   channel have a place to go without the markup being rearranged for them.
   --------------------------------------------------------------------------- */

/* Set on the page rather than on each rule so every descendant scales together. */
.notif-pref-page {
    font-size: 1.1rem;
}

.notif-pref-list {
    margin-top: 8px;
}

.notif-pref-section + .notif-pref-section {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 10px;
    padding-top: 10px;
}

.notif-pref-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    min-height: 44px;
}

.notif-pref-label {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 700;
    color: var(--avanta-navy, #093c58);
    /* The label is a <label for>, so clicking the text hits the switch. */
    cursor: pointer;
}

.notif-pref-row-section .notif-pref-label {
    font-size: 1.15rem;
}

/* Sits under its label rather than beside it - a second clause on the same line
   wraps into the switch at narrow widths. */
.notif-pref-hint {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #5a5a5a;
    margin-top: 2px;
}

.notif-pref-control {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Bootstrap's switch is 2em x 1em. Two pixels on each axis, absorbed by
   .notif-pref-row's height so nothing reflows. */
.notif-pref-switch {
    margin: 0;
    padding: 0;
    min-height: 0;
}

.notif-pref-switch .form-check-input {
    width: calc(2em + 2px);
    height: calc(1em + 2px);
    margin: 0;
    cursor: pointer;
}

.notif-pref-switch .form-check-input:checked {
    background-color: var(--avanta-navy, #093c58);
    border-color: var(--avanta-navy, #093c58);
}

.notif-pref-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 1px solid rgba(9, 60, 88, 0.35);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.85rem;
    color: var(--avanta-navy, #093c58);
    white-space: nowrap;
}

.notif-pref-info-btn:hover {
    background: rgba(9, 60, 88, 0.08);
}

.notif-pref-dialog-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--avanta-navy, #093c58);
}

.notif-pref-dialog-body {
    font-size: 1rem;
    line-height: 1.5;
}