/* Rapid Cloud WHOIS — estilos complementares ao Tailwind via CDN */

html, body {
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

html { background: #f4f5fb; }
html.dark { background: #05060d; }

[x-cloak] { display: none !important; }

/* -------------------------------------------------------------------------
 * Hero: gradiente multi-stop + camadas de nuvens animadas passando.
 * A altura do hero é fixa e vive atrás do header, search e descrição.
 * ------------------------------------------------------------------------- */

.rc-hero {
    position: absolute;
    inset: 0 0 auto 0;
    height: 620px;
    overflow: hidden;
    z-index: 0;
    background:
        radial-gradient(1100px 460px at 15% -10%, rgba(91, 46, 240, .55), transparent 60%),
        radial-gradient(900px 560px at 85% 10%, rgba(30, 63, 128, .65), transparent 60%),
        linear-gradient(135deg, #2b1870 0%, #3a1e9c 30%, #281b74 55%, #1e3f80 100%);
}

/* Wrapper de conteúdo — sobe acima do hero via stacking context próprio. */
.rc-layer {
    position: relative;
    z-index: 10;
}

html.dark .rc-hero {
    background:
        radial-gradient(1100px 460px at 15% -10%, rgba(67, 33, 194, .55), transparent 60%),
        radial-gradient(900px 560px at 85% 10%, rgba(13, 35, 86, .75), transparent 60%),
        linear-gradient(135deg, #16094d 0%, #20146b 30%, #16104d 55%, #0d2356 100%);
}

/* Brilho superior sutil (destaque luminoso) */
.rc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(1400px 400px at 50% -120px, rgba(255,255,255,.32), transparent 70%);
    pointer-events: none;
}

/* Vinheta suave nas bordas inferiores para fundir o hero com o conteúdo */
.rc-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, rgba(244, 245, 251, 1));
    pointer-events: none;
}
html.dark .rc-hero::after {
    background: linear-gradient(to bottom, transparent, rgba(5, 6, 13, 1));
}

/* Camada de nuvens — cada uma é um SVG inline via background-image. */
.rc-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.rc-cloud {
    position: absolute;
    opacity: .18;
    filter: blur(.3px);
    will-change: transform;
    background-repeat: no-repeat;
    background-size: contain;
}
html.dark .rc-cloud { opacity: .09; }

/* SVG de nuvem 1 (mais arredondada) */
.rc-cloud--a {
    top: 18%;
    left: -220px;
    width: 220px;
    height: 80px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80'><path fill='white' d='M44 60c-14 0-24-10-24-22 0-11 8-19 18-21 3-12 14-17 24-17 13 0 21 8 23 18 2-1 5-2 8-2 10 0 18 8 18 18 1 0 2 0 3 0 10 0 18 9 18 19 0 10-8 18-18 18H44z'/></svg>");
    animation: rc-cloud-drift 52s linear infinite;
}

/* SVG de nuvem 2 (mais achatada) */
.rc-cloud--b {
    top: 38%;
    left: -300px;
    width: 300px;
    height: 90px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 90'><path fill='white' d='M50 70c-16 0-28-11-28-26 0-13 10-22 22-24 2-14 15-20 27-20 14 0 24 8 27 20 3-1 7-2 10-2 12 0 21 9 22 20 2-1 4-1 6-1 12 0 22 10 22 22 0 12-10 21-22 21H50z'/></svg>");
    animation: rc-cloud-drift 72s linear infinite;
    animation-delay: -14s;
    opacity: .14;
}
html.dark .rc-cloud--b { opacity: .07; }

/* SVG de nuvem 3 (grande) */
.rc-cloud--c {
    top: 8%;
    left: -380px;
    width: 380px;
    height: 120px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 120'><path fill='white' d='M70 95c-22 0-38-16-38-36 0-18 13-31 30-33 3-19 19-27 36-27 19 0 32 11 36 27 4-1 9-2 13-2 17 0 30 13 30 30 3-1 6-1 9-1 17 0 30 14 30 31 0 17-13 31-30 31H70z'/></svg>");
    animation: rc-cloud-drift 90s linear infinite;
    animation-delay: -40s;
    opacity: .12;
}
html.dark .rc-cloud--c { opacity: .06; }

/* SVG de nuvem 4 (pequena) */
.rc-cloud--d {
    top: 55%;
    left: -160px;
    width: 160px;
    height: 60px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'><path fill='white' d='M30 45c-10 0-17-7-17-16 0-8 6-14 13-15 2-9 10-13 18-13 10 0 16 6 17 14 1 0 3-1 4-1 8 0 13 7 13 14 1 0 1 0 2 0 8 0 14 6 14 14 0 7-6 13-14 13H30z'/></svg>");
    animation: rc-cloud-drift 44s linear infinite;
    animation-delay: -22s;
    opacity: .22;
}
html.dark .rc-cloud--d { opacity: .11; }

@keyframes rc-cloud-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(calc(100vw + 400px), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rc-cloud { animation: none !important; }
}

/* -------------------------------------------------------------------------
 * Logo — cores condicionais por contexto (hero vs footer) e tema.
 * ------------------------------------------------------------------------- */

/* Logo no header/hero: sempre branca porque vive sobre o gradiente roxo.
   O filtro transforma qualquer PNG colorido em branco puro. !important
   porque o Tailwind pode aplicar filtros via utilities (shadow, backdrop)
   que compõem a propriedade filter e anulam o nosso. */
.rc-logo-hero {
    filter: brightness(0) invert(1) !important;
    transition: transform .25s ease, opacity .25s ease;
}
.rc-logo-hero:hover { transform: translateY(-1px); opacity: .85; }

/* Logo no footer (light): cor original; (dark): invertida para branca + hover. */
.rc-logo-footer {
    transition: filter .25s ease, opacity .25s ease;
    opacity: .85;
}
.rc-logo-footer:hover { opacity: 1; }
html.dark .rc-logo-footer { filter: brightness(0) invert(1); opacity: .7; }
html.dark .rc-logo-footer:hover { opacity: 1; }

/* -------------------------------------------------------------------------
 * Scrollbar com a paleta roxa da marca.
 * ------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(118, 71, 255, .25);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(118, 71, 255, .55); background-clip: content-box; }
html.dark ::-webkit-scrollbar-thumb { background-color: rgba(159, 102, 255, .25); background-clip: content-box; }
html.dark ::-webkit-scrollbar-thumb:hover { background-color: rgba(159, 102, 255, .55); background-clip: content-box; }

/* Foco visível em toda a aplicação */
*:focus-visible {
    outline: 2px solid #7647ff;
    outline-offset: 2px;
    border-radius: 4px;
}

/* -------------------------------------------------------------------------
 * Campo de busca do hero — neutraliza a borda que o plugin @tailwindcss/forms
 * injeta em todos os inputs e dá um foco sutil compatível com a paleta.
 * ------------------------------------------------------------------------- */
.rc-search-input,
.rc-search-input:focus,
.rc-search-input:focus-visible {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
}

/* -------------------------------------------------------------------------
 * Botão "Analisar" — estado de loading aplicado via JS ao submeter o form.
 * Esconde o texto original, mostra spinner + "Analisando…".
 * ------------------------------------------------------------------------- */
.rc-submit { position: relative; }
.rc-submit[data-loading="true"] { cursor: progress; pointer-events: none; }
.rc-submit[data-loading="true"] .rc-submit-idle { opacity: 0; }
.rc-submit[data-loading="true"] .rc-submit-loading { opacity: 1; }
.rc-submit-loading {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transition: opacity .2s ease;
}
.rc-submit-idle { transition: opacity .2s ease; display: inline-flex; align-items: center; gap: 8px; }
.rc-spinner {
    width: 18px; height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;
    animation: rc-spin .7s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------------
 * Overlay global de loading disparado pelo submit do form.
 * Bloqueia a tela com um glass escuro + spinner grande + mensagem,
 * dando feedback imediato enquanto a página recarrega com ?d=...
 * ------------------------------------------------------------------------- */
.rc-loader-overlay {
    position: fixed; inset: 0;
    display: none; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
    background: rgba(11, 18, 32, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 1000;
    color: #fff;
    font-weight: 600;
}
.rc-loader-overlay[data-active="true"] { display: flex; animation: rc-fade-in .2s ease-out; }
.rc-loader-spinner {
    width: 56px; height: 56px;
    border-radius: 999px;
    border: 4px solid rgba(255,255,255,.22);
    border-top-color: #ffffff;
    animation: rc-spin 1s linear infinite;
    box-shadow: 0 10px 40px -10px rgba(118,71,255,.6);
}
.rc-loader-title { font-size: 18px; letter-spacing: .02em; }
.rc-loader-sub { font-size: 13px; opacity: .75; font-weight: 500; }

/* Suaviza entrada dos cards de resultado */
@keyframes rc-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
[x-show] { animation: rc-fade-in .22s ease-out; }