/*
 * zevon-fields — CSS.
 *
 * Mude o visual SÓ por variáveis (--zf-*), sem sobrescrever seletor. Para mirar uma peça, use as partes estáveis:
 *   [data-zf-part="input" | "country-button" | "panel" | "option" | "error" | "hint" …]
 *
 * Regras (cicatrizes U5-U8 e lição do plugin):
 * - reset com :where() (especificidade zero): classe do consumidor sempre vence;
 * - cada controle declara a própria fonte e o próprio cursor (o Tailwind v4 tirou o cursor do button);
 * - uma casca só (.zf-control) com :focus-within; altura vem do padding;
 * - input com fonte >= 16px (menos que isso dá zoom no iOS);
 * - funciona sobre fundo escuro arbitrário (tema do host).
 */

/* Variáveis base: no campo (.zf) e nos elementos AVULSOS (attach em <input> solto, errorEl/hint fora do campo).
   Dentro de um .zf eles HERDAM do campo — redeclarar aqui travava o tema: com o campo claro e o sistema escuro,
   ou com o campo escuro forçado, o <input> ficava com a cor do tema errado (bug de 04/10). */
.zf,
.zf-input:not(.zf .zf-input),
.zf-error:not(.zf .zf-error),
.zf-hint:not(.zf .zf-hint) {
  --zf-font: inherit;
  --zf-font-size: 16px;
  --zf-text: #1f2328;
  --zf-muted: #6b7280;
  --zf-bg: #ffffff;
  --zf-border: #d9d9d3;
  --zf-border-hover: #b9b9b2;
  --zf-focus: #2563eb;
  --zf-focus-ring: rgb(37 99 235 / 0.22);
  --zf-error: #b42318;
  --zf-error-ring: rgb(180 35 24 / 0.18);
  --zf-radius: 8px;
  --zf-pad-y: 10px;
  --zf-pad-x: 12px;
  --zf-gap: 8px;
  --zf-touch: 44px;
  --zf-panel-bg: var(--zf-bg);
  --zf-panel-shadow: 0 12px 32px rgb(15 23 42 / 0.16), 0 2px 6px rgb(15 23 42 / 0.08);
  --zf-panel-max-height: 300px;
  --zf-option-hover: #f2f4f7;
  --zf-option-active: #e8effd;
  --zf-separator: #ececea;
  --zf-hint-bg: #fff8e6;
  --zf-hint-text: #6b4e00;
  --zf-z: 1000;
  --zf-flag-w: 22px;
  --zf-duration: 120ms;
}

/* Tema escuro: automático pelo sistema, forçado com data-zf-theme="dark", ou pela CLASSE da página com
   data-zf-theme="class" (segue `.dark` ou `[data-theme="dark"]` num ancestral, como o Tailwind; ignora o sistema).
   O modo "class" existe porque o sistema escuro numa página clara deixava o campo escuro (o TC é .dark por classe).
   O .zf-input só entra aqui quando é AVULSO (attach num <input> solto). Dentro de um .zf ele herda as
   variáveis do campo — senão, num campo com tema claro, o input redefinia --zf-text para claro e o número
   digitado sumia no fundo branco (bug de 04/10, mesmo padrão da linha do input avulso mais abaixo). */
@media (prefers-color-scheme: dark) {
  .zf:not([data-zf-theme="light"]):not([data-zf-theme="class"]),
  .zf-input:not([data-zf-theme="light"]):not([data-zf-theme="class"]):not(.zf .zf-input) {
    --zf-text: #e6e8eb;
    --zf-muted: #9aa3ae;
    --zf-bg: #15181d;
    --zf-border: #343a42;
    --zf-border-hover: #4a525c;
    --zf-focus: #6d9cff;
    --zf-focus-ring: rgb(109 156 255 / 0.28);
    --zf-error: #ff8a80;
    --zf-error-ring: rgb(255 138 128 / 0.22);
    --zf-option-hover: #1f242b;
    --zf-option-active: #22324d;
    --zf-separator: #2a3038;
    --zf-hint-bg: #2b2412;
    --zf-hint-text: #f3d48b;
  }
}
/* Avulsos com seletor explícito: a base deles é `.zf-input:not(.zf .zf-input)` (0,3,0); com :where() a regra
   escura ficava em (0,2,0) e perdia — o texto do input avulso não escurecia (pego pelo e2e). */
