/* =========================================================
   WildRoute - Site Header  (DARK THEME — MINIMAL + P2R-SAFE)
   Location: assets/css/css-front/header.css

   01 Tokens
   02 Reset / base
   03 Loader
   04 Skip link
   05 Header bar
   06 Icon button
   07 Book button
   08 Account button
   09 Popovers (account only)
   10 Drawer (menu)
   11 Drawer language switcher
   12 Drawer notifications block
   13 Responsive
   14 Reduced motion
   15 Login button hard-lock
   ========================================================= */

/* =========================================================
   01. TOKENS
   ========================================================= */
:root{
  --wr-white:#FFFFFF;
  --wr-black:#050816;
  --wr-lime:#BAFF29;
  --wr-lime-hover:#A7EB12;
  --wr-hairline:rgba(255,255,255,.14);
  --wr-bg-soft:#0d1330;
  --wr-ink:#FFFFFF;
  --wr-ink-soft:#a7b0d0;
  --wr-ink-faint:#7f88a8;
  --wr-safe-top:env(safe-area-inset-top,0px);
  --wr-safe-bottom:env(safe-area-inset-bottom,0px);

  --hd-bg:#050816;
  --hd-card:#0d1330;
  --hd-card-2:#101838;
  --hd-ink:#ffffff;
  --hd-ink-2:#d8def2;
  --hd-ink-3:#a7b0d0;
  --hd-line:rgba(255,255,255,.14);
  --hd-line-2:rgba(255,255,255,.08);
  --hd-soft:rgba(255,255,255,.08);
  --hd-soft-2:rgba(255,255,255,.14);
  --hd-accent:#e8244f;
  --hd-grad:linear-gradient(135deg,#f2486b 0%,#e8244f 45%,#c70f3d 100%);
  --hd-ease:cubic-bezier(.22,.8,.2,1);
}

/* =========================================================
   02. RESET / BASE
   -----------------------------------------------------------
   IMPORTANT: no `overflow: hidden` on html/body here.
   Blocking overflow (or overscroll) kills pull-to-refresh.
   The menu-open scroll lock lives in dark-force.css and is
   scoped to `.wr-menu-open` only, never to the base page.
   ========================================================= */
.wr-header *,
.wr-drawer *{ box-sizing:border-box; }

.wr-header :focus-visible,
.wr-drawer  :focus-visible{
  outline:3px solid #7f9bff;
  outline-offset:3px;
}

/* =========================================================
   03. LOADER
   -----------------------------------------------------------
   The loader is fixed inset:0 and covers the entire viewport.
   After it hides, we must also make it `display:none` (the inline
   JS in header.php already does that) so it cannot sit above the
   page and eat the P2R gesture. The CSS below just makes sure
   it never accidentally stays in the layout.
   ========================================================= */
#wrLoader{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  background:#050816;
  transition:opacity .45s ease, visibility .45s ease;
  /* Allow P2R gesture to pass through once it hides */
  pointer-events:auto;
}
#wrLoader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#wrLoader[style*="display: none"],
#wrLoader[style*="display:none"]{
  display:none !important;
  pointer-events:none !important;
}

.wr-loader-brand{
  font-family:'Inter', system-ui, sans-serif;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.045em;
  color:#ffffff;
}
.wr-loader-bar{
  position:relative;
  width:128px;
  height:5px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.1);
}
.wr-loader-bar::after{
  content:'';
  position:absolute;
  top:0; bottom:0; left:0;
  width:42%;
  border-radius:inherit;
  background:var(--hd-grad);
  animation:wr-slide 1.1s var(--hd-ease) infinite;
}
@keyframes wr-slide{
  0%   { transform:translateX(-110%); }
  100% { transform:translateX(260%);  }
}

/* =========================================================
   04. SKIP LINK
   ========================================================= */
.wr-skip{
  position:absolute;
  left:12px;
  top:-60px;
  z-index:3000;
  padding:10px 16px;
  border-radius:999px;
  background:#ffffff;
  color:#0a1030;
  font:600 14px 'Inter', sans-serif;
  text-decoration:none;
  transition:top .18s ease;
}
.wr-skip:focus{ top:12px; }

/* =========================================================
   05. HEADER BAR
   ========================================================= */
.wr-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#0d1330;
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.7);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color:#ffffff;
}

.wr-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:min(1320px, 100%);
  margin-inline:auto;
  padding:calc(12px + env(safe-area-inset-top, 0px)) clamp(14px, 2.2vw, 28px) 12px;
}

