/*
 * Delivery address control and manager.
 *
 * Every selector is namespaced under .dakkeh-. Generic classes such as
 * .product or .button are never targeted, so the plugin cannot bleed into
 * WoodMart's own components (§27).
 *
 * Colours and fonts read WoodMart custom properties where they exist, each
 * with a literal fallback so the control still looks right under a different
 * theme. The variables used here were verified against WoodMart 8.3.9:
 * --wd-primary-color, --wd-text-color, --wd-title-color, --wd-main-bgcolor,
 * --wd-form-brd-color, --wd-text-font, --wd-brd-radius. Plausible-sounding
 * names like --wd-brd-color and --wd-btn-radius do not exist and are not used.
 *
 * WoodMart's own variables are read once, into the tokens below, and every
 * rule in this file reads a token. One place to look when a colour is wrong,
 * and the theme's names appear once each rather than forty times.
 */

.dakkeh-address-sheet,
.dakkeh-account-addresses,
button.dakkeh-address {
    --dakkeh-addr-surface: var(--wd-main-bgcolor, #fff);
    --dakkeh-addr-ink: var(--wd-title-color, #1c1e21);
    --dakkeh-addr-body: var(--wd-text-color, #3d4043);
    /*
     * Secondary text is a colour, not an opacity. Opacity on a row dims its
     * badge and its icon along with the words; only the words are meant to
     * step back. The literal here is the fallback for browsers without
     * color-mix — the @supports block below derives it from the real theme
     * text colour wherever that is available.
     */
    --dakkeh-addr-muted: rgba(0, 0, 0, 0.58);
    --dakkeh-addr-line: var(--wd-form-brd-color, rgba(0, 0, 0, 0.12));
    --dakkeh-addr-accent: var(--wd-primary-color, #7e9b83);
    --dakkeh-addr-accent-soft: rgba(126, 155, 131, 0.1);
    --dakkeh-addr-hover: rgba(0, 0, 0, 0.035);
    --dakkeh-addr-danger: #c0392b;
    --dakkeh-addr-danger-soft: rgba(192, 57, 43, 0.08);
    --dakkeh-addr-radius: 14px;
    --dakkeh-addr-radius-sm: 10px;
    --dakkeh-addr-pad: 20px;
}

@supports (color: color-mix(in srgb, red, blue)) {
    .dakkeh-address-sheet,
    .dakkeh-account-addresses,
    button.dakkeh-address {
        --dakkeh-addr-muted: color-mix(in srgb, var(--wd-text-color, #3d4043) 68%, transparent);
        --dakkeh-addr-accent-soft: color-mix(in srgb, var(--dakkeh-addr-accent) 10%, transparent);
        --dakkeh-addr-hover: color-mix(in srgb, var(--dakkeh-addr-ink) 4%, transparent);
    }
}

/* Theme reset ------------------------------------------------------------- */

/*
 * WoodMart styles the bare element, not a class:
 *
 *   :is(.btn,.button,button,[type=submit],[type=button]) {
 *       justify-content: center; text-transform: uppercase;
 *       font-weight: 600; font-size: 13px; min-height: 42px;
 *       padding: 5px 20px; line-height: 1.2; ... }
 *
 * — base.min.css, verified in 8.3.9. Every button this picker builds is a bare
 * <button>, so all of that applied to the address rows: shoppers' street
 * addresses were shouted in capitals, and each row's content sat centred in
 * its own width rather than starting at the radio. Declaring what a component
 * *does* want is not enough against a rule like that; what it does not want
 * has to be said too, which is what this block is for.
 *
 * `button.dakkeh-btn` rather than `.dakkeh-btn`, because the theme's `:is(...)`
 * carries class specificity (0,1,0) and a lone class would only tie with it —
 * leaving the outcome to stylesheet order, which is not ours to guarantee.
 * Adding the element name settles it at (0,1,1). Every button rule below is
 * written the same way for the same reason, and so that the ones that override
 * this reset are not quietly outranked by it.
 *
 * The class is applied by the `button()` factory in address.js, so it reaches
 * every button this script makes and nothing else. Scoping to
 * `.dakkeh-address-sheet button` would have been shorter and wrong: the Google
 * Maps SDK renders its own controls inside the map step, and flattening those
 * would break zoom and fullscreen.
 */
button.dakkeh-btn,
button.dakkeh-address {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    text-transform: none;
    letter-spacing: normal;
    text-align: start;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button.dakkeh-btn:focus-visible,
button.dakkeh-address:focus-visible,
:is(.dakkeh-address-sheet, .dakkeh-account-addresses)
    :is(.dakkeh-address-filter__field, .dakkeh-address-search__field, .dakkeh-address-form__input):focus-visible,
:is(.dakkeh-address-sheet, .dakkeh-account-addresses)
    :is(.dakkeh-address-filter__field, .dakkeh-address-search__field, .dakkeh-address-form__input):focus {
    outline: 2px solid var(--dakkeh-addr-accent);
    outline-offset: 2px;
    border-color: var(--dakkeh-addr-accent);
}

@media (prefers-reduced-motion: reduce) {
    button.dakkeh-btn,
    button.dakkeh-address {
        transition: none;
    }
}

/* The trigger ------------------------------------------------------------- */

.dakkeh-address-bar {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--wd-main-bgcolor, #fff);
    border-bottom: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.1));
}

button.dakkeh-address {
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--dakkeh-addr-radius-sm);
    font-family: var(--wd-text-font, inherit);
    color: var(--dakkeh-addr-body);
    line-height: 1.3;
}

button.dakkeh-address:hover,
button.dakkeh-address:focus-visible {
    border-color: var(--dakkeh-addr-line);
    background: var(--dakkeh-addr-hover);
}

.dakkeh-address__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--dakkeh-addr-accent);
}

.dakkeh-address__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*
 * "Deliver to: Home" over the street address it names.
 *
 * The name leads because it is what the shopper recognises at a glance; the
 * address underneath is the check that they are looking at the right one.
 */
.dakkeh-address__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--dakkeh-addr-ink);
    /* Long addresses truncate rather than wrapping the header onto two rows. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.dakkeh-address__value[data-dakkeh-empty] {
    color: var(--dakkeh-addr-accent);
}

.dakkeh-address__line {
    font-size: 11px;
    letter-spacing: 0.01em;
    color: var(--dakkeh-addr-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/*
 * An address guessed from the device rather than given (ADR-066).
 *
 * The word "approximate" on the line below is what actually says so; this only
 * keeps the claim from reading as confidently as a chosen address does. Italics
 * rather than a colour, because the muted colour beside it is already carrying
 * "this is the secondary line" and two meanings on one property is how a state
 * stops being legible.
 */
.dakkeh-address__value[data-dakkeh-approximate] + .dakkeh-address__line,
.dakkeh-address__value[data-dakkeh-approximate] ~ .dakkeh-address__line {
    font-style: italic;
}

/*
 * The UA rule for `[hidden]` is a plain `display: none` on `*`, so any theme
 * rule that gives spans a display — WoodMart has several — beats it on
 * specificity and leaves an empty second row holding space in the header.
 */
.dakkeh-address__line[hidden] {
    display: none;
}

/* Sheet ------------------------------------------------------------------- */

.dakkeh-address-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(14, 16, 18, 0.5);
    animation: dakkeh-address-fade 0.16s ease-out;
}

