/* ============================================================
   GoMining Gift Card Product Form — FUNCTIONAL CORE
   All selectors use the .gomining- prefix.

   ALWAYS enqueued. Carries ONLY what the personalization UI needs
   to *function*: show/hide ([hidden] / :disabled), carousel
   mechanics (overflow / position), 44px touch targets, the
   structural display / grid / flex skeleton, --active / --selected
   state hooks, the SVG icon-stroke fix, and the greeting @font-face
   + its custom-property application.

   NO spacing and NO sizing cosmetics live here — every margin,
   padding, gap, color, border, radius, shadow, hover, and the
   button flex-stretch live in gift-card-product-decorative.css
   (separate handle, dequeue-able) so Bricks owns layout, spacing
   AND element sizing without !important wars:
       wp_dequeue_style( 'gomining-gift-card-decorative' );
   ============================================================ */

.gomining-field-label {
    display: block;
    font-weight: 600;
}

/* ---- Category filter pills (shared: spread filters) ---- */

.gomining-category-btn {
    cursor: pointer;
}

/* Active-filter indication is a functional state hook (AC 7), so it lives in the
   ALWAYS-enqueued core and must survive a decorative dequeue. Colored via the
   --gomining-accent token (fallback = brand purple) so core + decorative share one
   source of truth and Bricks can recolor in one place. Compound selector raises
   specificity above the decorative base .gomining-category-btn so it wins
   regardless of stylesheet load order. */
.gomining-category-btn.gomining-category-btn--active {
    background: var(--gomining-accent, #7540EF);
    border-color: var(--gomining-accent, #7540EF);
    color: #fff;
}

/* ---- Grouped filters dropdown — panel show/hide (FUNCTIONAL) ---- */

/* Panel visibility is FUNCTIONAL, not decorative: without it the dropdown
   could not open after a decorative dequeue. The panel is hidden by default
   and shown only while the dropdown carries .is-open (toggled by the JS
   controller). Cosmetics (chevron rotation, border, shadow, positioning)
   live in the decorative layer. No-op on pages without the dropdown shell. */
.gm-filters-panel {
    display: none;
}

.gm-filters-dropdown.is-open .gm-filters-panel {
    display: block;
}

/* ---- Textarea & char counter ---- */

.gomining-message-textarea {
    width: 100%;
    min-height: 6em;
    resize: vertical;
    box-sizing: border-box;
    font-size: 1em;
    /* Greeting font applied here (moved off .gomining-spread-message in Story 5.2
       so it survives the cards/message split). Exposed as a custom property so
       Bricks can override the greeting font with one token, no specificity war. */
    font-family: var(--gomining-greeting-font, 'Caveat', cursive);
}

.gomining-char-count {
    display: block;
    font-size: 0.85em;
}

/* ============================================================
   Greeting font — @font-face (functional core: the plugin always
   ships and registers the font so the greeting renders correctly
   without any Bricks configuration). The .woff2 files live in
   plugin/assets/fonts/.
   ============================================================ */

@font-face {
    font-family: 'Caveat';
    src: url('fonts/caveat-latin-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Caveat';
    src: url('fonts/caveat-cyrillic-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Caveat';
    src: url('fonts/caveat-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Caveat';
    src: url('fonts/caveat-cyrillic-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ============================================================
   Card Spread / carousel — structural mechanics
   ============================================================ */

.gomining-spread-wrap {
    width: 100%;
}

.gomining-card-spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.gomining-spread-left {
    position: relative;
}

.gomining-spread-track {
    overflow: hidden;
    position: relative;
}

.gomining-spread-img {
    width: 100%;
    display: block;
}

.gomining-spread-empty {
    text-align: center;
}

.gomining-spread-controls {
    display: flex;
    align-items: center;
}

/* 44px-wide tap target for the prev/next nav (touch-friendly). */
.gomining-spread-nav {
    flex-shrink: 0;
    width: 44px;
    min-height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Functional: keep the stroke icons from being filled by theme svg rules.
   Defends icon correctness (not a cosmetic specificity war), so !important stays. */
.gomining-spread-nav svg,
.gomining-spread-nav polyline {
    fill: none !important;
}

.gomining-spread-dots {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}

.gomining-spread-dot {
    width: 8px;
    height: 8px;
    display: inline-block;
}

/* Selected-card indication is a functional state hook (AC 7): which card is
   chosen must stay visible even if the decorative layer is dequeued. Same
   --gomining-accent token + compound-selector specificity as the active filter
   pill. (Inactive-dot cosmetics remain decorative.) */
.gomining-spread-dot.gomining-spread-dot--active {
    background: var(--gomining-accent, #7540EF);
}

.gomining-spread-right {
    display: flex;
    flex-direction: column;
}

/* ---- Spread — Mobile breakpoint (structural) ---- */

@media (max-width: 768px) {
    .gomining-card-spread {
        grid-template-columns: 1fr;
        transform: none;
    }

    /* Hide prev/next buttons — swipe gesture is sufficient on touch (show/hide). */
    .gomining-spread-nav {
        display: none;
    }

    /* Dots only: center them. */
    .gomining-spread-controls {
        justify-content: center;
    }

    /* Text panel: match the image area height visually. */
    .gomining-spread-right {
        min-height: 180px;
    }
}

/* ============================================================
   Gift Actions — popup CTAs ([gomining_gift_actions])
   Function only: touch target + interaction state. The flex
   container layout, spacing and the button flex-stretch are
   decorative, so Bricks fully owns the button sizing.
   ============================================================ */

.gomining-gift-actions__checkout,
.gomining-gift-actions__add-another {
    min-height: 44px;
    cursor: pointer;
    font-size: 1em;
    font-family: inherit;
}

.gomining-gift-actions__checkout:disabled,
.gomining-gift-actions__add-another:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Busy state during the AJAX add — dims + blocks repeat clicks on ANY tag.
   :disabled above covers native <button>; this class covers Bricks <a>/<div> CTAs
   (JS toggles .gomining-gift-actions--busy on both buttons while the request runs). */
.gomining-gift-actions--busy {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.gomining-gift-actions__error {
    font-size: 0.9em;
    line-height: 1.4;
}

.gomining-gift-actions__error[hidden] {
    display: none;
}