/* ======================== VARIÁVEIS BASE ======================== */
:root{
  /* Layout geral */
  --form-width: min(76vw, 350px);
  --overlay-pad: 24px;
  --stack-gap-vertical: 16px;
  --block-gap: 12px;
  --block-shift-y: 0px;

  /* Texto base */
  --label-size: 20px;
  --label-weight: 700;
  --label-letter: .2px;
  --label-whitespace: normal;

  /* Inputs base */
  --label-mb: 1px;
  --label-ml: 2px;
  --input-py: 14px;
  --input-px: 18px;
  --input-font-size: 16px;
  --input-radius: 999px;
  --input-width: 100%;
  --input-min-h: auto;
  --placeholder-size: var(--input-font-size);
  --placeholder-color: rgba(255,255,255,.55);

  /* Botões base */
  --btn-py: 12px;
  --btn-px: 26px;
  --btn-width: auto;
  --btn-min-h: auto;
  --btn-radius: 999px;

  /* Botão VOLTAR (padrão — cada sessão pode sobrepor) */
  --back-btn-width: auto;
  --back-btn-min-h: auto;
  --back-btn-px: calc(var(--btn-px) - 4px);
  --back-btn-py: var(--btn-py);
  --back-btn-radius: var(--btn-radius);
  --back-btn-mx: auto;
  --back-btn-mt: 0px;

  /* Tema */
  --accent: #7939FF;

  /* HORÁRIOS (mantido) */
  --time-max-width: 320px;
  --time-item-height: 70px;
  --time-bg: rgba(11,11,11,.80);
  --time-border: 2px solid var(--accent);
  --time-text: #ffffff;
  --time-selected-bg: var(--accent);
  --time-title-gap: 50px;
  --time-visible: 4;
  --time-gap: 10px;
  --fade-edge: 56px;
  --ghost-height: 40px;
  --time-bottom-gap: 22px;
  --time-min-scale: .86;
  --time-edge-blur: 3px;

  /* Calendário (balões) */
  --weekday-size: 20px;
  --week-to-days-gap: 16px;
  --cal-cell: 56px;
  --cal-gutter: 10px;
  --cal-radius: 14px;

  /* >>> Título do mês do calendário (controle global) <<< */
  --cal-title-size: 20px;
}

/* Fonte Poppins para títulos/labels bold */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

/* ======================== BASE ======================== */
html, body{
  height:100%; margin:0; background:#000;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
spline-viewer#bg{
  position:fixed; inset:0; width:100vw; height:100vh; display:block; z-index:0;
}
.bg-glass{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 40%, rgba(8,12,20,.35), rgba(6,8,14,.55) 60%, rgba(0,0,0,.65) 100%);
  backdrop-filter: blur(10px) saturate(115%);
  -webkit-backdrop-filter: blur(10px) saturate(115%);
}
.overlay{
  position:fixed; inset:0; display:grid; place-items:center;
  padding:var(--overlay-pad); z-index:10;
  transform:translateY(var(--block-shift-y));
}
.form{ width:var(--form-width); display:grid; row-gap:var(--stack-gap-vertical); }

.step{ display:grid; row-gap:var(--stack-gap-vertical); }
.hidden-step{ display:none !important; }

.label{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#fff; font-weight:var(--label-weight); font-size:20px; line-height:1.2;
  text-align:center; margin:0 0 var(--label-mb) var(--label-ml);
  text-shadow:0 1px 12px rgba(0,0,0,.45); letter-spacing:var(--label-letter);
  white-space: var(--label-whitespace);
  overflow: visible; text-wrap: nowrap;
}

.field{ display:grid; justify-items:center; gap:var(--block-gap); background:transparent; }

/* Inputs */
.field input{
  width: var(--input-width);
  min-height: var(--input-min-h);
  padding: var(--input-py) var(--input-px);
  border-radius: var(--input-radius);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.45);
  color:#fff; outline:none;
  font-size: var(--input-font-size);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background-clip:padding-box;
}
.field input::placeholder{
  color: var(--placeholder-color);
  font-size: var(--placeholder-size);
}