@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
    .dakkeh-address-sheet {
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

.dakkeh-address-sheet[hidden] {
    display: none;
}

.dakkeh-address-sheet__panel {
    position: relative;
    width: min(480px, 100%);
    /*
     * Capped rather than sized: the list grows with the address book and the
     * map step is a fixed block, so the panel has to be able to scroll without
     * the sheet ever taller than the viewport it is pinned to.
     */
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Scrolling past the end of the list must not carry on scrolling the shop
       behind the sheet, which on a phone reads as the dialog losing its place. */
    overscroll-behavior: contain;
    background: var(--dakkeh-addr-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.22);
    font-family: var(--wd-text-font, inherit);
    color: var(--dakkeh-addr-body);
    animation: dakkeh-address-rise 0.22s cubic-bezier(0.22, 0.8, 0.3, 1);
}

@keyframes dakkeh-address-fade {
    from {
        opacity: 0;
    }
}

@keyframes dakkeh-address-rise {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dakkeh-address-sheet,
    .dakkeh-address-sheet__panel {
        animation: none;
    }
}

/*
 * The header stays put while the list scrolls under it.
 *
 * The panel is the scroll container, so `position: sticky` here needs no
 * second scrolling element and no JavaScript. It is why the panel itself
 * carries no padding: the header and each view pad their own edges, and a
 * padded panel would leave a transparent strip above the sticky header for the
 * list to show through.
 */
.dakkeh-address-sheet__header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 14px 12px;
    background: var(--dakkeh-addr-surface);
    border-bottom: 1px solid var(--dakkeh-addr-line);
}

