﻿
:root{
  --drvph-h:70px;
  --drvph-max:1180px;
  --drvph-green:#0d7f68;
  --drvph-green2:#18a98e;
  --drvph-ink:#102421;
  --drvph-line:rgba(18,72,62,.12);
}
html body .drvph{
  position:fixed!important; inset:0 0 auto 0!important; z-index:10050!important;
  width:100%!important; height:70px!important; min-height:70px!important; max-height:70px!important;
  margin:0!important; padding:0!important; box-sizing:border-box!important;
  background:rgba(248,252,251,.96)!important; border:0!important;
  border-bottom:1px solid var(--drvph-line)!important; box-shadow:0 5px 20px rgba(15,35,56,.04)!important;
  backdrop-filter:blur(16px)!important; -webkit-backdrop-filter:blur(16px)!important;
  transform:none!important;
}
html body{padding-top:70px!important; scroll-padding-top:86px!important;}
html body .drvph__inner{
  width:min(1180px,calc(100% - 40px))!important; height:70px!important;
  margin:0 auto!important; padding:0!important; box-sizing:border-box!important;
  display:flex!important; flex-flow:row nowrap!important; align-items:center!important;
  justify-content:space-between!important; gap:18px!important;
}
html body .drvph__brand{
  display:flex!important; flex:0 0 auto!important; min-width:0!important; align-items:center!important;
  gap:10px!important; margin:0!important; padding:0!important; text-decoration:none!important; color:var(--drvph-ink)!important;
}
html body .drvph__logo{
  display:block!important; flex:0 0 34px!important; width:34px!important; height:34px!important;
  min-width:34px!important; min-height:34px!important; max-width:34px!important; max-height:34px!important;
  margin:0!important; padding:0!important; border-radius:11px!important;
  border:1px solid rgba(226,235,232,.95)!important;
  background:url('/landing/assets/img/favicon-64.webp') center/cover no-repeat!important;
  box-shadow:0 7px 18px rgba(13,127,104,.10)!important;
}
html body .drvph__brand-text{
  display:inline-flex!important; align-items:center!important; gap:4px!important;
  margin:0!important; padding:0!important; font-size:17px!important; line-height:1!important;
  font-weight:900!important; letter-spacing:-.35px!important; white-space:nowrap!important; color:var(--drvph-ink)!important;
}
html body .drvph__brand-text strong{color:var(--drvph-green)!important; font:inherit!important;}
html body .drvph__nav{
  display:flex!important; flex:1 1 auto!important; min-width:0!important; align-items:center!important;
  justify-content:center!important; gap:26px!important; margin:0!important; padding:0!important;
}
html body .drvph__nav a{
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  margin:0!important; padding:8px 0!important; border:0!important; background:transparent!important;
  color:#284641!important; text-decoration:none!important; font-size:14px!important; line-height:1!important;
  font-weight:760!important; white-space:nowrap!important;
}
html body .drvph__actions{
  display:flex!important; flex:0 0 auto!important; min-width:0!important; align-items:center!important;
  justify-content:flex-end!important; flex-wrap:nowrap!important; gap:8px!important; margin:0!important; padding:0!important;
}
html body .drvph__auth{
  display:inline-flex!important; flex:0 0 auto!important; height:38px!important; min-height:38px!important; max-height:38px!important;
  min-width:0!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important;
  margin:0!important; padding:0 13px!important; border-radius:11px!important; text-decoration:none!important;
  font-size:13px!important; line-height:1!important; font-weight:850!important; white-space:nowrap!important; transform:none!important;
}
html body .drvph__auth--login{
  color:#173633!important; background:#fff!important; border:1px solid rgba(20,92,78,.15)!important; box-shadow:none!important;
}
html body .drvph__auth--register{
  color:#fff!important; background:linear-gradient(135deg,var(--drvph-green),var(--drvph-green2))!important;
  border:1px solid transparent!important; box-shadow:0 7px 18px rgba(13,127,104,.17)!important;
}
html body .drvph__more{
  display:none!important; flex:0 0 34px!important; width:34px!important; height:34px!important;
  min-width:34px!important; min-height:34px!important; max-width:34px!important; max-height:34px!important;
  align-items:center!important; justify-content:center!important; gap:3px!important; margin:0!important; padding:0!important;
  border:1px solid rgba(15,23,42,.11)!important; border-radius:10px!important; background:#fff!important;
  box-shadow:0 4px 12px rgba(15,23,42,.06)!important; appearance:none!important; -webkit-appearance:none!important; cursor:pointer!important;
}
html body .drvph__more span{
  display:block!important; flex:0 0 4px!important; width:4px!important; height:4px!important;
  min-width:4px!important; min-height:4px!important; max-width:4px!important; max-height:4px!important;
  margin:0!important; padding:0!important; border-radius:999px!important; background:#263544!important;
}
html body .drvph-menu[hidden]{display:none!important}
html body .drvph-menu{
  position:fixed!important; inset:70px 0 0 0!important; z-index:10040!important; padding:12px!important;
  background:rgba(15,23,42,.30)!important; backdrop-filter:blur(5px)!important; -webkit-backdrop-filter:blur(5px)!important;
}
html body .drvph-menu__panel{
  width:min(390px,100%)!important; margin-left:auto!important; padding:10px!important; display:grid!important; gap:5px!important;
  border:1px solid rgba(15,23,42,.08)!important; border-radius:16px!important; background:#fff!important;
  box-shadow:0 22px 70px rgba(15,23,42,.20)!important;
}
html body .drvph-menu__panel > a{
  display:flex!important; min-height:44px!important; align-items:center!important; padding:0 13px!important;
  border-radius:10px!important; color:#173633!important; text-decoration:none!important; font-size:14px!important; font-weight:780!important;
}
html body .drvph-menu__auth{display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; margin-top:4px!important;}
html body .drvph-menu__auth .drvph__auth{width:100%!important;}

