/*----------------------------------------------------------------
  Gopaleswor Tours — visual refresh + mobile-friendly pass
  Loaded after main.css: adds new tokens and targeted component
  overrides rather than redefining core theme variables, so it
  layers safely on top of the existing 14k-line theme stylesheet.
----------------------------------------------------------------*/

:root {
  --gt-forest: #0e2a1d;
  --gt-forest-2: #123524;
  --gt-forest-soft: #143b28;
  --gt-ink: #0d1b14;
  --gt-mist: #eef6f1;
  --gt-line: rgba(255, 255, 255, 0.1);
  --gt-radius: 16px;
  --gt-radius-sm: 10px;
  --gt-shadow: 0 10px 26px rgba(14, 42, 29, 0.08);
  --gt-shadow-lg: 0 22px 48px rgba(14, 42, 29, 0.14);
}

/*----------------------------------------
  Global: safety nets for mobile overflow
----------------------------------------*/
html, body {
  overflow-x: hidden;
}
body {
  font-size: 20px;
}
p {
  font-size: 16px !important;
}
img {
  max-width: 100%;
  height: auto;
}
iframe {
  max-width: 100%;
}
.tp-tour-thumb img,
.tp-destination-thumb img,
.tp-blog-two-thumb img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.tp-destination-thumb img {
  height: 250px;
}
.tp-blog-two-thumb img {
  height: 230px;
}
@media (max-width: 575.98px) {
  .tp-destination-thumb img {
    height: 200px;
  }
}
/* Matches the theme's own .tp-tour-thumb .image img selector (main.css)
   so this reliably wins the cascade instead of being shadowed by it. */
.tp-tour-thumb .image {
  height: 240px;
}
.tp-tour-thumb .image img {
  height: 100%;
  object-fit: cover;
}
@media (max-width: 575.98px) {
  .tp-tour-thumb .image {
    height: 200px;
  }
}

/*----------------------------------------
  Buttons — softer shadow + lift on hover
----------------------------------------*/
.tp-btn {
  box-shadow: 0 10px 20px rgba(242, 156, 6, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.tp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(242, 156, 6, 0.24);
}
.tp-btn-sm {
  transition: all 0.25s ease;
}
.tp-btn-sm:hover {
  transform: translateY(-2px);
}
.tp-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tp-btn-solid svg {
  transition: transform 0.25s ease;
}
.tp-btn-solid:hover svg {
  transform: translateX(3px);
}

/*----------------------------------------
  Cards — consistent radius + shadow + lift
----------------------------------------*/
.tp-tour-item,
.tp-blog-two-item,
.tp-destination-thumb,
.tp-tour-dayfilter-item {
  border-radius: var(--gt-radius);
  overflow: hidden;
}
.tp-tour-item {
  box-shadow: var(--gt-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tp-tour-item:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-4px);
}
.tp-tour-thumb,
.tp-destination-thumb {
  border-radius: var(--gt-radius);
  overflow: hidden;
}
.tp-tour-content {
  padding: 20px;
}

/*----------------------------------------
  Homepage "Recent Travel & Blog Articles"
  cards — rebuilt to match the tour/
  destination card language (white surface,
  shadow, hover lift) instead of the theme's
  flat, image-plus-title-only treatment.
  .tp-blog-7-item only appears on the
  homepage, so this is scoped safely.
----------------------------------------*/
.tp-blog-7-item {
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tp-blog-7-item:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-4px);
}
.tp-blog-7-item .tp-blog-two-thumb,
.tp-blog-7-item .tp-blog-two-thumb img {
  border-radius: 0;
}
.tp-blog-7-item .tp-blog-two-thumb img {
  height: 230px;
  object-fit: cover;
}
.tp-blog-7-item .tp-blog-content {
  padding: 22px 24px 26px;
  background: #fff;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tp-blog-7-item .tp-blog-meta span {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tp-grey-1);
  font-weight: 600;
}
.tp-blog-7-item .tp-blog-title {
  font-size: 24px;
  line-height: 130%;
}
@media (max-width: 574.98px) {
  .tp-blog-7-item .tp-blog-title {
    font-size: 20px;
  }
}
.tp-blog-7-item .tp-blog-excerpt {
  color: var(--tp-grey-1);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.tp-blog-7-item .tp-blog-readmore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
  color: var(--tp-common-black);
  margin-top: auto;
}
.tp-blog-7-item .tp-blog-readmore svg {
  transition: transform 0.25s ease;
}
.tp-blog-7-item .tp-blog-readmore:hover {
  color: var(--tp-grey-1);
}
.tp-blog-7-item .tp-blog-readmore:hover svg {
  transform: translateX(3px);
}
.tp-blog-7-item .tp-blog-category {
  font-size: 13px;
  font-weight: 600;
}

/*----------------------------------------
  Blog listing page (blog.html) — wider
  gutter between cards so the shadowed
  card edges don't sit flush against each
  other in the 3-column grid.
----------------------------------------*/
.tp-blog-area .row {
  --bs-gutter-x: 2rem;
  --bs-gutter-y: 1.5rem;
}

/*----------------------------------------
  Section headers
----------------------------------------*/
.tp-section-two-subtitle {
  letter-spacing: 0.06em;
}
.tp-breadcrumb-area {
  position: relative;
}
.tp-breadcrumb-area.tp-breadcrumb-overly::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 22, 16, 0.5) 0%, rgba(10, 22, 16, 0.78) 100%);
}
.tp-breadcrumb-area .container {
  position: relative;
  z-index: 1;
}
.tp-breadcrumb-title {
  color: #fff;
}
/* The theme's fs-112 modifier is oversized for a hero subtitle, more so
   now that the breadcrumb nav sits above it in the same block. */
.tp-breadcrumb-title.fs-112 {
  font-size: 52px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .tp-breadcrumb-title.fs-112 {
    font-size: 42px;
  }
}
@media (max-width: 574.98px) {
  .tp-breadcrumb-title.fs-112 {
    font-size: 30px;
  }
}

/*----------------------------------------
  Breadcrumb nav trail — sits inside the
  hero, above the page title. Styled for
  light text on a dark photo overlay
  (unlike the theme's own .breadcrumbs,
  which assumes a light background).
----------------------------------------*/
.tp-breadcrumb-nav {
  margin-bottom: 14px;
}
.tp-breadcrumb-nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tp-breadcrumb-nav ul li {
  position: relative;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 500;
}
.tp-breadcrumb-nav ul li:not(:last-child) {
  margin-right: 22px;
}
.tp-breadcrumb-nav ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--tp-theme-1);
}
.tp-breadcrumb-nav ul li a {
  color: rgba(255, 255, 255, 0.85);
}
.tp-breadcrumb-nav ul li a:hover {
  color: var(--tp-grey-1);
}
.tp-breadcrumb-nav ul li:last-child {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 575.98px) {
  .tp-breadcrumb-nav ul li {
    font-size: 13px;
  }
  .tp-breadcrumb-nav ul li:not(:last-child) {
    margin-right: 16px;
  }
  .tp-breadcrumb-nav ul li:not(:last-child)::after {
    right: -10px;
  }
}

/*----------------------------------------
  Header — mobile spacing & tap targets
----------------------------------------*/
.tp-header-height {
  height: auto !important;
  min-height: 64px;
}
#header-sticky {
  padding: 10px 0;
}
.tp-header-logo img {
  height: auto;
}
.tp-header-toogle {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.tp-header-toogle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tp-common-black);
}

@media (max-width: 575.98px) {
  .tp-header-logo img {
    max-width: 108px;
  }
  .tp-header-logo.mr-60 {
    margin-right: 20px !important;
  }
}

