/* ==========================================================
   GUGA BRASA · UI CORE v4.1 — Consolidado & Acessível
   ========================================================== */

/* ---------- 1) TOKENS ---------- */
:root{
  --radius-lg: 1rem; --radius-md:.75rem; --radius-sm:.5rem;
  --shadow-sm:0 4px 12px rgba(2,8,30,.12);
  --shadow-md:0 10px 30px rgba(2,8,30,.18);
  --shadow-lg:0 16px 40px rgba(2,8,30,.22);

  --accent:#ff6a00; --accent-ink:#1b1208;
  --accent-soft:rgba(255,106,0,.14); --accent-weak:rgba(255,106,0,.22);

  --text:#182032; --text-muted:#5b667a; --text-muted-dark:#cfd8ea;
  --bg:#f7f9ff; --surface:#fff; --surface-border:#dfe5f3;
  --card-bg:#fff; --card-fg:#111; --input-bg:#fff; --input-fg:#111; --input-border:#d9dbe1;
  --placeholder:#9aa3b2; --note-bg:rgba(0,0,0,.03);

  --footer-bg:var(--surface); --footer-fg:var(--text); --footer-border:rgba(0,0,0,.08);
  --focus-ring: color-mix(in oklab, var(--accent) 70%, white);
}

/* Acentos alternativos (opcional) */
:root[data-accent="gold"]   { --accent:#ffb200; --accent-soft:#fff4d8; --accent-ink:#1a1305; --accent-weak:rgba(255,178,0,.16); }
:root[data-accent="ruby"]   { --accent:#e53935; --accent-soft:#ffe3e2; --accent-ink:#18090a; --accent-weak:rgba(229,57,53,.16); }
:root[data-accent="emerald"]{ --accent:#10b981; --accent-soft:#ddf7ef; --accent-ink:#071410; --accent-weak:rgba(16,185,129,.16); }
:root[data-accent="royal"]  { --accent:#2563eb; --accent-soft:#e7efff; --accent-ink:#0a132b; --accent-weak:rgba(37,99,235,.16); }

/* Dark */
:root[data-theme="dark"]{
  --bg:#0a1020; --surface:#141a2a; --surface-border:#1f2a40;
  --text:#e9eef8; --text-muted:#cfd8ea;
  --card-bg:#161c2c; --card-fg:#e8edf7;
  --input-bg:#0f1423; --input-fg:#e8edf7; --input-border:#2a3240; --placeholder:#9fb0c7;
  --note-bg:rgba(255,255,255,.06);
  --footer-bg:#0e1424; --footer-fg:#e8edf7; --footer-border:#1f2a40;
  --accent:#ff6a00; --accent-soft:rgba(255,106,0,.22);
}

/* ---------- 2) RESET & BASE ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; overflow-x:hidden; }
body{
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  --footer-safe: calc(92px + env(safe-area-inset-bottom,0px));
  padding-bottom: var(--footer-safe);
}
:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--radius-sm);
}
@supports not (color: color-mix(in oklab, red 50%, white)){ :focus-visible{ outline-color:var(--accent); } }
.text-center{ text-align:center !important; }
.d-none{ display:none !important; }

/* ---------- 3) LAYOUT ---------- */
.container-narrow{ max-width:1280px; margin:0 auto; padding:1.5rem clamp(1rem,2vw,2rem); }
.form-card{
  background:var(--surface); border:1px solid var(--surface-border);
  border-radius:var(--radius-lg); padding:clamp(1.5rem,4vw,2.5rem); box-shadow:var(--shadow-md);
}

/* Grelha utilitária */
.row{ display:flex; flex-wrap:wrap; }
.g-3{ --bs-gutter-x:1rem; --bs-gutter-y:1rem;
  margin-top:calc(-1*var(--bs-gutter-y));
  margin-right:calc(-.5*var(--bs-gutter-x));
  margin-left:calc(-.5*var(--bs-gutter-x));
}
.row>*{
  padding-right:calc(var(--bs-gutter-x)*.5);
  padding-left:calc(var(--bs-gutter-x)*.5);
  margin-top:var(--bs-gutter-y); width:100%; max-width:100%;
}
.col{ flex:1 0 0%; } .col-12{ width:100%; }
.align-items-end{ align-items:flex-end !important; }
@media (min-width:768px){ .col-md-4{ width:33.3333%; } .col-md-6{ width:50%; } .row-cols-md-3>*{ width:33.3333%; } }
@media (min-width:992px){ .col-lg-4{ width:33.3333%; } .col-lg-8{ width:66.6667%; } }

/* Data (roller) */
.roller-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-items:center; max-width:420px; margin-inline:auto; }

/* ---------- 4) TIPOGRAFIA ---------- */
.step-title{
  color:var(--accent); font-weight:800; font-size:clamp(1.5rem,3.5vw,2rem);
  margin:.75rem 0 1.125rem; text-align:center; letter-spacing:-.02em; line-height:1.25;
}
label,.form-label{ color:var(--text); font-weight:600; }
.form-step small,.form-step .text-muted,.help,.hint{ color:var(--text-muted); font-size:.875rem; }
.form-step{ margin-bottom:3.5rem; } .form-step + .form-step{ margin-top:3.5rem; }

/* ---------- 5) FORM ---------- */
.form-control,.form-select,textarea,select{
  background:var(--input-bg); color:var(--input-fg);
  border:1px solid var(--input-border); border-radius:var(--radius-sm);
  min-height:44px; padding:.625rem .875rem; font-size:1rem; transition:border-color .2s, box-shadow .2s;
}
.form-control::placeholder,textarea::placeholder{ color:var(--placeholder); }
.form-control:focus,.form-select:focus,textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak); outline:none; }
.form-control.is-invalid{ border-color:#dc3545; box-shadow:none; }
#notes{ min-height:6rem; max-height:6rem; resize:none; border-radius:.75rem; }

:root[data-theme="dark"] {
  /* ...mantém tuas variáveis já existentes... */

  /* Laranja suave em degradê (apenas dark) */
  --accent-grad-start: color-mix(in oklab, var(--accent) 94%, white);
  --accent-grad-mid:   var(--accent);
  --accent-grad-end:   color-mix(in oklab, var(--accent) 82%, black);
  --accent-border-strong: color-mix(in oklab, var(--accent) 80%, white);
}

/* Selects centrados + iOS sem zoom */
.form-select{ text-align:center; text-align-last:center; }
@supports(-webkit-appearance:none){ .form-select{ -webkit-appearance:none; } }
@media (max-width:640px){ input,select,textarea,.btn,.form-select{ font-size:16px !important; } }

/* ---------- 6) BOTÕES ---------- */
.btn{
  border-radius:.75rem; min-height:44px; font-weight:700; padding:.6rem 1.3rem; font-size:.95rem;
  transition:all .2s ease; cursor:pointer; border:1px solid transparent;
}
.btn-primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  letter-spacing:.02em; text-transform:uppercase; font-size:1.05rem; padding:.9rem 1.75rem;
  box-shadow:0 6px 20px rgba(255,106,0,.25);
}
.btn-primary:hover{ background:color-mix(in oklab,var(--accent) 90%, black); transform:translateY(-1px); }
.btn-outline-secondary{ border-color:var(--surface-border); color:var(--text); }
.btn-outline-secondary:hover{ background:var(--note-bg); }

/* Stepper convidados */
.guest-wrap{ display:flex; align-items:center; gap:.625rem; margin-top:.75rem; }
.guest-wrap .btn-stepper{
  width:52px; height:52px; display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--input-border); background:var(--card-bg); color:var(--card-fg);
  border-radius:.625rem; font-weight:900; transition:all .2s;
}
.guest-wrap .btn-stepper:hover{ border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--accent-weak); }
#guestCount{ max-width:120px !important; }

