/* ==========================================================================
   VAHAN RAKSHAK - Ultra-Premium Glassmorphism & Orange Design System
   Theme: Vibrant Flame Orange (#FF5500 / #FF6B00), Translucent Glass, Deep Charcoal
   NOTE: Google Fonts are loaded via <link> tags in base.html (non-blocking).
   DO NOT add @import here — it is render-blocking and causes page stall on mobile.
   ========================================================================== */


:root {
  /* Brand Orange Palette */
  --primary-orange: #FF5500;
  --primary-orange-light: #FF7733;
  --primary-orange-dark: #D94400;
  --orange-glow: #FF6B00;

  /* Translucent Glass Colors */
  --orange-glass-bg: rgba(255, 85, 0, 0.06);
  --orange-glass-card: rgba(255, 255, 255, 0.85);
  --orange-glass-border: rgba(255, 85, 0, 0.22);
  --orange-glass-hover: rgba(255, 85, 0, 0.12);

  /* Gradients */
  --grad-orange: linear-gradient(135deg, #FF6B00 0%, #FF2500 100%);
  --grad-orange-soft: linear-gradient(135deg, rgba(255, 107, 0, 0.14) 0%, rgba(255, 37, 0, 0.03) 100%);
  --grad-dark-glass: linear-gradient(135deg, rgba(17, 19, 24, 0.95) 0%, rgba(11, 13, 16, 0.98) 100%);

  /* Neutrals & Dark Theme */
  --dark-bg: #07080A;
  --dark-surface: #101216;
  --dark-card: #171A21;
  --dark-border: rgba(255, 255, 255, 0.08);

  --light-bg: #F8F9FC;
  --text-dark: #0B0E14;
  --text-muted: #64748B;
  --text-light: #F8FAFC;

  /* UI Tokens */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 9999px;

  /* Shadows & Glows */
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-orange-glow: 0 8px 30px rgba(255, 85, 0, 0.3), 0 0 20px rgba(255, 85, 0, 0.15);

  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  background-color: var(--light-bg);
  color: var(--text-dark);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip; /* clip (unlike hidden) keeps the sticky navbar working */
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, video, canvas, iframe {
  max-width: 100%;
}

img {
  height: auto;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

/* Container */
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
  background: var(--grad-orange);
  color: #FFFFFF;
  box-shadow: var(--shadow-orange-glow);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(255, 85, 0, 0.45);
}

.btn-orange-glass {
  background: var(--orange-glass-bg);
  border: 1px solid var(--orange-glass-border);
  color: var(--primary-orange);
  backdrop-filter: blur(10px);
}

.btn-orange-glass:hover {
  background: var(--orange-glass-hover);
  border-color: var(--primary-orange);
  transform: translateY(-2px);
}

.btn-dark {
  background-color: var(--dark-bg);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.btn-dark:hover {
  background-color: var(--dark-surface);
  border-color: var(--primary-orange);
  color: var(--primary-orange);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--text-dark);
  color: var(--text-dark);
}

.btn-outline:hover {
  background: var(--text-dark);
  color: #FFFFFF;
}

.btn-sm {
  padding: 9px 20px;
  font-size: 0.875rem;
}

.btn-lg {
  padding: 18px 38px;
  font-size: 1.1rem;
}

/* TOP ANNOUNCEMENT BAR */
.top-bar {
  background: var(--dark-bg);
  color: #FFFFFF;
  text-align: center;
  padding: 9px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 85, 0, 0.2);
}

.top-bar strong {
  color: var(--primary-orange);
}

/* HEADER & NAVBAR - PRISTINE ALIGNMENT */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(248, 249, 252, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 10px 0;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-dark);
  letter-spacing: -0.5px;
  flex-shrink: 0;
}

