/* ============================================================================================
   Search bar (AccommodationItem.cshtml), ported from
   CyprusParadise-NewDesigns/prototypes/customise-holiday/ - the same gold search-bar capsule
   + centred popup dialogs used further along the booking funnel, adapted here with a Resort/
   Hotel field added (this page still lets you browse between hotels; customise-holiday doesn't,
   since by that step the hotel is already fixed) and a fuller Rooms & guests editor (per-room
   adults/children, not just a room-count picker).

   Every class here is prefixed aip- rather than reusing the prototype's bare names - in
   particular NOT plain ".modal": Bootstrap's global stylesheet (loaded sitewide) defines
   ".modal { display: none; ... }" unconditionally, with no ".show"-gated override, so a native
   <dialog class="modal"> here would never render even after .showModal() - it needed its own
   name to avoid that collision entirely, not a CSS specificity fight.
   ============================================================================================ */

.aip-search-bar {
  /* margin: 14px 0 0; */
  background: var(--aip-gold);
  border-radius: 14px;
  padding: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) auto;
  gap: 0 6px;
  box-shadow: 0 16px 40px rgba(16, 68, 67, 0.18);
}

.aip-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;
}

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

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

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

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

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

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

.aip-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(--aip-primary));
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2, 170, 169, 0.28);
}

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

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

/* ---- Mobile: collapsed search summary + tablet/phone breakpoints -----------------------
   Ported from CyprusParadise-NewDesigns/prototypes/hotel-product/'s own #search-wrap/
   #edit-search pattern - hidden on desktop, and on phones the full 5-field bar collapses
   behind a single tap-to-edit summary chip instead of cramming into an ever-narrower grid
   (see aipSearchDropdowns.js for the .is-editing toggle). */
.aip-search-summary {
  display: none;
}

@media (max-width: 1140px) {
  /* .aip-search-bar {
    grid-template-columns: 1fr 1fr 1fr;
  } */

  /* .aip-search-bar__btn {
    grid-column: 1 / -1;
  } */
}

@media (max-width: 860px) {
  /* Smooth open/close instead of the old hard display:none/block snap. max-height is capped
     generously above the tallest this bar ever gets (5 stacked fields + Search button) rather
     than measured exactly - simpler than a JS height calc and the easing masks the unused
     tail of the transition when real content is shorter than the cap. visibility is delayed
     on the way in but not the way out (allow-discrete without the modern @starting-style
     syntax) so the collapsed bar drops out of tab order/AT only once it's actually invisible,
     while the reverse (opening) is visible immediately so the animation isn't hidden. */
  .aip-search-bar {
    grid-template-columns: 1fr;
    gap: 6px 0;
    margin-top: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
      max-height 0.32s ease,
      margin-top 0.32s ease,
      visibility 0s linear 0.32s;
  }

  .aip-search-wrap.is-editing .aip-search-bar {
    margin-top: 14px;
    max-height: 700px;
    visibility: visible;
    transition:
      max-height 0.32s ease,
      margin-top 0.32s ease;
  }

  .aip-search-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 14px 0 0;
    background: #fff;
    border: 1px solid var(--aip-border);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(16, 68, 67, 0.08);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--aip-ink);
    text-align: left;
    cursor: pointer;
  }

  .aip-search-summary span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--aip-text);
    font-weight: 400;
  }

  .aip-search-summary span:last-child {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--aip-primary);
  }
}

/* ---- Modal (native <dialog>) base ---- */

.aip-modal {
  width: min(560px, calc(100vw - 24px));
  max-height: min(90dvh, 760px);
  border: 0;
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 18px 40px rgba(16, 68, 67, 0.2);
  color: var(--aip-text);
}

.aip-modal--wide {
  width: min(720px, calc(100vw - 24px));
}

.aip-modal--date,
.aip-modal--nights {
  width: min(420px, calc(100vw - 24px));
}

.aip-modal::backdrop {
  background: rgba(16, 68, 67, 0.45);
}

.aip-modal__head,
.aip-modal__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  margin: 0;
}

.aip-modal__foot {
  align-items: center;
  border-top: 1px solid #e7eeee;
  justify-content: flex-end;
  gap: 10px;
}

.aip-modal h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--aip-ink);
}

.aip-modal__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--aip-text-muted);
}

.aip-modal__x {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: #eef1f1;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--aip-text);
}

.aip-modal__x:hover {
  background: #e4e8e8;
}

.aip-modal__body {
  padding: 0 22px 8px;
  overflow: auto;
}

