/* ===================================================================
   PDP · INLINE CHECKOUT — CLEAN (premium, mobile-first)
   Scope: uniquement sur la fiche produit : body.mhgn-inline-checkout-on-pdp
   =================================================================== */

.mhgn-inline-checkout-on-pdp{
  color-scheme: light;

  --mhgn-bg: #ffffff;
  --mhgn-text: #0f172a;
  --mhgn-sub: rgba(15, 23, 42, .62);
  --mhgn-border: rgba(15, 23, 42, .10);

  --mhgn-primary: #4C2D95;
  --mhgn-primary-700: #3B2378;
  --mhgn-primary-soft: rgba(76,45,149,.10);

  --mhgn-success: #16a34a;
  --mhgn-success-soft: rgba(22,163,74,.12);

  --mhgn-shadow-1: 0 18px 40px rgba(15,23,42,.10);
  --mhgn-shadow-2: 0 2px 10px rgba(15,23,42,.06);

  --mhgn-radius: 16px;
}



/* =========================================================
   1) Conteneur (fond blanc, premium)
   ========================================================= */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout{
  background: var(--mhgn-bg);
  color: var(--mhgn-text);

  width: 100%;
  max-width: 560px; /* 🔥 élargissement propre */
  margin: 14px auto 0;

  border: 1px solid var(--mhgn-border);
  border-radius: var(--mhgn-radius);
  box-shadow: var(--mhgn-shadow-1), var(--mhgn-shadow-2);

  padding: 16px;
  overflow: hidden;
}

@media (max-width: 480px){
  .mhgn-inline-checkout-on-pdp .mhgn-inline-checkout{
    max-width: 100%;
  }
}

/* =========================================================
   2) Intro : message + titres de section
   ========================================================= */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__intro{
  margin-bottom:8px;
}


/* COMMANDER MAINTENANT */

.mhgn-inline-checkout__titlebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 🔥 un peu plus d’air */

  background: #0f0f0f;
  color: #fff;
  font-size: 14px; /* 🔥 léger boost lisibilité */
  font-weight: 700;

  padding: 16px; /* 🔥 HAUTEUR AUGMENTÉE */

  margin:-16px -16px 16px -16px;

  border-radius: 12px 12px 0 0;
}

.mhgn-inline-checkout__titlebar .lock-icon {
  font-size: 12px;
}


/* Titres de section — (Méthode de livraison / Informations de livraison) */
.mhgn-inline-checkout-on-pdp .mhgn-section-title{
  margin: 12px 0 8px; /* un peu plus compact */
  padding-left: 10px;

  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;

  color: var(--mhgn-text);
}

/* (optionnel) hook pour variations futures */
.mhgn-inline-checkout-on-pdp .mhgn-title-delivery{}



/* =========================================================
   4) Notices Woo / variations (si affichées)
   ========================================================= */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__notice{
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(239,68,68,.22);
  background: rgba(239,68,68,.06);
  color: #991b1b;
  font-size: 13px;
  font-weight: 800;
}

/* =========================================================
   5) Champs — strips + input-group fusionné (source unique)
   ========================================================= */

/* Espace après intro */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__customer{
  margin-top:6px;
}

/* Labels = strips */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details .form-row label{
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  margin:0 0 4px !important;
  padding: 6px 10px;

  border-radius: 999px;
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.08);

  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.80);

  width: fit-content;
  max-width: 100%;
}

.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details .form-row label::before{
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  opacity: .75;
  background: no-repeat center / 16px 16px;
}

/* Icônes strips */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="name" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="prenom" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="first" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="last" i]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="phone" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="tel" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="t%C3%A9l" i]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2A19.8 19.8 0 0 1 3 5.18 2 2 0 0 1 5.11 3h3a2 2 0 0 1 2 1.72c.12.86.31 1.7.57 2.5a2 2 0 0 1-.45 2.11L9.09 10.91a16 16 0 0 0 4 4l1.58-1.14a2 2 0 0 1 2.11-.45c.8.26 1.64.45 2.5.57A2 2 0 0 1 22 16.92z'/></svg>");
}
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="address" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="quartier" i]::before,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details label[for*="city" i]::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 6-9 13-9 13S3 16 3 10a9 9 0 0 1 18 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* Wrapper champs */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details{
  display: grid;
  text-align: left;
  gap:0;
}

