/*
Theme Name:     Travel Monster Child
Theme URI:      https://egyptnilecruisehub.com
Description:    Child theme for Egypt Nile Cruise Hub. Holds custom WP Travel Engine trip templates and site styling so they survive parent theme updates.
Author:         Egypt Nile Cruise Hub
Template:       travel-monster
Version:        1.1.0
Text Domain:    travel-monster-child
*/

/* ==========================================================================
   ENC DESIGN SYSTEM — v2 "Modern Travel-Tech"
   Emerald + coral on clean cool-neutral surfaces, elevated cards, pill
   chips/buttons, Sora + Manrope. Replaces v1's editorial ink/gold/teal
   system after design-concept review (2026-08-27); see /design-concepts
   for the three directions this was chosen from.

   All component rules below key off these tokens only — never a literal
   hex in a selector body — so the whole site's look lives in ONE place.
   Loaded after the parent theme + Elementor's own generated CSS, so these
   rules are additive polish on top of the existing markup, never a rebuild.
   ========================================================================== */

:root{
  /* --- core palette --- */
  --enc-ink:        #10131a;   /* primary text + dark surfaces — cool near-black */
  --enc-ink-soft:    #565c6b;  /* secondary/body text */
  --enc-emerald:        #0c9a72; /* primary brand accent */
  --enc-emerald-deep:   #067355;
  --enc-coral:        #ff5f45; /* secondary accent — CTAs, prices, hot states */
  --enc-coral-deep:   #cc3c28;
  --enc-coral-deepest:#a52f1e; /* accessible hover/active state for solid coral buttons */
  --enc-coral-soft:   #ffcabd;
  --enc-mist:        #eef1f0; /* cool neutral section background */
  --enc-paper:       #ffffff; /* card surface */
  --enc-white:       #ffffff;
  --enc-border:      #e4e6ec; /* cool hairline */
  --enc-shadow-rgb:  16, 19, 26;
  --enc-footer-ink:      #10131a; /* footer + trust strip surface — same ink as text, not a separate hue */
  --enc-footer-ink-deep: #0a0c10; /* darker sub-band within the footer */

  /* --- type --- */
  --enc-font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --enc-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- shape / elevation --- */
  --enc-radius-sm: 10px;
  --enc-radius-md: 16px;
  --enc-radius-lg: 22px;
  --enc-radius-pill: 999px;
  --enc-shadow-card: 0 1px 2px rgba(var(--enc-shadow-rgb),.06), 0 16px 32px -18px rgba(var(--enc-shadow-rgb),.26);
  --enc-shadow-card-hover: 0 26px 46px -16px rgba(var(--enc-shadow-rgb),.32), 0 8px 18px rgba(var(--enc-shadow-rgb),.14);
  --enc-ease: cubic-bezier(.22,.61,.36,1);
}

