/* ── EIT Enquiry Form Modal ── */

/* ── Body scroll lock (applied via JS on open) ────────────────────────────── */
body.eit-modal-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}

/* ── Design tokens ────────────────────────────────────────────────────────── */
.eit-enquiry-root {
  --eq-white:     #ffffff;
  --eq-border:    #f0f0f0;
  --eq-gold:      #c9a84c;
  --eq-gold-pale: #fdf8ee;
  --eq-ink:       #0a0a0a;
  --eq-ink-mid:   #555;
  --eq-ink-soft:  #999;
  --eq-surface:   #f8f7f5;
  --eq-serif:     'Cormorant Garamond', Georgia, serif;
  --eq-sans:      'DM Sans', system-ui, sans-serif;
}

/* ── Overlay ──────────────────────────────────────────────────────────────── */
.enquiry-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  background: rgba(10,9,6,0.78) !important;
  z-index: 1000000 !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  font-family: var(--eq-sans) !important;
}
.enquiry-overlay.open { display: flex !important; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.enquiry-modal {
  background: var(--eq-white) !important;
  border-radius: 16px !important;
  width: 100% !important;
  max-width: 580px !important;
  /* Use svh (smallest viewport height) → dvh → vh cascade for best mobile support */
  max-height: 88svh !important;
  max-height: 88dvh !important;
  max-height: 88vh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3) !important;
}

/* ── Header — never shrinks ───────────────────────────────────────────────── */
.enquiry-header {
  padding: 28px 32px 18px !important;
  border-bottom: 0.5px solid var(--eq-border) !important;
  flex: 0 0 auto !important;
}

