.tiles-container {
  max-width: 100% !important;
  width: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  box-sizing: border-box;
}

.container {
  width: 100% !important;
  max-width: none !important;

  padding: 0 30px !important;

  box-sizing: border-box;
}


/* =========================================================
   Countdown page
   ========================================================= */

.countdown-page {
  grid-column: 1 / -1;

  width: 100%;
  max-width: none;

  margin: 0;

  padding:
    0
    24px
    48px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  box-sizing: border-box;
}


/* =========================================================
   Filter row
   Matches video_study.css resource pills
   ========================================================= */

.countdown-filters {
  display: flex;

  gap: 10px;

  width: 100%;

  margin:
    5px
    0
    38px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  box-sizing: border-box;
}

.countdown-filters::-webkit-scrollbar {
  display: none;
}


/* =========================================================
   Filter pills
   Exact styling from video_study.css
   ========================================================= */

.countdown-filter {
  --btn-color: #0F4D0F;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;   /* thinner vertically */
  color: var(--btn-color);
  background: #ffffff;
  border:
    1px
    solid
    var(--btn-color);
  border-radius: 999px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    all
    0.2s
    ease-in-out;
}

/* Mobile — 1px border */
@media (max-width: 767px) {
    .countdown-filter {
        border-width: 1px;
    }
}


/* =========================================================
   Filter hover
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

  .countdown-filter:hover {
    color: #ffffff;

    background: var(--btn-color);
  }

}


/* =========================================================
   Active filter
   Same as video-study active pill
   ========================================================= */

.countdown-filter--active {
  color: #ffffff;

  background: #0f4d0f;

  border-color: #0f4d0f;
}


/* =========================================================
   Desktop
   Equal-width filter buttons
   ========================================================= */

@media (min-width: 769px) {

  .countdown-filter {
    flex:
      1
      1
      0 !important;

    min-width: 200px;

    text-align: center;
  }

}


/* =========================================================
   Countdown sections
   ========================================================= */

.countdown-section {
  width: 100%;
}


/*
  Spacing between each exam section.
*/
.countdown-section:not(:last-child) {
  margin-bottom: 64px;
}


/* =========================================================
   Header
   ========================================================= */

.countdown-header {
  margin-bottom: 28px;

  text-align: center;
}

.countdown-header h1 {
  margin: 0;

  color: #0f4d0f;

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.5rem
    );

  font-weight: 700;
}


/* =========================================================
   Countdown grid
   ========================================================= */

.exam-countdowns {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 18px;

  width: 100%;

  margin: 0 auto;
}


/* =========================================================
   Countdown card
   ========================================================= */

.exam-countdown-card {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: space-between;

  width: 100%;

  aspect-ratio: 1 / 0.5;
  

  padding:
    22px
    18px;

  text-align: center;

  background: #ffffff;

  border:
    1px
    solid
    #d0d5dd;

  border-radius: 18px;

  box-shadow:
    0
    6px
    18px
    rgba(15, 23, 42, 0.07);

  box-sizing: border-box;
}


/* =========================================================
   Paper title
   ========================================================= */

.exam-countdown-card__title {
  margin: 0;

  color: #101828;

  font-size: 1.15rem;
  font-weight: 700;
}


/* =========================================================
   Number + days until
   ========================================================= */

.exam-countdown-card__number-wrap {
  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 5px;

  margin:
    auto
    0;
}

.exam-countdown-card__number {
  color: #0f4d0f;

  font-size: 3.4rem;
  font-weight: 800;

  line-height: 1;
}

.exam-countdown-card__unit {
  color: #667085;

  font-size: 0.9rem;
  font-weight: 600;

  line-height: 1.1;
}


/* =========================================================
   Date
   ========================================================= */

.exam-countdown-card__date {
  margin: 0;

  color: #475467;

  font-size: 0.95rem;
  font-weight: 600;
}


/* =========================================================
   Hidden section
   ========================================================= */

.countdown-section[hidden] {
  display: none;
}


/* =========================================================
   Tablet / mobile
   ========================================================= */

@media (max-width: 768px) {

  .container {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 15px !important;
    padding-right: 15px !important;

    box-sizing: border-box;
  }


  .countdown-page {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      0
      16px
      48px;
  }


  /*
    Same behaviour as video-study pills:
    compact buttons in a horizontal scroll row.
  */
  .countdown-filters {
    justify-content: flex-start;
    flex-wrap: nowrap;

    gap: 10px;

    margin-bottom: 32px;

    padding-right: 10px;
    padding-bottom: 2px;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
  }


  .countdown-filters::-webkit-scrollbar {
    display: none;
  }

  .countdown-filter {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: auto;
      padding: 11px 16px;
      font-size: 15px;
    }

  .countdown-section:not(:last-child) {
    margin-bottom: 52px;
  }

  .exam-countdowns {
    gap: 12px;
  }

  .exam-countdown-card {
    padding:
      18px
      14px;
  }

  .exam-countdown-card__title {
    font-size: 1rem;
  }

  .exam-countdown-card__number {
    font-size: 2.8rem;
  }

  .exam-countdown-card__date {
    font-size: 0.85rem;
  }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 480px) {

  .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  .countdown-page {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      0
      14px
      36px;
  }


  .countdown-filters {
    margin-bottom: 28px;
  }


  .countdown-section:not(:last-child) {
    margin-bottom: 42px;
  }


  .countdown-header {
    margin-bottom: 22px;
  }


  .countdown-header h1 {
    font-size: 1.55rem;
  }


  .exam-countdowns {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  /*
    Shorter cards when vertically stacked.
  */
  .exam-countdown-card {
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    min-height: 200px;
    padding: 18px;
    border-radius: 16px;
  }


  .exam-countdown-card__title {
    font-size: 1.05rem;
  }


  .exam-countdown-card__number {
    font-size: 3rem;
  }


  .exam-countdown-card__unit {
    font-size: 0.8rem;
  }


  .exam-countdown-card__date {
    font-size: 0.9rem;
  }

}

/* =========================================================
   Results Day — Purple Theme
   ========================================================= */

/* Results Day heading */
.countdown-section[data-exam-section="results"]
.countdown-header h1 {
  color: #6b21a8;
}


/* Results Day countdown numbers */
.countdown-section[data-exam-section="results"]
.exam-countdown-card__number {
  color: #6b21a8;
}


/* Results Day filter button — not selected */
.countdown-filter[data-countdown-filter="results"] {
  --btn-color: #4d1879;

  color: #4d1879;

  background: #ffffff;

  border-color: #4d1879;
}


/* Results Day filter button — selected */
.countdown-filter[data-countdown-filter="results"].countdown-filter--active {
  color: #ffffff;

  background: #4d1879;

  border-color: #4d1879;
}


/* Results Day filter hover */
@media (hover: hover) and (pointer: fine) {

  .countdown-filter[data-countdown-filter="results"]:hover {
    color: #ffffff;

    background: #4d1879;

    border-color: #4d1879;
  }

}