body {
    font-family: 'Kanit', sans-serif;
}
.tab {
    padding-top: 1rem; padding-bottom: 1rem; padding-left: 0.25rem; padding-right: 0.25rem;
    border-bottom-width: 2px; border-color: transparent;
    font-weight: 500; font-size: 0.875rem; line-height: 1.25rem;
    color: #6b7280; white-space: nowrap;
}
.tab:hover { color: #4b5563; border-color: #d1d5db; }
.tab.active { border-color: #2563eb; color: #2563eb; }

.slot { transition: all 0.2s ease-in-out; cursor: pointer; }
.slot.available { background-color: #EFF6FF; border-color: #DBEAFE; color: #3B82F6; }
.slot.available:hover { transform: scale(1.05); box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); background-color: #DBEAFE; }
.slot.selected { background-color: #10B981 !important; color: white; border-color: #059669; font-weight: bold; }
.slot.booked { background-color: #FEE2E2; color: #EF4444; border-color: #FECACA; cursor: not-allowed; opacity: 0.9; }
.slot.locked { background-color: #E5E7EB; color: #6B7280; cursor: not-allowed; border-color: #D1D5DB; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.5), rgba(255,255,255,0.5) 10px, transparent 10px, transparent 20px); }
.slot.pending-verification { background-color: #FEF3C7; color: #D97706; border-color: #FDE68A; cursor: not-allowed; }

.modal { display: none; }
.modal.is-open { display: flex; }