/**
 * bpost address helper — checkout styles.
 *
 * Handle: bpost-address-style. Loaded only on a checkout of a shop that switched the
 * feature on.
 *
 * Every selector starts with bpost-address, so nothing here can reach Bpost.css,
 * checkout.css or the theme of the merchant. The rules inherit the font and the colour of
 * the theme and they set only what a suggestion list really needs. There is no @import,
 * no remote font, no remote image, and no !important on an element of the theme.
 *
 * The tokens below are neutral on purpose. A merchant who wants the widget in the colours
 * of their shop overrides the 5 custom properties on .bpost-address in their own
 * stylesheet, and nothing else has to change.
 */

.bpost-address {
    --bpost-address-border: rgba(0, 0, 0, 0.22);
    --bpost-address-border-strong: rgba(0, 0, 0, 0.45);
    --bpost-address-surface: rgba(255, 255, 255, 0.96);
    --bpost-address-hover: rgba(0, 0, 0, 0.06);
    --bpost-address-muted: rgba(0, 0, 0, 0.6);
    --bpost-address-accent: #dd1829;

    position: relative;
    display: block;
    margin: 0 0 1em;
    font: inherit;
    color: inherit;
}

/* ------------------------------------------------------------------- the label -- */

.bpost-address__label {
    display: block;
    margin: 0 0 0.35em;
    font: inherit;
    font-weight: 600;
    line-height: 1.3;
}

/* --------------------------------------------------------------- the search bar -- */

.bpost-address__search {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0.6em 0.75em;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid var(--bpost-address-border);
    border-radius: 3px;
}

.bpost-address__search:focus {
    border-color: var(--bpost-address-border-strong);
    outline: 2px solid var(--bpost-address-accent);
    outline-offset: 1px;
}

/* ---------------------------------------------------------- the suggestion list -- */

.bpost-address__list {
    position: absolute;
    z-index: 9;
    top: 100%;
    left: 0;
    right: 0;
    box-sizing: border-box;
    max-height: 17em;
    margin: 2px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    background: var(--bpost-address-surface);
    border: 1px solid var(--bpost-address-border);
    border-radius: 3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    -webkit-overflow-scrolling: touch;
}

.bpost-address__item {
    display: block;
    margin: 0;
    padding: 0.55em 0.75em;
    font: inherit;
    line-height: 1.35;
    /* A long Belgian street name has to wrap, not to widen the list. */
    overflow-wrap: break-word;
    word-wrap: break-word;
    cursor: pointer;
    border-bottom: 1px solid var(--bpost-address-border);
}

.bpost-address__item:last-child {
    border-bottom: 0;
}

.bpost-address__item--active,
.bpost-address__item:hover {
    background: var(--bpost-address-hover);
}

/* The highlighted row is the one that Enter takes, so it needs more than a tint. */
.bpost-address__item--active {
    box-shadow: inset 3px 0 0 var(--bpost-address-accent);
}

.bpost-address__note {
    display: block;
    margin-top: 0.15em;
    font-size: 0.85em;
    color: var(--bpost-address-muted);
}

/* The live region talks to a screen reader only. */
.bpost-address__status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

/* -------------------------------------------------------------- the advice panel -- */

.bpost-address__panel {
    --bpost-address-border: rgba(0, 0, 0, 0.22);
    --bpost-address-muted: rgba(0, 0, 0, 0.6);
    --bpost-address-accent: #6b7280;

    box-sizing: border-box;
    margin: 0 0 1em;
    padding: 0.75em 0.9em;
    font: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid var(--bpost-address-border);
    border-left: 3px solid var(--bpost-address-accent);
    border-radius: 3px;
}

.bpost-address__panel--warning {
    --bpost-address-accent: #b8860b;
}

.bpost-address__panel--error {
    --bpost-address-accent: #b11321;
}

.bpost-address__title {
    margin: 0 0 0.4em;
    font: inherit;
    font-weight: 600;
    line-height: 1.35;
}

