/* Full-page layout with default cursor while countdown is active */
body,
html {
  height: 100%;
  margin: 0;
  font-family: "Inter", sans-serif;
  background-color: #242933;
  color: #ffffff;
}

/* Full-screen confetti canvas */
#confettiCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Progress bar styling */
#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 4px;
  background-color: #ff5286;
  z-index: 99;
  transition: width 0.5s ease-in-out;
}

/* 3D perspective container for tilted content */
#tiltContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

/* Tilted content container */
#content {
  text-align: center;
  position: relative;
  transition: transform 0.1s;
  transform-origin: center center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Countdown text with gradient effect */
#countdown {
  font-family: "Monoton", cursive;
  font-size: calc(40px + 3vw);
  line-height: 1.1;
  background: linear-gradient(91.08deg, #ff5286 -4.35%, #00a3ff 99.69%);
  background-clip: text;
  color: transparent;
  margin-top: 20px;
}

/* "NO"/"NOT YET" text */
h1#answer {
  font-family: "Monoton", cursive;
  font-size: calc(80px + 3vw);
  color: #fff966;
  margin: 0;
  padding: 0;
}

/* Paragraph below countdown */
p {
  font-family: "Inter", sans-serif;
  font-size: calc(20px + 1vw);
  color: #ffffff;
}

/* Responsive tweaks */
@media (max-width: 600px) {
  #countdown {
    font-size: calc(22px + 4vw);
  }
  h1#answer {
    font-size: calc(40px + 4vw);
  }
  p {
    font-size: calc(18px + 1vw);
  }
}

/* Celebratory header styles for "YES!!!" */
.celebration-header {
  font-family: "Monoton", cursive;
  font-size: calc(80px + 3vw);
  color: #fff966;
  margin: 0;
  padding: 0;
  text-align: center;
  /* Shimmer & pulse animations with text shadow */
  animation: shimmer 2s infinite, pulse 2s infinite;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(90deg, #ff5286, #00a3ff, #fff966);
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Fancy card container for the expired state */
.fancy-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: 12px;
  width: 375px;
  max-width: var(--Screens-md, 768px);
  padding: var(--x, 16px);
  border-radius: 8px;
  background: linear-gradient(121deg, rgba(184, 217, 244, 0.13) 0%, rgba(184, 217, 244, 0.02) 100%);
  box-shadow:
    0px 0px 0px 1px rgba(0, 0, 0, 0.05),
    0px 4.4px 8.8px -8.8px rgba(0, 0, 0, 0.15),
    0px 8.8px 17.6px -17.6px rgba(0, 0, 0, 0.25),
    0px 13.2px 26.4px -26.4px rgba(0, 0, 0, 0.35),
    0px 17.6px 35.2px -35.2px rgba(0, 0, 0, 0.45);
  /* Card text will use default styles (without shimmer or pulse) */
}

/* Card heading: avatar + info */
.card-heading {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

/* Avatar container and image */
.card-avatar {
  position: relative;
  width: 48px;
  height: 48px;
}
.card-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
}

/* Card information container */
.card-info {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: left;
  align-items: flex-start;
  gap: 0px;
}

/* Doctor name */
.card-name {
  color: var(--text-link-text-link, #F7F7F7);
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  word-wrap: break-word;
  text-shadow: none;
}

/* Specialty */
.card-subtitle {
  color: var(--text-link-text-link, #e8e8e8);
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 300;
  line-height: 20px;
  margin: 0;
  word-wrap: break-word;
  text-shadow: none;
}

/* Card body text */
.card-body {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--font-color-base, #FFF);
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  text-shadow: none;
}
.card-body a {
  color: #CCEFD1;
  font-weight: 500;
  text-decoration: none;
}