/* Calendar styles for booking calendar */
.booking-calendar-table { border-collapse: collapse; width: 100%; }
.booking-calendar-table th { text-align: center; font-size: 0.75rem; padding: 6px 4px; color: #6b7280; }
.booking-calendar-table td { padding: 4px; vertical-align: middle; }
.calendar-day { background: transparent; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.calendar-day:hover { background: rgba(196,30,58,0.06); transform: translateY(-2px); }
.calendar-day.booked { background: #fee2e2; color: #991b1b; cursor: not-allowed; border-radius: 8px; }
.calendar-day.start { background: linear-gradient(90deg,#C41E3A,#8B0000); color: #fff; border-radius: 8px 4px 4px 8px; }
.calendar-day.end { background: linear-gradient(90deg,#8B0000,#C41E3A); color: #fff; border-radius: 4px 8px 8px 4px; }
.calendar-day.range { background: rgba(196,30,58,0.12); color: #8b0000; }
.calendar-day.partial { background: #fff7ed; color: #92400e; border-radius: 8px; }
.calendar-day { position: relative; }
.availability-badge { position: absolute; top: -6px; right: -6px; background: #ffedd5; color: #7c2d12; padding: 2px 6px; border-radius: 999px; border: 1px solid rgba(124,45,18,0.08); font-weight: 600; }
.calendar-cell { text-align: center; }

/* Disabled-range (dates beyond allowed checkout when start selected) */
.calendar-day.disabled-range { opacity: 0.5; cursor: not-allowed; filter: grayscale(20%); }

/* X mark for unavailable dates */
.x-mark { position: absolute; top: 4px; right: 6px; font-size: 12px; line-height: 1; color: rgba(0,0,0,0.6); pointer-events: none; }

/* Visual treatments requested */
.calendar-day.booked { background: #fee2e2; color: #991b1b; cursor: not-allowed; border-radius: 8px; text-decoration: line-through; }
.calendar-day.out-of-range { color: #9ca3af; text-decoration: line-through; background: transparent; }
.calendar-day.disabled-range { opacity: 0.35; }

/* Checkout-allowed: visually distinct and should NOT look booked */
.calendar-day.checkout-allowed { background: linear-gradient(90deg, rgba(28,163,165,0.12), rgba(99,102,241,0.06)); color: #064e3b; text-decoration: none; border: 1px dashed rgba(6,78,59,0.12); }

/* Legend styles */
#calendar-legend { font-size: 0.8rem; }
#calendar-legend span.w-3 { width: 0.75rem; height: 0.75rem; display: inline-block; }
.empty-day { height: 40px; }
.calendar-header { display: flex; gap: 12px; align-items: center; }
.calendar-header button { background: transparent; border: 1px solid #e5e7eb; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.calendar-title { font-weight: 600; }

/* responsive */
@media (max-width: 640px) {
  .calendar-day { width: 36px; height: 36px; }
}

/* Ensure table cells wrap and don't cause horizontal overflow on small screens */
@media (max-width: 900px) {
  .booking-calendar-table th { font-size: 0.72rem; padding: 4px 3px; }
  .booking-calendar-table td { padding: 3px 2px; font-size: 0.8rem; }
  .booking-calendar-table { table-layout: fixed; word-break: break-word; }
  .calendar-header { gap: 8px; }
}

/* Toast for inline calendar messages */
.calendar-toast { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.78); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 0.875rem; z-index: 60; opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; }
.calendar-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.calendar-toast.warn { background: #b45309; }
.calendar-toast.info { background: rgba(0,0,0,0.78); }