// Vendor vacation mode — notice (store banner + product detail) and card pill.
//
// Warm amber tone drawn from nest's own palette ($color-best #f59758) so the status
// reads as a friendly "temporarily away" message rather than an error. Aligned with the
// surrounding marketplace cards: 15px radius (matching .vendor-wrap), $border-color
// hairlines and the $font-heading family for titles.

$vacation-accent: $color-best; // #f59758 — nest "best" amber
$vacation-surface: #fff8f1; // soft cream, harmonises with $color-13 (#FFF3EB)
$vacation-border: rgba(245, 151, 88, 0.32);

// ── Notice (store banner + product detail page) ──────────────
.store-vacation-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin: 0 0 20px;
    background: $vacation-surface;
    border: 1px solid $vacation-border;
    border-radius: 15px;
    color: $color-heading;
    text-align: start;

    &__icon {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(245, 151, 88, 0.16);
        color: $vacation-accent;

        i {
            font-size: 18px;
            line-height: 1;
        }
    }

    &__body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    &__title {
        font-family: $font-heading;
        font-weight: 600;
        font-size: 15px;
        line-height: 1.3;
        color: $color-heading;
    }

    &__text {
        color: $color-grey-2;
        font-size: $font-sm;
        line-height: 1.55;
    }
}

// On the list-layout cover-image banner (.archive-header-3) the surrounding text is
// forced white; the notice keeps its solid cream surface + dark text, so re-assert the
// colours regardless of the inherited .text-white context.
.archive-header-3 .store-vacation-notice {
    .store-vacation-notice__title { color: $color-heading; }
    .store-vacation-notice__text { color: $color-grey-2; }
}

// ── Pill badge (vendor listing card, after store name) ───────
.store-vacation-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    background: $vacation-surface;
    border: 1px solid rgba(245, 151, 88, 0.4);
    border-radius: 999px;
    color: #b65e16; // darker amber for AA contrast on the cream pill
    font-family: $font-heading;
    font-size: $font-xxs;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: middle;

    i {
        font-size: 11px;
        line-height: 1;
    }
}