/* Available Dates widget: clickable, color-coded batch calendar.
   Shared across all tour pages (originally built/piloted on
   /tour/chardham-yatra/, then promoted here for reuse - see
   /js/available-dates.js for the matching behavior). */
.date-legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; color:#555; margin:8px 0 14px; }
.legend-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.legend-available { background:#16a34a; }
.legend-full { background:#dc2626; }
.date-item.date-available { cursor:pointer; border-color:#16a34a; background:#ecfdf5; color:#065f46; font-weight:700; }
.date-item.date-available:hover { background:#16a34a; color:#fff; border-color:#16a34a; }
.date-item.date-full { cursor:pointer; border-color:#fecaca; background:#fef2f2; color:#b91c1c; }
.date-item.date-full:hover { background:#fee2e2; border-color:#dc2626; }

#dateUnavailableModal { display:none; position:fixed; inset:0; background:rgba(15,23,42,0.55); z-index:5000; align-items:center; justify-content:center; padding:16px; }
#dateUnavailableModal.open { display:flex; }
#dateUnavailableModal .modal-box { background:#fff; border-radius:14px; padding:28px; max-width:380px; width:100%; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,0.25); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
#dateUnavailableModal .modal-icon { font-size:34px; margin-bottom:6px; }
#dateUnavailableModal h3 { margin:0 0 10px; font-size:18px; color:#1a1a1a; }
#dateUnavailableModal p { margin:0 0 20px; font-size:14px; color:#555; line-height:1.5; }
#dateUnavailableModal .modal-actions { display:flex; flex-direction:column; gap:10px; }
#dateUnavailableModal .btn-whatsapp { display:flex; align-items:center; justify-content:center; gap:8px; background:#25D366; color:#fff; text-decoration:none; padding:12px; border-radius:8px; font-weight:700; font-size:14.5px; }
#dateUnavailableModal .btn-whatsapp:hover { background:#1ebe5b; color:#fff; }
#dateUnavailableModal .btn-close-modal { background:none; border:none; color:#888; font-size:13.5px; cursor:pointer; padding:6px; }