/* Botões */
.liquid-btn{
  position:relative;
  padding: var(--btn-py) var(--btn-px);
  width: var(--btn-width);
  min-height: var(--btn-min-h);
  border-radius: var(--btn-radius);
  border:1px solid rgba(255,255,255,.26); font-weight:700; user-select:none;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, opacity .2s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.28);
  color:#111; background: rgba(255,255,255,.70);
}
.liquid-btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(120% 120% at 20% 0%, rgba(255,255,255,.45) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,0) 60%);
  pointer-events:none; mix-blend-mode:screen; opacity:.35;
}
.liquid-btn:disabled{ background:rgba(255,255,255,.08); color:#fff; cursor:not-allowed; opacity:1; }
.liquid-btn.enabled{
  background:rgba(255,255,255,.70); color:#111; border-color:rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(0,0,0,.45);
}
.liquid-btn.enabled:hover{ transform: translateY(-1px); }
.liquid-btn.enabled:active{
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 18px rgba(0,0,0,.35);
}

/* Botão VOLTAR (tokenizado) */
.liquid-btn.back{
  padding: var(--back-btn-py) var(--back-btn-px);
  width: var(--back-btn-width);
  min-height: var(--back-btn-min-h);
  border-radius: var(--back-btn-radius);
  margin-inline: var(--back-btn-mx);
  margin-top: var(--back-btn-mt);
}

.pro-row{ display:flex; gap:12px; justify-content:center; }
.pro-row .liquid-btn{ min-width:140px; }

/* ======================== ANIMAÇÕES ======================== */
@keyframes fade-in-down{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:translateY(0)} }
@keyframes fade-in-up  { from{opacity:0; transform:translateY( 30px)} to{opacity:1; transform:translateY(0)} }
@keyframes fade-out-up { from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-20px)} }
@keyframes fade-out-down{from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY( 30px)} }
.animate-fade-in-down{ animation: fade-in-down .8s ease-out forwards; opacity:0; }
.animate-fade-in-up  { animation: fade-in-up   .8s ease-out forwards; opacity:0; }
.animate-fade-out-up { animation: fade-out-up  .45s ease-in forwards; }
.animate-fade-out-down{animation: fade-out-down .45s ease-in forwards; }
.animation-delay-200{ animation-delay:.2s }
.animation-delay-400{ animation-delay:.4s }
.animation-delay-600{ animation-delay:.6s }
.animation-delay-800{ animation-delay:.8s }

/* RE-ATIVADO: animação do primeiro “Prosseguir” (etapa 1) */
#step-name .liquid-btn:not(.back){
  animation: fade-in-up .8s ease-out forwards;
  opacity: 0;
  margin-top: var(--step1-prosseguir-offset-y);
}

