/* Drapery Life — Checkout (sin pasarela). Comparte tokens y patrones del configurador. */

body.ck { padding-bottom: var(--space-lg); }
.ck-app { max-width: 760px; }
.ck-stage { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }

.ck-section {
  background: var(--cfg-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-md);
  box-shadow: var(--shadow-card);
}
.ck-h2 { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-primary); margin: 0 0 4px; }
.ck-h2-sub { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-md); }

/* Formulario cliente */
.ck-grid { display: grid; gap: var(--space-sm); grid-template-columns: 1fr; }
.ck-field { display: flex; flex-direction: column; gap: 6px; }
.ck-field span { font-size: var(--text-xs); color: var(--color-muted); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: .04em; }
.ck-field input, .ck-field textarea {
  font: inherit; font-size: var(--text-base); padding: 12px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--cfg-cream); color: var(--color-primary);
  width: 100%; box-sizing: border-box;
}
.ck-field input:focus, .ck-field textarea:focus { outline: none; border-color: var(--cfg-ink); box-shadow: 0 0 0 3px rgba(138,111,85,.14); background: #fff; }
.ck-field--full { margin-top: var(--space-sm); }
.ck-field textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }

/* Métodos de pago */
.ck-safety {
  background: #fdf4e7; border: 1px solid #f0d9a8; border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: var(--space-md);
  font-size: var(--text-sm); color: #6b4f1a; line-height: 1.5;
}
.ck-safety em { font-style: normal; color: #8a5a0b; font-weight: var(--weight-medium); }

.ck-pms { display: grid; gap: 10px; }
.ck-pm {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  background: var(--cfg-cream); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 14px 14px 14px 14px; cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.ck-pm:hover { background: #f4eee4; }
.ck-pm.is-sel { border-color: var(--cfg-ink); background: #fff; box-shadow: 0 0 0 1.5px var(--cfg-ink), var(--shadow-soft); }
.ck-pm input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.ck-pm-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--cfg-card); color: var(--cfg-ink); display: flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--color-border); }
.ck-pm-ico svg { width: 20px; height: 20px; }
.ck-pm-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ck-pm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ck-pm-head strong { font-size: var(--text-base); color: var(--color-primary); font-weight: var(--weight-semibold); }
.ck-pm-desc { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.ck-pm-inst { font-size: var(--text-sm); background: #f4eee4; border-radius: var(--radius-md); padding: 8px 10px; color: var(--color-text); margin-top: 4px; }
.ck-pm-adj { font-size: 11px; font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: var(--radius-pill); }
.ck-pm-surch { background: #fdecc8; color: #8a5a0b; }
.ck-pm-disc  { background: #d9f2e0; color: #1c7340; }
.ck-pm-free  { background: #e7f6ee; color: var(--color-success); }

/* Resumen */
.ck-itemlist { list-style: none; padding: 0; margin: 0 0 var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.ck-itemrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #ece5da; }
.ck-itemrow-thumb { width: 40px; height: 44px; flex: none; background: linear-gradient(160deg, #f6f1ea, #ece2d3); border-radius: var(--radius-md); overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 2px 6px rgba(58, 51, 45, .08); }
.ck-itemrow-thumb svg { width: 100%; height: 100%; }
/* R2-B: foto real de la tela como thumb del carrito */
.ck-itemrow-thumb--photo { background-size: cover; background-position: center; background-repeat: no-repeat; }
.ck-itemrow-tt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ck-itemrow-tt strong { font-size: var(--text-sm); color: var(--color-primary); }
.ck-itemrow-tt span { font-size: var(--text-xs); color: var(--color-muted); }
.ck-itemrow-price { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-primary); font-size: var(--text-sm); }

.ck-summary { background: linear-gradient(160deg, #fdfbf7, #fff); }

/* CTA */
.ck-cta-row { display: grid; gap: 10px; }
.ck-cta-row .dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ck-cta-note { text-align: center; font-size: var(--text-xs); color: var(--color-muted); margin: 10px 0 0; }
.ck-placed { background: #f0f9f3; border-color: #cce7d4; }
.ck-placed h2 { color: var(--color-success); }

@media (min-width: 700px) {
  .ck-grid { grid-template-columns: 1fr 1fr; }
  .ck-field--full { grid-column: 1 / -1; }
  .ck-cta-row { grid-template-columns: 1fr 1fr; }
  .ck-pms { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
 * TEMA OSCURO del checkout — unificado con el Configurador V2.
 * Redefine las variables --cfg-* (antes crema/blanco) a superficies oscuras y
 * corrige los claros fijos. Todo bajo .ck-* (solo existe en el checkout).
 * ========================================================================== */
body.ck {
  --cfg-card:  #161412;
  --cfg-cream: #1d1b18;
  --cfg-ink:   #b89b7d;
}
.ck-field input, .ck-field textarea { color: var(--color-text); }
.ck-field input:focus, .ck-field textarea:focus { background: #241f1a; }
.ck-safety { background: rgba(184,155,125,.10); border-color: rgba(184,155,125,.28); color: var(--color-text); }
.ck-safety em { color: var(--color-secondary); }
.ck-pm:hover { background: #221f1b; }
.ck-pm.is-sel { background: #241f1a; }
.ck-pm-inst { background: #221f1b; color: var(--color-text); }
.ck-itemrow { border-bottom-color: var(--color-border); }
.ck-itemrow-thumb { background: linear-gradient(160deg, #20272b, #161412); }
.ck-summary { background: linear-gradient(160deg, #161412, #0e0d0c); }
.ck-placed { background: rgba(127,185,138,.12); border-color: rgba(127,185,138,.35); }
.ck-pm-surch { background: rgba(216,182,120,.18); color: #e8c98a; }
.ck-pm-disc  { background: rgba(127,185,138,.16); color: #9fd8ac; }
.ck-pm-free  { background: rgba(127,185,138,.14); color: #9fd8ac; }

/* ============================================================================
 * PASARELA DEMO (visual, estilo Stripe) + recibo · tema oscuro.
 * ========================================================================== */
/* Header / títulos del checkout (clases cfg-* vienen del configurador viejo, claro) */
body.ck .cfg-topbar{ background:rgba(12,11,10,.92); border-bottom:1px solid var(--color-border); }
body.ck .cfg-logo-text, body.ck .cfg-icbtn{ color:var(--color-text); }
body.ck .cfg-icbtn{ border:1px solid var(--color-border); background:#161412; }
body.ck .cfg-eyebrow{ color:var(--color-secondary); letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; font-weight:600; }
body.ck .cfg-title{ color:var(--color-text); font-family:var(--font-heading); }
body.ck .cfg-lead{ color:var(--color-muted); }
body.ck .cfg-pricerows{ list-style:none; padding:0; margin:0; }
body.ck .cfg-pricerow{ display:flex; justify-content:space-between; gap:1rem; padding:.35rem 0; color:var(--color-muted); }
body.ck .cfg-pricerow em{ font-style:normal; opacity:.8; }
body.ck .cfg-pricerow.is-total{ border-top:1px solid var(--color-border); margin-top:.4rem; padding-top:.7rem; color:var(--color-text); font-weight:700; font-size:1.1rem; }
body.ck .cfg-free{ color:var(--cfg2-ok,#7fb98a); }
body.ck .cfg-price-note{ color:var(--color-muted); font-size:.8rem; }
body.ck .cfg-credit{ color:var(--color-muted); text-align:center; padding:1.4rem; font-size:.72rem; }
body.ck .cfg-credit a{ color:var(--color-secondary); }

/* Aviso demo + tarjeta de prueba */
.ck-demo{ background:rgba(184,155,125,.10); border:1px solid rgba(184,155,125,.30); color:var(--color-text);
  border-radius:12px; padding:.7rem .9rem; font-size:.86rem; line-height:1.5; margin-bottom:1rem; }
.ck-demo u{ text-underline-offset:2px; }
.ck-testfill{ background:#241f1a; border:1px solid var(--color-secondary); color:var(--color-secondary);
  border-radius:8px; padding:2px 8px; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; letter-spacing:.03em; }
.ck-testfill:hover{ background:#2c261f; }

/* Elemento tarjeta estilo Stripe */
.ck-card{ margin-top:.2rem; }
.ck-cardlab{ display:block; font-size:.75rem; color:var(--color-muted); text-transform:uppercase; letter-spacing:.05em; font-weight:600; margin:.6rem 0 .35rem; }
.ck-cardinput{ width:100%; box-sizing:border-box; font:inherit; font-size:1rem; padding:12px 14px; color:var(--color-text);
  background:#1d1b18; border:1px solid var(--color-border); border-radius:12px; }
.ck-cardinput:focus{ outline:none; border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(184,155,125,.16); }
.ck-cardbox{ background:#1d1b18; border:1px solid var(--color-border); border-radius:12px; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
.ck-cardbox:focus-within{ border-color:var(--color-secondary); box-shadow:0 0 0 3px rgba(184,155,125,.16); }
.ck-cardnum-row{ display:flex; align-items:center; border-bottom:1px solid var(--color-border); }
.ck-cardnum-row input{ flex:1; min-width:0; border:0; background:transparent; color:var(--color-text); font:inherit; font-size:1rem; padding:12px 14px; letter-spacing:.04em; }
.ck-cardnum-row input:focus{ outline:none; }
.ck-brand{ flex:none; width:40px; height:24px; margin-right:12px; display:flex; align-items:center; }
.ck-brand svg{ width:40px; height:24px; border-radius:4px; }
.ck-card-two{ display:flex; }
.ck-card-two input{ flex:1; min-width:0; border:0; background:transparent; color:var(--color-text); font:inherit; font-size:1rem; padding:12px 14px; }
.ck-card-two input:first-child{ border-right:1px solid var(--color-border); }
.ck-card-two input:focus{ outline:none; }
.ck-cardmsg{ font-size:.85rem; min-height:1em; margin:.5rem 0 0; color:var(--color-muted); }
.ck-cardmsg.is-err{ color:var(--cfg2-err,#d88a78); }
.ck-cardsecure{ font-size:.78rem; color:var(--color-muted); margin:.6rem 0 0; }
.ck-cardsecure strong{ color:var(--color-secondary); }

/* CTA de pago */
.ck-cta{ display:flex; flex-direction:column; gap:.6rem; }
.ck-paybtn{ width:100%; font-size:1.05rem; padding:.95rem 1.5rem; }
.ck-cta-row{ display:grid; gap:.6rem; }
.ck-cta-note{ text-align:center; font-size:.78rem; color:var(--color-muted); margin:.2rem 0 0; }

/* Overlay de procesamiento */
.ck-overlay{ position:fixed; inset:0; z-index:2000; background:rgba(8,7,6,.82); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; }
.ck-overlay[hidden]{ display:none; }
.ck-overlay-box{ text-align:center; color:var(--color-text); }
.ck-overlay-box p{ margin:1rem 0 0; font-weight:600; }
.ck-spinner{ width:52px; height:52px; margin:0 auto; border-radius:50%;
  border:4px solid rgba(184,155,125,.25); border-top-color:var(--color-secondary); animation:ckspin .8s linear infinite; }
@keyframes ckspin{ to{ transform:rotate(360deg); } }

/* Recibo */
.ck-receipt{ text-align:center; padding:1rem .5rem 2rem; max-width:520px; margin:0 auto; }
.ck-rcpt-check{ width:72px; height:72px; margin:0 auto 1rem; border-radius:50%; background:rgba(127,185,138,.16);
  border:2px solid #7fb98a; color:#7fb98a; font-size:2.2rem; display:flex; align-items:center; justify-content:center; }
.ck-rcpt-title{ font-family:var(--font-heading); color:var(--color-text); font-size:1.9rem; margin:0 0 .4rem; }
.ck-rcpt-sub{ color:var(--color-muted); margin:0 0 1.4rem; }
.ck-rcpt-sub strong{ color:var(--color-text); }
.ck-rcpt-card{ background:#161412; border:1px solid var(--color-border); border-radius:16px; padding:1.2rem 1.3rem; text-align:left; margin-bottom:1.2rem; }
.ck-rcpt-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--color-border); padding-bottom:.7rem; margin-bottom:.7rem; }
.ck-rcpt-head span:first-child{ font-family:var(--font-heading); font-size:1.1rem; color:var(--color-text); }
.ck-rcpt-num{ font-weight:700; color:var(--color-secondary); letter-spacing:.03em; }
.ck-rcpt-meta{ display:flex; justify-content:space-between; color:var(--color-muted); font-size:.9rem; padding:.2rem 0; }
.ck-rcpt-items{ list-style:none; padding:.6rem 0; margin:.5rem 0; border-top:1px dashed var(--color-border); border-bottom:1px dashed var(--color-border); }
.ck-rcpt-row{ display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0; color:var(--color-text); font-size:.92rem; }
.ck-rcpt-row em{ font-style:normal; color:var(--color-muted); font-size:.85em; }
.ck-rcpt-sub2{ display:flex; justify-content:space-between; color:var(--color-muted); padding:.5rem 0 .2rem; }
.ck-rcpt-total{ display:flex; justify-content:space-between; font-weight:700; font-size:1.2rem; color:var(--color-text); padding-top:.5rem; border-top:1px solid var(--color-border); margin-top:.3rem; }
.ck-rcpt-note{ background:#20272b; border:1px solid var(--color-border); border-radius:10px; padding:.7rem .9rem; color:var(--color-text); font-size:.9rem; margin-bottom:1.2rem; }