/* Note: styles duplicated intentionally across brands for consistency */
/* ===== Promotion Modal Styles (extracted from dialog.php) ===== */
.christmas-promo-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.christmas-promo-modal__box {
  background: url('/images/aztecparadise/christmas-calendar/dialog-bg.webp');
  background-size: cover;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  height: 400px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}

.christmas-promo-modal__close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.christmas-promo-title { margin-top: 20px; text-align: center; }

.christmas-promo-modal__content {
  background-color: transparent;
  padding: 6px 50px 20px 50px;
  margin-bottom: 80px;
  margin-top: 12px;
  border-radius: 0;
}

.christmas-promo-content { text-align: center; margin: 10px 0; font-size: 28px; font-weight: 700; }
.christmas-promo-description { text-align: center; color: #555; font-size: 20px; }
.christmas-promo-cta { display: flex; gap: 10px; justify-content: center; margin-top: 25px; flex-wrap: wrap; }

.promo-cta-btn { flex: 1 1 40%; padding: 12px; border: none; border-radius: 24px; font-weight: bold; cursor: pointer; }
.promo-cta-btn--accept { background: #2A706E !important; color: #fff; }
.promo-cta-btn--decline { background: #DD6C41 !important; color: #fff; }

.promo-status { text-align: center; font-weight: bold; margin-top: 40px;}
.promo-status--expired { color: #c0392b; }
.promo-status--upcoming { color: #8e44ad; }
.promo-status--accepted { color: #27ae60; }
.promo-status--declined { color: #c0392b; }
.promo-message { font-style: italic; color: #666; text-align: center; }
.promo-question { font-size: 18px; color: #555; margin-top: 20px; }
/* Christmas Bonus Calendar - Optimized Version */

/* Base Styles */
.montserrat-800 {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
}

.christmas-bonus-calendar-widget {
  position: relative;
  background-image:
    radial-gradient(rgba(42, 112, 110, 0.7), rgba(5, 11, 33, 1)),
    url('/images/aztecparadise/christmas-calendar/aztec-calendar-bg.webp');
}

.christmas-bonus-calendar-page {
  font-family: "Montserrat", sans-serif;
}

.calendar-header img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  /* crop image height to max 400px */
  max-height: 400px;
  object-fit: cover;
}

.calendar-title {
  background: linear-gradient(90deg, #3F8E85 0%, #122825 60%);
}

.calendar-footer.reverse img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
  /* flip image vertically */
  transform: scaleY(-1);
}

/* Calendar Grid Layout */
.calendar-grid {
  display: grid;
  width: 94%;
  max-width: 900px;
  margin: 3% auto 2rem;
  padding: 15px;
  /* border-radius: 10px; */
  gap: 0.8rem;
  grid-template-columns: repeat(3, 1fr);
  will-change: transform;
  grid-template-areas:
    "day1   day2   day3"
    "day4   day5   day6"
    "day7   day8   day9"
    "day10  day11  day12"
    "day13  day14  day15"
    "day16  day17  day18"
    "day19  day20  day21";
}

/* Hide Checkboxes */
.day input[type="checkbox"],
.calendar-grid input {
  display: none;
}

/* Tablet and Desktop Grid Layout */
@media (min-width: 576px) {
  .calendar-grid {
    padding: 20px;
    gap: 1rem;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
      "day1   day2   day3   day4   day5"
      "day6   day7   day8   day9   day10"
      "day11  day12  day13  day14  day15"
      "day16  day17  day18  day19  day20"
      "day21  .     .      .      .";
  }

  .calendar-grid .door .door-day {
    font-size: 4.5em;
  }

  .calendar-grid .door .door-month {
    font-size: 18px;
  }
}

/* Desktop Large Screens */
@media (min-width: 992px) {
  .calendar-grid .door .door-day {
    font-size: 5em;
  }
}

/* Title Styles */
.calendar-grid .title {
  display: none;
}

.title > h2 > span {
  font-family: "Montserrat", sans-serif !important;
  font-size: larger;
}

.calendar-grid .title h2 {
  font-size: 2rem;
  text-align: center;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: row;
}

@media (min-width: 576px) {
  .calendar-grid .title h2 {
    font-size: 3.5rem;
    flex-direction: column;
  }
}

@media (min-width: 992px) {
  .calendar-grid .title h2 {
    font-size: 5rem;
  }
}

.calendar-grid .title-1 {
  color: #9c163f;
  display: block;
  transform: rotate(-10deg);
  margin-right: 1rem;
}

.calendar-grid .title-2 {
  color: #413486;
  display: block;
  transform: rotate(5deg);
  margin-right: 1rem;
}

.calendar-grid .title-3 {
  display: block;
  color: black;
  transform: rotate(-5deg);
}

/* Day Containers */
.calendar-grid .day {
  position: relative;
  will-change: transform;
  /* border: 3px solid white; */
  /* box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); */
}

.calendar-grid .day:hover {
  z-index: 1000;
  transform: scale(1.05);
  transition: 0.3s ease;
  /* box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5); */
}

/* Randomized Scaling for Visual Interest - Desktop Only */
@media (min-width: 576px) {
  .calendar-grid .day-1 { transform: scale(0.90); }
  .calendar-grid .day-2 { transform: scale(0.85); }
  .calendar-grid .day-3 { transform: scale(0.92); }
  .calendar-grid .day-4 { transform: scale(0.93); }
  .calendar-grid .day-5 { transform: scale(0.90); }
  .calendar-grid .day-6 { transform: scale(0.98); }
  .calendar-grid .day-7 { transform: scale(1.07); }
  .calendar-grid .day-8 { transform: scale(0.92); }
  .calendar-grid .day-9 { transform: scale(0.98); }
  .calendar-grid .day-10 { transform: scale(0.96); }
  .calendar-grid .day-11 { transform: scale(1.00); }
  .calendar-grid .day-12 { transform: scale(0.91); }
  .calendar-grid .day-13 { transform: scale(0.95); }
  .calendar-grid .day-14 { transform: scale(1.07); }
  .calendar-grid .day-15 { transform: scale(0.91); }
  .calendar-grid .day-16 { transform: scale(0.95); }
  .calendar-grid .day-17 { transform: scale(1.00); }
  .calendar-grid .day-18 { transform: scale(0.95); }
  .calendar-grid .day-19 { transform: scale(0.91); }
}

/* Label/Door Container */
.calendar-grid label {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
  display: flex;
  min-height: 100%;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  transition: transform 0.2s ease;
}

.calendar-grid label:hover {
  transform: scale(1.02);
}

@media (min-width: 576px) {
  .calendar-grid label {
    height: auto;
  }
}

/* Door Styling */
.calendar-grid .door {
  width: 100%;
  /* border: 2px solid rgba(0, 0, 0, 0.2); */
  font-family: "Montserrat", sans-serif;
  /* border-radius: 8px; */
  overflow: hidden;
}

.calendar-grid .door div {
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.calendar-grid .door .front {
  display: flex;
  flex-direction: column;
}

/* Door Month Text */
.calendar-grid .door .door-month {
  font-size: 18px;
  line-height: 1;
  z-index: 1;
  text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white,
    -2px 0px 0 white,
    2px 0px 0 white,
    0px -2px 0 white,
    0px 2px 0 white;
  color: #572100;
}

#promotionCTA {
  margin-top: 0px;
}

#promotionTitle {
  padding-top: 10px;
  font-size: 40px;
  font-weight: 700;
  color: #2A706E;
}

#promotionContent {
  text-transform: uppercase;
  color: #DD6C41;
}

#promotionDescription {
  margin-top: 20px;
  font-size: 22px;
  color: #050B21;
}

.promo-question {
  margin-top: 15px;
  font-size: 16px;
  color: #050B21;
}

.promo-cta-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #1d3557;
  color: #f1faee;
  font-size: 18px;
  text-decoration: none;
  border-radius: 20px;
}

/* Door Day Number */
.calendar-grid .door .door-day {
  font-size: 5em;
  z-index: 1;
  text-shadow:
    -2px -2px 0 #572100,
    2px -2px 0 #572100,
    -2px 2px 0 #572100,
    2px 2px 0 #572100,
    -3px 0px 0 #572100,
    3px 0px 0 #572100,
    0px -3px 0 #572100,
    0px 3px 0 #572100;
  color: white;
}

/* Mobile Responsive Text Sizes */
@media (max-width: 575px) {
  .calendar-grid .door .door-month {
    font-size: 10px;
  }

  .calendar-grid .door .door-day {
    font-size: 2.5em;
  }

  #promotionTitle {
    font-size: 36px;
  }

  #promotionContent {
    font-size: 20px;
  }

  #promotionDescription {
    font-size: 16px;
    margin-bottom: 0px;
  }

  .promo-question {
    font-size: 14px !important;
  }

  .promo-cta-btn--accept, .promo-cta-btn--decline {
    font-size: 14px;
    font-weight: normal;
    padding: 6px;
  }

  #promotionCTA {
    margin-top: 0px;
  }
}

