/* ==========================================================================
   Search Panel v2 - matches approved mockup design
   Separate stylesheet, no SCSS rebuild required.
   ========================================================================== */

.booking-panel-v2 {
  margin-top: -2.5rem;
  background-color: #fff;
  z-index: 4;
  position: relative;
  border-radius: .75rem;
  box-shadow: 0 .3rem 1.4rem 0 rgba(0,0,0,.15);
  width: 94%;
  max-width: 90rem; /* 1440px - widened per request */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ---------- Main search row ---------- */
.booking-panel-v2 .search-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem 1.25rem;
}

.booking-panel-v2 .field-group {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .75rem;
  border-radius: .4rem;
  transition: background .2s ease;
  flex: 1 1 auto;
  min-width: 130px;
}

.booking-panel-v2 .field-group:hover {
  background: #EFEEE9;
}

.booking-panel-v2 .field-icon {
  color: #1D2224;
  opacity: .55;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: inline-flex;
}

.booking-panel-v2 .field-icon svg {
  width: 100%;
  height: 100%;
}

.booking-panel-v2 .field-icon.small {
  width: 16px;
  height: 16px;
}

.booking-panel-v2 .field-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.booking-panel-v2 .field-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04rem;
  color: rgba(29, 34, 36, .65);
  margin-bottom: .1rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.booking-panel-v2 .field-text input,
.booking-panel-v2 .field-text select {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: auto;
  font-size: .95rem;
  font-weight: 600;
  color: #161A1C;
  cursor: pointer;
}

.booking-panel-v2 .field-text input::placeholder {
  color: rgba(22, 26, 28, .4);
  font-weight: 400;
}

.booking-panel-v2 .field-text select {
  min-width: 100px;
}

/* More filters + Search buttons */
.booking-panel-v2 .more-filters-toggle {
  background: #EFEEE9;
  border: none;
  border-radius: .4rem;
  padding: .75rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #1D2224;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.booking-panel-v2 .more-filters-toggle:hover {
  background: #e2e0d9;
}

.booking-panel-v2 .more-filters-toggle .chevron {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid #1D2224;
  border-bottom: 2px solid #1D2224;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-top: -3px;
}

.booking-panel-v2 .more-filters-toggle .chevron.open {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.booking-panel-v2 .search-submit {
  white-space: nowrap;
  margin: 0;
}

/* ---------- Advanced filters panel ---------- */
.booking-panel-v2 .advanced-filters-v2 {
  border-top: 1px solid rgba(22, 26, 28, .08);
  padding: 1.5rem 1.25rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.booking-panel-v2 .filter-section {
  flex: 1 1 200px;
}

.booking-panel-v2 .section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05rem;
  color: #1D2224;
  margin: 0 0 .75rem 0;
}

.booking-panel-v2 .section-fields {
  display: flex;
  gap: .75rem;
}

.booking-panel-v2 .mini-field {
  display: flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(22, 26, 28, .15);
  border-radius: .4rem;
  padding: .5rem .75rem;
  flex: 1;
}

.booking-panel-v2 .mini-field select,
.booking-panel-v2 .mini-field input {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  height: auto;
  font-size: .9rem;
  font-weight: 600;
  color: #161A1C;
  cursor: pointer;
  width: 100%;
}

.booking-panel-v2 .mini-field input::placeholder {
  color: rgba(22, 26, 28, .4);
  font-weight: 400;
}

.booking-panel-v2 .mini-field input[type="number"] {
  cursor: text;
}

/* Price fields */
.booking-panel-v2 .price-fields {
  align-items: center;
}

.booking-panel-v2 .price-separator {
  color: rgba(22, 26, 28, .35);
}

/* Amenity cards */
.booking-panel-v2 .amenities-section {
  flex: 2 1 340px;
}

.booking-panel-v2 .included-amenities-note {
  font-size: .78rem;
  color: rgba(22, 26, 28, .6);
  margin: 0 0 .75rem 0;
  line-height: 1.4;
}

/* "Discover more" link inline next to the Location label */
.booking-panel-v2 .discover-more-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04rem;
  color: #C0567B;
  cursor: pointer;
  white-space: nowrap;
}

.booking-panel-v2 .discover-more-link:hover {
  color: #a3455f;
  text-decoration: underline;
}

/* Locations popup */
.locations-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(22, 26, 28, .55);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.locations-popup {
  background: #fff;
  border-radius: .75rem;
  max-width: 32rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
}

.locations-popup h3 {
  margin: 0 0 1.25rem 0;
  font-size: 1.3rem;
  color: #161A1C;
}

.locations-popup-area {
  margin-bottom: 1.25rem;
}

.locations-popup-area:last-of-type {
  margin-bottom: 1.5rem;
}

.locations-popup-area h4 {
  margin: 0 0 .35rem 0;
  font-size: .95rem;
  color: #161A1C;
}

.locations-popup-area p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
  color: rgba(22, 26, 28, .75);
}

/* .locations-popup-full-link removed per client request (Loom, Sep 2026) -
   the "View full locations guide" link pointed at a placeholder page with
   dummy text. The popup itself (overlay, area descriptions, close button)
   stays - see the matching comment in search-container.js. */

.locations-popup-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(22, 26, 28, .45);
  cursor: pointer;
  padding: .25rem .5rem;
}

.locations-popup-close:hover {
  color: #161A1C;
}

.booking-panel-v2 .amenity-cards {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.booking-panel-v2 .amenity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  border: 1px solid rgba(22, 26, 28, .15);
  border-radius: .5rem;
  background: #fff;
  padding: .65rem .5rem;
  min-width: 78px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #1D2224;
}

.booking-panel-v2 .amenity-card:hover {
  border-color: rgba(22, 26, 28, .3);
}

.booking-panel-v2 .amenity-card.active {
  border-color: #C0567B;
  box-shadow: 0 0 0 1px #C0567B;
  color: #C0567B;
}

.booking-panel-v2 .amenity-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
}

.booking-panel-v2 .amenity-icon svg {
  width: 100%;
  height: 100%;
}

.booking-panel-v2 .amenity-label {
  font-size: .72rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Footer */
.booking-panel-v2 .advanced-filters-footer {
  width: 100%;
  border-top: 1px solid rgba(22, 26, 28, .08);
  margin-top: 1.5rem;
  padding: .9rem 1.25rem;
  background: #FAFAF8;
  border-bottom-left-radius: .75rem;
  border-bottom-right-radius: .75rem;
}

.booking-panel-v2 .clear-all-link {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(22, 26, 28, .65);
  cursor: pointer;
  padding: 0;
}

.booking-panel-v2 .clear-all-link:hover {
  color: #161A1C;
}

/* ---------- Small screens ---------- */
@media (max-width: 39.9375em) {
  .booking-panel-v2 .search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .booking-panel-v2 .field-group {
    width: 100%;
  }

  .booking-panel-v2 .more-filters-toggle,
  .booking-panel-v2 .search-submit {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .booking-panel-v2 .advanced-filters-v2 {
    flex-direction: column;
    gap: 1.25rem;
  }

  .booking-panel-v2 .section-fields {
    flex-direction: column;
  }
}