/* ==========================================================================
   ELLIS DRAFTING — ENTERPRISE GLASSMORPHISM DESIGN SYSTEM (styles.css)
   - Typography: Universal 'Inter' with tabular numeric alignment
   - Architecture: Multi-layer Frosted Glass + Specular Edge Bevels
   - Themes: Deep Obsidian Glass (Default) & Alabaster Frosted Quartz (Light)
   ========================================================================== */

:root,
html[data-theme="dark"],
body[data-theme="dark"] {
  --bg-canvas: #070709;
  
  /* Translucent Glass Surface Tokens (Dark Mode) */
  --bg-surface: rgba(18, 19, 24, 0.66);
  --bg-surface-hover: rgba(24, 26, 33, 0.78);
  --bg-elevated: rgba(26, 27, 34, 0.58);
  --bg-header: rgba(9, 9, 12, 0.76);
  --bg-input: rgba(10, 11, 14, 0.72);

  /* Ambient Canvas Backlighting (Gives Glass Something to Refract) */
  --ambient-glow-1: rgba(217, 155, 53, 0.08);
  --ambient-glow-2: rgba(56, 189, 248, 0.045);
  --ambient-glow-3: rgba(217, 155, 53, 0.05);

  /* High-Contrast Typography */
  --text-primary: #f8fafc;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;

  /* Precision Glass Hairlines & Specular Highlights */
  --border-subtle: rgba(255, 255, 255, 0.085);
  --border-strong: rgba(255, 255, 255, 0.16);
  --specular-top: rgba(255, 255, 255, 0.13);
  --specular-inner: rgba(255, 255, 255, 0.03);

  /* Brand Gold Accents */
  --gold-primary: #d99b35;
  --gold-hover: #e5ad4c;
  --gold-subtle: rgba(217, 155, 53, 0.13);
  --gold-border: rgba(217, 155, 53, 0.42);
  --gold-text: #f3be63;

  /* Multi-Layer Glass Shadows + Specular Inner Bevels */
  --shadow-surface:
    inset 0 1px 0 0 var(--specular-top),
    inset 0 0 0 1px var(--specular-inner),
    0 12px 32px -8px rgba(0, 0, 0, 0.65),
    0 2px 6px 0 rgba(0, 0, 0, 0.4);

  --shadow-surface-hover:
    inset 0 1px 0 0 rgba(243, 190, 99, 0.28),
    inset 0 0 0 1px rgba(217, 155, 53, 0.10),
    0 16px 38px -8px rgba(0, 0, 0, 0.75),
    0 4px 12px 0 rgba(217, 155, 53, 0.08);

  --shadow-elevated:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.09),
    0 4px 14px -2px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"],
body[data-theme="light"] {
  --bg-canvas: #f4f6fb;

  /* Translucent Frosted Quartz Tokens (Light Mode) */
  --bg-surface: rgba(255, 255, 255, 0.78);
  --bg-surface-hover: rgba(255, 255, 255, 0.92);
  --bg-elevated: rgba(241, 245, 249, 0.75);
  --bg-header: rgba(255, 255, 255, 0.82);
  --bg-input: rgba(255, 255, 255, 0.90);

  /* Soft Daylight Ambient Backlighting */
  --ambient-glow-1: rgba(196, 134, 32, 0.08);
  --ambient-glow-2: rgba(14, 165, 233, 0.05);
  --ambient-glow-3: rgba(196, 134, 32, 0.05);

  /* Crisp Ink Typography */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  /* Frosted Borders & Specular Highlights */
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.15);
  --specular-top: rgba(255, 255, 255, 0.95);
  --specular-inner: rgba(255, 255, 255, 0.65);

  /* Brand Gold Accents */
  --gold-primary: #c48620;
  --gold-hover: #a87015;
  --gold-subtle: rgba(196, 134, 32, 0.11);
  --gold-border: rgba(196, 134, 32, 0.38);
  --gold-text: #8c580a;

  /* Light Mode Glass Shadows */
  --shadow-surface:
    inset 0 1px 0 0 var(--specular-top),
    inset 0 0 0 1px var(--specular-inner),
    0 10px 28px -6px rgba(15, 23, 42, 0.07),
    0 2px 6px 0 rgba(15, 23, 42, 0.03);

  --shadow-surface-hover:
    inset 0 1px 0 0 #ffffff,
    inset 0 0 0 1px rgba(196, 134, 32, 0.16),
    0 14px 34px -6px rgba(15, 23, 42, 0.11),
    0 4px 12px 0 rgba(196, 134, 32, 0.07);

  --shadow-elevated:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 2px 8px -2px rgba(15, 23, 42, 0.04);
}