/*----------------------------------------
  Offcanvas mobile menu
----------------------------------------*/
.tp-offcanvas {
  width: 360px;
  padding: 36px 28px;
  background: var(--gt-mist);
}
@media (max-width: 574.98px) {
  .tp-offcanvas {
    /* Without this, the unscoped 360px width above silently wins over
       main.css's own width:100% mobile rule (equal specificity, later
       source order), overflowing the viewport on phones narrower than
       360px (e.g. 320px devices). */
    width: 100%;
    padding: 28px 20px;
  }
}
.tp-offcanvas-logo img {
  max-width: 120px;
}
.tp-offcanvas-close-button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--gt-shadow);
}
.tp-offcanvas-menu nav > ul > li {
  border-bottom: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-offcanvas-menu nav > ul > li > a {
  padding: 14px 0;
  display: inline-block;
  font-weight: 600;
  color: var(--gt-ink);
}
.tp-offcanvas-menu .sub-menu {
  padding-bottom: 10px;
}
.tp-offcanvas-menu .sub-menu li a {
  padding: 8px 0 8px 14px;
  display: inline-block;
  color: var(--tp-grey-1);
  font-size: 15px;
}
.tp-offcanvas-menu .sub-menu li a:hover {
  color: var(--tp-grey-1);
}
/*----------------------------------------
  Forms — mobile-safe font size (prevents
  iOS auto-zoom) + unified look
----------------------------------------*/
.tp-input,
.tp-textarea,
textarea.tp-input {
  font-size: 16px;
  border-radius: var(--gt-radius-sm);
}

/*----------------------------------------
  Footer — full rebuild
----------------------------------------*/
.tp-footer-area {
  background: #f4f8fd !important;
  color: rgba(13, 27, 20, 0.75);
  position: relative;
  overflow: hidden;
}
.tp-footer-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 400px at 15% 0%, rgba(242, 156, 6, 0.12), transparent 60%);
  pointer-events: none;
}
.tp-footer-area .container {
  position: relative;
  z-index: 1;
}
.tp-footer-widget-title {
  color: var(--gt-ink);
  font-size: 18px;
  letter-spacing: 0.01em;
  position: relative;
  padding-bottom: 10px;
}
.tp-footer-widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: #36B2EF;
}
.tp-footer-widget-menu ul li a {
  color: rgba(13, 27, 20, 0.68);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.tp-footer-widget-menu ul li a:hover {
  color: var(--tp-grey-1);
  padding-left: 4px;
}
.tp-footer-logo img {
  max-width: 130px;
  background: #fff;
  border: 1px solid rgba(13, 27, 20, 0.08);
  border-radius: 10px;
  padding: 6px 10px;
}
.tp-footer-desc {
  color: rgba(13, 27, 20, 0.65);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 18px;
}
.tp-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tp-footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.tp-footer-contact-item i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: rgba(13, 27, 20, 0.06);
  color: #58595B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.tp-footer-contact-item a,
.tp-footer-contact-item span.text {
  color: rgba(13, 27, 20, 0.78);
  line-height: 1.5;
}
.tp-footer-contact-item a:hover {
  color: var(--tp-grey-1);
}
.tp-footer-area hr {
  border-color: rgba(13, 27, 20, 0.1);
  opacity: 1;
  margin: 22px 0;
}
.tp-footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}
.tp-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(13, 27, 20, 0.06);
  color: var(--gt-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
@media (max-width: 374.98px) {
  .tp-footer-social {
    gap: 8px;
  }
  .tp-footer-social a {
    width: 34px;
    height: 34px;
    font-size: 14px;
  }
}
.tp-footer-social a:hover {
  color: #fff;
  transform: translateY(-3px);
}
.tp-footer-social a.tp-social-facebook:hover {
  background: #1877f2;
}
.tp-footer-social a.tp-social-twitter:hover {
  background: #000000;
}
.tp-footer-social a.tp-social-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.tp-footer-social a.tp-social-youtube:hover {
  background: #ff0000;
}
.tp-footer-social a.tp-social-linkedin:hover {
  background: #0a66c2;
}
.tp-footer-social a.tp-social-tiktok:hover {
  background: #000000;
}
/*----------------------------------------
  Footer "We are associated with" / "We
  accept" strip — real partner (NTB, NMA,
  Government of Nepal, TAAN) and payment
  (Visa, MasterCard, Amex) logos, each on
  a white chip for contrast against the
  dark footer background.
----------------------------------------*/
.tp-footer-associate-area {
  border-top: 1px solid rgba(13, 27, 20, 0.1);
  padding: 32px 0;
  position: relative;
  z-index: 1;
}
.tp-footer-associate-row {
  row-gap: 24px;
}
.tp-footer-associate-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(13, 27, 20, 0.55);
  margin-bottom: 14px;
}
.tp-footer-associate-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.tp-footer-payment-block .tp-footer-associate-logos {
  justify-content: flex-start;
}
.tp-footer-associate-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 6px 12px;
  background: #fff;
  border-radius: var(--gt-radius-sm);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease;
}
.tp-footer-associate-logo:hover {
  transform: translateY(-2px);
}
.tp-footer-associate-logo img {
  max-height: 24px;
  max-width: 60px;
  width: auto;
  object-fit: contain;
}
@media (min-width: 992px) {
  .tp-footer-payment-block {
    text-align: right;
  }
  .tp-footer-payment-block .tp-footer-associate-logos {
    justify-content: flex-end;
  }
}
@media (max-width: 991.98px) {
  .tp-footer-associate-block {
    text-align: center;
  }
  .tp-footer-associate-logos,
  .tp-footer-payment-block .tp-footer-associate-logos {
    justify-content: center;
  }
}
@media (max-width: 575.98px) {
  .tp-footer-associate-area {
    padding: 26px 0;
  }
  .tp-footer-associate-logo {
    height: 34px;
    padding: 5px 10px;
  }
  .tp-footer-associate-logo img {
    max-height: 18px;
    max-width: 46px;
  }
}

.tp-copyright-area {
  background: #f4f8fd;
  border-top: 1px solid rgba(13, 27, 20, 0.08);
  position: relative;
  z-index: 1;
}
.tp-copyright-text p {
  color: rgba(13, 27, 20, 0.65);
  margin-bottom: 0;
}
.tp-copyright-text p a {
  color: var(--gt-ink);
}
.tp-footer-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
}
.tp-footer-bottom-links a {
  color: rgba(13, 27, 20, 0.65);
  font-size: 14px;
}
.tp-footer-bottom-links a:hover {
  color: var(--tp-grey-1);
}
@media (max-width: 767.98px) {
  .tp-footer-bottom-links {
    justify-content: flex-start;
  }
  .tp-copyright-area .row > div {
    text-align: left !important;
  }
}
@media (max-width: 575.98px) {
  .tp-footer-widget {
    text-align: left;
  }
}

/*----------------------------------------
  Mobile spacing scale-down
  (theme's pt- and pb- utility classes are
  fixed px at every breakpoint, so large
  desktop paddings otherwise stay huge on
  small phones)
----------------------------------------*/
@media (max-width: 991.98px) {
  .pt-140, .pt-130, .pt-125, .pt-105, .pt-100 { padding-top: 80px; }
  .pb-140, .pb-115, .pb-110, .pb-100 { padding-bottom: 80px; }
  .pt-80, .pt-70 { padding-top: 55px; }
  .pb-90, .pb-80, .pb-70, .pb-65 { padding-bottom: 55px; }
}
@media (max-width: 575.98px) {
  .pt-140, .pt-130, .pt-125, .pt-105, .pt-100 { padding-top: 50px; }
  .pb-140, .pb-115, .pb-110, .pb-100 { padding-bottom: 50px; }
  .pt-80, .pt-70, .pt-55 { padding-top: 36px; }
  .pb-90, .pb-80, .pb-70, .pb-65, .pb-55, .pb-50 { padding-bottom: 36px; }
  .tp-hero-6-content .tp-hero-title { font-size: 30px; }
  .tp-booking-form { width: 100%; }
}

/*----------------------------------------
  Contact map / iframe overflow guard
----------------------------------------*/
.tp-contact-map-box {
  border-radius: var(--gt-radius);
  overflow: hidden;
}
.tp-contact-map-box iframe {
  width: 100%;
  display: block;
  filter: none;
}

