/* ============================================================================================
   ProductPage.cshtml's "Choose your dates" search-tab dialogs (Departure date/Duration) -
   ported from AccommodationItem.cshtml's aip-search-bar popovers (AipSearchDropdowns.css) into
   this page's own .pp-page/--pp-* scope, since --aip-* custom properties are only defined under
   .aip-page and would resolve to nothing here. Same native <dialog> pattern (browser show/
   centre/backdrop, no Bootstrap) - see productPageSearchDropdowns.js.

   .pp-search-bar/.pp-search-bar__field/__icon/__btn already exist in JourneyPages.css (the
   read-only capsule this replaced) and are reused as-is here - only the modal/dialog chrome
   itself (new to this page) lives in this file. Not merged into JourneyPages.css to keep this
   feature's CSS next to its own JS/markup, same as AipSearchDropdowns.css does for the hotel
   detail page. ============================================================================== */

.pp-modal {
  width: min(420px, 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(--pp-text);
}

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

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

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

.pp-modal__foot {
  align-items: center;
  border-top: 1px solid var(--pp-border);
  gap: 10px;
}

.pp-modal h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

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

.pp-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(--pp-text);
}

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

.pp-modal__body {
  padding: 18px 22px 16px;
  overflow: auto;
}

/* .pp-btn/.pp-btn--primary already exist (ProductPage-v2.css's button system, used by the mobile
   book-dock CTA) - only the plain-text "Close" variant is new. */
.pp-btn--ghost {
  background: none;
  color: var(--pp-text-muted);
}

.pp-btn--ghost:hover {
  color: var(--pp-ink, var(--pp-text));
}

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

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

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

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

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

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

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

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

.pp-airport-chip input,
.pp-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;
}

.pp-airport-chip input:checked,
.pp-airport-group__all input:checked {
  background: var(--pp-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---- Mobile: bottom sheet instead of a centred floating box - same reasoning as
   AipSearchDropdowns.css's own equivalent breakpoint. ---- */
@media (max-width: 860px) {
  .pp-modal,
  .pp-modal.pp-modal--update {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 16px 16px 0 0;
  }

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

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

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

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

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

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

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

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

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

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