/* ═══════════════════════════════════════════════════
   LFD Web Payment Gateway — Frontend Styles
   Couleurs: #f97316 (orange), #0f0f0f (dark), #fff
════════════════════════════════════════════════════ */

:root {
    --lfd-orange:  #f97316;
    --lfd-orange2: #ea6c0a;
    --lfd-dark:    #0f0f0f;
    --lfd-gray:    #6b7280;
    --lfd-light:   #f9fafb;
    --lfd-border:  #e5e7eb;
    --lfd-green:   #22c55e;
    --lfd-radius:  10px;
}

/* ── Bouton principal ──────────────────────────── */
.lfdweb-btn-pay {
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
    padding:          13px 28px;
    background:       var(--lfd-orange);
    color:            #fff !important;
    text-decoration:  none !important;
    border-radius:    var(--lfd-radius);
    font-weight:      600;
    font-size:        15px;
    letter-spacing:   .01em;
    transition:       background .18s, transform .15s, box-shadow .18s;
    box-shadow:       0 4px 18px rgba(249,115,22,.32);
    border:           none;
    cursor:           pointer;
}
.lfdweb-btn-pay:hover {
    background:   var(--lfd-orange2);
    transform:    translateY(-2px);
    box-shadow:   0 6px 24px rgba(249,115,22,.42);
}
.lfdweb-btn-pay:active { transform: translateY(0); }

/* ── Checkout wrap ─────────────────────────────── */
.lfdweb-checkout-wrap {
    padding:       14px 0 6px;
}
.lfdweb-desc {
    margin:        0 0 12px;
    color:         var(--lfd-gray);
    font-size:     13.5px;
    line-height:   1.5;
}

/* ── Grille méthodes ───────────────────────────── */
.lfdweb-methods-grid {
    display:        flex;
    flex-wrap:      wrap;
    gap:            6px;
    margin-bottom:  12px;
}
.lfdweb-method-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            5px;
    padding:        4px 10px;
    background:     #fff7ed;
    border:         1px solid #fed7aa;
    border-radius:  20px;
    font-size:      12px;
    font-weight:    500;
    color:          #9a3412;
}

/* ── Sécurité ──────────────────────────────────── */
.lfdweb-secure-note {
    display:        flex;
    align-items:    center;
    gap:            6px;
    font-size:      12px;
    color:          #16a34a;
    margin:         8px 0 0;
}

/* ── Erreur ────────────────────────────────────── */
.lfdweb-error {
    color:       #dc2626;
    font-size:   13px;
    padding:     10px 14px;
    background:  #fef2f2;
    border:      1px solid #fecaca;
    border-radius: var(--lfd-radius);
}