/* Search window */
.hotels-search-window {
  position: relative;
  isolation: isolate;
  width: 100vw;
  margin: -24px calc(50% - 50vw) 36px;
  padding: 48px max(20px, calc((100vw - 1200px) / 2 + 16px)) 58px;
  overflow: hidden;
  border-radius: 0 0 72px 72px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 246, 232, 0.97) 46%, rgba(255, 205, 132, 0.98) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 236, 169, 0.74));
}

.hotels-search-window::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0.64)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
  content: "";
  pointer-events: none;
}

.hotels-search-window__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 24px;
  border: 1px solid #e4e2de;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 15px rgba(43, 42, 39, 0.1);
  backdrop-filter: blur(16px);
}

.hotels-search-window__intro {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr);
  gap: 25px;
  align-items: start;
}

.hotels-search-window__kiddi {
  display: block;
  width: 65px;
  height: 77px;
  object-fit: contain;
}

.hotels-search-window__copy {
  min-width: 0;
}

.hotels-search-window__title {
  margin: 0 0 8px;
  color: #1b1a27;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 23px;
  letter-spacing: 0;
}

.hotels-search-window__message {
  max-width: 884px;
  margin: 0;
  color: #a7a29b;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
}

.hotels-search-window__message b {
  color: #817b74;
  font-weight: 400;
}

.hotels-search-window__form {
  display: block;
  min-width: 0;
  margin-top: 32px;
}

.hotels-search-window__field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-width: 0;
  min-height: 56px;
  padding: 6px 24px;
  border: 1px solid #e4e2de;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.hotels-search-window__input {
  width: 100%;
  min-width: 0;
  height: 23px;
  border: 0;
  outline: none;
  color: #a7a29b;
  background: transparent;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: 0;
}

.hotels-search-window__input::placeholder {
  color: #a7a29b;
  opacity: 1;
}

.hotels-search-window__submit {
  border: 0;
  font-family: "Manrope", sans-serif;
  cursor: pointer;
}

.hotels-search-window__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition:
    transform 0.18s ease;
}

.hotels-search-window__submit svg {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}

.hotels-search-window__submit:hover {
  transform: translateY(-1px);
}

.hotels-search-window__submit:focus-visible,
.hotels-search-window__input:focus-visible {
  outline: 2px solid #a985e7;
  outline-offset: 3px;
}

/* Main hotel card container */
.hotel-list-card {
  display: grid; /* Creates two columns: image on the left, content on the right */
  grid-template-columns: minmax(300px, 32%) minmax(0, 1fr); /* Left column is image, right column fills remaining space */
  width: min(100%, 1200px); /* Matches the search panel width */
  max-width: none; /* Width already caps the card */
  margin-inline: auto; /* Centers the card horizontally if parent allows it */
  overflow: hidden; /* Clips child elements inside rounded corners */
  border-radius: 38px; /* Rounds the whole card */
  background: #ffffff; /* Sets white card background */
  box-shadow: none; /* Removes shadow */
}

/* Green outline for exact/name matches */
.hotel-list-card--name-match {
  outline: 1px solid rgba(16, 185, 129, 0.28); /* Soft green outline */
}

/* Orange outline for partial matches */
.hotel-list-card--partial {
  outline: 1px solid rgba(245, 158, 11, 0.28); /* Soft orange outline */
}

/* Left image/media area */
.hotel-list-card__media {
  position: relative; /* Allows absolute-positioned buttons inside */
  min-height: 326px; /* Matches the card height */
  aspect-ratio: 1 / 1; /* Keeps the image area square */
  background: #eeeeee; /* Fallback background while image loads */
  border-radius: 38px 0 0 38px; /* Rounds only left corners */
  touch-action: pan-y; /* Allows vertical scroll on touch devices */
}

/* Image viewport wrapper */
.hotel-list-card__viewport {
  width: 100%; /* Fills media width */
  height: 100%; /* Fills media height */
  overflow: hidden; /* Hides carousel overflow */
  border-radius: 38px 0 0 38px; /* Matches media rounded corners */
}

