/**
 * SOOO OPC Pro – Styles de base du formulaire front-end
 * Les variables CSS dynamiques sont injectées par PHP (class-opc.php).
 */

/* ── Animations ──────────────────────────────────────────── */
@keyframes s9spin   { to { transform: rotate(360deg); } }
@keyframes s9fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes s9fadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Reset boîte ─────────────────────────────────────────── */
.sooo9-wrap * { box-sizing: border-box; }
.sooo9-card  { overflow: hidden; }

/* ── Header ──────────────────────────────────────────────── */
.sooo9-header { display:flex; align-items:center; gap:16px; }
.sooo9-header-img { border-radius:14px; flex-shrink:0; overflow:hidden; }
.sooo9-header-img img { width:100%; height:100%; object-fit:cover; }
.sooo9-header-label   { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.sooo9-header-name    { font-weight:900; line-height:1.3; }
.sooo9-header-price   { font-weight:900; margin-top:4px; }

/* ── Titres de section ───────────────────────────────────── */
.sooo9-section-title {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Champ avec icône ────────────────────────────────────── */
.sooo9-field {
    position: relative;
}
/* icône flottante positionnée à gauche */
.sooo9-field > .field-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 3;
}
/* padding-left forcé pour tous les inputs DIRECTS d'un .sooo9-field */
.sooo9-field > .sooo9-input {
    padding-left: 40px !important;
}

/* ── Input / Select de base ──────────────────────────────── */
.sooo9-input {
    width: 100%;
    font-weight: 600;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .2s, background .2s, box-shadow .2s;
}
.sooo9-input::placeholder { color:#9ca3af; font-weight:500; }
select.sooo9-input        { cursor:pointer; }

/* ── Grille 2 colonnes ───────────────────────────────────── */
.sooo9-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* ── Toggle livraison ────────────────────────────────────── */
.sooo9-del-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
}
.sooo9-del-btn {
    text-align: center; cursor:pointer; font-weight:800; font-size:13px;
    transition: all .2s; display:flex; align-items:center; justify-content:center;
    gap:6px; border-radius:10px; padding:11px;
}

/* ── Case fragile ────────────────────────────────────────── */
.sooo9-fragile { display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; transition:border-color .2s; }
.sooo9-fragile input[type="checkbox"] { width:20px; height:20px; cursor:pointer; flex-shrink:0; }
.sooo9-fragile-label { font-size:13px; font-weight:800; line-height:1.3; }
.sooo9-fragile-sub   { font-size:11px; font-weight:600; opacity:.7; margin-top:1px; }

/* ── Récapitulatif ───────────────────────────────────────── */
.sooo9-summary-row {
    display: flex; justify-content:space-between; align-items:center;
    font-size:13px; font-weight:700; padding:5px 0;
}
.sooo9-summary-row.total { margin-top:8px; padding-top:12px; font-size:18px; font-weight:900; }

/* ── Bas du formulaire ───────────────────────────────────── */
.sooo9-bottom  { display:flex; align-items:center; gap:10px; }
.sooo9-qty     { display:flex; align-items:center; overflow:hidden; flex-shrink:0; }
.sooo9-qty-btn { border:none; background:none; font-size:20px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.sooo9-qty-num { width:38px; text-align:center; font-size:16px; font-weight:900; }

.sooo9-submit {
    flex:1; color:#fff; border:none; font-weight:900; cursor:pointer;
    transition:all .2s; display:flex; align-items:center; justify-content:center;
    gap:10px; position:relative; overflow:hidden;
}
.sooo9-submit:not(:disabled):hover { filter:brightness(1.08); transform:translateY(-1px); }
.sooo9-submit:disabled             { opacity:.7; cursor:not-allowed; }

/* ── Bouton WhatsApp ─────────────────────────────────────── */
.sooo9-wa-btn {
    /* display géré par JS — none par défaut, flex quand wilaya choisie */
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    border: none;
    color: #fff;
    font-weight: 900;
    cursor: pointer;
    transition: all .2s;
}
.sooo9-wa-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* ── Spinner ─────────────────────────────────────────────── */
.sooo9-spinner {
    width:18px; height:18px;
    border:3px solid rgba(255,255,255,.4);
    border-top-color:#fff;
    border-radius:50%;
    animation:s9spin .7s linear infinite;
    display:none;
}

/* ══════════════════════════════════════════════════════════
   BLOC PAIEMENT – Chargily Pay + Paiement à la livraison
   ══════════════════════════════════════════════════════════ */

.sooo9-payment-block {
    margin-bottom: 16px;
}

.sooo9-pay-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--opc-border);
    border-radius: var(--opc-radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    background: var(--opc-white);
}

.sooo9-pay-option.active,
.sooo9-pay-option:has(input:checked) {
    border-color: var(--opc-accent);
    background: var(--opc-accent-light);
}

.sooo9-pay-radio-wrap {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.sooo9-pay-radio-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.sooo9-pay-dot {
    display: block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--opc-border);
    border-radius: 50%;
    transition: border-color .2s;
    position: relative;
}

.sooo9-pay-radio-wrap input[type="radio"]:checked ~ .sooo9-pay-dot {
    border-color: var(--opc-accent);
    background: var(--opc-accent);
    box-shadow: inset 0 0 0 4px var(--opc-white);
}

.sooo9-pay-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--opc-text);
}

/* ── Sous-bloc méthodes Chargily ── */
.sooo9-chargily-methods {
    border: 1.5px solid #d1d5db;
    border-radius: var(--opc-radius);
    padding: 12px;
    margin-top: 4px;
    margin-bottom: 8px;
    background: var(--opc-bg);
}

.sooo9-chargily-test {
    font-size: 12px;
    color: var(--opc-accent);
    margin-bottom: 10px;
    font-style: italic;
}

.sooo9-chargily-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid var(--opc-border);
    border-radius: calc(var(--opc-radius) - 4px);
    margin-bottom: 8px;
    cursor: pointer;
    background: var(--opc-white);
    transition: border-color .15s, background .15s;
}

.sooo9-chargily-method:last-of-type { margin-bottom: 4px; }

.sooo9-chargily-method.active {
    border-color: var(--opc-accent);
    background: var(--opc-accent-light);
}

.sooo9-chargily-dot {
    display: block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--opc-border);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color .15s;
}

.sooo9-chargily-dot.active {
    border-color: var(--opc-accent);
    background: var(--opc-accent);
    box-shadow: inset 0 0 0 3px var(--opc-white);
}

.sooo9-chargily-method img {
    margin-left: auto;
    height: 28px;
    object-fit: contain;
}

.sooo9-chargily-method span:not(.sooo9-chargily-dot) {
    font-size: 14px;
    font-weight: 600;
    color: var(--opc-text);
    flex: 1;
}

.sooo9-chargily-powered {
    font-size: 11px;
    color: var(--opc-muted);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ══════════════════════════════════════════════════════════
   POPUP IFRAME CHARGILY
   ══════════════════════════════════════════════════════════ */

.sooo9-chargily-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.sooo9-chargily-popup-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    height: 85vh;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    display: flex;
    flex-direction: column;
}

.sooo9-chargily-popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 10;
    background: rgba(0,0,0,.12);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    color: #fff;
    line-height: 1;
    transition: background .15s;
}

.sooo9-chargily-popup-close:hover { background: rgba(0,0,0,.28); }

#sooo9_chargily_iframe {
    flex: 1;
    width: 100%;
    border: none;
}