/*
  Bikeley Upgrade v2 – Clean Header + Theme
  Loaded AFTER app.css
*/

/* ========================================
   HEADER – Complete redesign
   ======================================== */

/* Base header: clean white, thin bottom border */
.site-header{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,0.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
}

/* When header is overlay (homepage), make it transparent */
.site-header--overlay{
  background:transparent !important;
  border-bottom-color:transparent !important;
}
.site-header--overlay.is-solid{
  background:#fff !important;
  border-bottom:1px solid rgba(0,0,0,0.08) !important;
}

/* Nav container: tight, centered */
.nav{
  display:flex;
  align-items:center;
  min-height:60px !important;
  gap:0 !important;
}

/* Brand/Logo: clean */
.nav__brand{
  display:flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  flex-shrink:0;
  margin-right:auto;
}
.nav__brand img{
  width:32px;
  height:32px;
  border-radius:6px;
  box-shadow:none !important;
}
.nav__brand-text{
  font-size:18px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:#1a1a1a;
}
.site-header--overlay .nav__brand-text{
  color:#fff;
}
.site-header--overlay.is-solid .nav__brand-text{
  color:#1a1a1a;
}

/* Search bar in header: cleaner */
.nav__search{
  flex:0 1 340px;
  margin:0 16px;
}
.nav__search input[type="search"]{
  height:38px;
  border:1.5px solid rgba(0,0,0,0.10);
  border-radius:8px;
  padding:0 12px;
  font-size:13px;
  font-weight:500;
  background:#f9fafb;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.nav__search input[type="search"]:focus{
  border-color:#1a1a1a;
  background:#fff;
  outline:none !important;
  box-shadow:none;
}
.nav__search .btn{
  height:38px;
  padding:0 14px;
  font-size:13px;
  border-radius:8px;
}

/* Nav links: clean, subtle */
.nav__links{
  display:flex;
  align-items:center;
  gap:4px !important;
}
.nav__links a,
.nav__links .btn-ghost{
  font-size:13px !important;
  font-weight:500 !important;
  color:#374151 !important;
  opacity:1 !important;
  padding:8px 12px !important;
  border-radius:6px !important;
  border:none !important;
  background:transparent !important;
  transition:background 0.12s ease;
}
.nav__links a:hover,
.nav__links .btn-ghost:hover{
  background:rgba(0,0,0,0.04) !important;
}

/* Overlay mode links */
.site-header--overlay .nav__links a,
.site-header--overlay .nav__links .btn-ghost{
  color:rgba(255,255,255,0.9) !important;
}
.site-header--overlay .nav__links a:hover,
.site-header--overlay .nav__links .btn-ghost:hover{
  background:rgba(255,255,255,0.12) !important;
}
.site-header--overlay.is-solid .nav__links a,
.site-header--overlay.is-solid .nav__links .btn-ghost{
  color:#374151 !important;
}
.site-header--overlay.is-solid .nav__links a:hover,
.site-header--overlay.is-solid .nav__links .btn-ghost:hover{
  background:rgba(0,0,0,0.04) !important;
}

/* Nav icons: smaller, subtler */
.nav__icon{
  width:18px;
  height:18px;
}
.nav__icon-btn{
  gap:6px !important;
}
.nav__label{
  font-size:13px;
}

/* Account dropdown: cleaner */
.nav-menu__panel{
  border-radius:8px !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 4px 16px rgba(0,0,0,0.08) !important;
  min-width:160px;
}
.nav-menu__item{
  font-size:14px !important;
  font-weight:500 !important;
  padding:10px 16px !important;
}
.nav-menu__item:hover{
  background:#f9fafb !important;
}

/* ========================================
   SEARCH PAGE HEADER – Compact
   ======================================== */
.site-header--search .nav{
  min-height:60px !important;
}

/* ========================================
   BUTTONS – Fine-line (from v1, kept)
   ======================================== */
.btn{
  border-radius:8px;
  border:1.5px solid rgba(0,0,0,0.12);
  background:transparent;
  font-weight:500;
  font-size:14px;
  box-shadow:none;
  transition:all 0.15s ease;
}
.btn:hover{
  border-color:rgba(0,0,0,0.25);
  background:#f9fafb;
  box-shadow:none;
}
.btn-primary,
.btn-accent,
.btn-brand,
.btn-dark{
  background:#1a1a1a;
  color:#fff;
  border-color:#1a1a1a;
  box-shadow:none;
  position:relative;
  overflow:visible;
}
.btn-primary::before,
.btn-accent::before,
.btn-brand::before{
  display:none;
}
.btn-primary:hover,
.btn-accent:hover,
.btn-brand:hover,
.btn-dark:hover{
  background:#333;
  border-color:#333;
  box-shadow:none;
  filter:none;
}
.btn-ghost{
  background:transparent;
  border-color:transparent;
}
.btn-ghost:hover{
  background:rgba(0,0,0,0.04);
  border-color:transparent;
}
.btn-small{
  padding:7px 14px;
  font-size:13px;
}

