/* =====================================================================
 * WashRadar — premium design layer on top of Tailwind
 * Monochrome map (white/gray/black) + vibrant gradient UI accents
 * ===================================================================*/

:root {
  --grad: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
  --grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(236,72,153,.12));
}

html, body { -webkit-tap-highlight-color: transparent; }
* { -webkit-font-smoothing: antialiased; }

/* ---- Map -----------------------------------------------------------*/
.leaflet-container { background: #eef1f5; font: inherit; }
.leaflet-control-attribution { font-size: 9px; opacity: .5; }
.leaflet-control-attribution a { color: #6366f1; }

/* Monochrome (white/gray/black) map via CSS filter on the tile layer.
   Uses reliable OSM tiles and desaturates them, so it always loads. */
.leaflet-tile-pane { transition: filter .45s ease; }
.map-light .leaflet-tile-pane { filter: grayscale(1) brightness(1.07) contrast(.9); }
.map-light { background: #f4f6f9; }
.map-dark  .leaflet-tile-pane { filter: grayscale(1) invert(1) brightness(.92) contrast(1.05); }
.map-dark  { background: #1a1a1a; }
.map-dark .leaflet-control-attribution { background: rgba(20,20,20,.7); color: #aaa; }

/* ---- Gradient utility ---------------------------------------------*/
.grad { background-image: var(--grad); }
.grad-text {
  background-image: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.grad-border { position: relative; }
.grad-border::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* Glassmorphism */
.glass {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

/* ---- Buttons / interaction ----------------------------------------*/
.btn-grad {
  background-image: var(--grad);
  background-size: 160% 160%;
  color: #fff;
  transition: transform .15s ease, box-shadow .25s ease, background-position .5s ease;
}
.btn-grad:hover { background-position: 100% 0; box-shadow: 0 12px 32px -8px rgba(168,85,247,.55); }
.btn-grad:active { transform: scale(.97); }

/* Shimmer sweep on press targets */
.shine { position: relative; overflow: hidden; }
.shine::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.shine:hover::after { left: 130%; }

/* Press feedback on any tappable */
.tap { transition: transform .12s ease; }
.tap:active { transform: scale(.95); }

/* ---- Custom markers ------------------------------------------------*/
.wr-pin {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50% 50% 50% 0;
  background-image: var(--grad);
  color: #fff; transform: rotate(-45deg) scale(0);
  box-shadow: 0 6px 16px rgba(99,102,241,.5);
  border: 2.5px solid #fff;
  animation: pinDrop .35s cubic-bezier(.34,1.56,.64,1) forwards;
  transition: transform .2s ease;
}
.wr-pin i { transform: rotate(45deg); font-size: 15px; }
.leaflet-marker-icon:hover .wr-pin { transform: rotate(-45deg) scale(1.18); z-index: 1000; }

/* Featured / sponsored pin — golden, slightly larger, gentle pulse */
.wr-pin-feat {
  background-image: linear-gradient(135deg, #f59e0b, #fbbf24, #f97316);
  box-shadow: 0 6px 18px rgba(245,158,11,.6);
  width: 42px; height: 42px;
  animation: pinDrop .35s cubic-bezier(.34,1.56,.64,1) forwards, featPulse 2s ease-in-out 1s infinite;
}
@keyframes featPulse {
  0%,100% { box-shadow: 0 6px 18px rgba(245,158,11,.6); }
  50%     { box-shadow: 0 6px 26px rgba(245,158,11,.95); }
}
@keyframes pinDrop {
  0%   { transform: rotate(-45deg) scale(0) translateY(-30px); opacity: 0; }
  100% { transform: rotate(-45deg) scale(1) translateY(0); opacity: 1; }
}

/* User location dot with pulsing gradient ring */
.wr-userdot { position: relative; width: 18px; height: 18px; }
.wr-userdot::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: #4f46e5; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.wr-userdot::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: rgba(99,102,241,.35); animation: ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%,100% { transform: scale(2.4); opacity: 0; } }

/* Leaflet tooltip -> pill */
.leaflet-tooltip.wr-tip {
  background: rgba(17,24,39,.92); color: #fff; border: none; border-radius: 999px;
  padding: 5px 12px; font-weight: 600; font-size: 12px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
}
.leaflet-tooltip.wr-tip::before { display: none; }

/* ---- Sheets / modals ----------------------------------------------*/
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
.sheet-anim { animation: sheetUp .35s cubic-bezier(.22,1,.36,1); }
.fade-anim  { animation: fadeIn .25s ease; }

.drag-handle { width: 44px; height: 5px; border-radius: 999px; background: #cbd5e1; margin: 0 auto 14px; }

/* ---- List card entrance (staggered) -------------------------------*/
.card-in { animation: pop .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---- Stars --------------------------------------------------------*/
.stars .fa-star.on { color: #f59e0b; }
.stars .fa-star { color: #d8dde6; }

/* Service chips selected glow */
.svc-chip:has(:checked) { box-shadow: 0 6px 18px -6px rgba(99,102,241,.5); }

/* Floating Action Button (Add) */
.fab { background-image: var(--grad); box-shadow: 0 10px 26px -6px rgba(168,85,247,.6); }

/* Scrollbars (subtle) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* Hide scrollbar on horizontal photo strips */
.no-sb::-webkit-scrollbar { display: none; }
.no-sb { scrollbar-width: none; }