/* Checkout identity for the Happ design series. Payment behavior stays in the
   existing templates; this file only maps the shared flow onto each design. */
body.happ-series-flow {
  --hs-bg: #f3f4ed;
  --hs-bg-deep: #e9ebe3;
  --hs-panel: #fafbf6;
  --hs-panel-soft: #ffffff;
  --hs-text: #0d0e0e;
  --hs-muted: #656862;
  --hs-line: #cfd2c9;
  --hs-accent: #83ecc3;
  --hs-accent-strong: #35c98f;
  --hs-on-accent: #0d0e0e;
  --hs-success: #24b875;
  --hs-radius: 5px;
  --hs-radius-small: 3px;
  --hs-shadow: 14px 14px 0 rgba(13, 14, 14, .1);
  --hs-font: Arial, "Helvetica Neue", sans-serif;
  min-width: 320px;
  color: var(--hs-text);
  background: var(--hs-bg);
  font-family: var(--hs-font);
}

body.happ-series-flow--setup {
  --hs-bg: #f4f7ff;
  --hs-bg-deep: #e5e0ff;
  --hs-panel: rgba(255, 255, 255, .92);
  --hs-panel-soft: #eef2ff;
  --hs-text: #171a35;
  --hs-muted: #646a86;
  --hs-line: #d9def2;
  --hs-accent: #4d64e8;
  --hs-accent-strong: #3346be;
  --hs-on-accent: #ffffff;
  --hs-success: #36b98a;
  --hs-radius: 34px;
  --hs-radius-small: 18px;
  --hs-shadow: 0 24px 70px rgba(73, 86, 156, .15);
  --hs-font: "Segoe UI", Arial, sans-serif;
}

body.happ-series-flow--one-screen {
  --hs-bg: #edf1f5;
  --hs-bg-deep: #dfe7ef;
  --hs-panel: rgba(255, 255, 255, .82);
  --hs-panel-soft: #f8fbfd;
  --hs-text: #071b36;
  --hs-muted: #5c6b7c;
  --hs-line: rgba(7, 27, 54, .16);
  --hs-accent: #2867e8;
  --hs-accent-strong: #164ebd;
  --hs-on-accent: #ffffff;
  --hs-success: #24b875;
  --hs-radius: 0;
  --hs-radius-small: 0;
  --hs-shadow: 0 24px 70px rgba(7, 27, 54, .13);
  --hs-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body.happ-series-flow--neon {
  --hs-bg: #050609;
  --hs-bg-deep: #090b11;
  --hs-panel: #0c0f16;
  --hs-panel-soft: #111621;
  --hs-text: #f7f9ff;
  --hs-muted: #9199aa;
  --hs-line: rgba(217, 228, 255, .15);
  --hs-accent: #25f1ff;
  --hs-accent-strong: #377dff;
  --hs-on-accent: #02080d;
  --hs-success: #72ffc5;
  --hs-radius: 4px;
  --hs-radius-small: 2px;
  --hs-shadow: 0 0 0 1px rgba(37, 241, 255, .08), 0 30px 90px rgba(0, 0, 0, .55);
  --hs-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.happ-series-flow--graphite {
  --hs-bg: #111213;
  --hs-bg-deep: #0c0d0e;
  --hs-panel: #171819;
  --hs-panel-soft: #1d1e20;
  --hs-text: #f7f7f5;
  --hs-muted: #969698;
  --hs-line: #2a2b2d;
  --hs-accent: #8b6cff;
  --hs-accent-strong: #7152ee;
  --hs-on-accent: #ffffff;
  --hs-success: #9effc9;
  --hs-radius: 0;
  --hs-radius-small: 0;
  --hs-shadow: 0 30px 90px rgba(0, 0, 0, .42);
  --hs-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.happ-series-flow--guide {
  --hs-bg: #09090d;
  --hs-bg-deep: #0d0c14;
  --hs-panel: #111119;
  --hs-panel-soft: #171622;
  --hs-text: #f5f2ff;
  --hs-muted: #9693a6;
  --hs-line: rgba(239, 235, 255, .14);
  --hs-accent: #9f72ff;
  --hs-accent-strong: #7d4fe3;
  --hs-on-accent: #100b1c;
  --hs-success: #69e6a6;
  --hs-radius: 16px;
  --hs-radius-small: 8px;
  --hs-shadow: 0 30px 90px rgba(0, 0, 0, .48);
  --hs-font: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
}

body.happ-series-flow::before {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--hs-accent) 14%, transparent), transparent 31%),
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--hs-accent-strong) 11%, transparent), transparent 28%),
    linear-gradient(180deg, var(--hs-bg), var(--hs-bg-deep));
  opacity: 1;
}