.enquiry-close {
  position: absolute !important;
  top: 14px !important; right: 14px !important;
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--eq-surface) !important;
  border: 0.5px solid var(--eq-border) !important;
  color: var(--eq-ink-soft) !important;
  font-size: 15px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .15s !important;
  z-index: 2 !important;
}
.enquiry-close:hover { background: #ede9e1 !important; }

.enquiry-progress-bar {
  height: 2px !important;
  background: var(--eq-border) !important;
  border-radius: 1px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}
.enquiry-progress-fill {
  height: 100% !important;
  background: var(--eq-gold) !important;
  border-radius: 1px !important;
  transition: width .3s ease !important;
}

.enquiry-step-count {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--eq-ink-soft) !important;
  margin-bottom: 5px !important;
}
.enquiry-step-title {
  font-family: var(--eq-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  color: var(--eq-ink) !important;
  line-height: 1.2 !important;
  padding-right: 36px !important;
}

/* ── Body — this is the ONLY scrolling region ─────────────────────────────── */
.enquiry-body {
  flex: 1 1 auto !important;
  /* Critical: without min-height:0, flex children won't shrink below content */
  min-height: 0 !important;
  overflow-y: scroll !important;          /* scroll, not auto — more reliable on iOS */
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding: 22px 32px !important;
}

.enquiry-step { display: none !important; }
.enquiry-step.active { display: block !important; }

/* ── Footer — never shrinks ───────────────────────────────────────────────── */
.enquiry-footer {
  flex: 0 0 auto !important;
  padding: 14px 32px 22px !important;
  border-top: 0.5px solid var(--eq-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--eq-white) !important;
}

/* ── Form elements ────────────────────────────────────────────────────────── */
.eq-field { margin-bottom: 16px !important; }

.eq-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--eq-ink-mid) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.eq-input {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 0.5px solid var(--eq-border) !important;
  border-radius: 7px !important;
  font-family: var(--eq-sans) !important;
  font-size: 16px !important;   /* 16px prevents iOS auto-zoom on focus */
  color: var(--eq-ink) !important;
  background: var(--eq-white) !important;
  outline: none !important;
  transition: border-color .15s !important;
  box-sizing: border-box !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.eq-input:focus       { border-color: var(--eq-gold) !important; }
.eq-input::placeholder { color: var(--eq-ink-soft) !important; }
.eq-input.eq-error    { border-color: #e53e3e !important; }

textarea.eq-input {
  resize: vertical !important;
  min-height: 90px !important;
  line-height: 1.6 !important;
}

.eq-select {
  width: 100% !important;
  padding: 11px 14px !important;
  border: 0.5px solid var(--eq-border) !important;
  border-radius: 7px !important;
  font-family: var(--eq-sans) !important;
  font-size: 16px !important;
  color: var(--eq-ink) !important;
  background: var(--eq-white) !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8680' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  cursor: pointer !important;
  transition: border-color .15s !important;
  box-sizing: border-box !important;
}
.eq-select:focus  { border-color: var(--eq-gold) !important; }
.eq-select.eq-error { border-color: #e53e3e !important; }

.eq-error-msg {
  font-size: 11px !important;
  color: #e53e3e !important;
  margin-top: 5px !important;
  display: none !important;
}
.eq-error-msg.visible { display: block !important; }

/* ── Checkboxes ───────────────────────────────────────────────────────────── */
.eq-checkboxes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px !important;
}

.eq-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border: 0.5px solid var(--eq-border) !important;
  border-radius: 7px !important;
  background: var(--eq-white) !important;
  cursor: pointer !important;
  font-size: 12px !important;
  color: var(--eq-ink-mid) !important;
  line-height: 1.3 !important;
  transition: border-color .15s, background .15s !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: all !important;
  position: relative !important;
  z-index: 1 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}
.eq-check-label:hover { border-color: var(--eq-gold) !important; background: var(--eq-gold-pale) !important; }
.eq-check-label input { display: none !important; pointer-events: none !important; }

.eq-checkbox {
  width: 15px !important; height: 15px !important;
  border-radius: 3px !important;
  border: 1.5px solid var(--eq-border) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .15s, background .15s !important;
}
.eq-check-label.checked { border-color: var(--eq-gold) !important; background: var(--eq-gold-pale) !important; }
.eq-check-label.checked .eq-checkbox { border-color: var(--eq-gold) !important; background: var(--eq-gold) !important; }
.eq-check-label.checked .eq-checkbox::after {
  content: '' !important;
  width: 8px !important; height: 5px !important;
  border-left: 1.5px solid #fff !important;
  border-bottom: 1.5px solid #fff !important;
  transform: rotate(-45deg) translateY(-1px) !important;
  display: block !important;
}

/* ── Scale ────────────────────────────────────────────────────────────────── */
.eq-scale {
  display: flex !important;
  gap: 5px !important;
  align-items: stretch !important;
}
.eq-scale-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 40px !important;
  border: 0.5px solid var(--eq-border) !important;
  border-radius: 6px !important;
  background: var(--eq-white) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--eq-ink-mid) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color .15s, background .15s !important;
  padding: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}
