/* FullCalendar overrides — Catppuccin Frappé */
#booking-calendar {
  margin: 0;
  background: #292c3c;
  border: 1px solid #414559;
  border-radius: 12px;
  padding: 8px 10px 4px;
}

.fc {
  background: #292c3c;
  color: #c6d0f5;
  font-size: 0.8rem !important;
}

.fc .fc-toolbar-title {
  color: #c6d0f5;
  font-weight: 700;
  font-size: 1rem !important;
}

.fc .fc-button-primary {
  background: #414559;
  border-color: #51576d;
  color: #c6d0f5;
  font-size: 0.75rem !important;
  padding: 2px 8px !important;
}

.fc .fc-button-primary:hover {
  background: #51576d;
  border-color: #62688d;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
  background: #8caaee;
  border-color: #8caaee;
  color: #232634;
}

.fc .fc-daygrid-day-number {
  color: #a5adce;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 1px 3px;
  width: 100%;
  text-align: center;
}

.fc .fc-daygrid-day-frame {
  min-height: 50px;
}

.fc .fc-daygrid-day-events {
  min-height: 0;
}

.fc .fc-daygrid-day.fc-day-today {
  background: rgba(140, 170, 238, 0.08);
}

.fc .fc-col-header-cell-cushion {
  color: #838ba7;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fc-day-selected {
  background: rgba(140, 170, 238, 0.15) !important;
  outline: 2px solid #8caaee;
  outline-offset: -2px;
  border-radius: 4px;
}

.fc .fc-daygrid-bg-harness .fc-bg-event {
  opacity: 0;
}

.fc .fc-scrollgrid {
  border-color: #414559;
}

.fc .fc-scrollgrid-section > td {
  border-color: #414559;
}

.fc th {
  border-color: #414559;
}

.fc td {
  border-color: #414559;
}

.fc .fc-daygrid-more-link {
  color: #8caaee;
}

/* Cross out dates with no slots or in the past — same color as normal */
.fc .fc-day-past,
.fc .fc-day-past .fc-daygrid-day-number,
.fc-daygrid-day.past-date,
.fc-daygrid-day.past-date .fc-daygrid-day-number,
.fc-daygrid-day.no-slots,
.fc-daygrid-day.no-slots .fc-daygrid-day-number {
  opacity: 1 !important;
  color: #a5adce;
  background: transparent;
}

.fc-daygrid-day.past-date .fc-daygrid-day-number,
.fc-daygrid-day.no-slots .fc-daygrid-day-number {
  text-decoration: line-through;
}

/* Two-column widget layout */
#booking-widget {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 768px) {
  #booking-widget {
    grid-template-columns: 1fr;
  }
}

/* Right column */
#booking-sidebar {
  background: #292c3c;
  border: 1px solid #414559;
  border-radius: 12px;
  padding: 16px;
}

#booking-sidebar-header {
  margin-bottom: 12px;
}

#booking-sidebar-header .selected-date {
  color: #c6d0f5;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0;
}

#booking-sidebar-header .prompt {
  color: #737994;
  font-size: 0.85rem;
  margin: 0;
}

/* Time slots */
#time-slots {
  margin: 0 0 12px;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

.tz-note {
  color: #a5adce;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: #303446;
  border: 1px solid #414559;
  border-radius: 6px;
  text-align: center;
}

.slot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.slot-chip {
  width: 100%;
  padding: 8px 10px;
  background: #303446;
  border: 1px solid #414559;
  border-radius: 6px;
  color: #c6d0f5;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  text-align: center;
}

.slot-chip:hover {
  border-color: #51576d;
  background: #363a4f;
}

.slot-chip.selected {
  border-color: #8caaee;
  background: rgba(140, 170, 238, 0.1);
  outline: 2px solid #8caaee;
  outline-offset: -2px;
}

.slot-chip-time {
  font-weight: 600;
  white-space: nowrap;
}


.slots-empty {
  color: #737994;
  font-size: 0.85rem;
  padding: 16px 0;
}

#time-slots.hidden {
  display: none;
}

/* Booking form */
#booking-form {
  margin: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease;
}

#booking-form.hidden {
  display: none;
}

#selected-slot-info {
  background: #303446;
  border: 1px solid #414559;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: #c6d0f5;
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-ghost {
  background: none;
  border: 1px solid #51576d;
  color: #838ba7;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.btn-ghost:hover {
  border-color: #8caaee;
  color: #8caaee;
}

.booking-field {
  margin-bottom: 10px;
}

.booking-field label {
  display: block;
  color: #a5adce;
  font-size: 0.78rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.booking-field input {
  width: 100%;
  padding: 8px 10px;
  background: #303446;
  border: 1px solid #414559;
  border-radius: 5px;
  color: #c6d0f5;
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
}

.booking-field input:focus {
  outline: none;
  border-color: #8caaee;
}

#booking-error {
  color: #e78284;
  font-size: 0.8rem;
  margin-bottom: 10px;
}

#booking-error.hidden {
  display: none;
}

/* Booking manage page */
.booking-manage-card {
  max-width: 560px;
  margin: 40px auto;
  background: #292c3c;
  border: 1px solid #414559;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
}

.booking-manage-card h2 {
  margin: 0 0 8px 0;
  color: #c6d0f5;
  font-weight: 900;
  font-size: 1.5rem;
}

.booking-manage-card .status-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}

.status-badge.confirmed {
  background: rgba(166, 209, 137, 0.12);
  color: #a6d189;
}

.status-badge.cancelled {
  background: rgba(231, 130, 132, 0.12);
  color: #e78284;
}

.booking-detail-row {
  text-align: left;
  padding: 12px 0;
  border-bottom: 1px solid #414559;
}

.booking-detail-row:last-child {
  border-bottom: none;
}

.booking-detail-row .label {
  font-size: 0.8rem;
  color: #838ba7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.booking-detail-row .value {
  font-size: 0.95rem;
  color: #c6d0f5;
  font-weight: 600;
}

.btn-danger {
  background: #e78284;
  color: #232634;
  border: 2px solid #e78284;
  padding: 14px 36px;
  font-size: 0.95rem;
  font-weight: 900;
  text-transform: uppercase;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  margin-top: 20px;
}

.btn-danger:hover {
  background: transparent;
  color: #e78284;
}

/* Confirmation page card */
.booking-confirmed-card {
  max-width: 560px;
  margin: 0 auto;
  background: #292c3c;
  border: 1px solid #414559;
  border-radius: 12px;
  padding: 48px 40px;
}

.booking-checkmark {
  font-size: 3rem;
  color: #a6d189;
  margin-bottom: 12px;
  line-height: 1;
}

.booking-confirmed-card h2 {
  margin: 0 0 8px 0;
  color: #c6d0f5;
  font-weight: 900;
  font-size: 1.5rem;
}

.confirmed-subtitle {
  color: #a5adce;
  margin: 0 0 28px 0;
  font-size: 1rem;
}

.confirmed-details {
  text-align: left;
  background: #303446;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
}

.confirmed-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #414559;
}

.confirmed-row:last-child {
  border-bottom: none;
}

.confirmed-label {
  font-size: 0.8rem;
  color: #838ba7;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.confirmed-value {
  font-size: 0.95rem;
  color: #c6d0f5;
  font-weight: 600;
  text-align: right;
}

.confirmed-note {
  color: #737994;
  font-size: 0.85rem;
  margin: 0 0 32px 0;
}

.confirmed-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}