/* ============================================================
   astro-forms.css
   ------------------------------------------------------------
   1) Gender / language "pill" highlighting — done with pure CSS
      :checked + sibling selectors. This removes the need for
      highlightGenderBtn(), highlightlanguageBtn(), mHighlightGender(),
      and mHighlightLanguage() in JS entirely.

   2) Shared toggle classes for the city-search dropdown and the
      "place selected" field, used by birth-form-utils.js for every
      form (hero / kundali modal / marriage's two parties).

   IMPORTANT — remove these now-duplicate bits from your existing
   stylesheet:
     - any JS-driven inline-style gender/language highlighting can
       stay in markup as-is; it's simply never written to anymore.
     - the existing `.m-p1-gender-radio:checked + .m-p1-gender-btn`
       and `.m-language-radio:checked + .m-language-btn` rules you
       already had are kept below (just centralised here), so you
       can delete those two blocks from the old file to avoid having
       them defined twice.
   ============================================================ */

/* ── Hero form + kundali modal ── */
.gender-radio:checked + .gender-btn,
.language-radio:checked + .language-btn {
  border-color: #f15a24;
  background-color: #fff5f0;
  color: #f15a24;
  font-weight: 700;
}

.modal-gender-radio:checked + .radio-btn,
.modal-language-radio:checked + .lang-btn {
  border-color: #f15a24;
  background-color: #fff5f0;
  color: #f15a24;
  font-weight: 700;
}

/* ── Marriage modal (two parties + shared language toggle) ── */
.m-p1-gender-radio:checked + .m-p1-gender-btn {
  border-color: #3b82f6 !important;
  background: rgba(59, 130, 246, 0.12) !important;
  color: #1d4ed8 !important;
  font-weight: 700 !important;
}
.m-p2-gender-radio:checked + .m-p2-gender-btn {
  border-color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.1) !important;
  color: #be185d !important;
  font-weight: 700 !important;
}
.m-language-radio:checked + .m-language-btn {
  border-color: #ec4899 !important;
  background: rgba(236, 72, 153, 0.1) !important;
  color: #be185d !important;
  font-weight: 700 !important;
}

/* ── City search dropdown (shared by every prefix) ── */
.city-dropdown {
  display: none;
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1.5px solid #ede5d8;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  max-height: 160px;
  overflow-y: auto;
}
.city-dropdown.is-open {
  display: block;
}

.city-result-item {
  padding: 8px 14px;
  font-size: 12px;
  color: #2d1208;
  cursor: pointer;
  border-bottom: 1px solid #f5f0ea;
  display: flex;
  align-items: center;
  gap: 6px;
}
.city-result-item:last-child { border-bottom: none; }
.city-result-empty,
.city-result-error { color: #999; cursor: default; }
.city-result-error { color: #ef4444; }

#hero-city-dropdown .city-result-item:hover,
#modal-city-dropdown .city-result-item:hover {
  background: rgba(241, 90, 36, 0.06);
  color: #f15a24;
}
#m-p1-city-dropdown .city-result-item:hover {
  background: rgba(59, 130, 246, 0.07);
  color: #1d4ed8;
}
#m-p2-city-dropdown .city-result-item:hover {
  background: rgba(236, 72, 153, 0.07);
  color: #be185d;
}

/* ── "Place selected" field (shown once a city is chosen) ── */
.place-display { display: none; }
.place-display.is-visible { display: block; }

@media (max-width: 768px) {
  .modal-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 10px !important;
    box-sizing: border-box !important;
  }
  
  /* Stack Boy and Girl sections vertically on mobile */
  .marriage-grid-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Stack Email and WhatsApp rows one by one, full width on mobile */
  .marriage-shared-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

@media (max-width: 640px) {
  /* Force grid container down to a single column scaling comfortably to viewport edges */
  .marriage-grid-container {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 4px !important;
  }
  
  /* Allow time block components to wrap on small screens so they don't break horizontal boundaries */
  .marriage-time-row {
    flex-wrap: wrap !important;
    height: auto !important;
  }
  .marriage-time-row input {
    padding: 8px 0 !important;
  }
  
  /* Ensure the Gender labels drop comfortably into an elegant wrapped stack */
  .marriage-gender-wrap {
    flex-wrap: wrap !important;
  }
  .marriage-gender-wrap label {
    flex: 1 1 calc(50% - 4px) !important; /* Forces layout into elegant rows */
    min-width: 70px !important;
  }
}

@media (max-width: 640px) {
  /* Force the two columns to stack one-by-one vertically on mobile */
  .marriage-responsive-shared-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Ensure full width on inputs to stop right-side screen spilling */
  .marriage-responsive-shared-grid input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}