/* =========================================================
   CEC — Layout V2 (somente página Certidão Endereço Cidadão)
   Moderno • sofisticado • profissional • dark mode
   Escopo: .cec-page ...
========================================================= */

.cec-page{
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface2: #f1f4f8;
  --text: #0b1b2b;
  --muted: rgba(11,27,43,.72);

  --primary: #0c5fc6;
  --primary2: #0a4da3;
  --border: rgba(11,27,43,.12);

  --radius-xl: 26px;
  --radius-lg: 20px;
  --radius-md: 14px;

  --shadow1: 0 12px 32px rgba(0,0,0,.10);
  --shadow2: 0 20px 65px rgba(0,0,0,.14);

  --focus: 0 0 0 4px rgba(12,95,198,.18);

  background: radial-gradient(1200px 500px at 50% -10%, rgba(12,95,198,.18), transparent 60%),
              radial-gradient(800px 400px at 100% 20%, rgba(42,127,255,.12), transparent 60%),
              var(--bg);

  min-height: 100vh;
  padding: 34px 16px 48px;
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
  .cec-page{
    --bg: #0b0f14;
    --surface: rgba(16,18,22,.92);
    --surface2: rgba(22,24,30,.85);
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.68);

    --primary: #4aa0ff;
    --primary2: #2f7edc;
    --border: rgba(255,255,255,.10);

    --shadow1: 0 14px 50px rgba(0,0,0,.55);
    --shadow2: 0 24px 80px rgba(0,0,0,.60);
    --focus: 0 0 0 4px rgba(74,160,255,.18);
  }
}

/* Container geral (centralizado e elegante) */
.cec-page .cec-shell{
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
}

/* -------- HERO (título + texto + botão) -------- */
.cec-page .cec-hero{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow1);
  padding: 18px 18px 16px;
  text-align: center;
  backdrop-filter: blur(10px);
}
#form-cec{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.55));
  padding: 20px 5%;
}

@media (prefers-color-scheme: dark){
  .cec-page .cec-hero{
    background: linear-gradient(180deg, rgba(16,18,22,.84), rgba(16,18,22,.62));
  }
  #form-cec{
    background: linear-gradient(180deg, rgba(16,18,22,.84), rgba(16,18,22,.62));
  }
}

.cec-page .cec-title{
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 1000;
  letter-spacing: .25px;
  color: var(--primary);
  text-transform: uppercase;
}

.cec-page .cec-lead{
  margin: 0 auto 14px;
  max-width: 840px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 15.5px;
}

.cec-page .cec-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 11px 14px;
  border-radius: 16px;

  color: #fff;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  text-decoration: none;
  font-weight: 950;
  box-shadow: 0 18px 45px rgba(12,95,198,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cec-page .cec-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 24px 60px rgba(12,95,198,.28);
}
.cec-page .cec-cta .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 0 4px rgba(255,255,255,.20);
}

/* -------- CARD DO FORM -------- */
.cec-page .cec-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow1);
  overflow: hidden;
}

/* Header do card */
.cec-page .cec-card-head{
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cec-page .cec-card-head .badge{
  width: 36px;
  height: 36px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}

.cec-page .cec-card-head h3{
  margin: 0;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: .2px;
}

/* Corpo do card */
.cec-page .cec-card-body{
  background: var(--surface);
}

/* -------- FORM / INPUTS -------- */
.cec-page .form-group,
.cec-page .form-group2{
  margin: 0 0 12px;
}

.cec-page label{
  display: inline-block;
  margin: 0 0 6px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: .15px;
}

.cec-page input[type="text"],
.cec-page input[type="number"],
.cec-page input[type="email"],
.cec-page input[type="tel"],
.cec-page select,
.cec-page textarea{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);

  padding: 12px 12px;
  font-size: 15px;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}

.cec-page input::placeholder{ color: rgba(0,0,0,.35); }
@media (prefers-color-scheme: dark){
  .cec-page input::placeholder{ color: rgba(255,255,255,.35); }
}

.cec-page :where(input, select, textarea):focus{
  outline: none;
  border-color: rgba(12,95,198,.35);
  box-shadow: var(--focus);
  background: var(--surface);
}

.cec-page .form-group2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 680px){
  .cec-page .form-group2{ grid-template-columns: 1fr; }
}

/* Turnstile central */
.cec-page .cf-turnstile{
  display: flex;
  justify-content: center;
  margin: 12px 0 2px;
}

