/* Fortified Networks — shared booking drawer (identical behavior/markup contract in both options) */

#booking-drawer { position: fixed; inset: 0; z-index: 50; }
#booking-drawer[hidden] { display: none; }

#booking-drawer .drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(1, 3, 20, 0);
  transition: background 280ms var(--ease-in-out);
}
#booking-drawer.is-open .drawer-backdrop { background: rgba(1, 3, 20, .55); }

#booking-drawer .drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 520px; max-width: 96vw;
  background: var(--cream-soft);
  overflow-y: auto;
  /* iOS Safari has a well-known bug where a scrollable region nested inside
     a position:fixed ancestor (#booking-drawer above this) frequently
     doesn't respond to touch scroll at all without this -- reported as the
     drawer feeling completely stuck on a real device, not just slow.
     overscroll-behavior stops the drawer's own scroll from chaining into
     the backdrop/page once it hits its top or bottom edge. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateX(100%);
  box-shadow: -30px 0 70px rgba(1, 3, 20, .4);
  transition: transform 320ms var(--ease-drawer);
}
#booking-drawer.is-open .drawer-panel { transform: translateX(0); }

.drawer-head {
  padding: 26px 34px;
  border-bottom: 1px solid rgba(1, 3, 20, .18);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-head .drawer-eyebrow {
  font-family: var(--font-word); font-size: 13px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.drawer-close {
  cursor: pointer; border: 1px solid rgba(1, 3, 20, .25); background: transparent;
  color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  padding: 8px 12px; transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.drawer-close:hover { background: var(--ink); color: var(--cream-soft); }

.drawer-body { padding: 30px 34px 56px; display: flex; flex-direction: column; gap: 22px; }
.drawer-body .intro { font-size: 16px; line-height: 1.55; color: #3a3f4c; }
/* minmax(0, 1fr), not a bare 1fr: grid items default to min-width:auto, and an
   <input> with no explicit width has its own intrinsic content width (~205px
   in this font/size) as that auto minimum. A bare 1fr still has to respect
   that minimum, so the two tracks resolved to 205.5px each — 411px of columns
   inside a panel that was only 306px wide past its padding, pushing the second
   field off the right edge of the drawer entirely on any narrow viewport.
   minmax(0, ...) overrides the auto minimum back to 0 so the tracks actually
   share the available width instead of deferring to content size. */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #616775; }
.field input, .field select {
  width: 100%;
  border: 1px solid rgba(1, 3, 20, .3); background: #fff; padding: 13px 14px;
  font-size: 15px; color: var(--ink); font-family: var(--font-body);
  transition: border-color 160ms var(--ease-out);
}

/* Even fixed, two 130-150px columns is a cramped target for typing a name on
   a real phone. Below 420 the row stacks to one column instead — a phone-
   width threshold, not the drawer's own 96vw cap (which stays 2-up down to
   about 330px of raw grid math before this override takes over first). */
@media (max-width: 420px) {
  .field-row { grid-template-columns: minmax(0, 1fr); }
}
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--accent-deep); }
.field .field-error { font-size: 11px; color: #b8410f; min-height: 13px; }

.drawer-form-error { font-size: 13px; line-height: 1.5; color: #b8410f; margin: 0 0 12px; }
.drawer-form-error[hidden] { display: none; }

.drawer-submit {
  cursor: pointer; border: none; background: var(--ink); color: var(--cream-soft);
  padding: 17px 28px; font-size: 16px; font-weight: 600; font-family: var(--font-body);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  transition: transform 160ms var(--ease-out);
}
.drawer-submit:hover { transform: translateY(-2px); }
.drawer-submit:active { transform: translateY(-2px) scale(0.97); }
.drawer-fine-print { font-size: 13px; line-height: 1.5; color: #616775; }

.thank-you { padding: 56px 34px; display: flex; flex-direction: column; gap: 22px; }
.thank-you[hidden] { display: none; }

/* A real mark, not a placeholder square — the highest-payoff moment on the
   page (a converted lead) deserves more than a flat colored block. Drawn in
   CSS (two rotated bars forming a check) rather than an icon font/emoji, to
   stay in the same precise, geometric register as the rest of the page. */
.thank-you .mark {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-deep);
  flex: none;
  animation: markIn 420ms var(--ease-out) both;
}
.thank-you .mark::before,
.thank-you .mark::after {
  content: '';
  position: absolute;
  background: var(--cream-soft);
  border-radius: 1px;
}
.thank-you .mark::before {
  width: 3px; height: 9px;
  left: 15px; top: 22px;
  transform: rotate(45deg);
}
.thank-you .mark::after {
  width: 3px; height: 16px;
  left: 24px; top: 14px;
  transform: rotate(-45deg);
}
@keyframes markIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.thank-you .message {
  font-family: var(--font-display); font-size: 34px; line-height: 1.3;
  letter-spacing: -.02em; color: var(--ink);
}
.thank-you-reset {
  align-self: flex-start; cursor: pointer; border: 1px solid var(--ink); background: transparent;
  color: var(--ink); padding: 14px 22px; font-size: 15px; font-weight: 600; font-family: var(--font-body);
  transition: background 160ms var(--ease-out), color 160ms var(--ease-out);
}
.thank-you-reset:hover { background: var(--ink); color: var(--cream-soft); }

@media (prefers-reduced-motion: reduce) {
  #booking-drawer .drawer-backdrop,
  #booking-drawer .drawer-panel { transition-duration: 1ms; }
  .thank-you .mark { animation: none; }
}

/* Honeypot. Paired with the `website` check in api/consult.js: a bot that
   fills every input it finds trips it, a human never sees it. Deliberately
   NOT display:none or hidden — some form-filling bots skip those two
   specifically, so the field is moved off-canvas instead while staying a
   real, fillable input. tabindex="-1" and aria-hidden in the markup keep
   keyboard and screen-reader users out of it. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}