>* {
  box-sizing: border-box;
}


body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #f2f2f2;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  min-height: 100vh;
  background: #6A010F;
  color: white;
  overflow-x: hidden;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;
  position: relative;
  z-index: 1;

  @media (max-width: 1156px) {
    width: auto;
  }
}

.small-container {
  max-width: 1096px;
  margin: 0 auto;
  padding: 0 16px;
  width: 100%;

  @media (max-width: 1156px) {
    width: auto;
    padding-inline: 20px;
  }
}

header {
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  position: relative;

  .container {
    overflow: hidden;
  }

  .bg {
    background: radial-gradient(73.62% 100.53% at 50% 0%, #FF3850 0%, #D9142C 27.24%, #790212 81.9%, #6A0210 100%);
    transform: matrix(1, 0, 0, -1, 0, 0);
    position: absolute;
    width: 100%;
    height: calc(100% - 30px);
    top: 0;
    left: 0;
    z-index: -1;
  }

  .fg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to bottom, transparent 50%, #6A010F 90%);
  }

  img {
    width: 100%;
    height: auto;

    @media (max-width: 767px) {
      width: 200%;
      transform: translateX(-25%);
    }
  }
}

h1 {
  font-style: normal;
  font-weight: 600;
  font-size: 22px;
  line-height: 36px;
}

main {
  position: relative;
  z-index: 6;
}