/* ======================== CALENDÁRIO ======================== */
.calendar{ width:100%; color:#fff; user-select:none; display:grid; justify-items:center; }
.cal-head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;
  width:100%; max-width: calc(7 * var(--cal-cell) + 6 * var(--cal-gutter));
}
.cal-title-strong{ font-weight:700; color:#fff; font-size: var(--cal-title-size); }
.cal-nav{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff; border-radius:8px; padding:6px 12px; line-height:1;
}
.cal-grid{
  display:grid; grid-template-columns:repeat(7, var(--cal-cell));
  gap:var(--cal-gutter); justify-content:center;
}
#cal-week{
  margin-right: -2px;
  margin-bottom: var(--week-to-days-gap);
  display:grid; grid-template-columns:repeat(7, var(--cal-cell));
  gap:var(--cal-gutter); justify-content:center;
}
.cal-weekday{ font-size: var(--weekday-size); opacity:.7; text-align:center; padding:4px 0; color:#fff; }
.cal-day{
  width: var(--cal-cell); height: var(--cal-cell); aspect-ratio:auto;
  display:grid; place-items:center; border-radius: var(--cal-radius);
  font-weight:700; color:#fff; border:2px solid rgba(255,255,255,.85);
  background:#0b0b0b; transition:.15s ease; cursor:pointer; box-shadow:none;
}
.cal-day:hover{ transform:translateY(-1px); background:#141414; }
.cal-day.disabled{
  position:relative; color:#a7a7a7; pointer-events:none;
  border:2px dashed rgba(121,57,255,.70);
  background:#0a0a0a; box-shadow:0 0 0 2px rgba(121,57,255,.25);
}
.cal-day.disabled::after{
  content:"✕"; position:absolute; inset:0; display:grid; place-items:center;
  color:#7939FF; font-size:16px; font-weight:800;
}
.cal-day.selected{
  background:var(--accent); color:#fff; border-color:var(--accent);
  box-shadow:0 6px 18px rgba(121,57,255,.35);
}

/* ======================== HORÁRIOS ======================== */
#step-time{ row-gap: var(--time-title-gap) !important; }
#step-time > .label{ margin:0 !important; }

.time-scroll{
  width: min(100%, var(--time-max-width));
  margin: 0 auto var(--time-bottom-gap);
  padding: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  background: transparent !important; box-shadow: none !important; backdrop-filter: none !important;
  height: calc( var(--time-visible) * var(--time-item-height)
           + (var(--time-visible) - 1) * var(--time-gap) );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #fff var(--fade-edge), #fff calc(100% - var(--fade-edge)), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #fff var(--fade-edge), #fff calc(100% - var(--fade-edge)), transparent 100%);
  position: relative; /* necessário para centralizar o loader */
}
.time-scroll::-webkit-scrollbar{ width:0; height:0; }
.time-list{
  display:flex; flex-direction:column; gap: var(--time-gap);
  /* >>> Fade suave lista horários (entrada/saída) <<< */
  opacity: 1; transition: opacity .28s ease;
}
.time-item{
  height: var(--time-item-height);
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; background: var(--time-bg);
  border: var(--time-border); color: var(--time-text);
  font-weight:700; box-shadow: inset 0 1px 0 rgba(0,0,0,.25);
  transform-origin:center; will-change: transform, filter, opacity;
  transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.time-item:hover{ transform: translateY(-1px); filter:brightness(1.06); }
.time-item.selected{ background: var(--time-selected-bg); color:#fff; box-shadow:none; }
.time-item.dim{ transform: scale(var(--time-min-scale)); filter: blur(var(--time-edge-blur)); opacity:.75; }
.time-item.ghost{ height: var(--ghost-height); opacity:0; border-color:transparent; pointer-events:none; }

/* ======================== REVIEW ======================== */
#step-review{ display:grid; justify-items:center; row-gap:12px; }
.popup-title{
  margin:0 0 8px; text-align:center;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:700; font-size:27px; color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}

/* >>> Degradê restaurado no pop-up do review <<< */
.review-card{
  position:relative; display:inline-grid; row-gap:8px;
  width:max-content; max-width:min(560px, 92vw);
  padding:30px 34px 34px; border-radius:20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    #0e131f;
  color:#e9eefc; margin-inline:auto;
  box-shadow: 0 -8px 48px 8px rgba(78,99,255,.22),
              0 0 8px 0 rgba(0,0,0,.45),
              inset 0 0 0 1px rgba(255,255,255,.06);
  z-index: 0; overflow: hidden;
}
.review-card::after{
  content:"";
  position:absolute; inset:auto 0 0 0; height:42%;
  background:
    radial-gradient(ellipse at bottom right, rgba(172,92,255,.65) -10%, rgba(79,70,229,0) 70%),
    radial-gradient(ellipse at bottom left,  rgba(56,189,248,.65) -10%, rgba(79,70,229,0) 70%),
    radial-gradient(circle at bottom center, rgba(161,58,229,.6) -20%, rgba(79,70,229,0) 60%);
  filter: blur(30px); opacity: .85;
  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
  pointer-events: none; z-index: -1;
}
.review-line{ margin:0; line-height:1.5; }
.review-label{ color:#aab2d6; font-size:11px; letter-spacing:.2px; text-transform:uppercase; }
.review-value{ font-size:17px; color:#fff; }
.review-hint{ color:#aab2d6; text-align:center; margin:6px 0 8px; }

#step-review .field{
  display:grid; grid-template-columns: 1fr 1fr;
  gap:10px; justify-content:center; width:88%;
}
#step-review .field .liquid-btn{ width:100%; min-height:46px; }

#send-whatsapp.liquid-btn, .liquid-btn.wa{
  background:#25D366; color:#0a0a0a; border-color:rgba(255,255,255,.35);
}
#send-whatsapp.liquid-btn:hover, .liquid-btn.wa:hover{ filter:brightness(1.05); transform:translateY(-1px); }
#send-whatsapp.liquid-btn:active, .liquid-btn.wa:active{ transform:translateY(0); }

/* Kill switch (arrows) */
.time-scroll::before, .time-scroll::after,
#step-time::before, #step-time::after{ content:none !important; display:none !important; }
.time-arrow, .time-fade{ display:none !important; }

/* ======================== RESPONSIVO ======================== */
@media (max-width:820px){
  :root{ --form-width:min(92vw,520px); --stack-gap-vertical:14px; }
}
/* @media (max-width:680px){
  .overlay{ align-items:start; overflow:auto; padding-top:56px; }
  .cal-grid{ gap:6px; }
} */
@media (max-width:480px){
  #step-review{ row-gap:10px; }
  .review-card{ max-width:min(80vw,520px); padding:14px 14px 16px; border-radius:16px; row-gap:6px; }
  .review-label{ font-size:10px; }
  .review-value{ font-size:16px; }
  #step-review .popup-title{ font-size:20px; margin-bottom:6px; }
  #step-review .field .liquid-btn{ padding:10px 18px; }
}
@media (max-width:420px){
  :root{ --form-width:94vw; }
  .cal-grid{ gap:4px; }
  .cal-day{ font-size:12px; }
  .time-scroll{ max-height:60vh; }
}

/* ======================== CONTROLES POR SESSÃO (DESKTOP) ======================== */
#step-name, .step[data-step="1"]{
  --label-whitespace: nowrap;
  --label-size: 30px;
  --label-letter: .25px;
  --input-width: 90%;
  --input-min-h: 25px;
  --input-px: 16px;
  --input-py: 16px;
  --input-font-size: 17px;
  --placeholder-size: 17px;
  --btn-width: 30%;
  --btn-min-h: 48px;
  --btn-px: 22px;
  --btn-py: 14px;
  --back-btn-width: 30%;
  --back-btn-min-h: 44px;
  --back-btn-px: 18px;
  --back-btn-py: 12px;
  --back-btn-mx: auto;
  --back-btn-mt: 6px;
  --step1-prosseguir-offset-y: 22px;
}

#step-phone, .step[data-step="2"]{
  --label-whitespace: nowrap; --label-size: 22px;
  --input-width: 80%; --input-min-h: 48px; --input-px: 20px; --input-py: 14px;
  --input-font-size: 16px; --placeholder-size: 16px;
  --btn-width: 100%; --btn-min-h: 46px; --btn-px: 20px; --btn-py: 12px;
  --back-btn-width: 100%; --back-btn-min-h: 44px; --back-btn-px: 20px; --back-btn-py: 12px;
  --back-btn-mx: auto; --back-btn-mt: 8px;
}

/* >>> Etapa 3 <<< */
#step-pro, .step[data-step="3"]{
  --label-whitespace: nowrap; --label-size: 30px;
  --btn-width: auto; --btn-min-h: 46px; --btn-px: 18px; --btn-py: 12px;
  --back-btn-width: 130px; --back-btn-min-h: 44px; --back-btn-px: 20px; --back-btn-py: 12px;
  --back-btn-mx: auto; --back-btn-mt: 7px;
  --cal-title-size: 20px;
}

#step-schedule, .step[data-step="4"]{
  --label-whitespace: nowrap; --label-size: 30px;
  --back-btn-width: 130px; --back-btn-min-h: 44px; --back-btn-px: 20px; --back-btn-py: 12px;
  --back-btn-mx: auto; --back-btn-mt: 10px;
}

/* Etapa 5 */
#step-time, .step[data-step="5"]{
  --label-whitespace: nowrap; --label-size: 26px;
  --time-visible: 3.5;
}

