/* Main Countdown Clock Styles */
.countdown-clock {
  text-align: center;
  background-color: #F9F9F9;
  width: 100%;
  max-width: 1336px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

/* Countdown Layout */
.countdown-clock__header {
  padding: var(--wp--preset--spacing--x-small, 1rem) 0;
  position: relative;
}

.countdown-clock__title {
  margin: 0 auto;
  font-size: clamp(26.465px, 1.654rem + ((1vw - 3.2px) * 1.324), 45px);
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  font-family: 'Source Sans Pro', sans-serif;
  color: #1c4078;
  text-align: center;
  padding: 10px;
  max-width: 90%;
}

.countdown-clock__display {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  width: 100%;
  gap: 10px;
}

.countdown-clock__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  position: relative;
}

.countdown-clock__unit--months,
.countdown-clock__unit--days {
  border-right: 2px solid #707070;
  padding-right: 70px;
}

.countdown-clock__unit--days {
  padding-left: 70px;
}

.countdown-clock__unit--hours {
  padding-left: 70px;
  padding-right: 20px;
}

@media screen and (max-width: 600px) {
  .countdown-clock__unit--months,
  .countdown-clock__unit--days {
    border-right: none;
    padding-right: 10px;
  }

  .countdown-clock__unit--days {
    padding-left: 10px;
    padding-right: 10px;
  }

  .countdown-clock__unit--hours {
    padding-left: 10px;
    padding-right: 10px;
  }
  
}