.wr-left,
.wr-right{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.wr-brand{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  color:#ffffff;
  text-decoration:none;
  font-size:1.4rem;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
  white-space:nowrap;
}

/* =========================================================
   06. ICON BUTTON
   ========================================================= */
.wr-icon-btn{
  position:relative;
  display:inline-grid;
  place-items:center;
  width:46px;
  height:46px;
  flex-shrink:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#ffffff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  text-decoration:none;
  transition:background .18s ease, transform .18s var(--hd-ease);
}
.wr-icon-btn:hover{ background:rgba(255,255,255,.14); }
.wr-icon-btn:active{ transform:scale(.94); }
.wr-icon-btn[aria-expanded="true"]{
  background:#ffffff;
  color:#0a1030;
}
.wr-icon-btn svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* =========================================================
   07. BOOK BUTTON
   ========================================================= */
.wr-book{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  background:#2f5bff;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:.92rem;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:none !important;
  white-space:nowrap;
  box-shadow:0 8px 24px -12px rgba(47,91,255,.65);
  transition:background .18s ease, box-shadow .18s ease, transform .18s var(--hd-ease);
}
.wr-book:link,
.wr-book:visited,
.wr-book:hover,
.wr-book:active,
.wr-book:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-decoration:none !important;
}
.wr-book:hover{
  background:#1f44d6;
  box-shadow:0 8px 28px -10px rgba(47,91,255,.85);
}
.wr-book:active{ transform:scale(.97); }
.wr-book svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor !important;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wr-book span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

/* =========================================================
   08. ACCOUNT BUTTON
   ========================================================= */
.wr-account{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  padding:2px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#ffffff;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .18s ease, transform .18s var(--hd-ease);
}
.wr-account:hover{ background:rgba(255,255,255,.08); }
.wr-account:active{ transform:scale(.94); }

.wr-avatar{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--hd-grad);
  color:#fff;
  font-size:.9rem;
  font-weight:800;
}

.wr-account-text,
.wr-account-role,
.wr-account-chev{ display:none; }

/* =========================================================
   09. POPOVERS (account only)
   ========================================================= */
.wr-item{ position:relative; }

.wr-pop{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:1100;
  width:min(280px, calc(100vw - 24px));
  padding:8px;
  background:#101838;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  box-shadow:0 28px 60px -24px rgba(0,0,0,.85);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px) scale(.98);
  transform-origin:top right;
  pointer-events:none;
  transition:opacity .18s ease, transform .22s var(--hd-ease), visibility .18s ease;
  color:#ffffff;
  overscroll-behavior: contain;
}
.wr-pop.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
}
.wr-pop--sm{ width:min(240px, calc(100vw - 24px)); }

.wr-pop-title{
  padding:12px 14px 6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--hd-ink-3);
}
.wr-pop-sep{
  height:1px;
  margin:6px 10px;
  background:rgba(255,255,255,.08);
}

