/**
 * Variation Swatches — BulinaStudio
 * Styles for pill/chip buttons that replace WooCommerce native <select> dropdowns.
 * Loaded only on single product pages via my-bulina-customizations.php.
 */

/* ── Brand tokens ─────────────────────────────────────────────────────────────
   Single source of truth for the accent colour.
   Use --bulina-accent-soft for solid, rgba(var(--bulina-accent-soft-rgb), opacity) for transparent.
   ──────────────────────────────────────────────────────────────────────────── */
:root {
    --bulina-accent-soft:     #E8A1B0;          /* rose pink — solid */
    --bulina-accent-soft-rgb: 232, 161, 176;    /* rose pink — RGB channels for rgba() */
}

/* ── Hide native select ───────────────────────────────────────────────────── */
/* JS adds .bulina-hidden-select after building pills */
select.bulina-hidden-select {
    display: none !important;
}

/* ── Wrapper box ──────────────────────────────────────────────────────────────
   Single border around all attribute rows + ANULEAZĂ link.
   JS wraps table.variations + .reset_variations in this div.
   min-width:0 — Flatsome's product column (.col) is a flex item with min-width:auto.
   Without this, the denomination cards' min-content (~690px) leaks up through the
   DOM and forces the column wider than the viewport. Same fix as SuperCarExperience.
   ──────────────────────────────────────────────────────────────────────────── */
.bulina-variations-box {
    border: 1px solid rgba(var(--bulina-accent-soft-rgb), 0.25);
    border-radius: 12px;
    padding: 24px 24px 8px;
    margin-bottom: 16px;
    min-width: 0;
}

/* ANULEAZĂ — inline with the first attribute label (JS moves it there; label cell is flex) */
.bulina-variations-box .reset_variations {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6) !important;  /* !important: overrides WC/Flatsome link colour */
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.bulina-variations-box .reset_variations:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* ── Variations table — stacked block layout ──────────────────────────────────
   !important needed: Flatsome applies table/tr/td display and border styles
   with higher specificity that we must override.
   ──────────────────────────────────────────────────────────────────────────── */
table.variations,
table.variations tbody,
table.variations tr,
table.variations td,
table.variations th {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;  /* prevent min-content from leaking into the Flatsome flex column */
    border: none !important;
    background: transparent !important;
}

table.variations tr {
    margin-bottom: 4px;
}

/* td.label = standard variable products, th.label = gift card plugin.
   Flex row: attribute label left, ANULEAZĂ right (JS moves it here). */
table.variations td.label,
table.variations th.label {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 14px 0 !important;
}

table.variations td.value,
table.variations th.value {
    padding: 0 0 20px 0 !important;
}

