/* ======= Forms — Turismo+Cultura (drop-in) ======= */



/* Tokens com fallbacks (se já existirem no main.css, permanecem) */

:root {

  --brand: var(--tema-hex, #2563eb);

  --brand-600: #1d4ed8;

  --brand-700: #1e40af;

  --line: #e5e7eb;

  --muted: #64748b;

  --bg-soft: #f8fafc;

  --radius: 12px;

  --gap: 14px;
  /* gap padrão entre campos/linhas */

  --field-gap: 8px;
  /* gap interno do .field (label ↔ input) */

  --ring: 0 0 0 3px #2563eb22;

}



/* Tipografia & base do formulário */

h1 {

  font-size: 1.6rem;

  line-height: 1.25;

  margin: 0 0 6px 0;

}

.muted {
  color: var(--muted);
  margin-top: 6px;
}



/* Cartão (seu HTML já usa .card/.card-body) */

.card {

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: #fff;

  overflow: hidden;

}

.card-body {
  padding: 18px;
}



/* Linhas de campos (grid) */

.row {

  display: grid;

  gap: calc(var(--gap) + 2px);
  /* um tiquinho a mais de respiro vertical */

  margin-block: 12px;
  /* espaço acima/abaixo de cada bloco */

}



/* Grades rápidas (já usadas no seu HTML) */

.g-1 {
  grid-template-columns: 1fr;
}

.g-2 {
  grid-template-columns: repeat(2, 1fr);
}

.g-3 {
  grid-template-columns: 1.4fr .7fr .9fr;
}



@media (max-width: 820px) {

  .g-2,
  .g-3 {
    grid-template-columns: 1fr;
  }

}



/* Linha do CEP com botões ao lado do input */

.input-row {

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 12px;

  align-items: center;

}

@media (max-width: 620px) {

  .input-row {
    grid-template-columns: 1fr;
  }

}



/* Campo (label + controle + hint) */

.field {

  display: flex;

  flex-direction: column;

  gap: var(--field-gap);

}



/* Rótulos */

label {

  display: inline-block;

  font-weight: 600;

  color: #0f172a;

}



/* Controles */

input,
select,
textarea {

  width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  font-size: 15px;

  line-height: 1.4;

  background: #fff;

  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;

}

textarea {
  resize: vertical;
  min-height: 96px;
}



/* Placeholder mais suave */

::placeholder {
  color: #94a3b8;
}



/* Foco acessível */

input:focus,
select:focus,
textarea:focus {

  outline: none;

  border-color: var(--brand);

  box-shadow: var(--ring);

  background: #fff;

}



/* Estados: disabled/readonly */

input[disabled],
select[disabled],
textarea[disabled],

input[readonly],
select[readonly],
textarea[readonly] {

  opacity: .7;
  background: #f8fafc;
  cursor: not-allowed;

}



/* Mensagens */

.erros {

  background: #fee2e2;

  color: #991b1b;

  border: 1px solid #fecaca;

  border-radius: var(--radius);

  padding: 12px;

  margin-block: 12px;

}

.sucesso {

  background: #d1fae5;

  color: #065f46;

  border: 1px solid #6ee7b7;

  border-radius: var(--radius);

  padding: 12px;

  margin-block: 12px;

}



.hint {
  font-size: .86rem;
  color: var(--muted);
}



/* Ações */

.actions {

  display: flex;

  justify-content: flex-end;

  margin-top: 14px;

}



/* Botões (inclui variantes já usadas no seu HTML) */

.btn,
.btn:link,
.btn:visited {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 16px;

  border-radius: 999px;

  border: 1px solid transparent;

  background: var(--brand);

  color: #fff !important;

  font-weight: 600;

  text-decoration: none;

  cursor: pointer;

  line-height: 1;

  transition: transform .06s ease, filter .15s ease, background .15s ease, border-color .15s ease;

}

.btn:hover {
  filter: brightness(1.02);
}

.btn:active {
  transform: translateY(1px);
}



.btn.brand {
  background: var(--brand);
}

.btn.light {

  background: #f1f5f9;

  color: #0f172a !important;

  border-color: var(--line);

}

.btn.sm {
  padding: 8px 12px;
  font-size: .92rem;
}



/* Badges (precisão do endereço) */

.badge {

  display: inline-block;

  padding: 4px 8px;

  border-radius: 999px;

  background: #eef2ff;

  color: #3730a3;

  font-size: .78rem;

  border: 1px solid #e0e7ff;

}



/* Tags (checkbox em formato “chip”) */

.tags {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}

.tags label {
  white-space: nowrap;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 12px;

  border: 1px solid var(--line);

  border-radius: 999px;

  background: #fff;

  cursor: pointer;

  font-weight: 500;

  transition: border-color .15s ease, background .15s ease;

}

.tags input[type="checkbox"] {

  accent-color: var(--brand);

  transform: translateY(-.5px);

}

.tags input[type="checkbox"]:checked+* {
  font-weight: 600;
}

.tags label:hover {
  background: #f8fafc;
}



/* Divisor */

.hr {

  height: 1px;

  background: var(--line);

  margin: 16px 0;

}



/* Mapa */

#map {

  height: 320px;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  overflow: hidden;

}



