/*
 * BoxNow checkout styles.
 *
 * Every value a shop might want to change is a custom property on the block
 * root, so a retheme is a few lines in the merchant's own stylesheet and never
 * an edit to this file — which the next product update would overwrite.
 *
 * Colours use hex tokens, which are easy for merchants to read and override.
 *
 * A slim route band and a clear selected-locker ticket carry the same visual
 * language as the merchant screens. Every shop-facing colour remains a custom
 * property on this block, so a merchant theme can still retheme it locally.
 */

.bn-checkout {
    --bn-font: "Inter", sans-serif;
    --bn-gap: 0.85rem;
    --bn-radius: 8px;
    --bn-border-color: #0000002e;
    --bn-surface: #00000009;
    --bn-text: inherit;
    --bn-muted: #000000a6;
    --bn-accent: #57c964;
    --bn-accent-text: #1b3037;
    --bn-accent-ink: #176d36;
    --bn-selected-surface: #d4edda;
    --bn-selected-border: #c3e6cb;
    --bn-selected-text: #155724;
    --bn-warning-surface: #bd8b2e14;
    --bn-warning-border: #bd8b2e73;
    --bn-error-surface: #b72f4114;
    --bn-error-border: #b72f4173;

    /*
     * Above anything a Pegasus shop is likely to stack. Measured on peg1: the
     * cookie bar and the search field sit at 999999 and the menus at 99999, and
     * BoxNow's popup iframe carries no z-index of its own — it ships
     * `position:fixed;top:0;left:0` and nothing else, so every one of those
     * covers the map. A custom property, so a shop that stacks even higher can
     * raise it without touching this file.
     */
    --bn-map-z: 2147483000;

    display: flex;
    flex-direction: column;
    gap: var(--bn-gap);
    margin-block: var(--bn-gap);
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--bn-border-color);
    border-inline-start: 4px solid var(--bn-accent);
    border-radius: var(--bn-radius);
    background: var(--bn-surface);
    color: var(--bn-text);
    font-family: var(--bn-font);
}

/* Inline mode sits inside the delivery form, so it uses one quiet outline. */
.bn-checkout--inline {
    border-inline-start: 1px solid var(--bn-border-color);
}

.bn-checkout input,
.bn-checkout button {
    font-family: var(--bn-font);
}

.bn-checkout__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.7rem;
    align-items: baseline;
    padding-block-end: 0.6rem;
    border-block-end: 1px solid var(--bn-border-color);
}

