.golf-search {
  --golf-gold: #febb02;
  --golf-primary-dark: #218887;
  --golf-primary-deep: #104443;
  --golf-text: #3c4e5a;
  --golf-text-muted: #707070;
  --golf-ink: #141515;
  --golf-primary: #02aaa9;
  display: grid;
  gap: 10px;
  width: 100%;
}

/* ---- Golf search results page (HotelSearchResult.cshtml) - prototypes/golf-search-results/:
   the mode pills sit on a taller teal band (56px, vs the 36px band .search-wrapper gives the
   other results pages), active pill is gold, no ATOL note line under the pills. ---- */
.search-wrapper:has(.golf-search--results) {
  background: linear-gradient(180deg, #176e6d 0 56px, transparent 56px);
}

.golf-search--results {
  gap: 8px;
}

.golf-search--results .golf-search-modes {
  /* padding: 4px 2px 0; */
}

.golf-search--results .golf-search-mode {
  min-height: 36px;
  background: rgba(255, 255, 255, 0.16);
}

.golf-search--results .golf-search-mode:has(input:checked) {
  background: var(--golf-gold);
  color: var(--golf-primary-deep);
}

.golf-search--results .golf-search-note {
  display: none !important;
}

/* Golf results hero - same .hsr-hero__inner card, golf photo, and package/stay copy switched by
   the bar's mode toggle (the radios live in the bar, so this keys off body:has(), as the
   prototype does). */
.hsr-hero--golf {
  background:
    linear-gradient(
      105deg,
      rgba(16, 68, 67, 0.96) 0%,
      rgba(16, 68, 67, 0.82) 36%,
      rgba(2, 170, 169, 0.28) 62%,
      rgba(16, 68, 67, 0.18) 100%
    ),
    url("https://www.cyprusparadise.com/media/7088/north-cyprus-golf-holidays-opt.jpg?width=2000") 78% 22% / cover;
}

.hsr-hero--golf h1 {
  max-width: 14ch;
  text-shadow: 0 2px 18px rgba(16, 68, 67, 0.45);
}

.hsr-hero--golf .hsr-hero__kicker {
  color: #febb02;
}

.hsr-hero--golf p:not(.hsr-hero__kicker) {
  max-width: 36rem;
}

.hsr-hero--golf [data-for="stay"],
body:has([name="golfMode"][value="stay"]:checked) .hsr-hero--golf [data-for="package"] {
  display: none;
}

body:has([name="golfMode"][value="stay"]:checked) .hsr-hero--golf p[data-for="stay"] {
  display: block;
}

body:has([name="golfMode"][value="stay"]:checked) .hsr-hero--golf li[data-for="stay"] {
  display: list-item;
}

/* ---- Package / Stay mode toggle + note - CSS-only :has() trick, same as the prototype's own
   .golf:has([name="golfMode"][value="stay"]:checked) pattern. ---- */

.golf-search-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.golf-search-mode {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.golf-search-mode input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.golf-search-mode:has(input:checked) {
  background: #fff;
  color: var(--golf-primary-deep);
}

.golf-search-mode:focus-within {
  outline: 2px solid var(--golf-gold);
  outline-offset: 2px;
}

.golf-search-note {
  margin: -4px 0 0;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.86);
}

.golf-search-note[data-for="stay"] {
  display: none;
}

.golf-search:has([name="golfMode"][value="stay"]:checked) .golf-search-note[data-for="package"] {
  display: none;
}

.golf-search:has([name="golfMode"][value="stay"]:checked) .golf-search-note[data-for="stay"] {
  display: block;
}

/* Departure date field's two labels (package: "Departure date" / stay: "Check-in") - same
   [data-for] pair-of-spans pattern as the note above. */
.golf-search-bar__field span[data-for="stay"] {
  display: none;
}

.golf-search:has([name="golfMode"][value="stay"]:checked) .golf-search-bar__field span[data-for="package"] {
  display: none;
}

.golf-search:has([name="golfMode"][value="stay"]:checked) .golf-search-bar__field span[data-for="stay"] {
  display: inline;
}

/* Departure airport field only makes sense for the flight+hotel+golf journey - golfSearchDropdowns.js
   also toggles #golfSearchWrap.is-stay itself (belt-and-braces with the :has() rule below, since
   the JS needs that same signal for the form's action/ProductCode/NavigatedFrom anyway). */
.golf-search:has([name="golfMode"][value="stay"]:checked) [data-package-only],
#golfSearchWrap.is-stay [data-package-only] {
  display: none !important;
}

@media (min-width: 981px) {
  .golf-search:has([name="golfMode"][value="stay"]:checked) .golf-search-bar__row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  }
}

/* ---- The gold search bar itself - a button per field, opening a dialog (golfSearchDropdowns.js),
   not a plain input. Visually the same white-card-in-a-gold-bar look as the prototype/
   .aip-search-bar__field, just this page's own class names so GolfSearchTab.cshtml doesn't have
   to fight AipSearchDropdowns.css's own grid-column-count rules for a bar shape unique to this
   page (4-6 fields depending on mode, plus a locked non-dialog Resort/hotel field). ---- */