/* Filmstrip de uploads (se usar previews depois) */

.gallery-strip {

  display: flex;

  gap: 8px;

  overflow-x: auto;

  padding: 6px 2px 2px;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

}

.gallery-strip::-webkit-scrollbar {
  height: 8px;
}

.gallery-strip::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}



/* Acessibilidade de movimento */

@media (prefers-reduced-motion: reduce) {

  * {
    transition: none !important;
  }

}



/* Navegação sempre alinhada em smartphones */

@media (max-width: 768px) {

  .nav-buttons,
  .menu-nav,
  .top-nav,
  .navigation-menu {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    justify-content: center;

    align-items: center;

    padding: 10px;

  }



  .nav-buttons .btn,
  .menu-nav .btn,
  .top-nav .btn {

    flex: 0 0 auto;

    margin: 0;

    padding: 8px 16px;

    text-align: center;

    border-radius: var(--radius);

  }



  /* Garante centralização */

  .text-center {
    text-align: center !important;
  }

  .justify-center {
    justify-content: center !important;
  }

}



/* Honeypot: fica fora da tela para não atrapalhar leitores de tela/teclado */

.hp-trap {

  position: absolute;

  left: -9999px;

  width: 1px;

  height: 1px;

  overflow: hidden;

}



/* ===== Editor de recorte de imagem (capa / galeria) ===== */

body.img-crop-open {

  overflow: hidden;

}



.img-crop-modal {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 16px;

}



.img-crop-modal[aria-hidden="false"] {

  display: flex;

}



.img-crop-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(15, 23, 42, 0.72);

}



.img-crop-dialog {

  position: relative;

  z-index: 1;

  width: min(720px, 100%);

  max-height: min(92vh, 840px);

  display: flex;

  flex-direction: column;

  background: #fff;

  border-radius: var(--radius);

  border: 1px solid var(--line);

  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);

  overflow: hidden;

}



.img-crop-header {

  padding: 14px 16px 8px;

}



.img-crop-title {

  margin: 0;

  font-size: 1.1rem;

  line-height: 1.3;

  color: #0f172a;

}



.img-crop-progress {

  margin: 4px 0 0;

  font-size: 0.88rem;

  color: var(--muted);

}



.img-crop-stage {

  flex: 1 1 auto;

  min-height: 240px;

  max-height: 55vh;

  background: #111827;

  overflow: hidden;

}



.img-crop-stage .img-crop-image {

  display: block;

  max-width: 100%;

}



.img-crop-hint {

  margin: 0;

  padding: 10px 16px 0;

  font-size: 0.86rem;

  color: var(--muted);

}



.img-crop-actions {

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  padding: 14px 16px 16px;

}



.img-crop-actions .btn {

  min-width: 110px;

}



.img-crop-btn-cancel {

  background: #fff;

  color: #334155;

  border: 1px solid var(--line);

}



#capaPreview {

  width: 100%;

  max-width: 480px;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  object-position: center;

  border-radius: 10px;

  border: 1px solid var(--line);

  background: #f8fafc;

}



.galeria-preview {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 10px;

}



.galeria-preview[hidden] {

  display: none !important;

}



.img-crop-thumb {

  width: 120px;

  aspect-ratio: 16 / 9;

  border-radius: 8px;

  overflow: hidden;

  border: 1px solid var(--line);

  background: #f8fafc;

}



.img-crop-thumb img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



@media (max-width: 640px) {

  .img-crop-dialog {

    max-height: 96vh;

  }



  .img-crop-stage {

    max-height: 48vh;

    min-height: 200px;

  }



  .img-crop-actions {

    flex-direction: column-reverse;

  }



  .img-crop-actions .btn {

    width: 100%;

  }

}