/**
 * Poseidon Theme — product-quick-add.css
 * Swatches de color + botón/popover de "agregar al carrito" en las
 * tarjetas de producto (vitrina, categoría, búsqueda, relacionados).
 * Comparte namespace .poseidon-qa. Se apoya en los tokens ya definidos
 * en style.css (--poseidon-*).
 */

:root {
    /* Ícono de check reutilizado como máscara CSS (no depende de recargar
       lucide.createIcons() en cada "agregar", que sería costoso en grids
       con muchas tarjetas). Solo se usa el canal alfa, el color del stroke
       en el SVG es irrelevante. */
    --poseidon-qa-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}

@keyframes poseidon-qa-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes poseidon-qa-pop {
    0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
    60%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.poseidon-search-card__media {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.poseidon-qa {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px var(--poseidon-card-padding, 18px) 0;
    min-height: 34px;
}

/* ── Swatches de color ── */
.poseidon-qa__colors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1;
}
.poseidon-qa__color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    padding: 0;
    border: 1px solid var(--poseidon-border-strong, #d9dbe0);
    background-color: var(--poseidon-surface-hover, #f3f4f6);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.poseidon-qa__color:hover {
    transform: scale(1.08);
    border-color: #6b7280;
}
.poseidon-qa__color.is-active {
    border-color: #6b7280;
    box-shadow: inset 0 0 0 3px var(--poseidon-surface, #fff);
}
.poseidon-qa__color:focus-visible {
    outline: 2px solid #6b7280;
    outline-offset: 2px;
}
/* ── Botón "+" ── */
.poseidon-qa__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    background: var(--poseidon-surface, #fff);
    color: var(--poseidon-text, #111);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.poseidon-qa__btn svg,
.poseidon-qa__btn i {
    width: 16px;
    height: 16px;
    transition: opacity .12s ease, transform .12s ease;
}
.poseidon-qa__btn:hover {
    background: var(--poseidon-text, #111);
    color: #fff;
    border-color: var(--poseidon-text, #111);
}
.poseidon-qa__btn:active {
    transform: scale(.92);
}

/* Cargando: el ícono "+" se desvanece y aparece un spinner real en su
   lugar. Antes esto era solo opacity:.6 sobre el ícono completo, casi
   imperceptible si el servidor tarda. */
.poseidon-qa__btn.is-loading {
    pointer-events: none;
}
.poseidon-qa__btn.is-loading svg,
.poseidon-qa__btn.is-loading i {
    opacity: 0;
    transform: scale(.5);
}
.poseidon-qa__btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    border-top-color: var(--poseidon-text, #111);
    border-radius: 50%;
    animation: poseidon-qa-spin .6s linear infinite;
}

/* Agregado: fondo verde + check real (antes solo era el mismo "+" teñido
   de verde, sin cambio de ícono). */
.poseidon-qa__btn.is-added {
    background: var(--poseidon-success-border, #22c55e);
    border-color: var(--poseidon-success-border, #22c55e);
    color: #fff;
    pointer-events: none;
}
.poseidon-qa__btn.is-added svg,
.poseidon-qa__btn.is-added i {
    opacity: 0;
    transform: scale(.5);
}
.poseidon-qa__btn.is-added::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    -webkit-mask-image: var(--poseidon-qa-check-icon);
    mask-image: var(--poseidon-qa-check-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: poseidon-qa-pop .28s cubic-bezier(.34, 1.56, .64, 1);
}

/* ── Popover de tallas (anclado al botón, se posiciona por JS) ── */
.poseidon-qa__popover {
    position: fixed;
    z-index: 950;
    background: var(--poseidon-surface, #fff);
    border: 1px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0,0,0,.16);
    padding: 12px;
    width: 220px;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
.poseidon-qa__popover.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.poseidon-qa__popover-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--poseidon-text-muted, #6b7280);
    margin: 0 0 8px;
}
.poseidon-qa__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.poseidon-qa__size {
    position: relative;
    min-width: 38px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    background: var(--poseidon-surface, #fff);
    color: var(--poseidon-text, #111);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.poseidon-qa__size:hover {
    border-color: var(--poseidon-text, #111);
}

/* Cargando: antes era opacity:.6 sobre todo el chip — casi imperceptible,
   sobre todo si el servidor tarda. Ahora el texto se oculta y aparece un
   spinner real centrado en el chip. */
.poseidon-qa__size.is-loading {
    color: transparent;
    pointer-events: none;
}
.poseidon-qa__size.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border: 2px solid var(--poseidon-border-strong, rgba(0,0,0,.14));
    border-top-color: var(--poseidon-text, #111);
    border-radius: 50%;
    animation: poseidon-qa-spin .6s linear infinite;
}

/* Agregado: el chip elegido se pone verde con un check, visible por un
   momento ANTES de cerrar el popover (ver JS: ya no se cierra al toque). */
.poseidon-qa__size.is-added {
    color: transparent;
    pointer-events: none;
    background: var(--poseidon-success-border, #22c55e);
    border-color: var(--poseidon-success-border, #22c55e);
}
.poseidon-qa__size.is-added::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    -webkit-mask-image: var(--poseidon-qa-check-icon);
    mask-image: var(--poseidon-qa-check-icon);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: poseidon-qa-pop .28s cubic-bezier(.34, 1.56, .64, 1);
}
.poseidon-qa__size:disabled {
    color: var(--poseidon-text-meta, #9ca3af);
    background: var(--poseidon-surface-hover, #f3f4f6);
    border-color: var(--poseidon-border, rgba(0,0,0,.1));
    text-decoration: line-through;
    cursor: not-allowed;
}
.poseidon-qa__popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: transparent;
}

/* El estilo alterno de tarjeta "moderno" no usa padding lateral en el
   body (ver wc-blocks.css), así que el quick-add tampoco debe tenerlo
   para quedar alineado con el título y el precio. */
body.poseidon-card-style--modern .poseidon-qa {
    padding-left: 0;
    padding-right: 0;
}

@media (max-width: 480px) {
    .poseidon-qa__popover {
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
    }
}