/*----------------------------------------
  Team page — horizontal cards, image
  left / details right, circular photo.
  .tp-team-item and friends are only used
  on team.html, so this fully replaces the
  theme's stacked-card treatment.
----------------------------------------*/
.tp-team-item {
  display: flex;
  align-items: center;
  gap: 24px;
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  padding: 26px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tp-team-item:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-4px);
}
.tp-team-thumb {
  flex: 0 0 130px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0 !important;
}
.tp-team-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.tp-team-content {
  flex: 1;
  min-width: 0;
}
.tp-team-subtitle {
  font-size: 14px;
}
.tp-team-title {
  font-size: 22px;
  line-height: 1.3;
}
.tp-team-social {
  position: static;
  display: flex;
  flex-direction: row;
  opacity: 1;
  visibility: visible;
  transform: none;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  gap: 10px;
  margin-top: 6px;
}
.tp-team-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gt-mist);
  color: var(--gt-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.25s ease;
}
.tp-team-social a:hover {
  background: var(--tp-theme-1);
  color: #fff;
}
@media (max-width: 767.98px) {
  .tp-team-item {
    gap: 18px;
    padding: 20px;
  }
  .tp-team-thumb {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }
  .tp-team-row-item .tp-team-thumb {
    /* .tp-team-row-item .tp-team-thumb (150px, unconditional) is more
       specific than the plain .tp-team-thumb rule above, so without
       this it would never shrink on team.html's row layout. */
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }
  .tp-team-title {
    font-size: 19px;
  }
}
@media (max-width: 420px) {
  .tp-team-item {
    flex-direction: column;
    text-align: center;
  }
  .tp-team-social {
    justify-content: center;
  }
}

/* Single-row variant (team.html list — one full-width row per person) */
.tp-team-row-item {
  align-items: flex-start;
  gap: 30px;
}
.tp-team-row-item .tp-team-thumb {
  flex-basis: 150px;
  width: 150px;
  height: 150px;
}
.tp-team-bio {
  color: var(--tp-grey-1);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 14px;
  max-width: 720px;
}
.tp-team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-bottom: 14px;
}
.tp-team-meta a {
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-ink);
}
.tp-team-meta a i {
  color: #8A8D91;
  margin-right: 6px;
}
.tp-team-meta a:hover {
  color: var(--tp-grey-1);
}
.tp-team-row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.tp-team-row-footer .tp-team-social {
  margin-top: 0;
}
@media (max-width: 767.98px) {
  .tp-team-row-item .tp-team-thumb {
    flex-basis: 96px;
    width: 96px;
    height: 96px;
  }
}
@media (max-width: 420px) {
  .tp-team-meta,
  .tp-team-row-footer {
    justify-content: center;
  }
}

/*----------------------------------------
  Team detail page — matches the team.html
  card language: circular framed portrait,
  icon-button contact/social row.
  .tp-team-details-* is only used on
  team_detail.html.
----------------------------------------*/
.tp-team-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--gt-ink);
}
.tp-team-back-link svg {
  transition: transform 0.25s ease;
}
.tp-team-back-link:hover {
  color: var(--tp-grey-1);
}
.tp-team-back-link:hover svg {
  transform: translateX(-3px);
}

.tp-team-details-thumb {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--gt-shadow-lg);
  border: 6px solid #fff;
  outline: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-team-details-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.tp-team-details-subtitle {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tp-theme-1);
  background: var(--gt-mist);
  border-radius: 30px;
  padding: 7px 16px;
}

.tp-team-details-info {
  border: none;
  background: var(--gt-mist);
  border-radius: var(--gt-radius);
  padding: 20px 24px;
  gap: 16px;
}
.tp-team-details-info-contact a:not(:last-of-type) {
  border-right-color: rgba(14, 42, 29, 0.12);
}

.tp-team-details-social {
  gap: 10px;
}
.tp-team-details-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--gt-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--gt-shadow);
  transition: all 0.25s ease;
}
.tp-team-details-social a:hover {
  background: var(--tp-theme-1);
  color: #fff;
}

@media (max-width: 767.98px) {
  .tp-team-details-thumb {
    max-width: 260px;
  }
}

/*----------------------------------------
  Shared "eyebrow" label — small uppercase
  tag used above section headings across
  multiple pages (legal docs, day tours, …).
----------------------------------------*/
.tp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #36B2EF;
  margin-bottom: 14px;
}
.tp-eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: #36B2EF;
}

/*----------------------------------------
  Legal Documents page — certificate
  gallery. .tp-legal-* only used here.
----------------------------------------*/
.tp-legal-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 50px;
}
.tp-legal-section-head .tp-eyebrow {
  justify-content: center;
}
.tp-legal-lead {
  color: var(--tp-grey-1);
  font-size: 16px;
  line-height: 1.7;
  margin-top: 14px;
  margin-bottom: 0;
}

.tp-legal-doc-item {
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tp-legal-doc-item:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-4px);
}
.tp-legal-doc-thumb {
  position: relative;
  display: block;
  background: var(--gt-mist);
  aspect-ratio: 4 / 3;
}
.tp-legal-doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
}
.tp-legal-doc-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--gt-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--gt-shadow);
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease;
}
.tp-legal-doc-item:hover .tp-legal-doc-zoom {
  opacity: 1;
  transform: translateY(0);
}
.tp-legal-doc-content {
  padding: 18px 20px;
  border-top: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-legal-doc-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--gt-ink);
  margin: 0;
}

/*----------------------------------------
  Pagination — the theme's hover/current
  state references undefined CSS variables
  (--tp-theme-color / --tp-white instead of
  --tp-theme-1 / --tp-common-white), so the
  active page never actually gets
  highlighted there. On top of that, the
  actual markup wraps the <ul> in a <nav>
  (see blog.html), which matches a second,
  *live* theme rule (.tp-pagination nav ul
  li a) carrying one extra element in its
  selector — one specificity point higher
  than a plain ".tp-pagination ul li a", so
  it silently won over this fix regardless
  of source order. Selectors below now
  include "nav" too, so this pill restyle
  actually wins.
----------------------------------------*/
.tp-pagination nav ul li a,
.tp-pagination nav ul li span,
.tp-pagination ul li a,
.tp-pagination ul li span {
  width: 42px;
  height: 42px;
  line-height: 40px;
  border-radius: 50%;
  border-color: rgba(14, 42, 29, 0.12);
  color: var(--gt-ink);
  transition: all 0.25s ease;
}
.tp-pagination nav ul li a:hover,
.tp-pagination nav ul li a.current,
.tp-pagination nav ul li span:hover,
.tp-pagination nav ul li span.current,
.tp-pagination ul li a:hover,
.tp-pagination ul li a.current,
.tp-pagination ul li span:hover,
.tp-pagination ul li span.current {
  background: #36B2EF;
  border-color: #36B2EF;
  color: #fff;
}

/*----------------------------------------
  Blog list page — single-column rows,
  image left / details right. .tp-blog-row-*
  only used on blog.html.
----------------------------------------*/
.tp-blog-row-item {
  display: flex;
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tp-blog-row-item:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-4px);
}
.tp-blog-row-thumb {
  position: relative;
  flex: 0 0 380px;
  max-width: 380px;
}
.tp-blog-row-thumb img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.tp-blog-row-thumb:hover img {
  transform: scale(1.06);
}
.tp-blog-row-thumb .tp-blog-category {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #fff;
  border: none;
}
.tp-blog-latest-badge {
  background: var(--tp-theme-1) !important;
  color: #fff !important;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.tp-blog-row-content {
  flex: 1;
  min-width: 0;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tp-blog-row-content .tp-blog-title {
  font-size: 24px;
  line-height: 1.3;
}
.tp-blog-row-excerpt {
  color: var(--tp-grey-1);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 20px;
}
@media (max-width: 991.98px) {
  .tp-blog-row-thumb {
    flex-basis: 300px;
    max-width: 300px;
  }
  .tp-blog-row-content {
    padding: 26px 28px;
  }
}
@media (max-width: 767.98px) {
  .tp-blog-row-item {
    flex-direction: column;
  }
  .tp-blog-row-thumb {
    max-width: 100%;
  }
  .tp-blog-row-thumb img {
    min-height: 220px;
  }
  .tp-blog-row-content {
    padding: 24px;
  }
}

/*----------------------------------------
  Blog detail page — readable article
  layout for long-form content + a
  properly framed hero image.
  .postbox-details-main (no "-wrap" suffix)
  and .tp-blog-detail-* / .tp-article-content
  are only used on blog_detail.html — the
  similarly-named .postbox-details-main-wrap
  on about/page/why-us is untouched.
----------------------------------------*/
.postbox-details-main {
  max-width: 860px;
  margin: 0 auto;
}
.tp-blog-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--gt-ink);
}
.tp-blog-back-link svg {
  transition: transform 0.25s ease;
}
.tp-blog-back-link:hover {
  color: var(--tp-grey-1);
}
.tp-blog-back-link:hover svg {
  transform: translateX(-3px);
}

