/* ====================================================================
   VipRix — site-wide responsive polish.
   Layered AFTER all page-specific stylesheets so it can adjust mobile
   layout without touching the page CSS files.
   ==================================================================== */

/* ==== Tablet breakpoint ==== */
@media (max-width: 991px) {
  .viprix-top-bar { padding: 0 1rem !important; }
  .viprix-top-bar .top-bar-home { font-size: 0.9rem; padding: 5px 14px; }

  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  .sidebar { transform: translateX(-100%); transition: transform .3s ease; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0 !important; padding: 1rem !important; }

  .stats-row { grid-template-columns: repeat(2, 1fr) !important; }

  .sidebar-logo .logo-text { display: none; }
  .sidebar-logo .logo-slogan { display: none; }

  /* Logo — tablet sizing */
  .header .logo-icon { width: 42px !important; height: 42px !important; }
  .header .logo-text { font-size: 1.05rem !important; }
  .header .logo-slogan { font-size: 0.5rem !important; }
}

/* ==== Mobile breakpoint ==== */
@media (max-width: 767px) {
  .viprix-top-bar { height: 52px; padding: 0 .8rem !important; }
  .viprix-top-bar .top-bar-home { font-size: 0.85rem; padding: 4px 12px; }
  body { padding-top: 52px !important; }

  .header .container { flex-wrap: nowrap; overflow: hidden; }
  .nav-links {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 78% !important;
    max-width: 320px !important;
    height: 100vh !important;
    flex-direction: column !important;
    gap: 14px !important;
    z-index: 9999 !important;
  }
  .nav-links.open { right: 0 !important; }
  .nav-links a { font-size: .8rem !important; }

  .hero { min-height: auto !important; padding-top: 100px !important; padding-bottom: 60px !important; }
  .hero-title { font-size: clamp(1.7rem, 7vw, 2.4rem) !important; }
  .hero-description { font-size: .95rem !important; }
  .hero-buttons { flex-direction: column; gap: 10px; }
  .hero-buttons .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 16px !important; }
  .hero-visual { display: none !important; }

  /* Hero video section — mobile */
  .hero-video { min-height: 85vh !important; min-height: 85dvh !important; }
  .hero-video-content { padding: 0 20px !important; }
  .hero-video-content .hero-title {
    font-size: clamp(1.6rem, 7vw, 2.4rem) !important;
    max-width: 100% !important;
    color: #FAFAFA !important;
    -webkit-text-fill-color: #FAFAFA !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    opacity: 1 !important;
    animation: none !important;
  }
  .hero-video-content .hero-title .highlight {
    color: #00d4ff !important;
    -webkit-text-fill-color: #00d4ff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
  .hero-video-content .hero-description {
    font-size: 0.95rem !important;
    max-width: 100% !important;
  }
  .hero-video-content .hero-buttons {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .hero-video-content .hero-buttons .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  .section-subtitle { font-size: .92rem !important; }

  .services-slider { padding: 24px 0 !important; gap: 24px !important; }
  .slider-text-wrap { padding: 0 16px !important; }

  .why-us-content,
  .testimonials-grid,
  .contact-content { grid-template-columns: 1fr !important; gap: 24px !important; }

  /* Coverflow — mobile */
  .coverflow { height: 360px !important; perspective: 900px !important; }
  .coverflow-slide { width: 300px !important; }
  .coverflow-btn { width: 40px !important; height: 40px !important; font-size: 0.85rem !important; }
  .coverflow-prev { left: 6px !important; }
  .coverflow-next { right: 6px !important; }
  .coverflow-slide[data-pos="-2"],
  .coverflow-slide[data-pos="2"] { opacity: 0 !important; pointer-events: none !important; }
  .coverflow-info h3 { font-size: 1.05rem !important; }
  .coverflow-info p { font-size: 0.8rem !important; }
  .coverflow-dots { margin-top: 24px !important; }

  .contact-info-list { gap: 14px !important; }

  .stats-row { grid-template-columns: 1fr !important; }

  .auth-container { padding: 1rem !important; }
  .auth-card { padding: 1.5rem !important; }
  .auth-form h2 { font-size: 1.3rem !important; }
  .field-row { grid-template-columns: 1fr !important; }
  .auth-tabs { flex-direction: row; }
  .auth-logo span { font-size: 1.1rem !important; }

  .table-wrap, .quotes-table, .data-table, table.responsive {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  .topbar, .topbar-main { flex-wrap: wrap; gap: 10px; padding: .8rem 1rem !important; }

  .footer-bottom-links { gap: 14px; flex-wrap: wrap; justify-content: center; }

  /* Logo — mobile sizing */
  .header .logo { gap: 8px !important; }
  .header .logo-icon { width: 36px !important; height: 36px !important; }
  .header .logo-text { font-size: 0.95rem !important; }
  .header .logo-slogan { font-size: 0.45rem !important; letter-spacing: 0.08em !important; }

  /* Auth / login / portal logo — mobile */
  .auth-logo .logo-icon { width: 44px !important; height: 44px !important; }
  .auth-logo .logo-text { font-size: 1.1rem !important; }
  .auth-logo .logo-slogan { font-size: 0.48rem !important; }
  .login-logo { flex-wrap: wrap; justify-content: center; gap: 8px !important; }
  .login-logo .logo-icon { width: 80px !important; height: 60px !important; }
  .login-logo .logo-text { font-size: 1.1rem !important; }
  .login-logo .logo-brand { text-align: center; }
  .topbar-left .logo-icon { width: 36px !important; height: 36px !important; }
  .topbar-left .logo-text { font-size: 0.95rem !important; }
  .topbar-left .logo-slogan { font-size: 0.42rem !important; }
}

/* ==== Small mobile ==== */
@media (max-width: 480px) {
  .viprix-top-bar .top-bar-home { font-size: .8rem; padding: 4px 10px; }
  .nav-cta { padding: .5rem .9rem !important; font-size: .8rem !important; }
  .nav-links a { font-size: .75rem !important; }
  .hero-stat-number { font-size: 1.5rem !important; }

  .auth-card { padding: 1.2rem !important; border-radius: 16px !important; }
  .btn-submit { padding: .8rem !important; font-size: .9rem !important; }

  .mobile-toggle { width: 38px; height: 38px; }

  /* Logo — small mobile sizing */
  .header .logo { gap: 6px !important; }
  .header .logo-icon { width: 32px !important; height: 32px !important; }
  .header .logo-text { font-size: 0.85rem !important; }
  .header .logo-slogan { font-size: 0.4rem !important; letter-spacing: 0.06em !important; }

  .login-logo .logo-icon { width: 70px !important; height: 52px !important; }
  .login-logo .logo-text { font-size: 1rem !important; }
  .login-logo .logo-slogan { font-size: 0.42rem !important; }

  .auth-logo .logo-icon { width: 38px !important; height: 38px !important; }
  .auth-logo .logo-text { font-size: 1rem !important; }
  .auth-logo .logo-slogan { font-size: 0.42rem !important; }

  .topbar-left .logo-icon { width: 32px !important; height: 32px !important; }
  .topbar-left .logo-text { font-size: 0.85rem !important; }
  .topbar-left .logo-slogan { font-size: 0.38rem !important; }

  .sidebar-logo .logo-icon { width: 50px !important; height: 38px !important; }

  /* Hero video — small mobile */
  .hero-video-content .hero-title {
    font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
  }
  .hero-video-content .hero-description {
    font-size: 0.88rem !important;
  }

  /* Coverflow — small mobile */
  .coverflow { height: 300px !important; }
  .coverflow-slide { width: 250px !important; }
  .coverflow-slide[data-pos="-1"],
  .coverflow-slide[data-pos="1"] {
    transform: translate(-50%, -50%) translateX(-60%) rotateY(35deg) translateZ(-80px) scale(0.75) !important;
    opacity: 0.4 !important;
  }
  .coverflow-slide[data-pos="1"] {
    transform: translate(-50%, -50%) translateX(60%) rotateY(-35deg) translateZ(-80px) scale(0.75) !important;
  }
  .coverflow-info { padding: 18px 16px 16px !important; }
  .coverflow-info h3 { font-size: 0.95rem !important; }
  .coverflow-info p { font-size: 0.75rem !important; }
  .coverflow-tag { font-size: 0.6rem !important; padding: 3px 9px !important; }
}

/* ==== Touch-friendly ==== */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a.btn, .nav-item, .nav-links a, .auth-tab { min-height: 40px; }
}

/* ==== Image safety ==== */
img { max-width: 100%; height: auto; }

/* ==== 3D Bold + Cyan Frame — section titles & key headings ==== */
/* Dark mode: White text */
.section-title,
.contact-info h3,
.auth-form h2 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  -webkit-text-stroke: 1px #0ef !important;
  font-weight: 900 !important;
  text-shadow:
    0 1px 0 rgba(0, 238, 255, 0.4),
    0 2px 0 rgba(0, 180, 200, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.5) !important;
}
.section-title i,
.contact-info h3 i,
.auth-form h2 i {
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: inherit !important;
}
/* Light mode: Dark Navy text */
html:not([data-theme="dark"]) .section-title,
html:not([data-theme="dark"]) .contact-info h3,
html:not([data-theme="dark"]) .auth-form h2 {
  color: #1a2744 !important;
  -webkit-text-fill-color: #1a2744 !important;
  -webkit-text-stroke: 1px #0ef !important;
  font-weight: 900 !important;
  text-shadow:
    0 1px 0 rgba(0, 238, 255, 0.3),
    0 2px 0 rgba(0, 180, 200, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15) !important;
}
html:not([data-theme="dark"]) .section-title i,
html:not([data-theme="dark"]) .contact-info h3 i {
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: #1a2744 !important;
}
.auth-form h2 {
  text-align: center !important;
}

