/* ============================================================
   AUTOFYEDGE — shared "Book Consultation" popup
   Loaded on every page alongside that page's own Tailwind
   config (same noir/elevated/blue-light tokens + Parkinsans/
   Inter fonts everywhere), so only the modal-specific rules
   live here. Injected via booking-modal.js.
   ============================================================ */

body.modal-lock { overflow: hidden; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 8, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s;
  padding: 1.25rem;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.modal-card {
  position: relative;
  width: 100%;
  max-width: 840px;
  background: #0B111C;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 8px 24px -8px rgba(49, 162, 240, 0.12);
  transform: translateY(18px) scale(0.97);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}
@media (min-width: 768px) {
  .modal-card { grid-template-columns: 0.82fr 1fr; }
}
/* Wide layout: the form area itself splits into fields | schedule, side by side,
   so the whole booking flow (details + calendar + times) fits on screen at once
   without scrolling the popup — sized for common laptop/desktop viewports. */
@media (min-width: 980px) {
  .modal-card { max-width: 1180px; grid-template-columns: 0.58fr 1fr; max-height: 95vh; }
  .modal-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
}
.modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); opacity: 1; }

.modal-split-brand {
  background: linear-gradient(135deg, #31A2F0 0%, #2656C4 100%);
  padding: 2.25rem;
  position: relative;
  overflow: hidden;
}
.modal-split-form { padding: 2.25rem; position: relative; }
@media (min-width: 980px) {
  .modal-split-brand, .modal-split-form { padding: 2rem 2.25rem; }
}

.modal-grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.modal-eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
.modal-title {
  margin-top: 0.35rem;
  font-family: 'Parkinsans', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #F4F7FB;
  letter-spacing: -0.01em;
}

.modal-close {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93A2B8;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
.modal-close:hover { color: #F4F7FB; border-color: rgba(99, 188, 250, 0.4); background: rgba(255, 255, 255, 0.05); transform: rotate(90deg); }
.modal-close:focus-visible { outline: 2px solid #63BCFA; outline-offset: 2px; }

.modal-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #93A2B8;
  margin-bottom: 0.4rem;
}
.modal-field {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.modal-field:focus { border-color: #31A2F0; background: rgba(255, 255, 255, 0.05); outline: none; }
.modal-input, .modal-textarea {
  width: 100%;
  border-radius: 0.6rem;
  padding: 0.65rem 0.9rem;
  font-size: 0.875rem;
  color: #F4F7FB;
}
.modal-textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
.modal-input::placeholder, .modal-textarea::placeholder { color: rgba(147, 162, 184, 0.5); }

.modal-body .modal-success { display: none; }
.modal-body.is-success .modal-form { display: none; }
.modal-body.is-success .modal-success { display: block; }

.modal-success-check { stroke-dasharray: 20; stroke-dashoffset: 20; }
.modal-body.is-success .modal-success-check { animation: bookingModalDrawCheck 0.5s ease 0.15s forwards; }
@keyframes bookingModalDrawCheck { to { stroke-dashoffset: 0; } }

/* ---------- Date & time picker (mock availability — placeholder for Calendly) ---------- */
.modal-req-mark { color: #F87171; margin-left: 0.15rem; }
.cal-tz-hint { color: #5B6B82; font-weight: 400; font-size: 0.68rem; margin-left: 0.3rem; }
.modal-error { display: none; font-size: 0.76rem; color: #F87171; margin-top: 0.6rem; }
.modal-error.show { display: block; }

.cal-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.75rem; padding: 0.85rem; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.cal-month { font-family: 'Parkinsans', sans-serif; font-weight: 600; font-size: 0.82rem; color: #F4F7FB; }
.cal-nav { width: 1.9rem; height: 1.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: #93A2B8; background: transparent; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }
.cal-nav:hover:not(:disabled) { color: #F4F7FB; border-color: rgba(99, 188, 250, 0.4); background: rgba(255, 255, 255, 0.05); }
.cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 0.3rem; }
.cal-weekdays span { display: block; text-align: center; font-size: 0.62rem; font-weight: 600; color: #5B6B82; text-transform: uppercase; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-day { aspect-ratio: 1; border-radius: 0.5rem; border: 1px solid transparent; background: transparent; color: #F4F7FB; font-size: 0.78rem; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.cal-day-empty { cursor: default; pointer-events: none; }
.cal-day:hover:not(:disabled):not(.cal-day-empty) { background: rgba(255, 255, 255, 0.06); }
.cal-day.is-today { border-color: rgba(99, 188, 250, 0.4); color: #63BCFA; font-weight: 600; }
.cal-day.is-selected { background: #31A2F0; border-color: #31A2F0; color: #05080D; font-weight: 700; }
.cal-day:disabled { color: #3a4556; cursor: not-allowed; }

.cal-slots-wrap { margin-top: 0.75rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.3s ease; }
/* Sized for the full 8am-8pm range (24 slots = 5 rows of 5 on desktop) so
   every slot is visible at once with no inner scrollbar. */
.cal-slots-wrap.is-open { max-height: 400px; opacity: 1; }
.cal-slots-label { font-size: 0.7rem; font-weight: 600; color: #93A2B8; margin-bottom: 0.45rem; }
.cal-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
@media (min-width: 980px) {
  .cal-slots { grid-template-columns: repeat(5, 1fr); }
}
.cal-slot { border-radius: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); color: #93A2B8; font-size: 0.68rem; padding: 0.4rem 0.2rem; cursor: pointer; white-space: nowrap; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.cal-slot:hover { border-color: rgba(99, 188, 250, 0.4); color: #F4F7FB; }
.cal-slot.is-selected { background: #31A2F0; border-color: #31A2F0; color: #05080D; font-weight: 700; }
.cal-slots-empty { grid-column: 1 / -1; font-size: 0.76rem; color: #5B6B82; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay, .modal-card, .modal-success-check, .cal-slots-wrap { transition: none !important; animation: none !important; }
}