/* =========================================================
   WHITEFOX2K – Header CSS
   Phase 5.2: Header-Layout aus Customizer/Elementor-Inline-CSS ausgelagert
   Quelle:
   - Customizer: generische Header-Ausrichtung + wf-header-row Layout
   - Elementor Header HTML-Widget: WF Header Redesign v3 Styles
   Hinweis:
   - Elementor Menu Cart Widget Custom CSS bleibt bewusst separat/unverändert.
   ========================================================= */

/* =========================================================
   1) Elementor Header Row + Widget Alignment
   ========================================================= */

/* =========================================================
   WHITEFOX – Header Generic Alignment (GTranslate entfernt)
   Hinweis: Nur generische Header-Ausrichtung bleibt erhalten.
   Alle GTranslate-/gt_-/googtrans-Selektoren wurden entfernt.
   ========================================================= */

header .e-con,
header .e-con-inner{ align-items:center !important; }

header .elementor-element-6950c7a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:14px !important;
  overflow:visible !important;
}

header .elementor-element-6950c7a > .elementor-element{
  display:flex !important;
  align-items:center !important;
}

/* =========================================================
   WHITEFOX – Header Row Layout (HTML + Menu Cart side-by-side)
   Container class: wf-header-row
   ========================================================= */

header.elementor-location-header .wf-header-row{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* HTML-Widget soll schrumpfen dürfen statt zu überlappen */
header.elementor-location-header .wf-header-row > .elementor-element:has(.wf-header){
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Menu Cart Widget bleibt “auto” und sitzt rechts */
header.elementor-location-header .wf-header-row > .elementor-widget-woocommerce-menu-cart{
  flex: 0 0 auto !important;
  margin-left: 10px !important;
  position: relative !important;
  z-index: 99999 !important;
}

/* Falls Elementor irgendwo width:100% auf Widgets knallt */
header.elementor-location-header .wf-header-row > .elementor-element{
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* =========================================================
   2) WHITEFOX2K – Header Redesign v3
   ========================================================= */

:root{
  --wf-bg:#030712;
  --wf-bg2:#061127;
  --wf-panel:#07152a;
  --wf-panel2:#0a1a34;
  --wf-border:rgba(120,170,255,.13);
  --wf-border-strong:rgba(120,170,255,.24);
  --wf-text:#f4f8ff;
  --wf-muted:rgba(214,225,255,.72);
  --wf-soft:rgba(214,225,255,.56);
  --wf-blue:#2e9fff;
  --wf-cyan:#7de5ff;
  --wf-gold:#f7c95e;

  --wf-wrap:1400px;
  --wf-header-h:96px;

  --wf-search-panel-bg:linear-gradient(180deg, rgba(10,25,50,.92), rgba(5,14,29,.95));
  --wf-search-input-bg:rgba(6,16,35,.96);
  --wf-dd-bg:rgba(6,14,28,.98);
  --wf-dd-border:rgba(255,255,255,.10);

  --wf-ico:rgba(125,229,255,.92);
  --wf-ico-strong:rgba(190,244,255,.98);
  --wf-ico-glow:rgba(46,159,255,.22);

  /* Layer-System */
  --wf-z-header:100;
  --wf-z-search:450;
  --wf-z-drawer:430;
  --wf-z-adminbar:2147483647;
}

/* =========================================================
   WP ADMIN BAR FIX
   ========================================================= */
html body.admin-bar #wpadminbar,
html body.admin-bar #wpadminbar .ab-top-menu,
html body.admin-bar #wpadminbar .ab-item,
html body.admin-bar #wpadminbar .ab-sub-wrapper,
html body.admin-bar #wpadminbar .menupop .ab-sub-wrapper,
html body.admin-bar #wpadminbar .quicklinks,
html body.admin-bar #wpadminbar .quicklinks .menupop ul{
  z-index:var(--wf-z-adminbar) !important;
}

/* =========================================================
   HEADER WRAPPER
   ========================================================= */
.wf-header{
  position:relative;
  width:100%;
  margin:0;
  background:transparent;
  border:0;
  overflow:visible;
  z-index:var(--wf-z-header);
  isolation:isolate;
}

.wf-header *{
  box-sizing:border-box;
}

.wf-header__inner{
  position:relative;
  width:100%;
  min-height:var(--wf-header-h);
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:26px;
  padding:14px 18px;
  overflow:visible;
}

.wf-header__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,25,50,.92), rgba(5,14,29,.95));
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index:0;
}

.wf-header__inner::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg, var(--wf-cyan), var(--wf-blue));
  pointer-events:none;
  z-index:1;
}