/* =====================================================================
   Page background — dark-first design. Both modes use solid bg.
   ===================================================================== */
html, body {
  background: var(--bg, #0d0d1a) !important;
  background-image: none !important;
  overflow-x: hidden !important;
}
html[data-theme="dark"], html[data-theme="dark"] body {
  background: #0d0d1a !important;
  background-image: none !important;
}
html:not([data-theme="dark"]), html:not([data-theme="dark"]) body {
  background: #FAFAF8 !important;
  background-image: none !important;
}
body::before, body::after, html::before, html::after {
  display: none !important; content: none !important;
}
.hero-orb, .hero-grid-bg { display: none !important; }
#login-screen { background: transparent !important; }

/* Fire footer push to bottom */
body { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 0 !important; }
body > .viprix-fire-wrap { margin-top: auto !important; margin-bottom: 0 !important; }
body > .viprix-fire-wrap.viprix-fire-empty { margin-top: auto !important; }

.auth-container,
#login-screen,
.legal-container,
body > .card,
body > .login-card { margin-bottom: 2rem !important; padding-bottom: 0 !important; }
body:has(> .auth-container) { padding-bottom: 0 !important; }
body:has(> .auth-container) > .auth-container { margin: auto auto 2rem !important; }
body:has(> .legal-container) > .legal-container { margin: auto auto 2rem !important; }
.viprix-fire-wrap { padding-top: 0 !important; }
.contact-form-wrap { margin-bottom: 0 !important; }
.viprix-fire-wrap, .viprix-fire-wrap > footer, .viprix-fire-wrap .footer-bottom {
  margin-bottom: 0 !important; padding-bottom: 0 !important;
}
.viprix-fire-wrap > footer { padding-bottom: 0 !important; }
html, body { margin-bottom: 0 !important; }

/* ==== Header/top-bar — ALWAYS black bg, cyan-navy gradient text, unaffected by theme ==== */
.header,
.header.scrolled,
.viprix-top-bar,
html:not([data-theme="dark"]) .header,
html:not([data-theme="dark"]) .header.scrolled,
html:not([data-theme="dark"]) .viprix-top-bar {
  background: #000000 !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid rgba(0, 238, 255, 0.1) !important;
}
/* Logo text — 3D + Cyan Frame everywhere */
/* Dark mode: White */
.logo-text,
.header .logo-text,
.sidebar-logo .logo-text,
.login-logo .logo-text,
.topbar-left .logo-text,
.auth-logo .logo-text {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  letter-spacing: 0.02em !important;
  -webkit-text-stroke: 1px #0ef !important;
  text-shadow:
    0 1px 0 rgba(0, 238, 255, 0.4),
    0 2px 0 rgba(0, 180, 200, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.5) !important;
}
/* Light mode: Dark Navy (except header which stays on black bg) */
html:not([data-theme="dark"]) .auth-logo .logo-text,
html:not([data-theme="dark"]) .login-logo .logo-text,
html:not([data-theme="dark"]) .topbar-left .logo-text,
html:not([data-theme="dark"]) .sidebar-logo .logo-text {
  color: #1a2744 !important;
  -webkit-text-fill-color: #1a2744 !important;
  -webkit-text-stroke: 1px #0ef !important;
  text-shadow:
    0 1px 0 rgba(0, 238, 255, 0.3),
    0 2px 0 rgba(0, 180, 200, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15) !important;
}
/* Logo slogan — clean, no 3D stroke — just cyan accent */
.logo-slogan,
.header .logo-slogan,
.sidebar-logo .logo-slogan,
.login-logo .logo-slogan,
.topbar-left .logo-slogan,
.auth-logo .logo-slogan {
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: #0ef !important;
  color: #0ef !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
html:not([data-theme="dark"]) .auth-logo .logo-slogan,
html:not([data-theme="dark"]) .login-logo .logo-slogan,
html:not([data-theme="dark"]) .topbar-left .logo-slogan,
html:not([data-theme="dark"]) .sidebar-logo .logo-slogan {
  -webkit-text-fill-color: #0090a8 !important;
  color: #0090a8 !important;
}

/* Logo icon — remove border-radius clipping */
.logo-icon {
  border-radius: 0 !important;
  overflow: visible !important;
}
.logo-icon img {
  border-radius: 0 !important;
}

/* Header logo stays white (black bg) */
html:not([data-theme="dark"]) .header .logo-text {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-stroke: 1px #0ef !important;
  text-shadow:
    0 1px 0 rgba(0, 238, 255, 0.4),
    0 2px 0 rgba(0, 180, 200, 0.3),
    0 3px 6px rgba(0, 0, 0, 0.5) !important;
}
.header .nav-links a:not(.nav-cta),
html:not([data-theme="dark"]) .header .nav-links a:not(.nav-cta) {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 700 !important;
}
.header .nav-links a:not(.nav-cta):hover,
.header .nav-links a:not(.nav-cta).active,
html:not([data-theme="dark"]) .header .nav-links a:not(.nav-cta):hover,
html:not([data-theme="dark"]) .header .nav-links a:not(.nav-cta).active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}
/* Nav CTA button — same as Send Message: transparent bg, cyan border, white text */
.header .nav-links a.nav-cta,
html:not([data-theme="dark"]) .header .nav-links a.nav-cta {
  background: transparent !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: 1.5px solid var(--accent, #00d4ff) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.header .nav-links a.nav-cta:hover,
html:not([data-theme="dark"]) .header .nav-links a.nav-cta:hover {
  -webkit-text-fill-color: var(--accent, #00d4ff) !important;
  color: var(--accent, #00d4ff) !important;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.12) !important;
}
.viprix-top-bar .top-bar-home,
html:not([data-theme="dark"]) .viprix-top-bar .top-bar-home {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  font-weight: 700 !important;
}
.mobile-toggle span,
html:not([data-theme="dark"]) .mobile-toggle span { background: #0ef !important; }

/* Mobile menu drawer — always black */
@media (max-width: 768px) {
  .header .nav-links,
  .nav-links,
  html:not([data-theme="dark"]) .header .nav-links,
  html:not([data-theme="dark"]) .nav-links {
    background: #000000 !important;
    border-left: 1px solid rgba(0, 238, 255, 0.1) !important;
  }
  .header .nav-links a:not(.nav-cta),
  .nav-links a:not(.nav-cta),
  html:not([data-theme="dark"]) .header .nav-links a:not(.nav-cta),
  html:not([data-theme="dark"]) .nav-links a:not(.nav-cta) {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    font-weight: 700 !important;
  }
  .header .nav-links a:not(.nav-cta):hover,
  .nav-links a:not(.nav-cta):hover,
  html:not([data-theme="dark"]) .header .nav-links a:not(.nav-cta):hover,
  html:not([data-theme="dark"]) .nav-links a:not(.nav-cta):hover {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
  .header .nav-links a.nav-cta,
  .nav-links a.nav-cta,
  html:not([data-theme="dark"]) .header .nav-links a.nav-cta,
  html:not([data-theme="dark"]) .nav-links a.nav-cta {
    background: transparent !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
    border: 1.5px solid var(--accent, #00d4ff) !important;
    border-radius: 10px !important;
  }
}