#step-review, .step[data-step="6"]{
  --label-whitespace: nowrap; --label-size: 30px;
  --btn-width: 100%; --btn-min-h: 46px; --btn-px: 20px; --btn-py: 12px;
  --back-btn-width: 100%; --back-btn-min-h: 46px; --back-btn-px: 20px; --back-btn-py: 12px;
  --back-btn-mx: auto; --back-btn-mt: 0;
}

/* ====== ETAPA 5 — SETAS DE ROLAGEM ====== */
#step-time{
  --time-arrow-size: 36px;
  --time-arrow-gap-top: 0px;
  --time-arrow-gap-bottom: 14px;
  --time-arrow-opacity: .95;
}
#step-time .time-wrap{
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
}
#step-time .time-arrow{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: var(--time-arrow-size);
  height: var(--time-arrow-size);
  padding: 0; border: 0; background: none; cursor: pointer;
  opacity: var(--time-arrow-opacity);
  transition: transform .15s ease, opacity .2s ease, filter .2s ease;
  font-size: 0;
}
#step-time .time-arrow::before{
  content:"";
  display:block; width:100%; height:100%;
  background-repeat:no-repeat; background-position:center; background-size:contain;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'>\
<polyline points='5,4 13,12 5,20'/>\
<polyline points='11,4 19,12 11,20'/>\
</svg>");
}
#time-up{   margin-top: var(--time-arrow-gap-top);    }
#time-down{ margin-top: var(--time-arrow-gap-bottom); }
#time-up::before{   transform: rotate(-90deg); }
#time-down::before{ transform: rotate( 90deg); }
#step-time .time-arrow:hover{ opacity:1; filter:brightness(1.08); }
#time-up:hover{ transform: translateY(-1px); }
#time-down:hover{ transform: translateY( 1px); }
#step-time .time-arrow:active{ transform: translateY(0); }