/* The grab handle a bottom sheet is expected to have — and only where the
   panel actually is one. On desktop it is a centred dialog and there is
   nothing to grab. */
@media (max-width: 767px) {
    .dakkeh-address-sheet__header {
        padding-top: 22px;
    }

    .dakkeh-address-sheet__header::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: var(--dakkeh-addr-line);
    }
}

.dakkeh-address-sheet__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--dakkeh-addr-ink);
}

button.dakkeh-address-sheet__close {
    flex: 0 0 auto;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--dakkeh-addr-ink);
}

button.dakkeh-address-sheet__close:hover {
    background: var(--dakkeh-addr-hover);
}

button.dakkeh-address-sheet__add {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dakkeh-addr-accent);
}

button.dakkeh-address-sheet__add:hover {
    background: var(--dakkeh-addr-accent-soft);
}

.dakkeh-address-sheet__add[hidden] {
    display: none;
}

/*
 * `button.dakkeh-btn` sets `display: inline-flex`, which outranks the browser's
 * own `[hidden] { display: none }` — so every button this script hides needs
 * saying again here. Written once against the factory's own class rather than
 * per control, since the alternative is a rule per button and one of them
 * eventually gets forgotten. Specificity (0,2,1) beats every button rule above.
 */
button.dakkeh-btn[hidden] {
    display: none;
}

/*
 * The sheet standing as a gate (ADR-064).
 *
 * The close button is already gone from the markup by then; this is the rest of
 * the difference — a scrim that reads as a stop rather than a dimmed page, and
 * an intro that is the sentence being asked rather than a note under a heading.
 * Deliberately small: it is the same picker, doing the same thing, and dressing
 * it as a different component would make the shopper learn it twice.
 */
.dakkeh-address-sheet[data-dakkeh-required] {
    background: rgba(14, 16, 18, 0.68);
}

.dakkeh-address-sheet[data-dakkeh-required] .dakkeh-address-sheet__intro {
    font-size: 14px;
    color: var(--dakkeh-addr-ink);
}

/* The map step's copy is hidden unless the gate is holding the shopper there
   (ADR-064), and this page's theme is free to have opinions about `p`. */
.dakkeh-address-sheet__intro[hidden] {
    display: none;
}

.dakkeh-address-sheet__intro {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--dakkeh-addr-muted);
}

/*
 * Reserving a permanent empty strip for a message that is usually absent put a
 * gap under the header on every open. It appears when there is something to
 * say and takes its space then.
 */
.dakkeh-address-sheet__message {
    margin: 12px var(--dakkeh-addr-pad) 0;
    padding: 10px 12px;
    border-radius: var(--dakkeh-addr-radius-sm);
    background: var(--dakkeh-addr-hover);
    font-size: 13px;
    line-height: 1.45;
}

.dakkeh-address-sheet__message:empty {
    display: none;
}

.dakkeh-address-sheet__message[data-state="error"] {
    background: var(--dakkeh-addr-danger-soft);
    color: var(--dakkeh-addr-danger);
}

.dakkeh-address-sheet__message[data-state="ok"] {
    background: var(--dakkeh-addr-accent-soft);
    color: var(--dakkeh-addr-accent);
}

.dakkeh-address-view {
    padding: 16px var(--dakkeh-addr-pad) var(--dakkeh-addr-pad);
}

.dakkeh-address-view[hidden] {
    display: none;
}

/* Saved list -------------------------------------------------------------- */

.dakkeh-address-filter {
    position: relative;
    margin-bottom: 12px;
}

.dakkeh-address-filter[hidden] {
    display: none;
}

/*
 * Text fields, and a second theme rule to get out from under.
 *
 * WoodMart sizes inputs by their type attribute —
 * `input[type="search"], input[type="text"], … { padding: 0 15px; height: 42px }`
 * — which is (0,1,1) and outranks a lone class the way its button rule does.
 * Scoping to the two elements that ever host these fields brings a second
 * class into the selector and settles it at (0,2,0) rather than leaving the
 * result to stylesheet order. `:is()` keeps that from becoming twelve
 * selectors; it takes the specificity of its most specific argument, so the
 * arithmetic above is what it says.
 *
 * .dakkeh-account-addresses is not decoration here: My Account hosts the same
 * list, outside the sheet, and its filter field has to be the same control.
 */
