/* ═══════════════════════════════════════════════
   SOLAR SMART ADVISOR — LAYOUT
   layout.css
   Page structure, step shell, progress bar, footer.
═══════════════════════════════════════════════ */

/* ── App Root ────────────────────────────── */
#app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  position: relative;
}

/* ── Progress Bar ────────────────────────── */
#progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-progress);
  height: var(--progress-height);
  background: rgba(7, 26, 18, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  display: none;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-5);
  transition: opacity var(--duration-normal) var(--ease-out);
}

#progress-bar.visible {
  display: flex;
}

.progress-back {
  height: 38px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 20px;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--ease-out);
  font-family: var(--font-primary);
}
.progress-back-icon { line-height: 1; }
.progress-back-label { font-size: var(--text-xs); font-weight: var(--weight-bold); }
/* The ‹ glyph is a literal left-pointing arrow. In LTR reading order
   "back" means "toward the left" — no transform needed. In RTL reading
   order "back" means "toward the right" (you're returning to content
   you already passed, which sits on the right), so it's mirrored to ›
   only for dir="rtl". Scoped to the icon span alone, never the label,
   so the Arabic/English text itself is never mirrored. */
[dir="rtl"] .progress-back-icon { display: inline-block; transform: scaleX(-1); }
.progress-back:hover {
  color: var(--color-text);
  background: var(--color-surface3);
  border-color: var(--color-border-gold);
}

.progress-track {
  flex: 1;
  height: 3px;
  background: var(--color-surface3);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light));
  border-radius: var(--radius-full);
  transition: width 0.5s var(--ease-spring);
  box-shadow: 0 0 8px var(--color-gold-glow);
}

.progress-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  white-space: nowrap;
  letter-spacing: 1px;
  min-width: 36px;
  text-align: center;
}

/* ── Language Switcher ────────────────────────
   "🇸🇦 العربية | 🇺🇸 English" — always at the top inline-end corner
   (top-right in LTR, top-left in RTL — the same logical position in
   both directions, no conditional CSS needed). Present on every screen:
   one instance lives in the progress bar (steps 2-12), a second is
   absolutely positioned over the welcome hero (step 1), since welcome
   doesn't share the progress bar's chrome. */
.lang-switcher-slot {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.lang-switcher-slot--welcome {
  position: absolute;
  top: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: 2;
}

.lang-option {
  background: transparent;
  border: none;
  color: var(--color-text-dim);
  font-family: var(--font-primary);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 4px 6px;
  transition: color var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.lang-option.active { color: var(--color-gold); font-weight: var(--weight-bold); }
.lang-option:hover { color: var(--color-text); }
.lang-divider { color: var(--color-text-dim); font-size: 10px; }

/* ── Brand Badge (Header Component) ──────────
   Mounted into the progress bar by BrandComponents.mount() — present on
   every step except welcome, which already carries the full hero lockup. */
#brand-badge-slot { flex-shrink: 0; }

.brand-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  direction: ltr;
}
.brand-badge-word {
  font-size: 11px;
  font-weight: var(--weight-black);
  letter-spacing: 0.5px;
  color: var(--color-text);
  white-space: nowrap;
}

/* ── Global Footer (Footer Component) ────────
   Present on every screen, welcome included — Sudegy credit line.
   Small, fixed, and never competes visually with the Andoria brand. */
#brand-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: var(--z-progress);
  height: var(--brand-footer-height);
  background: rgba(7, 26, 18, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 26px;
  padding: 0 var(--space-3);
  margin: 0 auto;
  border-radius: var(--radius-full);
  font-size: 10px;
  color: var(--color-text-dim);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.brand-footer-inner:hover {
  background: var(--color-gold-dim);
}
.brand-footer-inner:active {
  transform: scale(0.95);
}
.brand-footer-powered b { color: var(--color-gold); font-weight: var(--weight-bold); }

.brand-footer-icon {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.4) translateY(2px);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-spring);
}
.brand-footer-inner:hover .brand-footer-icon {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Global Floating Actions (WhatsApp + Facebook) ─────
   Fixed across every step. The bottom offset is a measured constant,
   not a guess: the tallest .step-footer in the app (Step 2's, with
   inline validation) is 127.5px + the 34px global brand footer = 161.5px
   from the viewport bottom — this sits comfortably above that with
   margin to spare, on every step, without needing to track each step's
   footer height at runtime. inset-inline-end is a logical property, so
   this automatically sits on the correct side for RTL vs LTR. */
.fab-group {
  position: fixed;
  bottom: calc(var(--brand-footer-height) + 144px);
  inset-inline-end: 16px;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.fab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  flex-shrink: 0;
  animation: fabEnter 0.55s var(--ease-spring) backwards;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), filter 0.2s var(--ease-out);
}
.fab-btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
.fab-btn:active { transform: scale(0.92); }

