/**
 * PDP Configurator — D2C product page styles
 *
 * Uses Zeawin design tokens. Sharp corners throughout (--zeawin-radius-* = 0).
 * All selectors are scoped to .zeawin-pdp-active so they only apply when
 * the configurator JS has successfully initialised.
 *
 * @package Goya_Child
 */

/* =============================================================================
   Hide default WooCommerce UI replaced by the configurator
   ============================================================================= */

/* Hide the variation attribute table (the <select> dropdowns) */
.zeawin-pdp-active .variations_form .variations {
    display: none !important;
}


/* =============================================================================
   Shared section wrapper
   ============================================================================= */

.zeawin-pdp-section {
    margin-bottom: 16px;
}

.zeawin-pdp-section-label {
    font-size: var(--zeawin-font-size-xs);
    font-weight: var(--zeawin-font-weight-medium);
    color: var(--zeawin-color-text-secondary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* Utility: toggled by JS */
.is-hidden {
    display: none !important;
}

/* =============================================================================
   Setup selector (option cards)
   ============================================================================= */

.zeawin-pdp-opt-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zeawin-pdp-opt-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--zeawin-color-border);
    cursor: pointer;
    transition: border-color var(--zeawin-transition-fast);
}

.zeawin-pdp-opt-card:hover {
    border-color: var(--zeawin-color-gray-500);
}

.zeawin-pdp-opt-card.is-selected {
    border: 1.5px solid var(--zeawin-color-text-primary);
}

.zeawin-pdp-opt-card:focus-visible {
    outline: 2px solid var(--zeawin-color-text-primary);
    outline-offset: 2px;
}

/* Radio dot */
.zeawin-pdp-radio {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--zeawin-color-gray-400);
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zeawin-pdp-radio.is-on {
    border-color: var(--zeawin-color-text-primary);
    background: var(--zeawin-color-text-primary);
}

.zeawin-pdp-radio.is-on::after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
}

.zeawin-pdp-opt-body {
    flex: 1;
    min-width: 0;
}

.zeawin-pdp-opt-name {
    font-size: var(--zeawin-font-size-sm);
    font-weight: var(--zeawin-font-weight-medium);
    color: var(--zeawin-color-text-primary);
    line-height: 1.4;
}

.zeawin-pdp-opt-desc {
    font-size: var(--zeawin-font-size-xs);
    color: var(--zeawin-color-text-secondary);
    margin-top: 2px;
}