.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  margin-block: 40px 80px;
  grid-auto-rows: 1fr;

  @media (max-width: 1156px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  @media (max-width: 767px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-item {
    /* padding: 16px; */
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    aspect-ratio: 1/1;
    background: #800213;
    /* border: 1px solid rgba(201, 5, 29, 0.54); */
    border-radius: 12px;
    background-image: url("../images/opened-bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;

    .bulb {
      position: absolute;
      top: 9px;
      right: 8px;
      width: 39px;
      height: 42px;
      background-image: url("../images/bulb-bg.svg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Roboto Condensed', sans-serif;
      font-size: 24px;
      font-weight: 800;
      line-height: 1.5;
      color: white;
      z-index: 2;
      opacity: 0;
    }

    .day-image {
      width: 96px;
      height: 96px;
      z-index: 2;
      position: relative;
      opacity: 0;
      visibility: hidden;
    }

    .prev-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
    }

    .open-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      opacity: 0;
      visibility: hidden;
      backdrop-filter: blur(7px)
    }

    .active-image {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
      z-index: 2;
      opacity: 0;
      visibility: hidden;
    }

    .closed-image {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: auto;
      z-index: 2;
      opacity: 0;
      background-color: #6a000e;
      visibility: hidden;
    }

    .active-button {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      z-index: 2;
      opacity: 0;
      visibility: hidden;
      background: #2F9264;
      box-shadow: 0px 2px 8px rgba(39, 39, 39, 0.3);
      border-radius: 10px;
      line-height: 26px;
      font-weight: 700;
      font-size: 16px;
      color: white;
      padding: 6px 24px;
      margin-bottom: 6px;
      border: none;
      cursor: pointer;
    }

    .opened-text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      z-index: 2;
      color: #FFFFFF;
      font-weight: 700;
      font-size: 16px;
      line-height: 26px;
      margin-bottom: 6px;
      opacity: 0;
      visibility: hidden;
    }

    .prev-text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      z-index: 2;
      color: #2F9264;
      font-weight: 700;
      line-height: 26px;
      margin-bottom: 6px;
      opacity: 0;
      visibility: hidden;
    }

    &.opened {
      background-image: url('../images/opened-bg.png');

      .bulb {
        opacity: 0;
        visibility: hidden;
      }

      .day-image {
        opacity: 1;
        visibility: visible;
      }

      .open-image {
        opacity: 1;
        visibility: visible;
      }

      .opened-text {
        opacity: 1;
        visibility: visible;
      }
    }

    &.prev {
      .prev-image {
        opacity: 1;
        visibility: visible;
      }

      .closed-block {
        opacity: 0;
        visibility: hidden;
      }

      .bulb {
        opacity: 1;
        visibility: visible;
      }

      .day-image {
        position: absolute;
        top: 20px;
        left: 0px;
        width: 84px;
        height: 84px;
        opacity: 1;
        visibility: visible;
      }

      .prev-text {
        opacity: 1;
        visibility: visible;
      }
    }

    &.active {
      .active-image {
        opacity: 1;
        visibility: visible;
      }

      .closed-block {
        opacity: 0;
        visibility: hidden;
      }

      .prev-image {
        opacity: 1;
        visibility: visible;
      }

      .bulb {
        opacity: 1;
        visibility: visible;
      }

      .day-image {
        position: absolute;
        top: 20px;
        left: 0px;
        width: 84px;
        height: 84px;
        opacity: 1;
        visibility: visible;
      }

      .active-button {
        opacity: 1;
        visibility: visible;
      }
    }

    &.closed {
      .closed-image {
        opacity: 1;
        visibility: visible;
      }

      .bulb {
        opacity: 1;
        visibility: visible;
        z-index: 3;
      }
    }

    &.two-span {
      grid-column: span 3;
      background-image: unset;
      aspect-ratio: unset;
      border: 1.5px solid rgba(255, 255, 255, 0.54);
      background: linear-gradient(136.71deg, rgba(255, 255, 255, 0) 4.51%, rgba(255, 255, 255, 0.2) 98.35%);
      backdrop-filter: blur(3px);

      @media (max-width: 767px) {
        grid-column: span 2;
      }

      .active-text {
        padding-top: 16px;
        text-transform: uppercase;
        font-size: 20px;
        line-height: 28px;
        font-weight: 700;
        color: white;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 4;
        visibility: hidden;
        opacity: 0;

        @media (max-width: 767px) {
          padding-left: 60px;
        }
      }

      .closed-block {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 100%;
        padding-top: 10px;
        font-size: 16px;
        line-height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: 16px;
        gap: 16px;

        .sc-block {
          display: flex;
          flex-direction: column;
          align-items: start;
          text-align: left;
          text-transform: uppercase;
          font-size: 20px;
          gap: 8px;

          .sc-text {
            opacity: 0.2;

            @media (max-width: 767px) {
              max-width: 100px;
            }
          }
        }
      }

      &.active {
        background: linear-gradient(218.75deg, #A50419 0.35%, #DF1C36 84.36%);

        .day-image {
          width: 104px;
          height: 104px;
        }

        .active-text {
          visibility: visible;
          opacity: 1;
        }
      }

      &.prev {
        background: linear-gradient(218.75deg, #A50419 0.35%, #DF1C36 84.36%);

        .active-image {
          opacity: 1;
          visibility: visible;
          z-index: 1;
        }

        .day-image {
          width: 104px;
          height: 104px;
        }

        .active-text {
          visibility: visible;
          opacity: 1;
        }
      }
    }
  }
}

/* Модалка */
#adventPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10000;
  overflow-y: auto;

  &.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    @media (max-width: 767px) {
      padding: 0px;
    }
  }

  .popup-wrapper {
    width: 568px;
    position: relative;
    background: linear-gradient(180deg, rgba(140, 2, 21, 0.5) 0%, rgba(133, 2, 20, 0.7) 100%);
    opacity: 1;
    gap: 16px;
    border-radius: 12px;
    border-width: 1px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-image-source: linear-gradient(148.34deg, rgba(201, 5, 29, 0.54) 9.9%, rgba(119, 27, 27, 0) 30.55%, rgba(201, 5, 29, 0.378) 80.93%);
    backdrop-filter: blur(20px);

    @media (max-width: 767px) {
      justify-content: unset;
      width: 100%;
      height: 100%;
      padding-block: 0px;
    }
  }

  .popup-bg {
    position: absolute;
    bottom: 0;
    z-index: -1;
  }

  .popup-title {
    margin: 0;
    font-family: Roboto Condensed;
    font-weight: 700;
    font-style: Bold;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1.7%;
    text-align: center;
    vertical-align: middle;
    background: linear-gradient(180deg, #FFE100 0%, #FFC800 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .popup-description {
    margin: 0;
    font-family: Inter;
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 22px;
    leading-trim: NONE;
    line-height: 36px;
    letter-spacing: 0px;
    text-align: center;
    vertical-align: middle;
    color: #FFFAFA;
  }

  .popup-button {
    background: #2F9264;
    box-shadow: 0px 2px 8px rgba(39, 39, 39, 0.3);
    border-radius: 10px;
    line-height: 26px;
    font-weight: 700;
    font-size: 24px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: white;
    padding: 21px 107px;
    margin-bottom: 6px;
    border: none;
    cursor: pointer;

    @media (max-width: 767px) {
      padding: 21px 50px;
      line-height: 1.3;
    }
  }

  .popup-badge {
    position: absolute;
    left: -80px;
    top: -80px;
    width: 214px;
    height: auto;
    object-fit: cover;
    z-index: 2;
    opacity: 1;
    visibility: visible;

    @media (max-width: 767px) {
      left: -50px;
      top: -50px;
    }
  }

  .popup-snow {
    position: absolute;
    top: -17px;
    width: 300px;
    height: auto;
    object-fit: cover;
    z-index: 2;
    opacity: 1;
    visibility: visible;

    @media (max-width: 767px) {
      top: -31px;
      z-index: -1;
      width: 503px;
    }
  }

  .popup-day-image {
    width: 236px;
    height: 236px;
    object-fit: contain;
    margin: 16px 0;
    @media (max-width: 767px) {
      margin-top: 90px;
    }
  }

  .popup-bulb {
    position: absolute;
    top: 25px;
    right: 35px;
    width: 39px;
    height: 42px;
    background-image: url("../images/bulb-bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.5;
    color: white;
    z-index: 2;

    @media (max-width: 767px) {
      top: unset;
      right: unset;
      left: 16px;
      bottom: 30px;
      width: 76px;
      height: 84px;
    }
  }

  .popup-close {
    cursor: pointer;
    position: absolute;
    top: 30px;
    right: -30px;

    @media (max-width: 767px) {
      top: 20px;
      right: 20px;
    }
  }
}