/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║   SUNRISE BAIL BONDS ALHAMBRA — KURIGRAM CORPORATE THEME    ║
 * ║   v3.0 — FINAL DEFINITIVE EDITION                           ║
 * ║   Design: Trust & Authority | Pattern: Enterprise Gateway   ║
 * ║   Colors: Navy #0d1b2a | Teal #14b1bb | Gold #b8892a        ║
 * ║   Fonts:  Livvic (headings) + Lato (body)                   ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Livvic:wght@400;500;600;700;900&family=Lato:wght@300;400;700&display=swap');

/* ── CSS Custom Properties ────────────────────────────────────── */
:root {
  --k-teal:        #14b1bb;
  --k-teal-dark:   #0d8e97;
  --k-teal-light:  #1dd4e0;
  --k-gold:        #b8892a;
  --k-gold-bright: #e0a830;
  --k-navy:        #0d1b2a;
  --k-navy-mid:    #162233;
  --k-navy-light:  #1e3347;
  --k-white:       #ffffff;
  --k-text:        #0f172a;
  --k-muted:       #64748b;
  --k-border:      #cbd5e1;
  --k-shadow-md:   0 8px 24px rgba(13,27,42,0.14);
  --k-shadow-teal: 0 6px 24px rgba(20,177,187,0.35);
  --k-shadow-gold: 0 6px 24px rgba(184,137,42,0.35);
  --k-r-pill:      50px;
  --k-ease:        all 0.25s cubic-bezier(0.4,0,0.2,1);
  --k-ease-bounce: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  --trust-bar-h:   36px;
  --navbar-h:      76px;
}

/* ═══════════════════════════════════════════════════════════════
   1. BASE RESETS
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

html, body, #root {
  font-family: 'Lato', system-ui, sans-serif !important;
  color: var(--k-text) !important;
  background: #ffffff !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Livvic', 'Lato', system-ui, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. TRUST BAR & BODY OFFSET
   The trust bar div is injected by index.html with id="alhambra-trust-bar"
   This CSS ensures it stays fixed and content is pushed down
═══════════════════════════════════════════════════════════════ */
#alhambra-trust-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  height: var(--trust-bar-h) !important;
  background: linear-gradient(90deg, #0d1b2a 0%, #0e3d4e 50%, #0d1b2a 100%) !important;
  color: #ffffff !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 0 16px !important;
  line-height: var(--trust-bar-h) !important;
  border-bottom: 2px solid #b8892a !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

#alhambra-trust-bar a {
  color: #14b1bb !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}

#alhambra-trust-bar .sep {
  color: #b8892a !important;
  font-weight: 400 !important;
}

/* Push all body content below the trust bar */
body > #alhambra-trust-bar ~ * {
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   3. NAVBAR — White, Clean, Fixed Below Trust Bar
═══════════════════════════════════════════════════════════════ */
header, nav,
[class*="Navbar"], [class*="navbar"],
[class*="Header"], [class*="header"] {
  background: #ffffff !important;
  border-bottom: 1px solid #e2eef2 !important;
  box-shadow: 0 2px 16px rgba(13,27,42,0.07) !important;
  position: fixed !important;
  top: var(--trust-bar-h) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99998 !important;
  height: var(--navbar-h) !important;
}

/* ── Logo ── */
header img, nav img, [class*="Navbar"] img,
header a > img, nav a > img,
[class*="logo"] img, [class*="Logo"] img {
  content: url('/images/logo-alhambra.png') !important;
  height: 62px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 4px 0 !important;
}

/* ── Nav Links ── */
header nav a, nav nav a,
[class*="Navbar"] a, [class*="nav-link"],
header ul a, nav ul a {
  color: var(--k-navy) !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  padding: 0 8px !important;
}

header nav a:hover, nav nav a:hover,
[class*="Navbar"] a:hover {
  color: var(--k-teal) !important;
}

/* ── CALL NOW button in navbar ── */
[class*="Navbar"] button,
header button[class*="call"],
nav a[href*="tel"],
[class*="cta-btn"], [class*="CtaBtn"],
header button:last-child,
nav button:last-child,
header a[href*="tel"],
[class*="NavCta"], [class*="navCta"] {
  background: var(--k-teal) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--k-r-pill) !important;
  padding: 10px 22px !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 14px rgba(20,177,187,0.4) !important;
  transition: var(--k-ease) !important;
  text-decoration: none !important;
}

