/**
 * GBB Variation Enhancements — Stylesheet
 * - Color: visible dropdown + "Selected" indicator alongside swatches
 * - Size: "(Out of stock)" styling in dropdown options
 */

/* ===== Color Selector: "Selected" indicator + dropdown ===== */

.gbb-color-selector-wrap {
    margin-top: 14px;
    width: 100%;
}

/* "Selected: 1 (Jet Black)" text indicator */
.gbb-color-selected-display {
    font-size: 13px;
    color: #333;
    padding: 6px 0;
    margin-bottom: 8px;
    border-top: 1px solid #eee;
    line-height: 1.4;
}

.gbb-color-selected-display strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Dropdown row — label + select on one line */
.gbb-color-dropdown-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gbb-color-dropdown-label {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    flex-shrink: 0;
}

.gbb-color-dropdown {
    flex: 1;
    min-width: 0;
    max-width: 280px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 0;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    -webkit-appearance: auto;
    appearance: auto;
    cursor: pointer;
}

.gbb-color-dropdown:focus {
    border-color: #1a1a1a;
    outline: none;
}

/* ===== Size: option disable + OOS styling ===== */

/* Disabled size options (color doesn't have this size) */
select#pa_size option.gbb-disabled-size,
select#pa_size option:disabled {
    color: #ccc;
    text-decoration: line-through;
}

/* Out-of-stock option styling */
select.gbb-has-oos option.gbb-out-of-stock {
    color: #999;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .gbb-color-dropdown-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .gbb-color-dropdown {
        max-width: 100%;
        width: 100%;
    }
}

/* ====================================================================
   GBB Quantity Stepper v1.0 — Clean, cross-browser consistent design
   Fixes:
   - Duplicate +/- buttons (Element Pack + WooCommerce both inject)
   - Native browser spinner arrows (Chrome/Safari)
   - Inconsistent rendering between Chrome and Safari
   Design: Minimal, rounded, professional e-commerce stepper
   ==================================================================== */

/* --- Step 1: Hide Element Pack's duplicate buttons --- */
/* EP plugin injects ep-variation-swatches-qty-minus/plus alongside */
/* WooCommerce's own a.minus / a.plus. We keep WC's and hide EP's. */
div.quantity .ep-variation-swatches-qty-minus,
div.quantity .ep-variation-swatches-qty-plus {
    display: none !important;
}

/* --- Step 2: Hide native browser number spinners --- */
/* Chrome/Safari/Edge */
div.quantity input[type="number"]::-webkit-inner-spin-button,
div.quantity input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
/* Firefox */
div.quantity input[type="number"] {
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}

/* --- Step 3: Container — unified pill shape --- */
div.quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1.5px solid #d4d4d4 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #fff !important;
    height: 44px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    /* Remove conflicting theme classes' padding/effects */
    padding: 0 !important;
}

/* --- Step 4: Minus / Plus buttons — clean, icon style --- */
div.quantity a.minus,
div.quantity a.plus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 100% !important;
    background: #f7f7f7 !important;
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

div.quantity a.minus {
    border-right: 1px solid #e0e0e0 !important;
}

div.quantity a.plus {
    border-left: 1px solid #e0e0e0 !important;
}

/* Hover — subtle background change */
div.quantity a.minus:hover,
div.quantity a.plus:hover {
    background: #ececec !important;
    color: #1a1a1a !important;
}

/* Active — pressed state */
div.quantity a.minus:active,
div.quantity a.plus:active {
    background: #dedede !important;
}

/* Disabled state (qty can't go below min) */
div.quantity a.minus.disabled,
div.quantity a.minus[style*="woocommerce-disabled"] {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* --- Step 5: Input field — clean, centered, no spinners --- */
div.quantity input[type="number"].qty,
div.quantity input[type="number"].input-text {
    width: 48px !important;
    min-width: 48px !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Remove number input spinners on all browsers */
    -moz-appearance: textfield !important;
}

div.quantity input[type="number"].qty:focus {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Hide the screen-reader-text label (it's accessibility only, keep for SR) */
div.quantity label.screen-reader-text {
    position: absolute !important;
    left: -9999px !important;
}

/* --- Step 6: Responsive — touch-friendly on mobile --- */
@media (max-width: 768px) {
    div.quantity {
        height: 42px !important;
    }
    
    div.quantity a.minus,
    div.quantity a.plus {
        width: 44px !important;
        min-width: 44px !important;
        font-size: 20px !important;
    }
    
    div.quantity input[type="number"].qty {
        width: 44px !important;
        min-width: 44px !important;
        font-size: 16px !important;
    }
}