/*==================================================
PURCHASE CONTROLS COMPONENT
==================================================*/

.sidv-purchase-controls {
    --spc-gap: 0.5rem;
    --spc-radius: 10px;
    --spc-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 0;
    position: relative;
    box-sizing: border-box;
}

/*==================================================
ESTADOS DE VISIBILIDAD (DATA-IN-CART & CLASS)
==================================================*/

.sidv-purchase-controls__state {
    display: none;
    width: 100%;
    will-change: opacity, transform;
}

/* Estado 1: NO está en el carrito (Soporte híbrido dataset y clase fallback) */
.sidv-purchase-controls[data-in-cart="false"]:not(.is-in-cart) .sidv-purchase-controls__state--add,
.sidv-purchase-controls[data-in-cart="false"]:not(.is-in-cart) .sidv-purchase-controls__state--outofstock,
.sidv-purchase-controls[data-in-cart="false"]:not(.is-in-cart) .sidv-purchase-controls__state--variable {
    display: flex;
    flex-direction: column;
    gap: var(--spc-gap);
    animation: sidvFadeIn var(--spc-transition) forwards;
}

.sidv-purchase-controls[data-in-cart="false"]:not(.is-in-cart) .sidv-purchase-controls__state--in-cart {
    display: none !important;
}

/* Estado 2: SÍ está en el carrito */
.sidv-purchase-controls[data-in-cart="true"] .sidv-purchase-controls__state--in-cart,
.sidv-purchase-controls.is-in-cart .sidv-purchase-controls__state--in-cart {
    display: flex;
    flex-direction: column;
    gap: var(--spc-gap);
    animation: sidvFadeIn var(--spc-transition) forwards;
}

.sidv-purchase-controls[data-in-cart="true"] .sidv-purchase-controls__state--add,
.sidv-purchase-controls[data-in-cart="true"] .sidv-purchase-controls__state--outofstock,
.sidv-purchase-controls[data-in-cart="true"] .sidv-purchase-controls__state--variable,
.sidv-purchase-controls.is-in-cart .sidv-purchase-controls__state--add,
.sidv-purchase-controls.is-in-cart .sidv-purchase-controls__state--outofstock,
.sidv-purchase-controls.is-in-cart .sidv-purchase-controls__state--variable {
    display: none !important;
}

/*==================================================
ESTRUCTURA INTERNA (IN-CART STATE)
==================================================*/

.sidv-purchase-controls__qty-wrapper,
.sidv-purchase-controls__cart-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
}

.sidv-purchase-controls__qty-wrapper .sidv-quantity-selector {
    width: 100%;
}

/*==================================================
BOTONES Y COMPONENTES ENCAPSULADOS
==================================================*/

.sidv-purchase-controls .sidv-button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: var(--spc-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--spc-transition),
                border-color var(--spc-transition),
                color var(--spc-transition),
                transform 0.1s ease,
                box-shadow var(--spc-transition);
}

.sidv-purchase-controls .sidv-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.sidv-purchase-controls .sidv-button:active:not(:disabled) {
    transform: scale(0.98);
}

.sidv-purchase-controls .sidv-button__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sidv-purchase-controls .sidv-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
}

/*==================================================
ESTADOS INTERACTIVOS (LOADING & DISABLED)
==================================================*/

.sidv-purchase-controls.is-loading {
    pointer-events: none;
    opacity: 0.75;
    transition: opacity var(--spc-transition);
}

.sidv-purchase-controls.is-loading .sidv-button {
    cursor: wait;
}

.sidv-purchase-controls .sidv-button:disabled,
.sidv-purchase-controls .sidv-button.is-disabled {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
    background-color: var(--sidv-color-disabled-bg, #E2E8F0);
    color: var(--sidv-color-disabled-text, #94A3B8);
    border-color: var(--sidv-color-disabled-bg, #E2E8F0);
    box-shadow: none;
    transform: none;
}

/*==================================================
ANIMACIONES Y ACCESIBILIDAD
==================================================*/

@keyframes sidvFadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidv-purchase-controls__state {
        animation: none !important;
    }
    .sidv-purchase-controls .sidv-button {
        transition: none !important;
    }
}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width: 768px) {
    .sidv-purchase-controls {
        --spc-radius: 8px;
    }

    .sidv-purchase-controls .sidv-button {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
}