/* =====================================
   FLIP CARD – HEIGHT LOCK (CRITICAL)
   ===================================== */

.course-details__sidebar {
  height: 100%;
}

.flip-card-sidebar {
  height: 100%;
  perspective: 1200px;
}

.flip-card-inner {
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-front,
.flip-back {
  height: 100%;
  backface-visibility: hidden;
}

.flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  overflow-y: auto; /* scroll INSIDE card */
}

/* =====================================
   CONTACT FORM – FIT & POLISH
   ===================================== */

.flip-back .contact-card {
  height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

/* Title */
.flip-back .contact-card h5 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

/* Form fills available height */
.flip-back .join-card {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Inputs */
.flip-back .join-card .form-control {
  height: 44px;
  font-size: 14px;
  border-radius: 10px;
}

/* Button pinned to bottom */
.flip-back .join-card .btn {
  margin-top: auto;
  height: 46px;
  font-size: 15px;
  border-radius: 12px;
}


/* ===========================
   SIDEBAR STRUCTURE
=========================== */

.course-details__sidebar {
  height: 100%;
}

.sidebar-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Top sidebar */
.sidebar-top {
  flex-shrink: 0;
}

/* Bottom sidebar (flip area) */
.sidebar-bottom {
  position: relative;
  min-height: 260px;
  perspective: 1200px;
}

/* ===========================
   FLIP LOGIC
=========================== */

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
  overflow-y: auto;
}

/* ===========================
   CONTACT FORM (FROM YOU)
=========================== */

.contact-card {
  height: 100%;
  padding: 24px;
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

.contact-card h5 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  text-align: center;
}

.join-card {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.join-card .form-control {
  height: 44px;
  font-size: 14px;
  border-radius: 10px;
}

.join-card .btn {
  margin-top: auto;
  height: 46px;
  font-size: 15px;
  border-radius: 12px;
}

/* ===== SIDEBAR FLIP CARD ===== */
.sidebar-bottom {
  position: relative;
  height: 450px;
  perspective: 1200px;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-inner.is-flipped {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.flip-back {
  transform: rotateY(180deg);
}

/* ===== DETAILS ROW ===== */
.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #ddd;
}