img.emoji, img.wp-smiley{
  display: inline !important;
  border: none !important;
  box-shadow: none !important;
  height: 1em !important;
  width: 1em !important;
  margin: 0 .07em !important;
  vertical-align: -0.1em !important;
  background: none !important;
  padding: 0 !important;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   1. TYPE FOUNDATION
   ========================================================================== */

body, .elementor-widget-text-editor, .category-trip-desc, .meafe-blog-card, p{
  color: var(--enc-ink-soft);
  font-family: var(--enc-font-body);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.category-trip-title,
.wpte-trip-category-title,
.meafe-blog-card h2, .meafe-blog-card h3,
.ench-fstrip-trust,
.site-header .header-b .primary-menu-container > ul > li > a{
  font-family: var(--enc-font-display);
  color: var(--enc-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.category-trip-title a, .wpte-trip-category-title{ color: var(--enc-ink); }

a{ color: var(--enc-emerald-deep); }
a:hover{ color: var(--enc-coral-deep); }

/* ==========================================================================
   2. HEADER / NAVIGATION
   ========================================================================== */

/* Desktop-only: the mobile off-canvas nav reuses this same markup
   (.primary-menu-container / .primary-navigation / .menu-item), so this
   restyle is gated to widths above the theme's own mobile breakpoint
   (max-width:1024px) -- the mobile menu keeps the parent theme's original
   look untouched (colors, font, dashed dividers, dropdown submenu style). */
@media (min-width: 1025px){
  .site-header{
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    border-bottom: 1px solid var(--enc-border);
    box-shadow: 0 1px 0 rgba(var(--enc-shadow-rgb),.03);
  }

  .primary-menu-container ul.primary-menu-wrapper > li > a,
  .primary-navigation .menu-item > a{
    font-family: var(--enc-font-body);
    font-weight: 600;
    color: var(--enc-ink);
    position: relative;
    transition: color .25s var(--enc-ease);
  }

  .primary-menu-container ul.primary-menu-wrapper > li > a::after{
    content: "";
    position: absolute;
    left: 0; right: 100%; bottom: -4px;
    height: 2px;
    background: var(--enc-coral);
    transition: right .3s var(--enc-ease);
    border-radius: 2px;
  }

  .primary-menu-container ul.primary-menu-wrapper > li:hover > a::after,
  .primary-menu-container ul.primary-menu-wrapper > li.current-menu-item > a::after{
    right: 0;
  }

  .primary-menu-container ul.primary-menu-wrapper > li:hover > a,
  .primary-menu-container ul.primary-menu-wrapper > li.current-menu-item > a{
    color: var(--enc-coral-deep);
  }

  .sub-menu{
    background: var(--enc-paper);
    border: 1px solid var(--enc-border);
    border-top: 3px solid var(--enc-coral);
    border-radius: var(--enc-radius-sm);
    box-shadow: var(--enc-shadow-card);
  }

  .sub-menu .menu-item > a{
    color: var(--enc-ink-soft);
    transition: color .2s var(--enc-ease), padding-left .2s var(--enc-ease);
  }
  .sub-menu .menu-item > a:hover{
    color: var(--enc-coral-deep);
    padding-left: 22px;
  }
}

.header-search-btn, .mobile-search-wrap .header-search-btn{
  transition: transform .25s var(--enc-ease), color .25s var(--enc-ease);
}
.header-search-btn:hover{ color: var(--enc-coral); transform: scale(1.08); }

.btn-book, a.btn-book{
  background: var(--enc-coral-deep);
  border-color: var(--enc-coral-deep);
  color: var(--enc-white) !important;
  font-family: var(--enc-font-body);
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: var(--enc-radius-pill);
  box-shadow: 0 8px 20px -6px rgba(var(--enc-shadow-rgb),.35);
  transition: transform .25s var(--enc-ease), box-shadow .25s var(--enc-ease), background-color .25s var(--enc-ease);
}
.btn-book:hover{
  background: var(--enc-coral-deepest);
  border-color: var(--enc-coral-deepest);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(var(--enc-shadow-rgb),.42);
}


/* ==========================================================================
   3. HERO / TRIP SEARCH SECTION
   ========================================================================== */

.travel-monster__search-section{
  position: relative;
}

.travel-monster__search-section .elementor-background-overlay{
  background: linear-gradient(180deg, rgba(var(--enc-shadow-rgb),.32) 0%, rgba(var(--enc-shadow-rgb),.58) 62%, rgba(var(--enc-shadow-rgb),.78) 100%) !important;
}

.travel-monster__search-section .elementor-widget-heading .elementor-heading-title{
  color: var(--enc-white) !important;
  font-family: var(--enc-font-display);
  font-weight: 600;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
  animation: enc-rise .8s var(--enc-ease) both;
}

.travel-monster__search-section .elementor-widget-text-editor,
.travel-monster__search-section .elementor-widget-text-editor *{
  color: rgba(255,255,255,.88) !important;
  animation: enc-rise .8s var(--enc-ease) .1s both;
}

@keyframes enc-rise{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* trip search widget card */
.wpte-trip-sfilter-wrapper{
  background: rgba(255,255,255,.96);
  border-radius: var(--enc-radius-lg);
  box-shadow: var(--enc-shadow-card-hover);
  backdrop-filter: blur(6px);
  animation: enc-rise .8s var(--enc-ease) .18s both;
}

.wpte-trip__search-submit, .wpte-trip__submit-field button, .wpte-trip__search-submit button{
  background: var(--enc-coral-deep) !important;
  border-color: var(--enc-coral-deep) !important;
  color: var(--enc-white) !important;
  font-weight: 700;
  transition: background-color .25s var(--enc-ease), transform .25s var(--enc-ease);
}
.wpte-trip__search-submit:hover, .wpte-trip__submit-field button:hover{
  background: var(--enc-coral-deepest) !important;
  border-color: var(--enc-coral-deepest) !important;
  transform: translateY(-1px);
}

/* ==========================================================================
   4. TRIP CARDS
   ========================================================================== */

.category-trips-single-inner-wrap{
  background: var(--enc-paper);
  border-radius: var(--enc-radius-md);
  overflow: hidden;
  box-shadow: var(--enc-shadow-card);
  transition: transform .4s var(--enc-ease), box-shadow .4s var(--enc-ease);
}

.category-trips-single-inner-wrap:hover{
  transform: translateY(-8px);
  box-shadow: var(--enc-shadow-card-hover);
}

.category-trip-fig{
  position: relative;
  overflow: hidden;
  margin: 0;
}

.category-trip-fig::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--enc-shadow-rgb),0) 45%, rgba(var(--enc-shadow-rgb),.5) 100%);
  opacity: 0;
  transition: opacity .4s var(--enc-ease);
  z-index: 1;
  pointer-events: none;
}

.category-trip-fig img{
  transition: transform .6s var(--enc-ease);
}

.category-trips-single-inner-wrap:hover .category-trip-fig img{
  transform: scale(1.07);
}
.category-trips-single-inner-wrap:hover .category-trip-fig::after{
  opacity: 1;
}

.category-trip-content-wrap{
  padding: 20px 22px 22px;
}

.category-trip-title a{
  transition: color .25s var(--enc-ease);
}
.category-trips-single-inner-wrap:hover .category-trip-title a{
  color: var(--enc-coral-deep);
}

.category-trip-desti, .wpte-trip-meta{
  color: var(--enc-emerald-deep);
  font-weight: 600;
}

.category-trip-viewmre-btn, a.category-trip-viewmre-btn{
  color: var(--enc-coral-deep);
  font-weight: 700;
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--enc-ease), gap .25s var(--enc-ease);
}
.category-trip-viewmre-btn:hover{
  border-color: var(--enc-coral-deep);
}