.happ-series-flow .ivf-noise {
  opacity: .12;
  background-image: radial-gradient(color-mix(in srgb, var(--hs-text) 16%, transparent) .6px, transparent .6px);
}

.happ-series-flow .ivf-grid {
  opacity: .2;
  background-image:
    linear-gradient(color-mix(in srgb, var(--hs-text) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--hs-text) 7%, transparent) 1px, transparent 1px);
}

.happ-series-flow--air .ivf-grid,
.happ-series-flow--setup .ivf-grid { opacity: .32; }
.happ-series-flow--one-screen .ivf-noise { display: none; }
.happ-series-flow--neon .ivf-grid { opacity: .34; background-size: 52px 52px; }
.happ-series-flow--graphite .ivf-grid { display: none; }
.happ-series-flow--guide .ivf-grid { background-size: 34px 34px; opacity: .28; }

.happ-series-flow .ivf-header {
  border-bottom: 1px solid var(--hs-line);
  background: color-mix(in srgb, var(--hs-bg) 88%, transparent);
  backdrop-filter: blur(18px);
}

.happ-series-flow .ivf-brand {
  border-color: var(--hs-line);
  border-radius: var(--hs-radius-small);
  color: var(--hs-text);
  background: var(--hs-panel);
  box-shadow: none;
  text-transform: none;
}

.happ-series-flow .ivf-brand-mark {
  border: 1px solid color-mix(in srgb, var(--hs-accent) 58%, var(--hs-line));
  border-radius: var(--hs-radius-small);
  color: var(--hs-on-accent);
  background: var(--hs-accent) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--hs-accent) 22%, transparent);
}

.happ-series-flow--air .ivf-brand-mark { border-radius: 0; transform: rotate(-3deg); }
.happ-series-flow--setup .ivf-brand-mark { border-radius: 13px; }
.happ-series-flow--one-screen .ivf-brand { font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.happ-series-flow--one-screen .ivf-brand-mark { border-radius: 50%; }
.happ-series-flow--neon .ivf-brand-mark { box-shadow: 0 0 28px color-mix(in srgb, var(--hs-accent) 42%, transparent); }
.happ-series-flow--graphite .ivf-brand-mark { position: relative; }
.happ-series-flow--guide .ivf-brand { font-family: "Cascadia Code", Consolas, monospace; font-size: 12px; }

.happ-series-flow .ivf-progress { color: var(--hs-muted); }
.happ-series-flow .ivf-progress span.is-complete,
.happ-series-flow .ivf-progress span.is-current { color: var(--hs-text); }
.happ-series-flow .ivf-progress span i { border-color: var(--hs-line); color: var(--hs-muted); background: var(--hs-panel); }
.happ-series-flow .ivf-progress span.is-complete i,
.happ-series-flow .ivf-progress span.is-current i {
  border-color: var(--hs-accent);
  color: var(--hs-on-accent);
  background: var(--hs-accent);
}
.happ-series-flow .ivf-progress b { background: linear-gradient(90deg, var(--hs-accent), var(--hs-line)); }

.happ-series-flow .ivf-main { color: var(--hs-text); }
.happ-series-flow .ivf-back { color: var(--hs-muted); }
.happ-series-flow .ivf-back:hover { color: var(--hs-text); }
.happ-series-flow .ivf-eyebrow,
.happ-series-flow .ivf-step-label {
  border-color: color-mix(in srgb, var(--hs-accent) 38%, var(--hs-line));
  border-radius: var(--hs-radius-small);
  color: var(--hs-text);
  background: color-mix(in srgb, var(--hs-accent) 12%, var(--hs-panel));
}
.happ-series-flow .ivf-eyebrow > span {
  border-radius: var(--hs-radius-small);
  color: var(--hs-on-accent);
  background: var(--hs-accent);
  box-shadow: none;
}
.happ-series-flow .ivf-product > h1,
.happ-series-flow .ivf-checkout-card > h2,
.happ-series-flow .ivf-method-heading h3 { color: var(--hs-text); }
.happ-series-flow .ivf-product > p,
.happ-series-flow .ivf-card-lead,
.happ-series-flow .ivf-field-note { color: var(--hs-muted); }

.happ-series-flow .ivf-plan-card,
.happ-series-flow .ivf-checkout-card {
  border-color: var(--hs-line);
  border-radius: var(--hs-radius);
  color: var(--hs-text);
  background: var(--hs-panel);
  box-shadow: var(--hs-shadow);
}
.happ-series-flow .ivf-plan-card::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--hs-accent) 18%, transparent), transparent 68%);
}
.happ-series-flow .ivf-plan-top,
.happ-series-flow .ivf-plan-main small,
.happ-series-flow .ivf-plan-meta,
.happ-series-flow .ivf-trust-row { color: var(--hs-muted); }
.happ-series-flow .ivf-plan-main > div:first-child > strong,
.happ-series-flow .ivf-plan-price strong { color: var(--hs-text); }
.happ-series-flow .ivf-plan-top em {
  border-color: color-mix(in srgb, var(--hs-success) 35%, transparent);
  color: var(--hs-text);
  background: color-mix(in srgb, var(--hs-success) 13%, var(--hs-panel));
}
.happ-series-flow .ivf-plan-meta i { background: var(--hs-success); box-shadow: 0 0 10px color-mix(in srgb, var(--hs-success) 60%, transparent); }
.happ-series-flow .ivf-change-plan,
.happ-series-flow .ivf-legal-note a { color: var(--hs-accent-strong); }
.happ-series-flow--neon .ivf-change-plan,
.happ-series-flow--graphite .ivf-change-plan,
.happ-series-flow--guide .ivf-change-plan,
.happ-series-flow--neon .ivf-legal-note a,
.happ-series-flow--graphite .ivf-legal-note a,
.happ-series-flow--guide .ivf-legal-note a { color: var(--hs-accent); }
.happ-series-flow .ivf-trust-row i { border-color: var(--hs-accent); }
.happ-series-flow .ivf-trust-row i::after { border-color: var(--hs-accent); }

