/**
 * Quick-add modal — Gevenit (universale: semplici + variabili)
 */

/* ─── Backdrop + container ─── */
.gevenit-atc-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.gevenit-atc-modal.is-open {
    display: flex;
}

.gevenit-atc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 19, 24, 0.45);
    animation: gevenitFadeIn var(--duration-fast) var(--ease-default);
}

.gevenit-atc-modal__dialog {
    position: relative;
    width: 90vw;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
    padding-top: var(--space-4);
    animation: gevenitSlideUp var(--duration-base) var(--ease-out);
}

@keyframes gevenitFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* ─── Close button ─── */
.gevenit-atc-modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    margin-bottom: var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-ink-muted);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.gevenit-atc-modal__close:hover {
    background: var(--color-surface-alt);
    color: var(--color-ink);
}

/* ─── States ─── */
.gevenit-atc-modal__state {
    /* states are toggled via display:none in JS */
}

/* ─── Header (confirm state) ─── */
.gevenit-atc-modal__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-right: var(--space-8);
}

.gevenit-atc-modal__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.gevenit-atc-modal__title {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
}

/* ─── Product card ─── */
.gevenit-atc-modal__product {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-alt);
    margin-bottom: var(--space-4);
}

.gevenit-atc-modal__product-img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.gevenit-atc-modal__product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.gevenit-atc-modal__product-info {
    min-width: 0;
    flex: 1;
}

.gevenit-atc-modal__product-brand {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
}

.gevenit-atc-modal__product-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    line-height: var(--leading-snug);
}

.gevenit-atc-modal__product-price {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    color: var(--color-ink);
}

/* ─── Variant picker ─── */
.gevenit-atc-modal__variants {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.gevenit-atc-modal__attr-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gevenit-atc-modal__attr-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-ink-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gevenit-atc-modal__attr-options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.gevenit-atc-modal__attr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-default),
                background var(--duration-fast) var(--ease-default),
                color var(--duration-fast) var(--ease-default);
}

.gevenit-atc-modal__attr-btn:hover {
    border-color: var(--color-brand);
}

.gevenit-atc-modal__attr-btn.is-selected {
    border-color: var(--color-brand);
    background: var(--color-brand-100);
    color: var(--color-brand);
    font-weight: var(--weight-bold);
}

.gevenit-atc-modal__attr-btn.is-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Color swatch variant — dot + label */
.gevenit-atc-modal__attr-btn--color {
    gap: var(--space-2);
}

.gevenit-atc-modal__color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border);
    flex-shrink: 0;
}

/* ─── Quantity row ─── */
.gevenit-atc-modal__qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gevenit-atc-modal__qty-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
}

.gevenit-atc-modal__qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    overflow: hidden;
}

.gevenit-atc-modal__qty-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    color: var(--color-ink-secondary);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-default);
}

.gevenit-atc-modal__qty-btn:hover {
    background: var(--color-surface-alt);
}

.gevenit-atc-modal__qty-input {
    width: 44px;
    height: 36px;
    border: 0;
    background: transparent;
    text-align: center;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    -moz-appearance: textfield;
}

.gevenit-atc-modal__qty-input::-webkit-outer-spin-button,
.gevenit-atc-modal__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ─── Add-to-cart button ─── */
.gevenit-atc-modal__add-btn {
    width: 100%;
    margin-bottom: var(--space-3);
}

.gevenit-atc-modal__add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.gevenit-atc-modal__add-btn.is-loading {
    pointer-events: none;
}

/* ─── PDP link ─── */
.gevenit-atc-modal__pdp-link {
    display: block;
    text-align: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-ink-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--duration-fast) var(--ease-default);
}

.gevenit-atc-modal__pdp-link:hover {
    color: var(--color-brand);
}

/* ─── Cross-sell ─── */
.gevenit-atc-modal__cross-sell {
    margin-bottom: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.gevenit-atc-modal__cross-sell-label {
    margin: 0 0 var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-ink-muted);
}

.gevenit-atc-modal__cross-sell-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.gevenit-atc-modal__cs-card {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-ink);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-default);
}

.gevenit-atc-modal__cs-card:hover {
    border-color: var(--color-brand-200);
}

.gevenit-atc-modal__cs-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: var(--color-ink);
}

.gevenit-atc-modal__cs-img {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    overflow: hidden;
}

.gevenit-atc-modal__cs-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.gevenit-atc-modal__cs-info {
    min-width: 0;
    flex: 1;
}

.gevenit-atc-modal__cs-brand {
    display: block;
    font-size: 10px;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand);
}