.wf-brand,
.wf-right{
  position:relative;
  z-index:2;
}

.wf-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding-left:2px;
}

.wf-brand__logo{
  width:54px;
  height:54px;
  display:block;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none;
  background:rgba(255,255,255,.02);
}

/* =========================================================
   RIGHT SIDE
   ========================================================= */
.wf-right{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  overflow:visible;
}

.wf-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
  padding:0;
  list-style:none;
  min-width:0;
  flex-wrap:nowrap;
  flex:1 1 auto;
}

.wf-nav li{
  margin:0;
  padding:0;
}

.wf-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  min-width:132px;
  padding:10px 16px;
  text-decoration:none;
  color:rgba(235,240,255,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:.18s ease;
  text-align:center;
}

.wf-nav a:hover{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(113,222,255,.26);
  background:rgba(75,163,255,.08);
}

.wf-nav-ico,
.wf-drawer-ico{
  width:15px;
  height:15px;
  display:inline-block;
  flex:0 0 auto;
  color:var(--wf-ico);
  filter:drop-shadow(0 0 10px var(--wf-ico-glow));
  transition:.18s ease;
}

.wf-nav a:hover .wf-nav-ico,
.wf-drawer__panel a:hover .wf-drawer-ico{
  color:var(--wf-ico-strong);
  filter:drop-shadow(0 0 14px rgba(40,190,255,.28));
}

/* =========================================================
   SHOP HIGHLIGHT
   ========================================================= */
.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"],
.wf-header .wf-nav a[href="/shop/"]{
  border-color:rgba(247,201,94,.24) !important;
  background:linear-gradient(135deg, rgba(247,201,94,.14), rgba(28,18,6,.82)) !important;
  color:#fff6d2 !important;
}

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"] .wf-nav-label,
.wf-header .wf-nav a[href="/shop/"] .wf-nav-label{
  background:linear-gradient(135deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,243,176,.95) 32%,
    rgba(255,211,90,.95) 65%,
    rgba(255,191,42,.98) 100%
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 10px rgba(255,210,90,.18);
}

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"] .wf-nav-ico,
.wf-header .wf-nav a[href="/shop/"] .wf-nav-ico{
  color:rgba(255,211,90,.95) !important;
  filter:drop-shadow(0 0 12px rgba(255,210,90,.20)) !important;
}

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"]:hover,
.wf-header .wf-nav a[href="/shop/"]:hover{
  border-color:rgba(247,201,94,.36) !important;
  background:linear-gradient(135deg, rgba(247,201,94,.18), rgba(28,18,6,.92)) !important;
}

/* =========================================================
   SEARCH
   ========================================================= */
.wf-search{
  width:min(620px, 34vw);
  min-width:360px;
  max-width:620px;
  position:relative;
  z-index:var(--wf-z-search);
  overflow:visible;
  flex:0 0 auto;
}

.wf-header .wfhs{
  position:relative;
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}

.wf-header .wfhs-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:0;
}

.wf-header .wfhs-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 14px;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(220,232,255,.64);
  font-weight:900;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}

.wf-header .wfhs-inputwrap{
  position:relative;
  width:100%;
  overflow:visible;
}

.wf-header .wfhs-input{
  width:100% !important;
  height:44px !important;
  padding:0 16px !important;
  border-radius:0 !important;
  background:rgba(6,16,35,.96) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:14px !important;
  outline:none !important;
  box-shadow:none !important;
}

.wf-header .wfhs-input::placeholder{
  color:rgba(203,211,255,.62) !important;
  font-style:italic !important;
}

.wf-header .wfhs-input:focus{
  border-color:rgba(113,222,255,.28) !important;
  background:rgba(7,18,39,.98) !important;
}

.wf-header .wfhs-btn{
  width:44px;
  height:44px;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.025) !important;
  box-shadow:none !important;
  border-radius:0 !important;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.18s ease;
}

.wf-header .wfhs-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.24) !important;
  background:rgba(75,163,255,.08) !important;
}

.wf-header .wfhs-icon{
  width:18px;
  height:18px;
  fill:currentColor;
  color:var(--wf-ico);
}

/* Dropdown */
.wf-header .wfhs-dropdown{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:calc(var(--wf-z-search) + 1) !important;
  background:var(--wf-dd-bg) !important;
  border:1px solid var(--wf-dd-border) !important;
  box-shadow:0 20px 45px rgba(0,0,0,.55) !important;
  overflow:hidden !important;
}

.wf-header .wfhs-dropdown[hidden]{
  display:none !important;
}

