/**
 * AIEO Brand Gifts — front-end styling for:
 *   (B) single-product picker section (.aieo-bg-product-section)
 *   (C) archive eligibility badge      (.aieo-bg-archive-badge)
 *
 * The reward-card layout (A1) lives in aieo-side-cart.css since it
 * sits inside the side-cart panel and shares its base styling.
 */

/* ==========================================================================
   (C) Archive badge — visual styling only. Positioning + stacking with
   .onsale and .aieo-pro-badge is owned centrally by the inline stylesheet
   in class-aieo-dmm-role-pricing.php so all three badges stay in sync
   under both layout modes (top-left over image / below favourite icon).
   ========================================================================== */
.aieo-bg-archive-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #f59e0b;          /* warm gold to match the gift motif */
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
}
.aieo-bg-archive-badge-icon { font-size: 13px; line-height: 1; }

/* ==========================================================================
   (B) Single-product page picker
   ========================================================================== */
.aieo-bg-product-section {
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.aieo-bg-product-card {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff8e1;
}
.aieo-bg-product-card.is-qualified { background: #d1fae5; border-color: #86efac; }
.aieo-bg-product-card-headline {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}
.aieo-bg-product-card-label {
    display: block;
    font-size: 11px;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
/* A fixed width, capped: the full product page column was a 900 px field, and
   `width: auto` follows the chosen option under the theme's base-select (a
   180 px box for the placeholder, then the gift's name wrapped). The card
   scope outranks the drawer's .aieo-sc-gift-select cap, which loads later. */
.aieo-bg-product-card .aieo-bg-product-select,
.aieo-bg-product-card .aieo-bg-variation-select {
    width: min(100%, 460px);
    min-width: 0;
    max-width: 100%;
    /* Slim, as the complementary products' variation (the owner). */
    height: 32px;
    min-height: 32px;
    padding-block: 0;
}
.aieo-bg-product-select,
.aieo-bg-variation-select { cursor: pointer; }
/* Under the theme the selects keep the theme's own field style (a white box
   with light text in dark mode otherwise). */
html:not([data-rooster-design="theme"]) .aieo-bg-product-select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
}
.aieo-bg-product-variation { margin-top: 8px; }
html:not([data-rooster-design="theme"]) .aieo-bg-variation-select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}
.aieo-bg-product-card-only {
    font-size: 13px;
    color: #1f2937;
}
/* Under the theme the card and its text take the palette tokens, which swap in
   dark mode (the fixed creams were unreadable there). An offer's own bar colour
   is an inline style and still wins. */
html[data-rooster-design="theme"] .aieo-bg-product-card {
    /* The bordered panel on the page's colour, as every panel on the product page (UI review, 28 Oct 2026). */
    background: var(--wp--preset--color--bg);
    border-color: var(--wp--preset--color--border);
    border-radius: var(--aieo-shape-card, 8px);
}
/* The same green as the drawer's gift banner (aieo-side-cart.css): the theme's
   success colour at 15% on the page, its border at 40%. */
html[data-rooster-design="theme"] .aieo-bg-product-card.is-qualified {
    background: color-mix(in srgb, var(--wp--preset--color--success, #28a745) 15%, var(--wp--preset--color--bg));
    border-color: color-mix(in srgb, var(--wp--preset--color--success, #28a745) 40%, var(--wp--preset--color--bg));
}
html[data-rooster-design="theme"] .aieo-bg-product-card-headline,
html[data-rooster-design="theme"] .aieo-bg-product-card-only { color: var(--wp--preset--color--fg); }
html[data-rooster-design="theme"] .aieo-bg-product-card-label { color: color-mix(in srgb, var(--wp--preset--color--fg) 70%, transparent); }

/* ==========================================================================
   (D) Archive banner — top-of-archive promo for the active gift offer
   on brand / category / pa_need archive pages. Renders via both classic
   (woocommerce_archive_description) and block (render_block_*) hook
   paths; once-only PHP guard ensures a single instance per request.
   ========================================================================== */
.aieo-bg-archive-banner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin: 0 0 16px;
    background: var(--aieo-bg-archive-banner-bg, #fff7ed);
    border: 1px solid var(--aieo-bg-archive-banner-border, #fed7aa);
    border-radius: 8px;
    color: var(--aieo-bg-archive-banner-color, #7c2d12);
}
.aieo-bg-archive-banner-headline {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.aieo-bg-archive-banner-headline a {
    color: inherit;
    text-decoration: underline;
}
.aieo-bg-archive-banner-thumbs {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.aieo-bg-archive-banner-thumb {
    display: flex;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #fdba74;
}
.aieo-bg-archive-banner-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.aieo-bg-archive-banner-more {
    font-size: 11px;
    font-weight: 600;
    color: #9a3412;
    padding: 0 6px;
    background: #fed7aa;
    border-radius: 999px;
}
/* The banner's defaults follow the theme's palette; colours set inline on the
   banner (its custom properties) still win. */
html[data-rooster-design="theme"] .aieo-bg-archive-banner {
    --aieo-bg-archive-banner-bg: var(--wp--preset--color--subtle);
    --aieo-bg-archive-banner-border: var(--wp--preset--color--border);
    --aieo-bg-archive-banner-color: var(--wp--preset--color--fg);
}
html[data-rooster-design="theme"] .aieo-bg-archive-banner-thumb {
    background: var(--wp--preset--color--bg);
    border-color: var(--wp--preset--color--border);
}
html[data-rooster-design="theme"] .aieo-bg-archive-banner-more {
    background: var(--wp--preset--color--border);
    color: var(--wp--preset--color--fg);
}
@media (max-width: 600px) {
    /* Stack on narrow viewports — thumbnails drop below the headline. */
    .aieo-bg-archive-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    .aieo-bg-archive-banner-thumbs {
        align-self: stretch;
    }
}

/* Under the theme's design authority this select is the theme's (UI review, 28 Oct 2026): its height, text
 * size (16 px on phones), border, corners, colours, chevron and focus come from the theme's select recipe;
 * only the layout above stays ours. */
html[data-rooster-design="theme"] select.aieo-bg-product-select {
    min-height: revert-layer;
    height: revert-layer;
    padding: revert-layer;
    border: revert-layer;
    border-radius: revert-layer;
    background: revert-layer;
    box-shadow: revert-layer;
    color: revert-layer;
    font-size: revert-layer;
    font-weight: revert-layer;
    line-height: revert-layer;
    appearance: revert-layer;
}