/* Spliff Lyra — bloc (spécificité 0,2,0 partout : le Club a un reset `.sl-club *{padding:0}` chargé après nous)
    « Payer ma commande par carte » (préfixe spliff-lyra-, allowlist UCSS).
   Même langage visuel que le checkout (sl-checkout-v2) : carte blanche, bordures fines,
   Apple Pay noir / Google Pay blanc en tête, bouton carte accent bleu. */
.spliff-lyra-pay.spliff-lyra-pay{--lyra-accent:#5A8BFF;--lyra-accent-hover:#4A7BEF;--lyra-text:#1A1A1A;--lyra-muted:#1b1b1b;--lyra-border:#E5E7EB;--lyra-field:#A0A0A6;--lyra-radius:12px;--lyra-radius-sm:8px;--lyra-font:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--lyra-font-display:'Syne',var(--lyra-font);
	position:relative;box-sizing:border-box;width:100%;margin:14px 0 6px;padding:22px 20px 18px;border-radius:var(--lyra-radius);background:#fff;color:var(--lyra-text);font-family:var(--lyra-font);text-align:left}
.spliff-lyra-pay *{box-sizing:border-box}
.spliff-lyra-pay .spliff-lyra-pay__head{margin-bottom:16px}
.spliff-lyra-pay .spliff-lyra-pay__title{font-family:var(--lyra-font-display);font-size:18px;font-weight:800;line-height:1.2;letter-spacing:-.01em;margin:0 0 6px;color:var(--lyra-text)}
.spliff-lyra-pay .spliff-lyra-pay__sub{margin:0;font-size:14px;line-height:1.5;color:var(--lyra-muted)}

/* Boutons au repos : les wallets disponibles (côte à côte si deux), puis carte */
.spliff-lyra-pay .spliff-lyra-pay__actions{display:flex;flex-direction:column;gap:10px}
.spliff-lyra-pay .spliff-lyra-pay__wallets{display:flex;gap:8px}
.spliff-lyra-pay .spliff-lyra-pay__wallets:not(:has(> .spliff-lyra-pay__btn:not([hidden]))){display:none}
.spliff-lyra-pay .spliff-lyra-pay__wallets .spliff-lyra-pay__btn{flex:1 1 0;min-width:0;min-height:48px;padding:0 12px}
.spliff-lyra-pay .spliff-lyra-pay__btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;padding:0 18px;border:1.5px solid transparent;border-radius:var(--lyra-radius-sm);font-family:var(--lyra-font);font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.1;cursor:pointer;transition:background .2s ease,transform .2s ease,opacity .2s ease,border-color .2s ease;-webkit-appearance:none;appearance:none;margin:0}
.spliff-lyra-pay .spliff-lyra-pay__btn:active{transform:translateY(0)}
.spliff-lyra-pay .spliff-lyra-pay__btn:disabled{opacity:.7;cursor:progress}
.spliff-lyra-pay .spliff-lyra-pay__btn svg{flex-shrink:0}
.spliff-lyra-pay .spliff-lyra-pay__btn--apple{background:#000;color:#fff;border-color:#000;font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:17px;font-weight:500;letter-spacing:0}
.spliff-lyra-pay .spliff-lyra-pay__btn--apple:hover{opacity:.85}
.spliff-lyra-pay .spliff-lyra-pay__btn--google{background:#fff;color:#3c4043;border-color:#dadce0;font-family:Roboto,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;font-size:16px;font-weight:500;letter-spacing:0}
.spliff-lyra-pay .spliff-lyra-pay__btn--google:hover{border-color:#3c4043}
.spliff-lyra-pay .spliff-lyra-pay__btn--card{background:var(--lyra-accent);color:#fff;border-color:var(--lyra-accent)}
.spliff-lyra-pay .spliff-lyra-pay__btn--card:hover{background:var(--lyra-accent-hover);border-color:var(--lyra-accent-hover);transform:translateY(-1px)}
.spliff-lyra-pay .spliff-lyra-pay__btn.is-loading span::after{content:"…"}
.spliff-lyra-pay .spliff-lyra-pay__or{display:flex;align-items:center;gap:12px;margin:2px 0;font-size:12px;font-weight:500;color:var(--lyra-muted);text-transform:none}
.spliff-lyra-pay .spliff-lyra-pay__or::before,.spliff-lyra-pay .spliff-lyra-pay__or::after{content:"";flex:1;height:1px;background:var(--lyra-border)}
.spliff-lyra-pay .spliff-lyra-pay__brands{display:flex;justify-content:center;gap:6px;margin:-2px 0 0}
.spliff-lyra-pay .spliff-lyra-pay__brand{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--lyra-border);border-radius:5px;font-size:10.5px;font-weight:600;letter-spacing:.02em;color:var(--lyra-muted);line-height:1}
.spliff-lyra-pay [hidden]{display:none !important}

.spliff-lyra-pay .spliff-lyra-pay__status{margin:12px 0 0;padding:10px 12px;border-radius:var(--lyra-radius-sm);font-size:13.5px;line-height:1.45;background:#F3F4F6;color:var(--lyra-text)}
.spliff-lyra-pay .spliff-lyra-pay__status--success{background:#E8F5E9;color:#1B5E20}
.spliff-lyra-pay .spliff-lyra-pay__status--error{background:#FDECEC;color:#B71C1C}
.spliff-lyra-pay .spliff-lyra-pay__secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:14px 0 0;font-size:12px;line-height:1.4;color:var(--lyra-muted);text-align:center}
.spliff-lyra-pay .spliff-lyra-pay__secure svg{flex-shrink:0}
.spliff-lyra-pay .spliff-lyra-pay__bacs{margin:8px 0 0;font-size:12.5px;line-height:1.4;color:var(--lyra-muted);text-align:center}

/* ─── Smartform Krypton (mêmes règles que le checkout, scopées au bloc) ─── */
.spliff-lyra-pay .spliff-lyra-pay__form{margin-top:4px}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-smart-form,.spliff-lyra-pay .spliff-lyra-pay__form .kr-smart-form-wrapper{border:none !important;padding:0 !important;margin:0 !important;background:none !important;width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list,.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-inner-wrapper{display:flex !important;flex-direction:column !important;width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--spbtn{order:-1 !important;margin-bottom:8px !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-smart-form-list-section-name{font-size:12px !important;color:var(--lyra-muted) !important;font-weight:500 !important;margin:10px 0 6px !important;text-transform:none !important;order:1 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-smart-form-list-section-name--other{order:-2 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label{border:1.5px solid var(--lyra-border) !important;border-radius:var(--lyra-radius-sm) !important;padding:12px 16px !important;margin-bottom:8px !important;background:#fff !important;display:flex !important;align-items:center !important;gap:10px !important;width:100% !important;box-sizing:border-box !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options-item{width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label:hover{border-color:var(--lyra-accent) !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--selected{border-color:var(--lyra-accent) !important;background:rgba(90,139,255,.08) !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-card-header{display:none !important}
/* Krypton impose flex-direction:column (kr-embedded-flex-direction-column) : on force la ligne pour mettre expiration + CVV côte à côte */
.spliff-lyra-pay .spliff-lyra-pay__form .kr-card-form{padding:0 !important;width:100% !important;box-sizing:border-box !important;display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;justify-content:space-between !important;gap:8px 0 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element.kr-expiry,.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element.kr-security-code{flex:0 0 48% !important}
/* Apple Pay avant Google Pay quand les deux sont proposés */
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options-item.kr-apple_pay{order:-1 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded{margin-top:4px !important;width:100% !important;max-width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element{border:1.5px solid var(--lyra-field) !important;border-radius:var(--lyra-radius-sm) !important;background:#fff !important;overflow:hidden !important;margin:0 0 8px 0 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element.kr-pan,.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element.kr-card-holder-name{width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element.kr-expiry{width:47% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element.kr-security-code{width:47% !important;margin-left:auto !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-embedded .kr-field-element:focus-within{border-color:var(--lyra-accent) !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-nested-method-display-wrapper,.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--compact,.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-row,.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-card-form-wrapper{width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--compact{flex-direction:column !important}
/* Wallets : Apple Pay noir, Google Pay blanc, côte à côte */
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn{justify-content:center !important;gap:8px !important;padding:12px 16px !important;font-size:15px !important;font-weight:500 !important;cursor:pointer !important;border-radius:var(--lyra-radius-sm) !important;transition:opacity .2s ease !important;min-height:48px !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn:hover{opacity:.85 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn.kr-apple_pay,.spliff-lyra-pay .spliff-lyra-pay__form button.kr-apple_pay{background:#000 !important;color:#fff !important;border-color:#000 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn.kr-apple_pay *,.spliff-lyra-pay .spliff-lyra-pay__form button.kr-apple_pay *{color:#fff !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn.kr-apple_pay.kr-method-label--selected{background:#000 !important;border-color:var(--lyra-accent) !important;box-shadow:0 0 0 2px var(--lyra-accent) !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn.kr-googlepay,.spliff-lyra-pay .spliff-lyra-pay__form button.kr-googlepay{background:#fff !important;color:#3c4043 !important;border-color:#dadce0 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn.kr-googlepay *,.spliff-lyra-pay .spliff-lyra-pay__form button.kr-googlepay *{color:#3c4043 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn.kr-googlepay.kr-method-label--selected{background:#fff !important;border-color:var(--lyra-accent) !important;box-shadow:0 0 0 2px var(--lyra-accent) !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn img,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn svg,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn .kr-method-icon{width:28px !important;height:28px !important;min-width:28px !important;min-height:28px !important;object-fit:contain !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn .kr-smart-form-radio-button,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn .kr-method-label-radio,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn input[type="radio"]{display:none !important;width:0 !important;height:0 !important;margin:0 !important;padding:0 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label--spbtn .kr-method-label-wrapper{gap:6px !important;padding:0 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--spbtn .kr-methods-list-row{display:flex !important;gap:8px !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--spbtn .kr-methods-list-options-item{flex:1 !important;min-width:0 !important}
/* Smartform EMBARQUÉ (kr-card-form-expanded) : Krypton range le wallet dans un
   second .kr-methods-list-options APRÈS le formulaire carte (--extra). On le
   remonte en tête, on efface les intitulés de section, et un « ou » (texte
   i18n passé par --lyra-or) sépare le wallet des champs carte. */
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-inner-wrapper > .kr-methods-list-options:not(.kr-methods-list-options--extra){order:-1 !important;display:flex !important;gap:8px !important;width:100% !important;margin:0 0 4px !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-inner-wrapper > .kr-methods-list-options:not(.kr-methods-list-options--extra) .kr-methods-list-options-item{flex:1 !important;min-width:0 !important;width:auto !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-smart-form-list-section-name{display:none !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--extra::before{content:var(--lyra-or,"");display:flex;align-items:center;justify-content:center;margin:8px 0 10px;font-size:12px;font-weight:500;color:var(--lyra-muted)}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-methods-list-options--extra{display:flex !important;flex-direction:column !important;width:100% !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay{justify-content:center !important;min-height:48px !important;margin:0 !important;font-size:15px !important;font-weight:500 !important;cursor:pointer !important;transition:opacity .2s ease !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay:hover,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay:hover{opacity:.85 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay{background:#000 !important;color:#fff !important;border-color:#000 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay *{color:#fff !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay{background:#fff !important;color:#3c4043 !important;border-color:#dadce0 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay *{color:#3c4043 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay .kr-method-label-wrapper,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay .kr-method-label-wrapper{display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;padding:0 !important;width:auto !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay .kr-method-icon,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay .kr-method-icon,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-googlepay .kr-method-icon svg,.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label.kr-apple_pay .kr-method-icon svg{width:28px !important;height:28px !important;min-width:28px !important;object-fit:contain !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-method-label .kr-arrow-right{display:none !important}
/* Bouton payer de Krypton : même style que « Commander » au checkout */
.spliff-lyra-pay .spliff-lyra-pay__form .kr-payment-button{width:100% !important;max-width:100% !important;min-height:50px !important;margin:8px 0 0 !important;padding:14px 24px !important;border:none !important;border-radius:var(--lyra-radius-sm) !important;background:var(--lyra-accent) !important;color:#fff !important;font-family:var(--lyra-font) !important;font-size:15px !important;font-weight:600 !important;letter-spacing:-.01em !important;text-transform:none !important;box-shadow:none !important;transition:background .2s ease,transform .2s ease !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-payment-button:hover{background:var(--lyra-accent-hover) !important;transform:translateY(-1px) !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-payment-button span{color:#fff !important;font-weight:600 !important}
.spliff-lyra-pay .spliff-lyra-pay__form .kr-form-error:empty,.spliff-lyra-pay .spliff-lyra-pay__form .kr-smart-button.kr-form-error{display:none !important}

/* ─── Contexte Club ─── */
/* Carte de suivi (fond sombre) : le bloc prend toute la largeur, le récap
   articles + adresse passe dessous au lieu d'être écrasé à droite. */
.sl-tracking-card-footer .spliff-lyra-pay{margin:0 0 16px}
.sl-tracking-card-footer.has-pay:has(> .spliff-lyra-pay){display:block}
.sl-tracking-card-footer.has-pay:has(> .spliff-lyra-pay) .sl-tracking-card-details{justify-content:flex-start}
/* Modale de commande (fond clair) : carte encadrée comme les autres sections */
.sl-od .spliff-lyra-pay{margin:16px 0 4px;border:1px solid var(--lyra-border)}

/* ─── Contexte page de remerciement : même carte que .sl-ty-card ─── */
.spliff-lyra-pay.spliff-lyra-pay--typ{margin:0 0 16px;padding:28px 24px;border:1px solid var(--lyra-text)}
.spliff-lyra-pay--typ .spliff-lyra-pay__title{font-size:22px}

@media (max-width:640px){
	.spliff-lyra-pay.spliff-lyra-pay{padding:18px 16px 16px}
	.spliff-lyra-pay.spliff-lyra-pay--typ{padding:22px 18px 18px}
	.spliff-lyra-pay .spliff-lyra-pay__title{font-size:17px}
	.spliff-lyra-pay--typ .spliff-lyra-pay__title{font-size:20px}
}