/* Attribute row labels */
.variations .label label {
    text-transform: uppercase !important;  /* !important: Flatsome resets label styles */
    font-size: 13px !important;
    letter-spacing: 0.14em !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* ── Pill container ───────────────────────────────────────────────────────── */
.bulina-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Individual pill ──────────────────────────────────────────────────────── */
.bulina-swatch-pill {
    padding: 8px 20px;
    min-width: 52px;
    text-align: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
    line-height: 1;
}

/* Hover */
.bulina-swatch-pill:hover:not(.disabled):not(.selected) {
    border-color: rgba(var(--bulina-accent-soft-rgb), 0.5);
    color: #ffffff;
}

/* Selected — rose outer glow */
.bulina-swatch-pill.selected {
    border-color: var(--bulina-accent-soft);
    color: var(--bulina-accent-soft) !important;  /* !important: overrides Flatsome button colour */
    font-weight: 500;
    box-shadow: 0 0 0 1px var(--bulina-accent-soft), 0 0 18px rgba(var(--bulina-accent-soft-rgb), 0.35);
}

/* Disabled — unavailable combination */
.bulina-swatch-pill.disabled {
    opacity: 0.2;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* ── Gift card — Ribbon Cards layout ──────────────────────────────────────── */

/* 3×2 grid on desktop */
.bulina-gift-card .bulina-swatches {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 16px;  /* headroom for selected bow to float above card top */
}

/* Card */
.bulina-gift-card .bulina-swatch-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px 18px;
    min-height: 130px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(160deg,
        rgba(var(--bulina-accent-soft-rgb), 0.07) 0%,
        rgba(0,0,0,0) 65%);
    font-size: 13px;
    font-weight: 400;
    gap: 5px;
    transition: border-color 0.25s ease, background 0.25s ease,
                box-shadow 0.25s ease, transform 0.25s ease;
}

.bulina-gift-card .bulina-swatch-pill:hover:not(.disabled):not(.selected) {
    border-color: rgba(var(--bulina-accent-soft-rgb), 0.4);
    background: linear-gradient(160deg,
        rgba(var(--bulina-accent-soft-rgb), 0.12) 0%,
        rgba(0,0,0,0) 65%);
}

.bulina-gift-card .bulina-swatch-pill.selected {
    border-color: var(--bulina-accent-soft);
    background: linear-gradient(160deg,
        rgba(var(--bulina-accent-soft-rgb), 0.22) 0%,
        rgba(var(--bulina-accent-soft-rgb), 0.06) 80%);
    box-shadow: 0 0 0 1px var(--bulina-accent-soft),
                0 8px 32px rgba(var(--bulina-accent-soft-rgb), 0.28);
    transform: scale(1.06);
    z-index: 1;
}

/* Bow emoji — hue-rotate + desaturate shifts red emoji toward pink */
.bulina-bow {
    font-size: 32px;
    line-height: 1;
    margin-top: auto;
    margin-bottom: 8px;
    flex-shrink: 0;
    user-select: none;
    filter: hue-rotate(330deg) saturate(0.75) brightness(0.78);
    transition: filter 0.25s ease, font-size 0.25s ease, transform 0.25s ease;
}

.bulina-gift-card .bulina-swatch-pill:hover:not(.disabled) .bulina-bow {
    filter: hue-rotate(330deg) saturate(0.85) brightness(0.95);
}

.bulina-gift-card .bulina-swatch-pill.selected .bulina-bow {
    filter: hue-rotate(330deg) saturate(1.0) brightness(1.15);
    font-size: 48px;
    transform: translateY(-14px);  /* bow floats above card top edge */
}

/* Amount */
.bulina-pill-amount {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: rgba(255,255,255,0.92);
    line-height: 1;
    transition: color 0.25s ease;
}

.bulina-gift-card .bulina-swatch-pill.selected .bulina-pill-amount {
    color: var(--bulina-accent-soft);
    font-weight: 400;
}

/* Tier name */
.bulina-pill-tier {
    font-size: 10px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.52);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.bulina-gift-card .bulina-swatch-pill.selected .bulina-pill-tier {
    color: rgba(var(--bulina-accent-soft-rgb), 0.85);
}

/* Hide the attribute label row — not needed on the gift card (cards are self-explanatory) */
.bulina-gift-card table.variations th.label,
.bulina-gift-card table.variations td.label {
    display: none !important;
}

/* ANULEAZĂ hidden: selecting an amount is mandatory, reset serves no purpose */
.bulina-gift-card .reset_variations {
    display: none !important;
}

/* ── Selected-amount summary line ─────────────────────────────────────────── */
.bulina-gift-card-summary {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bulina-gift-card-summary.is-visible {
    opacity: 1;
}

.bulina-gc-value {
    color: var(--bulina-accent-soft);
    font-weight: 600;
    letter-spacing: 0.06em;
}

/* ── Gift card mobile — 3-per-view horizontal scroll, auto-advances every 3s ── */
@media (max-width: 849px) {
    .bulina-gift-card {
        padding: 14px 12px 12px;
    }

    /* width: 100% caps the scroll track to the gift-card box so it doesn't bleed to the page.
       padding-top: bow translateY(-10px) on selected stays inside the container (overflow-x:auto
       forces overflow-y:auto, clipping anything outside — padding provides the needed room). */
    .bulina-gift-card .bulina-swatches {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 6px;
        padding-top: 16px;
        padding-bottom: 4px;
    }
    .bulina-gift-card .bulina-swatches::-webkit-scrollbar { display: none; }

    /* Fixed pixel width (same pattern as SuperCarExperience) — avoids iOS Safari
       flex percentage circular-resolution bug where % inside overflow-x:auto/nowrap
       resolves against the scroll content width instead of the visible box.
       box-sizing: border-box keeps padding inside the 100px.
       100px: 3 cards (312px) + 2 gaps (12px) = 324px → fits cleanly on ~375px screens,
       leaving ~27px of card 4 visible as scroll hint.
       justify-content:flex-start + padding-top: bow is always at a fixed distance from
       card top, regardless of whether tier name is 1 or 2 lines. Without this, margin-top:auto
       on the bow shifts depending on content height, making the translateY lift inconsistent. */
    .bulina-gift-card .bulina-swatch-pill {
        flex: 0 0 auto;
        width: 100px;
        box-sizing: border-box;
        scroll-snap-align: start;
        min-height: 100px;
        padding: 14px 6px 12px;
        gap: 3px;
        justify-content: flex-start;
    }

    /* Bow: fixed at top (no auto top margin). margin-bottom:auto pushes amount+tier to bottom. */
    .bulina-gift-card .bulina-bow {
        margin-top: 0;
        margin-bottom: auto;
    }

    /* Allow tier names to wrap on narrow cards — "Signature Dress" etc. won't fit on one line */
    .bulina-gift-card .bulina-swatch-pill .bulina-pill-tier {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }

    /* No scale on mobile — inside overflow:auto it clips box-shadow (Lesson 7) */
    .bulina-gift-card .bulina-swatch-pill.selected {
        transform: none;
    }

    .bulina-pill-amount { font-size: 18px; }
    .bulina-pill-tier   { font-size: 9px; letter-spacing: 0.06em; }
    .bulina-bow         { font-size: 22px; }
    .bulina-gift-card .bulina-swatch-pill.selected .bulina-bow { font-size: 28px; transform: translateY(-14px); }

    /* iOS Safari auto-zooms inputs with font-size < 16px and keeps the zoom after blur,
       creating horizontal scroll on the whole page. Same fix as SuperCarExperience. */
    #pwgc-purchase-container .pwgc-input-text,
    #pwgc-purchase-container textarea,
    .woocommerce form.cart .ux-quantity .qty {
        font-size: 16px !important;
    }
}

/* ── WooCommerce overrides ────────────────────────────────────────────────── */
/* Remove dashed separator Flatsome adds above the price block */
.woocommerce-variation-price {
    border-top: none !important;
}