.tp-blog-detail-thumb {
  border-radius: var(--gt-radius);
  overflow: hidden;
  box-shadow: var(--gt-shadow-lg);
  aspect-ratio: 16 / 8;
}
.tp-blog-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tp-article-content {
  color: var(--tp-grey-1);
  font-size: 16px;
  line-height: 1.8;
}
.tp-article-content > *:first-child {
  margin-top: 0;
}
.tp-article-content p {
  margin-bottom: 20px;
}
/* CKEditor's toolbar includes insertTable, so any tour overview/
   highlight/additional-info or blog post can contain a wide editor
   table with no built-in wrapper — this keeps it from forcing the
   whole page to scroll horizontally on mobile. */
.tp-article-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tp-article-content pre,
.tp-article-content code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.tp-article-content h1,
.tp-article-content h2,
.tp-article-content h3,
.tp-article-content h4,
.tp-article-content h5 {
  color: var(--gt-ink);
  font-weight: 600;
  line-height: 1.35;
  margin: 38px 0 16px;
}
.tp-article-content h2 {
  font-size: 28px;
}
.tp-article-content h3 {
  font-size: 22px;
}
.tp-article-content h4 {
  font-size: 18px;
}
.tp-article-content ul,
.tp-article-content ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.tp-article-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.tp-article-content a {
  color: var(--tp-theme-1);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tp-article-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--gt-radius-sm);
  margin: 10px 0 26px;
  display: block;
}
.tp-article-content blockquote {
  margin: 28px 0;
  padding: 20px 26px;
  border-left: 4px solid var(--tp-theme-1);
  background: var(--gt-mist);
  border-radius: 0 var(--gt-radius-sm) var(--gt-radius-sm) 0;
  color: var(--gt-ink);
  font-size: 18px;
  font-style: italic;
  line-height: 1.6;
}
.tp-article-content blockquote p:last-child {
  margin-bottom: 0;
}
.tp-article-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 26px;
  font-size: 15px;
}
.tp-article-content table th,
.tp-article-content table td {
  border: 1px solid rgba(14, 42, 29, 0.12);
  padding: 10px 14px;
  text-align: left;
}
.tp-article-content table th {
  background: var(--gt-mist);
  color: var(--gt-ink);
}
.tp-article-content hr {
  margin: 34px 0;
  border-color: rgba(14, 42, 29, 0.12);
}

@media (max-width: 575.98px) {
  .tp-blog-detail-thumb {
    aspect-ratio: 4 / 3;
  }
  .tp-article-content h2 {
    font-size: 23px;
  }
  .tp-article-content h3 {
    font-size: 19px;
  }
}

/*----------------------------------------
  Site-wide message toasts (django.contrib.
  messages) — floating top-right, auto-
  dismissing after 5s (see the inline script
  in base.html). Self-contained CSS/vanilla
  JS, no external library — a prior version
  used Toastify.js but it silently failed to
  display for at least one real user with no
  reproducible cause, despite the mechanism
  checking out in every test; this removes
  that dependency entirely.
----------------------------------------*/
.tp-messages-wrap {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: calc(100% - 40px);
  max-width: 380px;
}
.tp-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--gt-radius-sm);
  font-size: 15px;
  font-weight: 500;
  box-shadow: var(--gt-shadow-lg);
  animation: tpAlertIn 0.4s ease;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.tp-alert-out {
  opacity: 0;
  transform: translateX(30px);
}
@keyframes tpAlertIn {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.tp-alert-success {
  background: #e7f6ee;
  color: #0f6b3f;
  border: 1px solid rgba(15, 107, 63, 0.18);
}
.tp-alert-error {
  background: #fdeeec;
  color: #b3311c;
  border: 1px solid rgba(179, 49, 28, 0.18);
}
.tp-alert-warning {
  background: #fff6e5;
  color: #8a5a00;
  border: 1px solid rgba(138, 90, 0, 0.18);
}
.tp-alert-close {
  background: transparent;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
}
.tp-alert-close:hover {
  opacity: 1;
}
@media (max-width: 575.98px) {
  .tp-messages-wrap {
    top: 80px;
    right: 12px;
    left: 12px;
    max-width: 100%;
    width: auto;
  }
}

/*----------------------------------------
  Day Tours pages — .tp-daytour-intro-text
  is on daytour.html (listing); the quick
  inquiry card now lives on
  daytour_detail.html (single tour page),
  reached via the "Enquire" links on the
  listing's tour cards.
----------------------------------------*/
.tp-daytour-intro-text {
  color: var(--tp-grey-1);
  font-size: 16px;
  line-height: 1.75;
}
/* Itinerary day headers on trip.html use h3 (nested under the
   "Detailed Itinerary" h2) instead of the theme's default h4,
   for a correct heading outline; keep the theme's visual size. */
.tp-tour-details-plan-list ul li h3 {
  font-weight: 600;
  font-size: 24px;
  color: var(--tp-common-black);
  margin-bottom: 18px;
}
/* Trip Highlights stat values (Destination, Grade, etc.) on
   trip.html are data, not headings — use <p> instead of the
   theme's <h3>, keeping the same visual size/weight. */
.tp-tour-details-info-content p {
  font-size: 20px;
  font-weight: 500;
  color: var(--tp-common-black);
}
.tp-quick-inquiry-card {
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow-lg);
  padding: 32px;
  border-top: 4px solid var(--tp-theme-1);
}
.tp-quick-inquiry-card.is-sticky {
  position: sticky;
  top: 100px;
}
.tp-quick-inquiry-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--gt-ink);
  margin-bottom: 8px;
}
.tp-quick-inquiry-sub {
  color: var(--tp-grey-1);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}
@media (max-width: 991.98px) {
  .tp-quick-inquiry-card {
    padding: 26px;
  }
  .tp-quick-inquiry-card.is-sticky {
    position: static;
  }
}
.tp-tour-enquire-btn {
  background: transparent;
  border: none;
  color: var(--tp-theme-1);
  font-weight: 500;
  font-size: 16px;
  padding: 10px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.tp-tour-enquire-btn:hover {
  color: var(--tp-common-red);
}

/*----------------------------------------
  Tour detail page (trip.html) — modern
  polish pass. Classes below with the
  tp-tour- prefix used here are otherwise
  unused elsewhere (verified before adding).
----------------------------------------*/
.tp-tour-difficulty-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 30px;
  vertical-align: middle;
}
.tp-tour-difficulty-low {
  background: #e7f6ee;
  color: #0f6b3f;
}
.tp-tour-difficulty-moderate {
  background: #fff6e5;
  color: #8a5a00;
}
.tp-tour-difficulty-high {
  background: #fdeeec;
  color: #b3311c;
}

.tp-tour-details-info-icon {
  background: var(--gt-mist) !important;
  color: var(--gt-ink);
  transition: background 0.25s ease, color 0.25s ease;
}
.tp-tour-details-info li:hover .tp-tour-details-info-icon {
  background: var(--tp-theme-1) !important;
  color: #fff;
}

.tp-tour-details-place-thumb {
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
}
.tp-tour-details-place-thumb a {
  border-radius: var(--gt-radius);
}
.tp-tour-details-place-thumb img {
  border-radius: var(--gt-radius);
  height: 180px;
  object-fit: cover;
}
.tp-tour-place-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: var(--gt-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--gt-shadow);
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.25s ease;
}
.tp-tour-details-place-thumb:hover .tp-tour-place-zoom {
  opacity: 1;
  transform: translateY(0);
}