.brand-badge {
  background: var(--grad-orange);
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links a {
  font-weight: 600;
  font-size: 0.925rem;
  color: #334155;
  position: relative;
  padding: 4px 0;
}

.nav-links a:hover {
  color: var(--primary-orange);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--primary-orange);
  transition: width 0.25s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* HERO SECTION */
.hero-section {
  padding: 70px 0 80px;
  text-align: center;
  position: relative;
  overflow-x: clip;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 100%;
  height: 300px;
  background: radial-gradient(circle, rgba(255, 85, 0, 0.12) 0%, rgba(255, 85, 0, 0) 70%);
  z-index: -1;
  pointer-events: none;
}

.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange-glass-bg);
  border: 1px solid var(--orange-glass-border);
  color: var(--primary-orange);
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.hero-title {
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 900;
  color: var(--text-dark);
  margin-bottom: 20px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.06;
}

.hero-title span.orange-gradient-text {
  background: var(--grad-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto 50px;
  font-weight: 500;
}

/* STEP CARDS GRID (01, 02, 03, 04) - ORANGE GLASSMORPHISM */
.steps-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 22px;
  margin-bottom: 70px;
}

.step-card {
  background: var(--orange-glass-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: left;
  border: 1.5px solid rgba(255, 85, 0, 0.12);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.step-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary-orange);
  box-shadow: 0 16px 36px rgba(255, 85, 0, 0.15);
}

.step-card.dark-card {
  background: var(--grad-dark-glass);
  color: #FFFFFF;
  border-color: var(--orange-glass-border);
  box-shadow: var(--shadow-orange-glow);
}

.step-num {
  width: 48px;
  height: 48px;
  background: var(--grad-orange);
  color: #FFFFFF;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 900;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(255, 85, 0, 0.4);
}

.step-title {
  font-size: 1.15rem;
  font-weight: 800;
}

.step-desc {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.step-card.dark-card .step-desc {
  color: #94A3B8;
}

/* VEHICLE STICKER SHOWCASE SECTION */
.showcase-banner {
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 56px;
  border: 1.5px solid var(--orange-glass-border);
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
  box-shadow: var(--shadow-md);
  position: relative;
}

.showcase-text h2 {
  font-size: 2.3rem;
  margin-bottom: 16px;
}

.showcase-text p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 28px;
}

.sticker-mockup {
  position: relative;
  background: var(--dark-bg);
  border-radius: var(--radius-md);
  padding: 36px;
  border: 2px solid var(--primary-orange);
  box-shadow: var(--shadow-orange-glow);
  text-align: center;
}

.tag-visual {
  background: var(--grad-orange);
  color: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  display: inline-block;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.tag-visual img {
  width: 150px;
  height: 150px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: #FFFFFF;
  padding: 6px;
}

.tag-visual .tag-code {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 1.5px;
}

/* FEATURE TRIO CARDS */
.features-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 80px;
}