:is(.dakkeh-address-sheet, .dakkeh-account-addresses)
    :is(.dakkeh-address-filter__field, .dakkeh-address-search__field, .dakkeh-address-form__input) {
    display: block;
    /*
     * Not inherited: nothing on this page sets a global border-box, and a
     * full-width field that adds its padding on top of 100% overflows the
     * panel — the sheet gained a horizontal scrollbar the moment the filter
     * grew room for its search icon.
     */
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 12px 14px;
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: var(--dakkeh-addr-radius-sm);
    /* 15px minimum stops iOS Safari zooming the viewport on focus. */
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    background-color: var(--dakkeh-addr-surface);
    color: var(--dakkeh-addr-body);
    box-shadow: none;
    transition: border-color 0.15s ease;
}

:is(.dakkeh-address-sheet, .dakkeh-account-addresses)
    :is(.dakkeh-address-filter__field, .dakkeh-address-search__field, .dakkeh-address-form__input):hover {
    border-color: var(--dakkeh-addr-muted);
}

:is(.dakkeh-address-sheet, .dakkeh-account-addresses)
    :is(.dakkeh-address-filter__field, .dakkeh-address-search__field, .dakkeh-address-form__input)::placeholder {
    color: var(--dakkeh-addr-muted);
    opacity: 1;
}

/*
 * The magnifier is a background image rather than an element, because the
 * markup is a bare <input> with no wrapper to hang an icon inside. Positioned
 * from the physical left and flipped for an RTL document: `background-position`
 * has no logical keyword, and the site's own dir attribute is what says which
 * end the text starts at.
 */
:is(.dakkeh-address-sheet, .dakkeh-account-addresses) .dakkeh-address-filter__field {
    padding-inline-start: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    /* Safari draws its own magnifier and clear button on type="search"; one
       icon in one place is the point of the rule above. */
    -webkit-appearance: none;
    appearance: none;
}

[dir="rtl"] .dakkeh-address-filter__field {
    background-position: right 14px center;
}

.dakkeh-address-filter__field::-webkit-search-decoration,
.dakkeh-address-filter__field::-webkit-search-results-button {
    -webkit-appearance: none;
}

/* Only the instructions field is a textarea, and it grows downward or not at
   all — a sheet this narrow has no horizontal room to give away. */
:is(.dakkeh-address-sheet, .dakkeh-account-addresses) textarea.dakkeh-address-form__input {
    resize: vertical;
    min-height: 76px;
    line-height: 1.5;
}

.dakkeh-address-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/*
 * A row is a card, not a line separated by a rule.
 *
 * Rows here are between one and five lines tall — a postal code alone, or a
 * label over street, unit, region, recipient and phone — and a hairline
 * between two blocks of such different heights gives the eye nothing to group
 * by. The card also gives the selected address somewhere to be marked besides
 * an 18px radio, which on a list of six was the only thing distinguishing the
 * address a shopper is about to check out with.
 */