/* WhatsApp — the primary floating utility: solid brand-green fill,
   54-60px, a soft continuous glow breathe, and a slow expanding ring so
   it reads as "alive" without being distracting. */
.fab-whatsapp {
  width: 56px;
  height: 56px;
  background: linear-gradient(155deg, #25D366, #1DA851);
  color: #fff;
  box-shadow: 0 8px 22px rgba(29,168,81,0.4);
  animation: fabEnter 0.55s var(--ease-spring) backwards, fabWhatsappGlow 3.2s ease-in-out infinite 0.55s;
}
.fab-whatsapp svg { display: block; fill: currentColor; }
.fab-whatsapp:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(29,168,81,0.55);
  filter: brightness(1.08);
}
.fab-whatsapp:active { transform: translateY(-1px) scale(0.94); }
.fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(37,211,102,0.55);
  animation: fabRingPulse 2.6s var(--ease-out) infinite 0.9s;
  pointer-events: none;
}

/* Facebook — secondary: dark surface, gold/green border, blue only as a
   quiet accent. Deliberately smaller and calmer than WhatsApp above it. */
.fab-facebook {
  width: 48px;
  height: 48px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-gold);
  color: var(--color-gold);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  animation: fabEnter 0.55s var(--ease-spring) 0.1s backwards, fabFacebookBreathe 4.4s ease-in-out infinite 0.9s;
}
.fab-facebook svg { display: block; fill: currentColor; }
.fab-facebook:hover {
  transform: translateY(-2px);
  border-color: #1877F2;
  color: #1877F2;
  box-shadow: 0 10px 22px rgba(24,119,242,0.25);
}
.fab-facebook:active { transform: translateY(-1px) scale(0.94); }

/* ── Steps Viewport ──────────────────────── */
#steps {
  flex: 1;
  position: relative;
  overflow: hidden;
}

/* ── Step Base ───────────────────────────── */
.step {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100dvh; /* bounded, not min-height — content taller than one
                     viewport must scroll inside .step-body, not grow the
                     whole page (that's what pushed the Customer Profile
                     step's Next button below the fold) */
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateX(48px);
  transition:
    opacity var(--duration-page) var(--ease-out),
    transform var(--duration-page) var(--ease-spring);
  pointer-events: none;
  will-change: transform, opacity;
}

.step.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
  position: relative;
}

.step.exit-left {
  opacity: 0;
  transform: translateX(-48px);
}

.step.exit-right {
  opacity: 0;
  transform: translateX(48px);
}

/* ── Step Shell (standard step layout) ───── */
.step-shell {
  display: flex;
  flex-direction: column;
  height: 100%; /* exactly fills the now height-bounded .step */
  padding-top: var(--progress-height);
}

.step-header {
  padding: var(--space-7) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-6);
  padding-bottom: var(--brand-footer-height); /* flush against the fixed brand-footer bar, no extra gap */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* No longer sticky/pinned — .step-footer now lives as the LAST CHILD
   of .step-body (moved there in app.html). `margin-top: auto` on a
   flex child pushes it to the true bottom of the container WHEN
   there's spare room (short content — this is the part a plain "just
   put it after the content" approach missed, leaving dead space below
   the button instead of anchoring it), while still being a normal
   in-flow, scrollable element once content is taller than the
   viewport (long content — pushes step-body into overflow, so it
   scrolls away with everything else instead of staying pinned). The
   small global #brand-footer bar (Sudegy credit line) stays genuinely
   fixed — unrelated, still cleared by .step-body's own bottom padding. */
.step-footer {
  margin-top: auto;
  padding-top: var(--space-5);
  /* clear the fixed #brand-footer bar so the primary button is never covered */
  padding-bottom: calc(var(--space-4) + var(--brand-footer-height));
  border-top: 1px solid var(--color-border);
}

/* ── Grid Utilities ──────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }

.col-full { grid-column: 1 / -1; }

/* ── Flex Utilities ──────────────────────── */
.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }

/* ── Spacing Utilities ───────────────────── */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }

/* ── Visibility ──────────────────────────── */
.hidden { display: none !important; }
.invisible { visibility: hidden; }

/* ── Loading Screen ──────────────────────── */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: var(--z-loading);
  transition: opacity 0.5s var(--ease-out), visibility 0.5s;
}

#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}