/* ===== PAYMENT MODAL ===== */
.pay-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.78); backdrop-filter: blur(6px);
    z-index: 9999; align-items: center; justify-content: center; padding: 20px;
}
.pay-overlay.open { display: flex; }

.pay-modal {
    position: relative; background: #1a1a22;
    border: 1px solid rgba(255,255,255,.1); border-radius: 24px;
    padding: 36px 32px; width: 100%; max-width: 440px;
    box-shadow: 0 30px 80px rgba(0,0,0,.65);
    animation: payModalIn .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes payModalIn {
    from { opacity: 0; transform: translateY(30px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pay-modal-close {
    position: absolute; top: 16px; right: 16px;
    background: rgba(255,255,255,.08); border: none;
    color: rgba(255,255,255,.6); width: 34px; height: 34px;
    border-radius: 50%; font-size: 1.15rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s, color .2s; line-height: 1;
}
.pay-modal-close:hover { background: rgba(255,255,255,.16); color: #fff; }

.pay-modal-badge-top {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(37,211,102,.12); color: #25d366;
    border: 1px solid rgba(37,211,102,.25); border-radius: 50px;
    padding: 5px 14px; font-size: .78rem; font-weight: 600;
    margin-bottom: 20px;
}

.pay-modal-pack-name { font-size: 1.25rem; font-weight: 800; color: #fff; margin-bottom: 8px; }

.pay-modal-price-line { display: flex; align-items: baseline; gap: 8px; }
.pay-modal-price-eur  { font-size: 2.3rem; font-weight: 900; color: var(--primary); line-height: 1; }
.pay-modal-price-period { color: rgba(255,255,255,.4); font-size: .9rem; }
.pay-modal-price-xof { color: rgba(255,255,255,.35); font-size: .85rem; margin-top: 5px; margin-bottom: 3px; }
.pay-modal-price-usd { color: rgba(100,210,140,.6); font-size: .85rem; margin-top: 0; margin-bottom: 16px; }

.pay-modal-sep { height: 1px; background: rgba(255,255,255,.08); margin: 18px 0; }

.pay-modal-methods-label {
    color: rgba(255,255,255,.45); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 14px;
}

.pay-error-msg {
    display: none;
    background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3);
    color: #f87171; border-radius: 10px; padding: 10px 14px;
    font-size: .85rem; line-height: 1.5; margin-bottom: 14px;
}

.pay-btn-card {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px 24px;
    background: var(--gradient-primary); border: none; border-radius: 14px;
    color: #fff; font-family: 'Arboria', sans-serif; font-size: .95rem;
    font-weight: 700; cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    position: relative; overflow: hidden; margin-bottom: 10px;
}
.pay-btn-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-orange); }
.pay-btn-card:disabled { opacity: .65; cursor: not-allowed; transform: none !important; }
.pay-btn-card.loading .pay-btn-text { opacity: 0; }
.pay-btn-card.loading .pay-spinner  { display: block; }

.pay-btn-text { display: flex; align-items: center; gap: 10px; transition: opacity .2s; }

.pay-card-logos { display: flex; gap: 4px; margin-left: 6px; }
.pay-card-logo {
    background: rgba(255,255,255,.22); border-radius: 4px;
    padding: 2px 7px; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
}
.pay-card-logo.mc { background: rgba(255,255,255,.14); }

.pay-spinner {
    display: none; position: absolute;
    width: 22px; height: 22px;
    border: 3px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: spin .7s linear infinite;
}

/* Mobile Money button */
.pay-btn-mobile {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 15px 24px;
    background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.14);
    border-radius: 14px; color: rgba(255,255,255,.85);
    font-family: 'Arboria', sans-serif; font-size: .9rem; font-weight: 600;
    cursor: pointer; transition: background .2s, border-color .2s;
    margin-bottom: 10px; position: relative; overflow: hidden;
}
.pay-btn-mobile:hover:not(:disabled) { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.3); }
.pay-btn-mobile:disabled { opacity: .55; cursor: not-allowed; }
.pay-btn-mobile.loading .pay-btn-text { opacity: 0; }
.pay-btn-mobile.loading .pay-spinner  { display: block; }
.pay-mobile-logos { display: flex; gap: 5px; margin-left: 6px; }
.pay-mobile-logo  {
    background: rgba(255,255,255,.12); border-radius: 4px;
    padding: 2px 6px; font-size: .65rem; font-weight: 800; letter-spacing: .02em;
}

.pay-btn-wa {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px 24px;
    background: rgba(37,211,102,.09); border: 1.5px solid rgba(37,211,102,.3);
    border-radius: 14px; color: #25d366; font-size: .9rem; font-weight: 600;
    text-decoration: none; transition: background .2s, border-color .2s;
    margin-bottom: 18px;
}
.pay-btn-wa:hover { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.55); color: #25d366; }

.pay-modal-note {
    display: flex; align-items: flex-start; gap: 8px;
    color: rgba(255,255,255,.28); font-size: .76rem; line-height: 1.55;
}
.pay-modal-note i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* Pay Now button — used on devis page summary panel */
.btn-pay-now {
    width: 100%; padding: 13px;
    background: var(--gradient-primary); border: none; border-radius: 12px;
    font-family: 'Arboria', sans-serif; font-weight: 700; font-size: .95rem;
    color: #fff; cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-bottom: 10px;
}
.btn-pay-now:hover { transform: translateY(-2px); box-shadow: var(--shadow-orange); }

/* ── Client info fields ── (styles de secours, les styles principaux sont dans pay-modal.php) */
.pay-client-fields {
    background: #1e1a26;
    border: 1.5px solid #FF6B00;
    border-radius: 16px;
    padding: 18px 18px 14px;
    margin-bottom: 20px;
}
.pay-fields-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pay-fields-title { display: flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .06em; }
.pay-fields-icon-wrap { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,107,0,.25); display: flex; align-items: center; justify-content: center; color: #FF6B00; font-size: .72rem; flex-shrink: 0; }
.pay-fields-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,107,0,.15); border: 1px solid rgba(255,107,0,.4); color: #FF8C38; border-radius: 50px; padding: 4px 11px; font-size: .67rem; font-weight: 700; }
.pay-field-group { margin-bottom: 12px; }
.pay-field-label { display: block; color: rgba(255,255,255,.55); font-size: .72rem; font-weight: 600; margin-bottom: 6px; }
.pay-required { color: #FF6B00; }
.pay-field-wrap { display: flex; align-items: stretch; background: #111118; border: 1.5px solid #2d2d3a; border-radius: 11px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.pay-field-wrap:focus-within { border-color: #FF6B00; box-shadow: 0 0 0 3px rgba(255,107,0,.15); }
.pay-field-icon-box { width: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #1e1612; border-right: 1px solid #2d2d3a; color: rgba(255,107,0,.6); font-size: .82rem; transition: color .2s, background .2s; }
.pay-field-wrap:focus-within .pay-field-icon-box { color: #FF6B00; background: #251c0e; }
.pay-field-input { flex: 1; min-width: 0; background: transparent !important; border: none !important; outline: none; padding: 13px; color: #fff !important; font-family: 'Arboria', sans-serif; font-size: .9rem; caret-color: #FF6B00; }
.pay-field-input::placeholder { color: rgba(255,255,255,.28) !important; }
.pay-field-input:-webkit-autofill, .pay-field-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 50px #111118 inset !important; -webkit-text-fill-color: #fff !important; }
.pay-field-note { display: flex; align-items: flex-start; gap: 6px; color: rgba(255,255,255,.32); font-size: .71rem; line-height: 1.5; margin-top: 12px; }
.pay-field-note i { color: #FF6B00; opacity: .8; flex-shrink: 0; margin-top: 1px; }

@media (max-width: 480px) {
    .pay-modal { padding: 28px 20px; border-radius: 20px; }
    .pay-modal-price-eur { font-size: 2rem; }
}