/* ---------- Base & Theme Sync ---------- */
.qc {
  --qc-primary: #111;           /* lo sobreescribe style-sync.js con el color del tema */
  --qc-surface: #ffffff;
  --qc-surface-2: #f8f9fb;
  --qc-border: #e5e7eb;
  --qc-text: #111;
  --qc-text-muted: #6b7280;
  --qc-radius: 14px;
  font: 400 16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color: var(--qc-text);
}
.qc, .qc * { box-sizing: border-box; }

/* ---------- Grid ---------- */
.qc .qc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 16px auto;
  max-width: 1100px;
  padding: 0 12px;
}
@media (min-width: 992px) {
  .qc .qc-grid { grid-template-columns: 2fr 1fr; }
}
.qc .qc-col-main, .qc .qc-col-side { min-width: 0; }

/* ---------- Cards ---------- */
.qc .qc-card {
  background: var(--qc-surface);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius);
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.qc .qc-card-body { padding: 18px 20px; }
.qc .qc-sticky { position: sticky; top: 18px; }

/* ---------- Headings ---------- */
.qc .qc-h1 { font-size: 28px; margin: 6px 0 12px; }
.qc .qc-h2 { font-size: 18px; margin: 0 0 12px; }

/* ---------- Buttons ---------- */
.qc .qc-btn {
  display:inline-block; padding:12px 18px; border-radius:12px;
  border:1px solid var(--qc-primary); cursor:pointer; text-decoration:none; transition:.15s;
}
.qc .qc-btn-primary { background: var(--qc-primary); color:#fff; border-color: var(--qc-primary); }
.qc .qc-btn-outline { background:#fff; color:var(--qc-text); border-color: var(--qc-border); }
.qc .qc-btn:hover { filter: brightness(.97); }
.qc .qc-actions { margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- Forms ---------- */
.qc .qc-radio { display:flex; gap:10px; align-items:flex-start; padding:8px 0; }
.qc .qc-radio input[type="radio"]{ width:20px; height:20px; margin-top:2px; }
.qc input[type="text"], .qc input[type="tel"], .qc input[type="email"], .qc input[type="password"], .qc select {
  width:100%; border:1px solid var(--qc-border); border-radius:12px; padding:10px 12px; outline:none;
  background:#fff; color:var(--qc-text); font-size:16px;  /* 16px evita zoom en iOS */
}

/* ---------- Payment boxes ---------- */
.qc .qc-box { border:1px solid var(--qc-border); border-radius:12px; padding:14px; margin-bottom:12px; background: var(--qc-surface-2); }
.qc .qc-payhead { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.qc .qc-paylogo { height:22px; }
.qc .qc-fallback-pay { width:100%; height:52px; font-weight:600; font-size:16px; border-radius:14px; }

/* ---------- Lists & Totals ---------- */
.qc .qc-list { list-style:none; padding:0; margin:0 0 10px; max-height:220px; overflow:auto; }
.qc .qc-list-row { display:flex; justify-content:space-between; margin:6px 0; }
.qc .qc-totals { list-style:none; padding:0; margin:8px 0 0; }
.qc .qc-totals li { display:flex; justify-content:space-between; margin:6px 0; }
.qc .qc-total { border-top:1px solid var(--qc-border); padding-top:8px; }
.qc .qc-muted { color: var(--qc-text-muted); font-size: 12px; }

/* ---------- Alerts ---------- */
.qc .qc-alert { padding:10px 12px; border-radius:10px; margin:0 0 12px; }
.qc .qc-alert-info { background:#eef6ff; color:#084c9e; }
.qc .qc-alert-warn { background:#fff8e6; color:#8a5a00; }

/* ---------- Dark mode (auto si el tema es oscuro) ---------- */
html.qc-dark .qc { --qc-surface:#1f2937; --qc-surface-2:#111827; --qc-border:#374151; --qc-text:#f3f4f6; --qc-text-muted:#9ca3af; }
html.qc-dark .qc input, html.qc-dark .qc select { background:#0b1220; border-color:#374151; color:#f3f4f6; }
html.qc-dark .qc .qc-alert-info { background:#0b2948; color:#bcd8ff; }

/* =====================  MOBILE OPTIMIZATION  ===================== */
@media (max-width: 768px) {
  /* Tipografía y centrado general */
  .qc { font-size: 17px; }
  .qc .qc-h1 { font-size: 24px; text-align:center; }
  .qc .qc-h2 { font-size: 18px; text-align:center; margin-bottom: 14px; }

  /* Colocar primero el contenido (dirección/pago) y debajo el resumen */
  .qc .qc-col-main { order: 1; }
  .qc .qc-col-side { order: 2; }

  /* Centrar y limitar ancho de las cards principales para que no “peguen” a los bordes */
  .qc .qc-col-main > .qc-card,
  .qc .qc-col-side > .qc-card {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Más aire interno */
  .qc .qc-card-body { padding: 16px 14px; }
  .qc .qc-box { padding: 14px; }

  /* Inputs y selects grandes (44–52px de alto) */
  .qc input[type="text"],
  .qc input[type="tel"],
  .qc input[type="email"],
  .qc input[type="password"],
  .qc select {
    height: 48px;
    font-size: 16px;       /* anti-zoom iOS */
    border-radius: 14px;
    padding: 12px 14px;
  }

  /* Botones full width y altos */
  .qc .qc-btn { width: 100%; height: 50px; font-weight: 600; }
  .qc .qc-actions { justify-content: center; }

  /* Listado de productos sin scroll en móvil */
  .qc .qc-list { max-height: none; }
}