@media (max-width:1100px){
  html body .drvph__inner{width:calc(100% - 28px)!important; gap:7px!important;}
  html body .drvph__brand{flex:1 1 auto!important; min-width:0!important; gap:8px!important; overflow:hidden!important;}
  html body .drvph__logo{
    flex-basis:30px!important; width:30px!important; height:30px!important;
    min-width:30px!important; min-height:30px!important; max-width:30px!important; max-height:30px!important; border-radius:9px!important;
  }
  html body .drvph__brand-text{
    min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; font-size:16px!important;
  }
  html body .drvph__nav{display:none!important;}
  html body .drvph__actions{flex:0 0 auto!important; gap:5px!important;}
  html body .drvph__auth{
    height:34px!important; min-height:34px!important; max-height:34px!important;
    padding:0 9px!important; border-radius:9px!important; font-size:11.5px!important;
  }
  html body .drvph__more{display:inline-flex!important;}
}
@media (max-width:420px){
  html body .drvph__inner{width:calc(100% - 18px)!important; gap:4px!important;}
  html body .drvph__brand{gap:6px!important;}
  html body .drvph__logo{
    flex-basis:28px!important; width:28px!important; height:28px!important;
    min-width:28px!important; min-height:28px!important; max-width:28px!important; max-height:28px!important;
  }
  html body .drvph__brand-text{font-size:13.5px!important;}
  html body .drvph__actions{gap:4px!important;}
  html body .drvph__auth{
    height:32px!important; min-height:32px!important; max-height:32px!important;
    padding:0 7px!important; font-size:10.5px!important;
  }
  html body .drvph__more{
    flex-basis:32px!important; width:32px!important; height:32px!important;
    min-width:32px!important; min-height:32px!important; max-width:32px!important; max-height:32px!important;
  }
}
@media (max-width:350px){
  html body .drvph__inner{width:calc(100% - 12px)!important;}
  html body .drvph__brand-text{font-size:12px!important;}
  html body .drvph__auth{padding:0 5px!important; font-size:9.8px!important;}
}


/* ==========================================================================
   PUBLIC MOBILE MENU POLISH
   3-dot menu = compact floating popover. Login/Register stay ONLY in header.
   Click anywhere outside -> smooth close animation.
   ========================================================================== */

html body .drvph-menu{
  position:fixed!important;
  inset:70px 0 0 0!important;
  z-index:10040!important;
  padding:10px 12px!important;
  background:rgba(15,23,42,.18)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;

  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:
    opacity .22s ease,
    visibility 0s linear .22s!important;
}

html body .drvph-menu.is-open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:
    opacity .22s ease,
    visibility 0s linear 0s!important;
}

html body .drvph-menu[hidden]{
  display:block!important;
}

html body .drvph-menu__panel{
  width:min(320px,calc(100vw - 24px))!important;
  max-width:320px!important;
  margin:0 0 0 auto!important;
  padding:8px!important;

  display:grid!important;
  gap:4px!important;

  border:1px solid rgba(15,23,42,.08)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:
    0 20px 55px rgba(15,23,42,.16),
    0 2px 8px rgba(15,23,42,.06)!important;

  transform:translateY(-10px) scale(.975)!important;
  transform-origin:top right!important;
  opacity:0!important;

  transition:
    transform .24s cubic-bezier(.2,.85,.25,1),
    opacity .18s ease!important;
}

html body .drvph-menu.is-open .drvph-menu__panel{
  transform:translateY(0) scale(1)!important;
  opacity:1!important;
}

html body .drvph-menu__panel > a{
  display:flex!important;
  min-height:42px!important;
  align-items:center!important;
  padding:0 12px!important;
  border-radius:10px!important;

  color:#173633!important;
  text-decoration:none!important;
  font-size:13px!important;
  line-height:1.2!important;
  font-weight:800!important;

  transition:
    background .16s ease,
    color .16s ease,
    transform .16s ease!important;
}

html body .drvph-menu__panel > a:hover,
html body .drvph-menu__panel > a:focus-visible{
  background:#f0f7f5!important;
  color:#0d7f68!important;
  transform:translateX(2px)!important;
}

html body .drvph-menu__panel > a:active{
  transform:translateX(2px) scale(.985)!important;
}

/* Small arrow pointer below the dots button area */
html body .drvph-menu__panel::before{
  content:""!important;
  position:absolute!important;
  top:-7px!important;
  right:18px!important;
  width:14px!important;
  height:14px!important;
  background:#fff!important;
  border-left:1px solid rgba(15,23,42,.08)!important;
  border-top:1px solid rgba(15,23,42,.08)!important;
  transform:rotate(45deg)!important;
}

/* Needed for ::before positioning */
html body .drvph-menu__panel{
  position:relative!important;
}

@media (max-width:420px){
  html body .drvph-menu{
    padding:8px 9px!important;
  }

  html body .drvph-menu__panel{
    width:min(300px,calc(100vw - 18px))!important;
    max-width:300px!important;
    border-radius:14px!important;
    padding:7px!important;
  }

  html body .drvph-menu__panel > a{
    min-height:40px!important;
    padding:0 11px!important;
    font-size:12.5px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  html body .drvph-menu,
  html body .drvph-menu__panel,
  html body .drvph-menu__panel > a{
    transition:none!important;
  }
}
