/* -------------------------------------------------------------------------
 * Black Friday campaign: card badge, deals listing, seller opt-in page.
 *
 * The badge is built as a third corner flash alongside the trial flash
 * (product-card-trial.css) and the theme's sale flash, borrowing their type
 * treatment so a card with two flashes still reads as one design: same 12px
 * extra-bold Manrope, same shadow, same ribbon radius.
 *
 * It is pinned to the BOTTOM left of the artwork rather than a top corner.
 * Both top corners are already claimed — trial top-left, sale flash top-right
 * — and a discounted product frequently has one of them. Out of the flow like
 * its siblings, so it adds no height to a card in a stretched grid.
 * ---------------------------------------------------------------------- */

.wpbay-product-card__image {
    position: relative;
}

.wpbay-product-card__deal {
    position: absolute;
    bottom: 8px;
    left: 0;
    z-index: 2;
    display: inline-flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(90deg, rgba(120, 12, 12, 1) 0%, rgba(201, 32, 32, 1) 100%);
    box-shadow: 0 1px 2px #0000004c;
    padding: 4px 8px;
    color: #fff;
    font-family: var(--font-family-manrope, Manrope, Arial, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: normal;
    white-space: nowrap;
    letter-spacing: 0.02em;
    text-decoration: none;
    /* Sits inside the image link; clicks belong to the link underneath. */
    pointer-events: none;
}

@media (max-width: 480px) {
    .wpbay-product-card__deal {
        bottom: 6px;
        padding: 3px 6px;
        font-size: 11px;
    }
}

/* -------------------------------------------------------------------------
 * Announcement bar takeover
 *
 * Every rule here is a descendant selector under .wpbay-bf-ad-bar, which beats
 * the theme's single-class rules on specificity regardless of stylesheet order.
 * Layout, sizing and the theme's own mobile rules are left alone; only colour
 * changes, so the 28px header offset still lines up.
 *
 * Three of these are not obvious from looking at the bar:
 *
 *  - The green is on .ad-bar-1, not .ad-bar. .ad-bar is only a flex wrapper
 *    with no background of its own.
 *  - The pink lozenge behind the headline is a background IMAGE on
 *    .overlap-group (img/vector-1.svg), not a colour, so it has to be removed
 *    with background-image: none rather than recoloured.
 *  - .marketplace-launch carries a green -webkit-text-stroke, which keeps the
 *    first label looking washed out on a dark bar until it is zeroed.
 * ---------------------------------------------------------------------- */

/* Centre-weighted rather than left-to-right: the bar's content is centred, so
   a gradient running to one edge puts its strongest colour where there is
   nothing to light up. */
.wpbay-bf-ad-bar .ad-bar-1 {
    background-color: #0b0b0d;
    background-image: linear-gradient(90deg, #0b0b0d 0%, #5e0e0e 50%, #0b0b0d 100%);
}

.wpbay-bf-ad-bar .marketplace-launch {
    color: #f3f4f6;
    -webkit-text-stroke: 0;
    font-weight: 600;
}

.wpbay-bf-ad-bar .overlap-group {
    background-image: none;
    background-color: #c92020;
    border-radius: 999px;
    box-shadow: 0 1px 2px #0000004c;
}

.wpbay-bf-ad-bar .saving-90 {
    color: #fff;
}

.wpbay-bf-ad-bar .limited-time {
    color: #ffd7d7;
}

/* Inverted against the dark bar so the call to action is the brightest thing
   in it; the theme's dark pill would disappear into the background. */
.wpbay-bf-ad-bar .frame-50 {
    background-color: #fff;
}

.wpbay-bf-ad-bar .shop-now {
    color: #0b0b0d;
}

/* The countdown occupies the slot the theme used for a line of text, so it
   inherits that slot's colour and size instead of introducing a chip. */
.wpbay-bf-countdown--bar {
    color: inherit;
    font-weight: 700;
}

.wpbay-bf-countdown--bar .wpbay-bf-countdown__text {
    color: inherit;
}

@media (max-width: 680px) {
    /* The theme already tightens this bar on small screens; of the three text
       slots the countdown is the one that can go. */
    .wpbay-bf-ad-bar .limited-time {
        display: none;
    }
}

/* -------------------------------------------------------------------------
 * Announcement bar: small screens
 *
 * The theme sizes this lozenge for its own short copy ("Fall Sale") and for a
 * background SVG that could be stretched to any width: min-width is dropped at
 * 480px and a hard width: 92px is set at 372px, with 24.5px of side padding.
 * Once it is a real filled pill holding longer copy, those become a 92px box
 * around ~108px of nowrap text, which spills out to the left and lands on top
 * of the "Black Friday" label.
 *
 * So for this bar only, the pill sizes to its own content and carries padding
 * proportionate to a pill rather than to a stretched image.
 * ---------------------------------------------------------------------- */

@media (max-width: 480px) {
    .wpbay-bf-ad-bar .overlap-group {
        width: auto;
        min-width: 0;
        margin-left: 8px;
        padding: 2px 12px;
    }

    .wpbay-bf-ad-bar .ad-bar-1 {
        gap: 2px;
        padding: 0 8px;
    }
}

@media (max-width: 372px) {
    /* Beats the theme's width: 92px on specificity, no !important needed. */
    .wpbay-bf-ad-bar .overlap-group {
        width: auto;
        padding: 2px 10px;
    }
}

/* -------------------------------------------------------------------------
 * Deals listing
 * ---------------------------------------------------------------------- */

.wpbay-bf-deals {
    margin: 0 0 32px;
}

.wpbay-bf-deals__head {
    margin-bottom: 20px;
}

.wpbay-bf-deals__title {
    margin: 0 0 6px;
    font-weight: 800;
}

.wpbay-bf-deals__meta {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
}

.wpbay-bf-deals__meta--live {
    color: #a81d1d;
    font-weight: 700;
}

.wpbay-bf-deals__empty {
    margin: 0;
    padding: 24px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    text-align: center;
}

/* -------------------------------------------------------------------------
 * Countdown
 *
 * Tabular figures and a reserved minimum width, so the digits do not shuffle
 * the surrounding text sideways once a second as they tick.
 * ---------------------------------------------------------------------- */

.wpbay-bf-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.wpbay-bf-countdown__text {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}

/* Own class rather than the theme's screen-reader-text, which this plugin
   cannot assume is defined. */
.wpbay-bf-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.wpbay-bf-countdown--hero {
    margin-top: 10px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #1f2937;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.wpbay-bf-countdown--hero[data-state="live"] {
    background: linear-gradient(90deg, rgba(120, 12, 12, 1) 0%, rgba(201, 32, 32, 1) 100%);
}

.wpbay-bf-countdown--hero[data-state="ended"] {
    background: #6b7280;
}

/* -------------------------------------------------------------------------
 * Seller opt-in page
 * ---------------------------------------------------------------------- */

.wpbay-bf-intro {
    margin-bottom: 20px;
}

.wpbay-bf-terms {
    margin: 12px 0;
    padding-left: 20px;
}

.wpbay-bf-terms li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* The renewal-lock term is the one a seller must not skim, so it is the only
   line in the list given a background. */
.wpbay-bf-terms__warn {
    margin-left: -20px;
    padding: 10px 12px 10px 14px;
    border-left: 3px solid #c92020;
    border-radius: 0 4px 4px 0;
    background: #fef2f2;
    list-style: none;
}

.wpbay-bf-deadline {
    margin: 0;
}

.wpbay-bf-settings {
    margin: 0 0 20px;
    padding: 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
}

.wpbay-bf-settings h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.wpbay-bf-settings__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wpbay-bf-settings__row label,
.wpbay-bf-settings__label {
    font-weight: 600;
}

.wpbay-bf-settings__row input[type="number"] {
    width: 90px;
}

.wpbay-bf-settings__suffix {
    font-weight: 600;
}

.wpbay-bf-plan {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500 !important;
}

.wpbay-bf-settings__hint {
    margin: 4px 0 0;
    color: #6b7280;
    font-size: 13px;
}

.wpbay-bf-status {
    margin: 0 0 16px;
    padding: 0;
}

.wpbay-bf-status.is-ok,
.wpbay-bf-status.is-error {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

.wpbay-bf-status.is-ok {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.wpbay-bf-status.is-error {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.wpbay-bf-table .wpbay-bf-actions {
    white-space: nowrap;
}

.wpbay-bf-pill {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
}

.wpbay-bf-pill--in {
    background: #fee2e2;
    color: #991b1b;
}