/* =====================================================================
   L.A. ELITE — FLOATING FORECAST DOCK  ·  styles (single source of truth)
   ---------------------------------------------------------------------
   Docked to the BOTTOM of the viewport on every quote surface so the
   customer can see the next 10 days WHILE they pick a service date —
   that is the whole point of it: an informed schedule choice, not a
   decoration they scroll past once.

   Bottom, not top: the top edge already carries the sticky header, the
   running-estimate pill, the floating service selector and the Help
   button. The bottom edge was empty.

   Paired with weather-dock.js — these two files replace the inline copies
   that used to live in BOTH index.html and packages.html.
   ===================================================================== */

.wxd{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: rgba(250,247,241,0.93);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15);
  border-top: 1px solid rgba(184,147,90,0.34);
  box-shadow: 0 -10px 30px -18px rgba(50,38,15,0.55);
  transform: translateY(0); transition: transform .3s cubic-bezier(.22,1,.36,1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.wxd *{ box-sizing: border-box; }

/* ---- the always-visible handle row: label + selected day + collapse ---- */
/* Centred on the dock itself. The toggle is taken OUT of the flow (absolute) so it
   cannot shift the text off-centre, and the padding is symmetric so the line sits in
   the true middle rather than the middle of what's left over. */
.wxd__bar{
  display: flex; align-items: center; justify-content: center;
  padding: 0.36rem 2.3rem 0.32rem; cursor: pointer; user-select: none;
  position: relative; z-index: 1; min-height: 26px;
}
.wxd__line{
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 0 0.34rem; text-align: center;
}
.wxd__label{
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a6d3f; white-space: nowrap;
}
/* No ellipsis: it WRAPS. "Partly Cl…" tells the customer nothing, which is the
   opposite of the point of putting a forecast in front of them. */
.wxd__sel{ font-size: 0.72rem; color: #4a453d; }
.wxd__sel::before{ content: "·"; color: #c3b79f; margin-right: 0.3rem; }
.wxd__sel:empty::before{ content: none; }
.wxd__sel b{ font-family: 'Playfair Display', Georgia, serif; color: #8a6d3f; font-weight: 600; }
.wxd__toggle{
  position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border: 1px solid rgba(184,147,90,0.45);
  border-radius: 50%; background: linear-gradient(180deg,#fff,#f3ecdf); cursor: pointer;
  display: grid; place-items: center; padding: 0; color: #8a6d3f;
}
.wxd__toggle svg{ width: 11px; height: 11px; transition: transform .3s cubic-bezier(.22,1,.36,1); }

/* ---- the scrolling day strip ---- */
.wxd__strip{
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 0.7rem 0.55rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; position: relative; z-index: 1;
}
.wxd__strip::-webkit-scrollbar{ display: none; }
.wxd__loading{ font-size: 0.74rem; color: #8b857b; padding: 0.2rem 0 0.55rem; }

.wxd__day{
  flex: 0 0 auto; width: 54px; text-align: center; cursor: pointer;
  background: linear-gradient(180deg,#fff,#f7f2e8); border: 1px solid rgba(184,147,90,0.22);
  border-radius: 10px; padding: 5px 3px 6px;
  box-shadow: inset 0 1px 0 #fff; transition: box-shadow .2s, transform .15s;
}
.wxd__day:hover{ transform: translateY(-2px); }
.wxd__day:focus-visible{ outline: 2px solid #8a6d3f; outline-offset: 2px; }
.wxd__day .d{ font-size: .54rem; letter-spacing: .06em; text-transform: uppercase; color: #8b857b; font-weight: 600; }
.wxd__day .ic{ line-height: 0; margin: 2px 0 3px; }
.wxd__day .ic svg{ width: 26px; height: 26px; display: inline-block; overflow: visible; }
.wxd__day .hi{ font-weight: 600; font-size: .74rem; color: #2b2620; }
.wxd__day .lo{ font-size: .64rem; color: #a09a90; }
.wxd__day.is-today{ border-color: rgba(184,147,90,0.6); }
.wxd__day.is-sel{ border-color: #8a6d3f; box-shadow: inset 0 0 0 1.5px #8a6d3f, 0 6px 14px -8px rgba(120,90,40,.6); }
.wxd__day.wx-clear{ background: linear-gradient(180deg,#fdf8ef,#f5eede); }
.wxd__day.wx-cloud{ background: linear-gradient(180deg,#f8f5ef,#eee8dc); }
.wxd__day.wx-rain{  background: linear-gradient(180deg,#f2f3f3,#e4e6e4); }
.wxd__day.wx-storm{ background: linear-gradient(180deg,#f0f0f0,#e0e0e0); }

/* ---- collapsed: only the handle row remains reachable ---- */
.wxd.is-collapsed .wxd__strip{ display: none; }
/* open = down-caret ("hide it"); collapsed = flipped to an up-caret ("bring it back") —
   the arrow shows the ACTION, not the current state */
.wxd.is-collapsed .wxd__toggle svg{ transform: rotate(180deg); }

/* ---- credit ---- */
.wxd__credit{ text-align: right; font-size: .56rem; padding: 0 0.7rem 0.3rem; position: relative; z-index: 1; }
.wxd__credit a{ color: #b3aea5; text-decoration: none; }
.wxd__credit a:hover{ color: #8a6d3f; }
.wxd.is-collapsed .wxd__credit{ display: none; }

/* ---- living sky backdrop, tinted to the SELECTED day ---- */
.wxd{ overflow: hidden; }
.wxd__sky{ position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: background .8s ease; }
.wxd__sky--clear{  background: radial-gradient(120% 160% at 88% 0%, rgba(248,221,147,.42), rgba(255,255,255,0) 60%); }
.wxd__sky--partly{ background: radial-gradient(120% 160% at 88% 0%, rgba(248,221,147,.24), rgba(255,255,255,0) 58%); }
.wxd__sky--cloud{  background: linear-gradient(180deg, rgba(222,221,211,.4), rgba(255,255,255,0)); }
.wxd__sky--fog{    background: linear-gradient(180deg, rgba(216,214,207,.45), rgba(255,255,255,0)); }
.wxd__sky--rain{   background: linear-gradient(180deg, rgba(211,216,218,.5), rgba(255,255,255,0)); }
.wxd__sky--storm{  background: linear-gradient(180deg, rgba(196,200,205,.55), rgba(255,255,255,0)); }
.wxd__sky--snow{   background: linear-gradient(180deg, rgba(224,229,232,.5), rgba(255,255,255,0)); }
.wxd__sky--night{  background: radial-gradient(120% 160% at 88% 0%, rgba(180,190,225,.4), rgba(255,255,255,0) 60%); }

/* ---- icon animation (shared with the tiles) ---- */
@keyframes wxd-spin{ to{ transform: rotate(360deg); } }
@keyframes wxd-pulse{ 0%,100%{ opacity:.18; transform: scale(1);} 50%{ opacity:.34; transform: scale(1.12);} }
@keyframes wxd-shim{ 0%,100%{ opacity:.5;} 50%{ opacity:1;} }
@keyframes wxd-drift{ 0%,100%{ transform: translateX(-1px);} 50%{ transform: translateX(1.6px);} }
@keyframes wxd-fall{ 0%{ transform: translateY(-4px); opacity:0;} 25%{ opacity:1;} 100%{ transform: translateY(8px); opacity:0;} }
@keyframes wxd-snowf{ 0%{ transform: translateY(-4px); opacity:0;} 25%{ opacity:1;} 100%{ transform: translateY(9px); opacity:0;} }
@keyframes wxd-flash{ 0%,90%,100%{ opacity:.18;} 93%,97%{ opacity:1;} }
.wxd .wx-glow{ transform-box: fill-box; transform-origin: center; animation: wxd-pulse 4s ease-in-out infinite; }
.wxd .wx-rays{ transform-box: fill-box; transform-origin: center; animation: wxd-spin 24s linear infinite; }
.wxd .wx-rays-sm{ animation: wxd-shim 3s ease-in-out infinite; }
.wxd .wx-cloud-move{ transform-box: fill-box; transform-origin: center; animation: wxd-drift 7s ease-in-out infinite; }
.wxd .wx-drop{ transform-box: fill-box; animation: wxd-fall 1.3s linear infinite; }
.wxd .wx-flake{ transform-box: fill-box; animation: wxd-snowf 2.6s linear infinite; }
.wxd .wx-bolt{ transform-box: fill-box; transform-origin: center; animation: wxd-flash 3s steps(1,end) infinite; }
@media (prefers-reduced-motion: reduce){
  .wxd .wx-glow, .wxd .wx-rays, .wxd .wx-rays-sm, .wxd .wx-cloud-move,
  .wxd .wx-drop, .wxd .wx-flake, .wxd .wx-bolt{ animation: none !important; }
  .wxd, .wxd__toggle svg{ transition: none !important; }
}

/* Narrow phones: trim the tiles rather than let the dock eat the screen. */
@media (max-width: 420px){
  .wxd__day{ width: 48px; padding: 4px 2px 5px; }
  .wxd__day .ic svg{ width: 23px; height: 23px; }
  .wxd__label{ font-size: 0.55rem; letter-spacing: 0.1em; }
  .wxd__sel{ font-size: 0.68rem; }
}
/* Print: a fixed dock has no business on paper. */
@media print{ .wxd{ display: none !important; } }