/* =============================================================================
   Wallet Delivery Gate — Hyva additions
   Replaces the jQuery UI datepicker styles from FSS_BrippoWalletFix
   with a custom card-grid date picker.
   ============================================================================= */

/* The Luma sheet loaded with this one paints a black box behind the add-to-basket label (#product-addtocart-button > span). The Hyvä
   button is coloured itself (black, orange on hover), so the label must stay transparent or the box shows through the hover colour. */
#product-addtocart-button > span {
    background: transparent;
}

.fss-postcode-submit, .fss-coupon-apply
{
    width: auto;
    background: black;
    color: white;
    padding: 17px;
    border-radius: 5px;
}
/* =============================================================================
   Delivery date calendar (month grid)
   ============================================================================= */
.fss-cal-container {
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
    user-select: none;
}

.fss-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.fss-cal-month-name {
    font-family: "Roboto Black", sans-serif;
    font-size: 16px;
    letter-spacing: 0.02em;
    color: #000;
}

.fss-cal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 0 2px;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.fss-cal-nav:hover {
    border-color: #000;
    background: #000;
    color: #fff;
}

.fss-cal-nav-placeholder {
    visibility: hidden;
    border-color: transparent;
}

.fss-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.fss-cal-weekdays span {
    padding: 2px 0;
    text-align: center;
    font-family: "Roboto Bold", sans-serif;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #808080;
}

.fss-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.fss-cal-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: none;
    font-size: 14px;
    line-height: 1;
}

/* before the first bookable date, and the blanks that pad the first week */
.fss-cal-empty,
.fss-cal-other {
    color: #dcdcdc;
}

.fss-cal-avail {
    border-color: #e5e5e5;
    background: #f7f7f7;
    color: #000;
    font-family: "Roboto Bold", sans-serif;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}

.fss-cal-avail:hover {
    border-color: #000;
    background: #000;
    color: #fff;
}

.fss-cal-avail:active {
    transform: scale(0.94);
}

.fss-cal-avail:focus-visible {
    outline: 2px solid #e77f07;
    outline-offset: 2px;
}

.fss-cal-selected,
.fss-cal-selected:hover {
    border-color: #000;
    background: #000;
    color: #fff;
}

.fss-cal-unavail {
    color: #c8c8c8;
    text-decoration: line-through;
    cursor: not-allowed;
}

.fss-cal-legend {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1f1f1;
    font-size: 11px;
    color: #555;
}

.fss-cal-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fss-cal-legend span::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background: #f7f7f7;
}

.fss-cal-legend .fss-cal-legend-selected::before {
    border-color: #000;
    background: #000;
}

.fss-cal-legend .fss-cal-legend-unavail::before {
    border-color: transparent;
    background: none;
    content: "\2715";
    width: auto;
    height: auto;
    font-size: 10px;
    color: #c8c8c8;
}

/* date step heading sits centred over the calendar */
.fss-step-date .fss-step-intro {
    text-align: center;
}

/* One fixed height for every variant (Apple Pay logo 22px, Google Pay and the neutral button 20px) so the button
   fills the 55px reserved by trigger-placeholder.phtml and nothing below it moves when the script reveals it.
   align-items is centred here too: the shared FSS_BrippoWalletFix sheet sets align-items:end on the Apple Pay and
   Google Pay variants, which only looked right while the padding filled the box. The id outranks those selectors. */
body #fss-trigger-wrap .fss-express-trigger {
    height: 55px;
    padding-block: 0;
    align-items: center;
}
/* Lazy Stripe: neutral trigger showing both wallet marks until Stripe confirms which one this device has.
   Same white / black-border look as the Apple Pay and Google Pay triggers. */
body button.fss-express-trigger.fss-trigger-neutral {
    background: #fff;
    border: 1.5px solid #000;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
body button.fss-express-trigger.fss-trigger-neutral:hover {
    background: #000;
    color: #fff;
    opacity: 1;
}
body button.fss-express-trigger.fss-trigger-neutral:hover .fss-gpay-logo {
    filter: brightness(0) invert(1);
}
.fss-neutral-marks {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.fss-neutral-marks .fss-apple-logo {
    height: 20px;
}
.fss-neutral-marks .fss-gpay-title {
    font-size: 15px;
    font-weight: 600;
    margin-left: -0.25rem;
}
.fss-neutral-sep {
    width: 1px;
    height: 18px;
    background: currentColor;
    opacity: 0.35;
}

/* =============================================================================
   Express Checkout sheet: soft look (white sheet, rounded corners, pill buttons, step circles).
   Overrides the Luma base sheet (wallet-delivery-gate.css), which loads first. Ink #1d1d1d (hover #3d3d3d), soft grey #f6f6f6,
   line #e4e4e4, success #237a3d. No orange: focus is a dark border with a soft ring.
   ============================================================================= */
#fss-wallet-sheet .fss-sheet-backdrop { background: rgba(0, 0, 0, 0.45); }
#fss-wallet-sheet .fss-sheet-panel {
    max-width: 468px;
    border-radius: 20px;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.22);
    color: #1d1d1d;
}