.happ-series-flow .ivf-email-field > span { color: var(--hs-text); }
.happ-series-flow .ivf-email-field input {
  border-color: var(--hs-line);
  border-radius: var(--hs-radius-small);
  color: var(--hs-text);
  background: var(--hs-panel-soft);
}
.happ-series-flow .ivf-email-field input::placeholder { color: var(--hs-muted); }
.happ-series-flow .ivf-email-field input:focus {
  border-color: var(--hs-accent);
  background: var(--hs-panel-soft);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hs-accent) 15%, transparent);
}
.happ-series-flow .ivf-email-confirmation {
  border-color: color-mix(in srgb, var(--hs-success) 35%, transparent);
  border-radius: var(--hs-radius-small);
  color: var(--hs-text);
  background: color-mix(in srgb, var(--hs-success) 12%, var(--hs-panel));
}
.happ-series-flow .ivf-email-confirmation::before { color: var(--hs-bg); background: var(--hs-success); }
.happ-series-flow .ivf-method-heading span,
.happ-series-flow .ivf-payment-description,
.happ-series-flow .ivf-legal-note { color: var(--hs-muted); }

.happ-series-flow .ivf-payment {
  border-color: var(--hs-line);
  border-radius: var(--hs-radius-small);
  color: var(--hs-text);
  background: var(--hs-panel-soft);
  box-shadow: none;
}
.happ-series-flow .ivf-payment:hover,
.happ-series-flow .ivf-payment.is-selected {
  border-color: var(--hs-accent);
  background: color-mix(in srgb, var(--hs-accent) 9%, var(--hs-panel-soft));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hs-accent) 13%, transparent);
}
.happ-series-flow .ivf-payment-icon {
  border-color: color-mix(in srgb, var(--hs-accent) 32%, var(--hs-line));
  border-radius: var(--hs-radius-small);
  color: var(--hs-accent-strong);
  background: color-mix(in srgb, var(--hs-accent) 10%, var(--hs-panel-soft));
}
.happ-series-flow .ivf-payment-title { color: var(--hs-text); }
.happ-series-flow .ivf-payment-arrow { color: var(--hs-accent-strong); }
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp,
.happ-series-flow .ivf-email-submit {
  border-color: var(--hs-accent);
  border-radius: var(--hs-radius-small);
  color: var(--hs-on-accent);
  background: var(--hs-accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--hs-accent) 20%, transparent);
}
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp:hover,
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp.is-selected,
.happ-series-flow .ivf-email-submit:hover {
  border-color: var(--hs-accent-strong);
  color: var(--hs-on-accent);
  background: var(--hs-accent-strong);
}
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp .ivf-payment-icon {
  border-color: color-mix(in srgb, var(--hs-on-accent) 28%, transparent);
  color: var(--hs-on-accent);
  background: color-mix(in srgb, var(--hs-on-accent) 13%, transparent);
}
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp .ivf-payment-title,
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp .ivf-payment-description,
.happ-series-flow .ivf-payment.new2-checkout-payment-sbp .ivf-payment-arrow { color: var(--hs-on-accent); }

