#program-section
{
  padding: 0 1.25rem 1.25rem 1.25rem; /* 0 20px 20px 20px */
  max-width: 87.5rem; /* 1400px */
  margin: 0 auto; 
}

/* ------------------------------------------------------------------------------------- */

#program-section h2 
{
  margin-top: 1rem; /* 16px */
  font-size: 2rem; /* 32px */
  margin-bottom: 0.5rem; /* 8px */
  text-align: center;
}

/* ------------------------------------------------------------------------------------- */

#date-span 
{
  font-size: 1.125rem; /* 18px */
  color: #555;
  margin-bottom: 0.7rem; /* 11.2px */
  text-align: center;
}

/* ------------------------------------------------------------------------------------- */

.calendar-wrapper 
{
  margin: 0 auto; 
  display: flex;        
  align-items: center;
  justify-content: center; 
  position: relative;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

.datePicker-alt
{
  font-size: 1rem; /* 16px */
  padding: 0.625rem 2.5rem 0.625rem 0.9375rem; /* 10px 40px 10px 15px */
  border: 1px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  width: 10.625rem; /* 170px */
  transition: border-color 0.2s ease;
}

.datePicker-alt:focus 
{
  outline: none;
  border-color: #333;
}

#calendarIcon 
{
  position: absolute;
  right: 0.75rem; /* 12px */
  top: 50%;
  transform: translateY(-50%);
  color: #007BFF;
  font-size: 1.25rem; /* 20px */
  pointer-events: none; 
  transition: color 0.2s ease, transform 0.2s ease;
}

.datePicker-alt:focus + #calendarIcon,
.datePicker-alt.flatpickr-input.active + #calendarIcon 
{
  color: #0056b3; 
  transform: translateY(-50%) scale(1.1);
}

.calendar-info-message 
{
    text-align: center;
    padding: 0.5rem; /* 8px */
    font-size: 0.8125rem; /* 13px */
    color: black;
    border-top: 1px solid #ccc;
    background: #f9f9f9;
    line-height: 1.4;
}

/* ------------------------------------------------------------------------------------- */

#selected-day 
{
  font-size: 1.25rem; /* 20px */
  font-weight: bold;
  margin-top: 1.25rem; /* 20px */
}

/* ------------------------------------------------------------------------------------- */

hr 
{
  margin: 0.9375rem 0; /* 15px */
  border: 0;
  border-top: 1px solid #ccc;
}

/* ------------------------------------------------------------------------------------- */

.movies 
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr)); /* 250px */
  gap: 1.25rem; /* 20px */
  justify-items: center;
  align-items: start;
}