.aip-btn-ghost,
.aip-btn-primary {
  border: 0;
  border-radius: 10px;
  min-height: 44px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.aip-btn-ghost {
  background: none;
  color: var(--aip-text-muted);
}

.aip-btn-ghost:hover {
  color: var(--aip-ink);
}

.aip-btn-primary {
  background: linear-gradient(180deg, #14b8b6, var(--aip-primary));
  color: #fff;
  box-shadow: 0 8px 18px rgba(2, 170, 169, 0.28);
}

.aip-btn-primary:hover {
  background: var(--aip-primary-deep);
}

.aip-btn-primary:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* ---- Departure airports (multi-select, grouped by region) ---- */

.aip-airport-sheet {
  display: grid;
  gap: 0;
  max-height: min(52dvh, 420px);
  overflow: auto;
  padding-bottom: 8px;
}

.aip-airport-group {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 12px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--aip-border);
}

.aip-airport-group:first-child {
  border-top: 0;
  padding-top: 4px;
}

.aip-airport-group__all {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  color: var(--aip-ink);
  cursor: pointer;
}

.aip-airport-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aip-airport-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--aip-page-bg);
  color: var(--aip-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.aip-airport-chip:has(input:checked) {
  background: var(--aip-primary-mist);
  color: var(--aip-primary-deep);
  box-shadow: inset 0 0 0 1px var(--aip-primary);
}

.aip-airport-chip input,
.aip-airport-group__all input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px #c5d0d0;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
}

.aip-airport-chip input:checked,
.aip-airport-group__all input:checked {
  background: var(--aip-primary);
  box-shadow: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9.2 16.6 4.8 12.2l-1.4 1.4 5.8 5.8 12-12-1.4-1.4Z'/></svg>");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- Resort / hotel (search + grouped list) ---- */

.aip-modal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--aip-page-bg);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 4px 0 10px;
}

.aip-modal-search svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--aip-text-muted);
}

.aip-modal-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--aip-ink);
}

.aip-modal-search input:focus {
  outline: none;
}

.aip-resort-sheet {
  max-height: min(52dvh, 420px);
  overflow: auto;
  padding-bottom: 8px;
}

/* Deliberately reuses .aip-airport-group/.aip-airport-group__all/.aip-airport-picks/
   .aip-airport-chip (below) rather than a second copy - same checkbox-list-with-a-region
   "select all" mechanic as the airports modal, and Resort (like Depart) is a real comma-joined
   multi-select underneath, so it genuinely behaves the same way, not just looks it. Picking a
   specific hotel is mutually exclusive with picking resorts (see aipSearchDropdowns.js) - you're
   either searching a specific hotel or one-or-more broader resorts, not both at once. */

.aip-resort-empty {
  margin: 16px 4px;
  font-size: 13px;
  color: var(--aip-text-muted);
  text-align: center;
}

/* ---- Departure date (mini calendar) ---- */

.aip-mini-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}

.aip-mini-nav h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--aip-primary-deep);
}

.aip-icon-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--aip-border);
  background: #fff;
  border-radius: 999px;
  font-size: 22px;
  display: grid;
  place-items: center;
  color: var(--aip-primary-deep);
  cursor: pointer;
}

.aip-icon-btn svg {
  width: 18px;
  height: 18px;
}

.aip-icon-btn:hover:not(:disabled) {
  border-color: var(--aip-primary);
  background: var(--aip-primary-mist);
}

