/* =========================================================================
   TSDP — the site's own date picker
   -------------------------------------------------------------------------
   A browser's native calendar popup cannot be styled at all: every rule in
   this file would be ignored by it. So the native <input type="date"> stays
   in the DOM — it is still the one true value, still `required`, still what
   every other script reads and writes — but it is made invisible and covered
   by a button we own, and that button opens the calendar built by
   js/datepicker.js.

   Nothing else on the site had to change: js/datepicker.js writes the value
   back to the native input and fires `change`, which is exactly what app.js
   and product.js already listen for.

   LOAD ORDER: this file must come AFTER styles.css and product.css. Several
   of the rules below deliberately undo `input[type="date"]` and `.pd-dates
   input` from those files, and they win on source order.
   ========================================================================= */

.tsdp-wrap{position:relative;display:block;min-width:0;}

/* The real input. Kept rendered (not display:none, not visibility:hidden) so
   the browser can still focus it and anchor its "please fill this out"
   bubble to the right spot when the Rent Now form is submitted empty. */
.tsdp-wrap input.tsdp-native{
  position:absolute;left:0;top:0;width:100%;height:100%;
  min-height:0;max-width:none;margin:0;padding:0;border:0;background:none;
  opacity:0;pointer-events:none;
}
/* Safari leaves the shadow-DOM value block sized even at opacity 0, which
   can push the wrapper wider than its column. */
.tsdp-wrap input.tsdp-native::-webkit-date-and-time-value{min-width:0;margin:0;}
.tsdp-wrap input.tsdp-native::-webkit-calendar-picker-indicator{display:none;}