.tp-tour-inclusion-card {
  height: 100%;
  padding: 26px;
  border-radius: var(--gt-radius);
  border-left: 4px solid;
}
.tp-tour-inclusion-card.is-include {
  background: #f2faf5;
  border-left-color: #73b458;
}
.tp-tour-inclusion-card.is-exclude {
  background: #fdf4f3;
  border-left-color: var(--tp-theme-1);
}
.tp-tour-inclusion-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tp-tour-inclusion-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--gt-ink);
  font-size: 15px;
  line-height: 1.5;
}
.tp-tour-inclusion-card ul li svg {
  flex: 0 0 auto;
  margin-top: 6px;
}
.tp-tour-inclusion-empty {
  color: var(--tp-grey-1);
  font-style: italic;
}

.tp-booking-sidebar-item {
  border-top: 4px solid var(--tp-theme-1);
}
.tp-booking-6-sidebar-help {
  border-top: 4px solid #f29c06;
}

/*----------------------------------------
  Trip detail hero gallery — main image
  and the 4 small thumbnails were sized by
  each photo's natural aspect ratio, so the
  grid looked jagged. Fix them to a uniform
  height (2 rows of small thumbs + the 10px
  gutter line up exactly with the main
  image's height).
----------------------------------------*/
.tp-tour-details-3-gallery-wrap .gallery-col-1 img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}
.tp-tour-details-3-gallery-wrap .gallery-col-3 img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .tp-tour-details-3-gallery-wrap .gallery-col-1 img {
    height: 360px;
  }
  .tp-tour-details-3-gallery-wrap .gallery-col-3 img {
    height: 175px;
  }
}
@media (max-width: 575.98px) {
  .tp-tour-details-3-gallery-wrap .gallery-col-1 img {
    height: 260px;
  }
  .tp-tour-details-3-gallery-wrap .gallery-col-3 img {
    height: 125px;
  }
}

/*----------------------------------------
  Day tour detail gallery slider — same
  fix as trip.html's hero gallery: each
  slide's image had its own natural aspect
  ratio, so the slider jumped in height as
  you swiped. .tp-instagram-thumb is only
  used on daytour_detail.html.
----------------------------------------*/
.tp-instagram-thumb img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}
@media (max-width: 991.98px) {
  .tp-instagram-thumb img {
    height: 260px;
  }
}
@media (max-width: 575.98px) {
  .tp-instagram-thumb img {
    height: 190px;
  }
}

/*----------------------------------------
  Destinations page — tour count badge.
  Only used on destination.html.
----------------------------------------*/
.tp-destination-tour-count {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #fff;
  color: var(--gt-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 30px;
  box-shadow: var(--gt-shadow);
}

/*----------------------------------------
  "Speak to an Expert" — single-expert card
  in the trip.html booking sidebar.
----------------------------------------*/
.tp-booking-6-sidebar-help {
  padding: 34px 28px;
}
.tp-expert-badge-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--gt-mist);
  color: var(--tp-theme-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.tp-expert-help-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--gt-ink);
  margin-bottom: 6px;
}
.tp-expert-help-sub {
  color: var(--tp-grey-1);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}
.tp-expert-card {
  padding-top: 22px;
  border-top: 1px solid rgba(14, 42, 29, 0.08);
  text-align: left;
}
.tp-expert-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.tp-expert-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--gt-shadow);
  border: 3px solid #fff;
  outline: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-expert-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-expert-info {
  min-width: 0;
}
.tp-expert-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--gt-ink);
  margin-bottom: 2px;
}
.tp-expert-role {
  display: block;
  font-size: 14px;
  color: var(--tp-grey-1);
  margin-bottom: 8px;
}
.tp-expert-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  text-align: left;
}
.tp-expert-whatsapp-btn i {
  font-size: 20px;
  color: #25d366;
}
.tp-expert-phone-number {
  font-size: 15px;
  font-weight: 400;
  color: var(--tp-grey-1);
}
.tp-expert-whatsapp-btn:hover .tp-expert-phone-number {
  color: var(--gt-ink);
}

/*----------------------------------------
  Social share widget — used on trip.html
  and blog_detail.html.
----------------------------------------*/
.tp-share-widget {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.tp-share-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--gt-ink);
}
.tp-share-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gt-mist);
  color: var(--gt-ink);
  font-size: 15px;
  transition: all 0.25s ease;
}
.tp-share-btn:hover {
  transform: translateY(-3px);
  color: #fff;
}
.tp-share-facebook:hover {
  background: #1877f2;
}
.tp-share-twitter:hover {
  background: #000;
}
.tp-share-whatsapp:hover {
  background: #25d366;
}
.tp-share-email:hover {
  background: var(--tp-theme-1);
}
.tp-share-copy {
  cursor: pointer;
  border: none;
}
.tp-share-copy.is-copied {
  background: #25d366;
  color: #fff;
}

.tp-article-share {
  margin-top: 40px;
  padding: 26px;
  border-radius: var(--gt-radius);
  background: var(--gt-mist);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.tp-article-share-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--gt-ink);
  margin: 0;
}

/*----------------------------------------
  Fixed Departure Tours — table-style list
  of upcoming group departures. .tp-departure-*
  is only used on fixed-departures.html.
----------------------------------------*/
.tp-departure-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tp-departure-row {
  display: grid;
  grid-template-columns: 72px 2fr 1.2fr 1fr 0.8fr auto;
  align-items: center;
  gap: 20px;
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  padding: 16px 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.tp-departure-row:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-2px);
}
.tp-departure-row.is-full {
  opacity: 0.7;
}
.tp-departure-thumb {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.tp-departure-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-departure-destination {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #36B2EF;
  margin-bottom: 2px;
}
.tp-departure-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 2px;
}
.tp-departure-title a {
  color: var(--gt-ink);
}
.tp-departure-title a:hover {
  color: var(--tp-grey-1);
}
.tp-departure-duration {
  font-size: 13px;
  color: var(--tp-grey-1);
}
.tp-departure-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tp-grey-1);
  margin-bottom: 2px;
}
.tp-departure-dates {
  font-size: 15px;
  font-weight: 500;
  color: var(--gt-ink);
  white-space: nowrap;
}
.tp-departure-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--gt-ink);
}
.tp-departure-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.tp-departure-badge.is-open {
  background: rgba(34, 197, 94, 0.12);
  color: #16803d;
}
.tp-departure-badge.is-low {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.tp-departure-badge.is-full {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}
/*----------------------------------------
  "Ask for Pricing" fallback — shown in
  place of the price wherever a tour /
  day tour / departure has no sell_price
  set, across cards, detail pages, the
  booking sidebar, search results and
  departure listings.
----------------------------------------*/
.tp-tour-ask-price {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gt-forest);
  background: var(--gt-mist);
  padding: 7px 16px;
  border-radius: 20px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.tp-tour-ask-price::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tp-theme-1);
  flex-shrink: 0;
}

