/* ============================================================
   Studio X Ottawa — Calendar Styling (Final)
   ============================================================ */

/* ===== Base layout ===== */
.studiox-calendar-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px;
}

/* ===== Filter bar ===== */
.sx-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 20px auto 15px;
}

.sx-filters select {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.sx-filters select:hover {
  border-color: #e91e63;
  box-shadow: 0 0 5px rgba(233, 30, 99, 0.3);
}

/* ===== Calendar container ===== */
#studiox-public-calendar {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 10px;
  min-height: 600px;
}

/* ===== Ensure FullCalendar layout shows ===== */
.fc, .fc-media-screen, .fc-theme-standard {
  display: block !important;
  width: 100% !important;
  min-height: 600px !important;
}

/* ===== Toolbar ===== */
.fc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px !important;
  font-family: "Poppins", sans-serif;
}

.fc-toolbar-title {
  font-size: 18px;
  color: #222;
  font-weight: 600;
}

/* Buttons */
.fc-toolbar .fc-button {
  background-color: #e91e63 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  font-weight: 500;
  text-transform: capitalize;
  box-shadow: none !important;
  transition: background-color 0.2s, transform 0.1s;
}

.fc-toolbar .fc-button:hover {
  background-color: #c2185b !important;
  transform: translateY(-1px);
}

.fc-toolbar .fc-button-active {
  background-color: #1976d2 !important;
}

/* Today button distinct */
.fc-toolbar .fc-today-button {
  background-color: #fff !important;
  color: #e91e63 !important;
  border: 2px solid #e91e63 !important;
  font-weight: 600;
}
.fc-toolbar .fc-today-button:hover {
  background-color: #e91e63 !important;
  color: #fff !important;
}

/* ===== Events ===== */
.fc-daygrid-day-number {
  color: #222;
  font-weight: 500;
}
.fc-event {
  border-radius: 6px;
  border: none;
  padding: 2px 4px;
  font-size: 13px;
  color: #fff;
  transition: box-shadow 0.25s ease-in-out;
}
.fc-event:hover {
  box-shadow: 0 0 8px rgba(0,0,0,0.25);
}

/* Default colors */
.fc-event[data-category*="dance"] { background-color: #e91e63; }
.fc-event[data-category*="fitness"] { background-color: #1976d2; }
.fc-event[data-category*="rental"], .fc-event[data-category*="studio"] { background-color: #757575; }

/* ===== Tooltip ===== */
.sx-tooltip {
  position: absolute;
  background: rgba(33,33,33,0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999;
  animation: fadeIn 0.15s ease-in-out;
  font-family: "Poppins", sans-serif;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Legend ===== */
.sx-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 15px auto 10px;
  padding: 10px 15px;
  background: #f9f9fb;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #333;
}
.sx-legend-section {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sx-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
}
/* Category colors */
.sx-dot.sx-dance { background-color: #e91e63; }
.sx-dot.sx-fitness { background-color: #1976d2; }
.sx-dot.sx-rental { background-color: #757575; }
/* Capacity indicators */
.sx-dot.sx-green { background-color: #43a047; }
.sx-dot.sx-yellow { background-color: #fdd835; }
.sx-dot.sx-red { background-color: #e53935; }
/* Divider */
.sx-legend-divider {
  width: 1px;
  height: 20px;
  background: #ccc;
}

/* ===== Modal ===== */
.sx-event-modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn 0.2s ease-in-out;
}
.sx-event-modal-content {
  background: #fff;
  border-radius: 10px;
  max-width: 500px;
  width: 90%;
  padding: 25px 30px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  position: relative;
  text-align: left;
  font-family: "Poppins", sans-serif;
  color: #222;
}
.sx-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 26px;
  color: #666;
  cursor: pointer;
}
.sx-close-btn:hover { color: #e91e63; }
.sx-event-modal-content h2 { margin: 0 0 10px 0; }
.sx-event-modal-content p { margin: 6px 0; line-height: 1.5; }
.sx-event-link {
  display: inline-block;
  margin-top: 12px;
  background: #e91e63;
  color: #fff;
  padding: 6px 12px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 500;
}
.sx-event-link:hover { background: #c2185b; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sx-filters { flex-direction: column; gap: 8px; }
  .fc-toolbar-title { font-size: 16px; text-align: center; width: 100%; }
  .fc-toolbar { justify-content: center; }
  .fc-toolbar .fc-button { padding: 5px 10px !important; font-size: 13px; }
  .sx-legend { flex-direction: column; gap: 10px; text-align: center; }
  .sx-legend-divider { display: none; }
}