/* ------------------------------------------------------------------ */
/* Header drop-down search (templates/default/header.php,              */
/* #global-search-box). A white sheet that drops from under the sticky */
/* header: pill input, inline results list and popular flag chips,    */
/* matching the v2 homepage search and the white offcanvas menu.       */
/* ------------------------------------------------------------------ */
#global-search-box {
   --gs-pink: #E8236E;
   --gs-pink-soft: #FDE7EF;
   --gs-text: #1d1d1f;
   --gs-muted: #6e6e73;
   --gs-soft: #f4f4f6;
   --gs-line: #ececf0;
   position: absolute;
   left: 0;
   right: 0;
   z-index: 200;
   font-family: 'Poppins', sans-serif;
}

.ss-gs-sheet {
   background: #fff;
   border-radius: 0 0 22px 22px;
   box-shadow: 0 18px 40px rgba(20, 24, 58, 0.16);
   padding: 14px 16px 16px;
   animation: ss-gs-in .18s cubic-bezier(.215, .61, .355, 1);
}

@keyframes ss-gs-in {
   from {
      opacity: 0;
      transform: translateY(-8px);
   }

   to {
      opacity: 1;
      transform: none;
   }
}

/* Pill input */
.ss-gs-form {
   position: relative;
   margin: 0;
}

.ss-gs-icon {
   position: absolute;
   left: 18px;
   top: 50%;
   transform: translateY(-50%);
   color: var(--gs-muted);
   font-size: 16px;
   line-height: 1;
   pointer-events: none;
}

#global-destination-search {
   display: block;
   width: 100%;
   height: 50px;
   margin: 0;
   padding: 0 92px 0 46px;
   border: 0;
   border-radius: 25px;
   background: var(--gs-soft);
   color: var(--gs-text);
   font-family: inherit;
   font-size: 16px;
   line-height: 50px;
   box-sizing: border-box;
   -webkit-appearance: none;
   appearance: none;
   box-shadow: 0 0 0 0 rgba(232, 35, 110, 0);
   transition: background-color .15s ease, box-shadow .15s ease;
}

#global-destination-search::placeholder {
   color: var(--gs-muted);
   opacity: 1;
}

#global-destination-search::-webkit-search-cancel-button,
#global-destination-search::-webkit-search-decoration {
   -webkit-appearance: none;
   appearance: none;
}

#global-destination-search:focus {
   outline: none;
   background: #fff;
   box-shadow: inset 0 0 0 1.5px var(--gs-pink), 0 0 0 3px rgba(232, 35, 110, 0.10);
}

.ss-gs-actions {
   position: absolute;
   top: 0;
   right: 4px;
   height: 50px;
   display: flex;
   align-items: center;
}

.ss-gs-btn {
   width: 42px;
   height: 42px;
   padding: 0;
   margin: 0;
   border: 0;
   border-radius: 50%;
   background: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   line-height: 1;
   transition: background-color .15s ease;
}

.ss-gs-btn:hover {
   background: rgba(0, 0, 0, 0.05);
}

.ss-gs-btn:focus-visible {
   outline: 2px solid var(--gs-pink);
   outline-offset: 1px;
}

.ss-gs-clear {
   color: var(--gs-muted);
   font-size: 15px;
}

.ss-gs-clear[hidden] {
   display: none;
}

#global-use-location-btn {
   color: var(--gs-pink);
   font-size: 19px;
}

#global-use-location-btn:disabled {
   cursor: default;
   opacity: .8;
}

/* Results and popular chips share one scroll area inside the sheet, so
   the on-screen keyboard never hides the whole list. */
.ss-gs-body {
   max-height: min(420px, 55vh);
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   margin: 0 -8px;
   padding: 0 8px;
}

@supports (height: 1dvh) {
   .ss-gs-body {
      max-height: min(420px, 55dvh);
   }
}

.ss-gs-title {
   margin: 16px 4px 10px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--gs-muted);
}

/* Popular chips */
.ss-gs-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 0;
   padding: 0 0 2px;
   list-style: none;
}