.happ-series-flow .ivf-guarantee {
  border-color: color-mix(in srgb, var(--hs-success) 28%, var(--hs-line));
  border-radius: var(--hs-radius-small);
  background: color-mix(in srgb, var(--hs-success) 8%, var(--hs-panel));
}
.happ-series-flow .ivf-guarantee-icon { border-radius: var(--hs-radius-small); color: var(--hs-success); background: color-mix(in srgb, var(--hs-success) 12%, transparent); }
.happ-series-flow .ivf-guarantee strong { color: var(--hs-text); }
.happ-series-flow .ivf-guarantee small { color: var(--hs-muted); }
.happ-series-flow .ivf-checkout-card .new2-alert,
.happ-series-flow .ivf-alert { border-radius: var(--hs-radius-small); }

.happ-series-flow--air .ivf-plan-card,
.happ-series-flow--air .ivf-checkout-card { border-width: 1px; }
.happ-series-flow--air .ivf-checkout-card { transform: rotate(.25deg); }
.happ-series-flow--setup .ivf-plan-card { background: linear-gradient(145deg, #fff, #eef2ff); }
.happ-series-flow--setup .ivf-checkout-card { background: linear-gradient(160deg, rgba(255,255,255,.98), #f1efff); }
.happ-series-flow--one-screen .ivf-header { background: rgba(237, 241, 245, .93); }
.happ-series-flow--one-screen .ivf-plan-card { border-left: 7px solid var(--hs-accent); }
.happ-series-flow--neon .ivf-plan-card,
.happ-series-flow--neon .ivf-checkout-card { background: linear-gradient(145deg, rgba(37,241,255,.055), rgba(139,92,255,.07)), var(--hs-panel); }
.happ-series-flow--neon .ivf-checkout-card { box-shadow: 0 0 0 1px rgba(37,241,255,.08), 0 0 65px rgba(55,125,255,.12); }
.happ-series-flow--graphite .ivf-plan-card { border-left: 3px solid var(--hs-accent); }
.happ-series-flow--guide .ivf-eyebrow,
.happ-series-flow--guide .ivf-step-label,
.happ-series-flow--guide .ivf-plan-top,
.happ-series-flow--guide .ivf-method-heading { font-family: "Cascadia Code", Consolas, monospace; }
.happ-series-flow--guide .ivf-step-label::before { content: "checkout / "; color: var(--hs-muted); }

/* The legacy flow stylesheet deliberately uses !important for the wait screen.
   Keep these overrides equally explicit so the wait screen follows the active
   Happ design instead of falling back to the old shared dark theme. */
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] {
  color: var(--pw-text) !important;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--pw-accent) 16%, transparent), transparent 30%),
    linear-gradient(180deg, var(--pw-bg), var(--pw-bg-deep)) !important;
  font-family: var(--pw-font) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] .tulip-payment-wait__brand {
  color: var(--pw-text) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] .tulip-payment-wait__card {
  min-height: 410px !important;
  border-color: var(--pw-line) !important;
  border-radius: var(--pw-radius) !important;
  color: var(--pw-text) !important;
  background: var(--pw-panel) !important;
  box-shadow: var(--pw-shadow) !important;
}
body.happ-series-flow .tulip-payment-wait--neon .tulip-payment-wait__card {
  background: linear-gradient(145deg, rgba(37, 241, 255, .055), rgba(139, 92, 255, .07)), var(--pw-panel) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] h1 {
  color: var(--pw-text) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] p {
  color: var(--pw-muted) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] .tulip-payment-wait__status {
  border-color: color-mix(in srgb, var(--pw-accent) 34%, var(--pw-line)) !important;
  border-radius: var(--pw-radius) !important;
  color: var(--pw-text) !important;
  background: color-mix(in srgb, var(--pw-accent) 11%, var(--pw-panel)) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] .tulip-payment-wait__manual {
  border-radius: var(--pw-radius) !important;
  color: var(--pw-on-accent) !important;
  background: var(--pw-accent) !important;
}
body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] .tulip-payment-wait__manual:hover {
  background: var(--pw-accent-strong) !important;
}
body.happ-series-flow .tulip-payment-wait.is-success[class*="tulip-payment-wait--"] .tulip-payment-wait__status {
  color: var(--pw-text) !important;
  background: color-mix(in srgb, #13bd79 13%, var(--pw-panel)) !important;
}

@media (max-width: 640px) {
  .happ-series-flow--air .ivf-checkout-card { transform: none; }
  .happ-series-flow .ivf-plan-card,
  .happ-series-flow .ivf-checkout-card { box-shadow: 0 16px 42px color-mix(in srgb, var(--hs-text) 11%, transparent); }
  body.happ-series-flow .tulip-payment-wait[class*="tulip-payment-wait--"] .tulip-payment-wait__card {
    min-height: 360px !important;
    border-radius: var(--pw-radius) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .happ-series-flow *,
  .happ-series-flow *::before,
  .happ-series-flow *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}