/**
 * WooCommerce Product Customizer — Frontend Styles v2.3
 * Layout 2 columnas en tarjetas de extras. Control total de color por CSS vars.
 *
 * @package WooCommerce_Product_Customizer
 */

/* ═══════════════════════════════════════════════
   Variables base — sobreescritas por wrpc-dynamic-styles
═══════════════════════════════════════════════ */
:root {
    --wcc-font:            inherit;

    /* Píldoras incluidos */
    --wcc-radius-pill:     999px;
    --wcc-pad-v:           8px;
    --wcc-pad-h:           14px;
    --wcc-color-active-bg: #eafaf0;
    --wcc-color-active-tx: #1e8a44;
    --wcc-color-off-bg:    #fdeaea;
    --wcc-color-off-tx:    #d62828;

    /* Títulos de sección */
    --wcc-title-bg:        #fff3ec;
    --wcc-title-tx:        #f25c00;
    --wcc-title-radius:    8px;
    --wcc-title-padding:   10px;

    /* Precio */
    --wcc-price-color:     #f25c00;
    --wcc-price-size:      12px;
    --wcc-price-weight:    700;

    /* Botón toggle — normal */
    --wcc-btn-bg:          #ffffff;
    --wcc-btn-icon:        #f25c00;
    --wcc-btn-border:      #f25c00;

    /* Botón toggle — activo */
    --wcc-btn-act-bg:      #f25c00;
    --wcc-btn-act-icon:    #ffffff;

    /* Extra seleccionada */
    --wcc-extra-sel-bg:    #fff3ec;
    --wcc-extra-sel-tx:    #f25c00;
    --wcc-extra-sel-bd:    #f25c00;

    /* Sección Incluidos */
    --wcc-inc-border-w:    1px;
    --wcc-inc-border-r:    14px;
    --wcc-inc-header-bg:   #eafaf0;

    /* Sección Extras */
    --wcc-ext-border-w:    1px;
    --wcc-ext-border-r:    14px;
    --wcc-ext-header-bg:   #fff3ec;

    /* Paleta estática */
    --wcc-green-mid:       #b7eacc;
    --wcc-orange-mid:      #ffd7bc;
    --wcc-red:             #d62828;
    --wcc-red-light:       #fdeaea;
    --wcc-gray:            #f0f0f0;
    --wcc-text:            #1a1a1a;
    --wcc-text-muted:      #6b6b6b;
    --wcc-border:          #e4e4e4;
    --wcc-bg:              #ffffff;
    --wcc-shadow-sm:       0 1px 4px rgba(0,0,0,.07);
    --wcc-shadow-md:       0 4px 16px rgba(0,0,0,.10);
    --wcc-ease:            cubic-bezier(.34,1.56,.64,1);
    --wcc-ease-out:        cubic-bezier(.25,.46,.45,.94);
}

/* ═══════════════════════════════════════════════
   Contenedor raíz
═══════════════════════════════════════════════ */
.wcc-customizer {
    font-family: var(--wcc-font);
    color: var(--wcc-text);
    max-width: 600px;
    margin: 20px 0;
}

/* ═══════════════════════════════════════════════
   Secciones — contenedor
═══════════════════════════════════════════════ */
.wcc-section {
    margin-bottom: 16px;
    overflow: hidden;
    background: var(--wcc-bg);
    box-shadow: var(--wcc-shadow-sm);
    /* border-width, border-radius y header-bg vienen de las vars dinámicas */
    border-style: solid;
    border-color: var(--wcc-border);
}

.wcc-section--remove {
    border-width:  var(--wcc-inc-border-w);
    border-radius: var(--wcc-inc-border-r);
}

.wcc-section--add {
    border-width:  var(--wcc-ext-border-w);
    border-radius: var(--wcc-ext-border-r);
}

/* ── Header de sección ── */
.wcc-section-header {
    display:         flex;
    align-items:     flex-start;
    gap:             10px;
    padding:         var(--wcc-title-padding) 16px;
    border-bottom:   1px solid var(--wcc-border);
}

.wcc-section--remove .wcc-section-header {
    background:          var(--wcc-inc-header-bg);
    border-bottom-color: var(--wcc-green-mid);
    border-radius: var(--wcc-title-radius) var(--wcc-title-radius) 0 0;
}

.wcc-section--add .wcc-section-header {
    background:          var(--wcc-ext-header-bg);
    border-bottom-color: var(--wcc-orange-mid);
    border-radius: var(--wcc-title-radius) var(--wcc-title-radius) 0 0;
}

.wcc-section-icon {
    font-size:   22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top:  2px;
}

.wcc-section-title {
    font-size:   15px   !important;
    font-weight: 700    !important;
    margin:      0 0 2px !important;
    padding:     0      !important;
    line-height: 1.2    !important;
    color:       var(--wcc-title-tx) !important;
}

.wcc-section-hint {
    font-size:   12px !important;
    margin:      0    !important;
    padding:     0    !important;
    color:       var(--wcc-title-tx) !important;
    opacity:     .8;
    line-height: 1.4  !important;
}

