/* ═══════════════════════════════════════════════════════════
   drawer.css — Mobile bottom-sheet intake drawer
   Only active on < 768px. Desktop is unaffected.
   ═══════════════════════════════════════════════════════════ */

/* ── Hide desktop section on mobile ── */
@media (max-width: 900px) {
  .desktop-intake {
    display: none !important;
  }
}

/* ── Backdrop ── */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 20000;
  transition: background 350ms ease;
  -webkit-tap-highlight-color: transparent;
}
.drawer-backdrop.visible {
  display: block;
}
.drawer-backdrop.active {
  background: rgba(0, 0, 0, 0.7);
}

/* ── Drawer shell ── */
.intake-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20010;

  /* Sheet dimensions */
  max-height: 92svh;
  border-radius: 20px 20px 0 0;

  /* Dark surface matching site */
  background: #0d0d1a;
  border-top: 1px solid rgba(139, 92, 246, 0.25);
  box-shadow:
    0 -8px 40px rgba(0, 0, 0, 0.6),
    0 -1px 0 rgba(139, 92, 246, 0.2);

  /* Start offscreen */
  transform: translateY(100%);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;

  /* Layout */
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Hidden from AT when closed */
  visibility: hidden;
}

.intake-drawer.open {
  transform: translateY(0);
  visibility: visible;
}

/* Dragging state — no transition so it follows finger */
.intake-drawer.dragging {
  transition: none;
}

/* ── Drag handle bar ── */
.drawer-handle-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0 4px;
  cursor: grab;
  touch-action: none; /* we handle touch manually */
}
.drawer-handle-bar:active { cursor: grabbing; }

.drawer-handle-pill {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.2);
  transition: background 200ms ease;
}
.drawer-handle-bar:hover .drawer-handle-pill {
  background: rgba(139, 92, 246, 0.5);
}

/* ── Drawer header ── */
.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.drawer-header-copy { flex: 1; }

.drawer-eyebrow {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-violet, #8b5cf6);
  margin-bottom: 0.25rem;
}

.drawer-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 0.375rem;
}

.drawer-subtitle {
  font-size: 0.8125rem;
  color: rgba(232, 232, 240, 0.55);
  line-height: 1.5;
}

/* Close button */
.drawer-close {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(232, 232, 240, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.drawer-close svg { width: 16px; height: 16px; }
.drawer-close:hover,
.drawer-close:focus-visible {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.4);
  color: #ffffff;
}

/* ── Scrollable body ── */
.drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem 2rem;

  /* Subtle inner scroll shadow */
  background:
    linear-gradient(var(--c-bg-1, #0d0d1a) 30%, transparent) top / 100% 20px no-repeat local,
    linear-gradient(transparent, var(--c-bg-1, #0d0d1a) 70%) bottom / 100% 20px no-repeat local,
    linear-gradient(var(--c-bg-1, #0d0d1a), var(--c-bg-1, #0d0d1a)) top / 100% 20px no-repeat scroll,
    linear-gradient(var(--c-bg-1, #0d0d1a), var(--c-bg-1, #0d0d1a)) bottom / 100% 20px no-repeat scroll,
    var(--c-bg-1, #0d0d1a);
}

/* ── Drawer form ── */
.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* All form-group / select-wrap / checkbox-option / field-error styles
   are already defined in styles.css and apply here too.
   We only need drawer-specific overrides below. */

/* Tighter textarea on mobile */
.drawer-form textarea {
  min-height: 80px;
}

/* Checkbox grid — 2 cols inside drawer */
.drawer-form .checkbox-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Security note at bottom */
.drawer-security-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: rgba(232, 232, 240, 0.35);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.drawer-security-note svg {
  width: 13px;
  height: 13px;
  color: var(--c-violet, #8b5cf6);
  flex-shrink: 0;
}

/* ── Only render drawer machinery on mobile ── */
@media (min-width: 901px) {
  .drawer-backdrop,
  .intake-drawer {
    display: none !important;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .intake-drawer {
    transition: visibility 0s, opacity 200ms ease;
    transform: none !important;
    opacity: 0;
  }
  .intake-drawer.open {
    opacity: 1;
  }
}

/* ── Keyboard focus ring inside drawer ── */
.intake-drawer :focus-visible {
  outline: 2px solid var(--c-violet, #8b5cf6);
  outline-offset: 3px;
  border-radius: 4px;
}


/* ==========================================================================\n   2026-09-05 RE-AUDIT — MOBILE FORM CONTRAST\n   ========================================================================== */
@media (max-width: 900px) {
  #intake-drawer .drawer-form label[for="d-achieve"],
  #intake-drawer .drawer-form label[for="d-today"],
  #intake-drawer .drawer-form label[for="d-org-type"],
  #intake-drawer .drawer-form label[for="d-name"],
  #intake-drawer .drawer-form label[for="d-email"],
  #intake-drawer .drawer-form label[for="d-company"],
  #intake-drawer .drawer-form label[for="d-country"] {
    color: #ffffff !important;
    font-weight: 700;
    opacity: 1;
    text-shadow: 0 1px 12px rgba(255,255,255,.10);
  }

  #intake-drawer .drawer-form .req {
    color: #ff6b76 !important;
  }

  #intake-drawer .drawer-form input,
  #intake-drawer .drawer-form select,
  #intake-drawer .drawer-form textarea {
    color: #f8fafc;
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.18);
  }

  #intake-drawer .drawer-form input::placeholder,
  #intake-drawer .drawer-form textarea::placeholder {
    color: rgba(248,250,252,.52);
  }

  #intake-drawer .drawer-form select option {
    color: #111827;
    background: #ffffff;
  }
}