[class*="Navbar"] button:hover,
header a[href*="tel"]:hover {
  background: var(--k-teal-dark) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(20,177,187,0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════
   4. BODY OFFSET — Push Content Below Fixed Trust Bar + Navbar
═══════════════════════════════════════════════════════════════ */
body > #alhambra-trust-bar ~ div:not(#alhambra-trust-bar) {
  padding-top: calc(var(--trust-bar-h) + var(--navbar-h)) !important;
}

#root {
  padding-top: 0 !important;
}

/* The first section (hero/animation) needs top offset */
#alhambra-video-hero,
#alhambra-video-hero,
[class*="homeHero"], [class*="Slider"],
main > div:first-child,
#root > div > div:first-child {
  margin-top: calc(var(--trust-bar-h) + var(--navbar-h)) !important;
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. HERO SECTION — Dark Overlay, Strong Text Visibility
═══════════════════════════════════════════════════════════════ */
#alhambra-video-hero {
  position: relative !important;
  min-height: 88vh !important;
  background: var(--k-navy) !important;
  overflow: hidden !important;
}

/* Video element — strong dark overlay so text is always readable */
#alhambra-video-hero video,
#alhambra-video-hero video,
#alhambra-video-hero video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.28 !important; /* dark overlay = text always readable */
  z-index: 0 !important;
  filter: brightness(0.6) saturate(0.8) !important;
}

/* Solid overlay on top of video to guarantee contrast */
#alhambra-video-hero::before,
#alhambra-video-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    160deg,
    rgba(13,27,42,0.82) 0%,
    rgba(13,27,42,0.65) 50%,
    rgba(13,27,42,0.45) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Teal left accent strip */
#alhambra-video-hero::after,
#alhambra-video-hero::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #14b1bb, #b8892a) !important;
  z-index: 2 !important;
}

/* All hero content must sit above overlays */
#alhambra-video-hero > *,
#alhambra-video-hero > *,
#alhambra-video-hero > * {
  position: relative !important;
  z-index: 3 !important;
}

/* ── Hero Typography ── */
#alhambra-video-hero h1,
#alhambra-video-hero h1,
[class*="lcp-title"],
.lcp-title {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: 'Livvic', sans-serif !important;
  font-size: clamp(2rem, 5vw, 3.8rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
  margin-bottom: 1rem !important;
}

#alhambra-video-hero h1 span,
#alhambra-video-hero h1 span,
[class*="lcp-title"] span {
  background: linear-gradient(135deg, #14b1bb 0%, #b8892a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#alhambra-video-hero h2,
#alhambra-video-hero p,
#alhambra-video-hero h2,
#alhambra-video-hero p {
  color: rgba(255,255,255,0.92) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5) !important;
}

#alhambra-video-hero p,
#alhambra-video-hero p {
  font-size: clamp(0.95rem, 2.5vw, 1.15rem) !important;
  line-height: 1.7 !important;
}

/* ═══════════════════════════════════════════════════════════════
   6. HERO CTA BUTTONS — GOLD + TEAL, HIGHLY VISIBLE
═══════════════════════════════════════════════════════════════ */

/* Primary CTA — GOLD (call to action) */
#alhambra-video-hero a,
#alhambra-video-hero button,
#alhambra-video-hero a,
#alhambra-video-hero button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--k-r-pill) !important;
  font-family: 'Lato', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: var(--k-ease) !important;
  border: none !important;
}

/* Primary = Gold */
#alhambra-video-hero a:first-of-type,
#alhambra-video-hero button:first-of-type,
#alhambra-video-hero a:nth-child(1),
#alhambra-video-hero button:nth-child(1),
[class*="heroCta"]:first-child,
[class*="HeroCta"]:first-child,
[class*="hero"] a[href*="tel"],
[class*="hero"] button[class*="primary"] {
  background: linear-gradient(135deg, #e0a830 0%, #b8892a 100%) !important;
  color: #0d1b2a !important;
  -webkit-text-fill-color: #0d1b2a !important;
  padding: 14px 34px !important;
  box-shadow: 0 6px 24px rgba(184,137,42,0.5) !important;
  min-width: 180px !important;
}

#alhambra-video-hero a:first-of-type:hover,
#alhambra-video-hero a:first-of-type:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(224,168,48,0.6) !important;
}