/* Chaque rangée */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details .form-row{
  position: relative;
  margin:0 0 10px !important;
}

/* Champs (input-group) */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
input[type="text"],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
input[type="email"],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
input[type="tel"],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
input[type="password"],
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
select,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
textarea{
  width: 100% !important;
  box-sizing: border-box;

  height: 46px !important;
  padding: 12px 12px 12px 58px !important;

  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 12px !important;

  background-color: #fff !important;
  color: var(--mhgn-text) !important;

  font-size: 15px !important;
  line-height: 1.25 !important;

  box-shadow: 0 1px 0 rgba(15,23,42,.02) !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Textarea */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details textarea{
  height: 96px !important;
  resize: vertical;
  padding-top: 12px !important;
}

/* Placeholder */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
input::placeholder,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
textarea::placeholder{
  color: rgba(15,23,42,.38) !important;
}

/* Focus */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
input:focus,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
textarea:focus,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
select:focus{
  outline: none !important;
  border-color: rgba(76,45,149,.55) !important;
  box-shadow: 0 0 0 4px rgba(76,45,149,.14) !important;
}

/* Erreurs Woo */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.woocommerce-invalid input,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.woocommerce-invalid textarea,
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.woocommerce-invalid select{
  border-color: rgba(239,68,68,.60) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important;
}

/* Segment icône fusionné */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details .form-row::before{
  content: "";
  position: absolute;

  left: 1px;
  top: 1px;

  width: 46px;
  height: 44px;

  border-radius: 11px 0 0 11px;
  background-color: rgba(15,23,42,.04);
  box-shadow: inset -1px 0 0 rgba(15,23,42,.10);

  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px 18px;
  background-image: var(--icon-url, none);

  pointer-events: none;
}

.mhgn-inline-checkout-on-pdp 
.mhgn-inline-checkout 
#customer_details .form-row{
  overflow: hidden; /* évite débordement icône */
}

.mhgn-inline-checkout-on-pdp 
.mhgn-inline-checkout 
#customer_details input{
  transition: all .15s ease;
}



.mhgn-inline-checkout-on-pdp .mhgn-offers{
  display:flex;
  gap:10px;
  margin:0 auto;
}

.mhgn-inline-checkout-on-pdp .offer-card{
  flex:1;
  border-radius:12px;
  padding:10px;
  background:#f5f5f5;
  text-align:center;
  border:2px solid transparent;
}

.mhgn-inline-checkout-on-pdp .offer-card.selected{
  border-color:var(--mhgn-success);
  background:rgba(22,163,74,.08);
}
/* Icônes par type (segment) */
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="name" i]),
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="nom" i]){
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5.5 21a6.5 6.5 0 0113 0'/%3E%3C/svg%3E");
}
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[type="tel"]),
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="phone" i]),
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="tel" i]){
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9V21a2 2 0 01-2.18 2A19.8 19.8 0 013 5.18 2 2 0 015 3h4.1a2 2 0 012 1.72c.1.8.3 1.6.6 2.3a2 2 0 01-.45 2.1l-1.8 1.8a16 16 0 006.1 6.1l1.8-1.8a2 2 0 012.1-.45c.7.3 1.5.5 2.3.6A2 2 0 0122 16.9z'/%3E%3C/svg%3E");
}
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="address" i]),
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="adresse" i]),
.mhgn-inline-checkout-on-pdp .mhgn-inline-checkout #customer_details
.form-row:has(input[name*="quartier" i]){
  --icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-7.5 7-12a7 7 0 10-14 0c0 4.5 7 12 7 12z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
}

/* =========================================================
   6) Paiement : on garde CGV, on masque la liste des moyens
   ========================================================= */
.mhgn-inline-checkout-on-pdp #payment{
  margin-top:10px;
  padding-top:10px;
  border-top: 1px dashed rgba(15,23,42,.12);
}

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

