/* ========== CHECKOUT (limpio, sin duplicados) ========== */

/* contenedor general — evita que nada se salga */
.section.checkout { padding: 24px 0 48px; }
.section.checkout .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.checkout * { box-sizing: border-box; }

/* título */
.checkout .section__title{
  font-size: 34px;
  line-height: 1.2;
  margin: 12px 0 20px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: none;
}

/* layout: formulario | summary */
.checkout__grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px){
  .checkout__grid{ grid-template-columns: 1fr; }
}

/* cards */
.card{
  background: #ffc600;
  border: 1px solid #eee;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  padding: 22px;
  width: 100%;
  overflow: hidden;           /* evita desbordes internos */
}
.card__title{ font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }

/* ---- FORM grid (12 cols) ---- */
.ck-form{ width: 100%; }
.ck-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.ck-grid > *{ min-width: 0; }              /* CLAVE: evita que hijos “empujen” el grid */
.ck-field{ grid-column: span 12; }
.ck-half{ grid-column: span 6; }
@media (max-width: 700px){
  .ck-half{ grid-column: span 12; }
}

.ck-field label{
  display:block; font-size:12px; font-weight:700; margin-bottom:6px;
  letter-spacing:.2px; text-transform: uppercase; opacity:.8;
}
.ck-field input, .ck-field select{
  width:100%;
  min-width: 0;                              /* CLAVE: evita desbordes de inputs */
  border:2px solid #eee;
  border-radius:12px;
  padding:12px 14px;
  font-size:16px;
  outline:none;
  background:#fff;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ck-field input:focus, .ck-field select:focus{
  border-color:#2617d4;
  box-shadow:0 0 0 3px rgba(38,23,212,.08);
}

/* métodos de pago */
.ck-pay{ display:flex; gap:18px; flex-wrap:wrap; }
.ck-radio{ display:flex; align-items:center; gap:8px; font-weight:600; }

/* summary derecha */
.summary{ position: sticky; top: 16px; }
.summary .summary__row{
  display:flex; justify-content:space-between; margin-bottom:8px; font-size:15px;
}
.summary .summary__row .k{ opacity:.7; }
.summary .summary__total{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:12px; margin-top:12px; border-top:1px dashed #ddd; font-weight:800; font-size:18px;
}
.summary__note{ font-size:12px; opacity:.7; margin-top:6px; }

/* botones (usa tu estilo) */
.btn{ display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:12px; padding:14px 18px; font-weight:800; }
.btn--primary{ background:#000; color:#fff; }
.btn--full{ width:100%; }

/* avisos */
.ck-alert{ padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:14px; }
.ck-alert--success{ background:#eaf7ef; color:#1b7a3c; border:1px solid #c8e8d3; }
.ck-alert--error{   background:#fdeaea; color:#a94442; border:1px solid #f3c2c2; }
/* ===== Página de éxito: fondo negro, texto blanco ===== */
.page--success .main{
  background:#000;
  color:#fff;
}

/* Contenedor general */
.page--success .success{
  display:flex;
  justify-content:center;
  padding:32px 0 64px;
}
.page--success .success__wrap{
  width:min(980px, 92vw);
}

/* Tarjetas */
.page--success .success__card{
  background:#0e0e0e;
  border:1px solid #1f1f1f;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  margin:16px 0;
}
.page--success .success__card--hero{
  text-align:center;
  padding:32px 24px;
}
.page--success .success__card--code{
  text-align:center;
}

/* Títulos / textos */
.page--success .success__emoji{font-size:48px; line-height:1; margin-bottom:8px;}
.page--success .success__title{font-family:"Anton",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:44px;letter-spacing:.5px;margin:0 0 8px;}
.page--success .success__lead{font-size:18px;opacity:.9;margin:0;}

.page--success .success__label{opacity:.75;margin-bottom:8px;}
.page--success .success__code{
  font-family: "Anton", Arial, sans-serif;
  font-size:56px;
  letter-spacing:2px;
}
.page--success .success__hint{opacity:.8;margin-top:10px}

/* Botones */
.page--success .success__actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin:20px 0 8px;
}
.page--success .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  transition:.2s ease;
  border:1px solid transparent;
}
.page--success .btn--wa{
  background:#25D366;
  color:#0a2b16;
}
.page--success .btn--wa:hover{filter:brightness(.95)}
.page--success .btn--home{
  background:#111;
  color:#fff;
  border-color:#2a2a2a;
}
.page--success .btn--home:hover{background:#181818}

/* Lista de tickets */
.page--success .success__subtitle{font-weight:800; font-size:18px; margin-bottom:10px;}
.page--success .success__tickets{
  display:flex; flex-wrap:wrap; gap:8px;
}
.page--success .ticket{
  background:#111; border:1px solid #242424; border-radius:10px;
  padding:8px 12px; font-weight:700; letter-spacing:.5px;
}

/* Nota */
.page--success .success__note{opacity:.8; text-align:center; margin-top:14px;}