/* ---- the field ---------------------------------------------------------- */
.tsdp-trigger{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:10px 12px;border-radius:10px;border:1.5px solid var(--ts-line,#E2E0DC);
  background:var(--ts-card,#fff);font-family:var(--ts-body,inherit);font-size:14px;
  line-height:1.2;color:var(--ts-ink,#111);text-align:left;cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.tsdp-trigger:hover{border-color:var(--ts-mute,#6B6864);}
.tsdp-trigger:focus-visible{outline:none;border-color:var(--ts-red,#B3121B);
  box-shadow:0 0 0 3px var(--ts-red-soft,#F5DEDD);}
.tsdp-wrap.is-open .tsdp-trigger{border-color:var(--ts-red,#B3121B);
  box-shadow:0 0 0 3px var(--ts-red-soft,#F5DEDD);}
.tsdp-ico{flex:0 0 auto;opacity:.5;}
.tsdp-wrap.is-open .tsdp-ico,
.tsdp-wrap.is-set .tsdp-ico{opacity:.75;color:var(--ts-red,#B3121B);}
.tsdp-val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-variant-numeric:tabular-nums;}
.tsdp-val.is-empty{color:var(--ts-mute,#6B6864);}
.tsdp-wrap.is-set .tsdp-val{font-weight:600;}

/* Context sizing. Each of the three places a date field appears already had
   its own look, and the button has to keep it. */
.ts-field .tsdp-trigger,
.ts-quote-dates .tsdp-trigger{padding:12px 14px;}
/* The gallery's two fields sat side by side because a native date input has
   an intrinsic width of its own. The button has none, so it would stretch
   and force the row to wrap - hence a width here. Below 620px styles.css
   stacks the fields anyway. */
.ts-date-field .tsdp-wrap{width:168px;}
@media(max-width:620px){.ts-date-field .tsdp-wrap{width:100%;}}
.pd-dates .tsdp-wrap{flex:0 1 142px;min-width:100px;}
.pd-dates .tsdp-trigger{padding:6px 9px;border-width:1px;border-radius:7px;
  font-size:13px;gap:6px;}
.pd-dates .tsdp-ico{width:13px;height:13px;}

/* ---- the calendar ------------------------------------------------------- */
.tsdp-pop{
  position:fixed;z-index:9000;width:302px;padding:12px;
  background:var(--ts-card,#fff);border:1px solid var(--ts-line,#E2E0DC);
  border-radius:16px;box-shadow:0 2px 6px rgba(17,17,17,.06),0 18px 44px rgba(17,17,17,.16);
  font-family:var(--ts-body,inherit);color:var(--ts-ink,#111);
  animation:tsdp-in .13s ease-out;
}
@keyframes tsdp-in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
.tsdp-pop[hidden]{display:none;}

.tsdp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.tsdp-title{
  flex:1 1 auto;display:flex;align-items:baseline;justify-content:center;gap:7px;
  background:none;border:0;cursor:pointer;padding:5px 8px;border-radius:9px;
  font-family:var(--ts-display,serif);font-size:16.5px;color:var(--ts-ink,#111);
}
.tsdp-title:hover{background:var(--ts-cloud,#F1F0EE);}
.tsdp-title span{font-family:var(--ts-mono,monospace);font-size:12px;color:var(--ts-mute,#6B6864);}
.tsdp-nav{
  flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;cursor:pointer;color:var(--ts-ink,#111);
}
.tsdp-nav:hover{background:var(--ts-cloud,#F1F0EE);}
.tsdp-nav:disabled{opacity:.25;cursor:default;background:none;}

.tsdp-dow{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:2px;}
.tsdp-dow span{
  text-align:center;font-family:var(--ts-mono,monospace);font-size:10px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ts-mute,#6B6864);
  padding:4px 0;
}

/* No gap between cells: the range tint lives on the cell, so a gap would
   break the highlight into stripes. The 2px of air around each day comes
   from the button inside instead. */
.tsdp-grid{display:grid;grid-template-columns:repeat(7,1fr);}
.tsdp-cell{position:relative;padding:1px 0;}
.tsdp-cell.in{background:var(--ts-red-soft,#F5DEDD);}
.tsdp-cell.in-start{border-radius:9px 0 0 9px;}
.tsdp-cell.in-end{border-radius:0 9px 9px 0;}
.tsdp-cell.in-start.in-end{border-radius:9px;}

.tsdp-day{
  position:relative;display:block;width:100%;height:36px;
  background:none;border:0;border-radius:9px;cursor:pointer;
  font-family:var(--ts-body,inherit);font-size:13.5px;color:var(--ts-ink,#111);
  font-variant-numeric:tabular-nums;transition:background .12s,color .12s;
}
.tsdp-day:hover{background:rgba(17,17,17,.07);}
.tsdp-day.off{color:var(--ts-mute,#6B6864);opacity:.45;}
.tsdp-day:disabled{color:var(--ts-mute,#6B6864);opacity:.3;cursor:default;background:none;}
/* Today reads as an outline, so it never competes with the filled selection. */
.tsdp-day.today{box-shadow:inset 0 0 0 1.5px var(--ts-line,#E2E0DC);font-weight:600;}
.tsdp-day.sel{background:var(--ts-red,#B3121B);color:#fff;font-weight:700;box-shadow:none;}
.tsdp-day.sel:hover{background:var(--ts-red,#B3121B);}
.tsdp-day:focus-visible{outline:2px solid var(--ts-red,#B3121B);outline-offset:-2px;}

/* Month / year jump, shown when the title is clicked. */
.tsdp-months{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:2px 0;}
.tsdp-mon{
  height:44px;background:none;border:0;border-radius:10px;cursor:pointer;
  font-family:var(--ts-body,inherit);font-size:13px;color:var(--ts-ink,#111);
}
.tsdp-mon:hover{background:var(--ts-cloud,#F1F0EE);}
.tsdp-mon.sel{background:var(--ts-red,#B3121B);color:#fff;font-weight:600;}

.tsdp-foot{
  display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:9px;
  border-top:1px solid var(--ts-line,#E2E0DC);
}
.tsdp-note{flex:1 1 auto;font-family:var(--ts-mono,monospace);font-size:11px;
  color:var(--ts-mute,#6B6864);min-width:0;}
.tsdp-act{
  background:none;border:0;cursor:pointer;padding:4px 6px;border-radius:7px;
  font-family:var(--ts-mono,monospace);font-size:11px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ts-mute,#6B6864);
}
.tsdp-act:hover{color:var(--ts-ink,#111);background:var(--ts-cloud,#F1F0EE);}
.tsdp-act.go{color:var(--ts-red,#B3121B);}

/* ---- phones: a sheet, not a popover ------------------------------------- */
.tsdp-back{position:fixed;inset:0;z-index:8999;background:rgba(17,17,17,.42);
  animation:tsdp-fade .15s ease-out;}
.tsdp-back[hidden]{display:none;}
@keyframes tsdp-fade{from{opacity:0;}to{opacity:1;}}
@media(max-width:560px){
  .tsdp-pop.sheet{
    left:0;right:0;bottom:0;top:auto;width:auto;max-width:none;
    border-radius:20px 20px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));
    animation:tsdp-up .18s ease-out;
  }
  @keyframes tsdp-up{from{transform:translateY(14px);opacity:.6;}to{transform:none;opacity:1;}}
  .tsdp-pop.sheet .tsdp-day{height:44px;font-size:15px;}
  .tsdp-pop.sheet .tsdp-title{font-size:18px;}
}

/* Someone who has asked their system for less motion gets none of it. */
@media(prefers-reduced-motion:reduce){
  .tsdp-pop,.tsdp-pop.sheet,.tsdp-back{animation:none;}
}