.golf-search-bar {
  background: var(--golf-gold);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 16px 40px rgba(16, 68, 67, 0.18);
}

.golf-search-bar__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.golf-search-bar__field {
  appearance: none;
  border: 0;
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: box-shadow 0.15s ease;
}

.golf-search-bar__field:hover {
  box-shadow: inset 0 0 0 1px var(--golf-primary-dark);
}

.golf-search-bar__field.is-on {
  box-shadow: inset 0 0 0 2px var(--golf-gold);
}

.golf-search-bar__field span {
  font-size: 11px;
  font-weight: 700;
  color: var(--golf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.golf-search-bar__field strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--golf-ink);
}

.golf-search-bar__field em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.golf-search-bar__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--golf-primary-dark);
}

.golf-search-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #14b8b6, var(--golf-primary));
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2, 170, 169, 0.28);
}

.golf-search-bar__btn svg {
  width: 18px;
  height: 18px;
}

.golf-search-bar__btn:hover {
  background: var(--golf-primary-deep);
}

/* ---- Decorative rounds / tee-time row - nothing here is submitted (see GolfSearchTab.cshtml's
   own header comment). ---- */

.search-golf {
  display: grid;
  grid-template-columns: auto minmax(180px, 240px) minmax(0, 1fr);
  gap: 10px 16px;
  align-items: center;
  margin-top: 8px;
  padding: 6px 8px 8px;
}

.search-golf__rounds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.search-golf__rounds > span,
.search-golf__tees > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--golf-primary-deep);
}

.search-golf__rounds button {
  appearance: none;
  min-width: 40px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--golf-primary-deep);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.search-golf__rounds button.is-on {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--golf-primary-dark);
}

.search-golf__tees {
  appearance: none;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: box-shadow 0.15s ease;
}

.search-golf__tees strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--golf-text);
}

.search-golf__tees em {
  font-style: normal;
}

.search-golf__tees:hover,
.search-golf__tees.is-on {
  box-shadow: inset 0 0 0 2px var(--golf-primary-dark);
}

.search-golf__hint {
  /* grid-column: 1 / -1; */
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--golf-primary-deep);
  opacity: 0.82;
}

/* ---- Responsive - same 980px 2-column stack the prototype's own .search-bar uses, plus
   .search-golf collapsing to one column under it. Search sits at the very bottom of the card on
   mobile (after the rounds/tee-time row), not sandwiched between the fields and it, the way the
   prototype's own stacked layout has it - .golf-search-bar__row switches to display:contents so
   its field buttons AND the submit button become direct grid items of .golf-search-bar itself,
   letting the submit button's own "order" push it below .search-golf despite coming first in the
   markup (search-golf is a later sibling of .golf-search-bar__row, not one of its own children,
   so order alone on elements still inside that row couldn't reach past it). ---- */

@media (max-width: 980px) {
  .golf-search-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .golf-search-bar__row {
    display: contents;
  }

  .search-golf {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    gap: 10px;
    order: 1;
  }

  .golf-search-bar__btn {
    grid-column: 1 / -1;
    order: 2;
  }

  .search-golf__hint {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .golf-search-bar {
    grid-template-columns: 1fr;
  }
}

/* ---- Golf search results page on mobile - same collapsed "Edit search" summary as the other
   results pages (HolidaySearchTab/HotelSearchTab's .aip-search-summary, AipSearchDropdowns.css):
   the mode pills + gold bar are hidden behind the summary line until it's tapped
   (golfSearchDropdowns.js toggles .is-editing and the Edit search / Hide search label). Same
   max-height/visibility transition as .aip-search-bar there. The summary button itself is
   display:none above 860px (AipSearchDropdowns.css), so desktop is unchanged. ---- */
@media (max-width: 860px) {
  .search-wrapper:has(.golf-search--results) {
    background: linear-gradient(180deg, #176e6d 0 36px, transparent 36px);
  }

  .golf-search--results {
    gap: 0;
  }

  .golf-search--results .golf-search-modes,
  .golf-search--results .golf-search-bar {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 0.32s ease,
      margin-top 0.32s ease,
      visibility 0s linear 0.32s;
  }

  .golf-search--results .golf-search-bar {
    padding-top: 0;
    padding-bottom: 0;
    box-shadow: none;
  }

  .golf-search--results.is-editing .golf-search-modes,
  .golf-search--results.is-editing .golf-search-bar {
    visibility: visible;
    transition:
      max-height 0.32s ease,
      margin-top 0.32s ease;
  }

  .golf-search--results.is-editing .golf-search-modes {
    max-height: 120px;
    margin-top: 12px;
  }

  .golf-search--results.is-editing .golf-search-bar {
    max-height: 1100px;
    margin-top: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    box-shadow: 0 16px 40px rgba(16, 68, 67, 0.18);
  }

  /* Pills now sit on the grey page below the summary, not on the teal band - give the
     unselected one a visible teal tint instead of translucent white. */
  .golf-search--results .golf-search-mode {
    background: rgba(16, 68, 67, 0.1);
    color: var(--golf-primary-deep);
  }
}