/* ==========================================================================
   SweeNuts Checkout Bump — Estilos del Order Bump Card
   v2.0.0 | Diseño imagen referencia 1
   ========================================================================== */

/* ─── Variables ─────────────────────────────────────────────────────────── */
:root {
    --sn-bump-accent:        #b8860b;   /* dorado oscuro */
    --sn-bump-accent-light:  #fdf8ec;
    --sn-bump-border:        #c8a84b;   /* dorado borde */
    --sn-bump-text:          #2d2d2d;
    --sn-bump-text-muted:    #888888;
    --sn-bump-bg:            #fdf8ec;   /* crema/beige */
    --sn-bump-white:         #ffffff;
    --sn-bump-badge-bg:      #b8860b;
    --sn-bump-price-old:     #999999;
    --sn-bump-price-new:     #dc2626;   /* rojo precio oferta */
    --sn-bump-savings-bg:    #d1fae5;
    --sn-bump-savings-text:  #065f46;
    --sn-bump-check-active:  #3a6b35;
    --sn-bump-radius:        12px;
    --sn-bump-transition:    200ms ease;
    --sn-bump-swatch-size:   28px;
}

/* ─── Wrapper general ───────────────────────────────────────────────────── */
.sn-bump-wrapper {
    position:       relative;
    margin:         20px 0;
    padding:        0;
    font-family:    inherit;
    font-size:      inherit;
    line-height:    1.5;
    animation:      sn-bump-fadein 0.35s ease both;
}

/* ─── Contenedor con borde punteado dorado ──────────────────────────────── */
.sn-bump-outer {
    border:         2px dashed var(--sn-bump-border);
    border-radius:  var(--sn-bump-radius);
    background:     var(--sn-bump-bg);
    padding:        16px;
    padding-top:    20px;
    position:       relative;
}

/* ─── Badge "OFERTA EXCLUSIVA" estilo etiqueta en esquina ───────────────── */
.sn-bump-badge {
    display:        inline-block;
    background:     var(--sn-bump-badge-bg);
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    padding:        4px 12px;
    border-radius:  4px;
    text-transform: uppercase;
    position:       absolute;
    top:            -1px;
    left:           14px;
    transform:      translateY(-50%);
    white-space:    nowrap;
}

/* ─── Título de la oferta (dentro del outer, antes de la card) ──────────── */
.sn-bump-offer-title {
    font-size:      15px;
    font-weight:    700;
    color:          var(--sn-bump-text);
    margin-bottom:  12px;
    display:        flex;
    align-items:    center;
    gap:            6px;
}

/* ─── Card interna (imagen + contenido) ─────────────────────────────────── */
.sn-bump-card {
    display:        flex;
    align-items:    flex-start;
    gap:            14px;
    margin-bottom:  14px;
}

/* ─── Imagen del producto ───────────────────────────────────────────────── */
.sn-bump-image {
    flex:           0 0 100px;
    width:          100px;
}

.sn-bump-image img {
    width:          100%;
    height:         110px;
    object-fit:     contain;
    border-radius:  8px;
    background:     #ffffff;
    display:        block;
    transition:     opacity var(--sn-bump-transition);
    border:         1px solid #ece8dc;
    padding:        4px;
}

/* Animación imagen al cambiar variación */
.sn-bump-image img.sn-bump-img--fading {
    opacity: 0;
}

