/* ============================================================
   NPF Core — the "find an expert" popup.

   WHAT THIS IS
   ------------
   The first-time buyer popup: a four-step wizard (category → service →
   matching → recommended experts, plus an intake form and its confirmation).
   It is assembled from two places, neither of which is npf-core:

     shell  — wpjobster-child's `display_first_time_user_popup()` prints
              #first-time-popup and styles it from an inline <style> in
              wp_footer.
     flow   — indiasan-customization prints the steps from
              admin/forms/iscu-find-expert-flow.php and styles them from
              includes/css/iscu-expert-flow.css.

   Both predate the redesign, so the wizard was still slate-and-teal
   (#0f172a / #003d5c) inside a site rebuilt around the /account palette. This
   is that wizard wearing the design.

   WHY CSS ONLY
   ------------
   No markup or JS is touched. Every class, id and inline `style` the flow's
   JavaScript reads or writes is left exactly as emitted — it drives the steps
   by toggling `display` on `.iscu-ef-step-*`, sets `.active` / `.done` on the
   progress nodes, and injects the result cards as server-rendered HTML from
   `iscu_get_expert_matches`. Deleting this file returns the popup to its old
   look and changes nothing else.

   WHY EVERYTHING IS SCOPED TO #first-time-popup
   ---------------------------------------------
   The shell's rules live in an inline <style> printed in the footer, i.e.
   *after* this stylesheet, so source order would hand every tie to the theme.
   Anchoring on the overlay's id outweighs its single-class selectors, and also
   clears indiasan-customization's `.iscu-expert-flow .x` pairs, without a
   single !important.

   This popup is the flow's only live context: the `[iscu_find_expert_flow]`
   shortcode that would render it inline on a page is stubbed with an
   unconditional `return '';` (iscu-shortcodes.php). If that stub is ever
   removed, the inner rules below need re-scoping to `.iscu-expert-flow` to
   reach the shortcode too.

   THE ONE LAYOUT BUG THIS FIXES
   -----------------------------
   `.first-time-popup-container` is a centred flex column, and the
   `.has-expert-flow` override never reset `align-items: center`. The scroller
   is a flex item, so it shrank to its content — 401px inside a 680px dialog —
   leaving the steps in a narrow left-hand column with dead space beside them
   and the results grid collapsed to one column. `align-items: stretch` below
   is what widens it back to the full dialog.
   ============================================================ */

#first-time-popup {
  --npf-primary: #4f84c3;
  --npf-primary-dark: #3e6ea6;
  --npf-primary-soft: #e1eeff;
  --npf-ink: #020b18;
  --npf-muted: #677489;
  --npf-line: #e4e7e9;
  --npf-line-soft: #eef1f6;
  --npf-bg-soft: #f7f8fa;
  --npf-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --npf-t: 0.24s var(--npf-ease);
  --npf-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --npf-font-display: "Inter Tight", "Inter", system-ui, sans-serif;

  /* Matches the verify-email popup's scrim, so the site has one modal look. */
  background-color: rgba(2, 11, 24, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 24px;
  font-family: var(--npf-font-body);
}

/* ---------- Dialog ---------- */

#first-time-popup .first-time-popup-container.has-expert-flow {
  /* stretch: see "THE ONE LAYOUT BUG THIS FIXES" above. */
  align-items: stretch;
  box-sizing: border-box;
  max-width: 720px;
  width: min(720px, 100%);
  max-height: min(88vh, 760px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(2, 11, 24, 0.24);
  color: var(--npf-ink);
}

#first-time-popup .first-time-popup-expert-flow {
  padding: 28px 32px 32px;
  max-height: min(88vh, 760px);
  /* The scrollbar sits on the dialog edge now that the scroller fills it, so
     it needs the dialog's own rounding to avoid a square corner over the card. */
  border-radius: 24px;
  scrollbar-width: thin;
}

/* ---------- Close ---------- */

#first-time-popup .first-time-popup-close {
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--npf-muted);
  font-size: 24px;
  transition: background var(--npf-t), color var(--npf-t);
}

#first-time-popup .first-time-popup-close:hover {
  background: var(--npf-bg-soft);
  color: var(--npf-ink);
}

/* ---------- Flow shell ---------- */

#first-time-popup .iscu-expert-flow .iscu-ef-card {
  max-width: none;
}

/* ---------- Progress ----------
   The markup carries `style="display:none"`, and the JS only ever maintains
   the .active / .done classes on it — it never reveals the bar. Showing it
   costs an !important (inline styles outrank selectors) and turns three
   unlabelled screens into a wizard that says where you are. */