/* ========================================
   CARDS (Provider) – Subtle borders
   ======================================== */
.provider-card{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:10px;
  box-shadow:none;
  transition:border-color 0.15s ease, box-shadow 0.2s ease;
}
.provider-card:hover{
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 4px 16px rgba(0,0,0,0.06);
}

/* ========================================
   FOOTER – Cleaner
   ======================================== */
/* Old site-footer - replaced by .sf */
.site-footer{display:none}

/* ═══ Footer v2 ═══ */
/* ── Footer redesign: dark, modern ─────────────────────── */
.sf.sf--dark{
  background:#0b0f1a;
  color:#fff;
  padding:64px 0 32px;
  margin-top:auto;
  border-top:none;
}
.sf--dark .sf__top{
  display:grid;
  grid-template-columns:1.4fr 2fr;
  gap:48px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sf--dark .sf__brand{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.sf--dark .sf__logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.01em;
}
.sf--dark .sf__logo img{
  border-radius:8px;
  filter:brightness(0) invert(1);
}
.sf--dark .sf__tagline{
  font-size:14px;
  color:rgba(255,255,255,.48);
  line-height:1.65;
  margin:0;
  max-width:320px;
}
.sf--dark .sf__social{
  display:flex;
  gap:14px;
  margin-top:4px;
}
.sf--dark .sf__social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.5);
  transition:all .18s ease;
}
.sf--dark .sf__social a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.sf--dark .sf__cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
.sf--dark .sf__col{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sf--dark .sf__col h4{
  margin:0 0 6px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,.32);
}
.sf--dark .sf__col a,
.sf--dark .sf__cookie-btn{
  color:rgba(255,255,255,.62);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  transition:color .15s ease;
  background:none;
  border:none;
  font:inherit;
  cursor:pointer;
  padding:0;
  text-align:left;
}
.sf--dark .sf__col a:hover,
.sf--dark .sf__cookie-btn:hover{
  color:#fff;
}
.sf--dark .sf__bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:28px;
}
.sf--dark .sf__copy{
  font-size:13px;
  color:rgba(255,255,255,.28);
  text-align:center;
}
@media(max-width:980px){
  .sf--dark .sf__top{
    grid-template-columns:1fr;
    gap:36px;
  }
}
@media(max-width:600px){
  .sf--dark .sf__cols{
    grid-template-columns:1fr 1fr;
    gap:24px;
  }
  .sf.sf--dark{
    padding:48px 0 28px;
  }
}
@media(max-width:400px){
  .sf--dark .sf__cols{
    grid-template-columns:1fr;
  }
}

/* ========================================
   WHATSAPP BUTTON (from v1, kept)
   ======================================== */