.ss-gs-chips a {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 38px;
   padding: 0 14px 0 6px;
   border-radius: 19px;
   background: var(--gs-soft);
   color: var(--gs-text);
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
   transition: background-color .15s ease, color .15s ease;
}

.ss-gs-chips a:hover,
.ss-gs-chips a:focus-visible {
   background: var(--gs-pink-soft);
   color: var(--gs-pink);
   text-decoration: none;
   outline: none;
}

.ss-gs-recent-ico {
   margin-left: -2px;
   font-size: 11px;
   color: var(--gs-muted);
}

.ss-gs-chips a:hover .ss-gs-recent-ico {
   color: var(--gs-pink);
}

.ss-gs-chips img {
   width: 26px;
   height: 26px;
   border-radius: 50%;
   object-fit: cover;
   background: #fff;
}

/* Results list */
#global-search-results {
   margin-top: 10px;
}

#global-search-results-list {
   margin: 0;
   padding: 0;
   list-style: none;
}

#global-search-results-list > li {
   margin: 0;
   padding: 0;
   border: 0;
}

#global-search-results .ss-gs-row {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 52px;
   padding: 6px 10px;
   border-radius: 14px;
   cursor: pointer;
   color: var(--gs-text);
   text-decoration: none;
   transition: background-color .15s ease;
}

#global-search-results .ss-gs-row:hover,
#global-search-results .ss-gs-row.is-active {
   background: var(--gs-soft);
   color: var(--gs-text);
   text-decoration: none;
}

#global-search-results .ss-gs-row:active {
   background: var(--gs-pink-soft);
}

#global-search-results .ss-gs-row:focus-visible {
   outline: 2px solid var(--gs-pink);
   outline-offset: -2px;
}

/* Group headings: Destinations, Articles, Help */
#global-search-results-list > li.ss-gs-group {
   margin: 12px 0 4px;
   padding: 0 10px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--gs-muted);
}

#global-search-results-list > li.ss-gs-group:first-child {
   margin-top: 2px;
}

/* Article and help icon: soft grey rounded square */
.ss-gs-doc-ico {
   flex: 0 0 32px;
   width: 32px;
   height: 32px;
   border-radius: 9px;
   background: var(--gs-soft);
   color: var(--gs-muted);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
}

#global-search-results .ss-gs-row:hover .ss-gs-doc-ico,
#global-search-results .ss-gs-row.is-active .ss-gs-doc-ico {
   background: #fff;
   color: var(--gs-pink);
}

#global-search-results img.ss-gs-flag {
   display: block;
   flex: 0 0 32px;
   width: 32px !important;
   height: 32px !important;
   max-width: 32px;
   margin: 0;
   padding: 0;
   border-radius: 50% !important;
   object-fit: cover !important;
   background: var(--gs-soft);
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

#global-search-results .ss-gs-text {
   display: block;
   flex: 1 1 auto;
   min-width: 0;
   margin: 0;
}

.ss-gs-name,
.ss-gs-sub {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.ss-gs-name {
   display: block;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.3;
}

.ss-gs-name mark {
   background: none;
   color: var(--gs-pink);
   font-weight: 600;
}

.ss-gs-sub {
   display: block;
   margin-top: 1px;
   font-size: 13px;
   line-height: 1.3;
   color: var(--gs-muted);
}

.ss-gs-chev {
   flex: 0 0 auto;
   color: #b8b8c0;
   font-size: 12px;
}

/* Quick answers: a button row that expands its answer in place */
#global-search-results .ss-gs-faq-btn {
   width: 100%;
   margin: 0;
   border: 0;
   background: transparent;
   font: inherit;
   text-align: left;
   -webkit-appearance: none;
   appearance: none;
}

#global-search-results .ss-gs-faq-btn .ss-gs-doc-ico {
   color: var(--gs-pink);
   background: var(--gs-pink-soft);
}

.ss-gs-faq-q {
   font-weight: 600;
}

/* Two muted lines of the answer, clamped */
#global-search-results .ss-gs-faq-preview {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   overflow: hidden;
   white-space: normal;
   text-overflow: clip;
}