.wr-opt{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:11px 14px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#ffffff;
  font:inherit;
  font-size:.92rem;
  font-weight:600;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease;
}
.wr-opt:hover{ background:rgba(255,255,255,.08); }
.wr-opt svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  fill:none;
  stroke:var(--hd-ink-3);
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wr-opt:hover svg{ stroke:#ffffff; }

.wr-opt--danger{ color:#ff6b85; }
.wr-opt--danger svg{ stroke:#ff6b85; }
.wr-opt--danger:hover{ background:rgba(232,36,79,.14); }
.wr-opt--danger:hover svg{ stroke:#ff6b85; }

/* =========================================================
   10. DRAWER (MENU)
   ========================================================= */
.wr-backdrop{
  position:fixed;
  inset:0;
  z-index:1200;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
  overscroll-behavior: contain;
}
html.wr-menu-open .wr-backdrop{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.wr-drawer{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:1300;
  display:flex;
  flex-direction:column;
  width:min(360px, 88vw);
  padding:calc(14px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
  background:#0d1330;
  border-right:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.9);
  font-family:'Inter', system-ui, sans-serif;
  color:#ffffff;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior: contain;
  transform:translateX(-102%);
  visibility:hidden;
  transition:transform .35s var(--hd-ease), visibility .35s ease;
}
.wr-drawer.is-open{
  transform:none;
  visibility:visible;
}

.wr-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 4px 14px;
}
.wr-drawer-head .wr-brand{ color:#ffffff; }

.wr-drawer-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:4px 0;
}

.wr-link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 14px 8px 8px;
  border-radius:20px;
  color:#d8def2;
  font-size:.98rem;
  font-weight:600;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.wr-link-ico{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex-shrink:0;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  color:#ffffff;
  transition:background .15s ease, color .15s ease;
}
.wr-link-ico svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.wr-link:hover{
  background:rgba(255,255,255,.08);
  color:#ffffff;
}
.wr-link:hover .wr-link-ico{ background:rgba(255,255,255,.14); }
.wr-link.is-active{ color:#ffffff; }
.wr-link.is-active .wr-link-ico{
  background:var(--hd-grad);
  color:#fff;
  box-shadow:0 12px 24px -12px rgba(232,36,79,.7);
}

/* =========================================================
   11. DRAWER — language switcher
   ========================================================= */
.wr-drawer-section{
  margin-top:14px;
  padding:14px 4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.wr-drawer-section-title{
  margin:0 0 10px;
  padding:0 10px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hd-ink-3);
}
.wr-lang-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:0 4px;
}
.wr-lang-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(255,255,255,.06);
  color:#d8def2;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.wr-lang-pill:hover{
  background:rgba(255,255,255,.12);
  color:#ffffff;
}
.wr-lang-pill.is-current{
  background:#2f5bff;
  border-color:#2f5bff;
  color:#ffffff;
}
.wr-lang-code{
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.04em;
  opacity:.7;
}
.wr-lang-pill.is-current .wr-lang-code{ opacity:1; }

/* =========================================================
   12. DRAWER — notifications
   ========================================================= */
.wr-drawer-empty{
  margin:0;
  padding:0 14px;
  font-size:.85rem;
  color:var(--hd-ink-3);
}
.wr-drawer-note{
  display:block;
  padding:10px 14px;
  border-radius:12px;
  color:#ffffff;
  text-decoration:none;
  transition:background .15s ease;
}
.wr-drawer-note:hover{ background:rgba(255,255,255,.06); }
.wr-drawer-note-title{
  display:block;
  font-size:.9rem;
  font-weight:700;
}
.wr-drawer-note-text{
  display:block;
  margin-top:2px;
  font-size:.8rem;
  color:var(--hd-ink-2);
}
.wr-drawer-more{
  display:inline-block;
  margin-top:6px;
  padding:4px 14px;
  font-size:.82rem;
  font-weight:600;
  color:#8fa8ff;
  text-decoration:none;
}
.wr-drawer-more:hover{ color:#ffffff; }

.wr-drawer-foot{
  margin-top:auto;
  padding-top:14px;
}

.wr-promo{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-radius:24px;
  background:var(--hd-grad);
  color:#fff;
  isolation:isolate;
}
.wr-promo::before{
  content:'';
  position:absolute;
  z-index:-1;
  right:-50px;
  top:-60px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
}
.wr-promo strong{
  display:block;
  max-width:14ch;
  font-size:1.1rem;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.15;
  color:#fff;
}
.wr-promo a{
  display:inline-flex;
  align-items:center;
  height:40px;
  margin-top:14px;
  padding:0 18px;
  border-radius:999px;
  background:#0a1030;
  color:#ffffff;
  font-size:.85rem;
  font-weight:700;
  text-decoration:none;
}
.wr-promo a:hover{ background:#101838; }

.wr-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  background:#2f5bff;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:.9rem;
  font-weight:700;
  text-decoration:none !important;
  white-space:nowrap;
  transition:background .18s ease, transform .18s var(--hd-ease);
}
.wr-login:link,
.wr-login:visited,
.wr-login:hover,
.wr-login:active,
.wr-login:focus{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-decoration:none !important;
}
.wr-login:hover{ background:#1f44d6; }
.wr-login:active{ transform:scale(.97); }
.wr-login span{
  color:inherit !important;
  -webkit-text-fill-color:inherit !important;
}
.wr-drawer-login{
  display:flex;
  width:100%;
  margin-bottom:12px;
}

/* =========================================================
   13. RESPONSIVE
   ========================================================= */
@media (max-width:600px){
  .wr-bar{ gap:8px; }
  .wr-left,
  .wr-right{ gap:8px; }
  .wr-brand{ font-size:1.25rem; }
  .wr-icon-btn,
  .wr-account,
  .wr-book{ height:42px; }
  .wr-book{
    padding:0 16px;
    font-size:.88rem;
  }
  .wr-avatar{ width:38px; height:38px; }
  .wr-pop,
  .wr-pop--sm{
    left:12px;
    right:12px;
    width:auto;
    top:calc(100% + 8px);
    transform-origin:top center;
  }
}
@media (max-width:380px){
  .wr-book span{ display:none; }
  .wr-book{
    width:42px;
    padding:0;
  }
}

/* =========================================================
   14. REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  .wr-header *,
  .wr-drawer,
  .wr-backdrop,
  #wrLoader{
    transition-duration:.01ms !important;
  }
  .wr-loader-bar::after{
    animation:none;
    width:100%;
  }
}

/* =========================================================
   15. LOGIN BUTTON HARD-LOCK
   ========================================================= */
.wr-drawer .wr-login,
.wr-drawer a.wr-login,
.wr-drawer a.wr-login:link,
.wr-drawer a.wr-login:visited,
.wr-drawer a.wr-login:hover,
.wr-drawer a.wr-login:active,
.wr-drawer a.wr-login:focus,
body .wr-login,
body a.wr-login{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  background-color:#2f5bff !important;
  text-decoration:none !important;
}
.wr-drawer .wr-login:hover,
body a.wr-login:hover{
  background-color:#1f44d6 !important;
  color:#fff !important;
}
.wr-drawer .wr-login span,
body .wr-login span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}