/* header: padlock + title, round back / close */
#fss-wallet-sheet .fss-sheet-header {
    align-items: center;
    min-height: 0;
    padding: 16px 16px 4px 22px;
    border-bottom: 0;
    background: #fff;
    color: #1d1d1d;
}
#fss-wallet-sheet .fss-sheet-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-align: left;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #1d1d1d;
}
#fss-wallet-sheet .fss-sheet-title .fss-lock { flex: none; color: #237a3d; }
#fss-wallet-sheet .fss-sheet-back,
#fss-wallet-sheet .fss-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: #555;
}
#fss-wallet-sheet .fss-sheet-back { order: -1; margin-right: 4px; font-size: 26px; padding-bottom: 3px; }
#fss-wallet-sheet .fss-sheet-close { font-size: 24px; padding-bottom: 2px; }
#fss-wallet-sheet .fss-sheet-back:hover,
#fss-wallet-sheet .fss-sheet-close:hover { background: #efefef; color: #1d1d1d; }
#fss-wallet-sheet .fss-sheet-back:focus-visible,
#fss-wallet-sheet .fss-sheet-close:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 1px; }
#fss-wallet-sheet .fss-sheet-header { flex-wrap: nowrap; }
#fss-wallet-sheet .fss-sheet-title { flex: 1; }

/* stepper: 1 - 2 - 3 - 4, finished stages tick, the current one is outlined */
.fss-sheet-progress { flex-shrink: 0; padding: 10px 22px 0; }
.fss-stepper { display: flex; align-items: center; }
.fss-step-n {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 56px;
    font-size: 11px;
    color: #8a8a8a;
}
.fss-step-c {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid #c9c9c9;
    border-radius: 50%;
    background: #fff;
    font-size: 12px;
    font-weight: 600;
    color: #8a8a8a;
}
.fss-step-n.fss-cur,
.fss-step-n.fss-done { color: #1d1d1d; font-weight: 600; }
.fss-step-n.fss-cur .fss-step-c { border-color: #1d1d1d; color: #1d1d1d; }
.fss-step-n.fss-done .fss-step-c { border-color: #1d1d1d; background: #1d1d1d; color: #fff; }
.fss-step-ln { flex: 1; height: 2px; margin: 0 -2px 18px; background: #e4e4e4; }
.fss-step-ln.fss-on { background: #1d1d1d; }

#fss-wallet-sheet .fss-sheet-body { padding: 16px 22px; }
#fss-wallet-sheet .fss-step-intro { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
/* validation messages under the postcode and terms inputs sit centred */
#fss-wallet-sheet .fss-postcode-error,
#fss-wallet-sheet .fss-tnc-error { margin: 10px 0 0; text-align: center; font-size: 14px; color: #c0392b; }

/* order summary: soft grey card */
#fss-wallet-sheet .fss-order-summary { padding: 12px 14px; border: 0; border-radius: 12px; background: #f6f6f6; }
#fss-wallet-sheet .fss-order-img { border: 0; border-radius: 8px; }
#fss-wallet-sheet .fss-order-totals { border-top: 1px solid #e4e4e4; }
#fss-wallet-sheet .fss-order-total { border-top: 1px solid #e4e4e4; }
/* first sheet has no Shipping/Discount rows, so the total is the first child: its line would double the wrapper's */
#fss-wallet-sheet .fss-order-totals > .fss-order-total:first-child { border-top: 0; }
#fss-wallet-sheet .fss-order-total-label,
#fss-wallet-sheet .fss-order-total-value { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; }
#fss-wallet-sheet .fss-order-total-row-label { color: #6b6b6b; }
#fss-wallet-sheet .fss-shipping-free,
#fss-wallet-sheet .fss-order-discount-row .fss-order-total-label,
#fss-wallet-sheet .fss-order-discount-value { color: #237a3d; }
#fss-wallet-sheet .fss-order-divider { border-top-color: #e4e4e4; }

/* inputs: rounded, soft ring on focus */
#fss-wallet-sheet .fss-postcode-input,
#fss-wallet-sheet .fss-coupon-input {
    height: 50px !important;
    border: 1px solid #cfcfcf !important;
    border-radius: 10px !important;
}
#fss-wallet-sheet .fss-manual-fields input,
#fss-wallet-sheet .fss-time-select {
    height: 50px;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
}
#fss-wallet-sheet .fss-postcode-input:focus,
#fss-wallet-sheet .fss-coupon-input:focus,
#fss-wallet-sheet .fss-manual-fields input:focus,
#fss-wallet-sheet .fss-time-select:focus {
    border-color: #1d1d1d !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.09);
    outline: none;
}
#fss-wallet-sheet .fss-coupon-input[readonly] { border-color: #cfcfcf !important; background: #f6f6f6; color: #237a3d; }

/* buttons: pills like Add to Basket, lighter black on hover */
#fss-wallet-sheet .fss-postcode-submit,
#fss-wallet-sheet .fss-coupon-apply,
#fss-wallet-sheet .fss-time-confirm {
    height: 50px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: #1d1d1d;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    transition: background 0.15s;
}
#fss-wallet-sheet .fss-postcode-submit span,
#fss-wallet-sheet .fss-coupon-apply span { background: transparent; }
#fss-wallet-sheet .fss-postcode-submit:hover,
#fss-wallet-sheet .fss-coupon-apply:hover,
#fss-wallet-sheet .fss-time-confirm:hover:not(:disabled) { background: #3d3d3d; color: #fff; }
#fss-wallet-sheet .fss-postcode-submit:focus-visible,
#fss-wallet-sheet .fss-coupon-apply:focus-visible,
#fss-wallet-sheet .fss-time-confirm:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 2px; }
#fss-wallet-sheet .fss-time-confirm:disabled { background: #cfcfcf; color: #fff; cursor: not-allowed; }
#fss-wallet-sheet .fss-postcode-row,
#fss-wallet-sheet .fss-coupon-row { gap: 8px; }

/* links and found-address notice */
#fss-wallet-sheet .fss-manual-link,
#fss-wallet-sheet .fss-tnc-link { color: #333; text-decoration: underline; }
#fss-wallet-sheet .fss-manual-link:hover,
#fss-wallet-sheet .fss-tnc-link:hover { color: #000; }
#fss-wallet-sheet .fss-address-confirmed {
    border: 0;
    border-radius: 10px;
    background: #f0f8f2;
    color: #1f5d33;
}
#fss-wallet-sheet .fss-address-suggestions { border: 1px solid #cfcfcf; border-radius: 10px; }

