/* ==========================================================================
   FASTONLINESERVICES.IN - Light theme (lite.css)
   Loaded last on every page. Minimal look: light grey background, white
   cards with a hairline border, one blue accent. It mostly re-points the
   colour variables of the older layers and switches off their effects
   (aurora, glass blur, sheen), so every page follows without markup changes.
   ========================================================================== */

:root,
html[data-theme="light"] {
  --sk-bg: #f6f7f9;
  --sk-card: #ffffff;
  --sk-ink: #111827;
  --sk-ink-2: #374151;
  --sk-muted: #6b7280;
  --sk-faint: #9ca3af;
  --sk-line: #e5e7eb;
  --sk-blue: #1d4ed8;
  --sk-blue-600: #1e40af;
  --sk-blue-50: #eff4ff;
  --sk-btn: #1d4ed8;
  --sk-shadow: none;
  --sk-shadow-lg: 0 4px 14px -6px rgba(17, 24, 39, .12);

  /* older layers */
  --rd-ink: var(--sk-ink); --rd-ink-2: var(--sk-ink-2); --rd-muted: var(--sk-muted); --rd-faint: var(--sk-faint);
  --rd-line: var(--sk-line); --rd-bg: var(--sk-bg); --rd-card: var(--sk-card);
  --rd-blue: var(--sk-blue); --rd-blue-600: var(--sk-blue-600); --rd-blue-50: var(--sk-blue-50); --rd-violet: var(--sk-blue);
  --rd-grad: var(--sk-btn); --rd-navy-grad: #1d4ed8;
  --rd-shadow-sm: var(--sk-shadow); --rd-shadow: var(--sk-shadow); --rd-shadow-lg: var(--sk-shadow-lg);
  --rd-glow: none;
  --bg-canvas: var(--sk-bg); --bg-card: var(--sk-card); --ink-primary: var(--sk-ink); --ink-secondary: var(--sk-ink-2);
  --ink-muted: var(--sk-muted); --ink-faint: var(--sk-faint); --border-hairline: var(--sk-line);
  --accent-blue: var(--sk-blue); --accent-blue-soft: var(--sk-blue-50); --border-focus: var(--sk-blue);
  --primary-700: #1e40af; --primary-600: #1d4ed8; --primary-500: #2563eb; --primary-100: #dbe6fe; --primary-50: #eff4ff;
  --g-fill: var(--sk-card); --g-fill-strong: var(--sk-card); --g-fill-soft: var(--sk-card);
  --g-stroke: var(--sk-line); --g-stroke-soft: var(--sk-line);
  --g-hi: transparent; --g-hi-soft: transparent; --g-spot: transparent;
  --g-shade: transparent; --g-solid: var(--sk-card); --g-solid-2: var(--sk-bg);
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-theme="dark"] {
  --sk-bg: #0f1115;
  --sk-card: #171a21;
  --sk-ink: #f3f4f6;
  --sk-ink-2: #d1d5db;
  --sk-muted: #9ca3af;
  --sk-faint: #6b7280;
  --sk-line: rgba(255, 255, 255, .08);
  --sk-blue: #7aa2ff;
  --sk-blue-600: #93b4ff;
  --sk-blue-50: rgba(122, 162, 255, .12);
  --sk-btn: #2f5fe0;
  --sk-shadow: none;
  --sk-shadow-lg: 0 6px 18px -8px rgba(0, 0, 0, .6);

  --rd-ink: var(--sk-ink); --rd-ink-2: var(--sk-ink-2); --rd-muted: var(--sk-muted); --rd-faint: var(--sk-faint);
  --rd-line: var(--sk-line); --rd-bg: var(--sk-bg); --rd-card: var(--sk-card);
  --rd-blue: var(--sk-blue); --rd-blue-600: var(--sk-blue-600); --rd-blue-50: var(--sk-blue-50); --rd-violet: var(--sk-blue);
  --rd-shadow-sm: var(--sk-shadow); --rd-shadow: var(--sk-shadow); --rd-shadow-lg: var(--sk-shadow-lg);
  --bg-canvas: var(--sk-bg); --bg-card: var(--sk-card); --ink-primary: var(--sk-ink); --ink-secondary: var(--sk-ink-2);
  --ink-muted: var(--sk-muted); --ink-faint: var(--sk-faint); --border-hairline: var(--sk-line);
  --accent-blue: var(--sk-blue); --accent-blue-soft: var(--sk-blue-50);
  --g-fill: var(--sk-card); --g-fill-strong: var(--sk-card); --g-fill-soft: var(--sk-card);
  --g-stroke: var(--sk-line); --g-stroke-soft: var(--sk-line);
  --g-hi: transparent; --g-hi-soft: transparent; --g-spot: transparent;
  --g-shade: transparent; --g-solid: var(--sk-card); --g-solid-2: var(--sk-bg);
}