#first-time-popup .iscu-expert-flow .iscu-ef-progress {
  display: flex !important;
  margin: 0 0 26px;
  /* The bar is the topmost row, so it is what the close button would otherwise
     sit on top of — its "Results" label ended up under the X. */
  padding: 0 46px 0 0;
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-step {
  gap: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa4b2;
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-step .iscu-ef-progress-dot {
  width: 26px;
  height: 26px;
  background: var(--npf-bg-soft);
  border: 1px solid var(--npf-line);
  color: #9aa4b2;
  font-size: 12px;
  font-weight: 700;
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-step.active {
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-step.active .iscu-ef-progress-dot {
  background: var(--npf-primary);
  border-color: var(--npf-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(63, 110, 179, 0.28);
}

/* Brand blue for completed steps too — the plugin's green read as a status
   alert rather than progress. */
#first-time-popup .iscu-expert-flow .iscu-ef-progress-step.done {
  color: var(--npf-primary-dark);
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-step.done .iscu-ef-progress-dot {
  background: var(--npf-primary-soft);
  border-color: var(--npf-primary-soft);
  color: var(--npf-primary-dark);
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-line {
  height: 1.5px;
  margin: 0 10px;
  background: var(--npf-line);
}

#first-time-popup .iscu-expert-flow .iscu-ef-progress-line.done {
  background: var(--npf-primary-soft);
}

/* ---------- Titles ---------- */

#first-time-popup .iscu-expert-flow .iscu-ef-title {
  margin: 0 0 22px;
  font-family: var(--npf-font-display);
  font-size: 23px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-subtitle {
  margin: -14px 0 22px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--npf-muted);
}

/* ---------- Head (Back + title) ----------
   The two sat on one row, so "What kind of Administrative Services support do
   you need?" was squeezed into the space left over by the Back pill and broke
   across two ragged lines. Wrapping puts Back on its own row and gives the
   title the full width. Markup order is Back-then-title, which is also the
   reading order, so no `order` juggling is needed. */
#first-time-popup .iscu-expert-flow .iscu-ef-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-head .iscu-ef-title {
  flex: 1 1 100%;
  margin: 0;
}

#first-time-popup .iscu-expert-flow .iscu-ef-back {
  gap: 6px;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--npf-line);
  border-radius: 999px;
  background: #fff;
  color: var(--npf-muted);
  font-size: 13px;
  font-weight: 600;
  transition: background var(--npf-t), border-color var(--npf-t), color var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-back:hover {
  background: var(--npf-bg-soft);
  border-color: #d3d8e0;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-back::before {
  font-size: 14px;
}

/* ---------- Option rows ---------- */

#first-time-popup .iscu-expert-flow .iscu-ef-options {
  gap: 12px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-option {
  padding: 17px 56px 17px 20px;
  border: 1px solid var(--npf-line);
  border-radius: 14px;
  background: #fff;
  transition: border-color var(--npf-t), box-shadow var(--npf-t),
    background var(--npf-t), transform var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-option .iscu-ef-option-label {
  padding-right: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-option .iscu-ef-option-desc {
  margin-top: 5px;
  padding-right: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--npf-muted);
}

/* The arrow becomes a target rather than a glyph floating in the padding. */
#first-time-popup .iscu-expert-flow .iscu-ef-option::after {
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--npf-bg-soft);
  color: var(--npf-muted);
  font-size: 15px;
  line-height: 1;
  transition: background var(--npf-t), color var(--npf-t), transform var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-option:hover {
  border-color: var(--npf-primary);
  background: #fbfcff;
  box-shadow: 0 8px 22px rgba(2, 11, 24, 0.07);
  transform: translateY(-1px);
}

#first-time-popup .iscu-expert-flow .iscu-ef-option:hover::after {
  background: var(--npf-primary);
  color: #fff;
  transform: translateY(-50%) translateX(2px);
}

#first-time-popup .iscu-expert-flow .iscu-ef-option:active {
  transform: translateY(0) scale(0.995);
}

/* ---------- "Not sure?" ----------
   Dashed borders read as a drop zone or a disabled control. It is a real
   secondary action, so it gets a quiet solid button on a tinted ground. */
#first-time-popup .iscu-expert-flow .iscu-ef-not-sure {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--npf-line-soft);
}