/* delivery methods */
#fss-wallet-sheet .fss-method-card { padding: 14px; border: 1px solid #e4e4e4; border-radius: 12px; background: #fff; }
#fss-wallet-sheet .fss-method-card:hover { border-color: #1d1d1d; background: #fafafa; }
#fss-wallet-sheet .fss-method-name { font-weight: 600; }
#fss-wallet-sheet .fss-method-price { font-weight: 700; color: #1d1d1d; }
#fss-wallet-sheet .fss-method-badge { border: 0; border-radius: 999px; background: #f0f8f2; color: #237a3d; }

/* date calendar */
#fss-wallet-sheet .fss-cal-container { border-color: #e4e4e4; border-radius: 14px; }
#fss-wallet-sheet .fss-cal-nav { border: 0; border-radius: 50%; background: #f6f6f6; }
#fss-wallet-sheet .fss-cal-nav:hover { background: #1d1d1d; color: #fff; }
#fss-wallet-sheet .fss-cal-cell { border-radius: 10px; }
#fss-wallet-sheet .fss-cal-avail { border-color: transparent; background: #f6f6f6; font-family: inherit; font-weight: 600; }
#fss-wallet-sheet .fss-cal-avail:hover { border-color: #1d1d1d; background: #1d1d1d; color: #fff; }
#fss-wallet-sheet .fss-cal-avail:focus-visible { outline: 2px solid #1d1d1d; outline-offset: 2px; }
#fss-wallet-sheet .fss-cal-selected,
#fss-wallet-sheet .fss-cal-selected:hover { border-color: #1d1d1d; background: #1d1d1d; color: #fff; }
#fss-wallet-sheet .fss-cal-legend span::before { border-radius: 4px; }
#fss-wallet-sheet .fss-cal-legend .fss-cal-legend-selected::before { border-color: #1d1d1d; background: #1d1d1d; }

/* pay step */
#fss-wallet-sheet .fss-pay-summary { border: 0; border-radius: 12px; background: #f6f6f6; }
#fss-wallet-sheet .fss-pay-summary-header {
    background: transparent;
    border-bottom: 0;
    color: #1d1d1d;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#fss-wallet-sheet .fss-pay-check { color: #237a3d; }
#fss-wallet-sheet .fss-pay-row { border-top: 1px solid #e4e4e4; }
#fss-wallet-sheet .fss-pay-row-label { color: #6b6b6b; }
#fss-wallet-sheet .fss-pay-prompt {
    margin: 14px 0 8px;
    color: #444;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}
#fss-wallet-sheet .fss-tnc-check,
#fss-wallet-sheet .fss-marketing-consent-label input { accent-color: #1d1d1d; }
#fss-wallet-sheet .fss-tnc-label,
#fss-wallet-sheet .fss-marketing-consent-label { color: #222; font-size: 12.5px; }

/* the footer holds Stripe's wallet button (positioned over it by the script): only its rule softens */
#fss-wallet-sheet .fss-sheet-footer { border-top: 1px solid #efefef; }

/* secure tag closes every step */
.fss-sheet-secure {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    align-self: center;
    gap: 7px;
    margin: 4px 0 18px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: #f6f6f6;
    font-size: 12px;
    color: #444;
}
.fss-sheet-secure .fss-lock { flex: none; color: #237a3d; }
.fss-secure-text { font-weight: 600; }
.fss-secure-marks { margin-left: 0; font-size: 12px; color: #6b6b6b; }
.fss-secure-marks::before { content: "\00b7"; margin-right: 7px; }