/* ===================================================================
   PDP · INLINE CHECKOUT — feuille unique (scopée, sans doublons)
   S'applique uniquement sur la fiche produit : body.mhgn-inline-checkout-on-pdp
   =================================================================== */

/* ---------- Variables (change seulement ces lignes pour la charte) ---------- */
.mhgn-inline-checkout-on-pdp{
  --mhgn-surface: #ffffff;              /* fond du “carton” */
  --mhgn-border: rgba(0,0,0,.08);       /* bordure douce */
  --mhgn-shadow: 0 6px 18px rgba(0,0,0,.06);
  --mhgn-text: #111827;                 /* texte principal */
  --mhgn-muted: #f3f4f6;                /* gris clair */

  --mhgn-ring: rgba(59,130,246,.16);    /* anneau focus inputs */

  --mhgn-primary: #ff7a1a;              /* bouton / accents */
  --mhgn-primary-700: #e56d17;          /* hover bouton */
  --mhgn-primary-ring: rgba(255,122,26,.28);
  --mhgn-success: #16a34a;              /* vert discret (prix/infos) */
}

/* ---------- Conteneur (le “carton” du formulaire) ---------- */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout{
  position: relative;
  background: var(--mhgn-surface);
  border: 1px solid var(--mhgn-border);
  border-radius: 14px;
  box-shadow: var(--mhgn-shadow);
  color: var(--mhgn-text);
  padding: 16px;
  margin: 16px 12px 96px;               /* bottom protégé (bulle WhatsApp/bottom-nav) */
  overflow: hidden;                      /* rien ne déborde visuellement */
}

/* Rythme interne cohérent (évite les marges qui “cassent” le carton) */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout > *{
  margin-left: 0; margin-right: 0;
}
.mhgn-inline-checkout-on-pdp .form-row{ margin: 8px 0 !important; }

/* ---------- En-tête / Intro ---------- */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__intro{ margin-bottom: 12px; }

.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__eyebrow{
  display:inline-block;
  font: 700 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
  color: var(--mhgn-text);
  margin-bottom: 8px;
}

.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__title{
  font: 700 16px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  margin: 6px 0 4px;
}

.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__hint{
  font-size: 13px; opacity:.8; margin: 0 0 6px;
}

/* Petit chevron animé indiquant le formulaire en dessous (optionnel) */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__arrow{
  width: 100%; height: 12px; position: relative; margin: 2px 0 4px;
}
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__arrow::after{
  content: "⌄";
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 18px; line-height: 1; opacity: .55;
  animation: mhgnBounce 1.1s ease-in-out infinite;
}
@keyframes mhgnBounce{
  0%,100%{ transform: translate(-50%,0); opacity:.55; }
  50%{ transform: translate(-50%,4px); opacity:.9; }
}

/* ---------- Callout d’avertissement (si utilisé) ---------- */
.mhgn-inline-checkout-on-pdp .mhgn-callout{
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--mhgn-primary);
  background: #fff7ef;
  border: 1px solid #ffe2cc;
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 12px;
  box-shadow: 0 6px 14px rgba(255,122,26,.08);
}