/* ─── Contenido ─────────────────────────────────────────────────────────── */
.sn-bump-content {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.sn-bump-product-name {
    font-size:      15px;
    font-weight:    700;
    color:          var(--sn-bump-text);
    line-height:    1.3;
}

.sn-bump-product-desc {
    font-size:      12px;
    color:          var(--sn-bump-text-muted);
    line-height:    1.4;
}

/* ─── Precios ───────────────────────────────────────────────────────────── */
.sn-bump-prices {
    display:        flex;
    align-items:    center;
    gap:            8px;
    flex-wrap:      wrap;
}

.sn-bump-price-regular {
    font-size:      14px;
    color:          var(--sn-bump-price-old);
    text-decoration: line-through;
}

.sn-bump-price-regular .woocommerce-Price-amount {
    color: var(--sn-bump-price-old) !important;
}

.sn-bump-price-bump {
    font-size:      18px;
    font-weight:    700;
    color:          var(--sn-bump-price-new);
}

.sn-bump-price-bump .woocommerce-Price-amount {
    color: var(--sn-bump-price-new) !important;
}

/* Badge "Ahorras $X" */
.sn-bump-savings-badge {
    display:        inline-flex;
    align-items:    center;
    background:     var(--sn-bump-savings-bg);
    color:          var(--sn-bump-savings-text);
    font-size:      11px;
    font-weight:    600;
    padding:        2px 8px;
    border-radius:  20px;
    white-space:    nowrap;
}

/* ─── Label de variación ────────────────────────────────────────────────── */
.sn-bump-variation-label {
    font-size:      13px;
    color:          var(--sn-bump-text);
}

.sn-bump-variation-label #sn-bump-selected-color {
    font-weight:    600;
    color:          var(--sn-bump-text);
}

/* ─── Swatches de color (círculos) — alta especificidad contra Woodmart ───── */
.sn-bump-swatches {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    align-items:    center;
    margin-top:     4px;
}

/* Usamos #sn-bump-wrapper para ganar especificidad al tema Woodmart */
#sn-bump-wrapper .sn-bump-swatch {
    display:        inline-block !important;
    width:          var(--sn-bump-swatch-size) !important;
    height:         var(--sn-bump-swatch-size) !important;
    min-width:      var(--sn-bump-swatch-size) !important;
    min-height:     var(--sn-bump-swatch-size) !important;
    border-radius:  50% !important;
    border:         2px solid rgba(0,0,0,0.12) !important;
    outline:        2px solid transparent;
    outline-offset: 2px;
    cursor:         pointer !important;
    padding:        0 !important;
    margin:         0 !important;
    font-size:      0 !important;
    line-height:    1 !important;
    transition:     transform var(--sn-bump-transition),
                    border-color var(--sn-bump-transition),
                    outline-color var(--sn-bump-transition);
    position:       relative !important;
    background:     transparent !important;
    background-color: transparent !important;
    flex-shrink:    0 !important;
    appearance:     none !important;
    -webkit-appearance: none !important;
    overflow:       hidden !important;   /* el span queda dentro del círculo */
    vertical-align: middle;
    box-shadow:     none !important;
}

/* Imagen del swatch (modo imagen — prioridad) */
#sn-bump-wrapper .sn-bump-swatch .sn-swatch-img {
    display:        block !important;
    width:          100% !important;
    height:         100% !important;
    object-fit:     cover !important;
    border-radius:  0 !important;   /* overflow:hidden del padre recorta */
    pointer-events: none !important;
    position:       absolute !important;
    inset:          0 !important;
}

/* Fallback: span con color hex (solo si no hay imagen) */
#sn-bump-wrapper .sn-bump-swatch .sn-swatch-color {
    display:        block !important;
    position:       absolute !important;
    inset:          0 !important;
    border-radius:  0 !important;
    pointer-events: none !important;
    box-shadow:     inset 0 0 0 1px rgba(0,0,0,0.18) !important;
}

#sn-bump-wrapper .sn-bump-swatch:hover:not(.sn-bump-swatch--disabled) {
    transform:      scale(1.15) !important;
    outline-color:  var(--sn-bump-border);
}

#sn-bump-wrapper .sn-bump-swatch.sn-bump-swatch--active {
    border-color:   var(--sn-bump-check-active) !important;
    outline:        2px solid var(--sn-bump-check-active) !important;
    outline-offset: 2px;
    transform:      scale(1.1) !important;
}

#sn-bump-wrapper .sn-bump-swatch.sn-bump-swatch--disabled {
    opacity:        0.35 !important;
    cursor:         not-allowed !important;
}

