/* Shiv & Shakti Solar Solutions — Luxury 3D Product Showcase & Brand Styling */
:root {
  --primary: #0F2C59;
  --primary-light: #1E3A8A;
  --accent: #F59E0B;
  --accent-hover: #D97706;
  --eco: #10B981;
  --eco-dark: #059669;
  --bg-slate: #F8FAFC;
  --surface: #FFFFFF;
  --border: #E2E8F0;
  --text-dark: #0F172A;
  --text-muted: #64748B;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-slate);
  color: var(--text-dark);
  scroll-behavior: smooth;
  overflow-x: hidden;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Gradient Utilities */
.bg-gradient-hero {
  background: linear-gradient(135deg, #0A1E3F 0%, #0F2C59 60%, #163B75 100%);
}

.bg-gradient-sun {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
}

.text-gradient-sun {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #38BDF8 0%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-eco {
  background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
}

.shadow-soft {
  box-shadow: 0 4px 20px -2px rgba(15, 44, 89, 0.08);
}

.shadow-elevated {
  box-shadow: 0 12px 30px -4px rgba(15, 44, 89, 0.15);
}

.shadow-glow {
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.35);
}

/* Luxury 3D Backdrop Typography (Inspired by Reference Video) */
.luxury-watermark {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(3.5rem, 14vw, 14rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.04);
  user-select: none;
  pointer-events: none;
}

.dark .luxury-watermark, [data-theme="dark"] .luxury-watermark {
  color: rgba(255, 255, 255, 0.035);
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-dark {
  background: rgba(11, 21, 40, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scroll-Stage Sticky Framework */
.sticky-viewport-container {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Callout Line & Dots */
.layer-annotation-badge {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.layer-annotation-badge::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: rgba(245, 158, 11, 0.5);
}

.layer-annotation-badge.left::after {
  right: -40px;
}

.layer-annotation-badge.right::after {
  left: -40px;
}

/* Range Slider Custom Styling */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 4px;
  background: #E2E8F0;
  outline: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #F59E0B;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  border: 3px solid #FFFFFF;
}

/* SLA Pulse */
@keyframes sla-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-sla-pulse {
  animation: sla-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Leaflet Custom Radar & Office Pins */
.custom-office-pin,
.custom-hq-radar-pin,
.custom-staff-radar-pin {
  background: transparent !important;
  border: none !important;
}

/* Printable Official Quotation Format (Strict A4 Page Fit & Custom Selection) */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    overflow: visible !important;
  }
  
  /* Universal hide for all page chrome, background views, and toolbars */
  #app-root,
  header,
  footer,
  nav,
  .no-print,
  #quotation-ui-toolbar,
  #quotation-ui-toolbar *,
  button,
  .btn,
  #official-print-mount {
    display: none !important;
  }

  /* Reset all modal containers so the pure quotation renders seamlessly */
  #modals-root,
  #quotation-modal-overlay,
  #quotation-modal-overlay > div,
  #quotation-component-root,
  #quotation-preview-wrapper,
  #quotation-printable-document {
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #quotation-pure-container {
    display: block !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
  }

  .quotation-pure-sheet,
  .quotation-page-1 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }

  .quotation-page-2 {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    background: #ffffff !important;
    page-break-before: always !important;
    break-before: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .print-hide {
    display: none !important;
  }
}

/* ==========================================================================
   Universal Device Access & Mobile Phone Viewport Enhancements
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

/* Hide scrollbars for slick horizontal navigation bars on phones */
.scrollbar-none::-webkit-scrollbar {
  display: none;
}
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* iOS input auto-zoom prevention */
@media (max-width: 640px) {
  input, select, textarea {
    font-size: 16px !important;
  }
  
  /* Mobile padding and touch adjustments */
  .mobile-tap-target {
    min-height: 44px;
  }
}

/* Smooth modal scaling on mobile */
.modal-overlay-responsive {
  padding: env(safe-area-inset-top, 8px) env(safe-area-inset-right, 8px) env(safe-area-inset-bottom, 8px) env(safe-area-inset-left, 8px);
}

/* Universal Modal Responsiveness & Centering (Mobile, Tablet, Desktop) */
#auth-modal-overlay,
#google-account-modal,
#lead-modal,
#quote-modal {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.75rem !important;
}

#auth-modal-overlay.hidden,
#google-account-modal.hidden,
#lead-modal.hidden,
#quote-modal.hidden {
  display: none !important;
}

#auth-modal-overlay > div,
#google-account-modal > div,
#lead-modal > div,
#quote-modal > div {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: min(92vw, 32rem) !important;
  min-width: 0 !important;
  margin: auto !important;
  overflow-x: hidden !important;
}

@media (max-width: 640px) {
  #auth-modal-overlay > div,
  #google-account-modal > div {
    max-width: calc(100vw - 1.25rem) !important;
    padding: 1.25rem 1rem !important;
    border-radius: 1.5rem !important;
  }
}