/* Base Reset & Ambient Glass Canvas */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-canvas);
  background-image:
    radial-gradient(circle at 16% 10%, var(--ambient-glow-1) 0%, transparent 42%),
    radial-gradient(circle at 84% 26%, var(--ambient-glow-2) 0%, transparent 40%),
    radial-gradient(circle at 50% 75%, var(--ambient-glow-3) 0%, transparent 48%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.num-tabular {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   ENTERPRISE GLASS SURFACES (.ed-header, .ed-surface, .ed-elevated)
   ========================================================================== */

.ed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background-color: var(--bg-header);
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: inset 0 -1px 0 0 var(--specular-inner), 0 4px 20px -4px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.ed-surface {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-surface);
  color: var(--text-primary);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ed-surface-interactive:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--gold-border);
  box-shadow: var(--shadow-surface-hover);
  transform: translateY(-2px);
}

.ed-elevated {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevated);
  color: var(--text-primary);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.ed-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
  color: var(--text-primary);
  font-family: inherit;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ed-input:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 0 3px var(--gold-subtle), inset 0 1px 0 var(--specular-top);
}

/* Semantic Typography Colors */
.ed-text-primary { color: var(--text-primary); }
.ed-text-secondary { color: var(--text-secondary); }
.ed-text-muted { color: var(--text-muted); }
.ed-text-gold { color: var(--gold-text); }

/* Semantic Borders */
.ed-border { border-color: var(--border-subtle); }
.ed-border-strong { border-color: var(--border-strong); }

/* ==========================================================================
   GLASS BUTTONS, BADGES & MODAL BACKDROPS
   ========================================================================== */

.ed-btn-gold {
  background: linear-gradient(180deg, var(--gold-hover) 0%, var(--gold-primary) 100%);
  color: #09090b;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 14px -2px rgba(217, 155, 53, 0.35);
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.ed-btn-gold:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 20px -2px rgba(217, 155, 53, 0.5);
  transform: translateY(-1px);
}

.ed-btn-outline {
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 1px 0 0 var(--specular-top);
  font-weight: 500;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.ed-btn-outline:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--gold-border);
  color: var(--gold-text);
  box-shadow: inset 0 1px 0 0 var(--specular-top), 0 4px 12px rgba(217, 155, 53, 0.12);
}

