/* ════════════════════════════════════════════════════════════
   PAGE CHECKOUT MULTI-ÉTAPES — Style Boturea
   ════════════════════════════════════════════════════════════ */

/* ─── Reset Astra ────────────────────────────────────────────── */
.woocommerce-checkout .site-content,
.woocommerce-checkout #primary,
.woocommerce-checkout #main,
.woocommerce-checkout .entry-content,
.woocommerce-checkout .ast-container {
  background: var(--gray) !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-checkout .entry-title,
.woocommerce-checkout .ast-breadcrumbs-wrapper { display: none !important; }

/* ─── Wrapper ────────────────────────────────────────────────── */
.woocommerce-checkout .woocommerce {
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 32px 24px 80px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.woocommerce-checkout .woocommerce::before {
  content: 'Commander';
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--weight-bold);
  color: var(--black);
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}

/* ─── Bloc code promo ────────────────────────────────────────── */
.woocommerce-checkout .woocommerce-form-coupon-toggle {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 14px 20px !important;
  margin-bottom: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: var(--muted) !important;
}

/* Masquer le style "info" bleu de WooCommerce */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 0.875rem !important;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  display: none !important;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon {
  color: var(--g) !important;
  font-weight: var(--weight-semibold) !important;
  text-decoration: none !important;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon:hover {
  color: var(--gold) !important;
}

/* Formulaire coupon — display géré par WooCommerce JS, pas de !important sur display */
.woocommerce-checkout .checkout_coupon {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 20px !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* Quand WooCommerce affiche le formulaire (il retire style="display:none") */
.woocommerce-checkout .checkout_coupon:not([style*="display: none"]) {
  display: flex;
}

.woocommerce-checkout .checkout_coupon p {
  margin: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.woocommerce-checkout .checkout_coupon .form-row-first {
  flex: 1 1 160px !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-checkout .checkout_coupon .form-row-last {
  flex: 0 0 auto !important;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-checkout .checkout_coupon input[name="coupon_code"] {
  width: 100% !important;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.875rem !important;
  color: var(--black) !important;
  background: var(--gray) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.woocommerce-checkout .checkout_coupon input[name="coupon_code"]:focus {
  border-color: var(--g) !important;
  background: var(--white) !important;
}

.woocommerce-checkout .checkout_coupon input[name="coupon_code"]::placeholder {
  color: var(--muted) !important;
}

.woocommerce-checkout .checkout_coupon input[type="submit"],
.woocommerce-checkout .checkout_coupon .button {
  height: 44px !important;
  padding: 0 16px !important;
  background: var(--g) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.82rem !important;
  font-weight: var(--weight-semibold) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: background 0.2s ease !important;
  width: auto !important;
  display: inline-block !important;
}

.woocommerce-checkout .checkout_coupon input[type="submit"]:hover,
.woocommerce-checkout .checkout_coupon .button:hover {
  background: var(--gold) !important;
}

/* custDetails caché par JS (pas par CSS pour ne pas bloquer la lecture des éléments) */
.woocommerce-checkout .col2-set { display: none !important; }

/* Override WooCommerce float par défaut sur order_review */
.woocommerce-checkout #order_review,
.woocommerce-page #order_review {
  float: none !important;
  width: 100% !important;
  position: static !important;
}

/* Heading masqué au départ, affiché par JS dans .bco-body */
.woocommerce-checkout #order_review_heading { display: none; }

/* ─── Steps wrapper ──────────────────────────────────────────── */
.bco-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─── Étape ──────────────────────────────────────────────────── */
.bco-step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.bco-step--open {
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  border-color: rgba(45,74,53,0.2);
}

.bco-step--locked {
  opacity: 0.5;
  pointer-events: none;
}

.bco-step--done { opacity: 1; pointer-events: auto; }

/* ─── Header de l'étape ──────────────────────────────────────── */
.bco-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--gray);
}

.bco-step--open .bco-header { background: var(--white); }
.bco-step--done .bco-header { background: rgba(45,74,53,0.04); }

.bco-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  background: var(--border);
  color: var(--muted);
}

.bco-step--open .bco-num { background: var(--g); color: var(--white); }
.bco-step--done .bco-num { background: var(--g); color: var(--white); font-size: 0.9rem; }

.bco-title {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  color: var(--black);
  flex: 1;
  letter-spacing: -0.01em;
}

/* Bouton Modifier */
.bco-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  color: var(--g);
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.bco-edit:hover { background: var(--g); color: var(--white); border-color: var(--g); }

/* ─── Résumé (quand étape fermée) ────────────────────────────── */
.bco-summary {
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--muted);
  background: rgba(45,74,53,0.03);
  border-bottom: 1px solid var(--border);
}

/* ─── Corps de l'étape ───────────────────────────────────────── */
.bco-body {
  padding: 28px 24px;
}

/* Sections billing / shipping dans le body */
.bco-body .woocommerce-billing-fields,
.bco-body .woocommerce-shipping-fields,
.bco-body .woocommerce-additional-fields {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: none !important;
}

.bco-body .woocommerce-billing-fields h3,
.bco-body .woocommerce-shipping-fields h3,
.bco-body .woocommerce-additional-fields h3 {
  display: none !important;
}

/* Grille des champs 2 colonnes */
.bco-body .woocommerce-billing-fields__field-wrapper,
.bco-body .woocommerce-shipping-fields__field-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px 16px !important;
}

.bco-body .form-row-wide { grid-column: 1 / -1 !important; }

/* Labels */
.bco-body label {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--black) !important;
  margin-bottom: 6px !important;
}