/* ==========================================================================
   5. DESTINATION CARDS
   ========================================================================== */

.wpte-trip-category{
  border-radius: var(--enc-radius-md);
  overflow: hidden;
  box-shadow: var(--enc-shadow-card);
  transition: transform .4s var(--enc-ease), box-shadow .4s var(--enc-ease);
}
.wpte-trip-category:hover{
  transform: translateY(-6px);
  box-shadow: var(--enc-shadow-card-hover);
}

.wpte-trip-category-img-wrap{
  position: relative;
  overflow: hidden;
}
.wpte-trip-category-img-wrap img{
  transition: transform .6s var(--enc-ease);
}
.wpte-trip-category:hover .wpte-trip-category-img-wrap img{
  transform: scale(1.08);
}

.wpte-trip-category-overlay{
  background: linear-gradient(180deg, rgba(var(--enc-shadow-rgb),0) 30%, rgba(var(--enc-shadow-rgb),.72) 100%) !important;
  transition: background .4s var(--enc-ease);
}

.wpte-trip-category-title{
  color: var(--enc-ink);
  font-family: var(--enc-font-display);
}
/* only the plugin's own dark-scrim card variant (.style-1) should get
   white text -- everything else sits on a plain card background */
.wpte-trip-category.style-1 .wpte-trip-category-title{
  color: var(--enc-white) !important;
}

.wpte-trip-cat-btn{
  border: 1px solid rgba(255,255,255,.6);
  color: var(--enc-white);
  border-radius: var(--enc-radius-pill);
  transition: background-color .25s var(--enc-ease), border-color .25s var(--enc-ease), color .25s var(--enc-ease);
}
.wpte-trip-cat-btn:hover{
  background: var(--enc-coral);
  border-color: var(--enc-coral);
  color: var(--enc-ink);
}

.trip-count{ color: var(--enc-coral-soft); }

/* swiper arrows */
.wpte-swiper-button-prev, .wpte-swiper-button-next{
  background: var(--enc-paper);
  color: var(--enc-ink);
  box-shadow: var(--enc-shadow-card);
  transition: background-color .25s var(--enc-ease), color .25s var(--enc-ease), transform .25s var(--enc-ease);
}
.wpte-swiper-button-prev:hover, .wpte-swiper-button-next:hover{
  background: var(--enc-coral);
  color: var(--enc-white);
  transform: scale(1.06);
}

/* ==========================================================================
   6. BLOG CARDS
   ========================================================================== */

