/* ═══════════════════════════════════════════════════════════
   Kouteka WooCommerce — CSS v1.0
   Inspiré du meilleur d'AfriPay v2, charte Kouteka noir
   Isolation maximale : tous les sélecteurs sont préfixés
═══════════════════════════════════════════════════════════ */

/* ── Bouton express ───────────────────────────────────────── */
.kouteka-express-wrap         { margin-top: 12px; }
.kouteka-express-wrap--cart   { margin: 10px 0 0; }

.kouteka-express-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    padding:         13px 20px;
    background:      #1a1a1a;
    color:           #fff;
    border:          2px solid #1a1a1a;
    border-radius:   8px;
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    transition:      filter .2s, transform .1s;
    box-sizing:      border-box;
    font-family:     inherit;
    line-height:     1.4;
    text-decoration: none;
}
.kouteka-express-btn:hover  { filter: brightness(.88); }
.kouteka-express-btn:active { transform: scale(.99); }

/* ── Divider ─────────────────────────────────────────────── */
.kouteka-divider {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin:      10px 0;
    color:       #999;
    font-size:   13px;
}
.kouteka-divider::before,
.kouteka-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: #e2e2e2;
}

/* ── Modale overlay ──────────────────────────────────────── */
.kouteka-modal {
    position:        fixed;
    inset:           0;
    z-index:         999999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         16px;
    box-sizing:      border-box;
}
.kouteka-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,.5);
    cursor:     pointer;
    backdrop-filter: blur(2px);
}

/* ── Boîte modale ────────────────────────────────────────── */
.kouteka-modal__box {
    position:      relative;
    background:    #fff;
    border-radius: 16px;
    width:         100%;
    max-width:     400px;
    overflow:      hidden;
    box-shadow:    0 24px 64px rgba(0,0,0,.22);
    animation:     kouteka-slide-up .25s ease;
}
@keyframes kouteka-slide-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Header modale */
.kouteka-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px 14px;
    border-bottom:   1px solid #f0f0f0;
    background:      #fafafa;
}
.kouteka-modal__header-left {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.kouteka-modal__logo {
    width:           36px;
    height:          36px;
    background:      #1a1a1a;
    color:           #fff;
    border-radius:   10px;
    font-size:       15px;
    font-weight:     700;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    letter-spacing: -.01em;
}
.kouteka-modal__title {
    display:     block;
    font-size:   15px;
    font-weight: 600;
    color:       #1a1a1a;
    line-height: 1.2;
}
.kouteka-modal__country {
    display:   block;
    font-size: 12px;
    color:     #9ca3af;
    margin-top: 1px;
}
.kouteka-modal__close {
    background:  none;
    border:      none;
    font-size:   24px;
    color:       #9ca3af;
    cursor:      pointer;
    padding:     0;
    line-height: 1;
    transition:  color .15s;
    width:       32px;
    height:      32px;
    display:     flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.kouteka-modal__close:hover { color: #1a1a1a; background: #f0f0f0; }

/* Body modale */
.kouteka-modal__body { padding: 20px; }

.kouteka-modal__amount {
    background:    #f8f8f8;
    border:        1.5px solid #e2e2e2;
    border-radius: 10px;
    padding:       12px 16px;
    margin-bottom: 18px;
    font-size:     16px;
    font-weight:   700;
    color:         #1a1a1a;
    text-align:    center;
    letter-spacing: -.01em;
}

/* Champs */
.kouteka-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  14px;
}
.kouteka-field:last-of-type { margin-bottom: 0; }
.kouteka-field label {
    font-size:   13px;
    font-weight: 600;
    color:       #1a1a1a;
}
.kouteka-select,
.kouteka-input {
    width:          100%;
    padding:        11px 14px;
    border:         1.5px solid #ddd;
    border-radius:  8px;
    font-size:      15px;
    color:          #1a1a1a;
    background:     #fff;
    transition:     border-color .15s, box-shadow .15s;
    box-sizing:     border-box;
    appearance:     none;
    -webkit-appearance: none;
    font-family:    inherit;
    outline:        none;
}
.kouteka-select:focus,
.kouteka-input:focus {
    border-color: #1a1a1a;
    box-shadow:   0 0 0 3px rgba(26,26,26,.08);
}
.kouteka-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231a1a1a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 14px center;
    padding-right:       36px;
    cursor:              pointer;
}
.kouteka-input::placeholder { color: #9ca3af; }
.kouteka-hint { font-size: 12px; color: #9ca3af; line-height: 1.4; }

.kouteka-modal__error {
    background:    #fef2f2;
    border:        1px solid #fecaca;
    color:         #991b1b;
    border-radius: 8px;
    padding:       10px 14px;
    font-size:     13px;
    margin-top:    10px;
}

/* Footer modale */
.kouteka-modal__footer {
    padding:        4px 20px 20px;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* ── Boutons modale ──────────────────────────────────────── */
.kouteka-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         13px 20px;
    border-radius:   8px;
    font-size:       15px;
    font-weight:     600;
    cursor:          pointer;
    border:          none;
    width:           100%;
    box-sizing:      border-box;
    font-family:     inherit;
    transition:      filter .15s, transform .1s;
    letter-spacing:  .01em;
}
.kouteka-btn:active { transform: scale(.99); }
.kouteka-btn:disabled { opacity: .55; cursor: not-allowed; }

.kouteka-btn--primary { background: #1a1a1a; color: #fff; }
.kouteka-btn--primary:hover { filter: brightness(.88); }

.kouteka-btn--ghost { background: #f3f4f6; color: #555; }
.kouteka-btn--ghost:hover { background: #e9eaec; }

/* Spinner */
.kouteka-btn__spinner {
    width:             16px;
    height:            16px;
    border:            2px solid rgba(255,255,255,.35);
    border-top-color:  #fff;
    border-radius:     50%;
    animation:         kouteka-spin .7s linear infinite;
}
@keyframes kouteka-spin { to { transform: rotate(360deg); } }

/* ── État attente USSD ───────────────────────────────────── */
.kouteka-modal__waiting {
    padding:    32px 24px;
    text-align: center;
}
.kouteka-waiting__icon  { margin-bottom: 20px; }
.kouteka-pulse {
    width:      60px;
    height:     60px;
    background: #1a1a1a;
    border-radius: 50%;
    margin:     0 auto;
    animation:  kouteka-pulse 1.6s ease-in-out infinite;
}
@keyframes kouteka-pulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.1); opacity: .7; }
}
.kouteka-waiting__title {
    font-size:   17px;
    font-weight: 600;
    color:       #1a1a1a;
    margin:      0 0 8px;
}
.kouteka-waiting__desc {
    font-size:   13px;
    color:       #6b7280;
    margin:      0 0 10px;
    line-height: 1.6;
}
.kouteka-waiting__timer { font-size: 12px; color: #9ca3af; }

/* ── Responsive mobile ───────────────────────────────────── */
@media (max-width: 480px) {
    .kouteka-select,
    .kouteka-input       { font-size: 16px; }          /* Évite zoom iOS */
    .kouteka-modal       { align-items: flex-end; padding: 0; }
    .kouteka-modal__box  { border-radius: 16px 16px 0 0; max-width: 100%; }
}