/* ═══════════════════════════════════════════════
   PÍLDORAS — Ingredientes incluidos
═══════════════════════════════════════════════ */
.wcc-pills-wrap {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    padding:   14px 16px 16px;
}

.wcc-pill {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     var(--wcc-pad-v) var(--wcc-pad-h);
    border-radius: var(--wcc-radius-pill);
    border:      2px solid transparent;
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
    user-select: none;
    transition:
        background   .18s var(--wcc-ease-out),
        border-color .18s var(--wcc-ease-out),
        color        .18s var(--wcc-ease-out),
        transform    .18s var(--wcc-ease),
        box-shadow   .18s var(--wcc-ease-out);
    background:  var(--wcc-bg);
    outline:     none;
    line-height: 1;
    white-space: nowrap;
}

.wcc-pill:focus-visible {
    box-shadow: 0 0 0 3px rgba(30,138,68,.35);
}

.wcc-pill-check,
.wcc-pill-cross {
    font-size:   11px;
    font-weight: 900;
    flex-shrink: 0;
    line-height: 1;
    transition:  opacity .15s;
}

/* Estado ACTIVO */
.wcc-pill--active {
    background:   var(--wcc-color-active-bg);
    border-color: var(--wcc-color-active-tx);
    color:        var(--wcc-color-active-tx);
    box-shadow:   0 2px 6px rgba(30,138,68,.12);
}
.wcc-pill--active .wcc-pill-check { opacity: 1; }
.wcc-pill--active .wcc-pill-cross { opacity: 0; display: none; }
.wcc-pill--active:hover { filter: brightness(.95); transform: scale(1.03); }

/* Estado QUITADO */
.wcc-pill--removed {
    background:   var(--wcc-color-off-bg);
    border-color: var(--wcc-color-off-tx);
    color:        var(--wcc-color-off-tx);
}
.wcc-pill--removed .wcc-pill-label { text-decoration: line-through; opacity: .7; }
.wcc-pill--removed .wcc-pill-check { opacity: 0; display: none; }
.wcc-pill--removed .wcc-pill-cross { opacity: 1; display: inline; }
.wcc-pill--removed:hover { filter: brightness(.95); transform: scale(1.03); }

@keyframes wcc-bounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(.92); }
    70%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.wcc-pill--bounce { animation: wcc-bounce .28s var(--wcc-ease) forwards; }

/* ═══════════════════════════════════════════════
   TARJETAS EXTRAS — Layout 2 columnas
═══════════════════════════════════════════════ */
.wcc-extras-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   10px;
    padding:               14px 16px 16px;
}

/* ── Tarjeta: fila única flex con 2 columnas ── */
.wcc-extra-card {
    display:         flex;
    flex-direction:  row;            /* ← CLAVE: fila, no columna */
    align-items:     center;
    justify-content: space-between;  /* texto izq. · botón der. */
    gap:             10px;
    border:          2px solid var(--wcc-border);
    border-radius:   10px;
    padding:         10px 12px;
    background:      var(--wcc-bg);
    cursor:          pointer;
    transition:
        border-color .18s var(--wcc-ease-out),
        background   .18s var(--wcc-ease-out),
        box-shadow   .18s var(--wcc-ease-out),
        transform    .18s var(--wcc-ease);
}

.wcc-extra-card:hover {
    border-color: var(--wcc-btn-border);
    box-shadow:   var(--wcc-shadow-md);
    transform:    translateY(-1px);
}

/* Columna izquierda: nombre + precio apilados */
.wcc-extra-card__body {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    flex:           1;          /* ocupa todo el espacio disponible */
    min-width:      0;          /* permite truncar si es necesario */
}

.wcc-extra-card__name {
    font-size:   13px;
    font-weight: 600;
    color:       var(--wcc-text);
    line-height: 1.2;
    white-space: normal;
}

/* Precio — controlado completamente por vars dinámicas */
.wcc-extra-card__price {
    font-size:   var(--wcc-price-size);
    font-weight: var(--wcc-price-weight);
    color:       var(--wcc-price-color);
    line-height: 1;
}

.wcc-extra-card__price--free {
    color:       #1e8a44;
    font-weight: 600;
}

/* Columna derecha: botón circular */
.wcc-extra-toggle {
    flex-shrink:     0;          /* no se encoge nunca */
    width:           34px;
    height:          34px;
    border-radius:   50%;
    border:          2px solid var(--wcc-btn-border);
    background:      var(--wcc-btn-bg);
    color:           var(--wcc-btn-icon);
    font-size:       20px;
    line-height:     1;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    padding:         0;
    font-weight:     700;
    transition:
        background   .18s var(--wcc-ease-out),
        color        .18s var(--wcc-ease-out),
        border-color .18s var(--wcc-ease-out),
        transform    .18s var(--wcc-ease);
}

.wcc-extra-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(242,92,0,.3);
    outline:    none;
}

.wcc-extra-toggle__icon { transition: opacity .12s; line-height: 1; }
.wcc-extra-toggle__icon--add    { display: flex; }
.wcc-extra-toggle__icon--remove { display: none; }