/* Estado persistente “pressionado” */
.liquid-btn.btn-active{
  background:#0b0b0b !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.35) !important;
  box-shadow:inset 0 0 0 0 rgba(255,255,255,0), 0 8px 22px rgba(0,0,0,.40) !important;
  transform: translateY(0) !important;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.liquid-btn.btn-active::before{ opacity:.18 !important; }

@media (prefers-reduced-motion: reduce){
  .liquid-btn, .liquid-btn::before{ transition:none !important; }
}

/* ===================== MOBILE – FIXES + CONTROLES ===================== */
@media (max-width: 680px){
  .calendar { padding-inline: 12px; box-sizing: border-box; }

  #cal-week,
  .cal-grid{
    width: 100%;
    box-sizing: border-box;
    grid-template-columns: repeat(7, 1fr); 
    gap: 6px;                               
    justify-content: center;               
  }

  .cal-weekday{
    font-size: 14px;
    line-height: 1.2;
    padding: 6px 0;
    text-align: center;
  }

  .cal-day{
    width: 100%;
    aspect-ratio: 1 / 1;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;             
    line-height: 1;         
    display: flex;          
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;  
    transform: translateZ(0);            
    will-change: transform;              
}


  .cal-day.disabled{ position: relative; }
  .cal-day.disabled::after{ pointer-events: none; }
  
}
@media (max-width: 480px){
  .overlay{
    align-items: center !important;
    justify-items: center !important;
    padding-top: 0 !important;
    min-height: 100svh;
  }
  html, body { overflow-x: hidden; }
  :root{ --form-width: min(94vw, 420px); }
  .label{ white-space: normal; text-wrap: balance; }
  .field input, .liquid-btn{ box-sizing: border-box; max-width: 100%; }

  #step-name, .step[data-step="1"]{
    --label-size: 22px;
    --input-px: 16px; --input-py: 16px;
    --input-font-size: 17px; --input-width: 90%;
  }

  #step-pro, .step[data-step="3"]{
    --label-size: 22px; --btn-min-h: 46px;
  }

  .calendar{ width: 100%; padding: 0 12px; box-sizing: border-box; }
  .cal-grid, #cal-week{ grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
  .cal-weekday{ font-size: 14px; }
  .cal-day{ width:auto; height:auto; aspect-ratio:1 / 1; border-radius:12px; }
  .cal-title-strong{ font-size: 18px; }

  #step-time, .step[data-step="5"]{
    --time-max-width: 340px; --time-item-height: 60px;
    --time-gap: 10px; --fade-edge: 44px;
  }
  .time-scroll{ width:100%; max-width: var(--time-max-width); margin: 0 auto var(--time-bottom-gap); overflow-x: hidden; }
  .time-list{ gap: var(--time-gap); }
  .time-item{ height: var(--time-item-height); width: 100%; box-sizing: border-box; }

  /* reativar setas no mobile */
  #step-time .time-arrow{ display: inline-flex !important; }

  #step-review .popup-title{ font-size: 25px; }
  .review-card{ padding: 14px 14px 16px; border-radius: 16px; }
  #step-review .field{ width: 90%; gap: 10px; }
}
@media (max-width: 320px){
  .cal-grid, #cal-week{ gap: 5px; }
  .cal-weekday{ font-size: 13px; }
  .cal-day{ border-radius: 10px; }
  .cal-title-strong{ font-size: 17px; }
}

/* ============ Loader Espiral (8 pontos) – usado pelo JS ============ */
@keyframes spiral-breath {
  0%   { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
  35%  { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 1; }
  70%  { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}
.spiral-wrap{ position:relative; width:64px; height:64px; }
.spiral-dot{
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; border-radius:999px; background:#fff;
  transform: translate(var(--tx), var(--ty)) scale(0);
  animation: spiral-breath 1.5s ease-in-out infinite;
}

/* Holder centralizado do loader + transições de entrada/saída */
#time-scroll .spiral-holder{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  opacity: 0; transform: scale(.96);
  transition: opacity .22s ease, transform .22s ease; /* sai levemente antes da lista entrar */
}

/* Exibe o loader com fade + leve scale quando data-loading=1 */
#time-scroll[data-loading="1"] .spiral-holder{
  opacity: 1; transform: scale(1);
}

