/* v2.2 */
.card-wrapper {
    width: 65%;
    max-width: 100%;
    margin: 10px auto;
    padding: 10px;
    border-radius: 18px;

    background: linear-gradient(135deg, #111111, #2e2e2e);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);

    color: #fff;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    .card-wrapper {
        width: 100%;
    }
}

/* effet glossy subtil */
.card-wrapper::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.04), transparent 60%);
    transform: rotate(25deg);
}

/* container hosted fields */
.card-fields {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    padding: 15px;
    backdrop-filter: blur(8px);
}

/* HiPay inputs internes */
.HiPayField--focused+.hipay-field-label, .hipay-field:not(.HiPayField--empty)+.hipay-field-label {
    color: #fff;
    -webkit-transform: scale(.85) translateY(-25px);
    -ms-transform: scale(.85) translateY(-25px);
    transform: scale(.85) translateY(-25px);
    cursor: default;
}

#hipay-hostedfields-form input {
    padding: 0px 10px !important;
    background-color: #fff !important;
}

/* placeholder style */
#hipay-hostedfields-form ::placeholder {
    color: rgba(255,255,255,0.5);
}

.payment-choice {
    text-align: center;
}

/* footer carte */
.card-footer {
    margin-top: 15px;
    font-size: 12px;
    opacity: 0.5;
    text-align: center;
    color: #fff;
    padding: 0px !important;
    background-color: transparent !important;
}

/* focus propre des champs */
#hipay-hostedfields-form iframe {
    border-radius: 8px;
}

/* hover container */
.card-fields:hover {
    border-color: rgba(255,255,255,0.25);
}

#hipay-error-message {
    color: #fff;
    margin-top: 12px;
    font-size: 11pt;
}

/* Style du loader */
#hipay-loader {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    z-index: 10;
}

.spinner {
    width: 45px;
    height: 45px;
    border: 4px solid rgba(255,255,255,0.1);
    border-top: 4px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.accordion {
    width: 100%;
    max-width: 100%;
    margin: 0px;
    font-family: Arial, sans-serif;
}

.accordion-item {
    border-bottom: 1px solid #e8e8e8;
}

.accordion-header {
    width: 100%;
    padding: 15px;
    text-align: left;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #111;
    transition: background 0.3s, color 0.3s;
}

.accordion-header:hover {
    background: #111;
    color: #fff;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: #fff;
    padding: 0 15px;
}

@media (max-width: 768px) {
    .accordion-content {
        padding: 0px;
    }
}

.accordion-content p {
    margin: 15px 0;
}

/* v2.3 */
.custom_paypal_button_container {
    min-height: 50px;
    padding: 15px;
}

#paypal-button {
    width: 100%;
    min-height: 100px;
    margin: 0 !important;
}

#paypal-button iframe {
    width: 100% !important;
    min-height: 45px !important;
}


/* ---------- Carousel : wrapper (flèches + piste) ---------- */
.payment-selector-wrapper {
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Wrapper optionnel pour l'indicateur de scroll (dégradé) */
.payment-selector-wrapper-container {
    position: relative;
}
.payment-selector-wrapper-container::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    pointer-events: none;
}


/* ---------- Flèches de navigation ---------- */
/* === CARROUSEL DE PAIEMENT === */

/* Wrapper en flex : flèche gauche + liste + flèche droite, sur la même ligne */
.payment-selector-wrapper {
  display: flex;
  align-items: center;            /* centre verticalement les flèches par rapport aux cartes */
  gap: 8px;
  width: 100%;
  position: relative;
}

/* Boutons de navigation */
.payment-nav {
  flex: 0 0 auto;                 /* taille fixe, pas de shrink */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #e0e0e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #555;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: background .15s, color .15s, border-color .15s, opacity .15s;
}

.payment-nav:hover:not(:disabled) {
  background: #f7f7f7;
  color: #000;
  border-color: #ccc;
}

.payment-nav:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* La liste des cartes : scrollable horizontalement */
.payment-selector {
  flex: 1 1 auto;                 /* prend toute la largeur restante */
  min-width: 0;                   /* CRITIQUE en flex pour permettre l'overflow */
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 8px 4px;               /* un peu d'air pour le focus/border */
  margin: 0;
  box-sizing: border-box;
}