.eq-scale-btn:hover   { border-color: var(--eq-gold) !important; background: var(--eq-gold-pale) !important; }
.eq-scale-btn.selected { border-color: var(--eq-gold) !important; background: var(--eq-gold) !important; color: #fff !important; font-weight: 600 !important; }
.eq-scale-btn.eq-error { border-color: #e53e3e !important; }

.eq-scale-labels {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 6px !important;
  font-size: 10px !important;
  color: var(--eq-ink-soft) !important;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.eq-back-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--eq-ink-soft) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 8px 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--eq-sans) !important;
  min-height: 44px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.eq-back-btn:hover  { color: var(--eq-ink) !important; }
.eq-back-btn.hidden { visibility: hidden !important; pointer-events: none !important; }

.eq-next-btn {
  padding: 12px 28px !important;
  background: var(--eq-ink) !important;
  color: #fff !important;
  font-family: var(--eq-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background .18s, transform .15s !important;
  white-space: nowrap !important;
  min-height: 44px !important;
  -webkit-tap-highlight-color: transparent !important;
}
.eq-next-btn:hover   { background: #333 !important; transform: translateY(-1px) !important; }
.eq-next-btn.submit  { background: var(--eq-gold) !important; }
.eq-next-btn.submit:hover { background: #b8841f !important; }
.eq-next-btn:disabled { opacity: .6 !important; cursor: wait !important; transform: none !important; }

/* ── Success screen ───────────────────────────────────────────────────────── */
.eq-success {
  display: none !important;
  padding: 48px 32px !important;
  text-align: center !important;
  flex: 1 1 auto !important;
  overflow-y: auto !important;
}
.eq-success.show { display: block !important; }

.eq-success-icon {
  width: 52px !important; height: 52px !important;
  border-radius: 50% !important;
  background: var(--eq-gold-pale) !important;
  border: 0.5px solid #e8d5a8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 18px !important;
}
.eq-success-icon svg { color: var(--eq-gold) !important; }
.eq-success-title {
  font-family: var(--eq-serif) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--eq-ink) !important;
  margin-bottom: 10px !important;
}
.eq-success-sub {
  font-size: 13px !important;
  color: var(--eq-ink-soft) !important;
  line-height: 1.65 !important;
  max-width: 340px !important;
  margin: 0 auto !important;
}

/* ── Shake animation ──────────────────────────────────────────────────────── */
@keyframes eqShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Short desktop / landscape laptop (height < 680px) ───────────────────── */
@media (max-height: 680px) and (min-width: 641px) {
  .enquiry-modal  { max-height: 96vh !important; max-height: 96dvh !important; }
  .enquiry-header { padding: 18px 32px 14px !important; }
  .enquiry-body   { padding: 14px 32px !important; }
  .enquiry-footer { padding: 12px 32px 14px !important; }
  .eq-field       { margin-bottom: 11px !important; }
  .enquiry-step-title { font-size: 19px !important; }
  textarea.eq-input   { min-height: 68px !important; }
}

/* ── Tablet / large mobile (≤ 640px) — bottom-sheet pattern ──────────────── */
@media (max-width: 640px) {
  .enquiry-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
    /* Overlay itself must NOT clip child scroll — no overflow:hidden here */
  }
  .enquiry-modal {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    /* Fixed height on mobile = flex layout always resolves correctly */
    height: 88svh !important;
    height: 88dvh !important;
    height: 88vh !important;
    max-height: none !important;
    /* Push above iOS home bar */
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
  .enquiry-header { padding: 20px 20px 14px !important; }
  .enquiry-body   { padding: 16px 20px 24px !important; }
  .enquiry-footer {
    padding: 12px 20px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
  }
  .enquiry-step-title { font-size: 20px !important; }
  .eq-field { margin-bottom: 13px !important; }
}

/* ── Small mobile (≤ 480px) ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .enquiry-modal {
    height: 92svh !important;
    height: 92dvh !important;
    height: 92vh !important;
  }
  .enquiry-header { padding: 16px 16px 12px !important; }
  .enquiry-body   { padding: 14px 16px 20px !important; }
  .enquiry-footer { padding: 10px 16px max(14px, env(safe-area-inset-bottom, 14px)) !important; }
  .enquiry-step-title { font-size: 18px !important; }
  .eq-checkboxes  { grid-template-columns: 1fr !important; }
  .eq-scale-btn   { height: 36px !important; font-size: 11px !important; }
  .eq-next-btn    { padding: 12px 18px !important; font-size: 11px !important; }
  .eq-field       { margin-bottom: 11px !important; }
  textarea.eq-input { min-height: 72px !important; }
}

/* ── Very small mobile (≤ 360px) ─────────────────────────────────────────── */
@media (max-width: 360px) {
  .enquiry-header { padding: 14px 14px 10px !important; }
  .enquiry-body   { padding: 12px 14px 16px !important; }
  .enquiry-footer { padding: 8px 14px max(12px, env(safe-area-inset-bottom, 12px)) !important; }
  .eq-scale       { gap: 3px !important; }
  .eq-scale-btn   { height: 32px !important; font-size: 10px !important; border-radius: 4px !important; }
  .eq-next-btn    { padding: 10px 14px !important; font-size: 11px !important; }
  .eq-back-btn    { font-size: 11px !important; }
  .enquiry-step-title { font-size: 17px !important; }
}