/* ── map-end-cluster: shared container for top-end map controls ─────────────
   Positions children (contact btn, AIS btn) in a vertical stack at the
   top-inline-end corner of the map. Replaces the absolute positioning that
   was on .ais-map-btn directly.
   ─────────────────────────────────────────────────────────────────────────── */

.map-end-cluster {
  position: absolute;
  top: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 200;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);

  pointer-events: none; /* children opt back in */
}

.map-end-cluster > * {
  pointer-events: auto;
}


/* ── map-contact-btn ────────────────────────────────────────────────────────
   Pill button, always visible. Same glass-morphism style as .ais-map-btn.
   ─────────────────────────────────────────────────────────────────────────── */

.map-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);

  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(44, 74, 110, 0.12);
  box-shadow: var(--shadow-md);

  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-base);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast),
    box-shadow       var(--duration-fast),
    transform        var(--duration-fast);
}

.map-contact-btn:hover,
.map-contact-btn:focus-visible {
  background: rgba(255, 255, 255, 1);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: var(--color-ink-strong);
}

.map-contact-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.map-contact-btn__icon {
  font-size: 15px;
  line-height: 1;
  color: var(--color-primary);
}

.map-contact-btn__label {
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  transition:
    max-width var(--duration-base) var(--ease-default),
    opacity   var(--duration-fast) var(--ease-default);
}

.has-panel-open .map-contact-btn .map-contact-btn__label {
  max-width: 0;
  opacity: 0;
}

.has-panel-open .map-contact-btn {
  padding-inline-end: var(--space-2);
}


/* ── .ais-map-btn override: remove its own absolute positioning now that
   it lives inside .map-end-cluster ───────────────────────────────────────── */

.map-end-cluster .ais-map-btn {
  position: static;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────────────────────── */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-default);
}

.contact-modal.is-visible {
  pointer-events: auto;
  opacity: 1;
}

/* ── Backdrop ───────────────────────────────────────────────────────────── */

.contact-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 40, 70, 0.52);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

/* ── Card — outer shell only: clips scroll within rounded corners ─────────
   Scrolling and padding live in .contact-modal__body so the scrollbar
   never bleeds through the border-radius.
   ─────────────────────────────────────────────────────────────────────────── */

.contact-modal__card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--color-surface-raised);
  border-radius: var(--radius-xl);
  box-shadow:
    0 20px 60px rgba(20, 40, 70, 0.22),
    0  2px  8px rgba(20, 40, 70, 0.06);
  /* overflow:hidden clips the scrollbar of .contact-modal__body
     inside the rounded corners */
  overflow: hidden;
  transform: scale(0.96) translateY(12px);
  transition: transform var(--duration-slow) var(--ease-default);
}

.contact-modal.is-visible .contact-modal__card {
  transform: scale(1) translateY(0);
}

/* ── Scrollable body ─────────────────────────────────────────────────────── */

.contact-modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 2×var(--space-4) = viewport padding; 32px = breathing room */
  max-height: calc(100dvh - 2 * var(--space-4) - 32px);
  /* --space-8=32px top, --space-6=24px sides/bottom */
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ── Close button — pinned to card corner, sits above the scroll body ───── */

.contact-modal__close {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 1;
  color: var(--color-ink-muted);
  padding: var(--space-2);
  min-height: 34px;
  min-width: 34px;
  border-radius: var(--radius-md);
  transition: color var(--duration-fast), background var(--duration-fast);
}

.contact-modal__close:hover {
  color: var(--color-ink-strong);
  background: var(--color-surface-sunken);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.contact-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--color-ink-subtle);
}

.contact-modal__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-primary-soft, rgba(74, 127, 181, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.contact-modal__title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink-strong);
  margin: 0;
  letter-spacing: -0.01em;
}

.contact-modal__subtitle {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0;
}

/* ── Form ───────────────────────────────────────────────────────────────── */

.contact-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-modal__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.contact-modal__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-base);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.contact-modal__required {
  color: #e05252;
  font-size: var(--text-xs);
  line-height: 1;
  margin-block-start: 1px;
}

.contact-modal__input,
.contact-modal__select,
.contact-modal__textarea {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1.5px solid var(--color-ink-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-base, #fff);
  color: var(--color-ink-strong);
  font-size: var(--text-base);
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition:
    border-color var(--duration-fast),
    box-shadow   var(--duration-fast);
}

.contact-modal__input:focus,
.contact-modal__select:focus,
.contact-modal__textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(74, 127, 181, 0.18);
}

.contact-modal__input.is-invalid,
.contact-modal__textarea.is-invalid {
  border-color: #e05252;
  box-shadow: 0 0 0 3px rgba(224, 82, 82, 0.14);
}

.contact-modal__select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%232C4A6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-inline-end: calc(var(--space-3) + 20px);
}

[dir="rtl"] .contact-modal__select {
  background-position: left var(--space-3) center;
  padding-inline-end: var(--space-3);
  padding-inline-start: calc(var(--space-3) + 20px);
}

.contact-modal__textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

/* ── Character counter row ──────────────────────────────────────────────── */

.contact-modal__char-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 16px;
}

.contact-modal__char-count {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
  margin-inline-start: auto;
  transition: color var(--duration-fast);
}

.contact-modal__char-count.is-over-limit {
  color: #e05252;
  font-weight: 600;
}

/* ── Field-level error ──────────────────────────────────────────────────── */

.contact-modal__field-error {
  display: none;
  font-size: var(--text-xs);
  color: #e05252;
  font-weight: 500;
  flex: 1;
}

/* ── General (API) error ────────────────────────────────────────────────── */

/* Ensure [hidden] beats any display rule */
.contact-modal__error[hidden] {
  display: none !important;
}

.contact-modal__error {
  font-size: var(--text-sm);
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}

/* ── Submit button ──────────────────────────────────────────────────────── */

.contact-modal__submit {
  width: 100%;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  font-size: var(--text-base);
  font-weight: 600;
  margin-block-start: var(--space-1);
}

.contact-modal__submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ── Success state ───────────────────────────────────────────────────────
   Hidden by default (display:none). JS removes [hidden] to reveal it.
   The :not([hidden]) selector applies display:flex only when visible,
   so the [hidden] attribute is never overridden by a display:flex rule.
   ─────────────────────────────────────────────────────────────────────────── */

.contact-modal__success {
  display: none;
}

.contact-modal__success:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
  padding: var(--space-6) var(--space-4);
}

.contact-modal__success-icon {
  font-size: 52px;
  color: var(--color-success, #6BBF8E);
  line-height: 1;
}

.contact-modal__success-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-ink-strong);
  margin: 0;
}

.contact-modal__success-body {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin: 0;
}


/* ── Mobile: bottom-sheet style ─────────────────────────────────────────── */

@media (max-width: 479px) {
  .contact-modal {
    align-items: flex-end;
    padding: 0;
  }

  .contact-modal__card {
    max-width: 100%;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    transform: translateY(48px);
  }

  .contact-modal.is-visible .contact-modal__card {
    transform: translateY(0);
  }

  .contact-modal__body {
    max-height: 88dvh;
    padding: var(--space-8) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom, 0px));
  }
}