/* ---------- Options d’expédition ---------- */
.mhgn-inline-checkout-on-pdp .mhgn-ship{ margin-bottom: 12px; }
.mhgn-inline-checkout-on-pdp .mhgn-ship__title{
  font-weight: 700; font-size: 14px; margin: 0 0 8px;
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt{
  display: block;
  border: 1px solid var(--mhgn-border);
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt input[type="radio"]{
  accent-color: var(--mhgn-primary);
  transform: translateY(1px);
  margin-right: 10px;
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__label{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__name{ font-weight: 600; }
.mhgn-inline-checkout-on-pdp .mhgn-ship__price{ font-weight: 700; color: var(--mhgn-success); }

/* ---------- Champs client (billing/shipping) ---------- */
.mhgn-inline-checkout-on-pdp #customer_details{
  margin-top: 10px;
  display: grid; gap: 12px;
}
.mhgn-inline-checkout-on-pdp input[type="text"],
.mhgn-inline-checkout-on-pdp input[type="email"],
.mhgn-inline-checkout-on-pdp input[type="tel"],
.mhgn-inline-checkout-on-pdp input[type="password"],
.mhgn-inline-checkout-on-pdp textarea,
.mhgn-inline-checkout-on-pdp select{
  width: 100%;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 15px;
  line-height: 1.25;
}
.mhgn-inline-checkout-on-pdp input:focus,
.mhgn-inline-checkout-on-pdp select:focus,
.mhgn-inline-checkout-on-pdp textarea:focus{
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px var(--mhgn-ring);
}

/* Accessibilité pour .screen-reader-text si présent */
.mhgn-inline-checkout-on-pdp .screen-reader-text{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Disponibilité sous 24h (checkbox) ---------- */
.mhgn-inline-checkout-on-pdp .mhgn-availability{
  margin: 10px 0 12px; font-size: 13px;
}
.mhgn-inline-checkout-on-pdp .mhgn-availability input[type="checkbox"]{
  accent-color: var(--mhgn-primary);
  width: 18px; height: 18px; margin-right: 8px; transform: translateY(2px);
}

/* ---------- Paiement (sans review-order) ---------- */
.mhgn-inline-checkout-on-pdp #payment{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,.08);
}
/* Tu forces COD : on masque l’éventuelle liste de méthodes si elle apparaît */
.mhgn-inline-checkout-on-pdp #payment .payment_methods{ display:none; }

/* CGV / politiques (si actives) */
.mhgn-inline-checkout-on-pdp #payment .woocommerce-terms-and-conditions-wrapper{
  display: grid; gap: 8px; margin: 0 0 8px;
}

/* ---------- Bouton “Commander” ---------- */
.mhgn-inline-checkout-on-pdp .place-order{ margin-top: 10px; padding: 0; }
.mhgn-inline-checkout-on-pdp #place_order{
  width: 100%;
  display: inline-block;
  background: var(--mhgn-primary);
  border: 1px solid var(--mhgn-primary-700);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 6px 14px var(--mhgn-primary-ring);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.mhgn-inline-checkout-on-pdp #place_order:hover{ background: var(--mhgn-primary-700); }
.mhgn-inline-checkout-on-pdp #place_order:active{
  transform: translateY(1px);
  box-shadow: 0 3px 8px var(--mhgn-primary-ring);
}
.mhgn-inline-checkout-on-pdp #place_order:focus-visible{
  outline: 0; box-shadow: 0 0 0 4px var(--mhgn-primary-ring);
}

/* ---------- Responsive ---------- */
@media (min-width: 768px){
  .mhgn-inline-checkout-on-pdp .mhgn-inline-checkout{
    padding: 16px;
    margin: 16px 16px 104px;
  }
}

/* ---------- Mode sombre ---------- */
@media (prefers-color-scheme: dark){
  .mhgn-inline-checkout-on-pdp{
    --mhgn-surface: #101114;
    --mhgn-border: rgba(255,255,255,.08);
    --mhgn-shadow: 0 6px 18px rgba(0,0,0,.35);
    --mhgn-text: #f3f4f6;
  }
  .mhgn-inline-checkout-on-pdp input,
  .mhgn-inline-checkout-on-pdp select,
  .mhgn-inline-checkout-on-pdp textarea{
    background: #0b0c0f; color: #e9e9e9; border-color: rgba(255,255,255,.12);
  }
  .mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__eyebrow{
    background: rgba(255,255,255,.08); color:#f3f4f6;
  }
  .mhgn-inline-checkout-on-pdp .mhgn-callout{
    background: rgba(255,122,26,.08); border-color: rgba(255,122,26,.28); color: #ffd0ae;
  }
}

/* ===== 1) Carte “Livraison gratuite” : look pro + état sélectionné ===== */
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--mhgn-border);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
}

