/* Popup da lista de espera: o mesmo formulário da página de lista de espera, sem tirar
   o visitante da página de vendas. Reaproveita os tokens do site. */

.wl-modal {
  width: min(32rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: auto;
}

.wl-modal::backdrop { background: rgb(61 40 49 / 55%); backdrop-filter: blur(3px); }

.wl-modal[open] { animation: wl-in var(--motion-base) var(--ease); }

@keyframes wl-in {
  from { opacity: 0; transform: translateY(.75rem); }
  to { opacity: 1; transform: none; }
}

html:has(.wl-modal[open]) { overflow: hidden; }

.wl-card { position: relative; padding: clamp(1.6rem, 5vw, 2.4rem); }

.wl-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  color: var(--muted);
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.wl-close:hover { color: var(--text); background: var(--button); }
.wl-close:focus-visible,
.wl-modal .button:focus-visible { outline: 2px solid var(--wine); outline-offset: 3px; }

.wl-title { margin: 0 2rem .6rem 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; line-height: 1.15; }
.wl-lede { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.55; }

.wl-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.wl-form[hidden],
.wl-body[hidden],
.wl-success[hidden] { display: none; }

.wl-field { display: grid; gap: .4rem; }
.wl-field label { color: var(--muted); font-family: var(--font-label); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }

.wl-field input {
  width: 100%;
  min-height: 3rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--bg);
  font: inherit;
  font-size: .9rem;
}

/* Telefone com seletor de país (telefone-pais.js): seletor à esquerda, número à direita. */
.tel-campo { display: flex; gap: .5rem; }
.tel-campo .tel-pais {
  flex: 0 0 auto;
  width: 6.4rem;
  max-width: 42%;
  min-height: 3rem;
  padding: .7rem .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--bg);
  font: inherit;
  font-size: .85rem;
}
.tel-campo input[type="tel"] { flex: 1 1 auto; min-width: 0; }
.tel-campo .tel-pais:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; border-color: var(--wine); }

.wl-field input:focus-visible { outline: 2px solid var(--wine); outline-offset: 1px; border-color: var(--wine); }

.wl-form .button { width: 100%; margin-top: .2rem; }
.wl-form .button[disabled] { opacity: .6; cursor: progress; }

.wl-hp { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }

.wl-consent { display: flex; align-items: flex-start; gap: .7rem; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.wl-consent input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--wine); }

.wl-note { margin: 0; color: var(--quiet); font-size: .78rem; line-height: 1.6; }
.wl-status { margin: 0; min-height: 1.2rem; color: var(--muted); font-size: .82rem; }
.wl-status[data-tone="error"] { color: var(--wine); }

.wl-success p { margin: 0 0 1.4rem; color: var(--muted); font-size: .94rem; line-height: 1.6; }
.wl-success a { color: var(--wine); text-decoration: underline; text-underline-offset: 2px; }
.wl-success:focus-visible { outline: 2px solid var(--wine); outline-offset: 6px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .wl-modal[open] { animation: none; }
}

/* Seção #planos com as inscrições fechadas: o mesmo formulário do popup dentro de um card
   `.plan`, e ao lado o card vinho que explica a abertura. Herda os tokens `--plan-*`. */
.espera-grid .plan { min-height: 0; }
.espera-lede { margin: 1.1rem 0 0; max-width: 56ch; color: var(--plan-quiet, var(--muted)); font-size: .94rem; line-height: 1.55; }

.espera-points { display: grid; margin: 1.6rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--plan-rule); }
.espera-points li { position: relative; padding: .6rem 0 .6rem 1.35rem; border-bottom: 1px solid var(--plan-rule); color: var(--plan-quiet); font-size: .94rem; }
.espera-points li::before { content: "—"; position: absolute; left: 0; color: var(--plan-accent); }

.espera-success { margin-top: 1.5rem; }
.espera-success h3 { margin: 0 0 .7rem; }
.espera-success p { margin: 0 0 .8rem; }
.espera-success p:last-child { margin-bottom: 0; }
.espera-grid { align-items: start; }