.wcc-extra-toggle:hover {
    background:   var(--wcc-btn-act-bg)   !important;
    color:        var(--wcc-btn-act-icon) !important;
    border-color: var(--wcc-btn-act-bg)   !important;
    transform:    scale(1.1);
}

/* Estado AÑADIDA */
.wcc-extra-card--added {
    border-color: var(--wcc-extra-sel-bd);
    background:   var(--wcc-extra-sel-bg);
    box-shadow:   0 3px 12px rgba(0,0,0,.09);
    transform:    translateY(-1px);
}

.wcc-extra-card--added .wcc-extra-card__name {
    color: var(--wcc-extra-sel-tx);
}

.wcc-extra-card--added .wcc-extra-toggle {
    background:   var(--wcc-btn-act-bg)   !important;
    color:        var(--wcc-btn-act-icon) !important;
    border-color: var(--wcc-btn-act-bg)   !important;
}

.wcc-extra-card--added .wcc-extra-toggle__icon--add    { display: none; }
.wcc-extra-card--added .wcc-extra-toggle__icon--remove { display: flex; }

/* Animación pop del botón */
@keyframes wcc-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}
.wcc-btn--pop { animation: wcc-pop .22s var(--wcc-ease) forwards; }

/* ═══════════════════════════════════════════════
   Barra de precio extra
═══════════════════════════════════════════════ */
.wcc-price-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             8px;
    padding:         12px 16px;
    background:      linear-gradient(135deg, #fff3ec 0%, #ffe5d0 100%);
    border:          2px solid var(--wcc-orange-mid);
    border-radius:   12px;
    margin-top:      4px;
}

.wcc-price-bar__label {
    font-size:   13px;
    color:       var(--wcc-text-muted);
    font-weight: 500;
}

.wcc-price-bar__amount {
    font-size:      18px;
    font-weight:    800;
    color:          var(--wcc-price-color);
    letter-spacing: -.3px;
}

/* ═══════════════════════════════════════════════
   Error (solo visible a admins)
═══════════════════════════════════════════════ */
.wcc-error {
    padding:       10px 14px;
    background:    var(--wcc-red-light);
    color:         var(--wcc-red);
    border-radius: 8px;
    font-size:     13px;
    border-left:   3px solid var(--wcc-red);
    margin:        8px 0;
}

/* ═══════════════════════════════════════════════
   Responsive — móvil
   Las tarjetas mantienen el layout de 2 columnas
   (texto izq + botón der) en TODOS los breakpoints
═══════════════════════════════════════════════ */
@media (max-width: 600px) {

    .wcc-extras-grid {
        grid-template-columns: 1fr;   /* 1 columna = tarjetas full-width */
        gap:     8px;
        padding: 10px 12px 14px;
    }

    /* La tarjeta sigue siendo flex row — NO se rompe en columna */
    .wcc-extra-card {
        padding: 10px 12px;
    }

    .wcc-extra-card__name {
        font-size: 13px;
    }

    .wcc-extra-toggle {
        width:     32px;
        height:    32px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    .wcc-pills-wrap {
        gap:     6px;
        padding: 10px 12px 12px;
    }

    .wcc-pill {
        font-size: 12px;
    }

    .wcc-section-header {
        padding: 10px 12px;
    }

    .wcc-price-bar {
        padding: 10px 12px;
    }

    .wcc-price-bar__amount {
        font-size: 16px;
    }
}

/* ═══════════════════════════════════════════════
   WooCommerce — metadatos en carrito / checkout
═══════════════════════════════════════════════ */
.woocommerce-cart-form .wc-item-meta li,
.woocommerce-mini-cart .wc-item-meta li,
.woocommerce-checkout-review-order .wc-item-meta li {
    font-size: 12px;
    margin:    2px 0;
}

.woocommerce-cart-form .wc-item-meta .wc-item-meta-label,
.woocommerce-mini-cart .wc-item-meta .wc-item-meta-label {
    font-weight: 700;
    color:       #444;
}

/* ═══════════════════════════════════════════════
   Mensaje "sin personalización"
   Aparece cuando el shortcode se usa en un producto
   que aún no tiene ingredientes configurados.
═══════════════════════════════════════════════ */
.wcc-no-customization {
    display:       inline-block;
    margin:        12px 0;
    padding:       9px 16px;
    background:    #f4f4f4;
    border:        1px solid #ddd;
    border-radius: 6px;
    color:         #888;
    font-size:     13px;
    font-style:    italic;
    line-height:   1.5;
}

/* ═══════════════════════════════════════════════
   Botón "Seleccionar opciones" en el catálogo
   (productos con personalización configurada).
   Usa las mismas clases de WooCommerce + tema
   para no romper el diseño existente.
═══════════════════════════════════════════════ */
.woocommerce ul.products li.product
.button.product_type_variable.add_to_cart_button {
    /* WooCommerce ya lo estila con product_type_variable;
       estas reglas sólo refuerzan la coherencia visual */
    white-space: nowrap;
}