/* Carousel track */
.hotel-list-card__track {
  display: flex; /* Places slides in a horizontal row */
  width: 100%; /* Fills viewport width */
  height: 100%; /* Fills viewport height */
  transition: transform 220ms ease; /* Smooth carousel movement */
  will-change: transform; /* Optimizes carousel animation */
}

/* Individual carousel slide */
.hotel-list-card__slide {
  flex: 0 0 100%; /* Each slide takes full viewport width */
  width: 100%; /* Ensures slide fills viewport */
  height: 100%; /* Ensures slide fills viewport */
}

/* Hotel image */
.hotel-list-card__image {
  width: 100%; /* Fills slide width */
  height: 100%; /* Fills slide height */
  object-fit: cover; /* Crops image nicely without distortion */
  border-radius: 38px 0 0 38px; /* Matches left-side rounded corners */
}

/* Placeholder image style */
.hotel-list-card__image--placeholder {
  display: flex; /* Centers placeholder content */
  align-items: center; /* Centers vertically */
  justify-content: center; /* Centers horizontally */
  background-color: #f4f4f4; /* Light fallback background */
  background-image:
    linear-gradient(45deg, #e5e5e5 25%, transparent 25%),
    linear-gradient(-45deg, #e5e5e5 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e5e5 75%),
    linear-gradient(-45deg, transparent 75%, #e5e5e5 75%); /* Checkerboard placeholder pattern */
  background-position: 0 0, 0 20px, 20px -20px, -20px 0; /* Positions checkerboard tiles */
  background-size: 40px 40px; /* Size of checkerboard pattern */
}

/* Visually hidden placeholder label */
.hotel-list-card__image--placeholder span {
  position: absolute; /* Removes it from layout */
  width: 1px; /* Keeps it tiny for screen readers */
  height: 1px; /* Keeps it tiny for screen readers */
  overflow: hidden; /* Hides visual overflow */
  clip: rect(0, 0, 0, 0); /* Clips the element visually */
  white-space: nowrap; /* Prevents text wrapping */
}

.hotel-list-card__media-nav {
  position: absolute; /* Places controls over image */
  display: flex; /* Aligns controls in a row */
  justify-content: space-between; /* Separates navigation buttons */
}

/* Carousel arrows */
.hotel-list-card__media-nav {
  top: 50%; /* Places arrows vertically in the middle */
  left: 28px; /* Distance from left */
  right: 28px; /* Distance from right */
  transform: translateY(-50%); /* Corrects vertical centering */
}

/* Carousel navigation dot/button */
.hotel-list-card__nav-dot {
  display: inline-flex; /* Allows centering inside button */
  align-items: center; /* Centers icon vertically */
  justify-content: center; /* Centers icon horizontally */
  width: 34px; /* Button width */
  height: 34px; /* Button height */
  padding: 0; /* Removes default button padding */
  border: 0; /* Removes default border */
  border-radius: 9999px; /* Makes button circular */
  color: #ffffff; /* White arrow */
  cursor: pointer; /* Shows pointer cursor */
  background: rgba(66, 66, 66, 0.34); /* Semi-transparent dark background */
}

/* Carousel navigation hover state */
.hotel-list-card__nav-dot:hover {
  background: rgba(66, 66, 66, 0.5); /* Darkens button on hover */
}

/* Keyboard focus state */
.hotel-list-card__nav-dot:focus-visible {
  outline: 2px solid #ffffff; /* White focus outline */
  outline-offset: 2px; /* Moves outline away from button */
}

/* Arrow text/icon inside button */
.hotel-list-card__nav-dot span {
  font-size: 26px; /* Arrow size */
  line-height: 1; /* Removes extra vertical space */
  transform: translateY(-1px); /* Slight optical alignment */
}

/* Right side of the card */
.hotel-list-card__body {
  display: flex; /* Makes body a vertical layout */
  flex-direction: column; /* Stacks content vertically */
  justify-content: space-between; /* Spreads inner content from top to bottom */
  width: 100%; /* Lets the body fill the clickable link wrapper */
  min-height: 326px; /* Keeps body aligned with image height */
  padding: 12px 48px 24px 42px; /* top right bottom left */
  border: 1px solid #dfdfdf; /* Light border around content */
  border-left: 0; /* Removes border between image and content */
  border-radius: 0 38px 38px 0; /* Rounds only right corners */
  background: #ffffff; /* White background */
}

.hotel-list-card__body-link {
  display: flex; /* Lets the right column expand like the old body block */
  min-width: 0; /* Prevents flex overflow with long hotel names */
  color: inherit; /* Keeps card copy styling unchanged */
  text-decoration: none; /* Removes default link underline */
}

.hotel-list-card__body-link:hover .hotel-list-card__title {
  color: #111111; /* Preserves the title hover cue across the full body link */
}

.hotel-list-card__body-link:focus-visible {
  outline: none; /* Uses the card panel itself for the focus ring */
}

.hotel-list-card__body-link:focus-visible .hotel-list-card__body {
  outline: 2px solid #a678e7; /* Shows a clear keyboard focus state */
  outline-offset: 3px; /* Pulls the focus ring away from the border */
}

/* Content wrapper inside body */
.hotel-list-card__content {
  display: flex; /* Makes content a vertical flex layout */
  flex: 1; /* Allows content to fill available body height */
  min-width: 0; /* Prevents text overflow in flex layout */
  flex-direction: column; /* Stacks header, chips, description vertically */
  justify-content: space-evenly; /* Places all inner blocks evenly vertically */
}

/* Header block */
.hotel-list-card__header {
  display: flex; /* Places title area and possible side content in a row */
  gap: 12px; /* Space between header items */
  justify-content: space-between; /* Pushes items apart */
  align-items: flex-start; /* Aligns items to the top */
}

/* Title row */
.hotel-list-card__title-row {
  display: flex; /* Allows title and badges to sit together */
  align-items: center; /* Aligns title and badges vertically */
  flex-wrap: wrap; /* Allows badges to wrap if needed */
  gap: 8px; /* Space between title and badges */
}

/* Hotel title */
.hotel-list-card__title {
  margin: 0; /* Removes default heading margin */
  color: #212121; /* Dark title color */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 20px; /* Title size */
  font-weight: 700; /* Bold title */
  line-height: 1.2; /* Compact title line height */
}

/* Location text */
.hotel-list-card__location {
  margin: 0; /* Removes default paragraph margin */
  color: #8b8b8b; /* Muted grey */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 14px; /* Location font size */
  font-weight: 400; /* Normal font weight */
  line-height: 1.25; /* Compact line height */
}

/* Match badge */
.hotel-list-card__variant-badge {
  display: inline-flex; /* Keeps badge compact */
  align-items: center; /* Centers badge text vertically */
  border-radius: 9999px; /* Pill shape */
  padding: 4px 10px; /* Badge spacing */
  font-size: 10px; /* Small badge text */
  font-weight: 700; /* Bold badge text */
  letter-spacing: 0.04em; /* Adds uppercase spacing */
  text-transform: uppercase; /* Makes badge uppercase */
}

/* Name match badge */
.hotel-list-card__variant-badge--name-match {
  background: #d1fae5; /* Soft green background */
  color: #047857; /* Dark green text */
}

/* Partial match badge */
.hotel-list-card__variant-badge--partial {
  background: #fef3c7; /* Soft yellow background */
  color: #b45309; /* Dark orange text */
}

/* Chips block */
.hotel-list-card__chips {
  display: flex; /* Places chips in rows */
  flex-wrap: wrap; /* Allows chips to wrap onto new lines */
  gap: 10px 12px; /* Vertical and horizontal spacing between chips */
  margin: 0; /* Removes old manual top spacing */
}

/* Individual chip */
.hotel-list-card__chip {
  display: inline-flex; /* Aligns icon and text inside chip */
  align-items: center; /* Centers chip content vertically */
  min-height: 29px; /* Keeps chips consistent height */
  max-width: 100%; /* Prevents chips from overflowing parent */
  padding: 5px 13px 5px 11px; /* Inner chip spacing */
  gap: 8px; /* Space between icon and text */
  border: 1px solid #e3dfda; /* Light chip border */
  border-radius: 999px; /* Pill-shaped chip */
  color: #666666; /* Chip text color */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 11px; /* Chip font size */
  font-weight: 400; /* Normal chip font weight */
  line-height: 1.2; /* Compact chip text */
  white-space: nowrap; /* Keeps chip text on one line on desktop */
}

/* Chip text */
.hotel-list-card__chip span {
  overflow: hidden; /* Hides long text overflow */
  text-overflow: ellipsis; /* Adds ... for long text */
}

/* Chip icon */
.hotel-list-card__chip-icon {
  flex: 0 0 auto; /* Prevents icon from shrinking */
  color: #ff9d45; /* Orange icon color */
}

/* Muted chip */
.hotel-list-card__chip--muted {
  color: #8b8b8b; /* Lighter grey text */
}

/* Description text */
.hotel-list-card__description {
  margin: 0; /* Removes default paragraph margin */
  max-width: 430px; /* Keeps description readable */
  color: #8b8b8b; /* Muted grey text */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 14px; /* Description font size */
  font-weight: 400; /* Normal font weight */
  line-height: 1.35; /* Comfortable line height */
}

/* Extra meta text */
.hotel-list-card__meta {
  margin: 12px 0 0; /* Adds space above meta text */
  color: #94a3b8; /* Muted blue-grey */
  font-size: 0.78rem; /* Small meta text */
}

/* Footer with rating */
.hotel-list-card__footer {
  display: flex; /* Places footer items in a row */
  align-items: flex-end; /* Aligns footer items to bottom */
  justify-content: flex-start; /* Starts footer from the left */
  gap: 12px; /* Space between footer items */
  flex-wrap: wrap; /* Allows footer items to wrap */
  margin-top: 20px; /* Adds breathing room above rating */
}

/* Rating block */
.hotel-list-card__score {
  display: flex; /* Places score badge and text in a row */
  align-items: center; /* Centers score content vertically */
  gap: 12px; /* Matches home carousel score spacing */
  min-width: 0; /* Prevents overflow */
}

/* Rating circle */
.hotel-list-card__score-badge {
  display: inline-flex; /* Centers text inside circle */
  align-items: center; /* Centers vertically */
  justify-content: center; /* Centers horizontally */
  width: 36px; /* Matches home carousel badge width */
  height: 36px; /* Matches home carousel badge height */
  border-radius: 999px; /* Makes badge circular */
  background: #a985e7; /* Home carousel purple */
  color: #ffffff; /* White text */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 15px; /* Score number size */
  font-weight: 600; /* Matches home carousel score weight */
  line-height: 20px; /* Matches home carousel score line height */
  flex: 0 0 auto; /* Prevents badge from shrinking */
}

/* Rating copy wrapper */
.hotel-list-card__score-copy {
  display: flex; /* Stacks score text lines like home carousel */
  flex-direction: column; /* Places label below score heading */
  min-width: 0; /* Prevents text overflow */
}

/* Rating title and subtitle reset */
.hotel-list-card__score-title,
.hotel-list-card__score-subtitle {
  margin: 0; /* Removes default paragraph margin */
}

/* Rating title */
.hotel-list-card__score-title {
  color: #a985e7; /* Home carousel purple */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 12px; /* Home carousel score text size */
  font-weight: 500; /* Home carousel score text weight */
  line-height: 1.5; /* Home carousel score line height */
}

/* Rating subtitle */
.hotel-list-card__score-subtitle {
  color: #8b8b8b; /* Home carousel muted grey */
  font-family: "Manrope", sans-serif; /* Uses Manrope font */
  font-size: 12px; /* Home carousel label size */
  font-weight: 300; /* Home carousel label weight */
  line-height: 1.5; /* Home carousel label line height */
}

/* Tablet/mobile layout */
@media (max-width: 900px) {
  .hotels-search-window {
    margin-bottom: 32px;
    padding: 36px 20px 46px;
    border-radius: 0 0 52px 52px;
  }

  .hotels-search-window__panel {
    padding: 24px;
    border-radius: 24px;
  }

  .hotels-search-window__intro {
    grid-template-columns: 65px minmax(0, 1fr);
    gap: 20px;
  }

  .hotels-search-window__kiddi {
    width: 65px;
    height: 77px;
  }

  .hotels-search-window__title {
    font-size: 19px;
    line-height: 23px;
  }

  .hotels-search-window__message {
    font-size: 19px;
    line-height: 23px;
  }

  .hotels-search-window__field {
    min-height: 56px;
    padding-left: 24px;
  }

  .hotels-search-window__input {
    height: 23px;
    font-size: 19px;
  }

  .hotels-search-window__submit {
    width: 40px;
    height: 40px;
  }

  .hotel-list-card {
    grid-template-columns: 1fr; /* Changes card to one column */
    max-width: none; /* Keeps full width */
    border-radius: 28px; /* Smaller rounded corners */
  }

  .hotel-list-card__media {
    min-height: 260px; /* Reduces image height */
    aspect-ratio: 16 / 10; /* Makes image wider on mobile */
    border-radius: 28px 28px 0 0; /* Rounds top corners only */
  }

  .hotel-list-card__viewport {
    border-radius: 28px 28px 0 0; /* Matches media corners */
  }

  .hotel-list-card__image {
    border-radius: 28px 28px 0 0; /* Matches media corners */
  }

  .hotel-list-card__body {
    min-height: unset; /* Allows content height to adapt naturally */
    padding: 12px; /* Smaller mobile padding */
    border-left: 1px solid #dfdfdf; /* Restores left border on stacked layout */
    border-top: 0; /* Removes border between image and content */
    border-radius: 0 0 28px 28px; /* Rounds bottom corners only */
  }

  .hotel-list-card__content {
    justify-content: flex-start; /* Removes vertical spreading on mobile */
    gap: 28px; /* Adds normal spacing between header, chips, and description */
  }

  .hotel-list-card__footer {
    margin-top: 28px; /* Adds normal spacing above rating on mobile */
  }
}

/* Small mobile layout */
@media (max-width: 640px) {
  .hotels-search-window {
    margin: -24px calc(50% - 50vw) 28px;
    padding: 26px 14px 36px;
    border-radius: 0 0 34px 34px;
  }

  .hotels-search-window__panel {
    padding: 20px 14px 18px;
    border-radius: 22px;
  }

  .hotels-search-window__intro {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
  }

  .hotels-search-window__kiddi {
    width: 52px;
    height: 62px;
  }

  .hotels-search-window__title {
    margin-bottom: 6px;
    font-size: 17px;
    line-height: 21px;
  }

  .hotels-search-window__message {
    font-size: 16px;
    line-height: 21px;
  }

  .hotels-search-window__form {
    margin-top: 18px;
  }

  .hotels-search-window__field {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 54px;
    padding: 7px 8px 7px 14px;
    border-radius: 8px;
  }

  .hotels-search-window__input {
    height: 20px;
    font-size: 16px;
    line-height: 20px;
  }

  .hotels-search-window__submit {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .hotel-list-card {
    border-radius: 28px; /* Keeps rounded card on small screens */
  }

  .hotel-list-card__title {
    font-size: 18px; /* Slightly smaller title */
  }

  .hotel-list-card__header,
  .hotel-list-card__footer {
    flex-direction: column; /* Stacks header/footer content vertically */
    align-items: flex-start; /* Aligns stacked content to the left */
  }

  .hotel-list-card__chip {
    white-space: normal; /* Allows chip text to wrap on small screens */
  }

  .hotel-list-card__media-nav {
    left: 12px; /* Reduces left arrow spacing */
    right: 12px; /* Reduces right arrow spacing */
  }
}