/* ---------- 7) CARDS & HORAS — CLEAN REWRITE (v4.1) ---------- */

/* Grades dos cards (opções e flex) */
.brasa-options,
.flex-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:1.25rem;
}

/* Base de cartão (Option/Flex) */
.option-card,
.flex-card{
  background:var(--card-bg);
  color:var(--card-fg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  padding:1.25rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  cursor:pointer;
  min-height:230px;
  position:relative;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}

/* Tipografia base dos cards */
.option-card h4,
.flex-card h4{
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  margin:.1rem 0 .25rem;
}
.option-card p,
.flex-card p{
  font-size:.95rem;
  line-height:1.55;
  color:var(--text-muted);
}

/* Hover */
.option-card:hover,
.flex-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}

/* Estado ativo/selecionado (sem fundo laranja no claro) */
.option-card.active,
.option-card[aria-checked="true"],
.flex-card.active{
  border:2px solid var(--accent);
  box-shadow:0 10px 28px var(--accent-weak);
  background:var(--card-bg);
  color:inherit;
}

/* Legibilidade no dark */
:root[data-theme="dark"] .option-card h4,
:root[data-theme="dark"] .flex-card h4{ color:var(--text); }
:root[data-theme="dark"] .option-card p,
:root[data-theme="dark"] .flex-card p{ color:var(--text-muted); }

