/* --- UoP Countdown Panel (Side-by-Side Version) --- */
#uop-countdown-panel {
  width: 100%;
  max-width: 1400px;
  margin: 20px auto;
  background-color: #3C023C; /* Dark Purple */
  color: #FFFFFF;
  padding: 30px 40px;
  font-family: 'Encode Sans Expanded', sans-serif;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 0px;
  
  /* LAYOUT CONFIGURATION */
  display: flex;
  flex-direction: row; /* Aligns items side-by-side */
  justify-content: center; /* Centers the whole group */
  align-items: center; /* Vertically aligns title with numbers */
  gap: 50px; /* Large space between Title and Clock */
  box-sizing: border-box;
}

/* "Event Countdown" Title */
.uop-label {
  font-weight: 700;
  font-size: 1.5rem;
  font-family: 'Encode Sans Expanded', sans-serif;
  text-transform: none;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-align: left; /* Align text left */
  margin: 0;
  line-height: 1.2;
}

/* The Numbers */
.uop-timer {
  display: flex;
  gap: 30px; 
  font-size: 2.2rem; /* Slightly larger */
  font-weight: bold;
  color: #DBFF00; /* Campaign Yellow */
}

.uop-time-unit {
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.uop-time-unit span {
  font-size: 0.85rem;
  color: #FFFFFF; 
  font-weight: normal;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* --- MOBILE RESPONSIVENESS --- */
/* On screens smaller than 900px (Tablets/Phones), stack them again */
@media (max-width: 900px) {
  #uop-countdown-panel {
    flex-direction: column; /* Stack vertically */
    text-align: center;
    gap: 20px;
  }

  .uop-label {
    text-align: center;
  }
  
  .uop-timer {
    font-size: 1.8rem;
    gap: 20px;
  }
}