.zf[data-zf-theme="dark"],
.zf-input[data-zf-theme="dark"]:not(.zf .zf-input),
.zf-error[data-zf-theme="dark"]:not(.zf .zf-error),
.zf-hint[data-zf-theme="dark"]:not(.zf .zf-hint),
:where(.dark, [data-theme="dark"]) .zf[data-zf-theme="class"],
:where(.dark, [data-theme="dark"]) .zf-input[data-zf-theme="class"]:not(.zf .zf-input),
:where(.dark, [data-theme="dark"]) .zf-error[data-zf-theme="class"]:not(.zf .zf-error),
:where(.dark, [data-theme="dark"]) .zf-hint[data-zf-theme="class"]:not(.zf .zf-hint) {
  --zf-text: #e6e8eb;
  --zf-muted: #9aa3ae;
  --zf-bg: #15181d;
  --zf-border: #343a42;
  --zf-border-hover: #4a525c;
  --zf-focus: #6d9cff;
  --zf-focus-ring: rgb(109 156 255 / 0.28);
  --zf-error: #ff8a80;
  --zf-error-ring: rgb(255 138 128 / 0.22);
  --zf-option-hover: #1f242b;
  --zf-option-active: #22324d;
  --zf-separator: #2a3038;
  --zf-hint-bg: #2b2412;
  --zf-hint-text: #f3d48b;
}

.zf[data-zf-size="sm"] { --zf-pad-y: 6px; --zf-pad-x: 10px; --zf-touch: 36px; }
.zf[data-zf-size="lg"] { --zf-pad-y: 14px; --zf-pad-x: 14px; --zf-touch: 52px; }

/* ----------------------------------------------------------------------------------------- reset (0,0,0) */
:where(.zf) *,
:where(.zf) *::before,
:where(.zf) *::after { box-sizing: border-box; }
:where(.zf) button { margin: 0; background: none; border: 0; padding: 0; color: inherit; }
:where(.zf) ul { margin: 0; padding: 0; list-style: none; }
:where(.zf) img { display: block; max-width: none; }

/* ----------------------------------------------------------------------------------- estrutural (sempre) */
.zf { position: relative; display: block; width: 100%; min-width: 0; }
.zf-control { display: flex; align-items: stretch; width: 100%; min-width: 0; }
.zf .zf-input { flex: 1 1 auto; min-width: 0; width: 100%; }
.zf-country-button { display: inline-flex; align-items: center; flex: 0 0 auto; }
.zf-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: var(--zf-z);
  display: flex; flex-direction: column; max-height: var(--zf-panel-max-height); overflow: hidden;
}
.zf[data-zf-placement="top"] .zf-panel { top: auto; bottom: calc(100% + 4px); }
.zf-panel[hidden], .zf-backdrop[hidden], .zf-hint[hidden], .zf-error[hidden], .zf-option[hidden], .zf-separator[hidden], .zf-empty[hidden] { display: none; }
.zf-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
.zf-panel-head { display: flex; align-items: center; flex: 0 0 auto; }
.zf-search { flex: 1 1 auto; min-width: 0; }
.zf-close { display: none; }
.zf-backdrop { display: none; }

/* Celular: folha inferior (bottom sheet), acima do teclado virtual. */
@media (max-width: 479.98px) {
  /* :not([hidden]): sem isso esta regra (0,3,0) vencia `.zf-backdrop[hidden]` (0,2,0) e, depois de escolher o país
     no celular, o fundo escuro ficava cobrindo e bloqueando a tela (pego pelo e2e do Shadow DOM, 05/10). */
  .zf[data-zf-sheet] .zf-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: var(--zf-z); background: rgb(0 0 0 / 0.4);
  }
  .zf[data-zf-sheet] .zf-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: calc(var(--zf-z) + 1);
    max-height: min(80vh, calc(var(--zf-vvh, 100vh) - 24px));
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .zf[data-zf-sheet] .zf-close { display: inline-flex; }
}

/* --------------------------------------------------------------------- aparência (desligada com unstyled) */
.zf:not([data-zf-unstyled]) .zf-control {
  background: var(--zf-bg);
  border: 1px solid var(--zf-border);
  border-radius: var(--zf-radius);
  transition: border-color var(--zf-duration), box-shadow var(--zf-duration);
}
.zf:not([data-zf-unstyled]) .zf-control:hover { border-color: var(--zf-border-hover); }
.zf:not([data-zf-unstyled]) .zf-control:focus-within { border-color: var(--zf-focus); box-shadow: 0 0 0 3px var(--zf-focus-ring); }
.zf:not([data-zf-unstyled])[data-zf-invalid] .zf-control { border-color: var(--zf-error) !important; /* erro vence o tema, de propósito (U6) */ }
.zf:not([data-zf-unstyled])[data-zf-invalid] .zf-control:focus-within { box-shadow: 0 0 0 3px var(--zf-error-ring); }

.zf:not([data-zf-unstyled]) .zf-country-button {
  gap: 6px;
  min-height: var(--zf-touch);
  padding: 0 8px 0 var(--zf-pad-x);
  border-right: 1px solid var(--zf-border);
  border-radius: var(--zf-radius) 0 0 var(--zf-radius);
  font-family: var(--zf-font);
  font-size: var(--zf-font-size);
  color: var(--zf-text);
}
.zf .zf-country-button:not(:disabled) { cursor: pointer; }
.zf:not([data-zf-unstyled]) .zf-country-button:focus-visible { outline: 2px solid var(--zf-focus); outline-offset: -2px; }
.zf .zf-dial { font-variant-numeric: tabular-nums; color: var(--zf-text); /* contraste explícito: o +55 sumia no escuro (U6) */ }
.zf .zf-chevron { width: 8px; height: 8px; border-right: 2px solid var(--zf-muted); border-bottom: 2px solid var(--zf-muted); transform: translateY(-2px) rotate(45deg); }
.zf[data-zf-open] .zf-chevron { transform: translateY(2px) rotate(-135deg); }