/*----------------------------------------
  Tour detail sticky section nav — hidden
  until the user scrolls past the price/
  share row, then sticks below the site
  header. Shows quick-jump links plus a
  compact "Book Now" CTA. Horizontally
  scrollable on narrow screens instead of
  wrapping, so it stays usable on mobile.
  See static/assets/js/tour-sticky-nav.js.
----------------------------------------*/
.tp-sticky-tour-nav {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  background: #fff;
  box-shadow: var(--gt-shadow);
  transform: translateY(-110%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
.tp-sticky-tour-nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.tp-sticky-tour-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0;
}
.tp-sticky-tour-nav-links {
  display: flex;
  align-items: center;
  gap: 26px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tp-sticky-tour-nav-links::-webkit-scrollbar {
  display: none;
}
.tp-sticky-tour-nav-links a {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--gt-ink);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tp-sticky-tour-nav-links a:hover,
.tp-sticky-tour-nav-links a.is-active {
  color: var(--tp-grey-1);
  border-bottom-color: var(--tp-theme-1);
}
.tp-sticky-tour-nav-cta {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .tp-sticky-tour-nav-inner {
    padding: 10px 0;
    gap: 12px;
  }
  .tp-sticky-tour-nav-links {
    gap: 18px;
  }
  .tp-sticky-tour-nav-cta {
    padding: 8px 14px;
    font-size: 13px;
  }
}

#overview,
#itinerary,
#gallery,
#inclusions,
#faq {
  scroll-margin-top: 140px;
}

/*----------------------------------------
  Booking sidebar trust badges — shown
  between the price and the "Get A Trip
  Quote" button on the tour detail page.
----------------------------------------*/
.tp-trust-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-trust-badges li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-ink);
  line-height: 1.4;
}
.tp-trust-badges li i {
  color: var(--gt-forest);
  font-size: 15px;
  flex-shrink: 0;
}

.tp-departure-cta {
  justify-self: end;
}
.tp-btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 30px;
  background: transparent;
  border: 1px solid var(--tp-theme-1);
  color: var(--tp-theme-1);
  font-size: 14px;
  font-weight: 600;
  transition: all 0.25s ease;
}
.tp-btn-outline.tp-btn-xl {
  padding: 20px 24px;
  font-size: 16px;
}
.tp-header-plan-btn {
  padding: 10px 18px;
  font-size: 16px;
  white-space: nowrap;
  cursor: pointer;
}
.tp-header-contact {
  flex-shrink: 0;
}
@media (max-width: 1199.98px) {
  .tp-header-contact a,
  .tp-header-plan-btn {
    font-size: 13px;
    padding: 10px 20px;
    white-space: nowrap;
  }
}
.tp-btn-outline:hover {
  background: var(--tp-theme-1);
  color: #fff;
}

/*----------------------------------------
  Header "Customize Trip" + phone number —
  Customize Trip matches the site's other
  solid orange buttons; the phone pill uses
  the logo's dark gray (the "G" lettermark
  color) so the two read as a matched pair.
  Scoped to just these two header elements.
----------------------------------------*/
.tp-header-plan-btn.tp-btn-outline {
  background: var(--tp-theme-1);
  border-color: var(--tp-theme-1);
  color: #fff;
}
.tp-header-plan-btn.tp-btn-outline:hover {
  background: var(--tp-common-red);
  border-color: var(--tp-common-red);
  color: #fff;
}
.tp-header-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  background: #25d366;
  transition: all 0.25s ease;
}
.tp-header-contact a:hover {
  background: #1ebe5b;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(37, 211, 102, 0.35);
}
.tp-header-contact a i {
  margin-right: 4px;
}

@media (max-width: 991.98px) {
  .tp-departure-row {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "thumb info info"
      "dates dates seats"
      "price price cta";
    row-gap: 12px;
  }
  .tp-departure-thumb {
    grid-area: thumb;
    width: 64px;
    height: 64px;
  }
  .tp-departure-info {
    grid-area: info;
  }
  .tp-departure-dates {
    grid-area: dates;
  }
  .tp-departure-seats {
    grid-area: seats;
    justify-self: end;
  }
  .tp-departure-price {
    grid-area: price;
    align-self: center;
  }
  .tp-departure-cta {
    grid-area: cta;
    justify-self: end;
  }
}
@media (max-width: 575.98px) {
  .tp-departure-row {
    grid-template-columns: 56px 1fr;
    grid-template-areas:
      "thumb info"
      "dates dates"
      "seats seats"
      "price price"
      "cta cta";
    row-gap: 10px;
  }
  .tp-departure-thumb {
    width: 56px;
    height: 56px;
  }
  .tp-departure-seats,
  .tp-departure-cta {
    justify-self: stretch;
  }
  .tp-departure-cta .tp-btn,
  .tp-departure-cta .tp-btn-outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/*----------------------------------------
  Main menu room — the theme's desktop nav
  (.tp-main-menu, shown from "xl"/1200px up)
  sat in a col-xl-7 column while the column
  next to it (col-xl-5) held nothing but a
  phone number once the nav appeared (the
  hamburger toggle is d-xl-none, hidden at
  the same breakpoint) — 42% of the header
  width reserved for one line of text. Widened
  the nav's column to col-xl-9 / the phone
  column to col-xl-3 in base.html so the item
  list (destinations + Day Tours + Departures
  + Blog + About + Contact) has enough room
  at its default size from ~1280px up. Only
  the narrow 1200-1399px edge still needs a
  small gap trim to fit everything.
----------------------------------------*/
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .tp-main-menu nav ul li:not(:last-child) {
    margin-right: 28px;
  }
}

/*----------------------------------------
  Live tour search — homepage hero booking
  form. Replaces the theme's hardcoded fake
  destination dropdown with real results
  fetched from tour_search_suggest, rendered
  by tour-search.js into #tp-tour-search-results.
  Reuses the theme's .tp-booking-location-*
  classes for the result rows; positioning is
  handled here (instead of the theme's own
  .tp-booking-toggle-active, which is driven
  by a click-toggle JS handler this box
  doesn't use) — hidden by default, shown as
  an absolute-positioned dropdown once
  tour-search.js adds .is-open on focus/input.
----------------------------------------*/
.tp-tour-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999999;
}
.tp-tour-search-results.is-open {
  opacity: 1;
  visibility: visible;
}
.tp-tour-search-results .tp-booking-location-content {
  width: 100%;
  text-decoration: none;
}
.tp-tour-search-results ul {
  max-height: 340px;
  overflow-y: auto;
}
.tp-search-result-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tp-theme-1);
  background: var(--gt-mist);
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}
/* search-results.html's own search box has no theme-scoping
   class, so it would otherwise fall back to the theme's most
   generic .tp-input rule — a fixed 305x36px box meant for a
   compact header field, not a page search bar. */
.tp-search-results-form {
  display: flex;
  gap: 12px;
  max-width: 560px;
}
.tp-search-results-form .tp-input {
  flex: 1;
  width: auto;
  height: 52px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  padding-left: 22px;
  padding-right: 22px;
}
.tp-search-results-form .tp-btn {
  flex-shrink: 0;
}
@media (max-width: 575.98px) {
  .tp-search-results-form {
    flex-direction: column;
  }
  .tp-search-results-form .tp-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
@media (max-width: 767.98px) {
  /* .tp-booking-location-list defaults to a fixed 420px (320px
     under 575px) regardless of its now-full-width parent (the
     theme's own .tp-booking-7-form rule makes .tp-booking-location
     100% wide below 992px) — a fixed-width dropdown anchored at
     left:0 would overflow past the right edge on narrow phones
     (e.g. 320px viewport). Match the parent's width instead. */
  .tp-tour-search-results {
    width: 100%;
    max-width: 100%;
  }
}

/*----------------------------------------
  Modern hero — index.html. Adds a premium
  eyebrow badge, richer gradient overlay, an
  elevated search bar and a real-data stats
  row on top of the theme's existing
  tp-hero-7 / tp-booking-7-form classes (the
  theme already darkens the photo via
  .tp-hero-bg::before at 65% opacity; this
  layers a directional gradient on top for
  more depth without fighting that rule).
----------------------------------------*/
.tp-hero-modern {
  overflow: hidden;
}
.tp-hero-modern-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 27, 20, 0.1) 0%,
    rgba(13, 27, 20, 0.55) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.tp-hero-modern .container {
  position: relative;
  z-index: 1;
}
.tp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.tp-hero-eyebrow i {
  color: #36B2EF;
  font-size: 12px;
}
.tp-hero-modern-search .tp-booking-wrap {
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.45);
}
.tp-hero-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.tp-hero-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.tp-hero-stat-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--tp-ff-heading);
}
.tp-hero-stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}
.tp-hero-stat-divider {
  width: 1px;
  height: 34px;
  background: rgba(255, 255, 255, 0.25);
}
@media (max-width: 575.98px) {
  .tp-hero-eyebrow {
    font-size: 11px;
    padding: 6px 14px;
    margin-bottom: 16px;
  }
  .tp-hero-stats-row {
    gap: 18px;
  }
  .tp-hero-stat-number {
    font-size: 22px;
  }
  .tp-hero-stat-divider {
    height: 28px;
  }
}

