/* Panel */
.countdown-panel {
  width: 100%;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: left;

  background-image: url("/assets/img/ny2026bg.webp");
  background-position: 50% 35%;
  background-size: cover;
  background-repeat: no-repeat;
}

.countdown-panel-title {
  font-size: 1.5rem;
  margin: 0;

  text-shadow: 0px 0px 8px rgba(var(--drop-shadow-rgb), 0.75);
}
.countdown-panel-title.celebration {
  font-size: 2rem;
  margin: 0;

  text-shadow: 0px 0px 8px rgba(var(--drop-shadow-rgb), 0.75);
}
.celebration-text {
  font-size: 1.25rem;
  margin-top: 0.5rem;

  text-shadow: 0px 0px 8px rgba(var(--drop-shadow-rgb), 0.75);
}

.countdown-panel-container {
  padding: 24px;
  width: 32rem;
  height: 6.5rem;

  display: flex;
  flex-direction: column;
  justify-content: center;

  /* background: linear-gradient(to right, rgba(var(--panel-rgb), 0.9) 0%, rgba(var(--panel-rgb), 0) 100%); */
}

.countdown-panel-content {
  position: absolute;
  transition: opacity 1s;
}


/* Countdown Timer Styling */
.countdown {
  display: flex;
  flex-direction: row;

  width: min-content;
  height: min-content;
  /* margin-left: auto; */

  user-select: none;
}

.countdown-section {
  display: flex;
  flex-direction: row;

  transition: opacity 0.25s;
}

.countdown-value {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.countdown-value span {
  font-size: 3rem;
  font-weight: bold;

  width: 2rem;
  display: flex;
  justify-content: center;

  text-shadow: 0px 0px 8px rgba(var(--drop-shadow-rgb), 0.75);
}

.countdown-delimiter {
  font-size: 3rem;
  opacity: 0.5;

  width: 2rem;
  display: flex;
  justify-content: center;

  text-shadow: 0px 0px 8px rgba(var(--drop-shadow-rgb), 0.75);
}

.countdown-label {
  font-size: 0.8rem;
  font-style: italic;
  opacity: 0.75;

  display: flex;
  justify-content: center;
  margin-top: -0.2rem;

  text-shadow: 0px 0px 8px rgba(var(--drop-shadow-rgb), 0.75);
}

.countdown-disabled {
  opacity: 0.4;
}


/* Modifiers */
.transparent { opacity: 0; }
.hidden { display: none; }