/* =====================================================
   CHECKOUT POPUP — Brod'Art Studio (CLEAN / STABLE)
   - Scroll interne dans .checkout-body
   - Footer actions toujours visible (bouton jamais perdu)
   ===================================================== */

/* Lock scroll page (JS ajoute body.checkout-open) */
html.checkout-open,
body.checkout-open{
  overflow: hidden !important;
  height: 100vh !important;
}

/* Overlay */
.checkout-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}

.checkout-modal {
  max-height: 90vh;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
}

/* Modal wrapper */
#checkout-modal,
.checkout-modal{
  width: 100%;
  max-width: 560px;
}

/* Box */
.checkout-box{
  position: relative;
  width: 100%;
  max-height: calc(90vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  color: #222;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}

/* Content wrapper */
#checkout-content{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Title / subtitle */
.checkout-box h2{
  margin: 18px 18px 8px;
  text-align: center;
  font-size: 1.45rem;
  font-weight: 800;
  color: #111;
}
.checkout-sub{
  margin: 0 18px 14px;
  text-align: center;
  color: #555;
  font-size: .95rem;
}

/* Close (X) */
.checkout-close{
  position: absolute;
  top: 10px;
  right: 12px;

  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;

  background: rgba(0,0,0,0.06);
  color: #111;

  font-size: 20px;
  line-height: 36px;
  cursor: pointer;

  display: grid;
  place-items: center;
}
.checkout-close:hover{ background: rgba(0,0,0,0.10); }

/* =====================================================
   LAYOUT: form = colonne, scroll dans .checkout-body
   ===================================================== */
.checkout-form{
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;   /* ✅ pas de scroll ici */
  padding: 0;
}

/* ✅ zone scrollable */
.checkout-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 18px 18px;

  /* scrollbar Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}

/* scrollbar WebKit */
.checkout-body::-webkit-scrollbar{ width: 8px; }
.checkout-body::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
}

/* Footer actions (toujours visible) */
.checkout-actions{
  flex: 0 0 auto;
  background: #fff;
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
  z-index: 5;
}

/* =====================================================
   FORM UI
   ===================================================== */
.checkout-form label{
  display: grid;
  gap: 6px;
  color: #333;
  font-size: .85rem;
}

.checkout-form input,
.checkout-form textarea,
.checkout-form select{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #111;
  font-size: .95rem;
}

.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus{
  outline: none;
  border-color: #6da9ff;
  box-shadow: 0 0 0 2px rgba(80,140,255,0.25);
}

/* Grid */
.checkout-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.checkout-grid .full{ grid-column: 1 / -1; }

/* Address block (dans la grille) */
.checkout-address-wrap{ grid-column: 1 / -1; }
.checkout-address-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.checkout-address-grid .full{ grid-column: 1 / -1; }

/* Summary */
.checkout-summary{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.checkout-shipping{
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.04);
  color: #333;
  font-size: .9rem;
}
.checkout-shipping-title{
  font-weight: 800;
  margin: 0 0 6px;
}
.checkout-shipping-line{ margin: 4px 0; }

.checkout-total-line{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.06);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
}
.checkout-total-line strong{ white-space: nowrap; }

/* Buttons */
.checkout-btn{
  appearance: none;
  border: none;
  cursor: pointer;
}

.checkout-btn.main{
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
}
.checkout-btn.main:hover{ background: #1e5ed6; }
.checkout-btn.main:disabled{
  opacity: .65;
  cursor: not-allowed;
}

/* Status */
#checkout-status{ margin-top: 10px; }

/* Validation errors */
.checkout-form .is-invalid{
  border-color: #c62828 !important;
  box-shadow: 0 0 0 2px rgba(198,40,40,0.18) !important;
}
.checkout-form .field-error{
  margin-top: 4px;
  color: #c62828;
  font-size: .82rem;
}

/* Loading (anti double-clic) */
.checkout-btn.is-loading{
  position: relative;
  padding-right: 52px;
}
.checkout-btn.is-loading::after{
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  border-top-color: rgba(255,255,255,1);
  animation: checkoutSpin .8s linear infinite;
}
@keyframes checkoutSpin{ to{ transform: rotate(360deg); } }

/* Success mode */
.checkout-success{
  padding: 26px 18px;
  text-align: center;
}
.success-icon{
  font-size: 56px;
  margin-bottom: 10px;
  color: #22c55e;
}
.success-text{ color: #333; }
.success-total-line{
  margin-top: 14px;
  font-size: 1.15rem;
  font-weight: 900;
}
.checkout-btn.success{
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 12px;
  background: #2978ff;
  color: #fff;
  font-weight: 800;
}
.checkout-btn.success:hover{ background: #1e5ed6; }

/* Responsive */
@media (max-width: 520px){
  .checkout-body{ padding: 0 14px 14px; }
  .checkout-actions{ padding: 12px 14px 14px; }

  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-grid .full{ grid-column: 1 / -1; }

  .checkout-address-grid{ grid-template-columns: 1fr; }
  .checkout-address-grid .full{ grid-column: 1 / -1; }
}