#first-time-popup .iscu-expert-flow .iscu-ef-not-sure-btn {
  padding: 13px 18px;
  border: 1px solid var(--npf-line);
  border-radius: 12px;
  background: var(--npf-bg-soft);
  color: var(--npf-muted);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--npf-t), border-color var(--npf-t), color var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-not-sure-btn:hover {
  border-color: var(--npf-primary);
  background: var(--npf-primary-soft);
  color: var(--npf-primary-dark);
}

/* ---------- Intake form ---------- */

#first-time-popup .iscu-expert-flow .iscu-ef-form {
  gap: 16px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-row label {
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-optional {
  font-weight: 400;
  color: var(--npf-muted);
}

#first-time-popup .iscu-expert-flow .iscu-ef-row input,
#first-time-popup .iscu-expert-flow .iscu-ef-row select,
#first-time-popup .iscu-expert-flow .iscu-ef-row textarea {
  padding: 12px 14px;
  border: 1px solid var(--npf-line);
  border-radius: 10px;
  background: #fff;
  font-family: var(--npf-font-body);
  font-size: 14px;
  color: var(--npf-ink);
  transition: border-color var(--npf-t), box-shadow var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-row input:focus,
#first-time-popup .iscu-expert-flow .iscu-ef-row select:focus,
#first-time-popup .iscu-expert-flow .iscu-ef-row textarea:focus {
  border-color: var(--npf-primary);
  box-shadow: 0 0 0 3px rgba(79, 132, 195, 0.16);
  outline: none;
}

#first-time-popup .iscu-expert-flow .iscu-ef-row input[readonly],
#first-time-popup .iscu-expert-flow .iscu-ef-row select[readonly] {
  background: var(--npf-bg-soft);
  color: var(--npf-muted);
}

#first-time-popup .iscu-expert-flow .iscu-ef-row textarea::placeholder {
  color: #9aa4b2;
}

#first-time-popup .iscu-expert-flow .iscu-ef-submit {
  margin-top: 4px;
  padding: 14px 20px;
  border: 0;
  border-radius: 12px;
  background: var(--npf-primary);
  color: #fff;
  font-family: var(--npf-font-body);
  font-size: 15px;
  font-weight: 600;
  transition: background var(--npf-t), box-shadow var(--npf-t), transform var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-submit:hover {
  background: var(--npf-primary-dark);
  box-shadow: 0 12px 28px rgba(63, 110, 179, 0.28);
  transform: translateY(-1px);
}

#first-time-popup .iscu-expert-flow .iscu-ef-submit:active {
  transform: translateY(0);
}

#first-time-popup .iscu-expert-flow .iscu-ef-msg {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
}

#first-time-popup .iscu-expert-flow .iscu-ef-msg.success {
  border-color: #b7ecd0;
  background: #ecfdf3;
  color: #14804a;
}

#first-time-popup .iscu-expert-flow .iscu-ef-msg.error {
  border-color: #fbd5d5;
  background: #fef2f2;
  color: #b42318;
}

/* ---------- Matching ---------- */

#first-time-popup .iscu-expert-flow .iscu-ef-loading {
  padding: 44px 0 48px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid var(--npf-primary-soft);
  border-top-color: var(--npf-primary);
  border-radius: 50%;
}

#first-time-popup .iscu-expert-flow .iscu-ef-loading-text {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--npf-muted);
}

/* ---------- Results ----------
   Two columns, not the plugin's `auto-fill, minmax(200px, 1fr)`. Now that the
   dialog is its full width that formula yields three ~197px columns, which is
   too narrow for a card carrying a portrait, a two-line service title and a
   seller row. */
#first-time-popup .iscu-expert-flow .iscu-ef-results {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-card {
  border: 1px solid var(--npf-line);
  border-radius: 16px;
  transition: border-color var(--npf-t), box-shadow var(--npf-t), transform var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-card:hover {
  border-color: var(--npf-primary);
  box-shadow: 0 12px 28px rgba(2, 11, 24, 0.1);
  transform: translateY(-2px);
}

/* `contain` letterboxed every portrait against the grey placeholder; `cover`
   fills the frame the way the expert cards elsewhere on the site do. */
