/* casamento.css — Estilos da página Meu Casamento */

.casamento-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-6);
  margin-bottom: var(--esp-8);
  flex-wrap: wrap;
}

.casamento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--esp-5);
  margin-bottom: var(--esp-8);
}

@media (max-width: 900px) {
  .casamento-grid { grid-template-columns: 1fr; }
}

.casamento-card-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .casamento-card-full { grid-column: 1; } }

/* Locais — dois campos lado a lado ficam empilhados no mobile */
@media (max-width: 640px) {
  .casamento-card-full .card-corpo > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Slug */
.slug-wrapper {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  transition: border-color var(--trans-rapida), box-shadow var(--trans-rapida);
}
.slug-wrapper:focus-within {
  border-color: var(--p-500);
  box-shadow: 0 0 0 3px var(--foco-ring);
}

.slug-prefixo {
  background: var(--superficie-2);
  color: var(--texto-muted);
  padding: 10px var(--esp-3);
  font-size: var(--texto-xs);
  font-family: var(--fonte-mono);
  border-right: 1.5px solid var(--borda);
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.slug-input {
  border: none;
  border-radius: 0;
  flex: 1;
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
}
.slug-input:focus { box-shadow: none; }

/* Link do site */
.site-link-box {
  padding: var(--esp-4);
  background: var(--p-100);
  border: 1px solid var(--p-200);
  border-radius: var(--raio);
}

.site-link-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  flex-wrap: wrap;
}

.site-link {
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  color: var(--p-700);
  font-weight: var(--peso-medio);
  word-break: break-all;
}

/* Barra de ações fixa */
.form-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-6);
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra);
  position: sticky;
  bottom: calc(var(--altura-nav-mobile) + var(--esp-4));
}

@media (min-width: 1025px) {
  .form-acoes { bottom: var(--esp-6); }
}

.form-acoes .caption {
  margin-right: auto;
  color: var(--texto-muted);
}

/* ── Cidade do casamento: lista de sugestões ──────────────────────────────── */
.campo-cidade { position: relative; }
.cidade-sugestoes {
  position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 20;
  margin: 0; padding: 0; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--superficie, var(--n-0)); border: 1px solid var(--borda, var(--n-200));
  border-radius: var(--raio-md, 10px); box-shadow: var(--sombra-lg, 0 12px 32px rgba(0,0,0,.12));
}
.cidade-sugestoes[hidden] { display: none; }
.cidade-sugestoes button {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 12px 14px; min-height: 44px; font: inherit; color: inherit;
  border-bottom: 1px solid var(--borda, var(--n-200));
}
.cidade-sugestoes li:last-child button { border-bottom: 0; }
.cidade-sugestoes button:hover,
.cidade-sugestoes button:focus-visible,
.cidade-sugestoes button[aria-selected="true"] { background: var(--p-100); }
.cidade-sugestoes .uf { opacity: .65; font-size: .85em; margin-left: 6px; }

/* ── Celular: duas colunas viram uma ──────────────────────────────────────────
   As grades de duas colunas vêm com estilo inline, e em 320px dois campos lado
   a lado ficam com ~130px cada — menos que um nome de cidade. O !important é
   o único jeito de vencer um estilo inline sem reescrever o HTML todo. */
@media (max-width: 640px) {
  .grade-dupla,
  .card-corpo > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* Paleta de cores e traje por grupo (site do casamento) */
.paleta-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.paleta-pronta { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--texto); }
.paleta-pronta:hover { border-color: var(--p-500); color: var(--p-500); }
.paleta-pronta span { display: inline-flex; }
.paleta-pronta i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--superficie); margin-left: -5px; }
.paleta-pronta i:first-child { margin-left: 0; }
.paleta-editor, .trajes-editor { display: grid; gap: 8px; margin-bottom: 10px; }
.paleta-linha { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.paleta-linha input[type=color] { width: 52px; height: 42px; padding: 2px; border: 1px solid var(--borda-forte); border-radius: var(--raio-sm); background: var(--superficie); cursor: pointer; }
.traje-linha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 8px; align-items: center; }
@media (max-width: 560px) {
  .traje-linha { grid-template-columns: minmax(0, 1fr) auto; }
  .traje-linha [data-traje] { grid-column: 1 / -1; grid-row: 2; }
}