.dakkeh-address-list__item {
    position: relative;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: var(--dakkeh-addr-radius);
    background: var(--dakkeh-addr-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dakkeh-address-list__item:hover {
    border-color: var(--dakkeh-addr-muted);
}

/*
 * Set from renderRow() rather than derived from the button's aria-checked with
 * :has(). The state is known where the row is built, and an attribute on the
 * card needs no support call to be true.
 */
.dakkeh-address-list__item[data-active] {
    border-color: var(--dakkeh-addr-accent);
    background: var(--dakkeh-addr-accent-soft);
}

button.dakkeh-address-list__choose {
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 14px 4px 14px 14px;
    border-radius: var(--dakkeh-addr-radius);
    color: inherit;
}

.dakkeh-address-list__radio {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* Optically centred on the label's first line rather than on the row: a
       four-line address would otherwise put its radio beside the middle of the
       street name. */
    margin-top: 1px;
    border: 2px solid var(--dakkeh-addr-line);
    border-radius: 50%;
    background: var(--dakkeh-addr-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dakkeh-address-list__item:hover .dakkeh-address-list__radio {
    border-color: var(--dakkeh-addr-muted);
}

.dakkeh-address-list__choose[aria-checked="true"] .dakkeh-address-list__radio {
    border-color: var(--dakkeh-addr-accent);
    /* The filled centre is drawn with a ring rather than a child element, so
       the radio stays a single node. */
    box-shadow: inset 0 0 0 3px var(--dakkeh-addr-surface),
        inset 0 0 0 10px var(--dakkeh-addr-accent);
}

.dakkeh-address-list__body {
    /*
     * Grows into the row. Without it the column sizes to its own text and
     * WoodMart's `justify-content: center` on bare buttons floats the whole
     * group in the middle of the row — the misalignment this file's reset
     * block exists to stop, and the one place it would still show through.
     */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.dakkeh-address-list__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--dakkeh-addr-ink);
    overflow-wrap: anywhere;
}

.dakkeh-address-list__badge {
    padding: 2px 8px;
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: 999px;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: var(--dakkeh-addr-muted);
}

.dakkeh-address-list__item[data-active] .dakkeh-address-list__badge {
    border-color: var(--dakkeh-addr-accent);
    color: var(--dakkeh-addr-accent);
}

.dakkeh-address-list__line,
.dakkeh-address-list__meta {
    font-size: 13px;
    line-height: 1.45;
    color: var(--dakkeh-addr-muted);
    /* A row can carry several of these now — street, unit, region, contact,
       instructions — and a long one has to wrap inside the row rather than
       stretch the sheet sideways. */
    overflow-wrap: anywhere;
}

/* Recipient, phone and instructions sit a step back from the address itself:
   they say who is there, not where. */
.dakkeh-address-list__meta {
    font-size: 12px;
}

.dakkeh-address-list__meta:first-of-type {
    margin-top: 2px;
}

/*
 * An address the marketplace has said it does not reach.
 *
 * Dimmed and marked, never hidden or removed: the shopper saved it, and a row
 * that silently disappears reads as data loss rather than as a delivery limit
 * (ADR-022, applied to addresses).
 */
.dakkeh-address-list__item[data-unserviceable] {
    background: transparent;
}

.dakkeh-address-list__item[data-unserviceable] .dakkeh-address-list__body {
    opacity: 0.55;
}

.dakkeh-address-list__item[data-unserviceable] .dakkeh-address-list__label::before {
    content: "⊘";
    color: var(--dakkeh-addr-danger);
    opacity: 1;
}

.dakkeh-address-list__empty {
    margin: 24px 0 8px;
    font-size: 14px;
    text-align: center;
    color: var(--dakkeh-addr-muted);
}

.dakkeh-address-list__empty[hidden] {
    display: none;
}

.dakkeh-address-list__menu {
    position: relative;
    flex: 0 0 auto;
    /*
     * Not stretched, though the row is `align-items: stretch`.
     *
     * This box is what the menu below is positioned against, and while it grew
     * to the height of the card, `top: 100%` meant "under the card" rather than
     * "under the button" — on a book of one address that put the menu outside
     * the sheet entirely. Shrunk to the toggle, the menu drops from the control
     * that opens it and lies over the card.
     */
    align-self: flex-start;
    /* Aligns the 32px button with the centre of the label's first line, the
       same line the radio is aligned to on the other side of the row. */
    padding: 12px 8px 0 0;
}

button.dakkeh-address-list__more {
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--dakkeh-addr-muted);
}

button.dakkeh-address-list__more:hover,
.dakkeh-address-list__more[aria-expanded="true"] {
    background: var(--dakkeh-addr-hover);
    color: var(--dakkeh-addr-ink);
}

.dakkeh-address-list__actions {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 2;
    min-width: 176px;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: var(--dakkeh-addr-surface);
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: var(--dakkeh-addr-radius-sm);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

/*
 * Rows near the end of a long list used to flip their menu upward, because a
 * menu anchored to the *card* opened a card's height below the button and ran
 * out of sheet. Anchored to the button it starts 44px higher and lies over the
 * card, so the flip is no longer what keeps it on screen — `revealRowMenu()`
 * scrolls the panel on the rare row where it still does not fit, which is one
 * behaviour for every row instead of two that disagree about direction.
 */

.dakkeh-address-list__actions[hidden] {
    display: none;
}

button.dakkeh-address-list__action {
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--dakkeh-addr-body);
}

button.dakkeh-address-list__action:hover,
button.dakkeh-address-list__action:focus-visible {
    background: var(--dakkeh-addr-hover);
}

button.dakkeh-address-list__action--danger {
    color: var(--dakkeh-addr-danger);
}

button.dakkeh-address-list__action--danger:hover,
button.dakkeh-address-list__action--danger:focus-visible {
    background: var(--dakkeh-addr-danger-soft);
}

/* Search and suggestions -------------------------------------------------- */

.dakkeh-address-search {
    position: relative;
    margin-bottom: 12px;
}

.dakkeh-address-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 4;
    list-style: none;
    margin: 6px 0 0;
    padding: 6px;
    background: var(--dakkeh-addr-surface);
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: var(--dakkeh-addr-radius-sm);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dakkeh-address-suggestions[hidden] {
    display: none;
}

button.dakkeh-address-suggestions__item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--dakkeh-addr-body);
}