/* Small Mobile */
@media (max-width: 375px) {
  .calendar-grid {
    padding: 10px;
    gap: 0.5rem;
  }

  .calendar-grid .door .door-day {
    font-size: 2em;
  }

  .promo-cta-btn--accept, .promo-cta-btn--decline {
    font-size: 12px;
    font-weight: normal;
    padding: 6px;
  }
}

/* Door Back (when flipped) */
.calendar-grid .door .back {
  background: linear-gradient(to right, #3c362f, #4f402e);
  transform: rotateY(-180deg);
  font-size: 16px;
}

/* Remove Overlay from Active Door */
.calendar-grid .door.active-door .front::before {
  background-color: transparent !important;
}

/* Title Container (for links/actions) */
.calendar-grid .title-container {
  opacity: 0;
  transform: translateY(-1rem);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 1000;
  bottom: -3.7rem;
  left: -5rem;
  right: -5rem;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

@media (min-width: 576px) {
  .calendar-grid .title-container {
    left: -10rem;
    right: -10rem;
  }
}

.calendar-grid :checked ~ .title-container {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.calendar-grid .title-container a {
  position: relative;
  display: inline-block;
  /* border-radius: 0.25rem; */
  padding: 0.5rem 1rem;
  background-color: #1d3557;
  color: #f1faee;
  font-size: 0.9rem;
  white-space: nowrap;
  text-decoration: none;
}

@media (min-width: 576px) {
  .calendar-grid .title-container a {
    font-size: 1.2rem;
  }
}

.calendar-grid .title-container a::before {
  content: "";
  display: block;
  /* border-radius: 0.75rem; */
  background: repeating-linear-gradient(
    -45deg,
    #f1faee 0,
    #f1faee 0.5rem,
    #e63946 0.5rem,
    #e63946 1rem
  );
  background-size: 1.44rem 1.44rem;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  z-index: -1;
  top: -0.5rem;
  right: -0.5rem;
  bottom: -0.5rem;
  left: -0.5rem;
  animation: calendar-item-link 0.6s infinite linear;
  animation-play-state: paused;
}

.calendar-grid .title-container a:hover::before {
  animation-play-state: running;
}

@keyframes calendar-item-link {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1.44rem 0;
  }
}

/* Inside Content (revealed when door opens) */
.calendar-grid .inside {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  opacity: 0;
}

.inside img {
  width: 100%;
}

.falling-coins {
  width: 100%;
}

.calendar-grid .inside-empty {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #2f4f8c;
  color: #ffffff;
}

.calendar-grid :checked ~ .inside {
  opacity: 1;
}

/* Bonus Offer Title Styling */
.bonus-offer-title {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #62472c;
  color: white;
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.bonus-offer-title,
.back {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: normal !important;
  text-align: center;
  font-size: 12px;
  padding: 5px;
}

@media (min-width: 576px) {
  .bonus-offer-title,
  .back {
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  .bonus-offer-title,
  .back {
    font-size: 16px;
  }
}

/* Calendar Day Positions and Background Images */
.calendar-grid .day-1 {
  grid-area: day1;
  z-index: 11;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-18.webp');
  background-size: cover;
}
.calendar-grid .day-2 {
  grid-area: day2;
  z-index: 16;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-19.webp');
  background-size: cover;
}
.calendar-grid .day-3 {
  grid-area: day3;
  z-index: 23;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-20.webp');
  background-size: cover;
}
.calendar-grid .day-4 {
  grid-area: day4;
  z-index: 15;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-21.webp');
  background-size: cover;
}
.calendar-grid .day-5 {
  grid-area: day5;
  z-index: 7;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-22.webp');
  background-size: cover;
}
.calendar-grid .day-6 {
  grid-area: day6;
  z-index: 6;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-23.webp');
  background-size: cover;
}
.calendar-grid .day-7 {
  grid-area: day7;
  z-index: 12;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-24.webp');
  background-size: cover;
}
.calendar-grid .day-8 {
  grid-area: day8;
  z-index: 24;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-25.webp');
  background-size: cover;
}
.calendar-grid .day-9 {
  grid-area: day9;
  z-index: 19;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-26.webp');
  background-size: cover;
}
.calendar-grid .day-10 {
  grid-area: day10;
  z-index: 14;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-27.webp');
  background-size: cover;
}
.calendar-grid .day-11 {
  grid-area: day11;
  z-index: 21;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-28.webp');
  background-size: cover;
}
.calendar-grid .day-12 {
  grid-area: day12;
  z-index: 13;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-29.webp');
  background-size: cover;
}
.calendar-grid .day-13 {
  grid-area: day13;
  z-index: 18;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-30.webp');
  background-size: cover;
}
.calendar-grid .day-14 {
  grid-area: day14;
  z-index: 8;
  background-image: url('/images/aztecparadise/christmas-calendar/day-dec-31.webp');
  background-size: cover;
}
.calendar-grid .day-15 {
  grid-area: day15;
  z-index: 1;
  background-image: url('/images/aztecparadise/christmas-calendar/day-jan-1.webp');
  background-size: cover;
}
.calendar-grid .day-16 {
  grid-area: day16;
  z-index: 4;
  background-image: url('/images/aztecparadise/christmas-calendar/day-jan-2.webp');
  background-size: cover;
}
.calendar-grid .day-17 {
  grid-area: day17;
  z-index: 9;
  background-image: url('/images/aztecparadise/christmas-calendar/day-jan-3.webp');
  background-size: cover;
}
.calendar-grid .day-18 {
  grid-area: day18;
  z-index: 20;
  background-image: url('/images/aztecparadise/christmas-calendar/day-jan-4.webp');
  background-size: cover;
}
.calendar-grid .day-19 {
  grid-area: day19;
  z-index: 3;
  background-image: url('/images/aztecparadise/christmas-calendar/day-jan-5.webp');
  background-size: cover;
}

/* Responsive Z-Index Adjustments */
@media (min-width: 576px) {
  .calendar-grid .day-1 { z-index: 16; }
  .calendar-grid .day-2 { z-index: 9; }
  .calendar-grid .day-3 { z-index: 1; }
  .calendar-grid .day-4 { z-index: 15; }
  .calendar-grid .day-5 { z-index: 22; }
  .calendar-grid .day-6 { z-index: 11; }
  .calendar-grid .day-7 { z-index: 3; }
  .calendar-grid .day-8 { z-index: 10; }
  .calendar-grid .day-9 { z-index: 2; }
  .calendar-grid .day-10 { z-index: 7; }
  .calendar-grid .day-11 { z-index: 19; }
  .calendar-grid .day-12 { z-index: 18; }
  .calendar-grid .day-13 { z-index: 4; }
  .calendar-grid .day-14 { z-index: 13; }
  .calendar-grid .day-15 { z-index: 24; }
  .calendar-grid .day-16 { z-index: 21; }
  .calendar-grid .day-17 { z-index: 23; }
  .calendar-grid .day-18 { z-index: 17; }
  .calendar-grid .day-19 { z-index: 6; }
  .calendar-grid .day-20 { z-index: 20; }
  .calendar-grid .day-21 { z-index: 8; }
}

/* Mobile Title Container Positioning */
@media (max-width: 575px) {
  .calendar-grid .day-2 .title-container,
  .calendar-grid .day-5 .title-container,
  .calendar-grid .day-8 .title-container,
  .calendar-grid .day-11 .title-container,
  .calendar-grid .day-14 .title-container,
  .calendar-grid .day-17 .title-container,
  .calendar-grid .day-20 .title-container {
    left: 0;
    right: auto;
  }

  .calendar-grid .day-3 .title-container,
  .calendar-grid .day-6 .title-container,
  .calendar-grid .day-9 .title-container,
  .calendar-grid .day-12 .title-container,
  .calendar-grid .day-15 .title-container,
  .calendar-grid .day-18 .title-container,
  .calendar-grid .day-21 .title-container {
    left: auto;
    right: 0;
  }
}