/* ==========================================================================
   Redwood Pavers — custom styles layered on top of Tailwind (Play CDN)
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { background: #a3381f; color: #fff; }

/* Offset anchor scrolling so the sticky header doesn't cover section titles */
section[id] { scroll-margin-top: 88px; }

/* --------------------------------------------------------------------------
   Reveal-on-scroll (toggled by IntersectionObserver in js/main.js)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Before / After comparison slider
   -------------------------------------------------------------------------- */
.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 1.5rem;
  user-select: none;
  background: #0f2440;
  touch-action: pan-y;
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* The "before" layer sits on top and is clipped to reveal only the left portion */
.ba-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0);
}
.ba-divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: #fff;
  transform: translateX(-50%);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(15,36,64,.15);
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 46px;
  width: 46px;
  border-radius: 9999px;
  background: #fff;
  color: #0f2440;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.ba-tag {
  position: absolute;
  top: 1rem;
  padding: .25rem .75rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  background: rgba(15, 36, 64, .82);
  pointer-events: none;
  z-index: 2;
}
.ba-tag-before { left: 1rem; }
.ba-tag-after { right: 1rem; }
/* Full-area transparent range input drives the slider position */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 48px; height: 100%; cursor: ew-resize; }
.ba-range::-moz-range-thumb { width: 48px; height: 100%; border: 0; background: transparent; cursor: ew-resize; }
.ba-range:focus-visible { outline: 3px solid #a3381f; outline-offset: 3px; border-radius: 1.5rem; }

/* --------------------------------------------------------------------------
   Respect users who prefer reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Estimate funnel (estimate.html)
   -------------------------------------------------------------------------- */
.fnl-in { animation: fnlIn .4s cubic-bezier(.22, 1, .36, 1); }
@keyframes fnlIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.opt {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: left;
  padding: 1rem 1.25rem;
  border: 2px solid #e2e8f0;
  border-radius: 1rem;
  background: #fff;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .05s;
}
.opt:hover { border-color: #b4cbe7; box-shadow: 0 6px 24px -12px rgba(15, 36, 64, .22); }
.opt:active { transform: scale(.995); }
.opt-lg { padding: 1.25rem 1.5rem; }

.opt-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border-radius: 9999px;
  background: #eef3fa;
  color: #1c4470;
}
.opt-ico svg { height: 1.5rem; width: 1.5rem; }

.opt-label { flex: 1; font-weight: 700; color: #0f2440; }
.opt-sub { font-weight: 500; color: #64748b; font-size: .875rem; }

.opt-check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  width: 1.75rem;
  border-radius: 9999px;
  background: #a3381f;
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s, transform .15s;
}
.opt-check svg { height: 1.1rem; width: 1.1rem; }

.opt.is-selected { border-color: #a3381f; background: #faf1ee; box-shadow: 0 10px 30px -14px rgba(163, 56, 31, .45); }
.opt.is-selected .opt-ico { background: #a3381f; color: #fff; }
.opt.is-selected .opt-check { opacity: 1; transform: none; }

.fnl-input {
  width: 100%;
  border: 2px solid #d8e5f3;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  font-size: 1.05rem;
  color: #0f2440;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fnl-step .fnl-input { margin-top: 1.25rem; }
.fnl-input::placeholder { color: #94a3b8; }
.fnl-input:focus { border-color: #a3381f; box-shadow: 0 0 0 4px rgba(163, 56, 31, .12); }

/* Date strip + time slots (schedule screen) */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.date-card {
  flex: 0 0 auto;
  width: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: .65rem .25rem;
  border: 2px solid #d8e5f3;
  border-radius: 1rem;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.date-card:hover { border-color: #b4cbe7; }
.date-month { font-size: .7rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .04em; }
.date-day { font-family: "Plus Jakarta Sans", ui-sans-serif, sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1.1; color: #0f2440; }
.date-dow { font-size: .75rem; font-weight: 600; color: #64748b; }
.date-card.is-selected { border-color: #a3381f; background: #faf1ee; box-shadow: 0 8px 24px -12px rgba(163, 56, 31, .4); }
.date-card.is-selected .date-day { color: #a3381f; }

.time-slot {
  padding: .85rem 1rem;
  border: 2px solid #d8e5f3;
  border-radius: .9rem;
  background: #fff;
  font-weight: 700;
  color: #0f2440;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.time-slot:hover:not(.is-disabled) { border-color: #b4cbe7; }
.time-slot.is-selected { border-color: #a3381f; background: #faf1ee; color: #a3381f; box-shadow: 0 8px 24px -12px rgba(163, 56, 31, .4); }
.time-slot.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }