/* Ideias de domínio com IA na caixa de registo — ver static/js/dominio-ia.js
   (19/09/2026). Igual nas 4 marcas. As cores são as da casa: as do menu
   (--rlxm-carvao, --rlxm-vermelho, --rlxm-vivo) e o NOSSO AZUL, o do botão
   «Consulte» (#00acc8, o mesmo nas 4 marcas) — pedido do dono. */
.domain-search-form[data-dia]{
  --dia-carvao:var(--rlxm-carvao,#1f2835);
  --dia-vermelho:var(--rlxm-vermelho,#d10303);
  --dia-vivo:var(--rlxm-vivo,#f00843);
  --dia-azul:#00acc8;
  --dia-degrade:linear-gradient(90deg,var(--dia-azul),var(--dia-carvao) 40%,var(--dia-vermelho) 75%,var(--dia-vivo));
}
.domain-search-form[data-dia] .input-domain-wrapper{position:relative}
.domain-search-form[data-dia] .input-domain{padding-right:58px !important}

@property --dia-ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes dia-borda{to{--dia-ang:360deg}}

/* ---- o botão: lupa + estrelinhas, dentro de um anel nas cores da casa ---- */
.dia-bt{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;color:var(--dia-carvao);
  border:0;background:#fff;display:flex;align-items:center;justify-content:center;
  transition:box-shadow .15s,transform .15s}
/* O ANEL é uma peça própria, com o degradê assimétrico (carvão → vermelho →
   vivo → claro): ao passar o rato dá UMA VOLTA INTEIRA de 360° à volta da
   lupa (dono, 19/09/2026) — girar o degradê por dentro quase não se via. */
.dia-anel{position:absolute;inset:0;border-radius:50%;padding:2px;pointer-events:none;
  background:conic-gradient(var(--dia-azul),var(--dia-carvao) 100deg,var(--dia-vermelho) 190deg,var(--dia-vivo) 260deg,#8fdcea 320deg,var(--dia-azul) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@keyframes dia-volta{to{transform:rotate(360deg)}}
/* gira SEM PARAR enquanto o rato estiver por cima (dono, 19/09/2026) */
.dia-bt:hover .dia-anel,.dia-bt:focus-visible .dia-anel{animation:dia-volta 1.5s linear infinite}
.dia-bt:hover,.dia-bt:focus-visible{box-shadow:0 0 0 4px rgba(209,3,3,.14);outline:0;transform:translateY(-50%) scale(1.06)}
.dia-bt svg{position:relative;width:22px;height:22px;overflow:visible}
.dia-bt .dia-brilho{fill:var(--dia-vermelho);transform-origin:18.3px 5px;transition:transform .3s}
.dia-bt:hover .dia-brilho,.dia-bt:focus-visible .dia-brilho{transform:rotate(90deg) scale(1.1)}
/* a dica por cima, em carvão */
.dia-bt::after{content:attr(data-dica);position:absolute;bottom:calc(100% + 12px);right:-6px;left:auto;
  transform:translateY(4px);background:var(--dia-carvao);color:#fff;font:500 13px/1.2 Ubuntu,arial,sans-serif;
  padding:8px 12px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.dia-bt::before{content:'';position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px);
  border:6px solid transparent;border-top-color:var(--dia-carvao);border-bottom:0;opacity:0;transition:opacity .15s,transform .15s}
.dia-bt:hover::after,.dia-bt:focus-visible::after{opacity:1;transform:none}
.dia-bt:hover::before,.dia-bt:focus-visible::before{opacity:1;transform:translate(-50%,0)}

/* ---- o campo transformado em caixa de IA ---- */
.domain-search-form.dia-on{align-items:flex-start}
.domain-search-form.dia-on .input-domain-wrapper{display:block !important;height:auto !important;
  box-sizing:border-box;padding:14px 18px 12px;border:0 !important;border-radius:12px;background:#fff !important;
  box-shadow:0 10px 30px rgba(31,40,53,.14)}
/* o anel da caixa: por DENTRO dela, para a animação da altura (que corta o
   que sai da caixa) não o apanhar; desenha-se a partir do ícone, à direita */
.domain-search-form.dia-on .input-domain-wrapper::before{content:'';position:absolute;inset:0;border-radius:12px;
  padding:2px;pointer-events:none;
  /* o contorno GIRA sem parar à volta da caixa, como o anel do ícone (dono,
     19/09/2026): um degradê cónico cujo ângulo roda. Sem @property (navegador
     antigo) fica parado, com as mesmas cores. */
  background:conic-gradient(from var(--dia-ang),var(--dia-azul),var(--dia-carvao) 90deg,var(--dia-vermelho) 180deg,var(--dia-vivo) 250deg,#8fdcea 310deg,var(--dia-azul) 360deg);
  animation:dia-borda 3.5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.domain-search-form.dia-on .input-domain-wrapper > .prefix,
.domain-search-form.dia-on .input-domain-wrapper > .input-domain,
.domain-search-form.dia-on .input-domain-wrapper > .dia-bt{display:none !important}
.dia-area[hidden]{display:none !important}
.dia-txt{display:block;width:100%;min-height:76px;resize:none;border:0 !important;outline:0;background:transparent !important;
  font:400 16px/1.5 Ubuntu,arial,sans-serif !important;color:var(--dia-carvao);padding:0 !important;margin:0;box-shadow:none !important;height:auto}
.dia-txt::placeholder{color:#6b737c}
.dia-pe{display:flex;align-items:center;gap:10px;margin-top:6px}
.dia-conta{margin-right:auto;font:400 12.5px/1.2 Ubuntu,arial,sans-serif;color:#6b737c}
.dia-conta.dia-ok{color:#15803d}
.dia-sair{border:0;border-radius:999px;background:#eef0f3;color:var(--dia-carvao);cursor:pointer;
  padding:8px 14px;font:600 13.5px/1 Ubuntu,arial,sans-serif;display:inline-flex;align-items:center;gap:8px;transition:background .15s}
.dia-sair span{font-size:18px;line-height:1;font-weight:400}
.dia-sair:hover{background:#e2e6ea}
.dia-sair:focus-visible{outline:2px solid var(--dia-vermelho);outline-offset:2px}
/* o «Consulte» fica ao lado e é ele que pede; apagado enquanto faltam caracteres */
/* o «Consulte» sai ao abrir a IA e volta ao fechar: encolhe (largura,
   margens, enchimento) enquanto a caixa se estende para o lugar dele */
.domain-search-form[data-dia] .btn-search{transition:width .42s cubic-bezier(.22,1,.36,1),min-width .42s cubic-bezier(.22,1,.36,1),
  padding .42s cubic-bezier(.22,1,.36,1),margin .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,transform .42s cubic-bezier(.22,1,.36,1)}
/* o texto do «Consulte» nunca parte em linhas enquanto encolhe/cresce —
   partia, e o botão mudava de altura aos saltos («fica a travar») */
.domain-search-form[data-dia] .btn-search,.domain-search-form[data-dia] .btn-search *{white-space:nowrap}
.domain-search-form[data-dia] .btn-search{overflow:hidden}
.domain-search-form.dia-on .btn-search{width:0 !important;min-width:0 !important;padding-left:0 !important;padding-right:0 !important;
  margin-left:0 !important;margin-right:0 !important;border-width:0 !important;opacity:0;transform:scale(.9);overflow:hidden;pointer-events:none}
/* a seta de enviar, dentro da caixa de IA */
.dia-ir{width:42px;height:42px;border-radius:50%;border:0;background:var(--dia-vermelho);color:#fff;cursor:pointer;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s,transform .15s,opacity .15s}
.dia-ir svg{width:20px;height:20px}
.dia-ir:hover:not(:disabled){background:#b80202;transform:translateX(2px)}
.dia-ir:disabled{opacity:.3;cursor:not-allowed}
.dia-ir:focus-visible{outline:2px solid var(--dia-vermelho);outline-offset:2px}
.domain-search-form.dia-a-pensar .dia-ir{cursor:progress}

/* ---- os resultados, no sítio dos da pesquisa normal ---- */
.dia-res{margin-top:22px;text-align:left}
.dia-res-t{margin:0 0 12px;font:700 18px/1.3 Ubuntu,arial,sans-serif;color:var(--rlxm-carvao,#1f2835)}
.dia-espera{display:flex;align-items:center;gap:10px;padding:18px 4px;color:#6b737c;font:400 14px/1.3 Ubuntu,arial,sans-serif}
.dia-roda{width:18px;height:18px;border-radius:50%;border:2px solid #e2e6ea;border-top-color:var(--rlxm-vermelho,#d10303);
  animation:dia-roda .8s linear infinite}
@keyframes dia-roda{to{transform:rotate(360deg)}}
.dia-res-mais{margin:14px 0 0}
.dia-res-mais[hidden]{display:none}
.dia-res-mais a{color:var(--rlxm-vermelho,#d10303);font-weight:600;text-decoration:none}
.dia-res-mais a:hover{text-decoration:underline}
.dia-res-msg{margin:6px 0;color:#6b737c}
.dia-nasce{animation:dia-nasce .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes dia-nasce{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .dia-bt,.dia-bt::after,.dia-bt::before,.dia-sair{transition:none}
  /* o anel do ícone gira a 1,5 s por volta também aqui: é a velocidade que o dono pediu, e ele tem esta definição ligada */
  .dia-nasce{animation:none}
  .domain-search-form.dia-on .input-domain-wrapper::before{animation-duration:7s}
  .dia-roda{animation-duration:2s}
}

/* ---- a fila dos nomes que a IA deu, por cima dos resultados normais ---- */
.dia-nomes{margin:22px 0 4px;text-align:center}
.dia-nomes[hidden]{display:none}
.dia-nomes-t{margin:0 0 10px;font:600 14px/1.3 Ubuntu,arial,sans-serif;color:var(--rlxm-cinza,#6b737c)}
.dia-nomes-l{display:flex;flex-wrap:nowrap;gap:8px;justify-content:safe center;overflow-x:auto;
  scrollbar-width:none;padding:2px 2px 8px}
.dia-nomes-l::-webkit-scrollbar{display:none}
.dia-nome{flex:0 0 auto;white-space:nowrap}
.dia-nome{border:1px solid var(--rlxm-linha,#e2e6ea);background:#fff;color:var(--rlxm-carvao,#1f2835);cursor:pointer;
  border-radius:999px;padding:8px 14px;font:500 14px/1 Ubuntu,arial,sans-serif;transition:border-color .15s,background .15s,color .15s,box-shadow .15s}
.dia-nome:hover{border-color:var(--rlxm-vermelho,#d10303);color:var(--rlxm-vermelho,#d10303)}
.dia-nome:focus-visible{outline:2px solid var(--rlxm-vermelho,#d10303);outline-offset:2px}
.dia-nome-on,.dia-nome-on:hover{border-color:var(--rlxm-vermelho,#d10303);background:var(--rlxm-vermelho,#d10303);color:#fff;
  box-shadow:0 4px 12px rgba(209,3,3,.22)}
.dia-nomes-msg{color:var(--rlxm-cinza,#6b737c);font-size:14px}
.dia-nomes-mais{display:inline-block;margin-top:12px;color:var(--rlxm-vermelho,#d10303);font:600 14px/1.3 Ubuntu,arial,sans-serif;text-decoration:none}
.dia-nomes-mais:hover{text-decoration:underline}
.dia-nomes-mais[hidden]{display:none}

/* ---- responsivo (dono, 19/09/2026) ---- */
@media (max-width: 767px){
  /* ícone um pouco menor, para caber folgado no campo */
  .dia-bt{width:36px;height:36px;right:8px}
  .dia-bt svg{width:20px;height:20px}
  .domain-search-form[data-dia] .input-domain{padding-right:52px !important}
  /* aqui o «Consulte» vive POR BAIXO da caixa, a toda a largura: encolhe na
     ALTURA (encolher na largura deixava um buraco da altura dele) */
  .domain-search-form.dia-on .btn-search{width:auto !important;height:0 !important;min-height:0 !important;
    padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important;transform:none}
  .domain-search-form[data-dia] .btn-search{transition:height .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1),
    margin .42s cubic-bezier(.22,1,.36,1),opacity .25s ease}
  .domain-search-form.dia-on .input-domain-wrapper{padding:12px 14px 10px}
  .dia-txt{min-height:96px;font-size:15px !important}
  .dia-pe{gap:8px}
  .dia-sair{padding:8px 12px;font-size:13px}
  .dia-nomes-t{font-size:13px}
  .dia-nome{padding:7px 12px;font-size:13.5px}
}

/* ---- AS OUTRAS CAIXAS: início, menu e barra fixa do registo (dono, 19/09/2026) ----
   O ícone entra na fila da caixa, antes do botão de pesquisar; ao abrir, a
   fila vira a mesma caixa de descrição da página de registo. */
.dia-mini{
  --dia-carvao:var(--rlxm-carvao,#1f2835);
  --dia-vermelho:var(--rlxm-vermelho,#d10303);
  --dia-vivo:var(--rlxm-vivo,#f00843);
  --dia-azul:#00acc8;
}
.dia-mini-cx{position:relative}
.dia-mini-cx > .dia-bt{position:relative;top:auto;right:auto;transform:none;flex:0 0 auto;align-self:center;margin:0 8px}
.dia-mini-cx > .dia-bt:hover,.dia-mini-cx > .dia-bt:focus-visible{transform:scale(1.06)}
/* a caixa do início é quadrada e o botão vive fora do campo: o ícone fica na
   faixa branca do campo, encostado ao «Pesquisar» */
form.domain-registration-main-input-text.dia-mini-cx{align-items:stretch}
form.domain-registration-main-input-text.dia-mini-cx > .dia-bt{margin:0 0 0 -52px;align-self:center}
form.domain-registration-main-input-text.dia-mini-cx > input{padding-right:56px !important}
/* no menu a caixa está colada ao topo: a dica abre para BAIXO */
.rlxm-busca .dia-bt::after{bottom:auto;top:calc(100% + 12px)}
.rlxm-busca .dia-bt::before{bottom:auto;top:calc(100% + 6px);border-top-color:transparent;border-bottom:6px solid var(--dia-carvao);border-top:0}
.rlxm-busca .dia-bt{width:34px;height:34px}
.rlxm-busca .dia-bt svg{width:19px;height:19px}
.dm-fixa-forma.dia-mini-cx > .dia-bt{width:34px;height:34px;margin:0 6px}
.dm-fixa-forma.dia-mini-cx > .dia-bt svg{width:19px;height:19px}

/* aberta: a fila vira a caixa de descrição */
/* altura e cantos SEM !important: um !important ganha às animações, e a
   caixa saltava para o tamanho final em vez de esticar (19/09/2026) */
.dia-mini-on.dia-mini-cx,.dia-mini-on .dia-mini-cx{display:block !important;height:auto;box-sizing:border-box;
  padding:14px 18px 12px !important;border:0 !important;border-radius:12px;background:#fff !important;
  box-shadow:0 10px 30px rgba(31,40,53,.14);text-align:left}
.dia-mini-on.dia-mini-cx > :not(.dia-area),.dia-mini-on .dia-mini-cx > :not(.dia-area){display:none !important}
.dia-mini-on.dia-mini-cx::after,.dia-mini-on .dia-mini-cx::after{display:none !important}
.dia-mini-on.dia-mini-cx::before,.dia-mini-on .dia-mini-cx::before{content:'' !important;display:block !important;position:absolute;inset:0;
  border-radius:12px;padding:2px;pointer-events:none;width:auto;height:auto;margin:0;
  background:conic-gradient(from var(--dia-ang),var(--dia-azul),var(--dia-carvao) 90deg,var(--dia-vermelho) 180deg,var(--dia-vivo) 250deg,#8fdcea 310deg,var(--dia-azul) 360deg);
  animation:dia-borda 3.5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.dia-mini .dia-txt{min-height:76px}
@media (prefers-reduced-motion: reduce){
  .dia-mini-on.dia-mini-cx::before,.dia-mini-on .dia-mini-cx::before{animation-duration:7s}
}
@media (max-width: 767px){
  form.domain-registration-main-input-text.dia-mini-cx > .dia-bt{width:36px;height:36px;margin-left:-46px}
  form.domain-registration-main-input-text.dia-mini-cx > input{padding-right:48px !important}
  .dia-mini .dia-txt{min-height:96px}
}
/* o tema pinta TODOS os <span> da caixa do início como a caixa cinzenta do
   «www.» (`.domain-registration-main-input-text span`): o anel e os textos
   da caixa de IA desfazem isso */
.dia-mini .dia-bt > .dia-anel{float:none;flex:none;line-height:0;padding:2px;
  background:conic-gradient(var(--dia-azul),var(--dia-carvao) 100deg,var(--dia-vermelho) 190deg,var(--dia-vivo) 260deg,#8fdcea 320deg,var(--dia-azul) 360deg)}
.dia-mini .dia-area span{float:none;flex:none;background:none;padding:0}
.dia-mini .dia-area .dia-conta{line-height:1.2}
.dia-mini .dia-area .dia-sair span{line-height:1}
/* criador de sites: o «Pesquisar» vive fora da caixa branca — sai com ela */
.cs-dom-f.dia-mini-on{display:block !important}
.cs-dom-f.dia-mini-on > .cs-bt{display:none !important}
#main .cs-dom-f.dia-mini-on .cs-dom-caixa{border-radius:12px}
.cs-dom-caixa.dia-mini-cx > .dia-bt{margin:0 -8px 0 8px}
/* regras de página que pintam os <span> da caixa não mexem nos textos da IA */
.dia-mini .dia-area .dia-conta{color:#6b737c !important;font-size:12.5px !important}
.dia-mini .dia-area .dia-conta.dia-ok{color:#15803d !important}
.dia-mini .dia-area .dia-sair span{color:inherit !important;font-size:18px !important}

/* o salto do próprio navegador (antes de qualquer script) já pára o título
   por baixo do menu: a --rlxm-topo é o fundo do menu medido pelo
   menu-responsivo.js; 62px é a altura dele se o script ainda não correu */
#search-ai{scroll-margin-top:calc(var(--rlxm-topo, 62px) + 16px)}
/* no telemóvel o tema esconde TODOS os <span> da caixa do início (para tirar
   o «www.») — e levava o anel do ícone e o contador da IA com eles */
.dia-mini .dia-bt > .dia-anel{display:block !important}
.dia-mini .dia-area .dia-conta{display:inline-block !important}
.dia-mini .dia-area .dia-sair span{display:inline !important}
/* a barra fixa do registo tem overflow:hidden (para os cantos de pílula) e
   cortava a dica «Receba ideias de domínio» por cima do ícone (dono,
   19/09/2026) — a dica pode sair dela; a animação de esticar põe o
   overflow:hidden só enquanto corre */
.dm-fixa-forma.dia-mini-cx{overflow:visible}

/* O PASSAR DO RATO nas caixas do registo e da transferência (dono,
   19/09/2026: «o hover deve ter animação … deve ser igual» nas 16 pontas):
   o campo ganha o contorno azul da casa e uma sombra, e o botão sobe um pouco */
.domain-search .domain-search-form .input-domain-wrapper{transition:border-color .2s,box-shadow .25s}
.domain-search .domain-search-form:not(.dia-on) .input-domain-wrapper:hover{box-shadow:0 10px 26px -12px rgba(31,40,53,.28),0 0 0 2px rgba(0,172,200,.35)}
.domain-search .domain-search-form:not([data-dia]) .btn-search{transition:background-color .2s,transform .2s,box-shadow .2s}
/* na do registo o «Consulte» já tem a transição de encolher (acima): junta-se-lhe a do rato */
.domain-search-form[data-dia] .btn-search{transition:width .42s cubic-bezier(.22,1,.36,1),min-width .42s cubic-bezier(.22,1,.36,1),
  padding .42s cubic-bezier(.22,1,.36,1),margin .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,transform .42s cubic-bezier(.22,1,.36,1),
  background-color .2s,box-shadow .2s}
.domain-search .domain-search-form:not(.dia-on) .btn-search:hover{transform:translateY(-1px);box-shadow:0 10px 20px -10px rgba(0,149,173,.8)}
@media (prefers-reduced-motion: reduce){
  .domain-search .domain-search-form:not(.dia-on) .btn-search:hover{transform:none}
}
@media (max-width: 767px){
  /* no telemóvel o «Consulte» encolhe na altura (ver acima) — repete-se aqui
     porque a regra do rato, mais abaixo no ficheiro, a tapava */
  .domain-search-form[data-dia] .btn-search{transition:height .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1),
    margin .42s cubic-bezier(.22,1,.36,1),opacity .25s ease,background-color .2s,box-shadow .2s}
}

/* ---- anterior / seguinte nos nomes da IA (dono, 19/09/2026) ----
   as setas só existem quando os nomes não cabem; a fila desbota na ponta
   onde há mais para ver */
.dia-nomes-cx{display:flex;align-items:center;gap:8px}
.dia-nomes-cx .dia-nomes-l{flex:1 1 auto;min-width:0}
.dia-nomes-cx.dia-ha-depois .dia-nomes-l{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.dia-nomes-cx.dia-ha-antes .dia-nomes-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);
  mask-image:linear-gradient(90deg,transparent,#000 36px)}
.dia-nomes-cx.dia-ha-antes.dia-ha-depois .dia-nomes-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.dia-nav{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:1px solid var(--rlxm-linha,#e2e6ea);background:#fff;
  color:var(--rlxm-carvao,#1f2835);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
  margin-bottom:8px;box-shadow:0 4px 12px -6px rgba(31,40,53,.35);
  transition:border-color .15s,color .15s,opacity .2s,transform .2s,box-shadow .15s}
.dia-nav svg{width:18px;height:18px}
.dia-nav:hover:not(:disabled){border-color:var(--rlxm-vermelho,#d10303);color:var(--rlxm-vermelho,#d10303);
  box-shadow:0 6px 16px -6px rgba(209,3,3,.4)}
.dia-nav:focus-visible{outline:2px solid var(--rlxm-vermelho,#d10303);outline-offset:2px}
.dia-nav:disabled{opacity:.3;cursor:default;box-shadow:none}
.dia-nomes-cx:not(.dia-rola) .dia-nav{display:none}
@media (max-width: 767px){
  .dia-nav{width:32px;height:32px}
  .dia-nav svg{width:16px;height:16px}
  .dia-nomes-cx{gap:6px}
}