.meafe-blog-card-inner{
  background: var(--enc-paper);
  border-radius: var(--enc-radius-md);
  overflow: hidden;
  box-shadow: var(--enc-shadow-card);
  transition: transform .4s var(--enc-ease), box-shadow .4s var(--enc-ease);
}
.meafe-blog-card:hover .meafe-blog-card-inner{
  transform: translateY(-6px);
  box-shadow: var(--enc-shadow-card-hover);
}
.meafe-blog-card .meafe-entry-media{
  overflow: hidden;
  margin: 0;
}
.meafe-blog-card .meafe-entry-media img{
  transition: transform .6s var(--enc-ease);
}
.meafe-blog-card:hover .meafe-entry-media img{
  transform: scale(1.07);
}
.meafe-blog-button, .meafe-post-elements-readmore-btn{
  color: var(--enc-coral-deep);
  font-weight: 700;
}
.meafe-blog-wrapper .meafe-blog-button.read-more a{
  color: var(--enc-coral-deep) !important;
}
.meafe-blog-wrapper .meafe-entry-wrapper.category--main .category--wrapper a,
.meafe-blog-wrapper .category--wrapper a{
  color: var(--enc-emerald-deep) !important;
}
.meafe-blog-wrapper .category--wrapper span{
  color: var(--enc-ink-soft) !important;
}
.meafe-load-more-button-wrap .meafe-load-more-button{
  background-color: var(--enc-coral-deep) !important;
  color: var(--enc-white) !important;
}
.meafe-blog-wrapper.layout-5 .meafe-posted-on-wrapper{
  background-color: var(--enc-ink) !important;
  color: var(--enc-white) !important;
}

/* ==========================================================================
   7. REVIEWS (homepage guest-reviews band)
   Markup lives in mu-plugins/ench-homepage-reviews.php -- that file outputs
   HTML only now, no inline <style>. All of its styling lives here so there
   is exactly one place that owns this component's look.
   ========================================================================== */