/* STEP 5 — centralizado com altura maior */
#step5 .option-card{
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:260px;
}

/* PACK COMPLETO — isolado da base com medidas e tipo próprias */
#btnPackCompleto.pack-card{
  background:var(--card-bg);
  color:var(--card-fg);
  border:1px solid var(--input-border);
  border-radius:var(--radius-md);
  padding:1rem 1.25rem;      /* mais enxuto que os cards base */
  min-height:200px;          /* reduz a “placa” visual */
  display:flex;
  flex-direction:column;
  gap:.5rem;
  text-align:center;
  cursor:pointer;
  position:relative;
  transition:border-color .25s, box-shadow .25s, transform .25s;
}
#btnPackCompleto.pack-card h4{
  font-size:1.10rem;         /* tamanho controlado */
  font-weight:800;
  line-height:1.2;
  margin-bottom:.25rem;
}
#btnPackCompleto.pack-card small{
  font-size:.92rem;
  color:var(--text-muted);
}

/* Hover/Ativo do Pack (mantém coerência com os outros) */
#btnPackCompleto.pack-card:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}
#btnPackCompleto.pack-card.active,
#btnPackCompleto.active-pack{
  border:2px solid var(--accent);
  box-shadow:0 10px 28px var(--accent-weak);
  background:var(--card-bg);
  color:inherit;
}

/* === HORAS (6h/12h) — DROP-IN v2 ============================= */

.btn-hour{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:96px; min-height:44px; padding:.6rem .75rem;
  border-radius:var(--radius-sm);
  background:var(--card-bg); color:var(--card-fg);
  border:2px solid var(--input-border);
  font-weight:800; letter-spacing:.02em; font-size:.95rem;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn-hour:hover{
  border-color:var(--accent);
  box-shadow: inset 0 0 0 3px var(--accent-weak);
}

/* Ativo — fallback sólido (claro + compatibilidade geral) */
.btn-hour.active,
.btn-hour[aria-pressed="true"]{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* DARK MODE — degradê laranja suave + glow */
:root[data-theme="dark"] .btn-hour.active,
:root[data-theme="dark"] .btn-hour[aria-pressed="true"]{
  /* fallback sólido (se o gradiente não aplicar) */
  background: var(--accent);
  color: var(--accent-ink);
  border-color: color-mix(in oklab, var(--accent) 82%, white);
  box-shadow:
    0 8px 22px rgba(255,106,0,.28),   /* glow externo */
    inset 0 1px 0 rgba(255,255,255,.12);

  /* degradê suave — browsers com color-mix */
  background-image: linear-gradient(
    135deg,
    color-mix(in oklab, var(--accent) 94%, white) 0%,
    var(--accent) 55%,
    color-mix(in oklab, var(--accent) 80%, black) 100%
  );
}

/* Fallback do degradê no dark (sem color-mix) */
@supports not (color: color-mix(in oklab, red 50%, white)) {
  :root[data-theme="dark"] .btn-hour.active,
  :root[data-theme="dark"] .btn-hour[aria-pressed="true"]{
    background-image: linear-gradient(
      135deg,
      #ff8a33 0%,   /* ~accent + branco */
      #ff6a00 55%,  /* accent */
      #d95a00 100%  /* accent + preto */
    );
    border-color: #ff944d;
  }
}

/* Hover/press refinado quando já está ativo */
:root[data-theme="dark"] .btn-hour.active:hover,
:root[data-theme="dark"] .btn-hour[aria-pressed="true"]:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Foco acessível consistente */
.btn-hour:focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-weak), inset 0 1px 0 rgba(255,255,255,.08);
  border-color: var(--accent);
}