.zf .zf-flag { display: inline-flex; width: var(--zf-flag-w); height: calc(var(--zf-flag-w) * 0.75); flex: 0 0 auto; overflow: hidden; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); }
.zf .zf-flag img { width: 100%; height: 100%; object-fit: cover; }
.zf .zf-flag-fallback { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; font: 600 9px/1 system-ui, sans-serif; color: var(--zf-muted); background: var(--zf-option-hover); }

/* Input: vale para o do telefone e para qualquer <input> ligado por attach (classe zf-input). */
.zf:not([data-zf-unstyled]) .zf-input,
.zf-input:where(:not(.zf .zf-input)) {
  font-family: var(--zf-font);
  font-size: var(--zf-font-size);
  color: var(--zf-text);
}
.zf:not([data-zf-unstyled]) .zf-input {
  min-height: var(--zf-touch);
  padding: var(--zf-pad-y) var(--zf-pad-x);
  background: transparent;
  border: 0;
  border-radius: 0 var(--zf-radius) var(--zf-radius) 0;
  outline: none;
}
.zf .zf-input::placeholder { color: var(--zf-muted); opacity: 1; }
.zf-input[data-zf-checking] { background-image: linear-gradient(90deg, transparent, var(--zf-focus-ring), transparent); background-size: 200% 100%; animation: zf-checking 1.2s linear infinite; }
@keyframes zf-checking { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.zf:not([data-zf-unstyled]) .zf-panel {
  background: var(--zf-panel-bg);
  color: var(--zf-text);
  border: 1px solid var(--zf-border);
  border-radius: var(--zf-radius);
  box-shadow: var(--zf-panel-shadow);
  font-family: var(--zf-font);
}
.zf:not([data-zf-unstyled]) .zf-panel-head { gap: var(--zf-gap); padding: 8px; border-bottom: 1px solid var(--zf-separator); }
.zf:not([data-zf-unstyled]) .zf-search {
  min-height: 40px; padding: 8px 10px;
  font-family: var(--zf-font); font-size: var(--zf-font-size); color: var(--zf-text);
  background: var(--zf-bg); border: 1px solid var(--zf-border); border-radius: calc(var(--zf-radius) - 2px); outline: none;
}
.zf:not([data-zf-unstyled]) .zf-search:focus { border-color: var(--zf-focus); box-shadow: 0 0 0 3px var(--zf-focus-ring); }
.zf:not([data-zf-unstyled]) .zf-close { align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 24px; line-height: 1; color: var(--zf-muted); border-radius: 50%; cursor: pointer; }
.zf:not([data-zf-unstyled]) .zf-list { padding: 4px; }
.zf:not([data-zf-unstyled]) .zf-option {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 8px 10px;
  border-radius: calc(var(--zf-radius) - 2px);
  font-size: 15px; cursor: pointer;
}
.zf:not([data-zf-unstyled]) .zf-option:hover { background: var(--zf-option-hover); }
.zf:not([data-zf-unstyled]) .zf-option[data-zf-active] { background: var(--zf-option-active); }
.zf:not([data-zf-unstyled]) .zf-option[aria-selected="true"] { font-weight: 600; }
.zf .zf-option-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zf .zf-option .zf-dial { color: var(--zf-muted); }
.zf:not([data-zf-unstyled]) .zf-separator { height: 1px; margin: 4px 6px; background: var(--zf-separator); }
.zf:not([data-zf-unstyled]) .zf-empty { padding: 16px; text-align: center; color: var(--zf-muted); font-size: 14px; }

/* Erro e dica: servem ao telefone e aos campos ligados por attach. */
.zf-error { display: block; margin-top: 6px; font-family: var(--zf-font); font-size: 14px; line-height: 1.35; color: var(--zf-error); }
.zf-hint {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-top: 6px; padding: 8px 10px;
  font-family: var(--zf-font); font-size: 14px; line-height: 1.35;
  color: var(--zf-hint-text); background: var(--zf-hint-bg); border-radius: calc(var(--zf-radius) - 2px);
}
.zf-hint-button {
  font: inherit; font-weight: 600; color: var(--zf-focus);
  background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px;
}
.zf-hint-button:not(:disabled) { cursor: pointer; }
.zf-input[aria-invalid="true"]:where(:not(.zf .zf-input)) { border-color: var(--zf-error); }

@media (prefers-reduced-motion: reduce) {
  .zf *, .zf-input { transition: none !important; animation: none !important; }
}