.ench-reviews{
  padding: 64px 16px 12px;
  background: var(--enc-paper);
}
.ench-reviews-inner{ max-width: 1200px; margin: 0 auto; }
.ench-reviews-head{ text-align: center; margin-bottom: 32px; }
.ench-reviews-head h2{
  color: var(--enc-ink);
  font-family: var(--enc-font-display);
  font-size: 30px;
  margin: 0 0 8px;
}
.ench-reviews-head p{ color: var(--enc-ink-soft); font-size: 15px; margin: 0; }
.ench-reviews-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.ench-review-card{
  background: var(--enc-paper);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-md);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: var(--enc-shadow-card);
  transition: transform .35s var(--enc-ease), box-shadow .35s var(--enc-ease);
}
.ench-review-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--enc-shadow-card-hover);
}
.ench-review-stars{ color: var(--enc-coral-deep); letter-spacing: 2px; font-size: 15px; }
.ench-review-card p.ench-review-text{ margin: 0; color: var(--enc-ink-soft); font-size: 14px; line-height: 1.6; flex: 1; }
.ench-review-meta{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.ench-review-name{ font-weight: 700; color: var(--enc-ink); }
.ench-review-trip{ color: var(--enc-emerald-deep); font-weight: 600; text-decoration: none; }
.ench-review-trip:hover{ text-decoration: underline; }

/* ==========================================================================
   8. TRUST STRIP
   A light proof band between page content and the dark footer -- pill chips
   + dot-marker trust items, elevated off the mist background so the
   emerald/coral accents keep reading the way they do on the rest of the
   site (fusing it into the dark footer would flatten the whole bottom of
   every page into one near-black mass under this palette).
   Markup lives in mu-plugins/ench-footer-trust-strip.php -- HTML only.
   ========================================================================== */

.ench-fstrip{
  background: var(--enc-mist);
  margin: 0;
  padding: 34px 16px;
}
.ench-fstrip-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.ench-fstrip-tools{ display: flex; flex-wrap: wrap; gap: 10px; }
.ench-fstrip-tools a{
  background: var(--enc-paper);
  color: var(--enc-ink);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-pill);
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(var(--enc-shadow-rgb),.05);
  transition: background-color .2s var(--enc-ease), border-color .2s var(--enc-ease), color .2s var(--enc-ease), transform .2s var(--enc-ease);
}
.ench-fstrip-tools a:hover{
  background: var(--enc-emerald-deep);
  border-color: var(--enc-emerald-deep);
  color: var(--enc-white);
  transform: translateY(-1px);
}
.ench-fstrip-trust{ display: flex; flex-wrap: wrap; gap: 24px; }
.ench-fstrip-trust span{
  color: var(--enc-ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ench-fstrip-trust span::before{
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--enc-emerald);
  flex: none;
}
@media (max-width: 782px){
  .ench-fstrip-inner{ justify-content: center; text-align: center; }
  .ench-fstrip-trust{ justify-content: center; }
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.site-footer{
  background: var(--enc-footer-ink);
  color: rgba(255,255,255,.68);
  margin: 0;
}
.site-footer .widget-title{
  font-family: var(--enc-font-display);
  color: var(--enc-white);
  position: relative;
  padding-bottom: 12px;
}
.site-footer .widget-title::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 28px; height: 3px;
  background: var(--enc-emerald);
  border-radius: 2px;
}
.site-footer a{
  color: rgba(255,255,255,.68);
  transition: color .25s var(--enc-ease);
}
.site-footer a:hover{
  color: var(--enc-emerald);
}
.footer-b{
  background: var(--enc-footer-ink-deep);
  border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer .footer-b .payments-showcase span{
  color: rgba(255,255,255,.6);
}
.site-footer .footer-b .payments-showcase span::before{
  background: var(--enc-emerald) !important;
}

/* ==========================================================================
   10. BUTTONS (generic Elementor + WTE)
   ========================================================================== */

.elementor-button, .button, .btn-primary{
  font-family: var(--enc-font-body);
  font-weight: 700;
  border-radius: var(--enc-radius-pill);
  transition: transform .25s var(--enc-ease), box-shadow .25s var(--enc-ease), background-color .25s var(--enc-ease);
}
.elementor-button:hover, .button:hover, .btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(var(--enc-shadow-rgb),.4);
}

/* keyboard focus visibility across the new interactive surfaces */
.category-trips-single-inner-wrap a:focus-visible,
.wpte-trip-category a:focus-visible,
.meafe-blog-card a:focus-visible,
.primary-menu-container a:focus-visible,
.btn-book:focus-visible,
.wpte-trip-cat-btn:focus-visible{
  outline: 2px solid var(--enc-coral-deep);
  outline-offset: 2px;
}

/* ==========================================================================
   11. TRIP SINGLE PAGE — gallery, sticky tabs, facts, itinerary, FAQ
   ========================================================================== */

.wte-trip-image-gal-popup-trigger{
  background: var(--enc-ink);
  color: var(--enc-white) !important;
  border-radius: var(--enc-radius-pill);
  padding: 10px 18px;
  font-weight: 700;
  transition: background-color .25s var(--enc-ease), transform .25s var(--enc-ease);
  display: inline-block;
}
.wte-trip-image-gal-popup-trigger:hover{
  background: var(--enc-coral-deep);
  transform: translateY(-1px);
}

.wte-trip-facts{
  background: var(--enc-paper);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-md);
  box-shadow: var(--enc-shadow-card);
}
.wte-trip-facts .icon-holder{
  color: var(--enc-coral-deep);
}
.trip-facts-text label{
  color: var(--enc-ink-soft);
  font-weight: 600;
}
.trip-facts-text .value, .trip-facts-taxonomy{
  color: var(--enc-ink);
  font-weight: 700;
}

.wpte-tabs-container{
  border-bottom: 1px solid var(--enc-border);
}
.nav-tab-wrapper{
  background: var(--enc-paper);
}
.nav-tab{
  font-family: var(--enc-font-body);
  font-weight: 600;
  color: var(--enc-ink-soft);
  position: relative;
  transition: color .25s var(--enc-ease);
}
.nav-tab::after{
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 3px;
  background: var(--enc-coral);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s var(--enc-ease);
  border-radius: 3px 3px 0 0;
}
.nav-tab.nav-tab-active, .nav-tab[aria-selected="true"]{
  color: var(--enc-ink);
}
.nav-tab.nav-tab-active::after, .nav-tab[aria-selected="true"]::after{
  transform: scaleX(1);
}
.nav-tab:hover{ color: var(--enc-coral-deep); }

