@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=Fraunces:ital,wght@0,400;1,400;1,600&display=swap');

/* ══════════════════════════════════════
   IMPORTANT: All CSS variables are scoped
   to .lp-wrap to prevent WordPress theme
   conflicts with :root overrides.
══════════════════════════════════════ */

.lp-wrap,
.lp-page-bg {
  --lp-brand:      #6366f1;
  --lp-brand-hover:#4f46e5;
  --lp-brand-glow: rgba(99,102,241,0.22);
  --lp-bg:         #0b0c10;
  --lp-surface:    #13141a;
  --lp-surface-2:  #1a1b23;
  --lp-border:     rgba(255,255,255,0.07);
  --lp-text:       #ededf2;
  --lp-text-muted: #72738a;
  --lp-radius:     14px;
  --lp-transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Reset ─── */
.lp-wrap *, .lp-wrap *::before, .lp-wrap *::after,
.lp-page-bg *, .lp-page-bg *::before, .lp-page-bg *::after {
  box-sizing: border-box;
}

/* ─── Page background ─── */
.lp-page-bg {
  min-height: 100vh;
  width: 100%;
  background-color: var(--lp-bg);
  background-image: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99,102,241,0.08) 0%, transparent 70%);
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  font-family: 'DM Sans', sans-serif;
  margin: 0;
}

/* ─── Card ─── */
.lp-wrap {
  font-family: 'DM Sans', sans-serif;
  background: var(--lp-surface);
  color: var(--lp-text);
  width: 100%;
  max-width: 820px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  min-height: 560px;
  box-shadow: 0 0 0 1px var(--lp-border), 0 24px 60px rgba(0,0,0,0.55);
}

/* ─── Hidden states (JS-controlled) ─── */
.lp-progress-bar--hidden { opacity: 0 !important; pointer-events: none; }
.lp-steps-nav--hidden    { opacity: 0 !important; pointer-events: none; }
.lp-form--hidden         { display: none !important; }

/* ─── Progress Bar ─── */
.lp-progress-bar { height: 2px; background: var(--lp-border); }
.lp-progress-fill {
  height: 100%;
  background: var(--lp-brand);
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
  width: 0%;
  box-shadow: 0 0 10px var(--lp-brand);
}

/* ─── Step Dots ─── */
.lp-steps-nav {
  display: flex; align-items: center; justify-content: center;
  padding: 22px 32px 0; gap: 0;
  transition: opacity 0.3s;
}
.lp-dot-line {
  flex: 1; max-width: 36px; height: 1px;
  background: var(--lp-border); margin: 0 3px;
}
.lp-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--lp-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 500; color: var(--lp-text-muted);
  letter-spacing: 0.04em; transition: var(--lp-transition); flex-shrink: 0;
}
.lp-dot-num { display: block; }
.lp-dot-check { display: none; width: 13px; height: 13px; }
.lp-dot-check svg { width: 13px; height: 13px; }
.lp-step-dot.active { border-color: var(--lp-brand); color: var(--lp-brand); background: rgba(99,102,241,0.1); box-shadow: 0 0 12px var(--lp-brand-glow); }
.lp-step-dot.done  { border-color: var(--lp-brand); background: var(--lp-brand); color: #fff; }
.lp-step-dot.done .lp-dot-num   { display: none; }
.lp-step-dot.done .lp-dot-check { display: block; }

/* ══════════════════════════════════════
   WELCOME SCREEN
══════════════════════════════════════ */
.lp-welcome {
  padding: 52px 44px 44px;
  display: flex; align-items: center; justify-content: flex-start;
  animation: lp-in 0.4s ease forwards;
  min-height: 560px;
}
.lp-welcome--exit { animation: lp-out 0.28s ease forwards; }
@keyframes lp-out { to { opacity: 0; transform: translateY(-8px); } }

.lp-welcome-inner {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 480px; width: 100%;
}
.lp-welcome-logo {
  height: 22px; width: auto; display: block;
  margin-bottom: 28px;
}
.lp-welcome-divider {
  width: 28px; height: 1.5px;
  background: var(--lp-brand);
  margin-bottom: 22px; border-radius: 2px;
}
.lp-welcome-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 5vw, 50px);
  font-weight: 400; line-height: 1.1;
  color: var(--lp-text); margin-bottom: 14px;
  /* reset any theme overrides */
  text-transform: none; letter-spacing: normal;
}
.lp-welcome-title em { font-style: italic; color: var(--lp-brand); }
.lp-welcome-desc {
  font-size: 15px; color: var(--lp-text-muted);
  line-height: 1.65; margin-bottom: 30px;
  max-width: 400px;
  /* reset */
  text-transform: none; letter-spacing: normal;
}
.lp-welcome-actions {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 28px; flex-wrap: wrap;
}
.lp-welcome-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  border: none; border-radius: 40px; padding: 12px 24px;
  cursor: pointer; transition: var(--lp-transition);
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1; text-decoration: none;
  /* reset theme button styles */
  outline: none; box-sizing: border-box;
}
.lp-welcome-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.lp-welcome-btn--primary {
  background: var(--lp-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--lp-brand-glow);
}
.lp-welcome-btn--primary:hover {
  background: var(--lp-brand-hover) !important;
  transform: translateY(-1px); color: #fff !important;
}
.lp-welcome-btn--ghost {
  background: transparent !important;
  color: var(--lp-text-muted) !important;
  border: 1.5px solid var(--lp-border);
}
.lp-welcome-btn--ghost:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--lp-text) !important;
}