/* =========================================================
   7) Bouton Commander — centré + pulsation + loading
   ========================================================= */
.mhgn-inline-checkout-on-pdp .place-order{
  margin-top: 10px;
  display: grid;
  place-items: center;
}

.mhgn-inline-checkout-on-pdp #place_order{
  width: min(420px, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 16px;
  border-radius: 14px;

  background: #1f8f4a;
border: 1px solid #1f8f4a;
  color: #fff;

  font-size: 16px;
  font-weight: 900;

  box-shadow: 0 14px 28px rgba(31,143,74,.22);
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;

  -webkit-tap-highlight-color: transparent;

  /* pulsation douce */
  animation: mhgnPulse 1s ease-in-out infinite;
}

.mhgn-inline-checkout-on-pdp #place_order:hover{
  background: #166534;
}

.mhgn-inline-checkout-on-pdp #place_order:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 10px 20px rgba(31,143,74,.18);
}

.mhgn-inline-checkout-on-pdp #place_order:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(31,143,74,.18), 0 14px 28px rgba(76,45,149,.22);
}

@keyframes mhgnPulse{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(0) scale(1.015); }
}

/* Loading : stop pulse + style stable */
.mhgn-inline-checkout-on-pdp #place_order.is-loading{
  opacity: .85;
  cursor: not-allowed;
  pointer-events: none;

  animation: none !important;
  transform: none !important;
  box-shadow: 0 8px 18px rgba(76,45,149,.18) !important;
}

/* Spinner */
.mhgn-inline-checkout-on-pdp #place_order .mhgn-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,1);
  display: inline-block;
  margin-right: 10px;
  vertical-align: -2px;
  animation: mhgnSpin .8s linear infinite;
}

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

/* Accessibilité */
@media (prefers-reduced-motion: reduce){
  .mhgn-inline-checkout-on-pdp #place_order,
  .mhgn-inline-checkout-on-pdp .mhgn-inline-checkout__shipfree::before,
  .mhgn-inline-checkout-on-pdp #place_order .mhgn-spinner{
    animation: none !important;
  }
}

/* =========================================================
   8) Desktop/tablette : largeur max
   ========================================================= */
@media (min-width: 768px){
  .mhgn-inline-checkout-on-pdp .mhgn-inline-checkout{
    max-width: 620px;
    width: 100%;
    padding: 18px;
    margin: 16px auto 0;
  }
}


/* CONTAINER */
.mhgn-offers{
  margin-top:12px;
}

.mhgn-offers {
  display: flex;
  flex-direction: column; /* 🔥 force empilement vertical */
}


/* TITRE */
.mhgn-offers__label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  white-space: nowrap;
  margin-bottom:12px;

}


/* GRID */
.mhgn-offers__grid {
  display: flex;
  gap: 10px;
}

/* CARD */
.mhgn-offer {
  flex: 1;
  background: #f3f3f3;
  border-radius: 14px;
  padding: 12px;
  text-align: center;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
}

/* SELECTED */
.mhgn-offer.is-selected {
  border-color: #16a34a;
  background: #eafff3;
}

/* QTY */
.mhgn-offer__qty {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 0px;
}

/* PRICE */
.mhgn-offer__price {
  font-size: clamp(16px, 4vw, 20px);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
  white-space:nowrap; /* 🔥 empêche retour ligne */

}

.mhgn-offer__price small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
  margin-top: 2px;
}

/* REDUCTION % */

.mhgn-offer__discount {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #ff5a2c;
  background: rgba(255, 90, 44, 0.1);
  border-radius: 8px;
}

/* UNIT */
.mhgn-offer__unit {
  font-size: 11px;
  color: #666;
  margin-bottom: 6px;
}

/* 🔥 BOOST OFFRE POPULAIRE */
.mhgn-offer.popular {
  transform: scale(1.05);
  z-index: 2;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* PER UNIT */
.mhgn-offer__per {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}

/* BADGE */
.mhgn-offer__badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4500;
  color: #fff;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.mhgn-offers {
  display: flex;
  flex-direction: column; /* 🔥 force empilement vertical */
}