/* Secondary = Teal outline */
#alhambra-video-hero a:nth-child(2),
#alhambra-video-hero button:nth-child(2),
#alhambra-video-hero a:nth-child(2),
#alhambra-video-hero button:nth-child(2),
[class*="hero"] button[class*="secondary"] {
  background: transparent !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 2px solid #14b1bb !important;
  padding: 12px 28px !important;
}

#alhambra-video-hero a:nth-child(2):hover,
#alhambra-video-hero a:nth-child(2):hover {
  background: #14b1bb !important;
  color: #ffffff !important;
  transform: translateY(-3px) !important;
}

/* Universal CTA reset — catch anything that's still white-on-white */
#alhambra-video-hero [class*="btn"],
#alhambra-video-hero [class*="Btn"],
#alhambra-video-hero [class*="Button"],
#alhambra-video-hero [class*="btn"],
#alhambra-video-hero [class*="Button"] {
  background: linear-gradient(135deg, #e0a830 0%, #b8892a 100%) !important;
  color: #0d1b2a !important;
  -webkit-text-fill-color: #0d1b2a !important;
  padding: 14px 32px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(184,137,42,0.45) !important;
  font-weight: 700 !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. TRUST BADGES / STATS STRIP
═══════════════════════════════════════════════════════════════ */
[class*="TrustBadge"], [class*="trustBadge"],
[class*="BadgeBar"], [class*="badgeBar"],
[class*="StatsBar"], [class*="statsBar"],
[class*="statsSection"],
[class*="StatsSection"] {
  background: var(--k-navy) !important;
  padding: 28px 0 !important;
  border-top: 2px solid var(--k-teal) !important;
  border-bottom: 2px solid rgba(20,177,187,0.2) !important;
}

[class*="TrustBadge"] *, [class*="StatsBar"] *,
[class*="BadgeBar"] *,
[class*="statsSection"] *,
[class*="StatsSection"] * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

[class*="TrustBadge"] [class*="number"],
[class*="TrustBadge"] [class*="stat"],
[class*="StatsBar"] strong,
[class*="StatsSection"] h3,
[class*="StatsSection"] [class*="number"] {
  color: var(--k-teal) !important;
  -webkit-text-fill-color: var(--k-teal) !important;
  font-size: 2rem !important;
  font-weight: 900 !important;
}

/* ═══════════════════════════════════════════════════════════════
   8. SERVICE CARDS
═══════════════════════════════════════════════════════════════ */
[class*="ServiceCard"], [class*="serviceCard"],
[class*="ServicesSection"] [class*="card"],
[class*="service-card"] {
  background: #ffffff !important;
  border: 1px solid #e2eef2 !important;
  border-radius: 12px !important;
  border-top: 3px solid var(--k-teal) !important;
  box-shadow: var(--k-shadow-md) !important;
  transition: var(--k-ease) !important;
  overflow: hidden !important;
}

[class*="ServiceCard"]:hover, [class*="serviceCard"]:hover,
[class*="ServicesSection"] [class*="card"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 48px rgba(13,27,42,0.16) !important;
  border-top-color: var(--k-gold) !important;
}

[class*="ServiceCard"] h3, [class*="serviceCard"] h3,
[class*="ServicesSection"] h3 {
  color: var(--k-navy) !important;
  font-family: 'Livvic', sans-serif !important;
}

[class*="ServiceCard"] p, [class*="serviceCard"] p {
  color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════
   9. SECTION HEADINGS
═══════════════════════════════════════════════════════════════ */
main h2, section h2,
[class*="Section"] h2:not([class*="hero"] h2):not([class*="Animation"] h2) {
  color: var(--k-navy) !important;
  font-family: 'Livvic', sans-serif !important;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem) !important;
  font-weight: 800 !important;
}

main h2 span, section h2 span,
[class*="Section"] h2 span {
  color: var(--k-teal) !important;
}

/* ── Section dividers ── */
[class*="Section"]:not([class*="Animation"]):not([class*="Hero"]) {
  padding: 80px 0 !important;
}

/* ── Light sections ── */
[class*="HowItWorks"], [class*="howItWorks"],
[class*="AboutSection"], [class*="WhyChooseUs"] {
  background: #f8fbfc !important;
}

/* ── Dark sections ── */
[class*="CtaSection"], [class*="ctaSection"],
[class*="CallToAction"], [class*="contactBanner"] {
  background: var(--k-navy) !important;
  color: #ffffff !important;
}

[class*="CtaSection"] h2, [class*="CtaSection"] p,
[class*="CallToAction"] h2, [class*="CallToAction"] p {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. GLOBAL CTA BUTTONS — Gold Primary, Teal Secondary
═══════════════════════════════════════════════════════════════ */
button, [role="button"],
a[href*="tel"], a[class*="btn"], a[class*="Btn"],
[class*="button"], [class*="Button"] {
  cursor: pointer !important;
}

/* Global primary buttons */
[class*="btn-primary"], [class*="BtnPrimary"],
[class*="primaryBtn"], [class*="ctaButton"],
[class*="CtaButton"], [class*="CallBtn"] {
  background: linear-gradient(135deg, #e0a830 0%, #b8892a 100%) !important;
  color: #0d1b2a !important;
  -webkit-text-fill-color: #0d1b2a !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-size: 0.94rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 6px 20px rgba(184,137,42,0.4) !important;
  transition: var(--k-ease) !important;
}

[class*="btn-primary"]:hover, [class*="ctaButton"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(184,137,42,0.55) !important;
}

/* Global secondary buttons — Teal */
[class*="btn-secondary"], [class*="BtnSecondary"],
[class*="secondaryBtn"] {
  background: var(--k-teal) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 28px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 14px rgba(20,177,187,0.35) !important;
  transition: var(--k-ease) !important;
}

[class*="btn-secondary"]:hover, [class*="secondaryBtn"]:hover {
  background: var(--k-teal-dark) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   11. FORMS — Visible, Clean, Accessible
═══════════════════════════════════════════════════════════════ */
form input, form textarea, form select,
[class*="form"] input, [class*="form"] textarea, [class*="form"] select,
[class*="Form"] input, [class*="Form"] textarea, [class*="Form"] select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  width: 100% !important;
  transition: border-color 0.2s ease !important;
  outline: none !important;
}

form input:focus, form textarea:focus, form select:focus,
[class*="form"] input:focus, [class*="Form"] input:focus {
  border-color: var(--k-teal) !important;
  box-shadow: 0 0 0 3px rgba(20,177,187,0.15) !important;
}

form label, [class*="form"] label, [class*="Form"] label {
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  display: block !important;
  margin-bottom: 6px !important;
}

form button[type="submit"],
[class*="form"] button[type="submit"],
[class*="Form"] button[type="submit"],
[class*="submitBtn"], [class*="SubmitBtn"] {
  background: linear-gradient(135deg, #14b1bb 0%, #0d8e97 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 14px 36px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  width: 100% !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(20,177,187,0.4) !important;
  transition: var(--k-ease) !important;
}

form button[type="submit"]:hover {
  background: linear-gradient(135deg, #0d8e97 0%, #0a7078 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(20,177,187,0.55) !important;
}

/* ═══════════════════════════════════════════════════════════════
   12. FOOTER
═══════════════════════════════════════════════════════════════ */
footer, [class*="Footer"] {
  background: var(--k-navy) !important;
  color: rgba(255,255,255,0.8) !important;
  border-top: 3px solid var(--k-teal) !important;
}

[class*="Footer"] h2, [class*="Footer"] h3,
footer h2, footer h3 {
  color: var(--k-teal) !important;
  font-family: 'Livvic', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(20,177,187,0.25) !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

[class*="Footer"] a, footer a {
  color: rgba(255,255,255,0.72) !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  transition: color 0.2s ease !important;
  display: block !important;
  padding: 3px 0 !important;
}

[class*="Footer"] a:hover, footer a:hover {
  color: var(--k-teal) !important;
}

[class*="Footer"] p, footer p,
[class*="Footer"] span:not([class*="sep"]) {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.86rem !important;
}

/* Footer address injected via CSS content */
[class*="Footer"] > div > div:first-child h2,
[class*="Footer"] > div > div:first-child h3 {
  position: relative !important;
  padding-bottom: 60px !important;
}

[class*="Footer"] > div > div:first-child h2::after,
[class*="Footer"] > div > div:first-child h3::after {
  content: '1224 S Garfield Ave B\A Alhambra, CA 91801\A ☎\00a0(626) 457-8710\A ⏰\00a0Open 24 Hours / 7 Days' !important;
  white-space: pre !important;
  display: block !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,0.7) !important;
  line-height: 1.8 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  -webkit-text-fill-color: rgba(255,255,255,0.7) !important;
}

/* Footer sub-bar */
[class*="Footer"] [class*="copyright"],
footer > div:last-child {
  border-top: 1px solid rgba(20,177,187,0.15) !important;
  padding-top: 20px !important;
  margin-top: 20px !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.78rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   13. TESTIMONIALS / REVIEWS SLIDER
═══════════════════════════════════════════════════════════════ */
[class*="Testimonial"], [class*="testimonial"],
[class*="Review"], [class*="review"],
[class*="ReviewCard"], [class*="reviewCard"] {
  background: #ffffff !important;
  border-radius: 12px !important;
  border-left: 4px solid var(--k-teal) !important;
  box-shadow: 0 4px 20px rgba(13,27,42,0.08) !important;
  padding: 28px !important;
}

[class*="testimonial"] p, [class*="Review"] p,
[class*="ReviewCard"] p {
  color: #475569 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
}

/* Star ratings */
[class*="star"], [class*="Star"],
[class*="rating"] span, [class*="Rating"] span {
  color: var(--k-gold-bright) !important;
}

/* ═══════════════════════════════════════════════════════════════
   14. MODAL / CHAT / POPUP
═══════════════════════════════════════════════════════════════ */
[class*="Modal"], [class*="modal"],
[class*="Dialog"], [class*="dialog"],
[class*="Popup"], [class*="popup"] {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 25px 80px rgba(13,27,42,0.35) !important;
}

[class*="Modal"] header, [class*="modal"] header,
[class*="Modal"] [class*="header"],
[class*="modal"] [class*="header"] {
  background: var(--k-navy) !important;
  color: #ffffff !important;
  padding: 20px 24px !important;
}

[class*="Modal"] [class*="close"],
[class*="modal"] [class*="close"] {
  color: rgba(255,255,255,0.7) !important;
  background: rgba(255,255,255,0.1) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
}

/* ═══════════════════════════════════════════════════════════════
   15. HOW IT WORKS STEPS
═══════════════════════════════════════════════════════════════ */
[class*="Step"], [class*="step-"],
[class*="HowItWorks"] > div > div,
[class*="ProcessStep"] {
  text-align: center !important;
  padding: 24px !important;
}

[class*="Step"] [class*="number"],
[class*="HowItWorks"] [class*="num"],
[class*="StepNumber"] {
  background: var(--k-teal) !important;
  color: #ffffff !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  margin: 0 auto 16px !important;
  box-shadow: 0 6px 20px rgba(20,177,187,0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
   16. BACK TO TOP BUTTON
═══════════════════════════════════════════════════════════════ */
[class*="BackToTop"], [class*="backToTop"],
[class*="ScrollTop"], button[aria-label*="top"],
#back-to-top {
  background: var(--k-teal) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  width: 48px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 14px rgba(20,177,187,0.4) !important;
  transition: var(--k-ease) !important;
  cursor: pointer !important;
  border: none !important;
}

[class*="BackToTop"]:hover {
  background: var(--k-teal-dark) !important;
  transform: translateY(-3px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   17. COOKIE BANNER
═══════════════════════════════════════════════════════════════ */
[class*="Cookie"], [class*="cookie"],
[class*="CookieBanner"] {
  background: var(--k-navy) !important;
  color: rgba(255,255,255,0.85) !important;
  border-top: 2px solid var(--k-teal) !important;
  border-radius: 12px 12px 0 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   18. LEAD MAGNET BANNER
═══════════════════════════════════════════════════════════════ */
[class*="LeadMagnet"], [class*="leadMagnet"],
[class*="BannerBar"], [class*="StickyBanner"] {
  background: linear-gradient(90deg, var(--k-navy) 0%, var(--k-navy-mid) 100%) !important;
  border-top: 2px solid var(--k-gold) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   19. CHATBOT
═══════════════════════════════════════════════════════════════ */
[class*="chatbot"] [class*="header"],
[class*="Chatbot"] [class*="header"],
[class*="ChatHeader"] {
  background: var(--k-navy) !important;
  color: #ffffff !important;
  border-radius: 12px 12px 0 0 !important;
}

[class*="chatbot"] button[type="submit"],
[class*="Chatbot"] button[type="submit"] {
  background: var(--k-teal) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   20. MOBILE RESPONSIVE — 375px to 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --trust-bar-h: 30px;
    --navbar-h: 66px;
  }

  #alhambra-trust-bar {
    font-size: 0.68rem !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  #alhambra-trust-bar .trust-addr {
    display: none !important; /* hide on mobile, show only phone + hours */
  }

  header img, nav img, [class*="Navbar"] img {
    height: 50px !important;
  }

  #alhambra-video-hero,
  #alhambra-video-hero,
  #alhambra-video-hero {
    min-height: 75vh !important;
    margin-top: calc(var(--trust-bar-h) + var(--navbar-h)) !important;
  }

  #alhambra-video-hero h1,
  #alhambra-video-hero h1,
  .lcp-title {
    font-size: clamp(1.6rem, 7vw, 2.6rem) !important;
    padding: 0 12px !important;
  }

  #alhambra-video-hero p,
  #alhambra-video-hero p {
    font-size: 0.9rem !important;
    padding: 0 12px !important;
  }

  /* Hero buttons — full width on mobile */
  #alhambra-video-hero a,
  #alhambra-video-hero button,
  #alhambra-video-hero a,
  #alhambra-video-hero button {
    width: 100% !important;
    max-width: 320px !important;
    margin: 6px auto !important;
    display: flex !important;
    justify-content: center !important;
    padding: 14px 20px !important;
  }
}

@media (max-width: 480px) {
  #alhambra-trust-bar {
    font-size: 0.65rem !important;
    gap: 6px !important;
  }

  #alhambra-video-hero h1,
  .lcp-title {
    font-size: 1.6rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   21. TABLET — 769px to 1024px
═══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
  #alhambra-video-hero h1,
  #alhambra-video-hero h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   22. ACCESSIBILITY & PRINT
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--k-teal) !important;
  outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════
   23. SECTION LABEL — "SUNRISE BAIL BONDS ALHAMBRA"
═══════════════════════════════════════════════════════════════ */
[class*="ServicesSection"] > div > h2::before,
[class*="WhyChooseUs"] > div > h2::before,
[class*="ReviewsSection"] > div > h2::before,
[class*="FAQSection"] > div > h2::before,
[class*="ContactSection"] > div > h2::before {
  content: 'SUNRISE BAIL BONDS ALHAMBRA' !important;
  display: block !important;
  font-family: 'Lato', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.2em !important;
  color: var(--k-teal) !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════
   24. PREVENT OLD CSS BLEED
═══════════════════════════════════════════════════════════════ */
/* Ensure no white-on-white or invisible buttons anywhere */
button, [role="button"] {
  min-height: 36px !important;
}

/* Override any lingering transparent backgrounds on interactive elements */
#alhambra-video-hero button:not([class*="mute"]):not([class*="Mute"]):not([class*="play"]):not([class*="unmute"]) {
  background: linear-gradient(135deg, #e0a830 0%, #b8892a 100%) !important;
  color: #0d1b2a !important;
  -webkit-text-fill-color: #0d1b2a !important;
}

/* Video controls (mute/unmute) — keep them small, teal */
[class*="muteBtn"], [class*="MuteBtn"],
[class*="unmuteBtn"], [class*="videoControl"],
#alhambra-video-hero button[class*="mute"],
#alhambra-video-hero button[class*="unmute"] {
  background: rgba(13,27,42,0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(20,177,187,0.4) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}