#first-time-popup .iscu-expert-flow .iscu-ef-result-hero {
  height: 152px;
  background-color: #dce3ea;
  background-size: cover;
  /* These are head-and-shoulders portraits. Cropping from the centre cut the
     top of the head off; anchoring to the top keeps the face in frame. */
  background-position: center top;
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-content {
  flex: 1;
  padding: 14px 15px 15px;
  gap: 10px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-title:hover {
  color: var(--npf-primary-dark);
  text-decoration: none;
}

/* Pushed to the bottom of the card rather than reserving a fixed title height:
   the seller rows line up across a row of cards however long the titles run,
   and short titles leave no blank gap. */
#first-time-popup .iscu-expert-flow .iscu-ef-result-user {
  gap: 9px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--npf-line-soft);
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-user img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  background: var(--npf-line);
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-username {
  font-size: 12px;
  font-weight: 500;
  color: var(--npf-muted);
}

#first-time-popup .iscu-expert-flow .iscu-ef-result-username:hover {
  color: var(--npf-primary-dark);
}

/* It is injected as a child of the results grid, so without this it sat in the
   first column with an empty column beside it. */
#first-time-popup .iscu-expert-flow .iscu-ef-empty {
  grid-column: 1 / -1;
  padding: 32px 20px;
  border: 1px solid var(--npf-line);
  border-radius: 16px;
  background: var(--npf-bg-soft);
  font-size: 14px;
  font-weight: 500;
  color: var(--npf-muted);
}

#first-time-popup .iscu-expert-flow .iscu-ef-more {
  margin-top: 22px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-more-btn {
  padding: 13px 20px;
  border: 1px solid var(--npf-line);
  border-radius: 12px;
  background: #fff;
  color: var(--npf-primary-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--npf-t), border-color var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-more-btn:hover {
  border-color: var(--npf-primary);
  background: var(--npf-primary-soft);
  text-decoration: none;
}

/* ---------- Confirmation ---------- */

#first-time-popup .iscu-expert-flow .iscu-ef-confirmation {
  padding: 20px 0 8px;
  text-align: center;
}

#first-time-popup .iscu-expert-flow .iscu-ef-confirmation-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #ecfdf3;
}

#first-time-popup .iscu-expert-flow .iscu-ef-confirmation-icon svg {
  width: 36px;
  height: 36px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-confirmation-title {
  margin: 0 0 10px;
  font-family: var(--npf-font-display);
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-confirmation-text {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-confirmation-subtext {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--npf-muted);
}

/* Side by side: the plugin stacked them, which read as two ranked steps rather
   than one choice between two next moves. Stacks again under 640px. */
#first-time-popup .iscu-expert-flow .iscu-ef-confirmation-actions {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

#first-time-popup .iscu-expert-flow .iscu-ef-btn-primary,
#first-time-popup .iscu-expert-flow .iscu-ef-btn-secondary {
  padding: 12px 22px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--npf-t), border-color var(--npf-t), box-shadow var(--npf-t);
}

#first-time-popup .iscu-expert-flow .iscu-ef-btn-primary {
  border: 1px solid var(--npf-primary);
  background: var(--npf-primary);
  color: #fff;
}

#first-time-popup .iscu-expert-flow .iscu-ef-btn-primary:hover {
  border-color: var(--npf-primary-dark);
  background: var(--npf-primary-dark);
  box-shadow: 0 12px 28px rgba(63, 110, 179, 0.28);
}

#first-time-popup .iscu-expert-flow .iscu-ef-btn-secondary {
  border: 1px solid var(--npf-line);
  background: #fff;
  color: var(--npf-ink);
}

#first-time-popup .iscu-expert-flow .iscu-ef-btn-secondary:hover {
  border-color: var(--npf-primary);
  background: var(--npf-primary-soft);
}

/* ---------- Small screens ---------- */

@media (max-width: 640px) {
  #first-time-popup {
    padding: 14px;
  }

  #first-time-popup .first-time-popup-container.has-expert-flow {
    width: 100%;
    max-height: 92vh;
    border-radius: 20px;
  }

  #first-time-popup .first-time-popup-expert-flow {
    padding: 22px 18px 24px;
    max-height: 92vh;
    border-radius: 20px;
  }

  #first-time-popup .iscu-expert-flow .iscu-ef-title {
    font-size: 20px;
  }

  /* Only the numbered dots survive — the labels do not fit beside them. */
  #first-time-popup .iscu-expert-flow .iscu-ef-progress-step span:not(.iscu-ef-progress-dot) {
    display: none;
  }

  #first-time-popup .iscu-expert-flow .iscu-ef-option {
    padding: 15px 50px 15px 16px;
  }

  #first-time-popup .iscu-expert-flow .iscu-ef-results {
    grid-template-columns: 1fr;
  }

  #first-time-popup .iscu-expert-flow .iscu-ef-confirmation-actions {
    flex-direction: column;
  }
}