/* ============================================
   Contact page — two-column shell, form is one
   reveal block (fields never stagger). Inline
   picker/modal/submit JS untouched; we style the
   shell and leave JS-driven button styles alone.
   Extends style.css (tokens never redefined).
   ============================================ */

/* ── Quick-contact bar ── */
.quick-contact {
  background: var(--blush);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  flex-wrap: wrap;
  text-align: center;
}
.quick-contact a {
  font-weight: 700;
  color: var(--charcoal);
  font-size: var(--text-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur-fast) var(--ease-soft);
}
.quick-contact a:hover { color: var(--plum); }
.quick-contact .sep { color: var(--gray); }

/* ── Reveal info items in a short stagger ── */
.contact-info { align-self: start; }
.contact-info .contact-item { transition-delay: var(--reveal-delay, 0ms); }

/* small pricing note card (was inline) */
.pricing-note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--blush);
}
.pricing-note p:first-child {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: var(--text-base);
  color: var(--gray);
  line-height: 1.7;
}
.pricing-note .pricing-mark {
  font-size: var(--text-xs);
  color: var(--gold);
  font-weight: 700;
  margin-top: var(--space-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Form: one reveal block, never per-field ── */
.contact-form { align-self: start; }
.contact-form p.form-intro {
  font-size: var(--text-sm);
  color: var(--gray);
  margin-bottom: var(--space-3);
}

/* the readonly picker triggers read as inputs already; keep cursor cue */
#occasionDisplay,
#dateDisplay,
#timeDisplay { cursor: pointer; caret-color: transparent; }

/* ── FAQ: layered cards ── */
.faq-section {
  background: var(--light-gray);
}
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.faq-item {
  background: var(--white);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border-left: 3px solid var(--sage);
  transition: transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.faq-item h3 { font-size: var(--text-h3); margin-bottom: var(--space-1); }
.faq-item p { font-size: var(--text-sm); color: var(--gray); }

/* ── Info column: heading group + helper note ── */
.contact-intro { margin-bottom: var(--space-4); }
.contact-intro h2 { margin-bottom: var(--space-2); }
.contact-intro p { color: var(--gray); }
.contact-note {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin-top: 0.2rem;
}

/* icon circle holding a letter glyph (Zelle) instead of an emoji */
.contact-icon-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--sage-dark);
  font-size: 1.35rem;
}

/* social pill carrying a letter (Zelle) — match the emoji pills' weight */
.social-link-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.25rem;
}

/* ── Picker fields: relative anchor for the popups ── */
.picker-group { position: relative; }

/* popup card — JS toggles display; width is set inline per field */
.picker-popup {
  position: absolute;
  left: 0;
  top: calc(100% + 0.4rem);
  z-index: 50;
  padding: var(--space-2);
  background: var(--white);
  border: 1.5px solid var(--sage);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.picker-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
}
.picker-grid-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.4rem;
}

/* ── Vase toggle: JS writes the active fill, we set rest only ── */
.vase-toggle {
  display: flex;
  gap: var(--space-2);
}
.vase-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 2px solid var(--blush);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--charcoal);
  font-family: 'Lato', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}
.vase-btn:hover { border-color: var(--sage); }
.vase-mark { color: var(--gold); }

/* ── Submit button: full-width within the form shell ── */
.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--space-2);
}

/* ── Success modal: JS sets display:flex to open ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background: rgba(44, 24, 80, 0.55);
  backdrop-filter: blur(4px);
}
.modal-card {
  position: relative;
  width: 90%;
  max-width: 480px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: modalIn var(--dur-normal) var(--ease-out-expo);
}
.modal-close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-3);
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--sage);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-soft);
}
.modal-close:hover { color: var(--plum); }
.modal-icon { margin-bottom: var(--space-2); }
.modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--charcoal);
  margin-bottom: var(--space-1);
}
.modal-text {
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--sage-dark);
  color: var(--white);
  font-family: 'Lato', sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}
.modal-btn:hover { background: var(--plum); transform: translateY(-2px); }
.modal-btn:active { transform: translateY(0); }

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
  .quick-contact { gap: var(--space-2); }
  .quick-contact .sep { display: none; }
}

/* ── Reduced motion: no hover/focus lift ── */
@media (prefers-reduced-motion: reduce) {
  .faq-item:hover,
  .modal-btn:hover { transform: none !important; }
}