/* --------------------------------------------------------------------------
   Canvas: plain sky background, no aurora, no glass blur, no sheen
   -------------------------------------------------------------------------- */
html body {
  background: var(--sk-bg) !important;
  color: var(--sk-ink-2) !important;
  font-family: var(--font-sans) !important;
}
html body .rd-aurora,
html body .rd-sheen-bar,
html body .rd-bubbles { display: none !important; }
html body *,
html body *::before,
html body *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html body h1, html body h2, html body h3 { color: var(--sk-ink); letter-spacing: -0.02em; }
html body .serif-accent,
html body .rd-grad-text {
  font-family: inherit !important;
  font-style: normal !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--sk-blue) !important;
}

/* --------------------------------------------------------------------------
   Header: white bar with a hairline
   -------------------------------------------------------------------------- */
html body .site-header .nav-container,
html body .site-header.rd-scrolled .nav-container {
  background: var(--sk-card) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html body .desktop-nav .nav-link,
html body .nav-menu .nav-link { color: var(--sk-muted) !important; font-weight: 600 !important; }
html body .desktop-nav .nav-link:hover,
html body .desktop-nav .nav-link.active { color: var(--sk-ink) !important; }
html body .desktop-nav .nav-link::after,
html body .nav-menu .nav-link::after { background: var(--sk-blue) !important; height: 2px !important; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
html body .btn-primary,
html body .btn.btn-primary {
  background: var(--sk-btn) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
html body .btn-primary:hover { background: var(--sk-blue-600) !important; transform: none; }
html body .btn-outline,
html body .btn.btn-outline {
  background: var(--sk-card) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-blue) !important;
  box-shadow: none !important;
}

html body .btn-outline:hover { background: var(--sk-blue-50) !important; }
html body .btn { border-radius: 10px !important; font-weight: 600 !important; }

/* --------------------------------------------------------------------------
   Cards everywhere: solid white, soft blue shadow
   -------------------------------------------------------------------------- */
html body .form-card,
html body .stats-card,
html body .rd-auth-wrap,
html body .rd-svc-toolbar,
html body .services-page-container .service-card,
html body .services-page-container .how-it-works-section,
html body .how-step-card,
html body .catalog-gate-card,
html body .home-service-card,
html body .faq-item,
html body .rd-stepper,
html body .rd-check,
html body .dashboard-card,
html body .card:not(.dashboard-wallet-bar),
html body .support-banner {
  background: var(--sk-card) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: var(--sk-shadow) !important;
}

/* Form fields */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="password"], html body input[type="number"], html body input[type="search"],
html body input[type="date"], html body select, html body textarea {
  border-color: var(--sk-line);
  border-radius: 10px;
}
html body input:focus, html body select:focus, html body textarea:focus {
  border-color: var(--sk-blue) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .12) !important;
  outline: none;
}

/* --------------------------------------------------------------------------
   Services page
   -------------------------------------------------------------------------- */