/* itinerary accordion */
.wte-trip-itinerary-v2 .itinerary-row{
  background: var(--enc-paper);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .3s var(--enc-ease);
}
.wte-trip-itinerary-v2 .itinerary-row.active{
  box-shadow: var(--enc-shadow-card);
  border-color: var(--enc-coral-soft);
}
.wte-itinerary-head-wrap{
  cursor: pointer;
  min-height: 44px;
  box-sizing: border-box;
}
.wte-itinerary-head-wrap .title{
  color: var(--enc-coral-deep);
  font-weight: 700;
}
.itinerary-title{
  font-family: var(--enc-font-display);
  color: var(--enc-ink);
}
.custom-toggle-tabs{
  transition: transform .3s var(--enc-ease);
  color: var(--enc-coral-deep);
}
.accordion-tabs-toggle.active .custom-toggle-tabs,
.custom-toggle-tabs.open{
  transform: rotate(180deg);
}

/* FAQ accordion */
.wpte-faq-section-title{
  font-family: var(--enc-font-display);
  color: var(--enc-ink);
}
.wpte-faq-item{
  background: var(--enc-paper);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
}
.wpte-faq-question{
  cursor: pointer;
  font-weight: 700;
  color: var(--enc-ink);
  transition: color .2s var(--enc-ease);
}
.wpte-faq-question:hover{ color: var(--enc-coral-deep); }
.wpte-faq-icon{ color: var(--enc-coral-deep); transition: transform .3s var(--enc-ease); }
.wpte-faq-item.active .wpte-faq-icon, .wpte-faq-item[aria-expanded="true"] .wpte-faq-icon{
  transform: rotate(45deg);
}
.wpte-faq-expand-all, .faq-button-label{
  color: var(--enc-coral-deep);
  font-weight: 700;
}

/* related trips + map toggle */
.wte-related-trips-wrapper .wte-related-trips__heading, .ench-related-trip-title{
  font-family: var(--enc-font-display);
  color: var(--enc-ink);
}
.trip-map-wrapper .toggle-map{
  background: var(--enc-ink);
  color: var(--enc-white) !important;
  border-radius: var(--enc-radius-pill);
  font-weight: 700;
  transition: background-color .25s var(--enc-ease);
}
.trip-map-wrapper .toggle-map:hover{
  background: var(--enc-coral-deep);
}

/* trip title + breadcrumb */
.entry-header .entry-title{
  font-family: var(--enc-font-display);
}
.travel-monster-breadcrumbs{
  color: var(--enc-ink-soft);
}
.travel-monster-breadcrumbs a{
  color: var(--enc-emerald-deep);
}

/* ==========================================================================
   12. ARCHIVE / LISTING PAGES (trip archive, destination, activities)
   ========================================================================== */

.page-header-wrap{
  background: var(--enc-mist);
  border-bottom: 1px solid var(--enc-border);
}
.page-header-wrap .page-title{
  font-family: var(--enc-font-display);
  color: var(--enc-ink);
}
.archive-description{
  color: var(--enc-ink-soft);
}

.wpte-toolbar-container{
  background: var(--enc-paper);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-md);
  box-shadow: var(--enc-shadow-card);
}

.wpte-trip-search-input input{
  font-family: var(--enc-font-body);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-sm);
  transition: border-color .2s var(--enc-ease);
}
.wpte-trip-search-input input:focus{
  border-color: var(--enc-coral-deep);
  outline: none;
}

.wte-filterby-dropdown .wpte__input{
  color: var(--enc-ink);
  font-weight: 600;
}
.wpte__select-options{
  background: var(--enc-paper);
  border: 1px solid var(--enc-border);
  box-shadow: var(--enc-shadow-card);
}
.wpte__select-options li:hover, .wpte__select-options li.selected{
  background: var(--enc-mist);
  color: var(--enc-coral-deepest);
}

/* pagination, in case any archive paginates */
.page-numbers{
  font-family: var(--enc-font-body);
  font-weight: 600;
  color: var(--enc-ink-soft);
  border-radius: var(--enc-radius-pill);
  transition: background-color .2s var(--enc-ease), color .2s var(--enc-ease);
}
.page-numbers.current, .page-numbers:hover{
  background: var(--enc-coral-deep);
  color: var(--enc-white);
}
/* breathing room before the trust strip / footer band that follows */
.wte-search-load-more{
  margin-bottom: 48px;
}
/* ==========================================================================
   13. MOBILE HEADER, MENU, SEARCH — refinement pass
   ========================================================================== */

