/* NetStore Auth: telefone com país (ns-phone.js), no painel de entrada, nos detalhes da conta e no checkout.
 * O Astra e o ns-checkout.css pegam input e button com seletores fortes e !important: as regras daqui levam
 * :is(#ns-phone, …), que conta como id, para ganhar sem depender da ordem dos arquivos. */

.ns-phone{
  --ns-font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ns-emoji:'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  --ns-ink:#1B2430; --ns-dim:#5B6672; --ns-mute:#8A94A0; --ns-line:#E3E8E8;
  --ns-teal-strong:#0B7A6F; --ns-teal-tint:#E7F6F4; --ns-surface:#F6F8F8; --ns-error:#C4282D;
  position:relative; display:flex; align-items:stretch; width:100%; margin:0; border-radius:12px;
  font-family:var(--ns-font); transition:box-shadow .12s;
}
.ns-phone *, .ns-phone *::before, .ns-phone *::after{ box-sizing:border-box; }
.ns-phone [hidden]{ display:none!important; }
.woocommerce-input-wrapper:has(> .ns-phone){ display:block; }
.ns-phone:focus-within{ box-shadow:0 0 0 4px rgba(11,122,111,.14); }

.ns-phone-flag{ font-family:var(--ns-emoji); font-size:20px; line-height:1; }
.ns-flags-font .ns-phone-flag{ font-family:'NS Flags', var(--ns-emoji); }