html body .rd-svc-hero {
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 8px 0 !important;
  margin-bottom: 16px;
}
html body .rd-svc-hero .rd-svc-intro { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
html body .rd-svc-hero .wave { display: none !important; }
html body .rd-svc-intro::before, html body .rd-svc-intro::after { display: none !important; }
html body .service-icon-box { border-radius: 8px !important; }
html body .service-icon-box::before, html body .service-icon-box::after { display: none !important; }
html body .rd-svc-hero .rd-hello { background: none !important; border: 0 !important; padding: 0 !important; color: var(--sk-muted) !important; }
html body .rd-svc-quick a {
  background: var(--sk-card) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-ink-2) !important;
  box-shadow: none !important;
}
html body .rd-svc-hero .services-wallet-card,
html body .rd-wallet {
  background: var(--sk-card) !important;
  color: var(--sk-ink) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: var(--sk-shadow) !important;
  border-radius: 16px !important;
}
html body .rd-wallet::before, html body .rd-wallet::after, html body .rd-wallet-chip { display: none !important; }
html body .rd-wallet .services-wallet-title,
html body .rd-wallet .services-wallet-zero,
html body .rd-wallet .services-wallet-available { color: var(--sk-muted) !important; }
html body .rd-wallet .services-wallet-num,
html body .rd-wallet .services-wallet-currency { color: var(--sk-ink) !important; }

html body .rd-svc-toolbar { border-radius: 14px !important; }
html body .rd-chips button,
html body .rd-chip {
  background: var(--sk-card) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-muted) !important;
  box-shadow: none !important;
}
html body .rd-chips button[aria-pressed="true"],
html body .rd-chip.is-active,
html body .rd-chip[aria-pressed="true"] {
  background: var(--sk-blue) !important;
  border-color: var(--sk-blue) !important;
  color: #fff !important;
}

