:root{color-scheme:light}

/* Smaller global typography on small screens */
@media (max-width: 640px){
  html{ font-size: 15px; }
}
html{scroll-behavior:smooth}
#formAlert.success{color:#065f46}
#formAlert.error{color:#b91c1c}

.modal-body{
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.45) transparent;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
.modal-body::-webkit-scrollbar{ width: 6px; }
.modal-body::-webkit-scrollbar-track{ background: transparent; }
.modal-body::-webkit-scrollbar-thumb{
  background-color: rgba(148,163,184,0.45);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.modal-body::-webkit-scrollbar-thumb:hover{ background-color: rgba(100,116,139,0.6); }
/* Larger touch target for before/after slider */
input[type="range"]{height:1.5rem}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;height:28px;width:28px;background:#fff;border:2px solid #0ea5e9;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.2)
}
input[type="range"]::-moz-range-thumb{
  height:28px;width:28px;background:#fff;border:2px solid #0ea5e9;border-radius:9999px;box-shadow:0 1px 2px rgba(0,0,0,.2)
}

/* Slim blue slider for price calculators */
[data-price-calc] input[type="range"]{height:10px;background:#e0f2fe;border-radius:6px;outline:none;-webkit-appearance:none;appearance:none}
[data-price-calc] input[type="range"]::-webkit-slider-runnable-track{height:10px;background:#e0f2fe;border-radius:6px}
[data-price-calc] input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-6px;background:#0ea5e9;border:0;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.2)}
[data-price-calc] input[type="range"]::-moz-range-track{height:10px;background:#e0f2fe;border-radius:6px}
[data-price-calc] input[type="range"]::-moz-range-progress{height:10px;background:#38bdf8;border-radius:6px}
[data-price-calc] input[type="range"]::-moz-range-thumb{width:22px;height:22px;background:#0ea5e9;border:0;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.2)}

/* Make before/after slider match calculator style */
[data-before-after] input[type="range"]{height:8px;background:#e0f2fe;border-radius:6px;outline:none;-webkit-appearance:none;appearance:none}
[data-before-after] input[type="range"]::-webkit-slider-runnable-track{height:8px;background:#e0f2fe;border-radius:6px}
[data-before-after] input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;margin-top:-4px;background:#0ea5e9;border:0;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2)}
[data-before-after] input[type="range"]::-moz-range-track{height:8px;background:#e0f2fe;border-radius:6px}
[data-before-after] input[type="range"]::-moz-range-progress{height:8px;background:#38bdf8;border-radius:6px}
[data-before-after] input[type="range"]::-moz-range-thumb{width:16px;height:16px;background:#0ea5e9;border:0;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.2)}


/* ===== Site-wide gentle blue accents ===== */
/* Uniform light blue with a very subtle overlay (no hard lines) */
body{
  background-color: #E0F2FE; /* sky-100 */
  background-image: linear-gradient(180deg, rgba(14,165,233,0.06) 0%, rgba(14,165,233,0.03) 50%, rgba(14,165,233,0.02) 100%);
  background-attachment: fixed;
}

/* Make all main sections transparent so the body background shows through */
main > section{
  background-color: transparent !important;
}

/* Gentle section separators: soft top border (no overlays) */
main > section{ position: relative; }
main > section:not(:first-of-type){
  border-top: 1px solid rgba(2,132,199,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
}

/* Header tint + shadow */
header.sticky{
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.92), rgba(255,255,255,0.86));
  box-shadow: 0 1px 0 0 rgba(2,132,199,0.12);
}

/* Sky buttons slight gradient and glow on hover */
.bg-sky-600{
  background-image: linear-gradient(180deg, #0ea5e9, #0284c7);
}
.hover\:bg-sky-700:hover{
  filter: saturate(1.02);
  box-shadow: 0 6px 18px -6px rgba(2,132,199,0.35);
}

/* White cards: soft hover ring */
.bg-white.border.border-slate-200:hover{
  box-shadow: 0 0 0 3px rgba(125,211,252,0.35), 0 6px 18px rgba(15,23,42,0.05);
  transform: translateY(-1px);
  transition: box-shadow .2s ease, transform .2s ease;
}

/* Removed heading underline accent */

/* Link hover accent */
a:hover{ color: #0369a1; }

@media print{
  @page { size: A4; margin: 12mm; }
  body{ background: #fff !important; background-image: none !important; }
  header, nav, #cookieBanner, #lightbox, .before-after-divider, input[type="range"], button, .hover\:bg-sky-700{ display: none !important; }
  main > section{ border: 0 !important; box-shadow: none !important; background: #fff !important; }
  .bg-white, .bg-slate-50, .bg-white\/70{ background: #fff !important; }
  .shadow, .shadow-sm, .shadow-lg, .shadow-xl{ box-shadow: none !important; }
  .border, .border-slate-200, .ring-1, .ring-white\/40{ border-color: #e5e7eb !important; box-shadow: none !important; }
  img{ max-width: 100% !important; height: auto !important; }
  a{ color: #000 !important; text-decoration: none !important; }
  h1,h2,h3{ break-after: avoid-page; }
  p, ul, table, picture, .rounded-2xl, .rounded-xl{ break-inside: avoid; }
  [data-before-after] .before-after-overlay{ clip-path: none !important; position: static !important; }
  [data-before-after] { position: relative !important; }
}

/* ===== Modal scroll refinement ===== */
.modal-scroll{
  /* Firefox slim scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,0.45) transparent; /* slate-400 on transparent */
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
}
.modal-scroll::-webkit-scrollbar{ width: 8px; }
.modal-scroll::-webkit-scrollbar-track{ background: transparent; }
.modal-scroll::-webkit-scrollbar-thumb{
  background-color: rgba(148,163,184,0.45); /* slate-400 */
  border-radius: 9999px;
  border: 3px solid transparent; /* creates padding for a pill look */
  background-clip: content-box;
}
.modal-scroll::-webkit-scrollbar-thumb:hover{ background-color: rgba(100,116,139,0.6); }