.movie-card 
{
  max-width: 17.5rem; /* 280px */
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(50px) scale(0.85);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.movie-card.show 
{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.poster 
{
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.poster img 
{
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------------------------------------------------------- */

.movie-info 
{
  padding: 0.9375rem 0.9375rem 0.5rem 0.9375rem; /* 15px 8px */
  position: relative;
}

.movie-title 
{
  font-size: 1.125rem; /* 18px */
  font-weight: bold;
  margin-bottom: 0.5rem; /* 8px */
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

.additional-info 
{
  display: flex;
  align-items: center;
  font-size: 0.875rem; /* 14px */
  color: #555;
  margin-bottom: 0.3125rem; /* 5px */
}

.additional-info i 
{
  margin-right: 0.1875rem; /* 3px */
}

.screening-time 
{
  position: absolute;
  bottom: 0.625rem;  /* 10px */
  right: 0.625rem;   /* 10px */
  background: linear-gradient(135deg, #339dff, #004080);
  color: #fff;
  font-size: 1rem; /* 16px */
  font-weight: bold;
  padding: 0.475rem 1.75rem; /* 7.6px 28px */
  border-radius: 16px; 
  box-shadow: 0 6px 18px rgba(0, 91, 187, 0.45);
  letter-spacing: 1px;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.screening-time:hover
{
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 91, 187, 0.45);
}

/* ------------------------------------------------------------------------------------- */

.play-button 
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s ease;
  backdrop-filter: blur(2px);
}

.play-button::before 
{
  content: "";
  position: absolute;
  left: 28px;
  width: 0;
  height: 0;
  border-left: 20px solid #fff;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.poster:hover .play-button 
{
  transform: translate(-50%, -50%) scale(1);
}

#trailer 
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
  justify-content: center;
  align-items: center;
}

#trailer-content 
{
  position: relative;
  width: 90%;
  max-width: 50rem; /* 800px */
  aspect-ratio: 16/9;
  background: #000;
}

#trailer-content iframe 
{
  width: 100%;
  height: 100%;
}

#trailer-content #close-button 
{
  position: absolute;
  top: -1.875rem; /* -30px */
  right: 0;
  font-size: 2rem; /* 32px */
  color: #fff;
  cursor: pointer;
}

/* ------------------------------------------------------------------------------------- */

#message 
{
  margin-top: 1.875rem; /* 30px */
  padding: 0.9375rem 1.25rem; /* 15px 20px */
  background: #fff3cd;
  border-left: 5px solid #ffc107;
  border-right: 5px solid #ffc107;
  border-radius: 8px;
  font-size: 0.875rem; /* 14px */
  color: #856404;
  line-height: 1.5;
}

#message p 
{
  margin: 0.3125rem 0; /* 5px */
  text-align: center;
}

/* ------------------------------------------------------------------------------------- */

.movies p 
{
    text-align: left;
    font-size: 0.875rem; /* 14px */
    color: #0c3c78; 
    background-color: #d0e7ff; 
    padding: 0.9375rem 1.25rem; /* 15px 20px */
    border-radius: 8px;
    max-width: 31.25rem; /* 500px */
    margin: 1.875rem auto; /* 30px auto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    line-height: 1.5;
    border-left: 5px solid #0a64b8; 
}

/* Calendar (Unicode \f073) icon by Font Awesome Free: https://fontawesome.com/ */

.movies p::before 
{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f073"; 
  color: #0a64b8;
  margin-right: 0.625rem; /* 10px */
  font-size: 1.2rem; /* 19.2px */
}

/* ------------------------------------------------------------------------------------- */

@media (max-width: 37.5rem) /* 600px */
{
  #program-section h2 
  {
    font-size: 1.5rem; /* 24px */
  }

  #date-span 
  {
    font-size: 0.9rem; /* 14.4px */
  }

  .datePicker-alt 
  {
    width: 8.125rem; /* 130px */
    font-size: 0.9rem; /* 14.4px */
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* 8px 32px 8px 12px */
  }

  #calendarIcon 
  {
    font-size: 1.1rem; /* 17.6px */
    right: 0.5rem; /* 8px */
  }

  #selected-day 
  {
    font-size: 1rem; /* 16px */
    text-align: center;
  }

  #message 
  {
    font-size: 0.8rem; /* 12.8px */
    padding: 0.75rem 1.0625rem; /* 12px 17px */
  }

  .movies p 
  {
    font-size: 0.8rem; /* 12.8px */
    padding: 0.75rem 1.0625rem; /* 12px 17px */
  }
}

/* ------------------------------------------------------------------------------------- */

@media (min-width: 37.5rem) /* 600px */
{
   #trailer-content
   {
      transform: translateY(4vh);
   }
}

/* ------------------------------------------------------------------------------------- */

@media (min-width: 37.5625rem) and (max-width: 56.25rem) /* 601px - 900px */
{
  #program-section h2 
  {
    font-size: 1.75rem; /* 28px */
  }

  #date-span 
  {
    font-size: 1rem; /* 16px */
  }

  .datePicker-alt 
  {
    width: 9.375rem; /* 150px */
    font-size: 0.95rem; /* 15.2px */
    padding: 0.55rem 2.25rem 0.55rem 0.875rem; /* 8.8px 36px 8.8px 14px */
  }

  #selected-day 
  {
    font-size: 1.1rem; /* 17.6px */
  }

  #message 
  {
    font-size: 0.85rem; /* 13.6px */
    padding: 0.8125rem 1.125rem; /* 13px 18px */
  }

  .movies p 
  {
    font-size: 0.85rem; /* 13.6px */
    padding: 0.8125rem 1.125rem; /* 13px 18px */
  }
}

/* ------------------------------------------------------------------------------------- */

@media (min-width: 56.3125rem) and (max-width: 75rem) /* 901px - 1200px */
{
  #program-section h2 
  {
    font-size: 2rem; /* 32px */
  }

  #date-span 
  {
    font-size: 1.1rem; /* 17.6px */
  }

  .datePicker-alt 
  {
    width: 10rem; /* 160px */
    font-size: 1rem; /* 16px */
  }

  #selected-day 
  {
    font-size: 1.2rem; /* 19.2px */
  }

  #message 
  {
    font-size: 0.85rem; /* 13.6px */
    padding: 0.875rem 1.1875rem; /* 14px 19px */
  }

  .movies p 
  {
    font-size: 0.85rem; /* 13.6px */
    padding: 0.875rem 1.1875rem; /* 14px 19px */
  }
}

/* ------------------------------------------------------------------------------------- */

@media (min-width: 90.0625rem) /* 1441px */
{
  #program-section h2 
  {
    font-size: 2.5rem; /* 40px */
  }

  #date-span 
  {
    font-size: 1.3rem; /* 20.8px */
  }

  .datePicker-alt 
  {
    width: 11.25rem; /* 180px */
    font-size: 1.05rem; /* 16.8px */
    padding: 0.625rem 2.75rem 0.625rem 1rem; /* 10px 44px 10px 16px */
  }

  #calendarIcon 
  {
    font-size: 1.3rem; /* 20.8px */
    right: 1rem; /* 16px */
  }

  #selected-day 
  {
    font-size: 1.4rem; /* 22.4px */
  }

  #message 
  {
    font-size: 1.05rem; /* 16.8px */
    padding: 1rem 1.3125rem; /* 16px 21px */
  }

  .movies p 
  {
    font-size: 1.05rem; /* 16.8px */
    padding: 1rem 1.3125rem; /* 16px 21px */
  }
}