.wf-header .wfhs-list{
  list-style:none;
  margin:0;
  padding:6px 0;
  width:100%;
}

.wf-header .wfhs-item{
  width:100%;
}

.wf-header .wfhs-item > a{
  width:100%;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  text-decoration:none;
}

.wf-header .wfhs-item > a:hover{
  background:rgba(255,255,255,.05);
}

.wf-header .wfhs-thumb img{
  width:56px !important;
  height:56px !important;
  display:block;
  object-fit:cover !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.02) !important;
}

.wf-header .wfhs-text{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:4px 12px;
  min-width:0;
}

.wf-header .wfhs-title{
  grid-column:1 / 2;
  grid-row:1;
  font-weight:850;
  line-height:1.2;
  color:rgba(235,240,255,.95);
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wf-header .wfhs-meta{
  grid-column:1 / 3;
  grid-row:2;
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

.wf-header .wfhs-platform{
  font-size:12px;
  color:rgba(203,211,255,.72);
  white-space:nowrap;
}

.wf-header .wfhs-price{
  grid-column:2 / 3;
  grid-row:1;
  justify-self:end;
  font-weight:1000;
  white-space:nowrap;
  background:linear-gradient(135deg, #ffffff 0%, #fff3b0 35%, #ffd35a 70%, #ffbf2a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 10px rgba(255,210,90,.18);
}

.wf-header .wfhs-footer{
  padding:10px 12px 12px;
  border-top:1px solid rgba(148,163,184,.14);
  width:100%;
}

.wf-header .wfhs-all{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff !important;
  text-decoration:none !important;
  border:1px solid rgba(113,222,255,.20);
  background:linear-gradient(135deg, rgba(75,163,255,.15), rgba(7,16,34,.94));
  transition:.18s ease;
}

.wf-header .wfhs-all:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.40);
  background:linear-gradient(135deg, rgba(75,163,255,.26), rgba(7,16,34,.98));
}

/* =========================================================
   BURGER / DRAWER
   ========================================================= */
.wf-actions{
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  min-width:0;
}

.wf-burger{
  display:none;
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.18s ease;
}

.wf-burger:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.28) !important;
  background:rgba(75,163,255,.08) !important;
}

.wf-burger-lines{
  width:18px;
  height:12px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}

.wf-burger-lines span{
  height:2px;
  width:100%;
  display:block;
  background:#f4f8ff;
}

.wf-drawer{
  display:none;
  padding:10px 0 0;
  position:relative;
  z-index:var(--wf-z-drawer);
}

.wf-drawer.wf-open{
  display:block;
}

.wf-drawer__panel{
  position:relative;
  padding:10px;
  background:linear-gradient(180deg, rgba(10,25,50,.96), rgba(5,14,29,.98));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.wf-drawer__panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg, var(--wf-cyan), var(--wf-blue));
}

.wf-drawer__panel a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0;
  padding:12px 14px;
  text-decoration:none;
  color:rgba(235,240,255,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:.18s ease;
}

.wf-drawer__panel a:hover{
  border-color:rgba(113,222,255,.26);
  background:rgba(75,163,255,.08);
}

.wf-drawer-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1560px){
  .wf-nav a{
    min-width:118px;
    padding:10px 14px;
    font-size:11px;
  }

  .wf-search{
    width:min(540px, 31vw);
    min-width:300px;
  }
}

@media (max-width:1320px){
  .wf-header__inner{
    gap:18px;
  }

  .wf-nav{
    gap:10px;
  }

  .wf-nav a{
    min-width:106px;
    padding:10px 12px;
    font-size:11px;
  }

  .wf-search{
    width:min(460px, 28vw);
    min-width:260px;
  }
}

@media (max-width:1100px){
  .wf-nav{
    display:none;
  }

  .wf-burger{
    display:inline-flex;
  }

  .wf-right{
    justify-content:flex-end;
    gap:12px;
  }

  .wf-search{
    width:min(100%, 560px);
    max-width:560px;
    min-width:220px;
  }
}

@media (max-width:640px){
  .wf-header__inner{
    grid-template-columns:auto 1fr;
    gap:12px;
    padding:12px;
  }

  .wf-brand__logo{
    width:48px;
    height:48px;
  }

  .wf-search{
    min-width:0;
    width:100%;
  }

  .wf-header .wfhs-row{
    grid-template-columns:1fr auto;
    gap:8px;
  }

  .wf-header .wfhs-label{
    display:none;
  }
}

@media (orientation: portrait) and (max-width:900px){
  .wf-search{
    display:none !important;
  }
}