html body .services-page-container .service-card {
  border-radius: 12px !important;
  padding: 20px !important;
  overflow: hidden;
}
html body .services-page-container .service-card::before { display: none !important; }
html body .services-page-container .service-card:hover {
  transform: translateY(-2px) !important;
  border-color: #bfd0fb !important;
  box-shadow: 0 10px 24px -14px rgba(29, 78, 216, .35) !important;
}
html body .services-page-container .service-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease !important; }
html body .service-icon-box {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  background: var(--sk-blue-50) !important;
  color: var(--sk-blue) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .service-title { color: var(--sk-ink) !important; }
html body .service-desc { color: var(--sk-muted) !important; }
html body .service-chip {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  color: var(--sk-muted) !important;
}
html body .service-fee-box {
  background: none !important;
  border: 0 !important;
  border-top: 1px dashed var(--sk-line) !important;
  border-radius: 0 !important;
  padding: 12px 0 0 !important;
}
html body .service-fee-box .fee-label { color: var(--sk-muted) !important; }
html body .service-fee-box .fee-amount { color: var(--sk-blue) !important; font-weight: 800 !important; }

html body .how-step-num,
html body .step-num-pill {
  background: var(--sk-btn) !important;
  color: #fff !important;
  border: 0 !important;
}
html body .support-banner { border-radius: 16px !important; }
html body .support-icon-circle { background: var(--sk-blue-50) !important; color: var(--sk-blue) !important; }
html body .section-tag {
  background: var(--sk-blue-50) !important;
  color: var(--sk-blue) !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
html body .site-footer {
  background: var(--sk-card) !important;
  border-top: 1px solid var(--sk-line) !important;
  color: var(--sk-muted) !important;
}
html body .site-footer::before,
html body .site-footer::after { display: none !important; }
html body .site-footer h4,
html body .site-footer h5,
html body .footer-disclaimer-card strong { color: var(--sk-ink) !important; }
html body .site-footer p,
html body .site-footer .footer-brand div,
html body .footer-bottom,
html body .footer-bottom div { color: var(--sk-muted) !important; }
html body .site-footer .footer-links a,
html[data-theme="dark"] body .site-footer a { color: var(--sk-muted) !important; }
html body .site-footer .footer-links a:hover,
html[data-theme="dark"] body .site-footer .footer-links a:hover { color: var(--sk-blue) !important; }
html body .footer-bottom { border-top: 1px solid var(--sk-line) !important; }
html body .footer-disclaimer-card {
  background: var(--sk-bg) !important;
  border: 1px solid var(--sk-line) !important;
  box-shadow: none !important;
  color: var(--sk-muted) !important;
}

/* WhatsApp bubble: plain and small */
html body .floating-whatsapp-btn { box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .25) !important; }
html body .floating-whatsapp-btn::before,
html body .floating-whatsapp-btn::after { display: none !important; }


/* Calm, light to use: no hover lifts or entrance animations */
html body .rd-reveal-auto, html body .h-reveal, html body .services-page-container .service-card,
html body .dashboard-card, html body .site-footer .footer-grid > * {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Apply button on the services page: solid blue, darker on hover */
html body .services-page-container .btn.service-apply-btn {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100% !important;
  min-height: 46px;
  margin-top: 14px !important;
  border-radius: 10px !important;
  background: var(--sk-blue) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .9375rem !important;
  box-shadow: 0 6px 14px -8px rgba(29, 78, 216, .7) !important;
  transition: background .15s ease, box-shadow .15s ease !important;
}
html body .services-page-container .service-card:hover .btn.service-apply-btn,
html body .services-page-container .btn.service-apply-btn:hover {
  background: var(--sk-blue-600) !important;
  box-shadow: 0 10px 20px -10px rgba(29, 78, 216, .8) !important;
}
html[data-theme="dark"] body .services-page-container .btn.service-apply-btn { background: #2f5fe0 !important; }
html[data-theme="dark"] body .services-page-container .service-card:hover .btn.service-apply-btn { background: #3b6cf0 !important; }
html body .services-page-container .btn.service-apply-btn.btn-unavailable {
  background: var(--sk-bg) !important;
  color: var(--sk-faint) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
html body .service-fee-box { display: flex !important; align-items: baseline; justify-content: space-between; }
html body .service-fee-box .fee-amount { color: var(--sk-ink) !important; font-size: 1.125rem !important; }
@media (prefers-reduced-motion: reduce) {
  html body .services-page-container .service-card:hover { transform: none !important; }
}

/* --------------------------------------------------------------------------
   Services page: compact cards (4 per row on wide screens)
   -------------------------------------------------------------------------- */
html body .services-page-container .services-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  gap: 14px !important;
  margin-bottom: 36px !important;
}
html body .services-page-container .service-card {
  padding: 16px !important;
  border-radius: 12px !important;
  gap: 0 !important;
}
html body .services-page-container .service-card::after { display: none !important; }
html body .services-page-container .service-card-top { margin-bottom: 10px !important; align-items: center !important; }
html body .services-page-container .service-icon-box {
  width: 36px !important; height: 36px !important;
  border-radius: 9px !important;
  background: var(--sk-blue-50) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .services-page-container .service-icon-box svg { width: 19px; height: 19px; }
html body .services-page-container .service-card:hover .service-icon-box { transform: none !important; background: var(--sk-blue-50) !important; color: var(--sk-blue) !important; }
html body .services-page-container .service-title {
  font-size: .9375rem !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
}
html body .services-page-container .service-desc {
  font-size: .8125rem !important;
  line-height: 1.45 !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  flex: none !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html body .services-page-container .service-chips { margin: 0 0 12px !important; gap: 6px !important; flex: none !important; }
html body .services-page-container .service-chip { font-size: .6875rem !important; padding: 2px 7px !important; }
html body .services-page-container .service-fee-box {
  margin-top: auto !important;
  padding: 10px 0 0 !important;
}
html body .services-page-container .fee-label { font-size: .6875rem !important; }
html body .services-page-container .fee-amount { font-size: 1.0625rem !important; }
html body .services-page-container .puc-fee-grid { margin: 0 !important; gap: 6px !important; }
html body .services-page-container .btn.service-apply-btn {
  min-height: 38px !important;
  margin-top: 10px !important;
  font-size: .875rem !important;
  box-shadow: none !important;
}
html body .services-page-container .service-card:hover .btn.service-apply-btn,
html body .services-page-container .btn.service-apply-btn:hover { box-shadow: none !important; }
html body .services-page-container .service-card:hover { transform: translateY(-2px) !important; }
@media (max-width: 600px) {
  html body .services-page-container .services-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}
html body .services-page-container .service-fee-box { flex-wrap: wrap !important; gap: 2px 10px; }
html body .services-page-container .fee-label { white-space: nowrap; }
html body .services-page-container .fee-amount { margin-left: auto; text-align: right; }