/* Cartes : largeur stable, pas de shrink */
.payment-selector .payment-method {
  flex: 0 0 auto;
  scroll-snap-align: start;
  margin: 0;
}

/* Cache la scrollbar (esthétique) */
.payment-selector::-webkit-scrollbar { display: none; }
.payment-selector { scrollbar-width: none; }

/* === MOBILE : on cache les flèches, le swipe tactile suffit === */
@media (max-width: 768px) {
  .payment-nav { display: none; }
  .payment-selector-wrapper { gap: 0; }
}


/* ---------- Piste scrollable (contient les cartes) ---------- */
.payment-selector {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding: 8px 4px 12px;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.payment-selector .payment-method {
  flex: 0 0 auto;                          /* pas de shrink, pas de grow */
  width: 110px;                            /* à ajuster selon ton design */
  scroll-snap-align: start;
  margin: 0;                               /* on gère l'espacement par gap */
}

.payment-selector .payment-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  min-height: 80px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.payment-selector .payment-method input { display: none; }

.payment-selector .payment-method input:checked + .payment-method-card {
  border-color: #f0a040;                   /* couleur de sélection */
  box-shadow: 0 0 0 2px rgba(240,160,64,.25);
}

.payment-selector .payment-method-card img {
  max-height: 36px;
  width: auto;
}

.payment-selector .payment-method-card span {
  font-size: 12px;
  text-align: center;
  white-space: nowrap;                     /* évite que le label passe sur 2 lignes */
}

/* Masquer la scrollbar sur la barre (esthétique mobile) */
.payment-selector::-webkit-scrollbar { display: none; }
.payment-selector { scrollbar-width: none; }

.payment-selector::-webkit-scrollbar {
    display: none
}


/* ---------- Carte moyen de paiement (desktop par défaut) ---------- */
.payment-method {
    flex: 0 0 auto;
    min-width: 140px;
    scroll-snap-align: start;
}

.payment-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 90px;
    padding: 16px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.payment-method-card img {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.payment-method-card span {
    font-size: 13px;
    color: #333;
    text-align: center;
}

.payment-method:hover .payment-method-card {
    border-color: #f5a40c;
    transform: translateY(-2px);
}

.payment-method input[type="radio"]:checked + .payment-method-card {
    border-color: #f5a40c;
    box-shadow: 0 0 0 1px #f5a40c inset;
    background: #fff8ec;
}


/* ---------- Panneaux (contenu de chaque moyen de paiement) ---------- */
.payment-panels {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fafafa;
}

.payment-panel[hidden] {
    display: none !important;
}

.payment-panels:not(:has(.payment-panel:not([hidden]))) {
    display: none;
}

#hipay-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 10px;
}

#hipay-submit-button {
    align-self: center;
    min-width: 200px;
}

