/* GoNagi storefront -- site additions not in the design package's assets.css (Mayan Sky brief, 2026-09-27).
   Loaded after assets.css by themes/Gonagi/Layout/app.blade.php. Tokens only, from tokens.css. */

/* Long-form text from the admin editor: tour descriptions, company pages (About, FAQ, policy...). */
.gn-prose { color: var(--gn-color-charcoal); font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.gn-prose > :first-child { margin-top: 0; }
.gn-prose h2 { color: var(--gn-color-darkblue); font-size: 22px; line-height: 1.3; margin: 28px 0 10px; }
.gn-prose h3 { color: var(--gn-color-darkblue); font-size: 18px; line-height: 1.35; margin: 22px 0 8px; }
.gn-prose p, .gn-prose ul, .gn-prose ol { margin: 0 0 14px; }
.gn-prose ul, .gn-prose ol { padding-left: 22px; }
.gn-prose li { margin-bottom: 6px; }
.gn-prose a { color: var(--gn-color-darkblue); text-decoration: underline; }
.gn-prose img { max-width: 100%; height: auto; border-radius: var(--gn-radius-sm); }

/* "Draft" notice on pages waiting for partner/legal confirmation. */
.gn-draft-note { border-left: 4px solid var(--gn-color-gold); background: var(--gn-color-lightblue); padding: 12px 16px; border-radius: var(--gn-radius-sm); color: var(--gn-color-darkblue); font-size: 14px; }

/* Guide-language filter chips on the tour listing. */
.gn-filterchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.gn-filterchips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--gn-color-blue); border-radius: 999px; color: var(--gn-color-darkblue); text-decoration: none; font-size: 14px; font-weight: 600; background: var(--gn-color-white); }
.gn-filterchips a[aria-current="true"] { background: var(--gn-color-darkblue); border-color: var(--gn-color-darkblue); color: var(--gn-color-white); }

/* "Price on request" on cards. */
.gn-price--request { font-weight: 600; color: var(--gn-color-darkblue); font-size: 15px; }

/* Footer social links. */
.gn-footer__social { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.gn-footer__social a { color: inherit; text-decoration: underline; font-size: 14px; }

/* Product detail: stack the side column under the article on narrow screens without losing the form. */
@media (max-width: 1023px) { .gn-layout__side { position: static; } }

/* Inner-page hero (tour listing, transfers): same hero + search bar as the home page, a lower photo band. */
.gn-hero--short { height: 300px; }
@media (min-width: 1024px) { .gn-hero--short { height: 380px; } }

/* Place field: type-ahead list and "drop a pin" panel (zones-places brief C.5/C.6). */
.gn-place { position: relative; }
.gn-place__list { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; min-width: 280px; margin: 4px 0 0; padding: 4px 0; list-style: none;
  background: var(--gn-color-white); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); box-shadow: 0 8px 24px rgba(33,51,70,.16); max-height: 320px; overflow: auto; }
.gn-place__list li[role=option] { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; cursor: pointer; color: var(--gn-color-darkblue); }
.gn-place__list li[role=option] small { color: var(--gn-color-slate); font-size: 12px; }
.gn-place__list li[aria-selected=true], .gn-place__list li[role=option]:hover { background: var(--gn-color-lightblue); }
.gn-place__group { padding: 6px 14px 2px; font-size: 12px; font-weight: 700; color: var(--gn-color-slate); text-transform: uppercase; letter-spacing: .04em; }
.gn-place__group:empty { padding: 0; border-top: 1px solid var(--gn-color-lightblue); margin: 4px 0; }
.gn-place__empty { padding: 10px 14px; color: var(--gn-color-slate); font-size: 14px; }
.gn-place__attr { padding: 6px 14px 2px; font-size: 11px; color: var(--gn-color-slate); border-top: 1px solid var(--gn-color-lightblue); }
.gn-place__pinbtn { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 0; border: 0; background: none; color: var(--gn-color-darkblue); font-size: 13px; text-decoration: underline; cursor: pointer; }
.gn-place__pin { position: absolute; z-index: 31; left: 0; top: 100%; width: min(420px, calc(100vw - 32px)); margin-top: 4px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--gn-color-white); border: 1px solid var(--gn-color-blue); border-radius: var(--gn-radius-sm); box-shadow: 0 8px 24px rgba(33,51,70,.16); }
.gn-place__pin[hidden] { display: none; }
.gn-place__pinhead { display: flex; justify-content: space-between; align-items: center; }
.gn-place__map { height: 240px; border-radius: var(--gn-radius-sm); }
.gn-place__note { margin: 4px 0 0; }

/* Hero search without tabs (zones-places brief H): space above the single search, and on phones every field the
   same height and width -- a date input otherwise keeps its own intrinsic size (the 390-wide date-box bug). */
