/* payment.steps.css
   Extracted from inline <style> in payment.html for stepper, recap, modals, and upload UI.
   Tombstone: removed inline styles in payment.html head.
*/

body { background: #f6faf6; }

/* small layout header row for step 1 */
.payment-head-row{
  max-width: var(--max-width, 1140px);
  margin: 110px auto 0;
  padding: 0 20px;
  display:grid;
  grid-template-columns:1fr 380px;
  gap:32px;
  align-items:flex-end;
  box-sizing:border-box;
}
.payment-head-row .section-title{
  margin-bottom:8px;
}
@media(max-width:980px){
  .payment-head-row{
    grid-template-columns:1fr 1fr;
    margin-top:96px;
    gap:12px;
    padding:0 12px;
  }
}
@media(max-width:600px){
  .payment-head-row{
    grid-template-columns:1fr 1fr;
    margin-top:88px;
  }
  .payment-head-row .section-title{
    font-size:1rem;
  }
}

/* Visually hidden but accessible (for inner headings we keep for semantics) */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ── Step indicator ── */
.steps-bar {
  max-width: 680px;
  margin: 100px auto 0;
  display: flex;
  align-items: center;
  padding: 0 1.25rem;
  gap: 0;
}
.step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}
.step-dot:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #d4f1d4;
  z-index: 0;
}
.step-dot.done::after { background: #7DA27E; }
.step-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
  background: #eef6ee; color: #7DA27E;
  border: 2px solid #d4f1d4;
  position: relative; z-index: 1;
  transition: all .25s;
}
.step-dot.active .step-num {
  background: #7DA27E;
  color: #fff;
  border-color: #7DA27E;
  box-shadow: 0 4px 12px rgba(125,162,126,.3);
}
.step-dot.done .step-num { background: #5fa35f; color: #fff; border-color: #5fa35f; }
.step-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #7DA27E;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.step-dot.active .step-label { color: #2c3e50; }

/* ── Steps container ── */
.payment-step { display: none; }
.payment-step.active { display: block; }

/* ── Recap step layout ── */
.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.recap-card {
  background: #fff;
  border: 1px solid #eef6ee;
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
}
.recap-card h4 {
  color: #7DA27E;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 0 0 .9rem;
  font-weight: 800;
}
.recap-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid #f0f6f0;
}
.recap-item:last-child { border-bottom: none; }
.recap-item img {
  width: 52px;
  height: 44px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.recap-item-name { font-weight: 700; color: #2c3e50; font-size: .95rem; }
.recap-item-price { margin-left: auto; font-weight: 800; color: #5fa35f; }

.recap-addr-line { font-size: .95rem; color: #50575e; line-height: 1.55; }
.recap-addr-line strong { color: #2c3e50; }

.totals-line {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: .95rem;
  color: #50575e;
}
.totals-line.grand {
  font-weight: 800;
  font-size: 1.1rem;
  color: #2c3e50;
  border-top: 2px solid #eef6ee;
  padding-top: 10px;
  margin-top: 4px;
}

/* ── Action buttons on recap ── */
.recap-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn-facture,
.btn-paiement {
  flex: 1;
  padding: 14px 20px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all .2s;
}
.btn-facture {
  background: #fff;
  color: #5fa35f;
  border: 2px solid #d4f1d4;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}
.btn-facture:hover { background: #f4fff4; transform: translateY(-2px); }
.btn-paiement {
  background: linear-gradient(135deg, #5fa35f, #4a824b);
  color: #fff;
  box-shadow: 0 8px 20px rgba(95,163,95,.25);
}
.btn-paiement:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(95,163,95,.35); }

/* ── Payment modal overlay ── */
.payment-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.payment-modal-overlay.open { display: flex; }
.payment-modal {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  animation: slideUp .28s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.payment-modal h3 {
  color: #2c3e50;
  font-size: 1.2rem;
  margin: 0 0 1.25rem;
  font-weight: 800;
}
.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #7DA27E;
}

/* ── Invoice modal ── */
.invoice-modal {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  animation: slideUp .28s ease;
}
.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.invoice-logo {
  font-size: 1.1rem;
  font-weight: 800;
  color: #2c3e50;
}
.invoice-meta { font-size: .85rem; color: #808080; text-align: right; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.invoice-table th {
  background: #f8fef8;
  color: #5fa35f;
  text-align: left;
  padding: 8px 10px;
}
.invoice-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  color: #2c3e50;
}
.invoice-total-row td { font-weight: 800; background: #f4fff4; }
.invoice-print-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.25rem;
  width: 100%;
  padding: 12px;
  background: #5fa35f;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  justify-content: center;
}

/* ── Upload dropzone ── */
.upload-dropzone {
  border: 2px dashed #d4f1d4;
  padding: 24px;
  border-radius: 14px;
  text-align: center;
  background: #fafdfa;
  transition: all .2s;
}

@media (max-width: 680px) {
  .recap-grid { grid-template-columns: 1fr; }
  .recap-actions { flex-direction: column; }
  .steps-bar { margin-top: 88px; }
}

/* Ensure on step 1 the delivery form and recap sidebar are displayed side-by-side
   on wider viewports while preserving mobile stacking. This explicitly scopes the
   grid to the first step to avoid affecting other pages. */
.payment-step#step-1 {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  max-width: var(--max-width, 1140px);
  margin: 40px auto 0;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Make sure the form occupies the left column and the recap uses the right column */
.payment-step#step-1 .payment-form {
  grid-column: 1 / 2;
  min-width: 0;
}

.payment-step#step-1 .order-sidebar {
  grid-column: 2 / 3;
  position: sticky;
  top: 110px;
}

/* Slight spacing tweak for the header row when step-1 grid is applied */
.payment-step#step-1 .payment-head-row {
  display: contents; /* let the step-1 grid control visual columns */
}

/* Responsive fallback: on small screens stack the form above the recap (unchanged behavior) */
@media (max-width: 980px) {
  .payment-step#step-1 {
    grid-template-columns: 1fr;
    margin-top: 96px;
    padding: 0 12px;
    gap: 12px;
  }

  .payment-step#step-1 .order-sidebar {
    position: static;
    top: auto;
  }
}