:root {
  --svg-fill-color: #b0b0b0;
}
.separator {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-gray-2);
  margin: 1rem 0 1.5rem;
}
.separator-img {
  width: 90%;
  height: auto;
  object-fit: contain;
  margin: 1rem 0;
}
.room-card {
  overflow: hidden;
  max-width: 37rem;
  width: 100vw;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;

  p,
  li {
    font-size: 1.4rem;
  }
    &:hover {
        .room-card__price-amount {
            background-color: #7cd179 !important;
        }
    }
  .room-card__image {
    width: 100%;
    height: 25rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .room-card__content {
    padding: 2rem;
    .room-card__header {
      .room-card__header-container {
        position: relative;
        h3 {
          font-size: 2.4rem;
          text-transform: capitalize;
          line-height: 1.2;
          margin-top: 3rem;
          font-weight: 600;
          color: var(--color-gray-4);
        }
        .room-card__price-amount {
          font-size: 4.4rem;
          position: absolute;
          top: 0;
          right: 50%;
          transform: translate(50%, -8rem);
          background-color: var(--color-alternative-color);
          color: var(--color-white);
          font-weight: 600;
          padding: 0.5rem 0.8rem;
          border-radius: 1rem;
          white-space: NOWRAP;
          transition: all 0.5s;
        }
      }
      p {
        text-align: left;
        color: var(--color-alternative-color);
      }
    }
  }
  .room-card__amenities-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    margin: 1rem 0;

    .room-card__amenities {
      display: flex;
      flex-wrap: nowrap;
      gap: 1rem;
      align-items: center;
      animation: amenities-loop 25s linear infinite;
      padding: 0.5rem 0;

      svg {
        flex: 0 0 auto;
        width: 3.2rem;
        height: 3.2rem;

        path {
          fill: var(--svg-fill-color);
        }
      }
    }

    @keyframes amenities-loop {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
      // Moves by 50% because items are duplicated
    }
  }
  .room-features-container {
    padding-left: 2rem;
    ul {
      li {
        line-height: 1.4;
      }
    }
  }
  .room-card__footer {
    .room-card__actions {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: center;
      button {
          cursor: pointer;
        outline: 0;
        border: 0;
        padding: 1rem 1.5rem;
        border-radius: 1rem;
        font-size: 1.5rem;
        color: var(--color-white);
        font-family: var(--font-primary);
        transition: all .5s;
      }
      .room-card__details-btn {
        background-color: var(--color-alternative-color-dark);
        &:hover{
            background-color: #3b8fa7;
        }
      }

      .room-card__reserve-btn {
        background-color: var(--color-alternative-color);
        &:hover{
            background-color: #7cd179;
        }
      }
    }
  }
}
svg {
  width: 3rem;
  height: 3rem;
  fill: var(--svg-fill-color);
}