.gn-search--single { padding-top: var(--gn-space-6); }
@media (min-width: 1024px) { .gn-search--single { padding-top: 36px; } }
.gn-search .gn-field { min-width: 0; }
.gn-search .gn-field__control { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; height: 52px; line-height: normal; }
@media (min-width: 1024px) { .gn-search .gn-field__control { height: var(--gn-control-height); } }
.gn-search input[type="date"].gn-field__control { -webkit-appearance: none; appearance: none; }
.gn-search input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.gn-hero--short.gn-hero--bare { height: 220px; }
/* Hero-bar brief (2026-09-27) A.1/A.2: on desktop the bar is one row with align-items:flex-end, so anything under
   the Hotel box (the "Drop a pin" link, the zone note after a pin) lifted that box above the others. There they
   sit just under the box OUT OF the row's layout, and the card keeps room for them below. Phones stack the fields
   in one column, so the link stays in the normal flow there. The pin panel opens over it, as before. */
@media (min-width: 1024px) {
  .gn-search:has(.gn-place) { padding-bottom: 56px; }
  .gn-search .gn-place__pinbtn { position: absolute; left: 2px; top: 100%; white-space: nowrap; }
  .gn-search .gn-place__note { position: absolute; left: 2px; right: 0; top: calc(100% + 28px); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* A.3: the closed Airport box must show the whole short name ("Ciudad de Belice (BZE)" is the longest, 182 px), so
   the airport field is a fixed 250 px and Passengers 96 px; between 1024 and 1279 px the card is also wider
   so the five controls still fit on one row. */
@media (min-width: 1024px) {
  .gn-searchbar > .gn-field:has(> select[data-gn-short]) { flex: 0 0 250px; }
  .gn-searchbar > .gn-place { flex: 1.6 1 0; } /* the Hotel box gets the most room: it is the one customers type in */
  .gn-searchbar > .gn-field--narrow { flex: 0 0 96px; } /* Passengers: two digits at most (96 px keeps the label clear of the border) (David, 2026-09-27) */
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .gn-search { width: calc(100% - 48px); padding-left: var(--gn-space-6); padding-right: var(--gn-space-6); }
  .gn-searchbar { gap: var(--gn-space-4); }
  .gn-searchbar > .gn-field:has(> input[type=date]) { flex: 0 0 168px; } /* "mm/dd/yyyy" + the calendar icon */
}

/* Language suggestion banner and the language perk line (zones-places brief F). */
.gn-langsuggest { background: var(--gn-color-darkblue); color: var(--gn-color-white); font-size: 15px; }
.gn-langsuggest__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.gn-langsuggest .gn-btn--dark { background: var(--gn-color-lightgold); color: var(--gn-color-darkblue); }
.gn-langsuggest .gn-btn--text { color: var(--gn-color-white); }
.gn-hero__perk { display: inline-block; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px; background: rgba(235, 207, 138, .92); color: var(--gn-color-darkblue); font-weight: 600; font-size: 14px; }

/* Phones: the header shows all three languages, EN | ES | 日本語 (David, 2026-09-27; it was one button cycling to the
   next language). Tighter buttons keep the logo, the three languages and the menu button on one line. */
@media (max-width: 1023px) {
  .gn-header__mobile .gn-lang { gap: 0; }
  .gn-header__mobile .gn-lang button { padding: 0 6px; min-width: 32px; }
}
@media (max-width: 359px) { .gn-header__logo img { height: 36px; } }

/* Peninsula brief C (2026-09-27): the hotel list groups places nearer another airport under their own heading,
   an island badge, and the "nearer another airport" / island notice under the search bar (outside the row, so the
   bar's alignment is untouched). */
.gn-place__group--other, .gn-place__group--near { color: var(--gn-color-darkblue); border-top: 1px solid var(--gn-color-lightblue); margin-top: 4px; padding-top: 8px; text-transform: none; letter-spacing: 0; font-size: 13px; }
/* hotel-search brief (2026-09-28): the list was cut at 20 -- "Keep typing to narrow the list" */
.gn-place__more { padding: 8px 14px; font-size: 13px; color: var(--gn-color-slate); font-style: italic; border-top: 1px solid var(--gn-color-lightblue); }
.gn-place__badge { font-style: normal; font-size: 11px; font-weight: 600; background: var(--gn-color-lightblue); color: var(--gn-color-darkblue); border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.gn-notice-host:not(:empty) { margin-top: var(--gn-space-4); }
.gn-airport-notice p span + span::before { content: " "; }
.gn-tour-pickup { font-weight: 600; }
.gn-credits { color: var(--gn-color-slate); }