/* Lista de horários com fade + leve scale (entra depois do loader sair) */
#time-scroll .time-list{
  opacity: 1; transform: scale(1);
  transition: opacity .32s ease .14s, transform .32s ease .14s; /* delay maior para cruzar com o fade do loader */
  will-change: opacity, transform;
}

/* Enquanto carrega: lista some sem delay (sai rápido), loader aparece */
#time-scroll[data-loading="1"] .time-list{
  opacity: 0; transform: scale(.985);
  transition-delay: 0s; /* sai imediatamente quando entra em loading */
  pointer-events: none;
}

/* Itens entram/saem suavemente junto com o container */
#time-scroll .time-item{
  opacity: 1; transform: translateY(0);
  transition: opacity .32s ease, transform .32s ease;
}

/* Durante o loading, prepare itens para entrada suave */
#time-scroll[data-loading="1"] .time-item{
  opacity: 0; transform: translateY(4px);
}

/* ===================== FIM DO CSS ORIGINAL ===================== */


/* ========== POP-UP INDEPENDENTE (STEP 2) — ANIMAÇÃO DE ENTRADA ==========
   Não altera o layout de cima: vira absoluto dentro do container da etapa. */
#step-phone .field{ position: relative; }  /* âncora para o pop-up */

@keyframes alert-pop-in {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
  60%  { opacity: 1; transform: translate(-50%, -2px) scale(1.02); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* Elemento gerado pelo JS: .alert-msg */
.overlay .form #step-phone .alert-msg{
  position: absolute;
  left: 50%;
  top: calc(100% + 18px);              /* aparece logo abaixo dos botões */
  transform: translate(-50%, 0);
  z-index: 20;                          /* acima do conteúdo da etapa */
  pointer-events: auto;

  /* Tamanho independente (não mexe no de cima) */
  width: clamp(520px, 64vw, 520px);
  max-width: 92vw;
  padding: 18px 22px;
  border-radius: 20px;
  color:#e9eefc;

  /* Degradê do review */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)),
    #0e131f;
  box-shadow:
    0 -8px 36px 6px rgba(78,99,255,.20),
    0 0 6px 0 rgba(0,0,0,.40),
    inset 0 0 0 1px rgba(255,255,255,.06);

  /* ANIMAÇÃO DE ENTRADA */
  animation: alert-pop-in .48s cubic-bezier(.2,.8,.2,1);
}

/* Glow inferior do card */
.overlay .form #step-phone .alert-msg::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:36%;
  background:
    radial-gradient(ellipse at bottom right, rgba(172,92,255,.65) -10%, rgba(79,70,229,0) 70%),
    radial-gradient(ellipse at bottom left,  rgba(56,189,248,.65) -10%, rgba(79,70,229,0) 70%),
    radial-gradient(circle at bottom center, rgba(161,58,229,.6) -20%, rgba(79,70,229,0) 60%);
  filter: blur(28px); opacity:.85;
  border-bottom-left-radius:20px; border-bottom-right-radius:20px;
  pointer-events:none;
  z-index:-1;
}

/* Tipografia interna do alerta */
.overlay .form #step-phone .alert-msg > div > div:first-child{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:700; font-size:20px; text-align:center;
  white-space:nowrap; margin:2px 0 12px; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}

/* Alinhamento das linhas (hanging indent) */
:root{ --alert-label-col: 112px; }
.overlay .form #step-phone .alert-msg > div > div:not(:first-child){
  font-size:16px; color:#fff; line-height:1.55; margin:6px 0;
  padding-left: var(--alert-label-col);
  text-indent: calc(-1 * var(--alert-label-col));
  word-break: break-word;
}
.overlay .form #step-phone .alert-msg > div > div:not(:first-child) strong{
  font-weight:700; color:#fff; margin-left:8px;
}

/* Responsivo do pop-up (sem tocar no topo) */
@media (max-width: 520px){
  .overlay .form #step-phone .alert-msg{
    width: min(92vw, 640px);
    padding: 16px 18px;
  }
  .overlay .form #step-phone .alert-msg > div > div:first-child{ font-size:19px; }
  :root{ --alert-label-col: 100px; }
}