.wa-float{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:900;
  display:flex;
  align-items:center;
  gap:0;
  padding:14px;
  background:#fff;
  color:#1a1a1a;
  border:1px solid rgba(0,0,0,.08);
  border-radius:50%;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,0.12);
  transition:all 0.3s cubic-bezier(.22,1,.36,1);
  animation:wa-entrance 0.4s 2s both cubic-bezier(0.34,1.56,0.64,1);
  overflow:hidden;
}
.wa-float:hover{
  border-radius:999px;
  padding:14px 20px 14px 16px;
  gap:10px;
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,0.16);
}
.wa-float__icon{width:22px;height:22px;flex-shrink:0;color:#1a1a1a}
.wa-float__label{
  white-space:nowrap;
  max-width:0;
  overflow:hidden;
  opacity:0;
  color:#1a1a1a;
  transition:max-width 0.3s cubic-bezier(.22,1,.36,1), opacity 0.2s ease;
}
.wa-float:hover .wa-float__label{
  max-width:200px;
  opacity:1;
}
@media(max-width:640px){
  .wa-float{bottom:20px;right:20px;padding:13px}
  .wa-float:hover{padding:13px;border-radius:50%;gap:0}
  .wa-float__label{display:none}
}
@keyframes wa-entrance{
  from{opacity:0;transform:translateY(20px) scale(0.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ========================================
   GLOBAL REFINEMENTS
   ======================================== */
:root{
  --shadow:0 2px 8px rgba(0,0,0,0.04);
  --shadow-sm:0 1px 4px rgba(0,0,0,0.03);
  --radius-md:8px;
  --radius-lg:10px;
}

body{
  -webkit-font-smoothing:antialiased;
}

/* Scrollbar */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.10);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.18)}

/* ═══ MEGA MENU (BikeExchange-Style) ═══ */
.mega{display:flex;flex:1;min-height:0;overflow:hidden;flex-direction:row}
.mega__l1,.mega__l2,.mega__l3{padding:10px 0;overflow-y:auto}
.mega__l1{width:220px;flex-shrink:0;border-right:1px solid rgba(0,0,0,.06)}
.mega__l2{width:240px;flex-shrink:0;border-right:1px solid rgba(0,0,0,.06)}
.mega__l3{flex:1;min-width:180px}
.mega__l2:empty,.mega__l3:empty{display:none}
.mega__l1-item,.mega__l2-item{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:13px 20px;border:none;background:transparent;
  font:inherit;font-size:15px;font-weight:600;color:#374151;
  cursor:pointer;text-align:left;text-decoration:none;
  transition:background .1s,color .1s;
  border-left:3px solid transparent;
}
.mega__l1-item:hover,.mega__l2-item:hover{background:rgba(0,0,0,.03);color:#111}
.mega__l1-item.is-active{background:rgba(0,0,0,.04);color:#111;font-weight:700;border-left-color:#111}
.mega__l2-item.is-active{background:rgba(0,0,0,.03);color:#111;font-weight:700}
.mega__l1-item svg,.mega__l2-item svg{flex-shrink:0;color:#9ca3af}
.mega__l3-item{
  display:block;padding:11px 20px;
  font-size:15px;font-weight:500;color:#6b7280;
  text-decoration:none;transition:background .1s,color .1s;
}
.mega__l3-item:hover{background:rgba(0,0,0,.03);color:#111;font-weight:600}
.mega__footer-divider{height:1px;background:rgba(0,0,0,.06);margin:10px 16px}
.mega__footer-link{
  display:block;padding:10px 20px;
  font-size:13px;font-weight:600;color:#6b7280;text-decoration:none;
}
.mega__footer-link:hover{color:#111}
.mega__back{
  display:none;align-items:center;gap:8px;
  padding:14px 20px;border:none;border-top:1px solid rgba(0,0,0,.06);
  background:#fafafa;font:inherit;font-size:14px;font-weight:700;
  color:#111;cursor:pointer;width:100%;
}

/* Desktop: wide panel for 3-column layout */
@media(min-width:769px){
  .mh-drawer__panel{width:min(720px, 80vw) !important;max-width:720px !important}
  .mega__back{display:none!important}
  .mega{flex-direction:row!important}
}

/* Mobile: stacked levels with slide */
@media(max-width:768px){
  .mh-drawer__panel{width:min(360px, 88vw) !important}
  .mega{flex-direction:column}
  .mega__l1,.mega__l2,.mega__l3{width:auto;min-width:0;border-right:none;border-bottom:1px solid rgba(0,0,0,.04)}
  .mega__l1-item,.mega__l2-item{border-left:none;padding:15px 20px;font-size:16px}
  .mega__l3-item{padding:13px 20px;font-size:15px}
  .mega__back[hidden]{display:none}
  .mega__back:not([hidden]){display:flex}
}

/* ═══ KILL GRAY FOCUS OUTLINES EVERYWHERE ═══ */
a:focus,
button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
summary:focus{
  outline:none!important;
  box-shadow:none!important;
}
/* Only show focus ring for keyboard navigation (accessibility) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
  outline:2px solid rgba(0,0,0,.15)!important;
  outline-offset:2px;
}

/* ═══ MH-LINK OVERLAY COLORS ═══
   The .mh-link buttons (Home, Alle Anbieter, Marketplace, Dashboard)
   need white text when the header is transparent over a dark hero.
   Once is-solid fires (>24px scroll), revert to dark text.
   ═══════════════════════════════════════════════════════════ */

/* Overlay = transparent header over hero → white links */
.site-header--overlay .mh-link,
.site-header--overlay .mh-link svg{
  color:rgba(255,255,255,0.92) !important;
}
.site-header--overlay .mh-link:hover{
  color:#fff !important;
  background:rgba(255,255,255,0.12) !important;
}

/* Once scrolled (is-solid) → dark links again */
.site-header--overlay.is-solid .mh-link,
.site-header--overlay.is-solid .mh-link svg,
.site-header.is-solid .mh-link,
.site-header.is-solid .mh-link svg{
  color:#374151 !important;
}
.site-header--overlay.is-solid .mh-link:hover,
.site-header.is-solid .mh-link:hover{
  color:#1a1a1a !important;
  background:rgba(0,0,0,0.04) !important;
}

/* Provider microsite: always white until solid */
body.is-provider-microsite .site-header .mh-link,
body.is-provider-microsite .site-header .mh-link svg{
  color:rgba(255,255,255,0.92) !important;
}
body.is-provider-microsite .site-header .mh-link:hover{
  color:#fff !important;
  background:rgba(255,255,255,0.12) !important;
}
body.is-provider-microsite .site-header.is-solid .mh-link,
body.is-provider-microsite .site-header.is-solid .mh-link svg{
  color:#374151 !important;
}
body.is-provider-microsite .site-header.is-solid .mh-link:hover{
  color:#1a1a1a !important;
  background:rgba(0,0,0,0.04) !important;
}

/* Provider microsite: when is-solid (scrolled past hero),
   add a white background so text is readable over page content */
body.is-provider-microsite .site-header.is-solid{
  background:rgba(255,255,255,0.96) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
  border-bottom:1px solid rgba(0,0,0,0.08) !important;
  box-shadow:0 2px 16px rgba(0,0,0,0.07) !important;
}
body.is-provider-microsite .site-header.is-solid .nav__brand-text,
body.is-provider-microsite .site-header.is-solid .nav__brand-initials{
  color:#1a1a1a !important;
}
body.is-provider-microsite .site-header.is-solid .nav__links a,
body.is-provider-microsite .site-header.is-solid .nav-menu__summary,
body.is-provider-microsite .site-header.is-solid .nav__icon-btn{
  color:#374151 !important;
}

/* ═══ COMPACT SCROLL HEADER (BikeExchange-Style) ═══ */
.site-header{
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  will-change:transform;
}
.site-header.is-compact .nav,
.site-header.is-scrolled .nav{
  min-height:48px!important;
  transition:min-height .35s cubic-bezier(.22,1,.36,1);
}
.site-header.is-compact .nav__brand img,
.site-header.is-scrolled .nav__brand img{
  height:28px!important;
}
.site-header.is-compact .mh-tabs,
.site-header.is-scrolled .mh-tabs{
  max-height:0!important;overflow:hidden!important;padding:0!important;opacity:0;
  transition:max-height .3s ease,opacity .2s ease,padding .3s ease;
}
.site-header .mh-tabs{
  max-height:80px;opacity:1;
  transition:max-height .3s ease,opacity .25s ease .05s,padding .3s ease;
}
.site-header.is-compact .mh-search,
.site-header.is-scrolled .mh-search{
  max-width:280px;height:40px!important;
  transition:max-width .3s ease,height .3s ease;
}
.site-header.is-compact .mh-left{
  gap:12px!important;
}
.site-header.is-compact .mh-logo__full,
.site-header.is-scrolled .mh-logo__full{
  height:22px!important;
  transition:height .3s ease;
}
.site-header .mh-logo__full{
  transition:height .3s ease;
}

/* ═══ SMART HEADER – slide away / return ═══ */
.site-header.is-up{
  transform:translateY(-110%)!important;
}
.site-header.is-scrolled{
  box-shadow:0 2px 16px rgba(0,0,0,.08);
}

/* ═══ NAV ICON BUTTONS – sichtbar auf weißem Header ═══
   Auf dem normalen weißen Header (kein overlay) haben die
   nav__icon-btn weißen Hintergrund auf weißem Header = unsichtbar.
   Fix: subtiler Grau-Hintergrund mit klarem Border.
   ═══════════════════════════════════════════════════════ */
.site-header:not(.site-header--overlay) .nav__icon-btn,
.site-header:not(.site-header--overlay) .nav-menu__summary,
.site-header.is-solid .nav__icon-btn,
.site-header.is-solid .nav-menu__summary{
  background:rgba(0,0,0,0.05) !important;
  border-color:rgba(0,0,0,0.10) !important;
  color:#1a1a1a !important;
}
.site-header:not(.site-header--overlay) .nav__icon-btn:hover,
.site-header:not(.site-header--overlay) .nav-menu__summary:hover,
.site-header.is-solid .nav__icon-btn:hover,
.site-header.is-solid .nav-menu__summary:hover{
  background:rgba(0,0,0,0.09) !important;
  border-color:rgba(0,0,0,0.16) !important;
}

/* WhatsApp + Filter: hide when compare modal is open */
body.is-modal-open .wa-float,
body.is-modal-open .mkt-filter-fab{
  display:none !important;
}

/* Desktop: WA button stays at bottom-right, no shift needed (tray doesn't overlap) */
@media(min-width:769px){
  body.has-compare-tray .wa-float{
    bottom:24px !important;
  }
}