.feature-trio-card {
  background-color: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 36px 28px;
  text-align: center;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.feature-trio-card:hover {
  border-color: var(--primary-orange);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.feature-icon-wrapper {
  width: 60px;
  height: 60px;
  background: var(--orange-glass-bg);
  border: 1px solid var(--orange-glass-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  font-size: 1.6rem;
  color: var(--primary-orange);
}

.feature-trio-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.feature-trio-card p {
  font-size: 0.925rem;
  color: var(--text-muted);
}

/* CHECKLIST BOX */
.checklist-section {
  background: var(--grad-orange-soft);
  border: 2px dashed var(--primary-orange);
  border-radius: var(--radius-lg);
  padding: 56px;
  margin-bottom: 80px;
  text-align: center;
}

.checklist-section h2 {
  font-size: 2.2rem;
  margin-bottom: 28px;
}

.checklist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 48px;
  max-width: 740px;
  margin: 0 auto;
  text-align: left;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 1.05rem;
}

.check-item svg {
  color: var(--primary-orange);
  flex-shrink: 0;
}

/* STATS BANNER (DARK WITH ORANGE HIGHLIGHTS) */
.stats-banner {
  background-color: var(--dark-bg);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  margin-bottom: 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  border: 1px solid var(--dark-border);
}

.stats-info h2 {
  font-size: 2.5rem;
  margin-bottom: 18px;
  color: var(--primary-orange);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
}

.stat-item h3 {
  font-size: 3rem;
  color: #FFFFFF;
  font-weight: 900;
}

.stat-item p {
  color: #94A3B8;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ORANGE CTA BANNER */
.orange-cta-banner {
  background: var(--grad-orange);
  border-radius: var(--radius-lg);
  padding: 68px 36px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 80px;
  box-shadow: var(--shadow-orange-glow);
  position: relative;
  overflow: hidden;
}

.orange-cta-banner h2 {
  font-size: 2.6rem;
  margin-bottom: 14px;
}

.orange-cta-banner p {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 32px;
  opacity: 0.95;
}

/* FOOTER */
.site-footer {
  background-color: #060709;
  color: #94A3B8;
  padding: 64px 0 32px;
  font-size: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand h3 {
  color: #FFFFFF;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.footer-col h4 {
  color: #FFFFFF;
  font-size: 1rem;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col ul li a:hover {
  color: var(--primary-orange);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* SCAN PAGE STYLES */
.scan-wrapper {
  max-width: 560px;
  margin: 40px auto;
  background: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  border: 1.5px solid var(--orange-glass-border);
}

.scan-header {
  text-align: center;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 24px;
  margin-bottom: 24px;
}

.vehicle-badge {
  display: inline-block;
  background: var(--grad-orange);
  color: #FFFFFF;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3);
}

.masked-v-num {
  font-size: 2rem;
  font-family: var(--font-heading);
  font-weight: 900;
  letter-spacing: 2.5px;
}

.quick-reasons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.reason-btn {
  background: #F8FAFC;
  border: 1.5px solid #E2E8F0;
  padding: 14px 12px;
  border-radius: 12px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}

.reason-btn:hover, .reason-btn.active {
  background: var(--orange-glass-bg);
  border-color: var(--primary-orange);
  color: var(--primary-orange);
}

/* SHOP & PRICING STYLES */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 26px;
  margin: 40px 0;
}

.package-card {
  background: #FFFFFF;
  border-radius: var(--radius-md);
  padding: 36px 28px;
  border: 2px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s ease;
}

.package-card.highlight {
  border-color: var(--primary-orange);
  box-shadow: var(--shadow-orange-glow);
}

.package-badge {
  position: absolute;
  top: -14px;
  right: 24px;
  background: var(--grad-orange);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 10px rgba(255, 85, 0, 0.4);
}

.package-price {
  font-size: 2.6rem;
  font-family: var(--font-heading);
  font-weight: 900;
  margin: 16px 0;
}

.package-price span {
  font-size: 1.05rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* MOBILE NAVBAR TOGGLE & NAVIGATION OVERLAY */
.mobile-nav-toggle {
  display: none !important;
  background: transparent;
  border: none;
  color: var(--text-dark);
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.mobile-only-btn {
  display: none !important;
}

.desktop-only {
  display: flex !important;
}

/* RESPONSIVE MEDIA QUERIES FOR ALL DEVICES */

@media (max-width: 992px) {
  .mobile-nav-toggle {
    display: flex !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-only-btn {
    display: block !important;
    margin-top: 10px;
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 24px;
    gap: 16px;
    border-bottom: 1.5px solid var(--orange-glass-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 999;
  }

  .nav-links.active {
    display: flex !important;
    animation: fadeInDown 0.25s ease forwards;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 1.05rem;
  }


  .showcase-banner, .stats-banner {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 32px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 40px 0 50px;
  }

  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
    width: 100%;
  }

  .checklist-section {
    padding: 32px 20px;
  }

  .checklist-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .stats-banner {
    padding: 36px 20px;
  }

  .stats-info h2 {
    font-size: 1.8rem;
  }

  .stat-item h3 {
    font-size: 2.2rem;
  }

  .orange-cta-banner {
    padding: 40px 20px;
  }

  .orange-cta-banner h2 {
    font-size: 1.8rem;
  }

  .scan-wrapper {
    padding: 24px 18px;
    margin: 20px auto;
  }

  .quick-reasons-grid {
    grid-template-columns: 1fr;
  }

  .features-trio {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 50px;
  }

  .showcase-banner, .checklist-section, .stats-banner, .orange-cta-banner {
    margin-bottom: 50px;
  }

  .showcase-text h2, .checklist-section h2 {
    font-size: 1.7rem;
  }

  .tag-visual img {
    width: 130px;
    height: 130px;
  }

  .sticker-mockup {
    padding: 24px 16px;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

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

  .shop-grid > * {
    max-width: none;
    flex-basis: 100%;
  }

  .checkout-card-box {
    padding: 20px 16px !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 14px;
  }

  .top-bar {
    font-size: 0.78rem;
    padding: 6px 10px;
  }

  .brand-logo {
    font-size: 1.2rem;
  }

  .hero-tagline {
    font-size: 0.72rem;
    padding: 4px 12px;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   UI POLISH — consistent fonts, focus states, feedback and spacing
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(255, 85, 0, 0.18);
}

/* Form controls don't inherit the page font by default (they fall back to Arial) */
button,
input,
select,
textarea {
  font-family: inherit;
}

/* Footer stays at the bottom on short pages */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

body > .container {
  width: 100%;
}

/* Keyboard focus ring + input focus glow in brand orange */
:focus-visible {
  outline: 3px solid rgba(255, 85, 0, 0.45);
  outline-offset: 2px;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-orange) !important;
  box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.12);
}

input::placeholder,
textarea::placeholder {
  color: #94A3B8;
}

/* Buttons: pressed and disabled states */
.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Current page in the navbar */
.nav-links a.active {
  color: var(--primary-orange);
}

.nav-links a.active::after {
  width: 100%;
}

/* Data tables: readable rows with hover */
main table tbody tr {
  transition: background-color 0.15s ease;
}

main table tbody tr:hover {
  background-color: #FFF8F3;
}

main table td,
main table th {
  vertical-align: middle;
}

/* Shop: plans centered, so a lone last plan doesn't hug the left edge */
.shop-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.shop-grid > * {
  flex: 1 1 260px;
  max-width: 300px;
}

.package-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.package-card li {
  align-items: flex-start !important;
  line-height: 1.45;
}

.package-card li svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Employee order page: linked tags as a compact grid */
.linked-tags-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px !important;
}

.linked-tags-grid > * {
  padding: 14px 16px !important;
}

/* Thin, branded scrollbars inside scrolling panels */
.table-responsive,
[style*="overflow-x: auto"],
[style*="overflow-y: auto"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 85, 0, 0.35) transparent;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   RESPONSIVE LAYER — big screens, laptops, tablets, phones
   Most page layouts are written as inline styles in the templates, which
   normal media queries cannot beat. The rules below target those inline
   styles (attribute selectors + !important) or the hook classes added to
   the templates (admin-layout, dash-layout, emp-chat-*, validity-*, sos-grid).
   ========================================================================== */

/* Containers always keep side gutters, even when a page sets
   style="padding: 60px 0" on them */
.container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Sidebar layouts: the content column may shrink (tables scroll inside it) */
.admin-layout > *,
.dash-layout > * {
  min-width: 0;
}

/* ---------- Big screens (1600px+) ---------- */
@media (min-width: 1600px) {
  html {
    font-size: 106.25%;
  }

  .container {
    max-width: 1400px;
  }
}

@media (min-width: 2200px) {
  html {
    font-size: 118.75%;
  }

  .container {
    max-width: 1600px;
  }
}

/* ---------- Small laptops / landscape tablets (≤1200px) ---------- */
@media (max-width: 1200px) {
  .nav-links {
    gap: 20px;
  }
}

/* ---------- Tablets (≤992px) ---------- */
@media (max-width: 992px) {
  /* Sidebar + content page layouts become one column */
  .admin-layout,
  .dash-layout,
  [style*="grid-template-columns: 1.1fr 0.9fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Admin sidebar turns into a horizontal, swipeable tab bar */
  .admin-sidebar {
    position: static !important;
    padding: 16px !important;
  }

  .admin-nav-list {
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .admin-nav-list .admin-nav-btn {
    width: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Any grid child may shrink instead of pushing the page wider */
  [style*="display: grid"] > *,
  [style*="display:grid"] > * {
    min-width: 0;
  }

  /* Owner dashboard: tag list becomes a swipeable strip above the details */
  .dash-layout {
    gap: 24px !important;
  }

  .dash-layout > :first-child > [style*="flex-direction: column"] {
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
  }

  .dash-layout > :first-child > [style*="flex-direction: column"] > * {
    flex: 0 0 min(260px, 78%);
    scroll-snap-align: start;
  }
}

/* ---------- Phones, large (≤768px) ---------- */
@media (max-width: 768px) {
  .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Vertical page padding: 60px is too much on a phone */
  .container[style*="padding: 60px 0"],
  .container[style*="padding: 70px 0"],
  .container[style*="padding: 50px 0"],
  .container[style*="padding: 40px 0"] {
    padding-top: 28px !important;
    padding-bottom: 36px !important;
  }

  section.container[style*="margin-bottom: 80px"] {
    margin-bottom: 50px !important;
  }

  /* Two-column inline grids stack */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1.2fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  /* Checkout emergency contact rows: relation + phone side by side,
     remove button underneath */
  .emergency-contact-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .emergency-contact-row > :nth-child(n+3) {
    grid-column: 1 / -1;
  }

  /* Oversized inline headings */
  h1[style*="font-size"] {
    font-size: clamp(1.65rem, 7vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }

  h2[style*="font-size: 2"],
  h2[style*="font-size: 3"] {
    font-size: clamp(1.45rem, 6vw, 1.9rem) !important;
    line-height: 1.2 !important;
  }

  h3[style*="font-size: 1.7rem"],
  h3[style*="font-size: 1.8rem"],
  h3[style*="font-size: 2"] {
    font-size: 1.35rem !important;
  }

  [style*="font-size: 3.5rem"],
  [style*="font-size: 3.4rem"],
  [style*="font-size: 3.2rem"],
  [style*="font-size: 3rem"] {
    font-size: 2.4rem !important;
  }

  .masked-v-num {
    font-size: clamp(1.4rem, 7vw, 2rem) !important;
    letter-spacing: 1px !important;
  }

  /* Cards with desktop-sized inline padding */
  [style*="padding: 56px"],
  [style*="padding: 48px 36px"],
  [style*="padding: 44px"],
  [style*="padding: 40px;"],
  [style*="padding: 40px 32px"],
  [style*="padding: 36px;"],
  [style*="padding: 36px 28px"],
  [style*="padding:36px 40px"],
  [style*="padding: 32px;"] {
    padding: 24px 18px !important;
  }

  [style*="border-radius: 28px"],
  [style*="border-radius: var(--radius-lg)"] {
    border-radius: 20px !important;
  }

  /* Rows that put a label left and a value/button right may wrap */
  [style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* Wide dark banners (shop bulk-inquiry etc.) stack */
  [style*="display: flex"][style*="justify-content: space-between"][style*="padding: 44px"] {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 18px;
  }

  /* Flex inputs that demand 260px+ */
  [style*="min-width: 260px"],
  [style*="min-width:260px"] {
    min-width: 0 !important;
    flex-basis: 100% !important;
  }

  /* Flex inputs shrink to fit next to their button */
  [style*="display: flex"] > input,
  [style*="display:flex"] > input {
    min-width: 0;
  }

  /* Inputs at 16px stop iOS Safari zooming in on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Modals: never taller than the screen, content scrolls */
  [style*="position: fixed"][style*="inset: 0"] > div,
  [style*="position:fixed"][style*="inset:0"] > div {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Check validity: start → expiry dates */
  .validity-dates {
    gap: 10px !important;
  }

  /* Employee chat: thread list on top, conversation below */
  .emp-chat-tab {
    height: auto !important;
  }

  .emp-chat-shell {
    flex-direction: column;
    flex-wrap: nowrap !important;
    height: auto !important;
  }

  .emp-chat-list {
    width: 100% !important;
    max-height: 220px;
    border-right: none !important;
    border-bottom: 1.5px solid #E2E8F0;
  }

  .emp-chat-shell > :last-child {
    min-height: 480px;
  }

  .emp-chat-shell input[type="text"] {
    min-width: 0;
  }

  /* Wide tables scroll sideways instead of breaking the page */
  .table-responsive table {
    min-width: 560px;
  }
}

/* ---------- Phones (≤640px) ---------- */
@media (max-width: 640px) {
  .navbar {
    padding: 8px 0;
  }

  .brand-logo img {
    height: 44px !important;
  }

  /* Live chat widget: round icon button + near full-screen panel */
  #liveChatTrigger {
    bottom: 16px !important;
    right: 16px !important;
    padding: 14px !important;
  }

  #liveChatTrigger span:last-child {
    display: none;
  }

  #liveChatCard {
    left: 12px !important;
    right: 12px !important;
    bottom: 84px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100vh - 110px) !important;
    height: calc(100dvh - 110px) !important;
    max-height: 560px !important;
  }

  /* auto-fit grids with 200–260px columns go single column */
  [style*="minmax(220px, 1fr)"],
  [style*="minmax(260px, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="minmax(200px, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  .package-card {
    padding: 28px 22px;
  }

  .package-price {
    font-size: 2.2rem;
  }

  /* Validity dates stack with a downward arrow */
  .validity-dates {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .validity-arrow {
    transform: rotate(90deg);
    text-align: center;
    line-height: 1;
  }
}

/* ---------- Small phones (≤480px) ---------- */
@media (max-width: 480px) {
  .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .btn {
    white-space: normal;
    text-align: center;
  }

  /* Button rows / pagination wrap onto a second line when needed */
  [style*="display: flex"]:not([style*="flex-direction"]):not([style*="overflow"]):not([style*="nowrap"]) {
    flex-wrap: wrap;
  }

  .btn-sm {
    padding: 9px 16px;
  }

  .emergency-contact-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .stats-grid {
    gap: 18px;
  }

  .stat-item h3 {
    font-size: 1.9rem;
  }

  .step-card {
    padding: 22px;
  }

  .scan-wrapper {
    padding: 20px 14px;
  }

  /* Emergency SOS buttons: keep three across, shrink the labels */
  .sos-grid {
    gap: 6px !important;
  }

  .sos-grid a {
    padding: 8px 4px !important;
  }

  .sos-grid a span:first-child {
    font-size: 1rem !important;
  }

  .sos-grid a span:last-child {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    white-space: nowrap;
  }
}

/* ---------- Very small phones (≤360px) ---------- */
@media (max-width: 360px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .brand-logo img {
    height: 38px !important;
  }

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

  [style*="minmax(200px, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sos-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sos-grid a {
    flex-direction: row !important;
    justify-content: space-between;
    padding: 10px 12px !important;
  }
}

/* Touch screens: no sticky hover lift */
@media (hover: none) {
  .btn-primary:hover,
  .step-card:hover,
  .feature-trio-card:hover {
    transform: none;
  }
}

/* Menu items stay on one line (language switcher added to the header) */
.nav-links a { white-space: nowrap; }