/* The mobile off-canvas menu panel and the closed mobile header bar are
   intentionally left untouched here -- they keep the parent theme's
   original background, colors, dividers, spacing and icon styling,
   per explicit request (2026-08-30 mobile menu revert). Only the search
   popup panel below still gets its dark-text bugfix, which is unrelated
   to visual styling. */

.search-modal, .header-search-inner{
  background: var(--enc-paper);
}
.search-form .search-field{
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-sm);
  font-family: var(--enc-font-body);
  color: var(--enc-ink);
}
.search-form .search-field:focus{
  border-color: var(--enc-coral-deep);
  outline: none;
}
/* The mobile header's search popup reuses this same white panel
   (.search-modal / .header-search-inner, set above), but the parent
   theme carries a higher-specificity rule scoped to that mobile context
   that force-colors the typed text white (it was written for the old
   colored bar background). On our white panel that made anything typed
   invisible. Force it back to dark text + a visible placeholder here. */
.mobile-header .mobile-header-b .search-toggle-form .search-form input[type="search"]{
  color: var(--enc-ink) !important;
}
.mobile-header .mobile-header-b .search-toggle-form .search-form input[type="search"]::placeholder{
  color: var(--enc-ink-soft) !important;
  opacity: 1;
}

/* That dark-text fix above (and the white search-panel background near the top
   of this section) is meant for the DESKTOP full-screen search overlay, where
   the popup really is a white panel. This same "search-toggle-form" markup is
   also reused for the small inline search bar sitting directly in the teal
   mobile header row -- there it was never a white panel, so the override was
   painting a light box over the bar (hiding the search button) and forcing
   dark text where the parent theme's original white text belongs. Undo both
   for that specific mobile context only (2026-08-30 search bar fix). */
.mobile-header .mobile-header-b .search-toggle-form .header-search-inner{
  background: transparent;
}
.mobile-header .mobile-header-b .search-toggle-form .search-form input[type="search"]{
  color: var(--white-color) !important;
}
.mobile-header .mobile-header-b .search-toggle-form .search-form input[type="search"]::placeholder{
  color: rgba(255,255,255,.5) !important;
  opacity: 1;
}

/* The parent theme centers this submit icon with "top:50%; transform:translateY(-50%)"
   (see the generic "header .search-toggle-form input[type=submit]" rule), then the same
   parent theme's own mobile-context rule shrinks it to 15x15 and repositions it to
   "top:6px" WITHOUT clearing that inherited transform -- so the icon still gets shifted
   by half of ITS OWN height on top of the 6px offset, landing low and half-clipped by
   the header's bottom edge instead of sitting level with the placeholder text. Redeclare
   every relevant property here so the icon is fully self-contained and reliably centered
   (2026-08-31 search icon alignment fix). */
.mobile-header .mobile-header-b .search-toggle-form .search-form input[type="submit"]{
  position: absolute;
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  height: 15px;
  width: 15px;
  padding: 0;
  border: none;
  font-size: 0;
  line-height: 0;
  background-color: transparent;
  background-image: none;
  background: var(--white-color);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 15px;
  mask-size: 15px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 512 512'%3E%3Cpath d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 512 512'%3E%3Cpath d='M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z'/%3E%3C/svg%3E");
}
/* room for the icon above + a touch more breathing space before the placeholder text */
.mobile-header .mobile-header-b .search-toggle-form .search-form{
  padding: 0 0 0 22px;
}

.search-form .search-submit{
  background: var(--enc-coral-deep);
  color: var(--enc-white);
  border: none;
  border-radius: var(--enc-radius-pill);
  font-weight: 700;
  min-height: 44px;
  transition: background-color .25s var(--enc-ease);
}
.search-form .search-submit:hover{
  background: var(--enc-coral-deepest);
}

