/* ==========================================================================
   Yalla Thailand - brand layer (loaded last on every page)
   Palette: Tropical Green #4F8A5B | Mango Orange #FF8A3D | Warm Sand #D9C5A3
            Cream #F7F2E8 | White #FFFFFF | Charcoal #222222
   ========================================================================== */
:root{
  --yt-green:#4F8A5B; --yt-green-d:#2F5D3A; --yt-forest:#1C3B28; --yt-forest-d:#132A1C;
  --yt-mango:#FF8A3D; --yt-mango-d:#E9702A; --yt-mango-l:#FFE3CF;
  --yt-sand:#D9C5A3; --yt-sand-l:#EADFC9; --yt-cream:#F7F2E8; --yt-cream-2:#FBF8F2;
  --yt-white:#FFFFFF; --yt-ink:#222222;
  --yt-brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C38 5.2 84 3.6 128 4.6c24 .5 47 2 69 4.2-27-.6-58-.9-88-.2-36 .8-71 2.9-106 6.1z' fill='%23FF8A3D'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
html,body{ background-color:var(--yt-cream) !important; }
body{ color:var(--yt-ink); }
::selection{ background:var(--yt-mango); color:#fff; }
:focus-visible{ outline:2px solid var(--yt-mango) !important; outline-offset:3px; }
a{ text-decoration-color:var(--yt-mango); }
html{ scrollbar-color:var(--yt-green) var(--yt-cream); }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--yt-cream); }
::-webkit-scrollbar-thumb{ background:var(--yt-green); border-radius:20px; border:3px solid var(--yt-cream); }
::-webkit-scrollbar-thumb:hover{ background:var(--yt-green-d); }