/* Respeita redução de movimento */
@media (prefers-reduced-motion: reduce){
  .btn-hour{ transition: none; }
}

/* Foco acessível unificado (cartões, horas e pack) */
.option-card:focus-visible,
.flex-card:focus-visible,
.btn-hour:focus-visible,
#btnPackCompleto:focus-visible{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-weak);
}

/* ---------- 8) QUICKNOTES ---------- */
.quicknote-bar{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:1rem 0 .75rem; padding:.75rem 1rem;
  border-radius:var(--radius-md); background:var(--note-bg); border:1px solid var(--surface-border); box-shadow:var(--shadow-sm);
}
.quicknote-bar .badge{
  background:var(--accent); color:var(--accent-ink); font-weight:800; border-radius:999px; padding:.3rem .6rem; font-size:.7rem;
}
.quicknote-bar .qn-input{ flex:1 1 auto; }
.quicknote-bar .btn-save-qn{ display:none !important; }

/* ---------- 9) PAINÉIS / ERROS ---------- */
#dist_wrap,.panel-tip{
  background:var(--note-bg); border:1px solid var(--surface-border); border-radius:var(--radius-md);
  padding:.65rem .85rem; color:var(--text); font-size:.9rem;
}
.form-error{
  display:none; margin-top:.5rem; padding:.625rem .875rem; border-radius:.625rem;
  background:rgba(229,57,53,.14); border:1px solid rgba(229,57,53,.35); color:#ffe3e3; font-size:.875rem;
}
.form-error.show{ display:block; }

/* ---------- 10) FOOTER (fixo) ---------- */
.form-actions{
  position:fixed; left:0; right:0; bottom:0; z-index:1100;
  background:var(--footer-bg); color:var(--footer-fg); border-top:1px solid var(--footer-border);
  backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
}
.form-actions .fa-inner{
  max-width:1280px; margin:0 auto; padding:.75rem clamp(1rem,3vw,1.5rem);
  display:flex; justify-content:space-between; align-items:center; gap:.75rem;
}
.form-actions .btn{ text-decoration:none; }
.form-actions a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.form-actions .btn-primary:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.form-actions .btn-outline-secondary{ color:var(--footer-fg); border-color:rgba(255,255,255,.28); background:transparent; }
.form-actions .btn-outline-secondary:hover{ background:rgba(255,255,255,.06); }

@media (max-width:640px){
  .form-actions .fa-inner{ flex-direction:column; align-items:stretch; }
  .form-actions .btn{ width:100%; text-align:center; }
}
@media (orientation:landscape) and (max-height:480px){
  body{ --footer-safe: calc(104px + env(safe-area-inset-bottom,0px)); }
}