.bpost-address__line {
    margin: 0 0 0.25em;
    font: inherit;
    line-height: 1.4;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.bpost-address__actions {
    display: block;
    margin-top: 0.6em;
}

/* ---------------------------------------------------------------- the buttons -- */

.bpost-address__button {
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
    margin: 0 0.4em 0.4em 0;
    padding: 0.45em 0.9em;
    font: inherit;
    line-height: 1.35;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 1px solid var(--bpost-address-border-strong, rgba(0, 0, 0, 0.45));
    border-radius: 3px;
    cursor: pointer;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.bpost-address__button:hover {
    background: rgba(0, 0, 0, 0.06);
}

.bpost-address__button:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.bpost-address__button--primary {
    font-weight: 600;
    border-width: 2px;
}

.bpost-address__button--quiet {
    border-color: transparent;
    text-decoration: underline;
}

/* ---------------------------------------------------------------- the spinner -- */

.bpost-address__spinner {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.5em;
    vertical-align: -0.1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    opacity: 0.6;
    animation: bpost-address-spin 0.9s linear infinite;
}

@keyframes bpost-address-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------ small screens -- */

@media (max-width: 400px) {
    .bpost-address__button {
        display: block;
        width: 100%;
        margin-right: 0;
        text-align: center;
    }
}

/* --------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    .bpost-address__spinner {
        animation: none;
        border-top-color: currentColor;
        opacity: 0.35;
    }
}

/* -------------------------------------------------------------- dark scheme -- */

/**
 * A dark theme keeps its own text colour, because everything above inherits it. Only the
 * 5 tokens change, so the list stays readable on a dark checkout.
 */
@media (prefers-color-scheme: dark) {
    .bpost-address {
        --bpost-address-border: rgba(255, 255, 255, 0.26);
        --bpost-address-border-strong: rgba(255, 255, 255, 0.5);
        --bpost-address-surface: #1e2124;
        --bpost-address-hover: rgba(255, 255, 255, 0.1);
        --bpost-address-muted: rgba(255, 255, 255, 0.65);
        --bpost-address-accent: #ff5a68;
    }

    .bpost-address__list {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }

    .bpost-address__panel {
        --bpost-address-border: rgba(255, 255, 255, 0.26);
        --bpost-address-muted: rgba(255, 255, 255, 0.65);
        --bpost-address-accent: #9aa3ad;
    }

    .bpost-address__panel--warning {
        --bpost-address-accent: #e0b33a;
    }

    .bpost-address__panel--error {
        --bpost-address-accent: #ff5a68;
    }

    .bpost-address__button:hover {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* ------------------------------------------------- the list is always light -- */

/**
 * The suggestion list keeps one appearance, whatever colour scheme the browser asks for.
 *
 * The dark block above moves --bpost-address-surface to #1e2124, so a shopper in dark
 * mode read the addresses on a near black panel. The same tokens are set here on the
 * list itself. A custom property resolves from the element first, so these values win
 * over the ones the dark block puts on the wrapper, and the rows, the notes and the
 * marker of the active row all follow.
 *
 * The colour of the text has to be pinned as well. Everything in this file inherits the
 * colour of the theme, and a dark theme hands down a light grey that does not read on
 * white. color-scheme keeps the scrollbar of the list light to match.
 */
.bpost-address__list,
.bpost-address__list--map {
    --bpost-address-border: rgba(0, 0, 0, 0.22);
    --bpost-address-border-strong: rgba(0, 0, 0, 0.45);
    --bpost-address-surface: #ffffff;
    --bpost-address-hover: rgba(0, 0, 0, 0.06);
    --bpost-address-muted: rgba(0, 0, 0, 0.6);
    --bpost-address-accent: #dd1829;

    background: #ffffff;
    color: #191c1d;
    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   The same suggestion list, inside the pickup map.

   The map header is a flex strip, so a block placed in it is squeezed to a few
   pixels wide. The wrapper is therefore fixed to the viewport and positioned
   from JavaScript, directly under the search box. The z-index clears the map
   overlay, which sits at 9999.
   --------------------------------------------------------------------------- */
.bpost-address--map {
    /* above the map overlay (9999) and its own results panel (999999999) */
    z-index: 1000000000;
}

.bpost-address__list--map {
    position: static;
    max-height: 15rem;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

/* The pickup button that this script draws on the block checkout, where the
   plugin's own classic-only hook never runs. Sized to sit under the chosen
   shipping option without fighting the theme's own button styles. */
.bpost-address__pick {
    display: inline-block;
    margin: .75rem 0 .25rem;
    cursor: pointer;
}