/* TripsGent Global Exposure hub: brand skin + localized hotel sections +
   review dialog. Brand: navy #0B2545, teal #19A8A3, surface #F5F7FA, Rubik. */

:root {
  --gh-navy: #0B2545;
  --gh-ink: #33415C;
  --gh-mute: #5B6B85;
  --gh-teal: #19A8A3;
  --gh-teal-d: #127C78;
  --gh-teal-t: #E3F5F4;
  --gh-surface: #F5F7FA;
  --gh-line: #E4EAF1;
  --gh-gold: #F2B203;
  --gh-r: 14px;
  --gh-shadow: 0 10px 30px -14px rgba(11, 37, 69, .25);
  --gh-shadow-h: 0 18px 36px -16px rgba(11, 37, 69, .35);
}

/* Brand skin for the existing review-site theme (tg-ge.css sets these on .ge). */
body.tg-intl .ge,
body.tg-intl .ge.tgi {
  --ge-ink: var(--gh-navy);
  --ge-text: var(--gh-ink);
  --ge-mute: var(--gh-mute);
  --ge-line: var(--gh-line);
  --ge-soft: var(--gh-surface);
  --ge-green: var(--gh-teal);
  --ge-green-t: var(--gh-teal-t);
  --tgi-navy: var(--gh-navy); --tgi-ink: var(--gh-ink); --tgi-mute: var(--gh-mute);
  --tgi-teal: var(--gh-teal); --tgi-teal-d: var(--gh-teal-d); --tgi-teal-t: var(--gh-teal-t);
  --tgi-soft: var(--gh-surface); --tgi-line: var(--gh-line);
  font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
body.tg-intl .ge .ge-btn--go,
body.tg-intl .ge .ge-chip--go { background: var(--gh-teal); border-color: var(--gh-teal); }
body.tg-intl .ge .ge-btn--go:hover,
body.tg-intl .ge .ge-chip--go:hover { background: var(--gh-teal-d); border-color: var(--gh-teal-d); }
body.tg-intl .ge .ge-hero.tgi-filter { background: linear-gradient(180deg, var(--gh-surface) 0%, #FFFFFF 100%); }
body.tg-intl .ge .ge-hero__title { color: var(--gh-navy); }

/* Sections */
.gh-local { display: block; margin: 8px 0 36px; transition: opacity .2s ease; }
.gh-local.is-loading { opacity: .45; pointer-events: none; }
.gh-sec { margin: 30px 0 0; }
.gh-head { margin: 0 0 14px; }
.gh-h2 { margin: 0; font-size: clamp(21px, 2.5vw, 28px); font-weight: 700; line-height: 1.2; color: var(--gh-navy); letter-spacing: -.01em; }
.gh-sub { margin: 6px 0 0; font-size: 15px; color: var(--gh-mute); }
.gh-howto { margin: 6px 0 0; font-size: 14px; color: var(--gh-mute); }
.gh-howto summary { cursor: pointer; color: var(--gh-teal-d); font-weight: 600; width: max-content; }
.gh-howto p { max-width: 70ch; margin: 6px 0 0; }

/* Origin bar */
.gh-geo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 16px; border-radius: var(--gh-r); background: var(--gh-teal-t); color: var(--gh-navy); }
.gh-geo p { margin: 0; font-size: 15px; }
.gh-geo__pick { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--gh-ink); }
.gh-geo__pick select { min-height: 38px; padding: 0 30px 0 12px; border: 1px solid var(--gh-line); border-radius: 999px; background-color: #FFFFFF; font: inherit; color: var(--gh-navy); }

/* Destination tabs */
.gh-tabs__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 12px; margin: 0 -2px; }
.gh-tabs__list::-webkit-scrollbar { display: none; }
.gh-tab { flex: 0 0 auto; min-height: 40px; padding: 0 18px; border: 1.5px solid var(--gh-line); border-radius: 999px; background: #FFFFFF; font: 600 14px/1 inherit; font-family: inherit; color: var(--gh-navy); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.gh-tab:hover { border-color: var(--gh-navy); }
.gh-tab[aria-selected="true"] { background: var(--gh-navy); border-color: var(--gh-navy); color: #FFFFFF; }
.gh-tab:focus-visible, .gh-scroll__btn:focus-visible, .gh-rate:focus-visible, .gh-btn:focus-visible { outline: 3px solid var(--gh-teal); outline-offset: 2px; }
.gh-panel__more { margin: 10px 0 0; font-size: 15px; font-weight: 600; }
.gh-panel__more a { color: var(--gh-teal-d); text-decoration: none; }
.gh-panel__more a:hover { text-decoration: underline; }

/* Scroller */
.gh-scroll { position: relative; }
.gh-scroll__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 18px) / 4); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 2px 14px; scrollbar-width: thin; scrollbar-color: var(--gh-line) transparent; }
.gh-scroll__track > * { scroll-snap-align: start; min-width: 0; }
.gh-scroll__btn { position: absolute; top: 34%; z-index: 2; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: var(--gh-shadow); color: var(--gh-navy); font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.gh-scroll__btn--prev { left: -14px; }
.gh-scroll__btn--next { right: -14px; }
.gh-scroll__btn:disabled { opacity: 0; pointer-events: none; }
.gh-scroll.is-static .gh-scroll__btn { display: none; }

/* Hotel card */
.gh-card { display: flex; flex-direction: column; height: 100%; border-radius: var(--gh-r); background: #FFFFFF; border: 1px solid var(--gh-line); overflow: hidden; box-shadow: 0 1px 2px rgba(11, 37, 69, .04); transition: box-shadow .2s ease, transform .2s ease; }
.gh-card:hover { box-shadow: var(--gh-shadow-h); transform: translateY(-2px); }
.gh-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--gh-surface); overflow: hidden; }
.gh-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gh-card__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, var(--gh-teal-t), var(--gh-surface)); }
.gh-card__badge { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 999px; background: #FFFFFF; color: var(--gh-navy); font-size: 12px; font-weight: 700; box-shadow: 0 2px 6px rgba(11, 37, 69, .18); }
.gh-sec--choice .gh-card__badge { background: var(--gh-gold); }
.gh-card__body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.gh-card__name { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.gh-card__name a { color: var(--gh-navy); text-decoration: none; }
.gh-card__name a:hover { text-decoration: underline; }
.gh-card__loc { margin: 0; font-size: 13px; color: var(--gh-mute); }
.gh-card__lv { margin-left: 4px; color: var(--gh-navy); font-weight: 600; }
.gh-card__why { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--gh-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gh-card__cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 0 0; padding-top: 8px; }
.gh-card__more { font-size: 14px; font-weight: 600; color: var(--gh-teal-d); text-decoration: none; }
.gh-card__more:hover { text-decoration: underline; }

/* Buttons */
.gh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--gh-teal); color: #FFFFFF !important; font: 700 14px/1 inherit; font-family: inherit; text-decoration: none !important; cursor: pointer; transition: background-color .15s ease; }
.gh-btn:hover { background: var(--gh-teal-d); }
.gh-btn:disabled { opacity: .6; cursor: wait; }
.gh-btn--wide { width: 100%; min-height: 46px; font-size: 15px; }

/* Rating */
.gh-bub { display: inline-flex; gap: 3px; vertical-align: middle; }
.gh-bub i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gh-teal); box-sizing: border-box; background: #FFFFFF; }
.gh-bub i.is-full { background: var(--gh-teal); }
.gh-bub i.is-half { background: linear-gradient(90deg, var(--gh-teal) 50%, #FFFFFF 50%); }
.gh-rate { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 2px 0; border: 0; background: none; font: 13px/1.3 inherit; font-family: inherit; color: var(--gh-mute); cursor: pointer; text-align: left; }
.gh-rate b { color: var(--gh-navy); font-size: 14px; }
.gh-rate span { text-decoration: underline; text-decoration-color: var(--gh-line); text-underline-offset: 3px; }
.gh-rate:hover span { text-decoration-color: currentColor; }
.gh-rate--none .gh-bub i { border-color: #C3CEDB; }
.gh-rate--none span { text-decoration: none; }
.gh-rate--none u { color: var(--gh-teal-d); font-weight: 600; }
/* On guide pages the rating sits under the hotel name. */
.tgx-card .gh-rate, .tga-card .gh-rate { margin: 2px 0 6px; }

/* Review dialog */
.gh-dlg { width: min(920px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 18px; color: var(--gh-ink); box-shadow: 0 30px 80px -20px rgba(11, 37, 69, .5); font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
.gh-dlg::backdrop { background: rgba(11, 37, 69, .55); }
.gh-dlg__in { padding: 22px 24px 24px; }
.gh-dlg__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.gh-dlg__kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gh-teal-d); }
.gh-dlg h2 { margin: 2px 0 0; font-size: 22px; line-height: 1.25; color: var(--gh-navy); }
.gh-dlg__where { margin: 2px 0 0; font-size: 14px; color: var(--gh-mute); }
.gh-dlg__x { flex: 0 0 auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--gh-surface); color: var(--gh-navy); font-size: 26px; line-height: 1; cursor: pointer; }
.gh-dlg__x:hover { background: var(--gh-line); }
.gh-sumline { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; color: var(--gh-mute); }
.gh-sumline b { font-size: 22px; color: var(--gh-navy); }
.gh-sumline--none { font-size: 15px; }
.gh-dlg__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
.gh-revs { max-height: 460px; overflow: auto; padding-right: 4px; }
.gh-revs__empty { margin: 0; padding: 16px; border-radius: 12px; background: var(--gh-surface); font-size: 14px; color: var(--gh-mute); }
.gh-rev { padding: 14px 0; border-bottom: 1px solid var(--gh-line); }
.gh-rev:first-child { padding-top: 0; }
.gh-rev__top { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--gh-navy); }
.gh-rev__text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; }
.gh-rev__by { margin: 6px 0 0; font-size: 13px; color: var(--gh-mute); }
.gh-thanks { margin: 0 0 12px; padding: 14px 16px; border-radius: 12px; background: var(--gh-teal-t); color: var(--gh-navy); font-weight: 600; }
.gh-form { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: var(--gh-surface); }
.gh-form h3 { margin: 0; font-size: 17px; color: var(--gh-navy); }
.gh-f { display: flex; flex-direction: column; gap: 5px; margin: 0; font-size: 13px; font-weight: 600; color: var(--gh-navy); }
.gh-f input, .gh-f select, .gh-f textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #CFD8E3; border-radius: 10px; background: #FFFFFF; font: 400 15px/1.4 inherit; font-family: inherit; color: var(--gh-ink); }
.gh-f input:focus, .gh-f select:focus, .gh-f textarea:focus { outline: 2px solid var(--gh-teal); outline-offset: 0; border-color: var(--gh-teal); }
.gh-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.gh-check { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 13px; color: var(--gh-ink); }
.gh-check input { margin-top: 2px; accent-color: var(--gh-teal); }
.gh-check a { color: var(--gh-teal-d); }
.gh-form__msg { margin: 0; min-height: 1.2em; font-size: 14px; color: var(--gh-navy); }
.gh-form__msg.is-error { color: #B42318; font-weight: 600; }
.gh-form__note { margin: 0; font-size: 12.5px; color: var(--gh-mute); }

/* Star input: radios in reverse order so hover/checked fills to the left. */
.gh-stars { margin: 0; padding: 0; border: 0; }
.gh-stars legend { margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--gh-navy); }
.gh-stars__row { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.gh-stars__row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gh-stars__row label { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--gh-teal); background: #FFFFFF; cursor: pointer; transition: background-color .1s; }
.gh-stars__row label:hover,
.gh-stars__row label:hover ~ label,
.gh-stars__row input:checked ~ label { background: var(--gh-teal); }
.gh-stars__row input:focus-visible + label { outline: 3px solid var(--gh-navy); outline-offset: 2px; }

/* Responsive */
@media (max-width: 1024px) {
  .gh-scroll__track { grid-auto-columns: calc((100% - 2 * 16px) / 3); gap: 16px; }
}
@media (max-width: 760px) {
  .gh-scroll__track { grid-auto-columns: 72%; gap: 14px; }
  .gh-scroll__btn { display: none; }
  .gh-dlg__cols { grid-template-columns: 1fr; }
  .gh-revs { max-height: none; }
  .gh-f2 { grid-template-columns: 1fr; }
  .gh-dlg__in { padding: 18px 16px 20px; }
  .gh-geo { padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-scroll__track, .gh-tabs__list { scroll-behavior: auto; }
  .gh-card, .gh-local { transition: none; }
  .gh-card:hover { transform: none; }
}