/* ---------- 11) THEME SWITCH (Escuro | Claro) ---------- */
/* corresponde ao HTML: #themeSwitch.theme-switch > .seg + .seg + .thumb */
.theme-switch{
  --h:32px; --r:20px; --pad:4px; --track-dark:#0e1424; --track-light:#fff;
  position:sticky; top:calc(12px + env(safe-area-inset-top,0)); z-index:9999;
  display:inline-grid; grid-template-columns:1fr 1fr; align-items:center;
  height:var(--h); min-width:176px; border-radius:var(--r); padding:var(--pad);
  margin:6px auto 10px; box-shadow:var(--shadow-md); isolation:isolate;
  background:var(--track-light); border:1px solid var(--surface-border);
}
:root[data-theme="dark"] .theme-switch{ background:var(--track-dark); border-color:#1f2a40; }
.theme-switch .seg{
  appearance:none; background:transparent; border:0; height:calc(var(--h) - var(--pad)*2);
  border-radius:calc(var(--r) - var(--pad)); font:700 .94rem/1 "Poppins",system-ui,sans-serif;
  color:var(--text); cursor:pointer; padding:0 10px; position:relative; z-index:2; transition:color .18s ease;
}
:root[data-theme="dark"] .theme-switch .seg{ color:#cfd8ea; }
.theme-switch .thumb{
  position:absolute; inset:var(--pad) 50% var(--pad) var(--pad);
  background:var(--accent); color:var(--accent-ink); border-radius:calc(var(--r) - var(--pad));
  box-shadow:0 8px 22px rgba(255,106,0,.28); transition:transform .22s ease, inset .22s ease; z-index:1; pointer-events:none;
}
.theme-switch[data-active="light"] .thumb{ transform:translateX(100%); }
.theme-switch .seg[aria-pressed="true"]{ color:var(--accent-ink); }
:root[data-theme="dark"] .theme-switch .seg[aria-pressed="true"]{ color:#1b1208; }
.theme-switch .seg:focus-visible{ outline:0; box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 30%, transparent); }
@media (max-width:420px){ .theme-switch{ --h:30px; min-width:170px; } .theme-switch .seg{ font-size:.9rem; } }

/* ---------- 12) STEPS ESPECÍFICOS ---------- */
/* Step 1 */
#dateHelp{ display:block; text-align:center; margin-bottom:.35rem; font-weight:700; }
#dateAssist{ display:block; text-align:center; margin-top:.4rem; font-size:.9rem; color:var(--text-muted); }
#step1 .roller-row select{ min-height:56px; font-size:1rem; text-align:center; }

/* Step 2 — Campo “Quinta/Local” em tamanho XL */
#step2 #venueSearch,
#step2 #region_key{
  width: 100%;
  min-height: 68px;         /* era ~56px por padrão */
  font-size: 1.05rem;       /* texto maior/legível */
  padding: .85rem 1rem;     /* mais conforto no toque */
  border-radius: .875rem;   /* leve finesse */
}
#venueHelp,
#regionHelp{ font-size:.95rem; }

/* Google Places — dropdown acima do footer e legível */
.pac-container{
  z-index: 12000 !important;                     /* acima do footer fixo */
  background: var(--surface) !important;         /* herda do tema */
  color: var(--text) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: .75rem !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: 1rem;
}

/* Itens (estado normal/hover/selecionado) */
.pac-item{
  padding: .6rem .75rem;
}
.pac-item:hover,
.pac-item.pac-item-selected{
  background: var(--note-bg) !important;
}

/* Ajustes de cor: força texto claro no dark */
:root[data-theme="dark"] .pac-container{
  background: #141a2a !important;               /* fundo escuro consistente */
  border-color: var(--surface-border) !important;
}
:root[data-theme="dark"] .pac-item,
:root[data-theme="dark"] .pac-item *{
  color: #e8edf7 !important;                    /* texto branco-acinzentado */
}
:root[data-theme="dark"] .pac-item:hover,
:root[data-theme="dark"] .pac-item.pac-item-selected{
  background: rgba(255,255,255,.06) !important; /* realce suave */
}

/* Partes destacadas (termo coincidente) em laranja da marca */
.pac-matched,
.pac-item .pac-item-query .pac-matched{
  color: var(--accent) !important;
  font-weight: 700;
}

/* Ícone & logo do Google (mantém compliance) */
.pac-icon{ margin-right: .5rem; opacity: .9; }
.pac-logo:after{ background-color: transparent !important; }

/* (Opcional) Desktop: deixar o 1.º bloco mais largo e central */
@media (min-width: 1024px){
  #step2 .mb-3:first-of-type{
    max-width: 900px;
    margin-inline: auto;
  }
}

