/* =====================================
   FirstStep Class Schedule Layout
===================================== */

:root {
  --fs-cols: 120px 180px 180px 1fr 160px 120px 150px;
  --fs-gap: 20px;
  --fs-pad: 24px;
}

/* ------------------------------
   Header Row
------------------------------ */
.class-header-row {
  display: grid;
  grid-template-columns: var(--fs-cols);
  gap: var(--fs-gap);
  align-items: center;

  padding: 10px var(--fs-pad) 18px;
  border-bottom: 2px solid #eee;

  position: sticky;
  top: 80px;
  background: #fff;
  z-index: 50;

  font-weight: 600;
  font-size: 16px;
}

.header-col {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* ------------------------------
   Loop Row Container
------------------------------ */
.e-loop-item .e-con-inner {
  padding: 20px var(--fs-pad);
  border-bottom: 1px solid #ececec;
}

/* ------------------------------
   ACTUAL GRID (your controlled wrapper)
------------------------------ */
.class-row {
  display: grid;
  grid-template-columns: var(--fs-cols);
  gap: var(--fs-gap);
  align-items: center;
}

.class-row > * {
  min-width: 0;
}

/* Elementor widget wrappers can add spacing that throws off grid alignment */
.e-loop-item .e-con-inner .elementor-widget-container {
  margin: 0;
}

/* Align CTA consistently */
.class-header-row > :last-child,
.class-row > :last-child {
  justify-self: end;
}

/* ------------------------------
   Sort UI
------------------------------ */
.sort-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.sort-icon {
  font-size: 14px;
  opacity: 0.25;
}

.sort-icon.sort-active {
  opacity: 1;
  color: #BE1E5F;
}

/* ------------------------------
   Filter UI
------------------------------ */
.fs-filters {
  margin: 0 0 14px;
}

.fs-filters-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.fs-filter span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.fs-filter-select {
  min-width: 220px;
  height: 44px;
}

.fs-filter-reset {
  height: 44px;
  padding: 0 14px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

/* Mobile: stack and keep it tight */
@media (max-width: 768px){
  .fs-filter-select { min-width: 100%; width: 100%; }
  .fs-filter { width: 100%; }
  .fs-filter-reset { width: 100%; }
}
/* ------------------------------
   CTA Button
------------------------------ */
.fs-course-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

/* ------------------------------
   Row States
------------------------------ */
.elementor-loop-container > .elementor:nth-child(even) .e-con-inner {
  background: rgba(190, 30, 95, 0.05);
}

.elementor-loop-container > .elementor:hover .e-con-inner {
  background: #f6eef3;
  transition: background 0.2s ease;
}

/* ------------------------------
   Mobile
------------------------------ */
@media (max-width: 900px) {
  .class-header-row {
    display: none;
  }

  .class-row {
    display: block;
  }

  .e-loop-item .e-con-inner {
    padding: 16px;
  }

  .fs-course-btn {
    width: 100%;
    margin-top: 12px;
  }
}