/* ============================================================
   START-A-PROJECT MODAL
   A centered popup that replaces the redirect to portal.alfcode.com/start.
   Reuses the site's .field / .chip-toggle / .phone-row / .btn / .form-success
   classes for the form body; this file only styles the modal shell + OTP step.
   ============================================================ */

html.sm-lock, html.sm-lock body { overflow: hidden; }

.sm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Centre the card; the card itself caps its height and scrolls internally
     (see .sm-scroll), so tall content stays fully reachable on short screens. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  background: var(--scrim, rgba(5, 5, 6, 0.72));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s var(--ease, ease), visibility .28s var(--ease, ease);
  overflow-y: auto;
}
.sm-overlay.sm-open { opacity: 1; visibility: visible; pointer-events: auto; }

/* The site hides the native cursor and draws a custom JS cursor (body has
   cursor:none on desktop). That custom cursor stacks behind this overlay, so the
   popup would show no cursor at all. Force the normal native cursor back on
   inside the modal, with the right shape per element. */
.sm-overlay { cursor: default; }
.sm-overlay button,
.sm-overlay a,
.sm-overlay select,
.sm-overlay .chip-toggle { cursor: pointer; }
.sm-overlay input,
.sm-overlay textarea { cursor: text; }

.sm-card {
  position: relative;
  width: min(560px, 100%);
  /* Cap to the viewport (minus the overlay's padding) so the card never grows
     taller than the screen; overflow scrolls inside .sm-scroll instead. */
  max-height: calc(100vh - clamp(32px, 8vw, 80px));
  max-height: calc(100dvh - clamp(32px, 8vw, 80px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-1, #0d1019);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.07));
  border-radius: var(--r-l, 20px);
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
  transform: translateY(14px) scale(0.985);
  opacity: 0;
  transition: transform .34s var(--ease, ease), opacity .34s var(--ease, ease);
}
.sm-overlay.sm-open .sm-card { transform: none; opacity: 1; }

/* The scrolling body: content scrolls here while .sm-close stays pinned to the
   card corner. This is the reliable way to keep a tall modal usable on any
   screen (works with mouse wheel and touch, unlike overlay-level centering). */
.sm-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(24px, 3.4vw, 40px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Thin, subtle, theme-matched scrollbar (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--line-3, rgba(255, 255, 255, 0.22)) transparent;
}
/* Thin, subtle scrollbar (WebKit/Blink) — a 4px thumb with a gutter so it never
   hugs the rounded corner. */
.sm-scroll::-webkit-scrollbar { width: 10px; }
.sm-scroll::-webkit-scrollbar-track { background: transparent; }
.sm-scroll::-webkit-scrollbar-thumb {
  background: var(--line-3, rgba(255, 255, 255, 0.22));
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.sm-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-4, #7e8696); background-clip: padding-box; }

/* Soft fade at the top/bottom of the card so scrolling content melts into the
   edge instead of hard-cutting (and stops looking messy under the ✕). Each fade
   only shows when there is more content to scroll in that direction — the JS
   toggles .sm-fade-top / .sm-fade-bottom. */
.sm-card::before,
.sm-card::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  height: 30px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .2s var(--ease, ease);
}
.sm-card::before { top: 1px; background: linear-gradient(var(--bg-1, #0d1019), transparent); border-radius: var(--r-l, 20px) var(--r-l, 20px) 0 0; }
.sm-card::after { bottom: 1px; background: linear-gradient(transparent, var(--bg-1, #0d1019)); border-radius: 0 0 var(--r-l, 20px) var(--r-l, 20px); }
.sm-card.sm-fade-top::before { opacity: 1; }
.sm-card.sm-fade-bottom::after { opacity: 1; }

.sm-close {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.13));
  background: var(--bg-2, #121622);
  color: var(--fg-2, #bcc2cc);
  cursor: pointer;
  transition: .2s var(--ease, ease);
}
.sm-close:hover { border-color: var(--line-3, rgba(255, 255, 255, 0.22)); color: var(--fg, #f4f6f9); transform: rotate(90deg); }
.sm-close:active { transform: rotate(90deg) scale(0.94); }
.sm-close svg { width: 17px; height: 17px; }

.sm-head { margin-bottom: 22px; padding-right: 34px; }
.sm-head h2 { font-size: clamp(21px, 3vw, 27px); line-height: 1.12; margin-top: 12px; }
.sm-head h2 em { font-style: italic; font-family: var(--serif, Georgia, serif); color: var(--accent-ink, #e6c552); }
.sm-head .sm-lede { color: var(--fg-3, #7b828f); font-size: 14.5px; line-height: 1.55; margin-top: 10px; }
.sm-head .sm-lede b { color: var(--fg-2, #bcc2cc); font-weight: 500; }

/* Steps */
.sm-step { display: none; }
.sm-step.is-active { display: block; }

/* Phone row: mirror .phone-row #phoneCC/#phone but scoped to our own ids so
   the legacy homepage contact script never touches the modal select. */
.sm-card .phone-row .sm-cc { flex: 0 0 auto; width: auto; min-width: 104px; }
.sm-card .phone-row .sm-phone { flex: 1 1 auto; min-width: 0; }

.sm-card .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }

/* OTP step */
.sm-otp {
  display: flex;
  gap: clamp(6px, 2vw, 12px);
  justify-content: space-between;
  margin: 4px 0 6px;
}
.sm-otp input {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1 / 1.15;
  text-align: center;
  font-family: var(--mono, monospace);
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 600;
  color: var(--fg, #f4f6f9);
  background: var(--bg-2, #121622);
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.13));
  border-radius: var(--r-s, 8px);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -moz-appearance: textfield;
}
.sm-otp input::-webkit-outer-spin-button,
.sm-otp input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sm-otp input:focus { border-color: var(--accent, #e6c552); box-shadow: 0 0 0 3px var(--accent-soft, rgba(230, 197, 82, 0.14)); }
.sm-otp input.is-filled { border-color: var(--line-3, rgba(255, 255, 255, 0.22)); }

.sm-otp-mail {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Feedback + secondary actions */
.sm-error {
  display: none;
  color: #f2707a;
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 12px;
}
.sm-error.show { display: block; }

.sm-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.sm-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--fg-3, #7b828f);
  cursor: pointer;
  transition: color .2s;
}
.sm-link:hover:not(:disabled) { color: var(--accent-ink, #e6c552); }
.sm-link:disabled { opacity: .5; cursor: default; }

.sm-note { font-size: 12.5px; color: var(--fg-4, #7e8696); margin-top: 14px; text-align: center; }

.btn.is-busy { opacity: .7; pointer-events: none; }

/* Success step reuses .form-success / .check but we force it visible here. */
.sm-card .form-success { display: block; padding: 26px 6px 8px; }

@media (prefers-reduced-motion: reduce) {
  .sm-overlay, .sm-card, .sm-close { transition: none; }
  .sm-card { transform: none; }
}

/* ------------------------------------------------------------------
   Self-contained form styling scoped to .sm-card. The main site's
   alfcode.css defines .field / .chip-toggle / .btn / .form-success, but
   /apps loads a different stylesheet, so we redefine them here (scoped, so
   they never leak) — tokens fall back to literals when alfcode.css is absent.
   ------------------------------------------------------------------ */
.sm-card .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono, monospace);
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-ink, #e6c552);
}
.sm-card .eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--accent, #e6c552); }

.sm-card .field { margin-bottom: 18px; }
.sm-card .field label { display: block; font-family: var(--mono, monospace); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3, #7b828f); margin-bottom: 9px; }
.sm-card .field-opt { color: var(--fg-3, #7b828f); font-weight: 400; letter-spacing: 0.04em; text-transform: none; }
.sm-card .field input, .sm-card .field textarea, .sm-card .field select,
.sm-card .phone-row select, .sm-card .phone-row input {
  width: 100%;
  background: var(--bg-2, #121622);
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.13));
  border-radius: var(--r-s, 8px);
  color: var(--fg, #f4f6f9);
  font-family: var(--sans, sans-serif);
  font-size: 15px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.sm-card .field textarea { resize: vertical; min-height: 96px; }
.sm-card .field input::placeholder, .sm-card .field textarea::placeholder { color: var(--fg-4, #7e8696); }
.sm-card .field input:focus, .sm-card .field textarea:focus, .sm-card .field select:focus,
.sm-card .phone-row select:focus, .sm-card .phone-row input:focus {
  border-color: var(--accent, #e6c552);
  box-shadow: 0 0 0 3px var(--accent-soft, rgba(230, 197, 82, 0.14));
}
.sm-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.sm-card .chips-select { display: flex; flex-wrap: wrap; gap: 9px; }
.sm-card .chip-toggle {
  font: inherit; font-size: 13.5px; color: var(--fg-3, #7b828f);
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.13));
  background: var(--bg-2, #121622);
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  transition: .2s var(--ease, ease);
  -webkit-user-select: none; user-select: none;
}
.sm-card .chip-toggle:hover { border-color: var(--line-3, rgba(255, 255, 255, 0.22)); color: var(--fg-2, #bcc2cc); }
.sm-card .chip-toggle.on { background: var(--accent-soft, rgba(230, 197, 82, 0.14)); border-color: var(--accent, #e6c552); color: var(--fg, #f4f6f9); }

.sm-card .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--sans, sans-serif); font-size: 14.5px; font-weight: 500;
  padding: 13px 20px; border-radius: var(--r-s, 8px);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: .2s var(--ease, ease);
}
.sm-card .btn .arrow { display: inline-block; transition: transform .2s var(--ease, ease); }
.sm-card .btn:hover .arrow { transform: translate(2px, -2px); }
.sm-card .btn-primary { width: 100%; background: var(--accent, #e6c552); color: #0b0f1a; margin-top: 4px; }
.sm-card .btn-primary:hover { background: var(--accent-2, #f1d268); box-shadow: 0 8px 30px -8px var(--glow, rgba(230, 197, 82, 0.4)); }
.sm-card .btn-primary:active { transform: scale(0.98); }
.sm-card .btn-ghost { width: 100%; background: transparent; color: var(--fg-2, #bcc2cc); border: 1px solid var(--line-2, rgba(255, 255, 255, 0.13)); margin-top: 10px; }
.sm-card .btn-ghost:hover { border-color: var(--line-3, rgba(255, 255, 255, 0.22)); color: var(--fg, #f4f6f9); }

.sm-card .form-success { text-align: center; padding: 26px 6px 8px; }
.sm-card .form-success .check { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; background: var(--accent-soft, rgba(230, 197, 82, 0.14)); border: 1px solid var(--accent, #e6c552); display: grid; place-items: center; color: var(--cyan, #5b8cf0); }
.sm-card .form-success h3 { font-size: 22px; color: var(--fg, #f4f6f9); }
.sm-card .form-success p { color: var(--fg-3, #7b828f); margin-top: 8px; font-size: 14.5px; }

@media (max-width: 480px) {
  .sm-card .field-row { grid-template-columns: 1fr; gap: 0; }
}