/**
 * V3 funnel — light theme + ambient animated background (.page--flow-started)
 */

/* ── Animated ambient background (landing + funnel) ── */
.flow-ambient-bg {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.flow-ambient-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: flow-orb-drift 20s ease-in-out infinite alternate;
}

.flow-ambient-bg__orb--a {
  width: 320px;
  height: 320px;
  top: -90px;
  right: -80px;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.28) 0%, transparent 70%);
}

.flow-ambient-bg__orb--b {
  width: 260px;
  height: 260px;
  bottom: 10%;
  left: -90px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%);
  animation-delay: -7s;
}

.flow-ambient-bg__orb--c {
  width: 200px;
  height: 200px;
  top: 48%;
  right: 5%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.14) 0%, transparent 70%);
  animation-delay: -14s;
}

.flow-ambient-bg__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, black 0%, transparent 92%);
}

.page.page--flow-started .flow-ambient-bg__orb {
  opacity: 0.65;
  animation-duration: 14s;
}

.page.page--flow-started .flow-ambient-bg__mesh {
  animation: flow-mesh-shift 24s linear infinite;
}

@keyframes flow-orb-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(16px, -20px) scale(1.06); }
}

@keyframes flow-mesh-shift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 32px 32px, 32px 32px; }
}

/* ── Base funnel typography ── */
.page.page--flow-started {
  color: #0f172a;
}

body:has(.page--flow-started) {
  background: #f1f5f9;
  color: #0f172a;
}

.page.page--flow-started .flow-step__title,
.page.page--flow-started .flow-project__title,
.page.page--flow-started .flow-loading__title {
  color: #0f172a;
}

.page.page--flow-started .flow-project__location,
.page.page--flow-started .flow-loading__city {
  color: #059669;
  font-weight: 700;
}

.page.page--flow-started .flow-loading__sub,
.page.page--flow-started .flow-hint,
.page.page--flow-started .flow-hint--v3,
.page.page--flow-started .flow-search-sub,
.page.page--flow-started .flow-search-progress {
  color: #64748b;
}

.page.page--flow-started .flow-search-subtitle {
  color: #475569;
}

/* ── Step cards (white panels) ── */
.page.page--flow-started .flow-step--project-v3,
.page.page--flow-started .flow-step--name-v3,
.page.page--flow-started .flow-step--address-v3,
.page.page--flow-started .flow-step--phone-v3,
.page.page--flow-started .flow-step--search-v3,
.page.page--flow-started .flow-step--result-v3,
.page.page--flow-started .flow-step--loading-v3 {
  width: 100%;
}

.page.page--flow-started .flow-step--project-v3,
.page.page--flow-started .flow-step--name-v3,
.page.page--flow-started .flow-step--address-v3,
.page.page--flow-started .flow-step--phone-v3,
.page.page--flow-started .flow-step--search-v3,
.page.page--flow-started .flow-step--result-v3 {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 1.1rem 1rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 28px -8px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}

/* ── Project type grid ── */
.page.page--flow-started .flow-step--project-v3 .project-type-card {
  border: 2px solid #e2e8f0;
  background: #ffffff;
  color: #334155;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.page.page--flow-started .flow-step--project-v3 .project-type-card:hover {
  border-color: #86efac;
  background: #f0fdf4;
}

.page.page--flow-started .flow-step--project-v3 .project-type-card.selected {
  border-color: #16a34a;
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
}

/* ── Loading scan widget (light inset) ── */
.page.page--flow-started .v3-area-scan {
  border-color: #bae6fd;
  background: linear-gradient(145deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
}

.page.page--flow-started .v3-scan-grid {
  background-image:
    linear-gradient(rgba(14, 165, 233, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 165, 233, 0.12) 1px, transparent 1px);
}

.page.page--flow-started .v3-socal-map {
  background: linear-gradient(150deg, rgba(59, 130, 246, 0.18) 0%, rgba(37, 99, 235, 0.1) 100%);
  border-color: rgba(14, 165, 233, 0.45);
}

/* ── Forms ── */
.page.page--flow-started .flow-form--v3 label,
.page.page--flow-started .flow-form--v3 label span {
  color: #475569;
  font-weight: 600;
}

.page.page--flow-started .flow-form--v3 input[type="text"],
.page.page--flow-started .flow-form--v3 input[type="tel"] {
  border: 2px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
}

.page.page--flow-started .flow-form--v3 input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.page.page--flow-started .flow-form--v3 input:focus {
  border-color: #22c55e;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
}

.page.page--flow-started .flow-form--v3 .flow-checkbox,
.page.page--flow-started .flow-form--v3 .flow-checkbox span {
  color: #334155 !important;
}

.page.page--flow-started .flow-form--v3 input:-webkit-autofill,
.page.page--flow-started .flow-form--v3 input:-webkit-autofill:hover,
.page.page--flow-started .flow-form--v3 input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0f172a;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  border-color: #22c55e;
}

