/* GALWAY: Smart Checkout (assets/js/checkout.js). Se apoya en los estilos del diálogo de compra de style.css (.co-*) y agrega lo que solo usa el checkout nuevo. */
.fld select { width: 100%; min-height: 52px; padding: 12px 44px 12px 16px; border-radius: 14px; border: 2px solid var(--ink); background: #fbfaf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312150f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; font: inherit; font-weight: 600; color: var(--ink); appearance: none; -webkit-appearance: none; }
.fld select:focus { outline: 3px solid var(--green); outline-offset: 1px; }
.co2 .co-sh2 { margin: 26px 0 -2px; font-family: var(--fd); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; color: var(--forest); }
.co-q { display: inline-flex; align-items: center; gap: 8px; }
.co-qb { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--ink); background: #fbfaf7; font: 700 1.25rem/1 var(--fb); color: var(--ink); cursor: pointer; transition: scale 0.2s; }
.co-qb:active { scale: 0.92; }
.co-qn { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.co2 .co-items li { grid-template-columns: 84px minmax(0, 1fr) auto auto; }
@media (max-width: 640px) { .co2 .co-items li { grid-template-columns: 64px minmax(0, 1fr) auto; } .co2 .co-items img { width: 64px; height: 64px; } .co2 .co-items .co-lp { grid-column: 2 / -1; text-align: left; } }
.co-wa { margin-top: 12px; }
.co-testbar, .co-simtag { font-weight: 800; letter-spacing: 0.04em; }
.co-testbar { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: #fbe9a6; color: #3a2900; border: 2px dashed #8a5a00; text-align: center; font-size: clamp(0.95rem, 2.4vw, 1.15rem); }
.co-card.is-sim { border-style: dashed; }
.co-card .co-simtag { color: #8a5a00; font-style: normal; font-size: 0.78rem; }
.co-state { width: 84px; height: 84px; margin: 22px 0 8px; border-radius: 50%; position: relative; }
.co-state.is-spin { border: 6px solid var(--line); border-top-color: var(--green); animation: co2spin 0.9s linear infinite; }
.co-state.is-ok { background: var(--green); }
.co-state.is-ok::after { content: ''; position: absolute; left: 29px; top: 16px; width: 18px; height: 34px; border: solid #fff; border-width: 0 7px 7px 0; transform: rotate(45deg); }
.co-state.is-bad { background: #a1201a; }
.co-state.is-bad::after { content: '!'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font: 400 3.4rem/1 var(--fd); }
@keyframes co2spin { to { transform: rotate(360deg); } }
.co-done { margin-top: 18px; padding: 16px 20px; border-radius: 16px; background: #e5efe8; border: 2px solid var(--green); display: grid; gap: 4px; }
.co-det { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.co-copy { min-height: 34px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--ink); background: #fbfaf7; font: 700 0.85rem/1 var(--fb); cursor: pointer; }
.co-up { margin-top: 18px; cursor: pointer; justify-self: start; }
.co-up:focus-within { outline: 3px solid var(--green); outline-offset: 3px; }
.co-link { margin-top: 14px; padding: 8px 0; background: none; border: 0; color: var(--green); font: 700 1rem/1 var(--fb); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
@media (prefers-reduced-motion: reduce) { .co-state.is-spin { animation-duration: 2.4s; } }

.co2 .co-items li > div > span { display: block; }
.co-pay.no-qr { grid-template-columns: minmax(0, 1fr); }
.co2 .co-sl { min-height: 0; }