/* --- Booking Header Section --- */

.booking {
  text-align: center;
  padding-top: 40px;
}

.booking h1 {
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 2px;
}

/* ===========================
LOGIN LINKS
=========================== */

.login-links {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;

  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.login-links a {
  text-decoration: none;
  color: #555;
  transition: 0.3s;
}

.login-links a:hover {
  color: #000;
  letter-spacing: 3px;
}

.login-links span {
  opacity: 0.5;
}

/* ===========================
SCHEDULE PAGE
=========================== */

.schedule-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
}

.schedule-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 40px;
}

/* ===========================
CLASS CARD
=========================== */

.schedule-row {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 300px;
}

/* Text Side */

.schedule-info {
  flex: 1;
  padding: 40px;
  background: white;
}

/* Image Side */

.schedule-img {
  flex: 1;
  height: 300px;
  overflow: hidden;
}

.schedule-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Reverse Cards */

.schedule-row.reverse {
  flex-direction: row-reverse;
}

/* ===========================
TEXT
=========================== */

.schedule-info h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.class-desc {
  color: #666;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

/* ===========================
TIME BUTTONS
=========================== */

.time-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.slot {
  display: block;
  padding: 12px 20px;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  color: var(--primary-color);
  transition: 0.3s;
}

.call-slot {
  display: inline-block;
  padding: 14px 26px;
  border: 2px solid var(--primary-color);
  border-radius: 30px;
  color: var(--primary-color);
  font-size: 13px;
  letter-spacing: 1px;
  transition: 0.3s;
}

.call-slot:hover {
  background: var(--primary-color);
  color: var(--white);
}

.schedule-note {
  max-width: 600px;
  margin: 0 auto 40px;
  text-align: center;
  color: #777;
  line-height: 1.7;
}

.slot:hover {
  background: var(--accent-color);

  color: white;
}

/* ===========================
MOBILE RESPONSIVE
=========================== */

@media (max-width: 700px) {
  .booking {
    padding-top: 30px;
  }

  .booking h1 {
    font-size: 26px;
  }

  .schedule-page {
    padding: 40px 15px;
  }

  .schedule-row,
  .schedule-row.reverse {
    flex-direction: column;
  }

  .schedule-info,
  .schedule-img {
    width: 100%;

    flex: none;
  }

  .schedule-info {
    padding: 25px;

    text-align: center;
  }

  .schedule-img {
    height: 220px;
  }

  .schedule-title {
    font-size: 1.8rem;

    margin-bottom: 30px;
  }

  .slot {
    font-size: 0.85rem;
  }
}