/*
 * Mirai Global Auto – Hero Layout Override
 * Loads last to override any plugin/theme conflicts
 */

/* ══════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════ */

.hero {
  position: relative !important;
  background: #0c1b33 !important;
  min-height: 85vh !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.hero__bg {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
}

.hero::before {
  z-index: 1 !important;
}

.hero__pattern {
  z-index: 1 !important;
}

.hero__content {
  position: relative !important;
  z-index: 10 !important;
  padding: 60px 0 !important;
  width: 100% !important;
  display: block !important;
}

.hero .container {
  position: relative !important;
  z-index: 10 !important;
}

/* ── MOBILE FIRST: single column ── */
.hero__grid {
  display: block !important;
  width: 100% !important;
}

.hero__text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Hide the right image card on ALL screens below 1024px */
.hero__visual-col {
  display: none !important;
}

/* ── DESKTOP: two columns side by side ── */
@media screen and (min-width: 1024px) {

  .hero__grid {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero__text {
    flex: 0 0 55% !important;
    width: 55% !important;
    max-width: 55% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
  }

  .hero__visual-col {
    flex: 0 0 40% !important;
    width: 40% !important;
    max-width: 40% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .hero h1 {
    font-size: 2.6rem !important;
    line-height: 1.15 !important;
  }
}

/* ── Hero text styles ── */
.hero h1 {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
}

.hero h1 span {
  color: #ff6b87 !important;
}

.hero__sub {
  color: rgba(255,255,255,0.78) !important;
  font-size: 1rem !important;
  margin-bottom: 28px !important;
  line-height: 1.65 !important;
}

/* ── Hero badge ── */
.hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(225,29,72,0.15) !important;
  border: 1px solid rgba(225,29,72,0.4) !important;
  color: #ff6b87 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 20px !important;
  line-height: 1 !important;
}

/* ── Buttons ── */
.hero__btns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 32px !important;
}

a.btn-primary, .btn-primary {
  background-color: #e11d48 !important;
  border-color: #e11d48 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  border: 2px solid #e11d48 !important;
  cursor: pointer !important;
}

a.btn-primary:hover, .btn-primary:hover {
  background-color: #be123c !important;
  border-color: #be123c !important;
  color: #ffffff !important;
}

a.btn-outline, .btn-outline {
  background-color: transparent !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

a.btn-whatsapp, .btn-whatsapp {
  background-color: #25d366 !important;
  border-color: #25d366 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  line-height: 1 !important;
  border: 2px solid #25d366 !important;
}

a.btn-navy, .btn-navy {
  background-color: #0c1b33 !important;
  border-color: #0c1b33 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 24px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border: 2px solid #0c1b33 !important;
}

/* ── Trust items ── */
.hero__trust {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.hero__trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

.hero__trust-item svg {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  flex-shrink: 0 !important;
  display: block !important;
  color: #4ade80 !important;
}

/* ── Hero visual (right column image) ── */
.hero__visual {
  position: relative !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45) !important;
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  display: block !important;
}

.hero__visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.hero__visual-badge {
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  background: rgba(12,27,51,0.92) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 5 !important;
}

/* ── Mobile button stacking ── */
@media screen and (max-width: 600px) {
  .hero__btns {
    flex-direction: column !important;
  }
  .hero__btns .btn,
  .hero__btns a {
    width: 100% !important;
    justify-content: center !important;
  }
  .hero__trust {
    grid-template-columns: 1fr !important;
  }
  .hero h1 {
    font-size: 1.8rem !important;
  }
}

/* ── WhatsApp float ── */
.whatsapp-float {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  z-index: 9999 !important;
  width: 56px !important;
  height: 56px !important;
  background: #25d366 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(37,211,102,0.5) !important;
  text-decoration: none !important;
}

.whatsapp-float svg {
  width: 28px !important;
  height: 28px !important;
  display: block !important;
  color: white !important;
}

/* ══ NUCLEAR FIX: Hide the floating image card on all non-desktop screens ══ */
/* The visual badge card was escaping its container and overlapping text */

@media screen and (max-width: 1023px) {
  .hero__visual-col,
  .hero__visual,
  .hero__visual img,
  .hero__visual-badge,
  .hero__visual-badge-icon,
  .hero__visual-badge-text {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
}

/* ══ HEADER FIXES ══ */

/* Make top bar more visible */
.top-bar {
  background: #0a1628 !important;
  padding: 10px 0 !important;
  font-size: 0.83rem !important;
}

.top-bar__tagline {
  color: rgba(255,255,255,0.75) !important;
  font-weight: 500 !important;
}

.top-bar__contacts a {
  color: rgba(255,255,255,0.9) !important;
  font-weight: 500 !important;
}

/* Header white background, strong shadow */
.site-header {
  background: #ffffff !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* Logo name - bold and navy */
.site-logo__name {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #0c1b33 !important;
  letter-spacing: 0.01em !important;
}

.site-logo__sub {
  font-size: 0.66rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Nav links - dark and readable */
.main-nav a {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.main-nav a:hover {
  color: #e11d48 !important;
  background: rgba(225,29,72,0.06) !important;
}

/* Contact nav item as red button */
.main-nav a.nav-cta,
.main-nav a:last-child {
  background: #e11d48 !important;
  color: #ffffff !important;
  padding: 9px 18px !important;
  border-radius: 8px !important;
}

.main-nav a.nav-cta:hover,
.main-nav a:last-child:hover {
  background: #be123c !important;
  color: #ffffff !important;
}

/* Hamburger - visible on mobile */
.hamburger span {
  background: #0c1b33 !important;
}

/* Mobile nav - clean white dropdown */
.mobile-nav {
  background: #ffffff !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
}

.mobile-nav a {
  color: #0f172a !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 15px 24px !important;
}

.mobile-nav a:hover {
  color: #e11d48 !important;
  background: rgba(225,29,72,0.04) !important;
}

/* ══ SECTION TITLE EYEBROW LABELS ══ */
.eyebrow {
  display: inline-block !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #e11d48 !important;
  background: rgba(225,29,72,0.08) !important;
  padding: 4px 14px !important;
  border-radius: 100px !important;
  margin-bottom: 14px !important;
}

/* ══ CATEGORY CARDS — make Ask for Price button red ══ */
.category-card .btn-primary,
.category-card a.btn-primary {
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
}

/* ══ FOOTER — ensure it looks complete ══ */
.site-footer {
  background: #0c1b33 !important;
}

.footer__col h4 {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 16px !important;
}

.footer__col a {
  color: rgba(255,255,255,0.65) !important;
  font-size: 0.88rem !important;
  text-decoration: none !important;
}

.footer__col a:hover {
  color: #ffffff !important;
}

.footer__copy {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.4) !important;
}

/* ══ PROCESS STEP NUMBERS ══ */
.step-card__num {
  background: #0c1b33 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 0 0 2px #123d7a !important;
}

/* ══ CONTACT CTA SECTION ══ */
.contact-cta {
  background: linear-gradient(135deg, #0c1b33 0%, #123d7a 100%) !important;
}

.contact-cta h2 {
  color: #ffffff !important;
}

.contact-cta p {
  color: rgba(255,255,255,0.75) !important;
}