/* -------- BOTÃO ENVIAR (CTA grande) -------- */
.cec-page .cec-submit{
  margin: 16px auto 8px;
  width: min(460px, 100%);
  border: 0;
  cursor: pointer;

  display: grid;
  grid-template-columns: 54px 1fr 44px;
  align-items: center;

  padding: 10px 12px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: #fff;
  font-weight: 1000;
  letter-spacing: .25px;

  box-shadow: 0 26px 70px rgba(12,95,198,.26);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cec-page .cec-submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 30px 78px rgba(12,95,198,.32);
}
.cec-page .cec-submit .left{
  width: 44px; height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
}
.cec-page .cec-submit .right{
  width: 34px; height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 1000;
}
.cec-page .cec-submit span{
  text-transform: uppercase;
  font-size: 15px;
}

/* =========================================================
   AUTOCOMPLETE (custom) — mantém suas classes atuais
========================================================= */

.cec-page .cec-ac-wrap{
  position: relative;
  width: 100%;
}

.cec-page .cec-ac-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 9999;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow2);
  padding: 6px;

  max-height: 280px;
  overflow: auto;
  backdrop-filter: blur(8px);
}

.cec-page .cec-ac-item{
  width: 100%;
  border: 0;
  background: transparent;

  display: flex;
  gap: 10px;
  align-items: center;
  text-align: left;

  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;

  font-size: 14.5px;
  font-weight: 900;
  color: var(--text);
}

.cec-page .cec-ac-item:hover,
.cec-page .cec-ac-item[aria-selected="true"]{
  background: rgba(12,95,198,.10);
}

.cec-page .cec-ac-icon{
  width: 30px;
  height: 30px;
  border-radius: 14px;
  background: rgba(12,95,198,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  font-size: 12px;
  color: var(--primary);
  flex: 0 0 auto;
}

.cec-page .cec-ac-sub{
  display:block;
  font-weight: 700;
  opacity: .70;
  font-size: 12.8px;
  margin-top: 2px;
}

.cec-page .cec-ac-mark{
  background: rgba(255, 210, 80, .55);
  padding: 0 2px;
  border-radius: 4px;
}

.cec-page .cec-ac-empty{
  padding: 10px 12px;
  font-size: 14px;
  color: var(--muted);
}

/* ============================
   POLIMENTO PREMIUM — CEC
   ============================ */

/* 1) Mais contraste no texto do aviso (hero) */
.cec-page .cec-lead{
  color: var(--muted);
  opacity: 0.95;
}

/* 2) Respiro vertical mais “coeso” */
.cec-page .cec-shell{
  gap: 30px; /* levemente menor (fica mais juntinho e elegante) */
}

/* 3) Inputs: foco mais bonito e consistente */
.cec-page :where(input, select, textarea):focus{
  border-color: rgba(12,95,198,.45);
  box-shadow: var(--focus);
  transform: translateY(-0.5px);
}

/* 4) Turnstile em mini-card (não “flutua” solto) */
.cec-page .cec-turnstile-box{
  margin: 12px 0 6px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface2);
  display: flex;
  justify-content: center;
}

/* 5) Botão: sombra um pouco mais sutil + estados */
.cec-page .cec-submit{
  box-shadow: 0 18px 52px rgba(12,95,198,.22);
}
.cec-page .cec-submit:hover{
  box-shadow: 0 22px 60px rgba(12,95,198,.26);
}
.cec-page .cec-submit:active{
  transform: translateY(0px);
}

/* Estado desabilitado (evita double submit) */
.cec-page .cec-submit[disabled]{
  cursor: not-allowed;
  opacity: .90;
  filter: saturate(.85);
}

/* Texto normal vs carregando */
.cec-page .cec-submit-loading{
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: .25px;
  font-weight: 1000;
}
.cec-page .cec-submit.is-loading .cec-submit-text{
  display: none;
}
.cec-page .cec-submit.is-loading .cec-submit-loading{
  display: inline-flex;
}

/* Spinner */
.cec-page .cec-spinner{
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.40);
  border-top-color: #fff;
  animation: cecSpin 1s linear infinite;
}
@keyframes cecSpin{
  to{ transform: rotate(360deg); }
}

/* 6) Autocomplete: scrollbar mais clean */
.cec-page .cec-ac-panel{
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.25) transparent;
}
.cec-page .cec-ac-panel::-webkit-scrollbar{
  width: 10px;
}
.cec-page .cec-ac-panel::-webkit-scrollbar-track{
  background: transparent;
}
.cec-page .cec-ac-panel::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
@media (prefers-color-scheme: dark){
  .cec-page .cec-ac-panel{
    scrollbar-color: rgba(255,255,255,.22) transparent;
  }
  .cec-page .cec-ac-panel::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.18);
    background-clip: content-box;
  }
}

/* 7) Highlight do texto (fica menos “amarelão”) */
.cec-page .cec-ac-mark{
  background: rgba(255, 210, 80, .42);
  padding: 0 2px;
  border-radius: 4px;
}

/* 8) Acessibilidade: foco visível nos itens do autocomplete */
.cec-page .cec-ac-item:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}