#sn-bump-wrapper .sn-bump-swatch.sn-bump-swatch--disabled::after {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  50%;
    background:     repeating-linear-gradient(
        45deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.25) 3px,
        rgba(0,0,0,0.25) 4px
    );
}

/* ─── Separador ─────────────────────────────────────────────────────────── */
.sn-bump-divider {
    border:         none;
    border-top:     1px solid #e5dcc8;
    margin:         0 -16px 0 -16px;
}

/* ─── Checkbox de aceptación ────────────────────────────────────────────── */
.sn-bump-checkbox-label {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        12px 0;
    padding-top:    14px;
    background:     transparent;
    cursor:         pointer;
    transition:     opacity var(--sn-bump-transition);
    user-select:    none;
}

.sn-bump-checkbox-label:hover {
    opacity: 0.85;
}

/* Checkbox custom */
.sn-bump-checkbox-label input[type="checkbox"] {
    appearance:       none;
    -webkit-appearance: none;
    flex:             0 0 22px;
    width:            22px;
    height:           22px;
    border:           2px solid #ccc;
    border-radius:    5px;
    background:       var(--sn-bump-white);
    cursor:           pointer;
    position:         relative;
    margin:           0;
    transition:       background var(--sn-bump-transition),
                      border-color var(--sn-bump-transition);
}

.sn-bump-checkbox-label input[type="checkbox"]:checked {
    background:     var(--sn-bump-check-active);
    border-color:   var(--sn-bump-check-active);
}

.sn-bump-checkbox-label input[type="checkbox"]:checked::after {
    content:        '';
    position:       absolute;
    left:           5px;
    top:            2px;
    width:          7px;
    height:         12px;
    border:         2px solid #fff;
    border-top:     none;
    border-left:    none;
    transform:      rotate(45deg);
}

.sn-bump-checkbox-text {
    font-size:      14px;
    font-weight:    600;
    color:          var(--sn-bump-text);
    line-height:    1.4;
}

/* ─── Mensaje inline ────────────────────────────────────────────────────── */
.sn-bump-message {
    padding:        8px 12px;
    margin-top:     8px;
    border-radius:  6px;
    font-size:      13px;
    background:     #fff3cd;
    border:         1px solid #ffc107;
    color:          #856404;
}

.sn-bump-message.sn-bump-message--error {
    background:     #f8d7da;
    border-color:   #dc3545;
    color:          #721c24;
}

/* ─── Loading overlay ───────────────────────────────────────────────────── */
.sn-bump-loading {
    position:       absolute;
    inset:          0;
    background:     rgba(253, 248, 236, 0.75);
    border-radius:  var(--sn-bump-radius);
    display:        flex;
    align-items:    center;
    justify-content: center;
    z-index:        10;
    backdrop-filter: blur(1px);
}

.sn-bump-spinner {
    width:          28px;
    height:         28px;
    border:         3px solid var(--sn-bump-border);
    border-top-color: var(--sn-bump-check-active);
    border-radius:  50%;
    animation:      sn-bump-spin 0.7s linear infinite;
}

@keyframes sn-bump-spin {
    to { transform: rotate(360deg); }
}

/* ─── Animaciones ────────────────────────────────────────────────────────── */
@keyframes sn-bump-fadein {
    from {
        opacity:   0;
        transform: translateY(8px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

.sn-bump-card--accepted {
    animation: sn-bump-pulse 0.4s ease;
}

@keyframes sn-bump-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0.4); }
    50%  { box-shadow: 0 0 0 8px rgba(184, 134, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0); }
}

/* ─── Responsive mobile (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
    .sn-bump-card {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }

    .sn-bump-image {
        flex:   0 0 auto;
        width:  120px;
    }

    .sn-bump-image img {
        height: 120px;
    }

    .sn-bump-content {
        align-items: center;
    }

    .sn-bump-swatches {
        justify-content: center;
    }

    .sn-bump-prices {
        justify-content: center;
    }
}