/* Steps preview pills */
.lp-welcome-steps-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-wp-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--lp-text-muted);
  padding: 4px 10px; background: var(--lp-surface-2);
  border: 1px solid var(--lp-border); border-radius: 20px;
  text-transform: none; letter-spacing: normal;
}
.lp-wp-num {
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--lp-brand);
}

/* ══════════════════════════════════════
   FORM STEPS
══════════════════════════════════════ */
.lp-step {
  display: none;
  padding: 32px 40px 14px;
  animation: lp-in 0.32s ease forwards;
}
.lp-step.active { display: block; }
@keyframes lp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.lp-step-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  color: var(--lp-brand); text-transform: uppercase;
  display: block; margin-bottom: 12px;
}
.lp-step-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3.6vw, 38px);
  font-weight: 400; line-height: 1.15; color: var(--lp-text);
  margin-bottom: 8px; text-transform: none; letter-spacing: normal;
}
.lp-step-title em { font-style: italic; color: var(--lp-brand); }
.lp-step-desc {
  color: var(--lp-text-muted); font-size: 14px;
  line-height: 1.6; margin-bottom: 26px;
  text-transform: none; letter-spacing: normal;
}

/* Fields */
.lp-fields { display: flex; flex-direction: column; gap: 20px; }
.lp-field  { display: flex; flex-direction: column; gap: 8px; }
.lp-field-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-field label {
  font-size: 11px; font-weight: 600; color: var(--lp-text-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lp-optional { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: 0.65; }

/* Inputs */
.lp-wrap input[type="text"],
.lp-wrap input[type="email"],
.lp-wrap textarea {
  background: var(--lp-surface-2) !important;
  border: 1.5px solid var(--lp-border) !important;
  border-radius: var(--lp-radius) !important;
  color: var(--lp-text) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; padding: 12px 15px;
  width: 100%; outline: none;
  transition: var(--lp-transition); resize: vertical;
  box-shadow: none !important;
}
.lp-wrap input::placeholder,
.lp-wrap textarea::placeholder { color: var(--lp-text-muted); opacity: 0.7; }
.lp-wrap input:focus,
.lp-wrap textarea:focus {
  border-color: var(--lp-brand) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* ─── Pill card select ─── */
.lp-card-select { display: flex; flex-wrap: wrap; gap: 7px; }
.lp-card {
  background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: 40px; padding: 9px 17px; cursor: pointer;
  font-size: 13px; color: var(--lp-text-muted);
  transition: var(--lp-transition); user-select: none; white-space: nowrap;
  text-transform: none; letter-spacing: normal;
}
.lp-card:hover  { border-color: rgba(99,102,241,0.4); color: var(--lp-text); }
.lp-card.selected { background: rgba(99,102,241,0.12); border-color: var(--lp-brand); color: var(--lp-text); }

/* ─── Big card grid ─── */
.lp-card-select-big { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.lp-card-big {
  background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 16px 10px 13px;
  cursor: pointer; text-align: center; transition: var(--lp-transition);
  user-select: none; display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.lp-card-big:hover   { border-color: rgba(99,102,241,0.4); transform: translateY(-1px); }
.lp-card-big.selected { background: rgba(99,102,241,0.1); border-color: var(--lp-brand); }
.lp-card-big-icon { width: 22px; height: 22px; color: var(--lp-text-muted); transition: color var(--lp-transition); }
.lp-card-big-icon svg { width: 22px; height: 22px; }
.lp-card-big:hover .lp-card-big-icon,
.lp-card-big.selected .lp-card-big-icon { color: var(--lp-brand); }
.lp-card-big-label { font-size: 12px; font-weight: 500; color: var(--lp-text); text-transform: none; letter-spacing: normal; }
.lp-card-big-sub   { font-size: 10px; color: var(--lp-text-muted); }

/* ─── Icon Grid ─── */
.lp-icon-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; }
.lp-icon-card { cursor: pointer; }
.lp-icon-card input[type="checkbox"] { display: none; }
.lp-ic-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 8px;
  background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius); transition: var(--lp-transition);
  text-align: center; height: 84px;
}
.lp-icon-card:hover .lp-ic-inner { border-color: rgba(99,102,241,0.4); }
.lp-icon-card.selected .lp-ic-inner,
.lp-icon-card input:checked + .lp-ic-inner {
  background: rgba(99,102,241,0.1); border-color: var(--lp-brand);
}
.lp-ic-icon { width: 22px; height: 22px; color: var(--lp-text-muted); transition: color var(--lp-transition); flex-shrink: 0; }
.lp-ic-icon svg { width: 22px; height: 22px; }
.lp-icon-card:hover .lp-ic-icon,
.lp-icon-card.selected .lp-ic-icon,
.lp-icon-card input:checked + .lp-ic-inner .lp-ic-icon { color: var(--lp-brand); }
.lp-ic-label { font-size: 11px; font-weight: 500; color: var(--lp-text-muted); line-height: 1.3; transition: color var(--lp-transition); text-transform: none; }
.lp-icon-card.selected .lp-ic-label,
.lp-icon-card input:checked + .lp-ic-inner .lp-ic-label { color: var(--lp-text); }

/* ─── Style Select ─── */
.lp-style-select { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.lp-style-card {
  background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 13px 10px 11px;
  cursor: pointer; text-align: center; transition: var(--lp-transition);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.lp-style-card:hover   { border-color: rgba(99,102,241,0.4); }
.lp-style-card.selected { border-color: var(--lp-brand); background: rgba(99,102,241,0.08); }
.lp-style-card span { font-size: 11px; font-weight: 500; color: var(--lp-text-muted); text-transform: none; }
.lp-style-card.selected span { color: var(--lp-text); }

.lp-style-preview { width: 100%; height: 46px; border-radius: 7px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.lp-style-minimal { background: #f0f0f0; flex-direction: column; gap: 5px; align-items: flex-start; padding: 8px 10px; }
.lp-style-minimal .sp-line { height: 2px; background: #bbb; width: 100%; border-radius: 2px; }
.lp-style-minimal .sp-short { width: 55%; }
.lp-style-modern { background: linear-gradient(140deg, #0f0f1a, #1a1a30); }
.lp-style-modern .sp-block { width: 17px; height: 17px; background: #6366f1; border-radius: 3px; }
.lp-style-modern .sp-dot { width: 6px; height: 6px; background: rgba(255,255,255,0.6); border-radius: 50%; margin-left: 6px; }
.lp-style-elegant { background: #faf6f1; }
.lp-style-elegant .sp-serif { font-family: 'Fraunces', serif; font-size: 19px; color: #2a2a2a; font-style: italic; }
.lp-style-playful { background: linear-gradient(135deg, rgba(255,100,150,0.1), rgba(180,80,240,0.1)); }
.sp-dots { display: flex; gap: 4px; }
.sp-dots span { width: 7px; height: 7px; border-radius: 50%; background: #f06; }
.sp-dots span:nth-child(2) { background: #a060f0; transform: translateY(-3px); }
.sp-dots span:nth-child(3) { background: #60a0f0; }
.lp-style-corporate { background: #eef2f7; padding: 6px; }
.lp-style-corporate .sp-grid { width: 100%; height: 100%; background: repeating-linear-gradient(90deg,#c8d0dc 0,#c8d0dc 1px,transparent 1px,transparent 11px),repeating-linear-gradient(0deg,#c8d0dc 0,#c8d0dc 1px,transparent 1px,transparent 11px); }
.lp-style-dark { background: #040408; }
.sp-diamond { width: 13px; height: 13px; background: #c9a84c; transform: rotate(45deg); border-radius: 2px; }

/* ─── Radio toggle ─── */
.lp-radio-toggle {
  display: flex; background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: 40px; width: fit-content; padding: 3px; gap: 2px;
}
.lp-rtoggle { padding: 7px 18px; border-radius: 40px; cursor: pointer; font-size: 13px; color: var(--lp-text-muted); transition: var(--lp-transition); user-select: none; }
.lp-rtoggle.active { background: var(--lp-brand) !important; color: #fff !important; }
.lp-ci-fields { margin-top: 10px; }
.lp-ci-fields.hidden { display: none !important; }

/* ─── Checkbox cards ─── */
.lp-check-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }
.lp-checkbox-card { cursor: pointer; display: flex; }
.lp-checkbox-card input[type="checkbox"] { display: none !important; }
.lp-cc-inner {
  display: flex; align-items: center; gap: 9px;
  background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: 10px; padding: 11px 13px; transition: var(--lp-transition);
  width: 100%;
}
.lp-checkbox-card input:checked + .lp-cc-inner { background: rgba(99,102,241,0.09); border-color: var(--lp-brand); }
.lp-cc-icon { width: 17px; height: 17px; color: var(--lp-text-muted); flex-shrink: 0; }
.lp-cc-icon svg { width: 17px; height: 17px; }
.lp-checkbox-card input:checked + .lp-cc-inner .lp-cc-icon { color: var(--lp-brand); }
.lp-cc-label { font-size: 13px; color: var(--lp-text-muted); text-transform: none; letter-spacing: normal; }
.lp-checkbox-card input:checked + .lp-cc-inner .lp-cc-label { color: var(--lp-text); }

/* ─── Privacy ─── */
.lp-privacy-check { padding: 14px 16px; background: var(--lp-surface-2); border: 1.5px solid var(--lp-border); border-radius: var(--lp-radius); }
.lp-priv-label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: var(--lp-text-muted); line-height: 1.55; }
.lp-priv-label input { margin-top: 2px; accent-color: var(--lp-brand); }
.lp-priv-label a { color: var(--lp-brand); text-decoration: none; }

/* ─── Summary ─── */
.lp-summary-preview {
  background: var(--lp-surface-2); border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius); padding: 18px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.lp-summary-key { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lp-text-muted); margin-bottom: 3px; }
.lp-summary-val { font-size: 13px; color: var(--lp-text); font-weight: 500; }

/* ─── Navigation ─── */
.lp-nav {
  display: flex; align-items: center;
  padding: 16px 40px 30px; gap: 0;
}
.lp-btn {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 500;
  border: none; border-radius: 40px; padding: 11px 22px;
  cursor: pointer; transition: var(--lp-transition);
  display: inline-flex; align-items: center; gap: 7px;
  flex-shrink: 0; line-height: 1; text-decoration: none;
}
.lp-btn svg { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.lp-btn-submit-text { display: inline-flex; align-items: center; gap: 7px; line-height: 1; }
.lp-btn-back {
  background: transparent !important; color: var(--lp-text-muted);
  border: 1.5px solid var(--lp-border);
}
.lp-btn-back:hover { border-color: rgba(255,255,255,0.2); color: var(--lp-text); }
.lp-btn-back.invisible { visibility: hidden; pointer-events: none; }
.lp-btn-next {
  background: var(--lp-brand) !important; color: #fff !important;
  box-shadow: 0 4px 18px var(--lp-brand-glow);
}
.lp-btn-next:hover { background: var(--lp-brand-hover) !important; transform: translateY(-1px); }
.lp-btn-submit {
  background: var(--lp-brand) !important; color: #fff !important;
  box-shadow: 0 4px 18px var(--lp-brand-glow);
}
.lp-btn-submit:hover { background: var(--lp-brand-hover) !important; transform: translateY(-1px); }
.lp-btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* Nav logo desktop */
.lp-logo-nav {
  height: 13px; width: auto; display: block;
  flex: 1; object-fit: contain; margin: 0 auto;
}
/* Nav logo mobile — hidden by default */
.lp-nav-logo-mobile { display: none; }

/* ─── Success ─── */
.lp-success {
  position: absolute; inset: 0; background: var(--lp-surface);
  display: flex; align-items: center; justify-content: center;
  text-align: center; z-index: 20;
}
.lp-success.hidden { display: none !important; }
.lp-success-inner { padding: 40px; }
.lp-success-icon { width: 64px; height: 64px; margin: 0 auto 22px; color: var(--lp-brand); animation: lp-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.lp-success-icon svg { width: 64px; height: 64px; }
.lp-success-title { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 400; margin-bottom: 10px; text-transform: none; letter-spacing: normal; }
.lp-success-msg { color: var(--lp-text-muted); font-size: 15px; line-height: 1.6; }
@keyframes lp-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hidden { display: none !important; }

/* ══════════════════════════════════════
   MOBILE  ≤ 640px
══════════════════════════════════════ */
@media screen and (max-width: 640px) {

  .lp-page-bg {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100svh;
  }

  .lp-wrap {
    border-radius: 0 !important;
    min-height: 100svh;
    max-width: 100% !important;
  }

  /* Welcome screen mobile */
  .lp-welcome {
    padding: 40px 24px 36px;
    min-height: auto;
    align-items: flex-start;
  }
  .lp-welcome-logo  { height: 18px; margin-bottom: 24px; }
  .lp-welcome-title { font-size: 34px !important; }
  .lp-welcome-actions {
    flex-direction: column; align-items: stretch; gap: 8px;
  }
  .lp-welcome-btn { justify-content: center; width: 100%; }

  /* Steps mobile */
  .lp-step { padding: 22px 18px 10px; }
  .lp-step-title { font-size: 24px !important; }

  .lp-steps-nav { padding: 14px 10px 0; }
  .lp-dot-line  { max-width: 14px; }

  /* Grids mobile */
  .lp-field-split       { grid-template-columns: 1fr !important; }
  .lp-card-select-big   { grid-template-columns: repeat(2,1fr) !important; }
  .lp-style-select      { grid-template-columns: repeat(2,1fr) !important; }
  .lp-icon-grid         { grid-template-columns: repeat(3,1fr) !important; }
  .lp-summary-preview   { grid-template-columns: 1fr !important; }

  /* Nav mobile */
  .lp-nav {
    padding: 12px 18px 16px;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
  }
  /* Hide center logo on mobile */
  .lp-logo-nav { display: none !important; }
  /* Show footer logo below buttons */
  .lp-nav-logo-mobile {
    display: flex !important;
    justify-content: center; align-items: center;
    width: 100%; order: 10; padding-top: 6px;
  }
  .lp-nav-logo-mobile img {
    height: 12px; width: auto; display: block;
  }

  /* Buttons take up space properly on mobile */
  .lp-btn-next,
  .lp-btn-submit {
    margin-left: auto;
  }
}