/* =====================================================================
   World Booking (عالم الحجوزات) — brand layer from the Figma design.
   Logo identity: navy #21295A, ocean #1C476A, teal #16878A, gold #C9A83E.
   No black anywhere — dark tones use the logo navy. Font Cairo.
   ===================================================================== */
:root{
  --primary-color:#21295A;
  --secondary-color:#1C476A;
  --accent-color:#C9A83E;
  --dark-text:#21295A;
  --wb-navy:#21295A;
  --wb-ocean:#1C476A;
  --wb-teal:#16878A;
  --wb-gold:#C9A83E;
  --wb-gold-light:#E3CF94;
  --wb-navy-grad:linear-gradient(to right,#1C476A,#21295A);
  --bc-radius:20px;
}
input,select,textarea,option{ color:var(--wb-navy); }

/* Header — white bar, soft shadow, bigger logo */
.header,.header .header-container{ background:#fff !important; }
.header{ box-shadow:0 2px 2px rgba(100,100,100,.25); }
.header .site-logo img{ height:84px !important; width:auto !important; max-height:none !important; object-fit:contain; }
.header nav a,.header ul li a{ color:#21295A; font-weight:700; }
.header nav a:hover,.header ul li a:hover,
.header ul li.current-menu-item > a{ color:#C9A83E; }
.header .nav-actions .bc-btn,
.header .nav-actions a.btn,
.header .nav-actions .bc-book-btn{ background:var(--wb-navy-grad) !important; color:#fff !important; border:0 !important; border-radius:10px !important; }

/* Side-menu button — navy tile, gold border, three gold lines (RTL staggered) that morph into an X */
.wb-menu-btn{
  position:relative; width:54px; height:54px; padding:0; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--wb-navy-grad); border:1.5px solid var(--wb-gold); border-radius:14px;
  box-shadow:0 6px 18px rgba(33,41,90,.25); cursor:pointer; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.wb-menu-btn::before{ /* soft gold glow sweeping on hover */
  content:""; position:absolute; inset:-40% auto -40% -60%; width:50%;
  background:linear-gradient(90deg,transparent,rgba(227,207,148,.35),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.wb-menu-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(28,71,106,.35); }
.wb-menu-btn:hover::before{ left:120%; }
.wb-menu-btn:focus-visible{ outline:2px solid var(--wb-gold); outline-offset:3px; }
.wb-mb-lines{ position:relative; width:24px; height:18px; display:block; }
.wb-mb-lines i{
  position:absolute; right:0; height:2.5px; border-radius:3px; background:var(--wb-gold);
  transition:width .3s ease, transform .35s cubic-bezier(.6,.05,.3,1), top .35s ease, opacity .2s ease;
}
.wb-mb-lines i:nth-child(1){ top:0; width:24px; }
.wb-mb-lines i:nth-child(2){ top:7.75px; width:15px; background:var(--wb-gold-light); }
.wb-mb-lines i:nth-child(3){ top:15.5px; width:20px; }
.wb-menu-btn:hover .wb-mb-lines i{ width:24px; }
.wb-menu-btn.open .wb-mb-lines i:nth-child(1){ top:7.75px; width:24px; transform:rotate(45deg); }
.wb-menu-btn.open .wb-mb-lines i:nth-child(2){ opacity:0; width:0; }
.wb-menu-btn.open .wb-mb-lines i:nth-child(3){ top:7.75px; width:24px; transform:rotate(-45deg); }
@media (max-width:640px){ .wb-menu-btn{ width:46px; height:46px; border-radius:12px; } }

/* Hero — Figma overlay */
.bc-hero-overlay{ background:linear-gradient(to left,rgba(33,41,90,.9) 44.8%,rgba(28,71,106,.45) 72.2%) !important; opacity:1 !important; }
.bc-btn--accent{ background:#C9A83E; border-radius:10px; }
.bc-btn--outline-white{ border-radius:10px; border-width:1px; }

/* Cards — Figma radius / shadow */
.destinations .card,.destinations [class*="card"],
.bc-packages [class*="card"]{ border-radius:20px; }

/* Footer — photo + navy gradient like the design */
footer.footer{
  position:relative;
  background:#21295A url("../img/wb/world-booking-footer.jpg") center/cover no-repeat !important;
}
footer.footer::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to left,rgba(33,41,90,.95) 69%,rgba(33,41,90,.76));
}
footer.footer > *{ position:relative; z-index:1; }
footer.footer a.site-logo.footer-logo img{ height:150px !important; width:auto !important; max-height:none !important; max-width:none !important; }
footer.footer .icons img{ height:32px !important; width:auto !important; object-fit:contain; background:#fff; border-radius:6px; padding:3px; }
footer.footer button[type="submit"],footer.footer .newsletter button{ background:#C9A83E !important; color:#fff !important; }

/* Leftover default-black text */
.wb-menu-btn{ color:var(--wb-gold); }
.hz-close{ color:var(--wb-navy) !important; }