/* Typography */
.countdown-clock__number {
  font-size: clamp(35px, 2.188rem + ((1vw - 3.2px) * 1.875), 60px);
  font-weight: 600;
  line-height: 1;
  color: #1c4078;
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

.countdown-clock__label {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: #707070;
  margin: 0;
  padding-top: 5px;
  font-family: 'Source Sans Pro', sans-serif;
}

.countdown-clock__note {
  font-style: italic;
  color: #707070;
  font-size: 0.875rem;
  margin-top: 10px;
  margin-bottom: 0;
  width: 100%;
  text-align: center;
}

/* Event phase messages */
.countdown-clock__message {
  padding: 15px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #707070;
  text-align: center;
  margin: 10px auto;
  font-family: 'Source Sans Pro', sans-serif;
  border-radius: 5px;
  max-width: 90%;
  min-width: fit-content;
  line-height: 1.4;
  transition: opacity 0.3s ease;
}

.countdown-clock__message-container {
  display: flex;
  flex-basis: auto;
  min-width: max-content;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



/* Expired message */
.countdown-clock__expired {
  padding: 15px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #707070;
  text-align: center;
  margin: 20px auto;
  font-family: 'Source Sans Pro', sans-serif;
  max-width: 90%;
  line-height: 1.4;
}

/* Font size variations */
.countdown-clock--small-text .countdown-clock__number {
  font-size: clamp(28px, 1.75rem + ((1vw - 3.2px) * 1.25), 45px);
}

.countdown-clock--small-text .countdown-clock__label {
  font-size: 0.875rem;
}

.countdown-clock--large-text .countdown-clock__number {
  font-size: clamp(42px, 2.625rem + ((1vw - 3.2px) * 2.5), 80px);
}

.countdown-clock--large-text .countdown-clock__label {
  font-size: 1.375rem;
}

.countdown-clock--xlarge-text .countdown-clock__number {
  font-size: clamp(56px, 3.5rem + ((1vw - 3.2px) * 3.125), 100px);
}

.countdown-clock--xlarge-text .countdown-clock__label {
  font-size: 1.625rem;
}

/* Style variations */
.countdown-clock--modern {
  border-radius: 0;
  /* Match the design in the images */
}

.countdown-clock--modern .countdown-clock__unit {
  background-color: transparent;
  margin: 0 5px;
  padding: 15px 25px;
  min-width: 100px;
}

.countdown-clock--boxed .countdown-clock__unit {
  border: 2px solid #707070;
  padding: 15px;
  margin: 0 10px;
  min-width: 110px;
}

.countdown-clock--minimal .countdown-clock__unit {
  padding: 0 15px;
}

.countdown-clock--minimal .countdown-clock__label {
  opacity: 0.7;
}

/* Shadow effect */
.countdown-clock--shadow {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Divider styles */
.countdown-clock--no-divider .countdown-clock__unit--months,
.countdown-clock--no-divider .countdown-clock__unit--days {
  border-right: none !important;
}

.countdown-clock--dot-divider .countdown-clock__unit--months,
.countdown-clock--dot-divider .countdown-clock__unit--days {
  border-right: none !important;
  position: relative;
}

.countdown-clock--dot-divider .countdown-clock__unit--months::after,
.countdown-clock--dot-divider .countdown-clock__unit--days::after {
  content: "•";
  position: absolute;
  right: 20px;
  font-size: 2rem;
  top: 50%;
  transform: translateY(-50%);
  color: #707070;
}

.countdown-clock--dash-divider .countdown-clock__unit--months,
.countdown-clock--dash-divider .countdown-clock__unit--days {
  border-right: none !important;
  position: relative;
}

.countdown-clock--dash-divider .countdown-clock__unit--months::after {
  right: 0px;
}

.countdown-clock--dash-divider .countdown-clock__unit--days::after {
  right: -20px;
}

.countdown-clock--dash-divider .countdown-clock__unit--months::after,
.countdown-clock--dash-divider .countdown-clock__unit--days::after {
  content: "-";
  position: absolute;
  
  font-size: 2rem;
  top: 50%;
  transform: translateY(-50%);
  color: #707070;
}

/* Responsive Styles */
@media (max-width: 1024px) {

  /* Tablet Layout */
  .countdown-clock__display {
    flex-basis: 100%;
    flex-wrap: nowrap;
    gap: 5px;
  }

  .countdown-clock__title {
    font-size: clamp(24px, 1.5rem + ((1vw - 3.2px) * 1), 36px);
  }

  .countdown-clock__unit--months,
  .countdown-clock__unit--days {
    border-right-width: 2px;
    padding-right: 30px;
  }

  .countdown-clock__unit--days {
    padding-left: 30px;
  }

  .countdown-clock__unit--hours {
    padding-left: 30px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {

  /* Small Tablet Layout */
  .countdown-clock__unit {
    max-width: 33%;
  }

  .countdown-clock__unit--months,
  .countdown-clock__unit--days {
    border-right-width: 1px;
    /* Thinner divider on mobile */
    padding-right: 20px;
  }

  .countdown-clock__unit--days {
    padding-left: 20px;
    padding-right: 20px;
  }

  .countdown-clock__unit--hours {
    padding-left: 20px;
    padding-right: 20px;
  }

  .countdown-clock__number {
    font-size: clamp(28px, 1.75rem + ((1vw - 3.2px) * 1.25), 45px);
  }

  .countdown-clock__message {
    font-size: 1.125rem;
    padding: 12px;
  }

  .countdown-clock--dot-divider .countdown-clock__unit--months::after,
  .countdown-clock--dot-divider .countdown-clock__unit--days::after,
  .countdown-clock--dash-divider .countdown-clock__unit--months::after,
  .countdown-clock--dash-divider .countdown-clock__unit--days::after {
    right: 5px;
  }
}

/* Small mobile devices */
@media (max-width: 480px) {
  .countdown-clock__display {
    flex-direction: row;
    /* Keep horizontal layout for mobile */
    justify-content: center;
    /* Center items */
    flex-wrap: nowrap;
    /* Don't wrap */
    padding: 10px 0;
  }

  .countdown-clock__title {
    font-size: clamp(20px, 1.25rem + ((1vw - 3.2px) * 0.75), 28px);
  }

  .countdown-clock__unit {
    padding: 5px 8px;
    /* Smaller padding */
    max-width: 33%;
    /* Show 3 units side by side at most */
  }

  .countdown-clock__unit--months,
  .countdown-clock__unit--days {
    padding-right: 12px;
    padding-left: 8px;
    border-right-width: 1px;
  }

  .countdown-clock__unit--hours {
    padding-left: 12px;
    padding-right: 8px;
  }

  .countdown-clock__number {
    font-size: clamp(24px, 1.5rem, 32px);
    /* Smaller font on mobile */
  }

  .countdown-clock__label {
    font-size: 0.875rem;
    /* Smaller font on mobile */
  }

  .countdown-clock__message {
    font-size: 1rem;
    padding: 10px;
  }

  .countdown-clock--dot-divider .countdown-clock__unit--months::after,
  .countdown-clock--dot-divider .countdown-clock__unit--days::after,
  .countdown-clock--dash-divider .countdown-clock__unit--months::after,
  .countdown-clock--dash-divider .countdown-clock__unit--days::after {
    display: none;
  }
}

/* WordPress Block Alignment */
.wp-block-theme-countdown-clock {
  width: 100%;
}

.alignfull {
  margin: unset !important;
  max-width: 100vw; 
}

.mb-0 {
  margin-bottom: 0;
}

.mt-0 {
  margin-top: 0;
}