/*
 * Delivery-aware store list (ADR-063).
 *
 * Two jobs: the bar above the grid, and what a card looks like once the browser
 * has learned that the shop behind it does not come to this address.
 *
 * Every selector is namespaced under .dakkeh-, and the only foreign selectors
 * touched are inside a .dakkeh-store-card--out card — a class this plugin puts
 * there itself. Dokan's listing is otherwise left exactly as it renders, so
 * turning the flag off restores the page by removing a class (§27).
 *
 * Colours read WoodMart's custom properties with a literal fallback each, the
 * same set address.css verified against 8.3.9: --wd-primary-color,
 * --wd-text-color, --wd-title-color, --wd-main-bgcolor, --wd-form-brd-color,
 * --wd-brd-radius.
 */

.dakkeh-store-bar {
    --dakkeh-sl-surface: var(--wd-main-bgcolor, #fff);
    --dakkeh-sl-ink: var(--wd-title-color, #1c1e21);
    --dakkeh-sl-body: var(--wd-text-color, #3d4043);
    --dakkeh-sl-muted: rgba(0, 0, 0, 0.58);
    --dakkeh-sl-line: var(--wd-form-brd-color, rgba(0, 0, 0, 0.12));
    --dakkeh-sl-accent: var(--wd-primary-color, #7e9b83);
    --dakkeh-sl-accent-soft: rgba(126, 155, 131, 0.1);
    --dakkeh-sl-radius: var(--wd-brd-radius, 14px);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin: 0 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--dakkeh-sl-line);
    border-radius: var(--dakkeh-sl-radius);
    background: var(--dakkeh-sl-surface);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .dakkeh-store-bar {
        --dakkeh-sl-muted: color-mix(in srgb, var(--wd-text-color, #3d4043) 68%, transparent);
        --dakkeh-sl-accent-soft: color-mix(in srgb, var(--dakkeh-sl-accent) 10%, transparent);
    }
}

/*
 * The control sits at the start, where a shopper looks for "where am I
 * ordering to", and is allowed to shrink before the sentence does: a truncated
 * street name is still recognisable, half a count is not.
 */
.dakkeh-store-bar__address {
    display: flex;
    min-width: 0;
    align-items: center;
}

/*
 * The address control truncates its street line at 220px in a header, where it
 * shares a row with a logo, a search box and a basket. Here it has a bar to
 * itself and can say more of the address before reaching for an ellipsis.
 */
.dakkeh-store-bar .dakkeh-address__value {
    max-width: min(60vw, 380px);
}

.dakkeh-store-bar__summary {
    margin: 0;
    /* Ahead of the control when the bar wraps: the sentence explains the order
       of everything below, so it should not be the part that falls off. */
    order: -1;
    flex: 1 1 260px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--dakkeh-sl-ink);
}

@media (min-width: 768px) {
    .dakkeh-store-bar__summary {
        order: 0;
        flex: 0 1 auto;
        text-align: end;
    }
}

.dakkeh-store-bar__summary[hidden] {
    display: none;
}

/* The pagination caveat, quieter than the count it qualifies. */
.dakkeh-store-bar__hint {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--dakkeh-sl-muted);
}

/* The break between the two groups ---------------------------------------- */

.dakkeh-store-break {
    /* Clears the floated row above it. Dokan's cards are floats, and a heading
       that does not clear them lands inside the last row. */
    clear: both;
    margin: 8px 15px 20px;
    padding-top: 20px;
    border-top: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.12));
}

.dakkeh-store-break[hidden] {
    display: none;
}

.dakkeh-store-break__title {
    margin: 0 0 4px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--wd-title-color, #1c1e21);
}

.dakkeh-store-break__note {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(0, 0, 0, 0.58);
}

@supports (color: color-mix(in srgb, red, blue)) {
    .dakkeh-store-break__note {
        color: color-mix(in srgb, var(--wd-text-color, #3d4043) 68%, transparent);
    }
}

.dakkeh-store-wrap--out[hidden] {
    display: none;
}

/* A card that cannot reach the shopper ------------------------------------ */

/*
 * Dimmed and desaturated, not hidden. A shopper who cannot find their usual
 * shop assumes it has left the platform; showing it, greyed and labelled,
 * answers the question instead (§26) — and the label is what does the work,
 * since colour alone says nothing to a screen reader or to anyone who cannot
 * distinguish it.
 *
 * The image is desaturated as well as dimmed, for the reason the market cards
 * already are: opacity alone on a bright storefront banner still reads as
 * available.
 */
.dakkeh-store-card--out .store-wrapper {
    opacity: 0.72;
}

.dakkeh-store-card--out .store-banner img,
.dakkeh-store-card--out .seller-avatar img {
    filter: grayscale(0.85);
}

/*
 * Hover puts the card back to full strength. The store is still browsable and
 * the link still works — the greying says "not to your address", not
 * "disabled" — so a shopper reaching for it should see what they are reaching
 * for.
 */
.dakkeh-store-card--out .store-wrapper:hover,
.dakkeh-store-card--out .store-wrapper:focus-within {
    opacity: 1;
}

.dakkeh-store-card--out .store-wrapper:hover .store-banner img,
.dakkeh-store-card--out .store-wrapper:focus-within .store-banner img,
.dakkeh-store-card--out .store-wrapper:hover .seller-avatar img,
.dakkeh-store-card--out .store-wrapper:focus-within .seller-avatar img {
    filter: none;
}

/*
 * The note is written by the script and stays `hidden` for a store that does
 * deliver, so a normal card is untouched by all of this.
 *
 * A pill in the text flow rather than a ribbon over the banner: it wraps when a
 * translation is longer than the English, it cannot cover the store's own name,
 * and it does not depend on positioning inside markup the theme is free to
 * restyle.
 */
.dakkeh-store-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 4px 10px;
    border-radius: 999px;
    /* Amber rather than red: this is a fact about where the shopper is, not an
       error they have made. Literal colours rather than theme variables, for
       the reason the market card's own badges use literals — a status that has
       to be legible cannot inherit whatever the theme's accent happens to be.
       #6b4a1f on #fdf3e3 measures 8.1:1, well past the 4.5:1 floor: the label
       is the accessible half of this treatment and cannot be the faint half. */
    background: #fdf3e3;
    color: #6b4a1f;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: start;
}

.dakkeh-store-note[hidden] {
    display: none;
}

.dakkeh-store-note::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9820f;
}

/*
 * Transitions are switched on only once the first verdict has landed — the
 * script marks the listing container, which is the one element every card is
 * inside. The first arrangement should look like how the page always was; a
 * later one, following the shopper's own change of address, should be visibly
 * a change.
 */
.dakkeh-store-listing--settled .dakkeh-store-card--out .store-wrapper,
.dakkeh-store-listing--settled .dakkeh-store-card--out .store-banner img,
.dakkeh-store-listing--settled .dakkeh-store-card--out .seller-avatar img {
    transition: opacity 0.2s ease, filter 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .dakkeh-store-listing--settled .dakkeh-store-card--out .store-wrapper,
    .dakkeh-store-listing--settled .dakkeh-store-card--out .store-banner img,
    .dakkeh-store-listing--settled .dakkeh-store-card--out .seller-avatar img {
        transition: none;
    }
}