/* =========================
   SELEÇÃO DE CIDADE (FINAL)
   ========================= */

/* BODY */
.city-body{
  margin: 0;
  min-height: 100vh;
}

/* Wrapper da página (controla centro + rodapé) */
.city-page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 30% 20%, rgba(179,145,79,.12), transparent 60%),
    #f7f8f6;
}

/* Área que centraliza o card */
.city-container{
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px;

  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza verticalmente */
  align-items: center;     /* centraliza horizontalmente */
}

/* CARD */
.city-card{
  width: 100%;
  max-width: 1100px;

  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;

  border-radius: 26px;
  overflow: hidden;

  /* Desktop: gradiente lateral */
  background: linear-gradient(
    90deg,
    rgba(21,57,47,.08),
    rgba(255,255,255,.95) 55%
  );

  box-shadow: 0 30px 80px rgba(0,0,0,.15);
}

/* LADO ESQUERDO */
.city-left{
  padding: 56px;
}

.city-left h1{
  color: var(--color-institutional);
  font-size: 2.1rem;
  margin-bottom: 18px;
}

/* Lista */
.city-features{
  margin-top: 24px;
  padding-left: 0;
  list-style: none;
}

.city-features li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-weight: 500;
}

.city-features li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-brand);
  font-size: 22px;
  line-height: 1;
}

/* LADO DIREITO */
.city-right{
  background: #fff;
  padding: 48px;
}

/* BADGES */
.city-badge{
  display: inline-block;
  background: rgba(21,57,47,.12);
  color: var(--color-institutional);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.city-badge.soft{
  background: var(--color-bg-soft);
}

/* WATERMARK (caso você use texto gigante no fundo) */
.city-watermark{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 7rem;
  font-weight: 800;
  color: rgba(0,0,0,.035);
  pointer-events: none;
}

/* =========================
   MARCA COLADA NO RODAPÉ
   ========================= */
.city-brand{
  margin-top: auto; /* cola no fundo */
  padding: 18px 0 14px;
  display: grid;
  place-items: center;
  text-align: center;
}

.city-brand img{
  width: 50px;
  height: auto;

  opacity: .10;
  filter: grayscale(100%);
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

.city-brand-meta{
  margin-top: 10px;
  font-size: .85rem;
  color: var(--color-text-muted);
}

/* =========================
   RESPONSIVO - TABLET
   ========================= */
@media (max-width: 991.98px){
  .city-card{
    grid-template-columns: 1fr;
  }

  .city-left{
    padding: 40px 36px 20px;
  }

  .city-right{
    padding: 36px;
    background: #fff;
  }

  .city-watermark{
    font-size: 5rem;
  }
}

.city-card{
  grid-template-columns: 1fr !important;

  /* Mobile: gradiente vertical (topo->baixo) */
  background: linear-gradient(
    180deg,
    rgba(21,57,47,.07) 0%,
    rgba(255,255,255,.94) 45%,
    #ffffff 100%
  ) !important;
}

/* =========================
   RESPONSIVO - MOBILE (modo normal)
   ========================= */
@media (max-width: 575.98px){

  .city-container{
    padding: 18px 14px;
  }

  .city-left{
    display: block !important;
    padding: 26px 22px 10px !important;
    background: transparent !important;
  }

  .city-left p{
    display: none;
  }

  .city-left h1{
    font-size: 1.35rem;
    line-height: 1.25;
    margin-bottom: 12px;
  }

  .city-features{
    margin-top: 6px;
  }

  .city-features li{
    font-size: .85rem;
    margin-bottom: 6px;
  }

  .city-right{
    background: transparent !important;
    padding: 18px 22px 26px !important;
  }

  .city-badge{
    font-size: .7rem;
    padding: 4px 12px;
    margin-bottom: 10px;
  }

  .city-right .btn-primary{
    padding: 15px;
    font-size: 1rem;
    margin-top: 6px;
  }

  .city-watermark{
    opacity: .02 !important;
    font-size: 4rem !important;
  }

  .city-brand{
    padding: 14px 0 10px;
  }
}

/* =========================
   MODO SIMPLES (APENAS BOTÕES)
   Basta colocar class="city-page is-simple" no HTML
   ========================= */
.city-page.is-simple .city-card{
  grid-template-columns: 1fr !important;
  background: #fff;
}

.city-page.is-simple .city-left{
  display: none !important;
}

/* Conteúdo do card centralizado como um bloco */
.city-page.is-simple .city-right{
  width: 100%;
  background: transparent !important;
  padding: 42px !important;

  min-height: 420px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  gap: 16px;
}

/* Esconde textos do layout antigo (se existirem) */
.city-page.is-simple .city-badge,
.city-page.is-simple .city-right h4,
.city-page.is-simple .city-right p{
  display: none !important;
}

/* Título do modo simples */
.city-title{
  text-align: center;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-institutional);
  margin: 6px 0 20px;
}

/* Logo acima do título */
.city-logo-top{
  display: grid;
  place-items: center;
  margin-bottom: 10px;
}

.city-logo-top img{
  width: 220px;
  height: auto;
  opacity: .9;
}

/* Botões maiores e consistentes */
.city-page.is-simple .city-right .btn{
  width: 100%;
  max-width: 520px; /* evita ficar gigante em telas maiores */
  font-size: 1.25rem;
  padding: 18px 18px;
  border-radius: 18px;
}

/* Espaçamento extra opcional por classe (se você usar city-btn no HTML) */
.city-page.is-simple .city-right .city-btn{
  margin: 0; /* gap já cuida */
}

/* Mobile no modo simples */
@media (max-width: 575.98px){
  .city-page.is-simple .city-right{
    padding: 22px !important;
    gap: 14px;
    min-height: 360px;
  }

  .city-title{
    font-size: 1.25rem;
    margin-bottom: 18px;
  }

  .city-logo-top img{
    width: 150px;
  }

  .city-page.is-simple .city-right .btn{
    font-size: 1.2rem;
    padding: 18px 16px;
    max-width: 100%;
  }
}

/* Reserva espaço do rodapé e centraliza o card na área útil */
.city-container{
  min-height: calc(100vh - 90px); /* 90px ~ altura do rodapé */
}

@media (max-width: 575.98px){
  .city-container{
    min-height: calc(100vh - 72px); /* rodapé menor no mobile */
  }
}

.city-page.is-simple .city-right{
  min-height: auto;         /* tira altura fixa que pode empurrar */
  padding-top: 44px !important;
  padding-bottom: 44px !important;
}

.city-title{
  font-size: 1.15rem;          /* menor */
  font-weight: 500;            /* menos “ordem” */
  letter-spacing: .2px;
  color: rgba(21,57,47,.85);   /* mais suave */
  margin: 4px 0 18px;
}

.band-select-city{
  padding-top: 5px;
}

.main-select{
  font-size: 1.5rem !important;
}

.sub-select{
  font-size: .82rem !important;
  transform: translateX(11px) !important;
}

@media (max-width: 575.98px){
  .main-select{
    font-size: 1.2rem !important;
  }

  .sub-select{
    font-size: .77rem !important;
    transform: translateX(11px) !important;
  }

  .city-logo-top img{
    width: 160px;
    height: auto;
    opacity: .9;
  }
}