/* Step 3 — 4→3→2→1 */
#step3 .info-subtitle{ font-size:1.05rem; font-weight:700; text-align:center; margin:.25rem 0 .75rem; }
#step3 .ceremony-icons{ display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(180px,1fr)); }
@media (max-width:1200px){ #step3 .ceremony-icons{ grid-template-columns:repeat(3,minmax(180px,1fr)); } }
@media (max-width:900px){  #step3 .ceremony-icons{ grid-template-columns:repeat(2,minmax(200px,1fr)); } }
@media (max-width:560px){  #step3 .ceremony-icons{ grid-template-columns:1fr; } }
#step3 .ceremony-icons .option-card{ text-align:center; min-height:200px; }
@media (max-width:560px){ #step3 .ceremony-icons .option-card{ min-height:unset; } }

/* Step 4 — selects centralizados */
#step4 .form-label{ font-size:1.05rem; font-weight:700; }
#step4 .form-select{ min-height:52px; text-align:center; text-align-last:center; font-size:16px; }
#outroHorarioWrap{ margin-top:.5rem; }

/* Step 5 — 5→3→2→1 */
#step5 .lead{ text-align:center; font-size:1.05rem; margin-bottom:1rem; }
#step5 .brasa-options{ grid-template-columns:repeat(5,minmax(160px,1fr)); }
@media (max-width:1200px){ #step5 .brasa-options{ grid-template-columns:repeat(3,minmax(180px,1fr)); } }
@media (max-width:900px){  #step5 .brasa-options{ grid-template-columns:repeat(2,minmax(200px,1fr)); } }
@media (max-width:640px){  #step5 .brasa-options{ grid-template-columns:1fr; } }

/* === STEP 7 · Pack Completo — painel + checkbox refeição (FINAL compacto) === */
#step7{ padding-top:.75rem; }

/* Painel informativo neutro (legível em ambos os temas) */
#step7 .panel-tip{
  text-align:center;
  font-size:.95rem;
  background:var(--note-bg);
  border:1px solid var(--surface-border);
  color:var(--text);
  border-radius:.75rem;
  padding:.6rem .9rem;
  margin-bottom:1rem;
}

/* Área do checkbox — central, sem ocupar largura desnecessária */
#step7 .d-flex{ justify-content:center; gap:.6rem; flex-wrap:wrap; }

/* Pílula compacta e harmônica (tamanho “de botão”) */
#step7 .d-flex > label{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--surface-border);
  border-radius:.75rem;
  padding:.5rem .85rem;         /* menor que antes */
  box-shadow:var(--shadow-sm);
  font-size:.95rem;
  line-height:1;
  width:auto;                   /* não expande em largura */
  max-width:unset;              /* remove limite anterior */
  cursor:pointer;
}
#step7 .d-flex > label:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
}

/* Neutraliza classes Bootstrap herdadas do HTML */
#step7 .d-flex > label.bg-white,
#step7 .d-flex > label.text-dark{
  background:var(--surface) !important;
  color:var(--text) !important;
  border-color:var(--surface-border) !important;
}

/* Checkbox + foco */
#step7 input[type="checkbox"]{
  accent-color:var(--accent);
  width:18px; height:18px;
}
#step7 input[type="checkbox"]:focus-visible + span,
#step7 .d-flex > label:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--accent-weak);
  border-color:var(--accent);
}

/* Garantia visual: cards do Step 7 só ficam laranja quando ATIVOS */
#step7 .option-card{
  border:1px solid var(--input-border) !important;
  box-shadow:none;
}
#step7 .option-card.active,
#step7 .option-card[aria-checked="true"]{
  border:2px solid var(--accent) !important;
  box-shadow:0 10px 28px var(--accent-weak);
}
/* ---------- 13) ACESSIBILIDADE ---------- */
.option-card:focus-visible,.flex-card:focus-visible,.btn-hour:focus-visible,#btnPackCompleto:focus-visible{
  outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-weak);
}

/* ---------- 14) RESPONSIVO GLOBAL ---------- */
@media (max-width:1024px){
  .container-narrow{ padding:1rem clamp(.75rem,2.5vw,1.5rem); }
  .form-card{ padding:1.25rem; }
  .step-title{ font-size:clamp(1.25rem,2.6vw,1.75rem); }
  .option-card,.flex-card{ padding:1rem; min-height:200px; text-align:center; }
}
@media (max-width:640px){
  .brasa-options,.flex-grid{ grid-template-columns:1fr; }
  .roller-row{ grid-template-columns:1fr; }
  .option-card,.flex-card{ text-align:left; min-height:0; }
}
@media (min-width:1280px){
  body{ font-size:17px; }
  .step-title{ font-size:clamp(1.75rem,2.2vw,2.25rem); }
}

/* ---------- 15) MICROINTERAÇÕES ---------- */
button:active,.option-card:active{ transform:scale(.98); transition:.08s; }