.bco-body label .required { color: var(--gold) !important; }

/* Inputs */
.bco-body .input-text,
.bco-body input[type="text"],
.bco-body input[type="email"],
.bco-body input[type="tel"],
.bco-body input[type="password"],
.bco-body select,
.bco-body textarea {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--black) !important;
  background: var(--gray) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.bco-body textarea { height: 100px !important; padding: 12px 14px !important; }

.bco-body input:focus,
.bco-body select:focus,
.bco-body textarea:focus {
  border-color: var(--g) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px rgba(45,74,53,0.08) !important;
}

.bco-body select {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  background-color: var(--gray) !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* ─── Toggle adresse livraison ───────────────────────────────── */
.bco-toggle-wrap { margin-bottom: 16px; }

.bco-toggle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--gray);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
  color: var(--black);
  transition: border-color 0.18s ease;
  user-select: none;
}

.bco-toggle:hover { border-color: var(--g); }

.bco-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--g);
  flex-shrink: 0;
  cursor: pointer;
  margin-right: 14px; /* espacement explicite entre case et texte */
}

.bco-ship-zone { margin-top: 8px; }

/* Champs manuels si WooCommerce ne génère pas les champs livraison */
.bco-manual-ship { display: flex; flex-direction: column; gap: 14px; }
.bco-ship-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bco-ship-field { display: flex; flex-direction: column; gap: 6px; }
.bco-ship-field label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: var(--weight-semibold);
  color: var(--black);
}
.bco-ship-field input {
  height: 46px !important;
  padding: 0 14px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  background: var(--gray) !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.bco-ship-field input:focus {
  border-color: var(--g) !important;
  background: var(--white) !important;
}

/* ─── Bouton Continuer ───────────────────────────────────────── */
.bco-btn-continue,
.bco-btn {
  margin-top: 32px;
  width: 100%;
  height: 50px;
  background: var(--g);
  color: var(--white);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: background 0.2s ease, transform 0.15s ease;
}

.bco-btn-continue:hover { background: var(--gold); transform: translateY(-1px); }

/* ─── Étape 3 : résumé + paiement ───────────────────────────── */
#order_review_heading {
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--muted) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Table résumé commande */
#order_review table.shop_table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--font-body) !important;
  margin-bottom: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}

#order_review table thead th {
  padding: 12px 18px !important;
  font-size: 0.68rem !important;
  font-weight: var(--weight-semibold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  color: var(--muted) !important;
  background: var(--gray) !important;
  border-bottom: 1px solid var(--border) !important;
}

#order_review table tbody tr,
#order_review table tfoot tr { border-bottom: 1px solid var(--border) !important; }
#order_review table tbody tr:last-child { border-bottom: none !important; }
#order_review table td, #order_review table th {
  padding: 13px 18px !important;
  font-size: 0.875rem !important;
  vertical-align: middle !important;
}
#order_review table .product-name { font-weight: var(--weight-medium) !important; color: var(--black) !important; }
#order_review table .product-total { font-weight: var(--weight-semibold) !important; text-align: right !important; }
#order_review table tfoot th { color: var(--muted) !important; font-size: 0.82rem !important; }
#order_review table tfoot td { font-weight: var(--weight-semibold) !important; text-align: right !important; }
#order_review table tfoot tr.order-total th,
#order_review table tfoot tr.order-total td {
  font-size: 1rem !important;
  font-weight: var(--weight-bold) !important;
  color: var(--black) !important;
  background: rgba(45,74,53,0.04) !important;
  padding: 15px 18px !important;
}

/* Paiement */
#payment {
  background: var(--white) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  margin-top: 16px !important;
}

#payment ul.payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#payment ul.payment_methods li {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  font-family: var(--font-body) !important;
}

#payment ul.payment_methods li:last-child { border-bottom: none !important; }

#payment ul.payment_methods li label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.875rem !important;
  font-weight: var(--weight-medium) !important;
  color: var(--black) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

#payment ul.payment_methods input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--g) !important;
  flex-shrink: 0 !important;
}

#payment .payment_box {
  background: rgba(45,74,53,0.04) !important;
  padding: 12px 20px !important;
  font-size: 0.82rem !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  border-top: 1px solid var(--border) !important;
}

#payment .place-order { padding: 16px 20px !important; }

#payment #place_order {
  width: 100% !important;
  height: 54px !important;
  background: var(--g) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  font-weight: var(--weight-bold) !important;
  cursor: pointer !important;
  transition: background 0.22s ease, transform 0.15s ease !important;
}

#payment #place_order:hover { background: var(--gold) !important; transform: translateY(-1px) !important; }

.woocommerce-privacy-policy-text {
  font-size: 0.72rem !important;
  color: var(--muted) !important;
  text-align: center !important;
  margin-top: 10px !important;
  font-family: var(--font-body) !important;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .woocommerce-checkout .woocommerce { padding: 16px 14px 60px !important; }
  .bco-body .woocommerce-billing-fields__field-wrapper,
  .bco-body .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr !important; }
}