/* =========================================================
   Ajustes — Save The Date SP
   - Contador regressivo (hero)
   - Bloco de data/hora do evento na tela de sucesso
   Usa os tokens da marca do lp.css.
   ========================================================= */

/* ---- Contador regressivo (hero, sobre fundo escuro) ---- */
.countdown {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(16px, 4vw, 36px);
  margin: clamp(22px, 3.5vw, 36px) 0 clamp(6px, 1vw, 10px);
}
.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 52px;
}
.countdown__num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(34px, 5.2vw, 54px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.countdown__sep {
  width: 1px;
  height: clamp(34px, 5.2vw, 54px);
  background: rgba(197, 165, 114, 0.4);
}

/* ---- Data/hora do evento na tela de sucesso (fundo escuro) ---- */
.form__success-evento {
  margin-top: clamp(20px, 3vw, 28px);
  padding: 18px 24px;
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}
.form__success-evento-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brand-light);
}
.form__success-evento-data {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 2.4vw, 24px);
  color: #FFFFFF;
  letter-spacing: -0.01em;
}
.form__success-evento-local {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Botões de ação na seção Data/Local (Ver no mapa / Salvar na agenda) ---- */
.detalhes__action {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  margin-top: 2px;
  padding: 8px 16px;
  border: 1px solid var(--border-gold, rgba(197, 165, 114, 0.5));
  border-radius: 999px;
  background: transparent;
  color: var(--brand, #C5A572);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.detalhes__action:hover,
.detalhes__action:focus-visible {
  background: var(--brand, #C5A572);
  color: #0A0A0A;
  border-color: var(--brand, #C5A572);
}
.detalhes__action svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.detalhes__agenda {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
}
.detalhes__agenda-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 168px;
  padding: 6px;
  background: #14110D;
  border: 1px solid var(--border-gold, rgba(197, 165, 114, 0.4));
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.detalhes__agenda-menu[hidden] {
  display: none;
}
.detalhes__agenda-menu a {
  padding: 10px 14px;
  border-radius: 8px;
  color: #F3ECE0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.detalhes__agenda-menu a:hover,
.detalhes__agenda-menu a:focus-visible {
  background: rgba(197, 165, 114, 0.16);
  color: #FFFFFF;
}