.page.page--flow-started .flow-form--v3 .btn-continue,
.page.page--flow-started .flow-step--result-v3 .btn-confirm-booking {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border-color: #16a34a;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.page.page--flow-started .flow-form--v3 .btn-continue:hover,
.page.page--flow-started .flow-step--result-v3 .btn-confirm-booking:hover:not(:disabled) {
  background: linear-gradient(180deg, #4ade80 0%, #15803d 100%);
  border-color: #15803d;
}

/* ── Phone step ── */
.page.page--flow-started .flow-step--phone-v3 .flow-consent span {
  color: #475569 !important;
}

.page.page--flow-started .flow-consent-card {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.page.page--flow-started .flow-consent-legal {
  color: #64748b;
}

.page.page--flow-started .check-loop {
  border-color: rgba(22, 163, 74, 0.35);
  background: #f0fdf4;
}

/* ── Search step (light cinematic) ── */
.page.page--flow-started .flow-step--search-v3 .flow-step__title {
  color: #0f172a;
}

.page.page--flow-started .flow-step--search-v3 .cinematic-search {
  border-color: #dbeafe;
  background: radial-gradient(circle at 50% 30%, #f0f9ff 0%, #eef6ff 55%, #ffffff 100%);
}

.page.page--flow-started .flow-step--search-v3 .cinematic-grid {
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
}

.page.page--flow-started .flow-step--search-v3 .scan-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: #e2e8f0;
  color: #334155;
}

.page.page--flow-started .flow-step--search-v3 .cinematic-metrics {
  color: #475569;
}

.page.page--flow-started .flow-step--search-v3 .cinematic-metrics b {
  color: #15803d;
}

/* ── Result & booking ── */
.page.page--flow-started .flow-step--result-v3 .result-card {
  border: 1px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.page.page--flow-started .flow-step--result-v3 .result-name {
  color: #0f172a;
}

.page.page--flow-started .flow-step--result-v3 .result-service {
  color: #64748b;
}

.page.page--flow-started .flow-step--result-v3 .result-rating {
  color: #d97706;
}

.page.page--flow-started .flow-step--result-v3 .booking-wrap {
  border: 1px solid #e2e8f0;
  background: #f8fafc;
}

.page.page--flow-started .flow-step--result-v3 .booking-title {
  color: #0f172a;
  font-weight: 700;
}

.page.page--flow-started .flow-step--result-v3 .book-day,
.page.page--flow-started .flow-step--result-v3 .book-slot,
.page.page--flow-started .flow-step--result-v3 .book-nav,
.page.page--flow-started .flow-step--result-v3 .book-view-more {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

.page.page--flow-started .flow-step--result-v3 .book-day.selected,
.page.page--flow-started .flow-step--result-v3 .book-slot.selected {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
}

.page.page--flow-started .flow-step--result-v3 .book-none {
  color: #64748b;
}

.page.page--flow-started .flow-step--result-v3 .booking-success__title {
  color: #0f172a;
}

.page.page--flow-started .flow-step--result-v3 .booking-success__text {
  color: #475569;
}

.page.page--flow-started .flow-step--result-v3 .booking-success__time {
  color: #059669;
}

.page.page--flow-started .flow-step--result-v3 .booking-success__icon {
  color: #16a34a;
  background: #ecfdf5;
  border-color: #86efac;
}

/* ── Trust footer ── */
.page.page--flow-started .trust li:not(.trust__divider) {
  color: #475569;
}

.page.page--flow-started .trust svg {
  color: #16a34a;
  opacity: 1;
}

.page.page--flow-started .trust__divider {
  background: #e2e8f0;
}

/* ── Mobile funnel layout ── */
@media (max-width: 768px) {
  .page.page--flow-started {
    align-items: stretch;
    justify-content: flex-start;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }

  .page.page--flow-started .hero {
    justify-content: flex-start;
  }

  .page.page--flow-started .v3-funnel {
    justify-content: flex-start;
  }

  .page.page--flow-started .flow-step__title,
  .page.page--flow-started .flow-project__title {
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
  }

  .page.page--flow-started .flow-project__location {
    text-align: center;
    margin-bottom: 0.75rem;
  }

  .page.page--flow-started .flow-hint--v3 {
    text-align: center;
    font-size: 0.78rem;
  }

  .page.page--flow-started .flow-form--v3 input[type="text"],
  .page.page--flow-started .flow-form--v3 input[type="tel"] {
    min-height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }

  .page.page--flow-started .flow-form--v3 .btn-continue,
  .page.page--flow-started .flow-step--result-v3 .btn-confirm-booking {
    min-height: 52px;
    border-radius: 12px;
    font-size: 1rem;
  }

  .page.page--flow-started .flow-step--search-v3,
  .page.page--flow-started .flow-step--result-v3,
  .page.page--flow-started .flow-step--project-v3 {
    text-align: center;
    align-items: center;
  }

  .page.page--flow-started .flow-step--name-v3,
  .page.page--flow-started .flow-step--address-v3,
  .page.page--flow-started .flow-step--phone-v3 {
    align-items: stretch;
    text-align: left;
  }

  .page.page--flow-started .flow-step--result-v3 .booking-wrap {
    text-align: left;
    padding: 0.85rem;
    border-radius: 12px;
  }

  .page.page--flow-started .flow-step--result-v3 .book-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page.page--flow-started .trust {
    margin-top: 0.85rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid #e2e8f0;
  }
}

@media (max-width: 390px) {
  .page.page--flow-started .flow-step--project-v3 .project-type-card {
    font-size: 0.75rem;
    min-height: 42px;
  }

  .page.page--flow-started .flow-step__title,
  .page.page--flow-started .flow-project__title {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-ambient-bg__orb,
  .page.page--flow-started .flow-ambient-bg__mesh {
    animation: none !important;
  }
}