/* small-screen density: tighten card padding, keep type readable */
@media (max-width: 767px){
  .category-trip-content-wrap{
    padding: 16px 16px 18px;
  }
  .travel-monster__search-section .elementor-widget-heading .elementor-heading-title{
    font-size: clamp(28px, 8vw, 36px);
  }
  .wpte-trip-facts{
    padding: 14px;
  }
  .ench-sticky-bar{
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
  .btn-book, .wpte-trip__search-submit, .ench-sticky-btn, .ench-enquiry-btn{
    min-height: 44px;
  }
}
/* ==========================================================================
   14. GLOBAL FOCUS-VISIBLE RESTORATION
   Several parent-theme/plugin base styles strip outline on :focus with no
   replacement at all (every text input/select/textarea, every button/submit,
   header contact links, pagination, the WhatsApp widget, the "read more"
   unfold button). Restore a visible keyboard-focus indicator everywhere,
   scoped to :focus-visible so mouse/touch interaction stays visually quiet.
   ========================================================================== */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
[type="button"]:focus-visible,
[type="submit"]:focus-visible,
a:focus-visible,
.qlwapp__button:focus-visible,
.wpr-unfold-btn:focus-visible,
.page-numbers:focus-visible,
.flatpickr-current-month .flatpickr-monthDropdown-months:focus-visible{
  outline: 2px solid var(--enc-coral-deep) !important;
  outline-offset: 2px !important;
}
/* on dark surfaces (footer, trust strip, header contact bar over the hero)
   swap to the lighter gold so the ring stays clearly visible */
.site-footer a:focus-visible,
.ench-fstrip-tools a:focus-visible,
.ench-fstrip-trust a:focus-visible,
.header-layout-1 .contact-email-wrap a:focus-visible,
.header-layout-1 .contact-phone-wrap a:focus-visible,
.header-layout-3 .contact-email-wrap a:focus-visible,
.header-layout-3 .contact-phone-wrap a:focus-visible,
.header-layout-5 .contact-email-wrap a:focus-visible,
.header-layout-5 .contact-phone-wrap a:focus-visible{
  outline: 2px solid var(--enc-coral-soft) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   15. BLOG POST CTA & RELATED POSTS
   Markup lives in mu-plugins/ench-blog-post-cta.php -- HTML only, no inline
   <style>. Moved here from that file so the design system stays in one
   place instead of scattered across mu-plugin inline blocks.
   ========================================================================== */

.ench-blog-cta{
  background: var(--enc-mist);
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-md);
  padding: 22px 24px;
  margin: 32px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ench-blog-cta-text h3{
  margin: 0 0 4px;
  color: var(--enc-ink);
  font-family: var(--enc-font-display);
  font-size: 18px;
}
.ench-blog-cta-text p{ margin: 0; color: var(--enc-ink-soft); font-size: 14px; }
.ench-blog-cta-btn{
  background: var(--enc-coral);
  color: var(--enc-white);
  padding: 12px 22px;
  border-radius: var(--enc-radius-pill);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s var(--enc-ease), transform .25s var(--enc-ease);
}
.ench-blog-cta-btn:hover{
  background: var(--enc-coral-deep);
  transform: translateY(-1px);
}
.ench-related-wrap{ margin: 32px 0 8px; }
.ench-related-wrap h3{
  color: var(--enc-ink);
  font-family: var(--enc-font-display);
  font-size: 18px;
  margin: 0 0 14px;
}
.ench-related-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.ench-related-card{
  display: block;
  border: 1px solid var(--enc-border);
  border-radius: var(--enc-radius-md);
  overflow: hidden;
  text-decoration: none;
  background: var(--enc-paper);
  box-shadow: var(--enc-shadow-card);
  transition: transform .3s var(--enc-ease), box-shadow .3s var(--enc-ease);
}
.ench-related-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--enc-shadow-card-hover);
}
.ench-related-card img{ width: 100%; height: 110px; object-fit: cover; display: block; }
.ench-related-noimg{ width: 100%; height: 110px; background: var(--enc-mist); }
.ench-related-card span{
  display: block;
  padding: 10px 12px;
  color: var(--enc-ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
@media(max-width:600px){
  .ench-blog-cta{ flex-direction: column; text-align: center; }
}

/* ==========================================================================
   16. FULL-WIDTH ELEMENTOR HTML BLOCKS (custom-built content pages)
   Several content pages (About Us, etc.) are authored as a single Elementor
   "HTML" widget holding raw markup, inside an Elementor Container set to
   "Full Width". That widget doesn't reliably stretch to the container's full
   width on its own, so its own background (meant to run edge-to-edge, with
   an inner max-width wrapper for readable text) ends up shrink-wrapped to
   its content instead -- a plain white gap on wide screens where the
   container's own background should be. Force the widget (and its default
   Elementor wrapper) to actually fill the full-width container.
   ========================================================================== */
.e-con.e-con-full > .elementor-widget-html,
.e-con.e-con-full > .elementor-widget-html > .elementor-widget-container{
  width: 100%;
}