/* botão do país, colado ao campo */
.ns-phone .ns-phone-cc:is(#ns-phone, .ns-phone-cc){
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; width:auto!important; min-width:0; height:auto!important;
  min-height:0; margin:0!important; padding:0 10px 0 12px!important; font:600 15px/1 var(--ns-font)!important;
  color:var(--ns-ink)!important; background:var(--ns-surface)!important; border:1.5px solid var(--ns-line)!important;
  border-right:0!important; border-radius:12px 0 0 12px!important; box-shadow:none!important; cursor:pointer;
  text-transform:none!important; letter-spacing:0!important; font-variant-numeric:tabular-nums;
}
.ns-phone .ns-phone-cc:is(#ns-phone, .ns-phone-cc):hover{ background:var(--ns-teal-tint)!important; }
.ns-phone .ns-phone-cc:is(#ns-phone, .ns-phone-cc):focus-visible{ outline:2px solid var(--ns-teal-strong); outline-offset:-3px; }
.ns-phone .ns-phone-seta{ color:var(--ns-mute); transition:transform .15s; }
.ns-phone.is-open .ns-phone-seta{ transform:rotate(180deg); }

.ns-phone input.ns-phone-num:is(#ns-phone, .ns-phone-num){
  flex:1 1 auto; min-width:0; width:auto!important; margin:0!important;
  border-top-left-radius:0!important; border-bottom-left-radius:0!important; box-shadow:none!important;
  font-variant-numeric:tabular-nums;
}
.ns-phone:focus-within .ns-phone-cc:is(#ns-phone, .ns-phone-cc),
.ns-phone:focus-within input.ns-phone-num:is(#ns-phone, .ns-phone-num){ border-color:var(--ns-teal-strong)!important; }
.ns-phone.is-invalid .ns-phone-cc:is(#ns-phone, .ns-phone-cc),
.ns-phone.is-invalid input.ns-phone-num:is(#ns-phone, .ns-phone-num){ border-color:var(--ns-error)!important; }
.ns-phone.is-invalid:focus-within{ box-shadow:0 0 0 4px rgba(196,40,45,.12); }

.ns-phone-erro{ margin:6px 0 0; font:500 13px/1.4 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:#C4282D; }

/* lista de países: abaixo do campo no computador e no tablet */
.ns-phone .ns-phone-pop{
  position:absolute; z-index:1000; top:calc(100% + 6px); left:0; width:100%; min-width:260px; max-width:380px;
  padding:8px; background:#fff; border:1px solid var(--ns-line); border-radius:14px;
  box-shadow:0 18px 40px -16px rgba(27,36,48,.35); text-align:left;
}
.ns-phone .ns-phone-topo{ display:none; }
.ns-phone input.ns-phone-busca:is(#ns-phone, .ns-phone-busca){
  display:block; width:100%!important; height:42px!important; margin:0 0 6px!important; padding:0 12px 0 38px!important;
  font:500 15px/1 var(--ns-font)!important; color:var(--ns-ink)!important; border:1.5px solid var(--ns-line)!important;
  border-radius:10px!important; box-shadow:none!important; outline:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238A94A0' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50%!important;
}
.ns-phone input.ns-phone-busca:is(#ns-phone, .ns-phone-busca):focus{ border-color:var(--ns-teal-strong)!important; }
.ns-phone input.ns-phone-busca::-webkit-search-cancel-button{ -webkit-appearance:none; }
.ns-phone .ns-phone-lista{ max-height:264px; margin:0; padding:0; list-style:none; overflow-y:auto; overscroll-behavior:contain; }
.ns-phone .ns-phone-op{
  display:flex; align-items:center; gap:10px; margin:0; padding:9px 10px; font-size:14.5px; line-height:1.3;
  color:var(--ns-ink); border-radius:8px; cursor:pointer; list-style:none;
}
.ns-phone .ns-phone-op:hover, .ns-phone .ns-phone-op.is-active{ background:var(--ns-teal-tint); }
.ns-phone .ns-phone-op[aria-selected="true"]{ font-weight:700; }
.ns-phone .ns-phone-op[aria-selected="true"] .ns-phone-cod{ color:var(--ns-teal-strong); }
.ns-phone .ns-phone-nome{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ns-phone .ns-phone-cod{ flex:0 0 auto; color:var(--ns-dim); font-variant-numeric:tabular-nums; }
.ns-phone .ns-phone-nada{ margin:10px; font-size:14px; color:var(--ns-dim); }

/* no painel de entrada o campo segue o espaçamento dos outros */
.ns-auth .ns-phone{ margin:0 0 12px; }
.ns-auth .ns-phone + .ns-phone-erro{ margin:-6px 0 12px; }

/* celular: a lista ocupa a tela, com a busca no topo e linhas separadas */
@media (max-width:600px){
  .ns-phone .ns-phone-pop{
    position:fixed; inset:0; z-index:100000; display:flex; flex-direction:column; width:auto; min-width:0; max-width:none;
    padding:0 16px max(16px, env(safe-area-inset-bottom)); border:0; border-radius:0; box-shadow:none;
  }
  .ns-phone .ns-phone-topo{ display:flex; flex:0 0 auto; align-items:center; justify-content:space-between; height:60px; }
  .ns-phone .ns-phone-titulo{ font:800 19px/1 var(--ns-font); letter-spacing:-.01em; color:var(--ns-ink); }
  .ns-phone .ns-phone-fecha:is(#ns-phone, .ns-phone-fecha){
    display:inline-flex; align-items:center; justify-content:center; width:44px!important; height:44px!important; min-height:0;
    margin:0 -10px 0 0!important; padding:0!important; color:var(--ns-ink)!important; background:none!important; border:0!important;
    border-radius:12px!important; box-shadow:none!important;
  }
  .ns-phone input.ns-phone-busca:is(#ns-phone, .ns-phone-busca){ flex:0 0 auto; height:46px!important; font-size:16px!important; margin-bottom:8px!important; }
  .ns-phone .ns-phone-lista{ flex:1 1 auto; max-height:none; }
  .ns-phone .ns-phone-op{ min-height:52px; padding:12px 6px; font-size:16px; border-bottom:1px solid var(--ns-line); border-radius:0; }
  .ns-phone .ns-phone-op:hover{ background:none; }
  html.ns-phone-travado, html.ns-phone-travado body{ overflow:hidden; }
}