/* RESPONSIVE */
/* ---------- Tablette / mobile large (≤ 600px) ---------- */
@media (max-width: 768px) {

    /* Masque les flèches : le swipe suffit */
    .payment-selector-wrapper .payment-nav {
        display: none !important;
    }

    /* Peek : 2 items entiers + ~30% d'un 3e */
    .payment-selector .payment-method {
        flex: 0 0 calc((100vw - 60px) / 2.8) !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Cartes plus compactes sur mobile */
    .payment-method-card {
        min-height: 80px;
        padding: 12px 8px;
    }
    .payment-method-card img  { height: 26px; }
    .payment-method-card span { font-size: 12px; }
    .carousel-arrow { display: none; }
}


/* ---------- Très petits écrans (≤ 430px : iPhone SE, etc.) ---------- */
@media (max-width: 430px) {
    .payment-selector .payment-method {
        flex: 0 0 calc((80vw - 40px) / 2.7) !important;
    }
    .payment-method-card span {
        font-size: 13px;
        color: #333;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ---------- Desktop : on masque l'indicateur de scroll ---------- */
@media (min-width: 601px) {
    .payment-selector-wrapper-container::after {
        display: none;
    }
}

.hipay-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
    display: none;                /* passé à "flex" par showLoader() */
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

.hipay-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e0e0e0;
    border-top-color: #f5a40c;
    border-radius: 50%;
    animation: hipay-spin 0.9s linear infinite;
}

@keyframes hipay-spin {
    to { transform: rotate(360deg); }
}

/* Carte de paiement désactivée (ex. Alma sous le minimum) */
.payment-method.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none; /* bloque aussi le hover et le clic */
}

/* On garde un feedback visuel au hover du label parent, pas de la carte */
.payment-method.disabled .payment-method-card {
    border-color: #e0e0e0 !important;
    background: #f5f5f5;
    transform: none !important;
}

/* Ré-autoriser le pointer sur le label pour que le title (tooltip) s'affiche */
.payment-method.disabled {
    pointer-events: auto;
}
.payment-method.disabled .payment-method-card,
.payment-method.disabled input {
    pointer-events: none;
}

.alma-min-notice {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 12px;
    color: #666;
    background: #fff8ec;
    border: 1px solid #f5d68a;
    border-radius: 6px;
    line-height: 1.5;
}

.alma-min-notice .material-symbols-outlined {
    font-size: 16px;
    color: #f5a40c;
    flex-shrink: 0;
    margin-top: 1px;
}

.alma-min-notice b {
    color: #333;
}

.alma-top-ventes-link {
    color: #f5a40c;
    text-decoration: underline;
    font-weight: 600;
}

.alma-top-ventes-link:hover {
    color: #d48a00;
    text-decoration: none;
}

@supports not selector(input[type="apple-pay"]) {
    label:has(input[value="apple-pay"]) { display: none; }
}

.rib-details {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 8px 16px;
    margin: 16px 0;
    padding: 16px;
    background: #fff8ec;
    border: 1px solid #f5d68a;
    border-radius: 8px;
}
.rib-details dt {
    font-weight: 600;
    color: #666;
    margin: 0;
}
.rib-details dd {
    margin: 0;
    color: #222;
}
.rib-monospace {
    font-family: 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 0.5px;
}
.rib-important {
    color: #EFAB19;
    font-weight: 700;
}
.rib-warning {
    margin-top: 16px;
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #f9d66d;
    border-radius: 6px;
    font-size: 13px;
    color: #6b5400;
}
@media (max-width: 500px) {
    .rib-details { grid-template-columns: 1fr; gap: 4px 0; }
    .rib-details dt { margin-top: 8px; }
}
.payment-panels.cgv-disabled {
    pointer-events: none;
    opacity: 0.6;
}

/* Exception : le bouton générer RIB reste toujours actif */
.payment-panels.cgv-disabled #virement-generate-button {
    pointer-events: auto;
    opacity: 1;
}

/* ===== PATCH MOBILE : span texte + flèches ===== */
@media (max-width: 768px) {

    /* 1. Span : autorise le retour à la ligne, centre le texte */
    .payment-method-card span,
    .payment-selector .payment-method-card span {
        white-space: normal !important;   /* écrase le nowrap existant */
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        text-align: center;
        line-height: 1.3;
        max-width: 100%;
    }

    /* 2. Flèches : on les réaffiche, légèrement plus petites */
    .payment-nav,
    .payment-selector-wrapper .payment-nav {
        display: flex !important;
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        flex-shrink: 0;
    }

    /* 3. Recalcul largeur des cartes (on retire ~72px pour les 2 flèches + gaps) */
    .payment-selector .payment-method {
        flex: 0 0 calc((100vw - 96px) / 2.3) !important;
    }
}

.image-resize-mobile-only {
    height: 28px; /* valeur par défaut */
}

/* Pour les très petits écrans, on ajuste aussi */
@media (max-width: 430px) {
    .payment-method-card span {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    .payment-selector .payment-method {
        flex: 0 0 calc((65vw - 100px) / 2.2) !important;
    }
    .image-resize-mobile-only{
        height: 23px !important;
    }
}

.payment-selector {
    align-items: stretch;
}
.payment-selector .payment-method {
    display: flex;
    flex-direction: column; /* ← empêche la carte de rétrécir en largeur */
}
.payment-selector .payment-method-card {
    flex: 1;                /* ← remplace height:100%, plus robuste en colonne */
    width: 100%;            /* ← garantit la largeur complète */
    box-sizing: border-box;
}