/* ============================================================
   NYRIX — Formulaire COD unique (.nyrix-cod) + modale.
   Auto-suffisant (couleurs explicites) → look identique sur la fiche produit,
   les shortcodes et la landing carbone, indépendamment du thème chargé.
   Rendu par nyrix_cod_render_form() ; piloté par js/cod-form.js.
   ============================================================ */
.nyrix-cod {
	margin: 1rem 0 0;
	padding: 1.1rem 1.2rem;
	border: 1px solid rgba(232, 99, 44, 0.25);
	border-radius: 16px;
	background: #16161A;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-family: 'Manrope', 'Inter', system-ui, sans-serif;
	max-width: 480px;
}
.nyrix-cod-h { margin: 0; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: #F4F4F6; }
.nyrix-cod-head { display: flex; flex-direction: column; gap: 0.1rem; margin-bottom: 0.15rem; }
.nyrix-cod-eyebrow { display: none; }
.nyrix-cod-head strong { font-size: 1.05rem; color: #F4F4F6; }

.nyrix-cod-bar { margin: 0.25rem 0 0.35rem; }
.nyrix-cod-bar-track { height: 8px; border-radius: 100px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.nyrix-cod-bar-fill { display: block; height: 100%; width: 0; background: linear-gradient(120deg, #E8632C, #FF7A45); border-radius: 100px; transition: width 0.35s ease; }
.nyrix-cod-bar-text { margin: 0.4rem 0 0; font-size: 0.8rem; color: #C9CCD1; }

.nyrix-cod-field { display: flex; flex-direction: column; gap: 0.2rem; }
.nyrix-cod-field > span { font-size: 0.82rem; font-weight: 600; color: #C9CCD1; }
.nyrix-cod-field input,
.nyrix-cod-field textarea,
.nyrix-cod-attr {
	width: 100%;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	border: 1px solid rgba(244, 244, 246, 0.18);
	background: #0A0A0C;
	color: #F4F4F6;
	font: inherit;
	font-size: 0.95rem;
}
.nyrix-cod-field input::placeholder,
.nyrix-cod-field textarea::placeholder { color: #888; opacity: 1; }
.nyrix-cod-field input:focus,
.nyrix-cod-field textarea:focus,
.nyrix-cod-attr:focus { outline: none; border-color: #E8632C; }

.nyrix-cod-qty { display: inline-flex; align-items: stretch; width: max-content; border-radius: 10px; overflow: hidden; border: 1px solid rgba(244, 244, 246, 0.18); }
.nyrix-cod-qty button { width: 44px; border: none; background: #0A0A0C; color: #F4F4F6; font-size: 1.2rem; cursor: pointer; line-height: 1; }
.nyrix-cod-qty button:hover { background: #1e1e24; }
.nyrix-cod-qty .nyrix-cod-qty-val {
	width: 64px; text-align: center; border: none; border-left: 1px solid rgba(244, 244, 246, 0.18);
	border-right: 1px solid rgba(244, 244, 246, 0.18); border-radius: 0; padding: 0.6rem 0;
	background: #0A0A0C; color: #F4F4F6; -moz-appearance: textfield;
}
.nyrix-cod-qty .nyrix-cod-qty-val::-webkit-outer-spin-button,
.nyrix-cod-qty .nyrix-cod-qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.nyrix-cod-summary { margin-top: 0.25rem; padding-top: 0.85rem; border-top: 1px dashed rgba(244, 244, 246, 0.18); display: flex; flex-direction: column; gap: 0.45rem; }
.nyrix-cod-summary > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.92rem; color: #C9CCD1; }
.nyrix-cod-summary b { color: #F4F4F6; }
.nyrix-cod-total-row { font-size: 1.05rem; }
.nyrix-cod-total-row b { color: #E8632C; font-size: 1.2rem; font-weight: 800; }

.nyrix-cod-msg { margin: 0; font-size: 0.85rem; text-align: center; }
.nyrix-cod-msg.err { color: #E66; }
.nyrix-cod-msg.ok { color: #7BD88F; }
.nyrix-cod-msg:empty { display: none; }

.nyrix-cod-submit {
	margin-top: 0.25rem; width: 100%; padding: 1rem; border: none; border-radius: 999px;
	background: linear-gradient(120deg, #E8632C, #FF7A45); color: #0A0A0C;
	font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 0.95rem;
	text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer; transition: transform 0.2s;
}
.nyrix-cod-submit:hover { transform: translateY(-2px); }
.nyrix-cod-submit:disabled { opacity: 0.6; cursor: wait; }
.nyrix-cod-note { margin: 0; font-size: 0.76rem; color: #8a8d96; text-align: center; }

/* ---- Bouton d'ouverture + modale ---- */
.nyrix-cod-popup { display: inline-block; }
.nyrix-cod-open {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	background: linear-gradient(120deg, #E8632C, #FF7A45); color: #0A0A0C;
	font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em;
	text-transform: uppercase; text-decoration: none; padding: 16px 40px; border: none; border-radius: 999px;
	cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 8px 28px rgba(232, 99, 44, 0.32);
}
.nyrix-cod-open:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(232, 99, 44, 0.5); }
.nyrix-cod-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.nyrix-cod-overlay.open { display: flex; }
.nyrix-cod-modal { position: relative; width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.nyrix-cod-modal .nyrix-cod { margin: 0; }
/* Les wrappers corps/footer sont transparents par défaut (display:contents) →
   pour le formulaire INLINE, les champs/résumé/bouton restent des enfants flex
   directs de .nyrix-cod : mise en page INCHANGÉE. Ils ne deviennent un corps
   défilant + un footer épinglé QUE dans la modale (.nyrix-cod-modal ci-dessous). */
.nyrix-cod-body, .nyrix-cod-foot { display: contents; }

/* DANS LA MODALE (TOUTES tailles) : le formulaire remplit la modale (≤90vh),
   le corps (champs) défile en interne, et le footer (résumé + CONFIRMER) reste
   épinglé en bas, toujours visible — jamais coupé. Version compacte (gaps réduits)
   pour limiter le défilement. N'affecte pas le formulaire inline (display:contents). */
.nyrix-cod-modal .nyrix-cod { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 1.1rem 1.25rem; gap: 0.55rem; }
.nyrix-cod-modal .nyrix-cod-body { display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 4px; }
.nyrix-cod-modal .nyrix-cod-foot { display: flex; flex-direction: column; gap: 0.4rem; flex: 0 0 auto; padding-top: 10px; }
.nyrix-cod-modal .nyrix-cod-summary { margin-top: 0; padding-top: 0.5rem; }
.nyrix-cod-close { position: absolute; top: 6px; right: 10px; background: none; border: none; color: #C9CCD1; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }

/* RTL (arabe) : body.rtl côté thème, html[dir=rtl] côté landing carbone. */
body.rtl .nyrix-cod, html[dir="rtl"] .nyrix-cod { text-align: right; }
html[dir="rtl"] .nyrix-cod-close, body.rtl .nyrix-cod-close { right: auto; left: 10px; }

/* (Le comportement corps-défilant + footer-épinglé s'applique désormais à TOUTES
   les tailles via les règles .nyrix-cod-modal ci-dessus — plus de @media dédié.) */