/* assets/css/variation-api.css */

/* === Palette de marque (variables) === */
:root {
    --vtf-text: #424649;
    --vtf-bg-1: transparent;
    --vtf-bg-2: #fbf5ee;
    --vtf-bg-3: #333333;
    --vtf-primary: #d1a566;
    --vtf-primary-hover: #c99e62;
    --vtf-divider: rgba(132,131,130,0.25);

    /* Dérivés */
    --vtf-primary-soft: rgba(209,165,102,0.12);
    --vtf-primary-soft-2: rgba(209,165,102,0.2);
    --vtf-text-soft: rgba(66,70,73,0.75);

    --vtf-border-color: var(--vtf-divider);
    --vtf-padding: 14px;
    --vtf-radius: 0;

    --vtf-positive-color: #2e7d32;
    --vtf-zero-color: #b00020;
}

/* Bloc global */
.vtf-stock-box {
    border: none;
    padding: 0;
    border-radius: var(--vtf-radius);
    background: var(--vtf-bg-1);
    color: var(--vtf-text);
}

/* Spinner */
.vtf-spinner {
    border: 4px solid rgba(0,0,0,0.06);
    border-top: 4px solid var(--vtf-divider);
    border-radius: var(--vtf-radius);
    width: 22px; height: 22px;
    animation: vtf-spin 0.9s linear infinite;
    margin: 0 auto;
}
@keyframes vtf-spin { 0% {transform: rotate(0)} 100% {transform: rotate(360deg)} }

.vtf-spinner-container { display: flex; align-items: center; justify-content: center; gap: 10px; }
.vtf-loading-text { font-size: 15px; color: var(--vtf-text) !important; margin: 0; opacity:.85; }

.vtf-stock-positive { color: var(--vtf-positive-color); }
.vtf-stock-zero { color: var(--vtf-zero-color); }

/* --- En-tête liste --- */
.vtf-list-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px;
}
.vtf-list-title { margin:0; font-size:18px; font-weight:700; color: var(--vtf-bg-3); }

/* --- Grille de variations --- */
.vtf-variations-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

/* Carte individuelle (variation) */
.vtf-card {
    border: 1px solid var(--vtf-border-color) !important;
    border-radius: var(--vtf-radius);
    background: #fff;
    box-shadow: none;
    transition: box-shadow .2s ease, background .2s ease, border-color .2s ease;
    outline: none;
    cursor: pointer;
}
.vtf-card:hover {
    background: var(--vtf-primary-soft);
    border-color: var(--vtf-primary) !important;
}
.vtf-card.is-selected {
    border-color: var(--vtf-primary) !important;
    box-shadow: 0 8px 20px var(--vtf-primary-soft-2);
    background: #fff;
}

.vtf-card-inner { display:block; padding:16px; width:100%; }
.vtf-card .vtf-radio { position:absolute; opacity:0; pointer-events:none; }

/* Haut de carte */
.vtf-top {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}
.vtf-attr {
    font-weight:700;
    color: var(--vtf-bg-3);
    line-height:1.35;
}
.vtf-price {
    margin-left:8px;
    color: var(--vtf-text-soft);
    font-weight:600;
    font-size:14px;
}
.vtf-status {
    font-size:12px;
    padding:4px 8px;
    border-radius:var(--vtf-radius);
    font-weight:600;
    border:1px solid transparent;
    white-space: nowrap;
}
.vtf-status.ok {
    background: rgba(46,125,50,0.08);
    color: var(--vtf-positive-color);
    border-color: rgba(46,125,50,0.25);
}

/* Badges magasins */
.vtf-badges { display:flex; flex-wrap:wrap; gap:8px; }
.vtf-badge {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:var(--vtf-radius);
    background: var(--vtf-bg-2);
    border: none;
    color: var(--vtf-bg-3);
    font-size:13px;
    white-space:nowrap;
}
.vtf-badge .q {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:var(--vtf-radius);
    background: var(--vtf-primary);
    color:#fff;
    font-weight:700;
    line-height:1;
}
.vtf-badge .s { opacity:.9; }
.vtf-badge-empty {
    background: var(--vtf-bg-2);
    border: none;
    color: var(--vtf-bg-3);
}

/* Bouton découvrir en magasin */
.vtf-store-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 14px;
    padding: 14px 16px;
    text-decoration: none;
    background: var(--vtf-primary);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--vtf-primary);
    border-radius: var(--vtf-radius);
    transition: background .2s ease, border-color .2s ease, color .2s ease;
    text-align: center;
}
.vtf-store-banner:hover {
    background: var(--vtf-primary-hover);
    border-color: var(--vtf-primary-hover);
    color: #fff;
}

/* Footer actions */
.vtf-actions {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-top: 12px;
    margin-top: 16px;
    border-top: 1px solid var(--vtf-divider) !important;
    background: transparent; /* ✅ Fond transparent */
    backdrop-filter: none;
    box-shadow: none;
}
.vtf-selected-summary {
    font-size: 14px;
    color: var(--vtf-bg-3);
    line-height: 1.4;
}

/* Bouton ajouter */
.vtf-actions .button.button-primary {
    flex-shrink: 0;
    background: var(--vtf-primary);
    border: 1px solid var(--vtf-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: var(--vtf-radius);
    cursor: pointer;
    transition: background .2s ease, transform .02s ease;
}
.vtf-actions .button.button-primary:hover { background: var(--vtf-primary-hover); }
.vtf-actions .button.button-primary:active { transform: translateY(1px); }
.vtf-actions .button.button-primary[disabled],
.vtf-actions .button.button-primary[aria-disabled="true"] {
    background: #cfcfcf;
    border-color: #cfcfcf;
    color: #fff;
    cursor: not-allowed;
}

/* Texte vide */
.vtf-empty { color: var(--vtf-text-soft); font-style: italic; margin: 8px 0 0; }