/* ================= Standalone checkout page ================= */
.checkout-header{
  padding:22px 0; border-bottom:1px solid var(--line);
  background:rgba(30,15,43,0.6); backdrop-filter:blur(10px);
}
.checkout-header-inner{ display:flex; align-items:center; justify-content:space-between; }
.checkout-header .brand-name{ font-family:var(--font-label); font-size:1.15rem; letter-spacing:0.18em; }
.checkout-header-actions{ display:flex; align-items:center; gap:18px; }
#langBtn{
  font-family:var(--font-label); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-light); border:1px solid var(--line); background:transparent; padding:8px 14px; border-radius:3px;
  transition:all .3s ease;
}
#langBtn:hover{ border-color:var(--gold); background:rgba(212,175,55,0.10); }
.checkout-back-link{
  font-family:var(--font-label); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-muted); transition:color .3s ease;
}
.checkout-back-link:hover{ color:var(--gold-light); }

/* padding-top clears the fixed site header (.checkout-header uses the same
   `header{ position:fixed }` rule as the main site header, so it's out of
   document flow — content here needs to make room for it itself). */
.checkout-main{ padding:112px 28px 100px; min-height:70vh; }

.checkout-state{
  max-width:520px; margin:0 auto; text-align:center; color:var(--ink-muted);
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.checkout-state .confirm-icon{
  width:60px; height:60px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
.checkout-state h2{ margin:0; }
.checkout-state .order-number-line{ font-family:var(--font-label); color:var(--gold-light); font-variant-numeric:tabular-nums; }
.checkout-state .order-number-line strong{ color:var(--gold); letter-spacing:0.04em; }
.checkout-confirm-actions{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }

.checkout-grid{
  display:grid; grid-template-columns:1.3fr 0.9fr; gap:60px; align-items:start;
  max-width:1080px; margin:0 auto;
}
.checkout-form-col h1{ font-size:clamp(1.8rem, 3vw, 2.4rem); margin:10px 0 30px; }
.checkout-form{ display:flex; flex-direction:column; gap:6px; }
.checkout-form label{
  font-family:var(--font-label); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold); margin-top:14px;
}
.checkout-form input[type="text"], .checkout-form input[type="tel"],
.checkout-form input[type="email"], .checkout-form input[type="password"],
.checkout-form textarea, .checkout-form select{
  background:rgba(255,255,255,0.04); border:1px solid var(--line); border-radius:3px; padding:12px 14px;
  color:var(--ink); font-family:var(--font-body); font-size:16px; resize:vertical;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.checkout-form select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23D4AF37'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23D4AF37' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:left 14px center; background-size:12px;
  padding-inline-start:32px;
}
.checkout-form select option{ background:var(--bg-mid); color:var(--ink); }
.checkout-form input:focus, .checkout-form textarea:focus, .checkout-form select:focus{
  outline:none; border-color:var(--gold);
}
.checkout-form input:-webkit-autofill,
.checkout-form input:-webkit-autofill:hover,
.checkout-form input:-webkit-autofill:focus,
.checkout-form input:autofill{
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0px 1000px #241531 inset;
  box-shadow: 0 0 0px 1000px #241531 inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
.checkout-form .payment-choice{ margin-top:18px; }
.checkout-form .btn{ margin-top:28px; width:100%; justify-content:center; }

.order-summary-col{
  background:linear-gradient(165deg, rgba(74,35,90,0.4), rgba(30,15,43,0.7));
  border:1px solid var(--line); border-radius:6px; padding:30px 26px;
  position:sticky; top:100px;
}
.order-summary-col h2{ font-size:1.2rem; margin-bottom:20px; }
.summary-items{ display:flex; flex-direction:column; gap:16px; margin-bottom:20px; }
.summary-item{ display:flex; align-items:center; gap:14px; }
.summary-item .si-icon{ width:52px; height:52px; flex:none; border-radius:6px; overflow:hidden; background:rgba(0,0,0,0.2); }
.summary-item .si-icon img{ width:100%; height:100%; object-fit:cover; display:block; }
.summary-item .si-info{ flex:1; min-width:0; }
.summary-item .si-name{ font-family:var(--font-display); color:var(--gold-light); font-size:0.95rem; }
.summary-item .si-meta{ color:var(--ink-muted); font-size:0.78rem; margin-top:2px; }
.summary-item .si-total{ font-family:var(--font-label); color:var(--gold-light); font-size:0.85rem; white-space:nowrap; }
.summary-subtotal-row{
  display:flex; justify-content:space-between; font-family:var(--font-label); color:var(--gold-light);
  font-size:1.05rem; padding-top:18px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.summary-shipping-row{
  display:flex; justify-content:space-between; font-family:var(--font-label); color:var(--ink-muted);
  font-size:0.85rem; padding-top:10px; font-variant-numeric:tabular-nums;
}
.summary-total-row{
  display:flex; justify-content:space-between; font-family:var(--font-label); color:var(--gold);
  font-size:1.15rem; padding-top:14px; margin-top:8px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.cod-unavailable-note{ color:#e8a3a3; font-size:0.78rem; line-height:1.6; margin-top:8px; }
.cod-unavailable-note.hidden{ display:none; }
.form-error{ color:#e8a3a3; font-size:0.82rem; min-height:0; margin-top:10px; }
.form-error:empty{ display:none; }
.hidden{ display:none !important; }

/* ---------- Mandatory login-before-checkout state ---------- */
.checkout-auth-state{ text-align:start; align-items:stretch; max-width:420px; }
.checkout-auth-state .eyebrow, .checkout-auth-state h2, .checkout-auth-state > p{ text-align:center; }
.checkout-auth-state .auth-tabs{ justify-content:center; }
.checkout-auth-state .checkout-form{ width:100%; }
.checkout-auth-state .checkout-form .btn{ margin-top:22px; }

@media (max-width: 860px){
  .checkout-grid{ grid-template-columns:1fr; gap:40px; }
  .order-summary-col{ position:static; order:-1; }
}
@media (max-width: 480px){
  .checkout-main{ padding:40px 18px 80px; }
  .checkout-header-actions{ gap:10px; }
}