.zeawin-pdp-opt-price {
    font-size: var(--zeawin-font-size-sm);
    font-weight: var(--zeawin-font-weight-medium);
    color: var(--zeawin-color-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Save badge — green pill */
.zeawin-pdp-save-badge {
    display: inline-block;
    font-size: 10px;
    background: var(--zeawin-color-success-bg);
    color: var(--zeawin-color-success-text);
    padding: 2px 6px;
    border-radius: var(--zeawin-radius-full);
    margin-left: 5px;
    font-weight: var(--zeawin-font-weight-medium);
}

/* =============================================================================
   Color selection (swatch blocks)
   ============================================================================= */

/* Hide the "Color selection" section heading */
.zeawin-pdp-colors > .zeawin-pdp-section-label {
    display: none;
}

/* Extra breathing room above the swatch section (after description / setup cards) */
.zeawin-pdp-colors {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 24px;
}

.zeawin-pdp-color-block {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zeawin-pdp-color-block-name {
    font-size: var(--zeawin-font-size-sm);
    font-weight: var(--zeawin-font-weight-medium);
    color: var(--zeawin-color-text-primary);
}

/* Swatches + colour name on one flex row — label pushed to far right */
.zeawin-pdp-swatch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Label hidden when no swatch is active; always shown once one is selected */
.zeawin-pdp-color-label {
    font-size: var(--zeawin-font-size-xs);
    color: var(--zeawin-color-text-secondary);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--zeawin-transition-fast);
}

.zeawin-pdp-swatch-row:has(.zeawin-pdp-swatch.is-active) .zeawin-pdp-color-label {
    opacity: 1;
}

/* Swatches — wider gap to match regular single-product swatches */
.zeawin-pdp-swatches {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Outer wrapper — matches WVS .variable-item: fixed 22px circle,
   overflow:hidden, outline ring outside the box. */
.zeawin-pdp-swatch {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color var(--zeawin-transition-fast);
}

/* Inner colour span — fills the full 22px circle. */
.zeawin-pdp-swatches .zeawin-pdp-swatch > span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 3px 3px 6px rgba(0, 0, 0, 0.55),
        inset -2px -2px 3px rgba(255, 255, 255, 0.2) !important;
}

/* Dome highlight */
.zeawin-pdp-swatches .zeawin-pdp-swatch > span::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 10% !important;
    left: 10% !important;
    width: 45% !important;
    height: 45% !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.60) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.zeawin-pdp-swatch:hover {
    outline-color: var(--zeawin-color-gray-400, #ced4da);
}

.zeawin-pdp-swatch.is-active {
    outline-color: var(--zeawin-color-text-primary, #282828);
}

/* =============================================================================
   Add-ons
   ============================================================================= */

.zeawin-pdp-addon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--zeawin-color-border);
    cursor: pointer;
    transition: border-color var(--zeawin-transition-fast);
}

.zeawin-pdp-addon-row:hover {
    border-color: var(--zeawin-color-gray-500);
}

.zeawin-pdp-addon-row.is-on {
    border: 1.5px solid var(--zeawin-color-text-primary);
    border-bottom: none;
}

.zeawin-pdp-addon-row:focus-visible {
    outline: 2px solid var(--zeawin-color-text-primary);
    outline-offset: 2px;
}

/* Checkbox */
.zeawin-pdp-checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    border: 1.5px solid var(--zeawin-color-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    transition: background var(--zeawin-transition-fast), border-color var(--zeawin-transition-fast);
}

.zeawin-pdp-checkbox.is-on {
    background: var(--zeawin-color-text-primary);
    border-color: var(--zeawin-color-text-primary);
}

.zeawin-pdp-addon-info {
    flex: 1;
    min-width: 0;
}

.zeawin-pdp-addon-name {
    font-size: var(--zeawin-font-size-sm);
    font-weight: var(--zeawin-font-weight-medium);
    color: var(--zeawin-color-text-primary);
}

.zeawin-pdp-addon-sub {
    font-size: var(--zeawin-font-size-xs);
    color: var(--zeawin-color-text-secondary);
    margin-top: 2px;
}

.zeawin-pdp-addon-price {
    font-size: var(--zeawin-font-size-xs);
    color: var(--zeawin-color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Expand panel — shown when add-on is checked */
.zeawin-pdp-addon-expand {
    padding: 10px 12px;
    border: 1.5px solid var(--zeawin-color-text-primary);
    border-top: none;
}

.zeawin-pdp-addon-expand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--zeawin-font-size-xs);
    color: var(--zeawin-color-text-secondary);
    margin-bottom: 8px;
}

/* =============================================================================
   Quantity stepper
   ============================================================================= */

.zeawin-pdp-qty-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.zeawin-pdp-qty-label {
    margin-bottom: 0;
    margin-right: 4px;
}

.zeawin-pdp-qty-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--zeawin-color-border);
    background: #fff;
    cursor: pointer;
    font-size: 16px;
    color: var(--zeawin-color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color var(--zeawin-transition-fast), background var(--zeawin-transition-fast);
    padding: 0;
    line-height: 1;
}

.zeawin-pdp-qty-btn:hover {
    border-color: var(--zeawin-color-text-primary);
    background: var(--zeawin-color-gray-100);
}

.zeawin-pdp-qty-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.zeawin-pdp-qty-val {
    font-size: var(--zeawin-font-size-sm);
    font-weight: var(--zeawin-font-weight-medium);
    color: var(--zeawin-color-text-primary);
    min-width: 24px;
    text-align: center;
}

/* =============================================================================
   Hide Goya sticky bar — not wired to the configurator JS
   ============================================================================= */

body.zeawin-pdp-no-sticky .sticky-product-bar {
    display: none !important;
}

/* =============================================================================
   Description tab — match the centred layout of Additional Information / Reviews
   Goya's desc-layout-full forces .description-inner to max-width:100%, which
   makes it span the full viewport while other tabs stay at 820px centred.
   Override to match.
   ============================================================================= */

body.zeawin-pdp-no-sticky .desc-layout-full .description-inner {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =============================================================================
   Hide WooCommerce's dynamic variation price — shown inside single_variation_wrap
   after a variation is selected. The static price range (p.price / .summary > .price)
   between title and description is intentionally left visible.
   ============================================================================= */

.zeawin-pdp-active .woocommerce-variation-price,
.zeawin-pdp-active .single_variation_wrap .price {
    display: none !important;
}