/* ============================================================
   SHOOT DATE RANGE PICKER — contact.html only
   ------------------------------------------------------------
   Hand-rolled rather than pulled from a library: the whole site
   ships ~4KB of JS against a 150KB first-load budget, and every
   date library worth using costs more than the rest of the site
   put together.

   The text input stays a real input. If the script does not run,
   it is still typeable and the form still submits, which is why
   it is not set readonly in the markup.
   ============================================================ */

.dp-wrap{position:relative}

.dp-pop{
  position:absolute;z-index:60;top:calc(100% + .5rem);left:0;
  background:#0e0e10;
  border:1px solid var(--line);
  border-radius:10px;
  padding:clamp(.9rem,2vw,1.15rem);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  display:none;
}
.dp-wrap.open .dp-pop{display:block}

.dp-months{display:flex;gap:clamp(1rem,2.4vw,1.8rem)}

.dp-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.7rem;
}
.dp-title{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
}
.dp-nav{
  width:30px;height:30px;flex:0 0 30px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:6px;
  color:#fff;cursor:pointer;padding:0;
  transition:border-color .25s ease,background .25s ease;
}
.dp-nav:hover:not(:disabled){border-color:rgba(255,255,255,.4);background:#141416}
.dp-nav:disabled{opacity:.28;cursor:default}
.dp-nav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.dp-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.dp-dow{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim-2);
  text-align:center;padding-bottom:.45rem;
}

/* the cell is the highlight track, the button is the hit target. Splitting
   them is what lets the range colour run edge to edge with no gaps. */
.dp-cell{position:relative}
.dp-cell.in-range::before{
  content:"";position:absolute;inset:2px -1px;
  background:rgba(228,25,126,.16);
}
.dp-cell.edge-start::before{border-radius:6px 0 0 6px;inset:2px -1px 2px 2px}
.dp-cell.edge-end::before{border-radius:0 6px 6px 0;inset:2px 2px 2px -1px}
.dp-cell.only::before{border-radius:6px;inset:2px}

.dp-d{
  position:relative;z-index:1;
  width:100%;min-height:34px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:6px;
  font:inherit;font-size:.82rem;color:rgba(255,255,255,.9);
  cursor:pointer;padding:0;
  transition:background .2s ease,color .2s ease;
}
.dp-d:hover:not(:disabled){background:rgba(255,255,255,.09)}
.dp-d:disabled{color:rgba(255,255,255,.22);cursor:default}
.dp-d.sel{background:var(--accent);color:#0a0a0b;font-weight:600}
.dp-d.today{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.dp-d:focus-visible{outline:2px solid var(--mag);outline-offset:1px}

.dp-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:.8rem;padding-top:.75rem;
  border-top:1px solid var(--line);
}
.dp-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim-2)}
.dp-btn{
  background:none;border:1px solid var(--line);border-radius:999px;
  color:#fff;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.5rem .9rem;min-height:34px;cursor:pointer;
  transition:border-color .25s ease,background .25s ease;
}
.dp-btn:hover{border-color:rgba(255,255,255,.45);background:#141416}
.dp-btn.pri{background:var(--accent);border-color:transparent;color:#0a0a0b;font-weight:600}

/* one month on a phone, and the panel goes full width of the field */
@media (max-width:620px){
  .dp-months{flex-direction:column;gap:1.1rem}
  .dp-pop{left:0;right:0}
  .dp-d{min-height:40px;font-size:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .dp-d,.dp-nav,.dp-btn{transition:none}
}
