/**
 * GETU Shopping — checkout page (/checkout/) form controls + payment cards.
 *
 * PRODUCTION MAPPING POINT
 * ------------------------
 * Deploy to wp-content/themes/bricks-child/assets/css/getu-checkout.css.
 * Enqueued site-wide by getu-chrome.php; component-scoped, so it no-ops off the
 * checkout page (nothing else carries .f-in / .pay-method / .step / details.acc).
 *
 * Ported verbatim from checkout.html's own <style> block. The --wine-*/--ink/
 * --shadow-*/--ease-* tokens resolve against the aliases getu-chrome.css defines
 * on .getu-vanilla-scope, so the reference values carry over unchanged.
 */

/* ---- Form controls ---- */
.f-lbl { display: block; font-size: 12.5px; font-weight: 600; color: rgba(36,16,21,.72); margin-bottom: .4rem; }
.f-in { width: 100%; border-radius: .75rem; background: #fff; border: 1px solid rgba(110,26,42,.18);
  padding: .72rem .9rem; font-size: 16px; line-height: 1.3; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.f-in::placeholder { color: rgba(36,16,21,.38); }
.f-in:focus { outline: none; border-color: var(--wine-600); box-shadow: 0 0 0 3px rgba(110,26,42,.08); }
.f-in[aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 3px rgba(179,38,30,.08); }
select.f-in { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23241015' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .9rem center; padding-right: 2.4rem; }
.f-err { display: none; align-items: center; gap: .3rem; color: #b3261e; font-size: 12px; margin-top: .35rem; }
.f-err.show { display: flex; }

/* Payment/method cards.
   A native <legend> straddles the fieldset's top border by default; floating it
   removes that special rendering so the title flows within the card's padding. */
fieldset { min-inline-size: 0; }
fieldset > legend { float: left; width: 100%; margin: 0 0 0.875rem; }
fieldset > legend + * { clear: both; margin-top: 0; }

.pay-method { transition: border-color .2s, background-color .2s, box-shadow .2s; cursor: pointer; }
.pay-method:hover { border-color: rgba(110,26,42,.35); }
.pay-method[data-selected="true"] { border-color: var(--wine-600); background: rgba(110,26,42,.04); box-shadow: var(--shadow-raised); }
.pay-dot { position: relative; transition: border-color .2s, background-color .2s; }
.pay-method[data-selected="true"] .pay-dot { border-color: var(--wine-600); background: var(--wine-600); }
.pay-method[data-selected="true"] .pay-dot:empty::after { content: ""; position: absolute; inset: 3px; border-radius: 9999px; background: var(--wine-600); }
.pay-panel { display: none; }
.pay-panel.show { display: block; }
.pay-check { color: #fff; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s var(--ease-spring); }
.pay-method[data-selected="true"] .pay-check { opacity: 1; transform: scale(1); }

/* Progress steps */
.step-num { transition: background-color .25s, color .25s, border-color .25s; }
.step.is-done .step-num { background: var(--wine-600); color: #fff; border-color: var(--wine-600); }
.step.is-active .step-num { background: var(--wine-600); color: #fff; border-color: var(--wine-600); box-shadow: 0 0 0 4px rgba(110,26,42,.12); }
.step.is-active .step-label { color: var(--wine-700); font-weight: 600; }
.step-line { height: 2px; background: rgba(110,26,42,.15); }
.step.is-done + .step-line, .step-line.is-filled { background: var(--wine-600); }

/* Observações accordion */
details.acc > summary { list-style: none; cursor: pointer; }
details.acc > summary::-webkit-details-marker { display: none; }
.acc-chev { transition: transform .3s var(--ease-out); }
details.acc[open] .acc-chev { transform: rotate(180deg); }

/* While the order is being placed, block re-submits. */
#checkout-main.is-busy { opacity: .6; pointer-events: none; transition: opacity .15s var(--ease-out, ease); }

@media (prefers-reduced-motion: reduce) { .pay-check, .acc-chev { transition: none; } }