/* Eziza brand additions on top of the recolored Front theme (theme.minc619.css).
   The theme's own --primary/--dark were already repointed to our purple/navy
   in theme.min.css + theme.minc619.css; this file only adds what the theme
   has no equivalent for (gold accent) plus a couple of layout helpers. */

:root {
  --eziza-navy: #0D0D3E;
  --eziza-purple: #6C3483;
  --eziza-purple-dark: #4A1480;
  --eziza-gold: #E8A838;
  --eziza-teal: #00C3E3;
  --eziza-surface: #F8F6FF;
  --eziza-border: #EDE7F6;
}

.bg-gold { background-color: var(--eziza-gold) !important; }
.text-gold { color: var(--eziza-gold) !important; }
.text-teal { color: var(--eziza-teal) !important; }
.bg-eziza-surface { background-color: var(--eziza-surface) !important; }
.border-eziza { border-color: var(--eziza-border) !important; }

.btn-gold {
  color: var(--eziza-navy);
  background-color: var(--eziza-gold);
  border-color: var(--eziza-gold);
  font-weight: 600;
}
.btn-gold:hover,
.btn-gold:focus {
  color: var(--eziza-navy);
  background-color: #d6952c;
  border-color: #d6952c;
}

.bg-eziza-gradient {
  background-image: linear-gradient(135deg, var(--eziza-navy) 0%, #2A1550 55%, var(--eziza-purple-dark) 100%);
}

.bg-eziza-gradient-purple {
  background-image: linear-gradient(135deg, var(--eziza-purple) 0%, var(--eziza-purple-dark) 100%);
}

/* Mobile hero background -- matches the background baked into
   hero-mobile-card.jpg's own pixels (sampled ~#1d0f54) so the photo
   card's edges blend into the section instead of showing a seam. */
.bg-eziza-hero-mobile {
  background-color: #1D0F54;
}

/* Step connector line used on the How It Works section, drawn as a plain
   element rather than a background image so it scales with the row. */
.step-connector {
  flex: 1 1 40px;
  height: 2px;
  background-color: var(--eziza-border);
  align-self: center;
  margin: 0 .5rem;
  min-width: 24px;
}
@media (max-width: 767.98px) {
  .step-connector { display: none; }
}

/* FAQ accordion chevron rotation (native Bootstrap collapse handles the rest) */
.eziza-faq-toggle .eziza-faq-icon { transition: transform .2s ease; }
.eziza-faq-toggle[aria-expanded="true"] .eziza-faq-icon { transform: rotate(45deg); }

.eziza-code-block {
  background: #0D0D3E;
  color: #E7EAF3;
  border-radius: .75rem;
  padding: 1.25rem 1.5rem;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .85rem;
  line-height: 1.6;
  overflow-x: auto;
}
.eziza-code-block .tok-key { color: #9FD6FF; }
.eziza-code-block .tok-str { color: #E8A838; }
.eziza-code-block .tok-com { color: #8C98A4; }

/* Photo-backed feature cards (Articles Section) -- background-image is set
   per card inline (a gradient scrim + the photo), this just handles sizing. */
.card-bg-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* App Store / Google Play badge buttons (download section) */
.btn-store {
  display: inline-flex;
  align-items: center;
  background-color: #000;
  color: #fff;
  border-radius: .5rem;
  padding: .6rem 1.1rem;
  text-align: left;
}
.btn-store:hover,
.btn-store:focus {
  background-color: #1a1a1a;
  color: #fff;
}
.btn-store i { font-size: 1.9rem; margin-right: .75rem; }
.btn-store .btn-store-eyebrow { display: block; font-size: .65rem; line-height: 1; letter-spacing: .02em; }
.btn-store .btn-store-name { display: block; font-size: 1.05rem; line-height: 1.25; font-weight: 600; }

/* Hero slider -- plain display-swap + CSS fade-in, no plugin (see
   js-hero-slider in eziza-init.js). Only one .hero-slide is ever
   display:block at a time, so there's no absolute-positioning/height
   math to get wrong the way the old slick carousel did. */
.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroSlideFadeIn .5s ease; }
@keyframes heroSlideFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-slide-dots { display: flex; justify-content: center; gap: .5rem; }
.hero-slide-dots-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  z-index: 2;
}
.hero-slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .35);
  cursor: pointer;
}
.hero-slide-dot.active { background-color: #fff; }
.hero-slide-dot:focus { outline: 2px solid var(--eziza-teal); outline-offset: 2px; }