/*----------------------------------------
  Homepage blog section — one large featured
  post (left) + a stacked list of smaller
  posts (right). .tp-blog-mini-* is only
  used here; .tp-blog-featured-item reuses
  the theme's existing .tp-blog-two-item
  card in a wider column, no size override
  needed since its image has no fixed
  aspect-ratio.
----------------------------------------*/
.tp-blog-featured-item .tp-blog-two-thumb {
  aspect-ratio: 4 / 3;
}
.tp-blog-featured-item .tp-blog-two-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-blog-mini-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  height: 100%;
}
.tp-blog-mini-item {
  gap: 14px;
  align-items: center;
}
.tp-blog-mini-thumb {
  flex-shrink: 0;
  display: block;
  width: 90px;
  height: 74px;
  border-radius: 10px;
  overflow: hidden;
}
.tp-blog-mini-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.tp-blog-mini-item:hover .tp-blog-mini-thumb img {
  transform: scale(1.08);
}
.tp-blog-mini-content {
  min-width: 0;
}
.tp-blog-mini-date {
  display: block;
  font-size: 11px;
  color: var(--tp-grey-1);
  margin-bottom: 3px;
}
.tp-blog-mini-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 3px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tp-blog-mini-title a {
  color: var(--gt-ink);
}
.tp-blog-mini-excerpt {
  font-size: 12.5px;
  color: var(--tp-grey-1);
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tp-blog-mini-title a:hover {
  color: var(--tp-grey-1);
}
@media (max-width: 575.98px) {
  .tp-blog-mini-thumb {
    width: 72px;
    height: 60px;
  }
  .tp-blog-mini-title {
    font-size: 14px;
  }
  .tp-blog-mini-excerpt {
    display: none;
  }
}

/*----------------------------------------
  Submit-button double-click guard — see
  form-guard.js. Applied to any form's
  submit button site-wide once clicked.
----------------------------------------*/
.is-submitting {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

/*----------------------------------------
  Toastify message toasts — the fixed
  header sits on top of the page (~62px+),
  and on mobile the hamburger toggle is in
  the same top-right corner Toastify uses
  by default (top:15px, right:15px), so
  toasts would render underneath/overlapping
  it. Push them down below the header, with
  extra clearance on phones.
----------------------------------------*/
.toastify {
  top: 90px !important;
  border-radius: var(--gt-radius-sm);
  font-size: 14px;
  font-weight: 500;
}
@media (max-width: 575.98px) {
  .toastify {
    top: 80px !important;
    right: 12px !important;
    left: 12px !important;
    max-width: calc(100% - 24px) !important;
  }
}

/*----------------------------------------
  Mobile offcanvas search — reuses the same
  live-search mechanism/classes as the
  homepage hero (tour-search.js now supports
  multiple instances per page), just full-
  width for the narrower offcanvas sidebar
  instead of the wide floating hero dropdown.
----------------------------------------*/
.tp-tour-search-wrap {
  position: relative;
}
.tp-tour-search-wrap .tp-input {
  width: 100%;
  height: 50px;
  padding-left: 46px;
  padding-right: 20px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 30px;
}
.tp-tour-search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tp-theme-1);
  display: flex;
  align-items: center;
  z-index: 1;
}
.tp-tour-search-wrap .tp-tour-search-results {
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
}

/*----------------------------------------
  Homepage hero search on mobile — below
  992px the theme stacks .tp-booking-col-1
  (search input) and .tp-booking-col-3
  (the "Browse by Travel Style" dropdown +
  Search button) as two separate full-width
  boxes, which reads as mismatched/cluttered
  on a phone. Show only the search input,
  centered — .tp-hero-modern-search scopes
  this to the homepage hero only.
----------------------------------------*/
@media (max-width: 991.98px) {
  .tp-hero-modern-search .tp-booking-col-3 {
    display: none;
  }
  .tp-hero-modern-search .tp-booking-wrap {
    display: flex;
    justify-content: center;
  }
}

/*----------------------------------------
  Cookie consent banner + preferences modal
  — see cookie-consent.js. Shown once per
  browser (tracked in localStorage) until
  the visitor accepts, rejects, or saves
  preferences; reopenable any time via the
  "Cookie Settings" link in the footer.
----------------------------------------*/
.tp-cookie-banner {
  position: fixed;
  left: 16px;
  bottom: 16px;
  right: auto;
  width: clamp(260px, calc(100% - 32px), 360px);
  z-index: 999998;
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow-lg);
  padding: 22px 24px;
  display: none;
}
.tp-cookie-banner.is-visible {
  display: block;
}
.tp-cookie-banner-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.tp-cookie-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tp-grey-1);
  flex: 1;
  min-width: 0;
}
.tp-cookie-text a {
  color: var(--tp-theme-1);
  font-weight: 600;
  text-decoration: underline;
}
.tp-cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tp-cookie-btn {
  width: 100%;
  text-align: center;
  border: none;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.25s ease;
}
.tp-cookie-btn-accept {
  background: #414042;
  color: #fff;
}
.tp-cookie-btn-accept:hover {
  background: #262627;
}
.tp-cookie-btn-reject,
.tp-cookie-btn-manage {
  background: var(--gt-mist);
  color: var(--gt-ink);
}
.tp-cookie-btn-reject:hover,
.tp-cookie-btn-manage:hover {
  background: #e2e9e5;
}

.tp-cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 20, 0.55);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tp-cookie-modal-overlay.is-visible {
  display: flex;
}
.tp-cookie-modal {
  background: #fff;
  border-radius: var(--gt-radius);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--gt-shadow-lg);
}
.tp-cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-cookie-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--gt-ink);
}
.tp-cookie-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--tp-grey-1);
  cursor: pointer;
}
.tp-cookie-modal-body {
  padding: 10px 26px 6px;
}
.tp-cookie-category {
  padding: 16px 0;
  border-bottom: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-cookie-category:last-child {
  border-bottom: none;
}
.tp-cookie-category-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.tp-cookie-category-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--gt-ink);
}
.tp-cookie-category p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tp-grey-1);
}
.tp-cookie-modal-footer {
  display: flex;
  gap: 12px;
  padding: 20px 26px 26px;
}
.tp-cookie-modal-footer .tp-cookie-btn {
  flex: 1;
  text-align: center;
}

.tp-cookie-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.tp-cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.tp-cookie-switch-slider {
  position: absolute;
  inset: 0;
  background: #d5dbd7;
  border-radius: 24px;
  transition: 0.25s ease;
  cursor: pointer;
}
.tp-cookie-switch-slider::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.25s ease;
}
.tp-cookie-switch input:checked + .tp-cookie-switch-slider {
  background: var(--tp-theme-1);
}
.tp-cookie-switch input:checked + .tp-cookie-switch-slider::before {
  transform: translateX(18px);
}
.tp-cookie-switch-disabled .tp-cookie-switch-slider {
  cursor: not-allowed;
  opacity: 0.7;
}

@media (max-width: 340px) {
  .tp-cookie-banner {
    padding: 18px 20px;
  }
}

/*----------------------------------------
  Fixed-departure "Join Group" / "Ask for
  Availability" inquiry modal — same
  overlay/card pattern as the cookie modal,
  triggered from the departure list on the
  homepage and the fixed-departures page.
----------------------------------------*/
.tp-inquiry-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 20, 0.55);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.tp-inquiry-modal-overlay.is-visible {
  display: flex;
}
.tp-inquiry-modal {
  background: #fff;
  border-radius: var(--gt-radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--gt-shadow-lg);
}
.tp-inquiry-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(14, 42, 29, 0.08);
}
.tp-inquiry-modal-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--gt-ink);
}
.tp-inquiry-modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--tp-grey-1);
  cursor: pointer;
}
.tp-inquiry-modal-body {
  padding: 20px 26px 26px;
}
.tp-inquiry-modal-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tp-grey-1);
  margin-bottom: 18px;
}

