/* ============================================================
   Patna RO Service — Brand Stylesheet (v3)
   Bold, image-led, mid-premium, high-conversion.
   ============================================================ */

:root {
  --ink: #0F172A;
  --blue: #1D5FE0;
  --blue-dark: #14428F;
  --blue-50: #EEF3FE;
  --orange: #FF7A1A;
  --orange-dark: #E4650A;
  --paper: #F7F8FA;
  --line: #E7EAF0;
}

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  width: 100%;
}

/* Prevent long words/URLs from forcing horizontal scroll on narrow screens */
h1, h2, h3, h4, p, a, span {
  overflow-wrap: break-word;
}

@media (max-width: 380px) {
  .stat-chip { padding: 0.55rem 0.7rem; }
}

/* Buttons */
.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(255, 122, 26, 0.55);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-primary:hover {
  background: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -6px rgba(255, 122, 26, 0.6);
}

.btn-secondary {
  background: #fff;
  color: var(--blue-dark);
  border: 2px solid var(--blue);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover {
  background: var(--blue);
  color: #fff;
}

.btn-white {
  background: #fff;
  color: var(--blue-dark);
  transition: transform 0.15s ease;
}
.btn-white:hover { transform: translateY(-2px); }

/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -18px rgba(15, 23, 42, 0.25);
}

/* Fade-up animation */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Badge */
.badge {
  background: var(--blue-50);
  color: var(--blue-dark);
}

.badge-orange {
  background: #FFEEE0;
  color: var(--orange-dark);
}

/* Hero panel */
.hero-panel {
  background: linear-gradient(180deg, #143B82 0%, #1D5FE0 100%);
}

/* Image frame accents */
.img-frame {
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
}

.stat-chip {
  background: #fff;
  box-shadow: 0 15px 30px -12px rgba(15, 23, 42, 0.2);
}

/* FAQ */
.faq-chevron { transition: transform 0.25s ease; }
.faq-open .faq-chevron { transform: rotate(180deg); }
.faq-item { border: 1px solid var(--line); border-radius: 0.9rem; background: #fff; }

/* Sticky mobile CTA */
.mobile-cta-bar { box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.12); }

/* Premium mobile nav menu */
.mobile-nav-link {
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link:active {
  color: var(--blue);
  padding-left: 0.25rem;
}
.mobile-nav-link:hover svg,
.mobile-nav-link:active svg {
  color: var(--blue);
  transform: translateX(2px);
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Form fields */
.field {
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 0.65rem;
}
.field:focus { outline: none; border-color: var(--blue); }
.field::placeholder { color: #9AA3B2; }

/* Loader dots */
.dot-loader span { animation: dot-blink 1.4s infinite both; }
.dot-loader span:nth-child(2) { animation-delay: 0.2s; }
.dot-loader span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* Pulse ring on primary phone CTA for urgency */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(255, 122, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
}
.pulse-cta { animation: pulse-ring 2.2s infinite; }

/* Marquee for service-area strip */
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track:hover { animation-play-state: paused; }
.marquee-track-reverse { animation-name: marquee-reverse; }
@keyframes marquee-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marquee-fade-left, .marquee-fade-right {
  position: absolute;
  top: 0; bottom: 0;
  width: 3rem;
  z-index: 1;
  pointer-events: none;
}
.marquee-fade-left { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.marquee-fade-right { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

/* Scrollbar */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 9999px; }

/* Star color */
.star { color: #FFB020; }

/* Review cards */
.review-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.review-card::before {
  content: "";
  position: absolute;
  top: 0; left: 1.25rem; right: 1.25rem;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, var(--blue), var(--orange));
  opacity: 0;
  transition: opacity 0.25s ease;
}
.review-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 22px 40px -20px rgba(15, 23, 42, 0.28);
}
.review-card:hover::before { opacity: 1; }
.quote-mark { pointer-events: none; }

/* Reels grid */
.reel-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.reel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -18px rgba(15, 23, 42, 0.35);
}
.reel-card video { background: #000; }

/* Booking modal — minimal, clean styling */
.booking-modal {
  box-shadow: 0 25px 50px -20px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05);
}

.minimal-btn { background: #fff; }

/* Underline-style inputs for a quiet, uncluttered form */
.minimal-field {
  border: none;
  border-bottom: 1.5px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  transition: border-color 0.2s ease;
  appearance: none;
}
.minimal-field:focus { outline: none; border-color: var(--ink); }
.minimal-field::placeholder { color: #B0B6C2; }

@keyframes success-fade {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.booking-modal .text-center > div:first-child {
  animation: success-fade 0.35s ease both;
}

/* Hide scrollbar for carousel tracks while keeping scroll functionality */
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}