.gevenit-atc-modal__cs-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
}

.gevenit-atc-modal__cs-price {
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
    font-weight: var(--weight-semibold);
}

/* ─── Actions ─── */
.gevenit-atc-modal__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.gevenit-atc-modal__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 50px;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default),
                background-position var(--duration-base) var(--ease-default);
}

.gevenit-atc-modal__btn--primary {
    border: 0;
    background: var(--gradient-cta);
    background-size: 150% 150%;
    color: #fff;
    box-shadow: none;
}

.gevenit-atc-modal__btn--primary:hover {
    background-position: 100% 100%;
    transform: translateY(-1px);
    box-shadow: none;
    color: #fff;
}

.gevenit-atc-modal__btn--secondary {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-ink-secondary);
}

.gevenit-atc-modal__btn--secondary:hover {
    border-color: var(--color-ink);
    color: var(--color-ink);
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .gevenit-atc-modal__dialog {
        max-width: none;
        width: 100%;
        max-height: 85vh;
        margin: auto var(--space-3);
        padding: var(--space-5);
        border-radius: var(--radius-lg);
    }

    .gevenit-atc-modal__product-img {
        width: 64px;
        height: 64px;
    }

    .gevenit-atc-modal__attr-options {
        gap: var(--space-1);
    }

    .gevenit-atc-modal__attr-btn {
        min-height: 32px;
        padding: 0 var(--space-2);
        font-size: var(--text-xs);
    }
}

/* ─── Upsell quantità nudge ─── */

.gevenit-atc-modal__upsell {
    margin-top: var(--space-3);
}

.gevenit-atc-modal__upsell-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.gevenit-atc-modal__upsell-title {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-ink);
}

.gevenit-atc-modal__upsell-arrow {
    font-size: var(--text-xs);
    color: var(--color-ink-muted);
}

.gevenit-atc-modal__upsell-cards {
    display: flex;
    gap: var(--space-2);
}

.gevenit-atc-modal__upsell-card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    border: 1.5px solid transparent;
    transition: border-color .15s, background .15s;
}

.gevenit-atc-modal__upsell-card:hover {
    border-color: var(--color-brand-300);
    background: var(--color-brand-100);
}

.gevenit-atc-modal__upsell-card--active {
    border-color: var(--color-brand);
    background: var(--color-brand-100);
}

.gevenit-atc-modal__upsell-card-badge {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-brand);
    color: #FFFFFF;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px var(--space-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.gevenit-atc-modal__upsell-card-qty {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-ink);
}

.gevenit-atc-modal__upsell-card-pct {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--color-brand);
    line-height: 1;
}

.gevenit-atc-modal__upsell-card-prices {
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
}

.gevenit-atc-modal__upsell-card-prices s {
    color: var(--color-ink-muted);
    margin-right: var(--space-1);
}

.gevenit-atc-modal__upsell-card-prices strong {
    color: var(--color-success);
    font-size: var(--text-sm);
}

.gevenit-atc-modal__upsell-btn {
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-primary, #2563eb);
    border-radius: var(--radius-full, 9999px);
    background: transparent;
    color: var(--color-primary, #2563eb);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.gevenit-atc-modal__upsell-btn:hover {
    background: var(--color-primary, #2563eb);
    color: #fff;
}

.gevenit-atc-modal__upsell-applied {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success, #16a34a);
}

/* ─── Product summary (qty × price = total) nel confirm state ─── */
.gevenit-atc-modal__product-summary {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-ink-secondary);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-2);
}

.gevenit-atc-modal__product-summary strong {
    color: var(--color-ink);
    font-weight: var(--weight-bold);
}

.gevenit-atc-modal__product-oldprice {
    text-decoration: line-through;
    color: var(--color-error, #dc2626);
    font-weight: 500;
}

.gevenit-atc-modal__product-savings {
    display: block;
    margin-top: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-success, #16a34a);
}

/* ─── Variant selection hint ─── */
.gevenit-atc-modal__variant-hint {
    margin: var(--space-1) 0 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: #fff7ed;
    border: 1px solid #fed7aa;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: #c2410c;
    display: none;
}

.gevenit-atc-modal__variant-hint.is-visible {
    display: block;
}

@keyframes gevenitShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-5px); }
    40%       { transform: translateX(5px); }
    60%       { transform: translateX(-5px); }
    80%       { transform: translateX(5px); }
}

.gevenit-atc-modal__variant-hint.is-shaking {
    animation: gevenitShake 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}