.bn-checkout__mark {
    color: var(--bn-accent-ink);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.bn-checkout__heading {
    font-size: 1.05em;
    font-weight: 700;
}

/* The platform's own markup is a table; this keeps the block inside its cell. */
.bn-checkout,
.bn-checkout > * {
    box-sizing: border-box;
    max-width: 100%;
}

/*
 * 44px is the floor for a touch target (WCAG 2.5.8, and both platform HIGs).
 * Measured on a 390px viewport before this: the button came out 38px tall,
 * because padding alone follows the shop's font size and this shop sets 14px.
 * min-height makes the target independent of that.
 */
.bn-checkout__button {
    align-self: flex-start;
    min-height: 44px;
    padding: 0.68em 1.2em;
    border: 0;
    border-radius: var(--bn-radius);
    background: var(--bn-accent);
    color: var(--bn-accent-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.bn-checkout__button:hover {
    filter: brightness(1.08);
}

/*
 * A visible focus ring, never `outline: none`. This is the only control in the
 * delivery section, and a keyboard user who cannot see where they are cannot
 * complete the order.
 */
.bn-checkout__button:focus-visible {
    outline: 2px solid var(--bn-accent);
    outline-offset: 2px;
}

.bn-checkout__button[aria-busy="true"],
.bn-checkout__button:disabled {
    cursor: progress;
    opacity: 0.65;
}

/*
 * Layout is applied through :not([hidden]) rather than by declaring `display`
 * and then overriding it with !important. The show/hide contract between the
 * server render and the script is the `hidden` attribute, and this way the
 * attribute simply wins on its own.
 *
 * The map container is a mount point, not a viewport. In `popup` mode the
 * widget appends a position:fixed iframe that covers the screen, so the
 * container itself must take no space — a height would leave an empty box
 * under the button for as long as the map is open.
 */
.bn-checkout__map:not([hidden]) {
    display: block;
}

/*
 * Popup mode: the frame covers the screen, so the container is only an
 * insertion point and must take no space at all in the order form.
 */
.bn-checkout__map--popup:not([hidden]) {
    height: 0;
}

/*
 * Inline mode: the map lives in the page, so the container is the map. A height
 * is required — the widget's iframe is 100% of it — and 60vh keeps the rest of
 * the order form reachable without scrolling past a full screen of map.
 */
.bn-checkout__map--inline:not([hidden]) {
    height: min(60vh, 520px);
    min-height: 320px;
    border: 1px solid var(--bn-border-color);
    border-radius: var(--bn-radius);
    overflow: hidden;
}

/*
 * The frame is ours to place now that the product builds it instead of loading
 * BoxNow's script, which used to set these as inline styles. Only the overlay
 * needs to beat the shop's stack; an inline map is in normal flow and a z-index
 * there would be noise.
 */
.bn-checkout__map > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.bn-checkout__map--popup > iframe {
    position: fixed;
    inset: 0;
    z-index: var(--bn-map-z);
}

.bn-checkout__empty:not([hidden]) {
    display: block;
    margin: 0;
    color: var(--bn-muted);
}

.bn-checkout__selected:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: var(--bn-gap);
    border: 1px solid var(--bn-border-color);
    border-inline-start: 3px solid var(--bn-accent);
    border-radius: var(--bn-radius);
    background: var(--bn-surface);
}

.bn-checkout__selected-title {
    color: var(--bn-muted);
    font-size: 0.8em;
    font-weight: 700;
}

.bn-checkout__address {
    /* Greek locker addresses are long and phones are narrow. */
    overflow-wrap: anywhere;
    font-weight: 650;
}

.bn-checkout__locker-name {
    overflow-wrap: anywhere;
}

/* Match the compact confirmation strip shown directly below the inline map. */
.bn-checkout--inline .bn-checkout__selected:not([hidden]) {
    flex-flow: row wrap;
    gap: 0.2em 0.35em;
    align-items: baseline;
    padding: 0.85rem 1.15rem;
    border-color: var(--bn-selected-border);
    border-inline-start: 1px solid var(--bn-selected-border);
    border-radius: 5px;
    background: var(--bn-selected-surface);
    color: var(--bn-selected-text);
}

.bn-checkout--inline .bn-checkout__selected-title {
    color: inherit;
    font-size: inherit;
    font-weight: 400;
}

.bn-checkout--inline .bn-checkout__address {
    font-weight: 400;
}

.bn-checkout__notice {
    padding: var(--bn-gap);
    border: 1px solid var(--bn-warning-border);
    border-radius: var(--bn-radius);
    background: var(--bn-warning-surface);
}

.bn-checkout__notice-text {
    margin: 0;
}

.bn-checkout__items {
    margin: 0.5rem 0 0;
    padding-inline-start: 1.25rem;
}

.bn-checkout__item {
    overflow-wrap: anywhere;
}

.bn-checkout__error:not([hidden]) {
    display: block;
    padding: var(--bn-gap);
    border: 1px solid var(--bn-error-border);
    border-radius: var(--bn-radius);
    background: var(--bn-error-surface);
}

.bn-checkout__error-text:not([hidden]) {
    display: block;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .bn-checkout * {
        transition: none;
        animation: none;
    }
}

@media (prefers-color-scheme: dark) {
    .bn-checkout {
        --bn-border-color: #ffffff33;
        --bn-surface: #ffffff0f;
        --bn-muted: #ffffffb3;
        --bn-accent-ink: #9eeab0;
    }
}

/*
 * Windows high-contrast mode drops author colours entirely, so the button would
 * become invisible text. A border is requested explicitly.
 */
@media (forced-colors: active) {
    .bn-checkout__button,
    .bn-checkout__stage-button {
        border: 1px solid buttontext;
    }
}