/* Room Modal Styles */
.room-modal {
  * {
    color: var(--color-gray-5);
  }
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 0.5rem;

  .room-modal__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0f2b33cb;
    backdrop-filter: blur(2px);
  }

  .room-modal__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    .room-modal__grid {
      max-height: 90vh;
      overflow-y: auto;
      border-radius: 1.2rem;
      background: var(--casa-del-inka-bg);
      align-self: center;
      width: 95%;
      max-width: 100rem;
      display: grid;
      grid-template-areas:
        "right"
        "left";
      padding: 1rem;

      .room-modal_left {
        grid-area: left;
        overflow: hidden;
        .room-gallery-slider {
          .room-gallery-slider__container {
            position: relative;
            border-radius: 1rem;
            overflow: hidden;
            background: #f8f9fa;

            .room-gallery-slider__track {
              display: flex;
              transition: transform 0.3s ease;

              .room-gallery-slider__slide {
                flex: 0 0 100%;

                img {
                  width: 100%;
                  height: 43rem;
                  object-fit: cover;
                  display: block;
                }
              }
            }

            .room-gallery-slider__prev,
            .room-gallery-slider__next {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              width: 4rem;
              height: 4rem;
              background: var(--color-white);
              border: none;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: all 0.3s ease;
              z-index: 10;

              &:hover {
                background: white;
                transform: translateY(-50%) scale(1.1);
              }

              svg {
                width: 2.5rem;
                height: 2.5rem;
                fill: transparent;
              }

              &.hidden {
                display: none;
              }
            }

            .room-gallery-slider__prev {
              left: 1rem;
            }

            .room-gallery-slider__next {
              right: 1rem;
            }

            .room-gallery-slider__pagination {
              position: absolute;
              bottom: 1rem;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              gap: 0.5rem;
              z-index: 10;

              .room-gallery-slider__dot {
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
                border: 2px solid var(--color-alternative-color-dark);
                background: transparent;
                cursor: pointer;
                transition: all 0.3s ease;
                &.active {
                  background: var(--color-alternative-color-dark);
                }

                &:hover {
                  background: var(--color-alternative-color);
                }
              }
            }
          }

          .room-gallery-slider__thumbnails {
            display: flex;
            gap: 0.5rem;
            margin-top: 1rem;
            overflow-x: auto;
            overflow-y: hidden;
            padding: 0.5rem 0;
            white-space: nowrap;
            max-width: 100%;
            box-sizing: border-box;
            .room-gallery-slider__thumbnail {
              flex: 0 0 auto;
              min-width: 0;
              width: 6rem;
              height: 6rem;
              border: 0.2rem solid transparent;
              border-radius: 0.5rem;
              overflow: hidden;
              cursor: pointer;
              transition: all 0.3s ease;

              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
        }
        .room-modal__reservation {
          text-align: center;
          background-color: var(--color-background);
          box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
            rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
          padding: 2rem 1rem;
          border-radius: 1rem;
          display: grid;
          gap: 2rem;
          place-items: center;
          h2 {
            font-size: 3.4rem;
            font-weight: 800;
            margin: 1rem 0;
            color: var(--color-gray-4);
          }
          h3 {
            font-size: 2.2rem;
            font-weight: 500;
            color: var(--color-alternative-color);
            line-height: 1.2;
          }
          p {
            font-size: 1.4rem;
            line-height: 1.5;
          }
          .room-modal__button {
            background-color: var(--color-gray-1);
            border: 0;
            border-radius: 2rem;
            outline: 0;
            color: var(--color-gray-4);
            padding: 1.2rem;
            display: grid;
            column-gap: 0.8rem;
            width: 100%;
            line-height: 1.2;
            grid-template-areas:
              "reserve price"
              "text price";

            box-shadow: 2px 1px 0px 3px var(--color-alternative-color);
            .button-span-reserve {
              grid-area: reserve;
              font-weight: 700;
              font-size: 2rem;
              text-align: right;
            }
            .button-span-text {
              grid-area: text;
              font-size: 1.4rem;
              text-align: right;
              font-weight: 600;
              color: var(--color-gray-3);
            }
            .button-span-price {
              grid-area: price;
              font-size: 3.8rem;
              font-weight: 700;
              background-color: var(--color-alternative-color);
              color: var(--color-white);
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 1rem;
              border-radius: 2rem;
            }
          }
        }
      }
      .room-modal_right {
        grid-area: right;
        .room-modal__title {
          font-size: 3.4rem;
          font-weight: 600;
          color: var(--color-gray-4);
        }
        .room-modal__feature {
          color: var(--color-alternative-color);
          text-align: left;
        }
        .room-modal__section {
          span,
          h3 {
            font-size: 1.8rem;
            font-weight: 600;
            text-transform: capitalize;
          }
          .room-modal__size {
            font-weight: 300;
            font-size: 1.6rem;
          }
          ul {
            padding: 1rem 2.5rem;
            li {
              font-size: 1.4rem;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }

  .room-modal__close {
    position: absolute;
    top: -4rem;
    right: 50%;
    border: 0;
    outline: 0;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 10;
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../assets/images/close.svg") center no-repeat;
    background-size: contain;
  }
}
.room-modal__amenities {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 60px; /* fixed height for SVGs */
    * {
    fill: var(--svg-fill-color);
  }
}

.room-modal__amenities .amenities-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 20px;
  white-space: nowrap;
  will-change: transform;
  height: 100%;
  align-items: center;
}

.room-modal__amenities svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.room-gallery-simple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1rem 0;

  .room-gallery-simple__item {
    border-radius: 0.5rem;
    overflow: hidden;

    img {
      width: 100%;
      height: 120px;
      object-fit: cover;
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }
    }
  }
}
@media (max-width: 410px) {
  .room-modal__button {
    place-content: center;
    place-items: center;
    grid-template-areas:
      "reserve text"
      "price price" !important;
    row-gap: 1rem !important;
    .button-span-reserve {
      font-size: 1.5rem !important;
    }
    .button-span-text {
      font-size: 1.2rem !important;
    }
  }
}
@media (min-width: 780px) {
  .room-modal__grid {
    grid-template-areas: "left right" !important;
    gap: 4rem;
  }
  .room-modal__reservation {
    gap: 1rem !important;
  }
  .room-modal_right {
    max-width: 35rem !important;
  }
}