/* ---------- navigation: charcoal menu (owner's choice), light logo, mango accents ---------- */
html body .main-menu-div {
    background: linear-gradient(180deg, #000, rgb(255 255 255 / 0%) 60%), linear-gradient(270deg, #000 0%, #673d21e3 45%, #000 100%) !important;
    border-bottom: 1px solid rgba(47, 93, 58, .18) !important;
    box-shadow: 0 10px 30px -14px rgba(60, 45, 20, .45) !important;
}
html body .main-menu-div .navbar .nav-link,
html body .main-menu-div .right-src a{ color:#F7F2E8 !important; text-shadow:none !important; font-weight:600 !important; }
html body .main-menu-div .navbar .nav-link:hover,
html body .main-menu-div .navbar .nav-link.active{ color:#FFB37A !important; text-shadow:none !important; }
html body .main-menu-div .navbar .nav-link::after{ background:#FF8A3D !important; height:3px !important; }
html body .main-menu-div .navbar .nav-link{ border-bottom:0 !important; }
html body .main-menu-div .navbar-toggler{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,139,61,.45) !important; }
html body .main-menu-div .navbar-toggler i{ color:#ff8b3d !important; }

/* ---------- section headings: charcoal text + hand-painted mango brush ---------- */
.comon-head-m{ color:var(--yt-ink); }
.comon-head-m:after{
  background-image:var(--yt-brush) !important;
  background-repeat:no-repeat !important; background-size:100% 100% !important;
  width:150px !important; height:12px !important; bottom:-16px !important;
}
.why-choose-divs1 .comon-head-m:after,
.inside-nms .comon-head-m:after{ background-image:var(--yt-brush) !important; }
.cm-sub-head,.sub-textb{ color:var(--yt-mango-d) !important; }

/* ---------- "planning a vacation" band: was a flat orange photo -> tropical green ---------- */
.why-choose-divs1{
  background:
    radial-gradient(1200px 500px at 85% -10%,rgba(255,138,61,.20),transparent 60%),
    radial-gradient(900px 600px at 0% 110%,rgba(217,197,163,.22),transparent 60%),
    linear-gradient(135deg,#2F5D3A 0%,#3F7A4C 45%,#4F8A5B 100%) !important;
  color:#fff;
  overflow:hidden;
}
.why-choose-divs1::before{ /* soft palm-leaf texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M60 112C58 80 50 52 22 30c22 6 34 22 40 46 2-30 14-50 38-60-18 18-28 46-30 96z' fill='%23F7F2E8'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
.why-choose-divs1 > *{ position:relative; }
.why-choose-divs1 h5,.why-choose-divs1 .cm-sub-head{ color:#FFD2B3 !important; }
.why-choose-divs1 .let-bnt{
  background:var(--yt-mango) !important; color:#fff !important; border:0 !important;
  border-radius:999px !important; padding:12px 30px !important; font-weight:700;
  box-shadow:0 12px 26px -10px rgba(255,138,61,.75);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.why-choose-divs1 .let-bnt:hover{ background:var(--yt-mango-d) !important; transform:translateY(-2px); }

/* ---------- generic template buttons ---------- */
.show-btn1,.let-bnt{ border-radius:999px; }
.btn-primary,.btn-warning{
  background-color:var(--yt-mango) !important; border-color:var(--yt-mango) !important; color:#fff !important;
}
.btn-primary:hover,.btn-warning:hover{ background-color:var(--yt-mango-d) !important; border-color:var(--yt-mango-d) !important; }
.btn-success{ background-color:var(--yt-green) !important; border-color:var(--yt-green) !important; }

/* ---------- footer: deep forest, sand dividers ---------- */
footer .footer-link-div{ background:var(--yt-forest-d) !important; }
footer .footer-link-div a:hover{ color:var(--yt-mango) !important; }

/* ---------- forms ---------- */
input:focus,textarea:focus,select:focus{ border-color:var(--yt-green) !important; box-shadow:0 0 0 3px rgba(79,138,91,.18) !important; }
input[type=checkbox],input[type=radio]{ accent-color:var(--yt-green); }

/* intro subtitles (style.css sets them mango) -> deep green */
.ab-top-m2 h6{ color:#2F5D3A !important; }

/* near-black "choose your city/hotel" map band -> forest gradient; white top band -> cream */
.all-city-cover{ background:url(../images/bg-map-2.png) no-repeat right center,linear-gradient(135deg,#132A1C,#1C3B28 55%,#2F5D3A) !important; }
.imagagine-div{ background:#F7F2E8 !important; }
/* bootstrap accordion (FAQ) on-brand */
.accordion-button:not(.collapsed){ color:#2F5D3A; background-color:#F7F2E8; }
.accordion-button:focus{ border-color:#4F8A5B; box-shadow:0 0 0 3px rgba(79,138,91,.18); }

/* logo badge: cool grey tint -> warm sand */
/* new logo (green + mango): sits on a soft cream pill over the green nav */
html body .brand-pill{ background:transparent !important; box-shadow:none !important; padding:2px 6px !important; }
html body .brand-logo-img{ height:clamp(48px,5.4vw,62px) !important; max-height:none !important; width:auto !important; }
@media (max-width:767px){ html body .brand-logo-img{ height:48px !important; } }
footer .comon-footer-div > a img, footer .comon-footer-div img[src*="yalla-logo"]{ max-width:210px; height:auto; }

/* nav social buttons: brand pair instead of facebook-blue / instagram-gradient */
html body .social-btn.social-facebook,
html body .social-btn.social-instagram{
  color:#fff !important; border:2px solid rgba(255,255,255,.55) !important;
  box-shadow:0 8px 18px -8px rgba(19,42,28,.55) !important;
  transition:transform .25s ease, filter .25s ease;
}
html body .social-btn.social-facebook{ background:#4F8A5B !important; }
html body .social-btn.social-instagram{ background:#FF8A3D !important; }
html body .social-btn.social-facebook i,
html body .social-btn.social-instagram i,
html body .social-btn.social-facebook svg,
html body .social-btn.social-instagram svg{ color:#fff !important; fill:#fff !important; }
html body .social-btn.social-facebook:hover,
html body .social-btn.social-instagram:hover{ transform:translateY(-2px); filter:brightness(.92); }
/* nav whatsapp (replaced the nav facebook button) */
html body .social-btn.social-whatsapp{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  background:#4F8A5B !important; color:#fff !important; border:2px solid rgba(255,255,255,.55) !important;
  box-shadow:0 8px 18px -8px rgba(19,42,28,.55) !important; transition:transform .25s ease, filter .25s ease;
}
html body .social-btn.social-whatsapp i{ color:#fff !important; font-size:1.15em; }
html body .social-btn.social-whatsapp:hover{ transform:translateY(-2px); filter:brightness(.92); }

/* nav fits on one row between 1100-1399px (was wrapping the logo to a 2nd row) */
@media (min-width:992px) and (max-width:1399px){
  html body .main-menu-div .container{ max-width:100% !important; padding-left:20px !important; padding-right:20px !important; }
  html body .main-menu-div .navbar .nav-link{ padding-left:clamp(6px,.7vw,12px) !important; padding-right:clamp(6px,.7vw,12px) !important; }
}

/* nav hover: black text + animated black underline (dot shoots right->left, draws line, elastic settle) */
html body .main-menu-div .navbar .nav-link{ position:relative !important; transition:transform .3s cubic-bezier(.22,.8,.24,1), color .2s !important; }
html body .main-menu-div .navbar .nav-link:hover,
html body .main-menu-div .navbar .nav-link:focus-visible,
html body .main-menu-div .navbar .nav-link.active{ color:#000 !important; text-shadow:none !important; }
html body .main-menu-div .navbar .nav-link:hover{ transform:translateY(-2px) !important; }
html body .main-menu-div .navbar .nav-link::after{ content:"" !important; display:block !important; position:absolute !important; right:12px !important; left:12px !important; bottom:3px !important;
  height:3px !important; border-radius:3px !important; background:#000 !important; transform:scaleX(0); transform-origin:right center !important; opacity:1 !important;
  transition:transform .35s cubic-bezier(.7,0,.2,1); will-change:transform; }
html body .main-menu-div .navbar .nav-link:hover::after{ transform:scaleX(1); }
html body .main-menu-div .navbar .nav-link::before{ content:""; position:absolute; right:12px; bottom:-0.5px; width:calc(100% - 24px); height:9px; pointer-events:none; opacity:0;
  background:radial-gradient(circle at calc(100% - 4px) 50%, #000 0 3.6px, rgba(0,0,0,0) 4.4px); will-change:transform,opacity; }
html body .main-menu-div .navbar .nav-link:hover::after,
html body .main-menu-div .navbar .nav-link:focus-visible::after{ animation:ytNavLine .7s cubic-bezier(.7,0,.2,1) forwards; }
html body .main-menu-div .navbar .nav-link:hover::before,
html body .main-menu-div .navbar .nav-link:focus-visible::before{ animation:ytNavDot .7s cubic-bezier(.7,0,.2,1) forwards; }
html body .main-menu-div .navbar .nav-link.active::after{ transform:scaleX(1); }
@keyframes ytNavLine{ 0%{ transform:scaleX(0); } 55%{ transform:scaleX(1.06); } 72%{ transform:scaleX(.97); } 86%{ transform:scaleX(1.015); } 100%{ transform:scaleX(1); } }
@keyframes ytNavDot{ 0%{ opacity:1; transform:translate3d(0,0,0) scale(1.3); } 55%{ opacity:1; transform:translate3d(calc(-100% + 8px),0,0) scale(1); } 70%{ opacity:1; transform:translate3d(calc(-100% + 8px),-7px,0) scale(1.15); } 100%{ opacity:0; transform:translate3d(calc(-100% + 8px),0,0) scale(.4); } }
@media (prefers-reduced-motion: reduce){ html body .main-menu-div .navbar .nav-link:hover::after{ animation:none !important; transform:scaleX(1) !important; } html body .main-menu-div .navbar .nav-link::before{ display:none; } }