.aip-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.aip-mini-weekdays,
.aip-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.aip-mini-weekdays {
  margin-bottom: 6px;
  color: var(--aip-text-muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.aip-mini-grid button,
.aip-mini-grid span {
  appearance: none;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: var(--aip-page-bg);
  color: var(--aip-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.aip-mini-grid span {
  background: transparent;
  cursor: default;
}

.aip-mini-grid button:hover:not(:disabled) {
  box-shadow: inset 0 0 0 2px var(--aip-gold);
}

.aip-mini-grid button.is-on {
  background: var(--aip-primary);
  color: #fff;
}

.aip-mini-grid button:disabled {
  background: transparent;
  color: #b7bfbf;
  cursor: default;
}

.aip-date-flex {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--aip-border);
}

.aip-flex-chip {
  flex: 1;
  border: 1px solid var(--aip-border);
  border-radius: 20px;
  padding: 8px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
  color: var(--aip-text-muted);
  cursor: pointer;
}

.aip-flex-chip.is-on {
  background: var(--aip-primary-mist);
  border-color: var(--aip-primary);
  color: var(--aip-primary-deep);
}

/* ---- Duration ---- */

.aip-nights-sheet {
  display: grid;
  gap: 8px;
  padding-bottom: 8px;
}

.aip-nights-option {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--aip-border);
  border-radius: 12px;
  background: #fff;
  color: var(--aip-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
}

.aip-nights-option:hover {
  border-color: var(--aip-primary);
}

.aip-nights-option.is-on {
  background: var(--aip-primary-mist);
  border-color: var(--aip-primary);
  color: var(--aip-primary-deep);
}

/* ---- Rooms & guests ---- */

.aip-room {
  border: 1px solid var(--aip-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.aip-room__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--aip-primary-deep);
}

.aip-room__remove {
  border: 0;
  background: none;
  color: var(--aip-coral);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px;
}

.aip-stepper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
  color: var(--aip-ink);
}

.aip-stepper {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.aip-stepper__btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--aip-primary);
  border-radius: 4px;
  background: #fff;
  color: var(--aip-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.aip-stepper__btn:hover:not(:disabled) {
  background: var(--aip-primary-mist);
}

.aip-stepper__value {
  min-width: 1.2em;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--aip-ink);
}

.aip-child-ages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.aip-child-ages select {
  border: 1px solid var(--aip-border);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  color: var(--aip-ink);
  background: #fff;
}

.aip-child-ages select.aip-field-error {
  border-color: var(--aip-coral);
  box-shadow: 0 0 0 1px var(--aip-coral);
}

.aip-add-room {
  display: block;
  width: 100%;
  border: 1.5px dashed var(--aip-border);
  border-radius: 10px;
  background: none;
  padding: 11px;
  margin-top: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--aip-primary);
  cursor: pointer;
}

.aip-add-room:hover {
  background: var(--aip-primary-mist);
}

@media (max-width: 640px) {
  .aip-airport-group {
    grid-template-columns: 1fr;
  }
}

/* ---- Mobile: modals become full-width bottom sheets --------------------------------------
   Same transformation CyprusParadise-NewDesigns/prototypes/search-results/styles.css applies
   to its own .modal at this breakpoint - pinned to the bottom of the viewport with only the
   top corners rounded, rather than a centred floating box (which on a phone-sized <dialog>
   leaves awkward margins on every side and makes the tallest ones - Rooms & guests, Departure
   airports - feel cramped). The width/max-width overrides here beat every .aip-modal--* size
   modifier above by appearing later in the cascade at equal (single-class) specificity. */
@media (max-width: 860px) {
  .aip-modal,
  .aip-modal--wide,
  .aip-modal--date,
  .aip-modal--nights {
    width: 100vw;
    max-width: 100vw;
  }

  .aip-modal {
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }

  .aip-modal h2 {
    font-size: 18px;
    line-height: 1.25;
  }

  .aip-modal__head,
  .aip-modal__foot {
    padding: 14px 16px;
  }

  .aip-modal__foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .aip-modal__body {
    padding: 0 16px 12px;
  }

  /* Slide the bottom sheet up on open / back down on close instead of the native <dialog>'s
     instant appear-disappear. dialog.showModal()/.close() in aipSearchDropdowns.js need no
     changes for this - the browser toggles the [open] attribute either way, this just gives
     that attribute change something to transition. The trick is `transition-behavior:
     allow-discrete` on display/overlay (the shorthand's 3rd value below) plus @starting-style
     for the entry frame - without it the dialog leaves the top layer and switches to
     display:none the instant close() runs, before a transform transition would ever get a
     chance to paint. This is the standard pattern for animating <dialog>; see MDN's "Animating
     dialog and ::backdrop" for the same shape applied here with translateY instead of scale. */
  .aip-modal {
    transform: translateY(100%);
    transition:
      transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
      overlay 0.32s allow-discrete,
      display 0.32s allow-discrete;
  }

  .aip-modal[open] {
    transform: translateY(0);
  }

  @starting-style {
    .aip-modal[open] {
      transform: translateY(100%);
    }
  }

  .aip-modal::backdrop {
    background: rgba(16, 68, 67, 0);
    transition:
      background-color 0.32s ease,
      overlay 0.32s allow-discrete,
      display 0.32s allow-discrete;
  }

  .aip-modal[open]::backdrop {
    background: rgba(16, 68, 67, 0.45);
  }

  @starting-style {
    .aip-modal[open]::backdrop {
      background: rgba(16, 68, 67, 0);
    }
  }
}