/* Styles for pick-a-time-card.js. Written to slot into easyjobsite-site's assets/site.css design language (same
   custom-property names: --amber, --ink, --muted, --line, --shadow-sm, same .card/.btn/.btn-primary/.field/.form-grid
   base classes) rather than re-implement them – only the NEW classes below are defined here. See README.md for how
   wide the card should sit (~55%) in the two-card /contact layout. */
.pick-a-time-card { display: flex; flex-direction: column; gap: .9rem; }
.pick-a-time-tag {
  align-self: flex-start; text-transform: uppercase; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--amber-700, #9a6206); background: #fdf1dc; border: 1px solid #f4ddb2; border-radius: 999px; padding: .2rem .65rem;
}
.pick-a-time-week-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pick-a-time-week-label { font-weight: 650; font-size: .92rem; }
.pick-a-time-slot-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.pick-a-time-day { display: flex; flex-direction: column; gap: .35rem; }
.pick-a-time-day strong { font-size: .8rem; }
.pick-a-time-slot { width: 100%; justify-content: center; }
.pick-a-time-picked { background: #f3f8fc; border: 1px solid var(--line, #dbe4ec); border-radius: 10px; padding: .6rem .8rem; }
.pick-a-time-form .form-grid { margin-top: .6rem; }
@media (max-width: 640px) { .pick-a-time-slot-grid { grid-template-columns: repeat(2, 1fr); } }