/* =========================================================================
   Supplemental CSS for the SSR templates.

   The main bundle at /assets/index-CP6gkst8.css was compiled from the old
   React SPA source and therefore ONLY contains utility classes that were
   literally used in the React source.  Our SSR templates reuse many of
   those classes but also introduce arbitrary-value utilities that never
   appeared in React (e.g. `bg-[#1a365d]`, `text-white/85`) — they must be
   re-declared here to render correctly.

   Keep this file small and surgical.
   ========================================================================= */

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

[data-lead-dialog].hidden { display: none !important; }
[data-lead-dialog].flex   { display: flex !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Prevent stale React-scroll animations from leaving elements invisible.
   Excludes the hero slider, which intentionally toggles slide opacity. */
main [class*="opacity-0"]:not([data-slide-bg]):not([data-slide-text]) { opacity: 1 !important; }

/* ----- Brand solid colors ------------------------------------------------ */
.bg-\[\#1a365d\]           { background-color: #1a365d; }
.bg-\[\#152a4a\]           { background-color: #152a4a; }
.bg-\[\#2c5282\]           { background-color: #2c5282; }
.bg-\[\#f97316\]           { background-color: #f97316; }

.bg-\[\#1a365d\]\/10       { background-color: rgba(26, 54, 93, .10); }
.bg-\[\#1a365d\]\/15       { background-color: rgba(26, 54, 93, .15); }
.bg-\[\#1a365d\]\/20       { background-color: rgba(26, 54, 93, .20); }
.bg-\[\#1a365d\]\/90       { background-color: rgba(26, 54, 93, .90); }

.text-\[\#1a365d\]         { color: #1a365d; }
.text-\[\#f97316\]         { color: #f97316; }

.border-\[\#1a365d\]       { border-color: #1a365d; }
.border-\[\#1a365d\]\/20   { border-color: rgba(26, 54, 93, .20); }
.border-\[\#1a365d\]\/30   { border-color: rgba(26, 54, 93, .30); }

/* Hover variants */
.hover\:bg-\[\#1a365d\]:hover      { background-color: #1a365d; }
.hover\:bg-\[\#152a4a\]:hover      { background-color: #152a4a; }
.hover\:bg-\[\#2c5282\]:hover      { background-color: #2c5282; }
.hover\:bg-\[\#1a365d\]\/15:hover  { background-color: rgba(26, 54, 93, .15); }
.hover\:bg-white\/10:hover         { background-color: rgba(255, 255, 255, .10); }
.hover\:bg-white\/90:hover         { background-color: rgba(255, 255, 255, .90); }
.hover\:text-\[\#1a365d\]:hover    { color: #1a365d; }
.hover\:text-\[\#f97316\]:hover    { color: #f97316; }
.hover\:text-white\/80:hover       { color: rgba(255, 255, 255, .80); }
.hover\:border-\[\#1a365d\]:hover       { border-color: #1a365d; }
.hover\:border-\[\#1a365d\]\/30:hover   { border-color: rgba(26, 54, 93, .30); }

/* Focus variants for form fields */
.focus\:border-\[\#1a365d\]:focus { border-color: #1a365d; }
.focus\:ring-\[\#1a365d\]:focus   { --tw-ring-color: #1a365d; box-shadow: 0 0 0 3px rgba(26,54,93,.35); }

/* ----- White / black opacity utilities missing in bundle ----------------- */
.text-white\/85  { color: rgba(255, 255, 255, .85); }
.text-white\/90  { color: rgba(255, 255, 255, .90); }
.bg-white\/10    { background-color: rgba(255, 255, 255, .10); }
.bg-white\/20    { background-color: rgba(255, 255, 255, .20); }
.bg-white\/90    { background-color: rgba(255, 255, 255, .90); }
.border-white\/10 { border-color: rgba(255, 255, 255, .10); }
.border-white\/30 { border-color: rgba(255, 255, 255, .30); }
.bg-black\/60    { background-color: rgba(0, 0, 0, .60); }

/* ----- Gradient utilities (Tailwind uses CSS variables under the hood) --- */
/* Tailwind's `bg-gradient-to-br` is present in the bundle and expands to
   `background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))`.
   We just need to feed the stops. */
.from-\[\#1a365d\]        { --tw-gradient-from: #1a365d; --tw-gradient-to: rgba(26,54,93,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#1a365d\]\/5     { --tw-gradient-from: rgba(26,54,93,.05); --tw-gradient-to: rgba(26,54,93,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#1a365d\]\/10    { --tw-gradient-from: rgba(26,54,93,.10); --tw-gradient-to: rgba(26,54,93,0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-\[\#1a365d\]\/5      { --tw-gradient-stops: var(--tw-gradient-from), rgba(26,54,93,.05), var(--tw-gradient-to); }
.to-\[\#2c5282\]          { --tw-gradient-to: #2c5282; }
.to-\[\#1a365d\]\/10      { --tw-gradient-to: rgba(26,54,93,.10); }

/* ----- Safety fallbacks for legacy bg-gradient variants ------------------ */
/* Some spots in the original React bundle might not declare every direction.
   These are no-ops if Tailwind already supplied them. */
.bg-gradient-to-b  { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.bg-gradient-to-tr { background-image: linear-gradient(to top right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }

/* ----- OSM / Leaflet map styles ----------------------------------------- */
/* Minimal, unobtrusive attribution (license-compliant, but not distracting). */
.leaflet-container .leaflet-control-attribution {
  background: rgba(255,255,255,.65);
  color: #6b7280;
  font-size: 10px;
  line-height: 1.3;
  padding: 1px 6px;
  border-radius: 4px 0 0 0;
  box-shadow: none;
  backdrop-filter: blur(2px);
}
.leaflet-container .leaflet-control-attribution a {
  color: #6b7280;
  text-decoration: none;
}
.leaflet-container .leaflet-control-attribution a:hover {
  color: #1a365d;
  text-decoration: underline;
}
/* Remove white background from custom SVG pin marker. */
.oko-marker { background: transparent; border: 0; }

/* ----- Catalog: dual range price slider -------------------------------- */
[data-price-track] input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  margin: 0;
  z-index: 2;
}
[data-price-track] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1a365d;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .1s ease;
}
[data-price-track] input[type="range"]::-webkit-slider-thumb:hover,
[data-price-track] input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.1);
}
[data-price-track] input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #1a365d;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  cursor: pointer;
}
[data-price-track] input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}
[data-price-track] input[type="range"]::-moz-range-track {
  background: transparent;
}

/* ----- Catalog: facet body transition when collapsed ------------------- */
[data-facet-body].hidden { display: none; }

/* ----- Catalog: adaptive subcategory preview (1 row on every bp) ------- */
/* In collapsed state (no [data-expanded]) hide tiles past the first row. */
[data-subcats-wrapper]:not([data-expanded]) [data-subcat-tile]:nth-child(n+3) { display: none; }
@media (min-width: 640px) {
  [data-subcats-wrapper]:not([data-expanded]) [data-subcat-tile]:nth-child(n+4) { display: none; }
}
@media (min-width: 1024px) {
  [data-subcats-wrapper]:not([data-expanded]) [data-subcat-tile]:nth-child(n+5) { display: none; }
}

/* =========================================================================
   HEADER & NAVIGATION — Modern redesign
   ========================================================================= */
.oko-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: linear-gradient(135deg, #1a365d 0%, #1e3a5f 50%, #152a4a 100%);
  box-shadow: 0 2px 20px rgba(0,0,0,.15);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  backdrop-filter: blur(12px);
}
.oko-header__inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
@media (min-width: 1024px) {
  .oko-header__inner { height: 72px; padding: 0 2rem; }
}
.oko-header__logo img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: opacity .2s;
}
.oko-header__logo:hover img { opacity: .85; }
@media (min-width: 1024px) {
  .oko-header__logo img { height: 46px; }
}

/* Navigation */
.oko-header__nav {
  display: none;
  align-items: center;
  gap: 2px;
}
@media (min-width: 1024px) {
  .oko-header__nav { display: flex; }
}
.oko-header__link {
  position: relative;
  padding: 6px 12px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  border-radius: 6px;
  transition: all .2s ease;
  white-space: nowrap;
}
.oko-header__link:hover {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.oko-header__link--active {
  color: #fff;
  background: rgba(255,255,255,.12);
}
.oko-header__link--highlight {
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.6);
  border-radius: 20px;
  padding: 5px 14px;
  font-weight: 600;
  background: rgba(255,255,255,.05);
}
.oko-header__link--highlight:hover {
  background: rgba(255,255,255,.15);
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Actions */
.oko-header__actions {
  display: none;
  align-items: center;
  gap: 16px;
}
@media (min-width: 1024px) {
  .oko-header__actions { display: flex; }
}
.oko-header__phone {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color .2s;
}
.oko-header__phone:hover { color: #fff; }

.oko-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  background: #fff;
  color: #1a365d;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.oko-header__cta:hover {
  background: #f0f4ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.oko-header__cta--mobile {
  width: 100%;
  margin-top: 12px;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 10px;
}

/* Burger */
.oko-header__burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background .2s;
}
.oko-header__burger:hover { background: rgba(255,255,255,.1); }
.oko-header__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s ease;
}
@media (min-width: 1024px) {
  .oko-header__burger { display: none; }
}

/* Mobile menu */
.oko-header__mobile {
  border-top: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #1a365d 0%, #152a4a 100%);
  padding: 12px 16px 20px;
  max-height: 80vh;
  overflow-y: auto;
}
.oko-header__mobile.hidden { display: none; }
.oko-header__mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.oko-header__mobile-link {
  display: block;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border-radius: 8px;
  transition: all .15s;
}
.oko-header__mobile-link:hover,
.oko-header__mobile-link:active {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.oko-header__mobile-link--highlight {
  border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 10px;
  margin-top: 8px;
  text-align: center;
  font-weight: 600;
}
.oko-header__mobile-phone {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* Main content offset to match fixed header */
main[style*="padding-top"] {
  padding-top: 64px !important;
}
@media (min-width: 1024px) {
  main[style*="padding-top"] {
    padding-top: 72px !important;
  }
}