/*
 * BETSLTD Pro / Velki screenshot-parity header hotfix v1.2.8
 *
 * The supplied reference uses h-40px together with py-1.5. In its original
 * content-box stack that renders as a 52px outer bar, not a 40px outer bar.
 * This file uses deterministic border-box dimensions that reproduce that
 * rendered result and is loaded after every older Velki stylesheet.
 */
html[data-storefront-theme="velki"] .velki-shell{
  display:flex!important;
  flex-direction:column!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  overflow:visible!important
}

html[data-storefront-theme="velki"] .velki-header{
  position:-webkit-sticky!important;
  position:sticky!important;
  top:0!important;
  z-index:70!important;
  display:flex!important;
  align-items:center!important;
  flex:0 0 52px!important;
  width:100%!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  padding:6px 8px!important;
  gap:0!important;
  box-sizing:border-box!important;
  border:0!important;
  background:#ffc800!important;
  transform:translateZ(0)!important;
  backface-visibility:hidden!important
}

html[data-storefront-theme="velki"] .velki-header-guest{
  justify-content:space-between!important
}

html[data-storefront-theme="velki"] .velki-header-guest .velki-logo{
  display:flex!important;
  align-items:center!important;
  flex:0 0 124px!important;
  width:124px!important;
  min-width:124px!important;
  max-width:124px!important;
  height:34px!important;
  overflow:visible!important
}

html[data-storefront-theme="velki"] .velki-header-guest .velki-logo img{
  display:block!important;
  width:124px!important;
  height:auto!important;
  max-width:124px!important;
  max-height:34px!important;
  object-fit:contain!important;
  object-position:left center!important
}

html[data-storefront-theme="velki"] .velki-auth-actions{
  display:flex!important;
  align-items:center!important;
  flex:0 0 auto!important;
  height:34px!important;
  gap:8px!important;
  margin-left:auto!important
}

html[data-storefront-theme="velki"] .velki-auth-actions a,
html[data-storefront-theme="velki"] .velki-header .velki-signup,
html[data-storefront-theme="velki"] .velki-header .velki-login{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  box-sizing:border-box!important;
  border:0!important;
  border-radius:5px!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:34px!important;
  font-weight:800!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  box-shadow:none!important
}

html[data-storefront-theme="velki"] .velki-header .velki-signup{
  flex-basis:112px!important;
  width:112px!important;
  min-width:112px!important;
  max-width:112px!important;
  background:#987300!important
}

html[data-storefront-theme="velki"] .velki-header .velki-login{
  flex-basis:96px!important;
  width:96px!important;
  min-width:96px!important;
  max-width:96px!important;
  background:#ed0000!important
}

html[data-storefront-theme="velki"] .velki-auth-actions a span{
  display:block!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:34px!important;
  font-weight:800!important
}

/* Exact reference hook: <i class="icon-SignUp text-14 w-4 mr-1.5 ..."> */
html[data-storefront-theme="velki"] .velki-auth-actions .icon-SignUp,
html[data-storefront-theme="velki"] .velki-auth-actions .icon-login{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  margin:0 6px 0 0!important;
  padding:0!important;
  color:#fff!important;
  font-style:normal!important;
  line-height:1!important
}

html[data-storefront-theme="velki"] .velki-auth-icon{
  display:block!important;
  flex:0 0 18px!important;
  width:18px!important;
  height:18px!important;
  overflow:visible!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:2.65!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  transform:none!important
}

html[data-storefront-theme="velki"] .velki-signup-icon{
  stroke-width:2.8!important
}

html[data-storefront-theme="velki"] .velki-header-auth{
  flex-basis:52px!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  padding-top:6px!important;
  padding-bottom:6px!important
}

html[data-storefront-theme="velki"] .velki-header-auth .velki-logo{
  height:34px!important;
  min-width:96px!important;
  max-width:124px!important
}

html[data-storefront-theme="velki"] .velki-header-auth .velki-logo img{
  height:30px!important;
  max-height:30px!important
}

html[data-storefront-theme="velki"] .velki-footer{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  flex:0 0 auto!important;
  width:100%!important;
  margin-top:auto!important
}

@media (min-width:769px){
  html[data-storefront-theme="velki"]{
    --vk-shell:480px;
    --vk-shell-half:240px
  }
  html[data-storefront-theme="velki"] .velki-shell,
  html[data-storefront-theme="velki"] .velki-auth-shell{
    width:480px!important;
    max-width:480px!important
  }
}

@media (max-width:768px){
  html[data-storefront-theme="velki"]{
    --vk-shell:100vw;
    --vk-shell-half:50vw
  }
  html[data-storefront-theme="velki"] .velki-shell,
  html[data-storefront-theme="velki"] .velki-auth-shell{
    width:100vw!important;
    max-width:100vw!important
  }
}

/* Preserve the reference proportions on narrow phones without overflow. */
@media (max-width:390px){
  html[data-storefront-theme="velki"] .velki-header-guest .velki-logo{
    flex-basis:104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important
  }
  html[data-storefront-theme="velki"] .velki-header-guest .velki-logo img{
    width:104px!important;
    max-width:104px!important
  }
  html[data-storefront-theme="velki"] .velki-header .velki-signup{
    flex-basis:104px!important;
    width:104px!important;
    min-width:104px!important;
    max-width:104px!important
  }
  html[data-storefront-theme="velki"] .velki-header .velki-login{
    flex-basis:88px!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important
  }
}

@media (max-width:350px){
  html[data-storefront-theme="velki"] .velki-header{
    padding-left:5px!important;
    padding-right:5px!important
  }
  html[data-storefront-theme="velki"] .velki-header-guest .velki-logo{
    flex-basis:88px!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important
  }
  html[data-storefront-theme="velki"] .velki-header-guest .velki-logo img{
    width:88px!important;
    max-width:88px!important
  }
  html[data-storefront-theme="velki"] .velki-auth-actions{
    gap:5px!important
  }
  html[data-storefront-theme="velki"] .velki-header .velki-signup{
    flex-basis:98px!important;
    width:98px!important;
    min-width:98px!important;
    max-width:98px!important
  }
  html[data-storefront-theme="velki"] .velki-header .velki-login{
    flex-basis:82px!important;
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important
  }
  html[data-storefront-theme="velki"] .velki-auth-actions a span{
    font-size:14px!important
  }
}