.ss-gs-faq.is-open .ss-gs-faq-preview {
   display: none;
}

.ss-gs-faq-chev {
   transition: transform .15s ease;
}

.ss-gs-faq.is-open .ss-gs-faq-chev {
   transform: rotate(180deg);
}

.ss-gs-faq.is-open .ss-gs-faq-btn {
   background: var(--gs-soft);
   border-radius: 14px 14px 0 0;
}

.ss-gs-faq-panel {
   margin: 0 0 6px;
   padding: 2px 14px 12px 54px;
   background: var(--gs-soft);
   border-radius: 0 0 14px 14px;
}

.ss-gs-faq-panel p {
   margin: 0 0 8px;
   font-size: 14px;
   line-height: 1.5;
   color: var(--gs-text);
}

.ss-gs-faq-more {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 14px;
   font-weight: 600;
   color: var(--gs-pink);
   text-decoration: none;
}

.ss-gs-faq-more:hover {
   color: var(--gs-pink);
   text-decoration: underline;
}

.ss-gs-faq-more:focus-visible {
   outline: 2px solid var(--gs-pink);
   outline-offset: 2px;
   border-radius: 4px;
}

.ss-gs-faq-more i {
   font-size: 12px;
}

/* No-results and "regional or global" footer */
.ss-gs-empty {
   padding: 18px 10px 6px;
   text-align: center;
   color: var(--gs-muted);
   font-size: 14px;
}

.ss-gs-empty i {
   display: block;
   margin-bottom: 8px;
   font-size: 22px;
   color: #c7c7cc;
}

.ss-gs-foot {
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--gs-line);
}

.ss-gs-foot a {
   display: flex;
   align-items: center;
   gap: 12px;
   min-height: 52px;
   padding: 6px 10px;
   border-radius: 14px;
   color: var(--gs-text);
   text-decoration: none;
   transition: background-color .15s ease;
}

.ss-gs-foot a:hover {
   background: var(--gs-soft);
   text-decoration: none;
   color: var(--gs-text);
}

.ss-gs-foot .ss-gs-name,
.ss-gs-foot .ss-gs-sub {
   display: block;
}

.ss-gs-foot-ico {
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: var(--gs-pink-soft);
   color: var(--gs-pink);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
}

/* Header search toggles */
#mobile-search-toggle,
#desktop-search-toggle {
   transition: color 0.2s ease;
}

#mobile-search-toggle:hover,
#desktop-search-toggle:hover,
#mobile-search-toggle[aria-expanded="true"],
#desktop-search-toggle[aria-expanded="true"] {
   color: var(--gs-pink, #E8236E);
}

/* Phones: dim the page behind the sheet, reusing the body::after dimmer
   from css/megamenu_v2.css. It sits under the header (z-index 1010), so
   the header and sheet stay bright; a tap on it closes the search. */
@media (max-width: 959px) {
   body.ss-search-open::after {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition: opacity .2s ease, visibility 0s linear 0s;
   }

   body.ss-search-open header.uk-box-shadow-small:not(.uk-sticky) {
      position: relative;
   }
}

/* Desktop: a centred card under the header. */
@media (min-width: 960px) {
   /* The full-width layer lets clicks through either side of the card,
      so they count as outside clicks and close the search. */
   #global-search-box {
      padding: 0 20px;
      pointer-events: none;
   }

   .ss-gs-sheet {
      pointer-events: auto;
      max-width: 640px;
      margin: 8px auto 0;
      border-radius: 22px;
      padding: 16px 18px 18px;
      box-shadow: 0 18px 50px rgba(20, 24, 58, 0.18), 0 0 0 1px rgba(20, 24, 58, 0.04);
   }
}

@media (prefers-reduced-motion: reduce) {
   .ss-gs-sheet {
      animation: none;
   }

   #global-destination-search,
   .ss-gs-btn,
   .ss-gs-chips a,
   #global-search-results .ss-gs-row,
   .ss-gs-foot a,
   .ss-gs-faq-chev,
   body.ss-search-open::after {
      transition: none;
   }
}