/**
 * SF Checkout — header "Deliver to" chip + edit popover.
 * Site root is 10px (Bricks 62.5%): all sizing in rem assumes that root.
 * px is used only for hairline borders/shadows and media-query breakpoints.
 * Chip colour matches the account/cart icons (#fcfcfa / sf-text-on-dark) so it
 * reads correctly on the dark charcoal header.
 */

.sf-dt {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    line-height: 1.2;
}

/* --- chip button (icon + pincode, no label) --- */
.sf-dt__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--sf-text-on-dark, #fcfcfa);
    cursor: pointer;
    font: inherit;
}

.sf-dt__pinicon {
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
}

.sf-dt__pin {
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
}

/* --- popover --- */
.sf-dt__pop {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    z-index: 999;
    min-width: 24rem;
    padding: 1.4rem;
    background: #ffffff;
    color: #1a1a1a;
    border-radius: 0.8rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); /* px shadow — allowed exception */
}

.sf-dt__pop[hidden] { display: none; }

.sf-dt__poplabel {
    display: block;
    margin-bottom: 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.sf-dt__field {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
}

.sf-dt__input {
    flex: 1 1 auto;
    width: 100%;
    height: 4rem;
    padding: 0 1rem;
    /* 1.6rem = 16px at the 10px root — prevents iOS zoom-on-focus. */
    font-size: 1.6rem;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #cfcfcf; /* hairline — allowed exception */
    border-radius: 0.6rem;
    letter-spacing: 0.08em;
}

.sf-dt__input:focus {
    outline: none;
    border-color: var(--sf-brand-red, #b83429);
    box-shadow: 0 0 0 2px rgba(184, 52, 41, 0.18); /* px focus ring — allowed exception */
}

.sf-dt__go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    padding: 0;
    color: #fff;
    background: var(--sf-brand-red, #b83429);
    border: 0;
    border-radius: 0.6rem;
    cursor: pointer;
}

.sf-dt__go svg { width: 2rem; height: 2rem; }
.sf-dt__go:disabled { opacity: 0.55; cursor: default; }

/* loading spinner inside the go button */
.sf-dt__spin { display: none; width: 1.8rem; height: 1.8rem; }
.sf-dt.is-loading .sf-dt__go svg { display: none; }
.sf-dt.is-loading .sf-dt__spin {
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.45); /* hairline — allowed exception */
    border-top-color: #fff;
    border-radius: 50%;
    animation: sf-dt-spin 0.6s linear infinite;
}

@keyframes sf-dt-spin { to { transform: rotate(360deg); } }

/* validation / error message */
.sf-dt__msg {
    min-height: 1.6rem;
    margin-top: 0.6rem;
    font-size: 1.3rem;
    color: var(--sf-brand-red, #b83429);
}
.sf-dt__msg:empty { margin-top: 0; }

/* --- mobile: icon only (matches the icon-only account/cart) --- */
@media (max-width: 768px) {
    .sf-dt__pin { display: none; }
    .sf-dt__pop {
        min-width: 0;
        width: 20rem;
        max-width: calc(100vw - 2.4rem);
    }
}