button.dakkeh-address-suggestions__item:hover,
button.dakkeh-address-suggestions__item:focus-visible {
    background: var(--dakkeh-addr-hover);
}

/* Map --------------------------------------------------------------------- */

.dakkeh-address-map {
    position: relative;
    height: 260px;
    margin-bottom: 12px;
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: var(--dakkeh-addr-radius);
    overflow: hidden;
    background: var(--dakkeh-addr-hover);
}

/*
 * The SDK's own container. Everything else in .dakkeh-address-map is a sibling
 * layered over it, because google.maps.Map replaces its target's children.
 */
.dakkeh-address-map__surface {
    position: absolute;
    inset: 0;
}

.dakkeh-address-map__static {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dakkeh-address-map__static[hidden] {
    display: none;
}

/*
 * The pin is fixed at the centre and the map moves under it.
 *
 * A draggable marker fights the scroll gesture on a phone; this is the pattern
 * delivery apps have settled on. The offset lifts the pin's point, not its
 * body, onto the centre of the viewport.
 */
.dakkeh-address-map__pin {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 22px;
    height: 22px;
    margin: -22px 0 0 -11px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--dakkeh-addr-accent);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.dakkeh-address-map__pin::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dakkeh-addr-surface);
}

button.dakkeh-address-map__locate {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    justify-content: center;
    padding: 9px 14px;
    border-radius: 999px;
    background: var(--dakkeh-addr-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    font-weight: 600;
    color: var(--dakkeh-addr-ink);
}

button.dakkeh-address-map__locate:hover {
    background: var(--dakkeh-addr-surface);
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.26);
}

.dakkeh-address-map__locate[hidden] {
    display: none;
}

.dakkeh-address-map__readout {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--dakkeh-addr-ink);
    /* Reserved so the panel does not jump as the text changes on every pan. */
    min-height: 40px;
}

/* Details form ------------------------------------------------------------ */

.dakkeh-address-form__summary {
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: var(--dakkeh-addr-radius-sm);
    background: var(--dakkeh-addr-hover);
    font-size: 13px;
    line-height: 1.5;
    color: var(--dakkeh-addr-body);
}

.dakkeh-address-form__field {
    display: block;
    margin-bottom: 14px;
}

.dakkeh-address-form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--dakkeh-addr-ink);
}

.dakkeh-address-form__hint {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--dakkeh-addr-muted);
}

/* Actions ----------------------------------------------------------------- */

.dakkeh-address-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

button.dakkeh-address-btn {
    flex: 1 1 0;
    justify-content: center;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--dakkeh-addr-line);
    border-radius: var(--dakkeh-addr-radius-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--dakkeh-addr-ink);
}

button.dakkeh-address-btn:hover {
    background: var(--dakkeh-addr-hover);
}

button.dakkeh-address-btn--primary {
    border-color: var(--dakkeh-addr-accent);
    background: var(--dakkeh-addr-accent);
    color: #fff;
}

button.dakkeh-address-btn--primary:hover {
    background: var(--dakkeh-addr-accent);
    filter: brightness(0.94);
}

button.dakkeh-address-btn[disabled] {
    opacity: 0.55;
    cursor: default;
    filter: none;
}

/* My Account ------------------------------------------------------------- */

/*
 * The same list, hosted by the page instead of by the sheet.
 *
 * No panel, no overlay and no rounded corners: My Account already provides the
 * card this sits in, and a second one inside it would read as a dialog that
 * cannot be dismissed.
 */
.dakkeh-account-addresses {
    font-family: var(--wd-text-font, inherit);
    color: var(--dakkeh-addr-body);
}

.dakkeh-account-addresses__loading {
    margin: 0;
    font-size: 13px;
    color: var(--dakkeh-addr-muted);
}

.dakkeh-account-addresses .dakkeh-address-sheet__message {
    margin-inline: 0;
}

.dakkeh-account-addresses__actions {
    display: flex;
    margin-top: 16px;
}

.dakkeh-account-addresses__actions .dakkeh-address-btn {
    /* Sized to its label here, rather than stretched across the panel as it is
       inside the sheet's two-button row. */
    flex: 0 0 auto;
    padding-left: 22px;
    padding-right: 22px;
}

@media (min-width: 768px) {
    .dakkeh-address-sheet {
        align-items: center;
        padding: 24px 16px;
    }

    .dakkeh-address-sheet__panel {
        max-height: min(88vh, 760px);
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    }
}