.ed-badge-gold {
  background-color: var(--gold-subtle);
  border: 1px solid var(--gold-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--gold-text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Frosted Glass Modal Overlays */
#send-files-modal,
#client-portal-mount {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

/* Discipline Left Accent Bars (Preserve Crisp Color Coding on Glass) */
.disc-clash { border-left: 3px solid #a855f7; }
.disc-hvac  { border-left: 3px solid #06b6d4; }
.disc-plumb { border-left: 3px solid #10b981; }
.disc-hydro { border-left: 3px solid #3b82f6; }
.disc-fire  { border-left: 3px solid #ef4444; }
.disc-elec  { border-left: 3px solid #f59e0b; }
.disc-spool { border-left: 3px solid #d99b35; }

/* ==========================================================================
   MACHINED OBSIDIAN-GOLD LOGO BADGE & SINGLE-LINE MARQUEE
   ========================================================================== */

.ed-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.ed-logo-badge {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 0%, #241c11 0%, #110d08 70%, #090806 100%);
  border: 1px solid rgba(217, 155, 53, 0.58);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Adaptive Light Mode Badge Styling */
html.light .ed-logo-badge,
html[data-theme="light"] .ed-logo-badge,
body[data-theme="light"] .ed-logo-badge {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  border: 1px solid rgba(217, 155, 53, 0.45);
  box-shadow:
    0 2px 8px rgba(217, 155, 53, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.ed-logo-link:hover .ed-logo-badge {
  border-color: #f3be63;
  box-shadow:
    0 6px 18px rgba(217, 155, 53, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}

html.light .ed-logo-link:hover .ed-logo-badge,
html[data-theme="light"] .ed-logo-link:hover .ed-logo-badge,
body[data-theme="light"] .ed-logo-link:hover .ed-logo-badge {
  border-color: #d99b35;
  box-shadow:
    0 4px 14px rgba(217, 155, 53, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.ed-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Single-Line Horizontal Metrics Marquee */
@keyframes ed-marquee-scroll {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.ed-marquee-viewport {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.ed-marquee-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: max-content;
  white-space: nowrap;
  animation: ed-marquee-scroll 34s linear infinite;
}

.ed-marquee-track:hover {
  animation-play-state: paused;
}

.ed-marquee-group {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2.25rem;
  padding-right: 2.25rem;
  flex-shrink: 0;
}

/* Accordion Chevron Rotation */
details > summary::-webkit-details-marker {
  display: none;
}

details[open] .faq-chevron {
  transform: rotate(180deg);
}

/* Screen-Reader Only Accessibility Utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* ==========================================================================
   MOBILE & MULTI-DEVICE RESPONSIVE SAFEGUARDS + VISUAL UPGRADES
   ========================================================================== */

/* 1. Lock horizontal viewport overflow across all mobile browsers */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* Disable background-attachment: fixed on touch/mobile devices to prevent iOS Safari repaint jitter */
@media (max-width: 1024px) {
  html,
  body {
    background-attachment: scroll;
  }
}

/* 2. Missing Scrollbar Hiding Utilities (Fixes FAQ & Legal Modal horizontal tabs) */
.scrollbar-none,
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar,
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* 3. Section Header Design: Gold Gradient Typography, Eyebrow Pill & Datum Divider */
.ed-text-gradient-gold {
  background: linear-gradient(135deg, #fde68a 0%, #f3be63 45%, #d99b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="light"] .ed-text-gradient-gold,
body[data-theme="light"] .ed-text-gradient-gold {
  background: linear-gradient(135deg, #b45309 0%, #c48620 50%, #78350f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ed-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background-color: var(--gold-subtle);
  border: 1px solid var(--gold-border);
  color: var(--gold-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.ed-section-divider {
  width: 64px;
  height: 3px;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold-primary), transparent);
}

/* 4. Theme-Adaptive Mono Pills (Fixes invisible white-on-white badges in Light Mode) */
.ed-mono-pill {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
}

html[data-theme="light"] .ed-mono-pill,
body[data-theme="light"] .ed-mono-pill {
  background-color: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.14);
  color: #0f172a;
}

/* 5. Color-Coded Sector Cards ("Who Hires Us & Why") */
.ed-sector-card {
  position: relative;
  overflow: hidden;
}

.ed-sector-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.9;
  transition: height 0.25s ease, opacity 0.25s ease;
}

.ed-sector-card:hover::before {
  height: 4px;
  opacity: 1;
}

/* All Sectors: Unified Adaptive Gold Aesthetic (#D99B35) */
.sector-commercial::before,
.sector-residential::before,
.sector-hospitality::before,
.sector-industrial::before {
  background: linear-gradient(90deg, #d99b35, #fbbf24, transparent);
}

.sector-commercial .sector-icon-box,
.sector-residential .sector-icon-box,
.sector-hospitality .sector-icon-box,
.sector-industrial .sector-icon-box {
  background: rgba(217, 155, 53, 0.14);
  border: 1px solid rgba(217, 155, 53, 0.4);
  color: #f3be63;
}

html[data-theme="light"] .sector-commercial .sector-icon-box,
html[data-theme="light"] .sector-residential .sector-icon-box,
html[data-theme="light"] .sector-hospitality .sector-icon-box,
html[data-theme="light"] .sector-industrial .sector-icon-box {
  color: #b45309;
  background: rgba(217, 155, 53, 0.1);
  border-color: rgba(217, 155, 53, 0.3);
}

/* 6. Subtle GPU Scroll-Reveal & Stagger Animations */
.ed-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.ed-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.ed-delay-1 { transition-delay: 70ms; }
.ed-delay-2 { transition-delay: 140ms; }
.ed-delay-3 { transition-delay: 210ms; }
.ed-delay-4 { transition-delay: 280ms; }

@keyframes ed-pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.ed-pulse-dot {
  animation: ed-pulse-dot 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ed-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   MOBILE SAFARI SAFEGUARDS & THEMED SPECULAR GLASS CARDS
   ========================================================================== */

/* 1. Scope Light-Mode WhatsApp pill strictly to button/badge links (leaves inline text links clean) */
html.light a[href*="wa.me"].ed-btn-outline,
html.light #mobile-nav-drawer a[href*="wa.me"],
html[data-theme="light"] a[href*="wa.me"].ed-btn-outline,
html[data-theme="light"] #mobile-nav-drawer a[href*="wa.me"],
body[data-theme="light"] a[href*="wa.me"].ed-btn-outline,
body[data-theme="light"] #mobile-nav-drawer a[href*="wa.me"] {
  background-color: #DCFCE7 !important;
  border-color: #86EFAC !important;
  color: #15803D !important;
}
html.light a[href*="wa.me"].ed-btn-outline svg,
html.light #mobile-nav-drawer a[href*="wa.me"] svg,
html[data-theme="light"] a[href*="wa.me"].ed-btn-outline svg,
html[data-theme="light"] #mobile-nav-drawer a[href*="wa.me"] svg,
body[data-theme="light"] a[href*="wa.me"].ed-btn-outline svg,
body[data-theme="light"] #mobile-nav-drawer a[href*="wa.me"] svg {
  color: #16A34A !important;
}

/* 2. Prevent iOS Safari from auto-zooming and shifting the viewport when tapping inputs on mobile */
@media (max-width: 639px) {
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* 3. Linear-Style Specular Glass Cards (Scoped to Dark Mode & excluding custom sector/discipline borders) */
html.dark .ellis-pro-card,
html.dark [class*="estimator-card"],
html.dark [class*="pricing-card"],
html[data-theme="dark"] .ellis-pro-card,
html[data-theme="dark"] [class*="estimator-card"],
html[data-theme="dark"] [class*="pricing-card"],
body[data-theme="dark"] .ellis-pro-card,
body[data-theme="dark"] [class*="estimator-card"],
body[data-theme="dark"] [class*="pricing-card"] {
  position: relative;
  background: rgba(12, 19, 34, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 14px;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 40px -20px rgba(0, 0, 0, 0.7);
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

html.light .ellis-pro-card,
html.light [class*="estimator-card"],
html.light [class*="pricing-card"],
html[data-theme="light"] .ellis-pro-card,
html[data-theme="light"] [class*="estimator-card"],
html[data-theme="light"] [class*="pricing-card"],
body[data-theme="light"] .ellis-pro-card,
body[data-theme="light"] [class*="estimator-card"],
body[data-theme="light"] [class*="pricing-card"] {
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 14px;
  box-shadow: 0 10px 28px -6px rgba(15, 23, 42, 0.07);
}


/* Instant Frosted-Glass Header Tooltips */
.ed-tooltip-trigger {
  position: relative;
}

.ed-tooltip-trigger::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  padding: 4px 8px;
  border-radius: 6px;
  background-color: var(--bg-header);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-elevated);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 60;
}

.ed-tooltip-trigger:hover::after,
.ed-tooltip-trigger:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ==========================================================================
   COMPARISON SLIDER & 5-STEP PIPELINE VISUAL REFINEMENTS
   ========================================================================== */

/* Pipeline Step Card Top Accent Bar (Cannot be overridden by .ed-surface border) */
.ed-step-card {
  position: relative;
  overflow: hidden;
}

.ed-step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--step-accent, #d99b35), transparent 90%);
  opacity: 0.95;
  transition: height 0.2s ease;
}

.ed-step-card:hover::before {
  height: 4px;
}

/* Unified Brand Gold Top Accent for Enterprise Consistency */
.ed-step-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #d99b35, rgba(217, 155, 53, 0.4) 60%, transparent 95%);
  opacity: 0.95;
  transition: all 0.25s ease;
}

.ed-step-card:hover::before {
  height: 3.5px;
  background: linear-gradient(90deg, #f3be63, #d99b35 70%, transparent 100%);
}

.step-1, .step-2, .step-3, .step-4, .step-5 {
  --step-accent: #d99b35;
} /* Handover: Brand Gold */

/* Subtle Gold Ambient Highlight for the Bottom SLA Guarantee Banner */
.ed-sla-banner {
  border-color: var(--gold-border) !important;
  background-image: radial-gradient(
    circle at 85% 20%,
    rgba(217, 155, 53, 0.09) 0%,
    transparent 55%
  );
}

/* Tooltip for left-oriented triggers (e.g. bottom-right floating dock) */
.ed-tooltip-left::after {
  top: 50% !important;
  left: auto !important;
  right: calc(100% + 10px) !important;
  transform: translateY(-50%) translateX(4px) !important;
}

.ed-tooltip-left:hover::after,
.ed-tooltip-left:focus-visible::after {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* ==========================================================================
   ELLIS CLIENT PORTAL — THEME UNIFICATION & RESPONSIVE CLEANUP
   ========================================================================== */

#client-portal-mount {
  background-color: var(--bg-canvas);
  background-image:
    radial-gradient(circle at 15% 10%, var(--ambient-glow-1) 0%, transparent 40%),
    radial-gradient(circle at 85% 25%, var(--ambient-glow-2) 0%, transparent 40%);
  color: var(--text-primary);
}

/* Prevent code badges, status pills, and action buttons from breaking onto 2 lines */
#client-portal-mount code,
#client-portal-mount .portal-badge,
#client-portal-mount table button,
#client-portal-mount table a {
  white-space: nowrap !important;
}

/* Ensure portal tables scroll smoothly on phones/tablets without squishing columns */
#client-portal-mount .portal-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#client-portal-mount table {
  min-width: 780px;
}

/* Unify Portal Active Tab with Brand Gold Gradient */
#client-portal-mount .portal-tab-active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #f3be63, #d99b35);
  box-shadow: 0 0 10px rgba(217, 155, 53, 0.5);
}