/* 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: radial-gradient(circle, #c52a2a 0%, #5f1414 100%);
}

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

/* 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;
}

/* 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, #promotionTitle {
  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;
}

#promotionTitle {
  padding-top: 70px;
  font-size: 40px;
  font-weight: 900;
  text-transform: uppercase;
  font-style: italic;
}

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

.promo-cta-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #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;
}

/* Door Hover Effect */
.calendar-grid label:hover .door {
  border-color: #3b2c1a;
}

/* Checked State */
.calendar-grid :checked + .door {
  border-style: solid;
}

/* Red Overlay on Inactive Doors */
.calendar-grid .door.december .front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(105, 20, 20, 0.9);
  pointer-events: none;
  z-index: 1;
}

.calendar-grid .door.january .front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(125, 76, 29, 0.9);
  pointer-events: none;
  z-index: 1;
}

/* 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;
}

/* ===== 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/mrjonescasino/christmas-calendar/dialog-bg.webp');
  background-size: cover;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  height: 485px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* dialog backgrounds */
.dialog-bg--2025-12-18 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-18.webp');
}
.dialog-bg--2025-12-19 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-19.webp');
}
.dialog-bg--2025-12-20 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-20.webp');
}
.dialog-bg--2025-12-21 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-21.webp');
}
.dialog-bg--2025-12-22 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-22.webp');
}
.dialog-bg--2025-12-23 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-23.webp');
}
.dialog-bg--2025-12-24 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-24.webp');
}
.dialog-bg--2025-12-25 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-25.webp');
}
.dialog-bg--2025-12-26 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-26.webp');
}
.dialog-bg--2025-12-27 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-27.webp');
}
.dialog-bg--2025-12-28 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-28.webp');
}
.dialog-bg--2025-12-29 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-29.webp');
}
.dialog-bg--2025-12-30 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-30.webp');
}
.dialog-bg--2025-12-31 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-31.webp');
}
.dialog-bg--2026-01-01 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-01.webp');
}
.dialog-bg--2026-01-02 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-02.webp');
}
.dialog-bg--2026-01-03 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-03.webp');
}
.dialog-bg--2026-01-04 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-04.webp');
}
.dialog-bg--2026-01-05 {
  background-image: url('/images/mrjonescasino/christmas-calendar/dialog-bg-05.webp');
}

.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: rgba(255, 255, 255, 0.8);
  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;
  margin-top: 20px;
  color: #555;
  font-size: 20px;
}

.christmas-promo-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  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: #27ae60;
  color: #fff;
}

.promo-cta-btn--decline {
  background: #e74c3c;
  color: #fff;
}

.promo-status {
  text-align: center;
  font-weight: bold;
}

.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;
}

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