/*----------------------------------------
  "Plan My Trip" 4-step wizard popup —
  triggered from the header "Customize
  Trip" button, saves to CustomizeTrip.
----------------------------------------*/
.tp-plan-trip-modal {
  max-width: 560px;
}
.tp-plan-trip-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}
.tp-plan-trip-step-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gt-mist);
  color: var(--tp-grey-1);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.25s ease;
}
.tp-plan-trip-step-dot.is-active {
  background: var(--tp-theme-1);
  color: #fff;
}
.tp-plan-trip-step-line {
  width: 32px;
  height: 2px;
  background: var(--gt-mist);
  flex-shrink: 0;
}
.is-hidden {
  display: none !important;
}
.tp-plan-trip-panel {
  display: none;
}
.tp-plan-trip-panel.is-active {
  display: block;
}
.tp-plan-trip-question {
  font-size: 17px;
  font-weight: 600;
  color: var(--gt-ink);
  margin-bottom: 14px;
}
.tp-plan-trip-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tp-plan-trip-options-sm {
  grid-template-columns: 1fr;
  gap: 6px;
}
.tp-plan-trip-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(14, 42, 29, 0.12);
  border-radius: var(--gt-radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--gt-ink);
  cursor: pointer;
  transition: all 0.2s ease;
}
.tp-plan-trip-option:has(input:checked) {
  border-color: var(--tp-theme-1);
  background: rgba(242, 156, 6, 0.06);
  color: var(--tp-theme-1);
}
.tp-plan-trip-option input {
  accent-color: var(--tp-theme-1);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tp-plan-trip-option-label {
  font-size: 13px;
  color: var(--tp-grey-1);
  font-weight: 600;
}
.tp-plan-trip-option-sm {
  padding: 8px 14px;
}
.tp-plan-trip-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.tp-plan-trip-nav .tp-btn,
.tp-plan-trip-nav .tp-btn-outline {
  margin-left: auto;
}
.tp-plan-trip-nav .tp-btn-outline {
  margin-left: 0;
  margin-right: auto;
}
@media (max-width: 575.98px) {
  .tp-plan-trip-options {
    grid-template-columns: 1fr;
  }
}

/*----------------------------------------
  "Extend your travel business" partner
  CTA band — site-wide, sits above the
  footer on every page (base.html).
----------------------------------------*/
.tp-partner-cta-area {
  background: #f4f8fd;
  padding: 70px 0;
}
.tp-partner-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.tp-partner-cta-content {
  max-width: 640px;
}
.tp-partner-cta-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gt-ink);
  margin: 14px 0 12px;
}
.tp-partner-cta-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(13, 27, 20, 0.7);
  margin: 0;
}
.tp-partner-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.tp-partner-cta-btn {
  white-space: nowrap;
  background: #f29c06;
}
.tp-partner-cta-btn:hover {
  background: #c17d05;
}
.tp-partner-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25d366;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 26px;
  border-radius: 50px;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35);
  transition: all 0.25s ease;
}
.tp-partner-whatsapp-btn i {
  font-size: 18px;
}
.tp-partner-whatsapp-btn:hover {
  background: #1ebe5b;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(37, 211, 102, 0.42);
}
@media (max-width: 991.98px) {
  .tp-partner-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .tp-partner-cta-actions {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  .tp-partner-cta-area {
    padding: 44px 0;
  }
  .tp-partner-cta-title {
    font-size: 24px;
  }
  .tp-partner-cta-sub {
    font-size: 14px;
  }
  .tp-partner-cta-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .tp-partner-cta-btn,
  .tp-partner-whatsapp-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 14px 20px;
  }
}

/*----------------------------------------
  Homepage "We're Here to Help" section —
  sits above the Fixed Departures block,
  WhatsApp CTA + 4-item feature grid.
----------------------------------------*/
.tp-help-cta-title {
  font-size: 34px;
  font-weight: 600;
  color: var(--gt-ink);
  margin: 14px 0 14px;
  line-height: 1.25;
}
.tp-help-cta-sub {
  font-size: 16px;
  line-height: 1.7;
  color: var(--tp-grey-1);
  margin-bottom: 26px;
  max-width: 520px;
}
.tp-help-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.tp-help-feature-item {
  background: #fff;
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  padding: 26px 22px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.tp-help-feature-item:hover {
  box-shadow: var(--gt-shadow-lg);
  transform: translateY(-4px);
}
.tp-help-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gt-mist);
  color: var(--gt-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}
.tp-help-feature-item h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--gt-ink);
  margin-bottom: 6px;
}
.tp-help-feature-item p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tp-grey-1);
  margin: 0;
}
@media (max-width: 767.98px) {
  .tp-help-cta-title {
    font-size: 26px;
  }
  .tp-help-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tp-help-cta-area .tp-partner-whatsapp-btn {
    margin-bottom: 30px;
  }
}
@media (max-width: 575.98px) {
  .tp-help-cta-area {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}

/*----------------------------------------
  Homepage section rhythm — alternating
  white / mist backgrounds down the page
  so sections read as distinct bands
  instead of blending into one long page.
----------------------------------------*/
.tp-section-white {
  background: #fff;
}
.tp-section-mist {
  background: var(--gt-mist);
}

/*----------------------------------------
  Nav dropdown: nested-item arrow icon
  The theme's own \f107 glyph is drawn from
  the local "Font Awesome 6 Pro" webfont,
  which is a subset that doesn't include this
  icon — it rendered blank. Pointing the same
  content at the fully-loaded CDN "Font Awesome
  6 Free" solid font fixes it without touching
  the theme's icon markup elsewhere.
----------------------------------------*/
.tp-menu-dropdown nav ul li .sub-menu li.menu-item-has-children > a:after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/*----------------------------------------
  Nav dropdown: destination mega-panel
  (Activities + Travel Styles, 2 columns)

  Selectors below are deliberately over-qualified
  (chained with .tp-menu-dropdown / .tp-offcanvas-menu
  and the .sub-menu class the panel also carries) so
  their class-count beats the theme's own
  ".tp-menu-dropdown nav ul li .sub-menu[...]" /
  ".tp-offcanvas-menu ul li .sub-menu[...]" rules in
  main.css. A plain ".tp-nav-megapanel { padding: ... }"
  loses that specificity fight and gets silently
  ignored — learned the hard way, keep the chaining.
----------------------------------------*/
.tp-menu-dropdown nav ul li .sub-menu.tp-nav-megapanel {
  display: flex;
  flex-direction: column;
  min-width: 420px;
  padding: 22px 26px 16px;
}
.tp-nav-megapanel-row {
  display: flex;
  gap: 32px;
}
.tp-nav-megapanel-col {
  flex: 1 1 0;
  min-width: 170px;
}
.tp-nav-megapanel-heading {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #36B2EF;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #eee;
}
.tp-menu-dropdown nav ul li .sub-menu.tp-nav-megapanel li a {
  padding: 6px 4px;
}
.tp-menu-dropdown .tp-nav-megapanel .tp-nav-megapanel-viewall,
.tp-offcanvas-menu .tp-nav-megapanel-viewall {
  display: block;
  margin-top: 14px;
  padding: 14px 4px 0;
  border-top: 1px solid #eee;
  font-weight: 600;
  color: #36B2EF;
}

/* Mobile offcanvas: stacked sections instead of side-by-side columns */
.tp-offcanvas-menu .sub-menu.tp-nav-megapanel-mobile {
  padding: 6px 0 4px 4px;
}
.tp-nav-megapanel-mobile .tp-nav-megapanel-heading {
  margin-top: 14px;
}
.tp-nav-megapanel-mobile .tp-nav-megapanel-heading:first-child {
  margin-top: 2px;
}
.tp-offcanvas-menu .sub-menu.tp-nav-megapanel-mobile li a {
  padding: 6px 0 6px 6px;
}
.tp-nav-megapanel-mobile .tp-nav-megapanel-viewall {
  margin-top: 10px;
  padding-top: 10px;
}