/* On masque le radio natif (il reste accessible via SR) */
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt input[type="radio"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Bulle radio custom à gauche */
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt::before{
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  background: #fff;
  box-sizing: border-box;
}

/* État “sélectionné” (fonctionne via :has si dispo OU via .is-selected si tu l’ajoutes) */
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt:has(input:checked),
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt.is-selected{
  border-color: rgba(34,197,94,.55);
  box-shadow:
    0 0 0 4px rgba(34,197,94,.10),
    0 2px 12px rgba(0,0,0,.05);
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt:has(input:checked)::before,
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt.is-selected::before{
  border-color: #22c55e;
  background:
    radial-gradient(circle at 50% 50%, #22c55e 48%, transparent 50%) #fff;
}

/* Libellé + prix : alignement propre + pilule de prix verte */
.mhgn-inline-checkout-on-pdp .mhgn-ship__label{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%;
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__name{ font-weight: 600; }
.mhgn-inline-checkout-on-pdp .mhgn-ship__price{
  font-weight: 700; color: #16a34a;
  background: #eaf9ef;
  border: 1px solid rgba(22,163,74,.15);
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1;
}

/* ===== Checkbox “disponible 24h” — propre, native ===== */
.mhgn-inline-checkout-on-pdp .mhgn-availability label{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #111827;
}
.mhgn-inline-checkout-on-pdp .mhgn-availability input[type="checkbox"]{
  appearance: auto;              /* on revient au natif (meilleure accessibilité) */
  width: 18px; height: 18px;
  border-radius: 4px;             /* certains UA ignorent, OK */
  accent-color: var(--mhgn-primary);
  margin-top: 2px;
}



/* ===== Icônes dans les champs (nom, adresse, téléphone) ===== */
/* Style de base : on place une icône en background et on augmente le padding-left */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[type="text"],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[type="tel"]{
  background-repeat: no-repeat;
  background-position: 12px 50%;
  background-size: 18px 18px;
  padding-left: 40px; /* laisse la place à l'icône */
}

/* — Nom & Prénom — */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="name" i],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="nom" i]{
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%239aa1ab' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 12c2.761 0 5-2.239 5-5s-2.239-5-5-5-5 2.239-5 5 2.239 5 5 5zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5z'/%3E%3C/svg%3E");
}

/* — Téléphone — */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[type="tel"],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="phone" i],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="t%C3%A9l" i],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="tel" i]{
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%239aa1ab' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.85 22 2 13.15 2 2a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z'/%3E%3C/svg%3E");
}

/* — Adresse / Quartier — */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="address" i],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="adresse" i],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input[name*="quartier" i]{
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%239aa1ab' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 110-5 2.5 2.5 0 010 5z'/%3E%3C/svg%3E");
}

/* Améliore le contraste des placeholders */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout input::placeholder{
  color: #9aa1ab;
}

/* (Conserve le style de la carte livraison tel que tu l'aimes)
   On renforce juste la classe .is-selected ajoutée par le JS */
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt.is-selected{
  border-color: rgba(34,197,94,.55);
  box-shadow:
    0 0 0 4px rgba(34,197,94,.10),
    0 2px 12px rgba(0,0,0,.05);
}
.mhgn-inline-checkout-on-pdp .mhgn-ship__opt.is-selected::before{
  border-color: #22c55e;
  background:
    radial-gradient(circle at 50% 50%, #22c55e 48%, transparent 50%) #fff;
}


/* ===== Bouton Commander — version sobre, sans animation ===== */
.mhgn-inline-checkout-on-pdp #place_order{
  background: var(--mhgn-primary);
  border: 1px solid var(--mhgn-primary-700);
  color: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px; font-weight: 700;
  box-shadow: 0 6px 14px var(--mhgn-primary-ring);
  transition: background .2s ease, box-shadow .2s ease;  /* no motion gimmicks */
}
.mhgn-inline-checkout-on-pdp #place_order:hover{
  background: var(--mhgn-primary-700);
}
.mhgn-inline-checkout-on-pdp #place_order:active{
  transform: translateY(0);   /* neutral */
  box-shadow: 0 4px 10px var(--mhgn-primary-ring);
}
.mhgn-inline-checkout-on-pdp #place_order:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 4px var(--mhgn-primary-ring);
}
.mhgn-inline-checkout-on-pdp #place_order:disabled{
  opacity: .6;
  cursor: not-allowed;
  box-shadow: none;
}

.mhgn-inline-checkout-on-pdp #payment .wc_payment_methods { display:none !important; }