/* WebsiteSikho Header App Install Bar v5.0 — premium animated UI */
#ws-header-app-bar,
#ws-header-app-bar *{box-sizing:border-box}

#ws-header-app-bar{
  position:relative!important;
  display:block;
  width:100%;
  height:46px;
  min-height:46px;
  margin:0!important;
  margin-top:0!important;
  margin-bottom:0!important;
  padding:4px max(7px,env(safe-area-inset-right)) 4px max(7px,env(safe-area-inset-left));
  vertical-align:top!important;
  background:linear-gradient(110deg,#06163c,#0b5cff,#1847d1,#0b5cff,#06163c);
  background-size:300% 100%;
  color:#fff;
  z-index:2147483000;
  overflow:visible;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 2px 10px rgba(0,0,0,.16);
  animation:wsBarGradient 7s ease-in-out infinite,wsBarEnter .55s cubic-bezier(.2,.8,.2,1) both;
}
#ws-header-app-bar::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.13) 45%,transparent 70%);
  background-size:220% 100%;
  animation:wsShine 3.6s ease-in-out infinite;
}
#ws-header-app-bar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:rgba(255,255,255,.24);
}

.ws-header-app-inner{
  width:100%;
  max-width:1200px;
  height:38px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  position:relative;
  z-index:2;
}

.ws-header-app-logo{
  width:33px;
  height:33px;
  min-width:33px;
  flex:0 0 33px;
  padding:2px;
  background:#fff;
  border-radius:9px;
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.20);
  animation:wsLogoFloat 2.8s ease-in-out infinite;
}
.ws-header-app-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.ws-header-install{
  position:relative;
  min-width:0;
  max-width:calc(100vw - 70px);
  height:31px;
  min-height:31px;
  padding:0 clamp(10px,3vw,19px);
  border:0;
  border-radius:9px;
  background:#fff;
  color:#0750d7;
  font-size:clamp(9.5px,2.8vw,13px);
  font-weight:800;
  line-height:31px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  cursor:pointer;
  box-shadow:0 3px 12px rgba(0,0,0,.20);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  animation:wsButtonPulse 2.5s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.ws-header-install::before{
  content:"";
  position:absolute;
  top:0;bottom:0;
  left:-70%;
  width:45%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  animation:wsButtonShine 3.1s ease-in-out infinite;
  pointer-events:none;
}
.ws-header-install:hover{
  transform:translateY(-1px) scale(1.015);
  box-shadow:0 5px 17px rgba(0,0,0,.28);
}
.ws-header-install:active{transform:scale(.97);animation:none}

.ws-header-close{
  position:absolute!important;
  top:-5px!important;
  right:-3px!important;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:50%!important;
  background:#06163c!important;
  color:#fff!important;
  display:grid!important;
  place-items:center!important;
  font-size:13px!important;
  line-height:16px!important;
  z-index:20!important;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
  transition:transform .2s ease,background .2s ease;
}
.ws-header-close:hover{transform:rotate(90deg) scale(1.08);background:#0b5cff!important}
.ws-header-close:active{transform:scale(.88)}

@keyframes wsBarEnter{
  from{opacity:0;transform:translateY(-100%)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes wsBarGradient{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes wsShine{
  0%,100%{background-position:-120% 0}
  45%,65%{background-position:120% 0}
}
@keyframes wsLogoFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  45%{transform:translateY(-1px) rotate(-2deg)}
  70%{transform:translateY(0) rotate(2deg)}
}
@keyframes wsButtonPulse{
  0%,100%{box-shadow:0 3px 12px rgba(0,0,0,.20)}
  50%{box-shadow:0 5px 20px rgba(255,255,255,.28),0 3px 12px rgba(0,0,0,.18)}
}
@keyframes wsButtonShine{
  0%,35%{left:-70%}
  60%,100%{left:125%}
}

.ws-header-app-installing .ws-header-install{
  animation:none;
  background:#eaf1ff;
}
.ws-header-app-installed .ws-header-install{
  animation:wsInstalled .5s ease both;
}
@keyframes wsInstalled{
  0%{transform:scale(1)}
  45%{transform:scale(1.06)}
  100%{transform:scale(1)}
}

@media(max-width:380px){
  #ws-header-app-bar{height:40px;min-height:40px;padding-top:3px;padding-bottom:3px}
  .ws-header-app-inner{height:34px}
  .ws-header-app-logo{width:29px;height:29px;min-width:29px;flex-basis:29px;border-radius:7px}
  .ws-header-install{
    height:27px;min-height:27px;line-height:27px;
    font-size:9px;padding-left:7px;padding-right:7px;
    max-width:calc(100vw - 63px);border-radius:8px;
  }
  .ws-header-close{
    width:16px!important;height:16px!important;
    min-width:16px!important;min-height:16px!important;
    top:-4px!important;font-size:11px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  #ws-header-app-bar,
  .ws-header-app-logo,
  .ws-header-install,
  #ws-header-app-bar::before,
  .ws-header-install::before{animation:none!important}
  .ws-header-install,.ws-header-close{transition:none!important}
}

/* v8: keep the app strip physically attached to the theme header.
   The strip is injected as the first element inside <body>, so this only
   removes accidental top spacing on the immediate header wrapper. */
body > #ws-header-app-bar + *{
  margin-top:0!important;
}
body > #ws-header-app-bar + *:first-of-type{
  margin-top:0!important;
}

/* v9: zero-gap attachment to the theme header */
#ws-header-app-bar{
  margin-top:0!important;
  margin-bottom:0!important;
}