/* HoneyBee Inn — Luxury Black/Gold Animated Auth Effects */
:root{
  --hb-lux-gold:#ffbf24;
  --hb-lux-gold2:#d88700;
  --hb-lux-glow:rgba(255,190,35,.92);
  --hb-lux-black:#050608;
}

/* Deep black + gold cinematic overlay */
body.hb-auth-page{
  background-color:#050608!important;
  background-image:url('/assets/honeybee-login-courtyard.png')!important;
  background-position:center!important;
  background-size:cover!important;
  background-attachment:fixed!important;
}
body.hb-auth-page:before{
  background:
    radial-gradient(ellipse at 8% 92%,rgba(255,184,24,.42) 0%,rgba(255,170,0,.18) 17%,transparent 38%),
    radial-gradient(ellipse at 94% 8%,rgba(255,193,38,.30) 0%,rgba(255,165,0,.10) 18%,transparent 39%),
    linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(2,3,5,.78) 27%,rgba(0,0,0,.61) 49%,rgba(0,0,0,.74) 74%,rgba(0,0,0,.80) 100%),
    linear-gradient(180deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.10) 25%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.82) 100%)!important;
  opacity:1!important;
}

/* Slight golden atmosphere over the page */
.hb-auth-wrap:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 50% 100%,rgba(255,180,20,.13),transparent 34%),
    radial-gradient(circle at 15% 50%,rgba(255,196,60,.07),transparent 27%);
  mix-blend-mode:screen;
}

/* Login / OTP / forgot / guest glass card */
.hb-card{
  isolation:isolate!important;
  border:1px solid rgba(255,199,63,.58)!important;
  background:
    linear-gradient(145deg,rgba(10,12,14,.90),rgba(2,5,7,.78))!important;
  box-shadow:
    0 0 0 1px rgba(255,193,42,.08),
    0 0 22px rgba(255,174,15,.20),
    0 28px 75px rgba(0,0,0,.68)!important;
  animation:hbCardBreath 3.8s ease-in-out infinite!important;
}

/* Moving gold light orbit around the form */
.hb-card:before{
  content:""!important;
  position:absolute!important;
  inset:-2px!important;
  width:auto!important;
  height:auto!important;
  right:auto!important;
  top:auto!important;
  border-radius:inherit!important;
  padding:2px!important;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    transparent 285deg,
    rgba(255,194,48,.12) 305deg,
    rgba(255,218,105,.98) 327deg,
    rgba(255,169,0,.45) 340deg,
    transparent 354deg,
    transparent 360deg)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  mask-composite:exclude!important;
  animation:hbOrbit 3.1s linear infinite!important;
  pointer-events:none!important;
  z-index:5!important;
}

/* Keep decorative honeycomb */
.hb-card:after{
  color:rgba(255,190,36,.38)!important;
  text-shadow:0 0 14px rgba(255,190,36,.20)!important;
  z-index:3!important;
}

/* Golden flare points around the card */
.hb-card .hb-mini:before{
  content:"";
  position:absolute;
  left:8%;
  top:8%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff1b2;
  box-shadow:0 0 7px #fff,0 0 18px #ffc52f,0 0 35px rgba(255,171,0,.7);
  animation:hbSpark 2.2s ease-in-out infinite;
}
.hb-card .hb-mini:after{
  content:"";
  position:absolute;
  right:9%;
  bottom:16%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffeeb0;
  box-shadow:0 0 7px #fff,0 0 16px #ffbf24;
  animation:hbSpark 1.7s .5s ease-in-out infinite;
}

/* Form labels and text */
.hb-label,.hb-remember,.hb-title{color:#fff!important}
.hb-sub{color:rgba(255,255,255,.82)!important}
.hb-link{color:#ffd04a!important;text-shadow:0 0 8px rgba(255,191,36,.18)!important}
.hb-welcome{color:#ffc12f!important;text-shadow:0 0 14px rgba(255,177,0,.25)!important}
.hb-mini-name .gold,.hb-brand-title .gold{color:#ffb914!important}
.hb-rule,.hb-brand-rule{background:linear-gradient(90deg,#d98900,#ffd45a,#d98900)!important;box-shadow:0 0 12px rgba(255,187,31,.42)!important}

/* Role pills glow */
.hb-role-option{
  transition:box-shadow .25s ease,background .25s ease,border-color .25s ease,transform .25s ease!important;
}
.hb-role-option.active{
  border-color:#ffc53d!important;
  background:linear-gradient(145deg,rgba(255,190,31,.28),rgba(109,62,0,.30))!important;
  box-shadow:0 0 8px rgba(255,194,44,.62),inset 0 0 18px rgba(255,184,17,.10)!important;
}
.hb-role-option:hover{box-shadow:0 0 12px rgba(255,192,39,.38)!important}

/* Inputs: black glass with animated gold perimeter */
.hb-field-wrap .hb-input{
  background:rgba(5,8,10,.78)!important;
  color:#fff!important;
  border:1px solid rgba(255,205,88,.55)!important;
  box-shadow:inset 0 0 16px rgba(0,0,0,.34),0 0 0 rgba(255,190,30,0)!important;
  transition:border-color .2s ease,box-shadow .2s ease!important;
}
.hb-field-wrap .hb-input::placeholder{color:rgba(255,255,255,.50)!important}
.hb-field-wrap .hb-input:focus{
  border-color:#ffd15a!important;
  box-shadow:0 0 8px rgba(255,191,35,.75),0 0 24px rgba(255,169,0,.25),inset 0 0 15px rgba(255,180,15,.06)!important;
}
.hb-icon{
  background:linear-gradient(145deg,#ffd45d,#d88a00)!important;
  color:#241703!important;
  border-right:1px solid rgba(255,218,123,.60)!important;
  box-shadow:inset -1px 0 10px rgba(255,255,255,.16),0 0 12px rgba(255,180,15,.14)!important;
}
.hb-eye{color:#d8c99d!important}

/* Gold login/verify/reset button with moving shine */
.hb-primary{
  position:relative!important;
  overflow:hidden!important;
  border-color:#ffd35a!important;
  background:linear-gradient(105deg,#b66b00 0%,#f1b52a 28%,#ffe071 50%,#d98a00 72%,#a85f00 100%)!important;
  background-size:220% 100%!important;
  color:#fff!important;
  box-shadow:0 0 10px rgba(255,190,34,.48),0 10px 28px rgba(139,82,0,.42)!important;
  animation:hbButtonShine 3.2s ease-in-out infinite!important;
}
.hb-primary:after{
  content:"";
  position:absolute;
  top:-20%;
  left:-30%;
  width:22%;
  height:140%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);
  filter:blur(1px);
  animation:hbSweep 2.8s ease-in-out infinite;
  pointer-events:none;
}
.hb-primary:hover{box-shadow:0 0 18px rgba(255,192,38,.72),0 12px 32px rgba(139,82,0,.48)!important}

/* Back button also gets gold edge */
.hb-back{border-color:rgba(255,191,37,.62)!important;background:rgba(0,0,0,.24)!important;color:#ffd15a!important;box-shadow:0 0 8px rgba(255,184,21,.10)!important}
.hb-back:hover{background:rgba(255,174,17,.12)!important;box-shadow:0 0 14px rgba(255,185,25,.30)!important}

/* Brand side gets a faint gold aura without changing its layout */
.hb-brand-side{text-shadow:0 2px 10px rgba(0,0,0,.72)!important}
.hb-brand-side .hb-logo{filter:drop-shadow(0 0 10px rgba(255,191,39,.24)) drop-shadow(0 8px 15px rgba(0,0,0,.55))!important}
.hb-contact i{background:linear-gradient(145deg,#ffd55e,#d88b00)!important;box-shadow:0 0 12px rgba(255,184,21,.25)!important}

/* Footer becomes part of the dark luxury system */
.hb-footer{
  background:linear-gradient(180deg,rgba(7,9,10,.96),rgba(2,3,4,.98))!important;
  color:#fff!important;
  border-top:1px solid rgba(255,194,40,.72)!important;
  box-shadow:0 -8px 30px rgba(0,0,0,.45),0 -1px 16px rgba(255,174,0,.10)!important;
}
.hb-feature{border-right-color:rgba(255,191,38,.20)!important}
.hb-feature i{background:rgba(255,190,28,.08)!important;color:#ffc43b!important;border-color:rgba(255,191,38,.58)!important;box-shadow:0 0 10px rgba(255,185,24,.14)!important}
.hb-feature strong{color:#ffd45b!important}.hb-feature span{color:rgba(255,255,255,.62)!important}.hb-foot-location{color:rgba(255,222,143,.72)!important}.hb-foot-location i{color:#ffc43b!important}

/* Flying bees get a warm realistic halo */
.hb-bee-light{filter:blur(8px)!important;background:radial-gradient(circle,rgba(255,255,236,.72),rgba(255,205,61,.27) 34%,transparent 72%)!important}
.hb-flying-bee img{filter:drop-shadow(0 4px 5px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(255,201,59,.32))!important}

@keyframes hbOrbit{to{transform:rotate(360deg)}}
@keyframes hbCardBreath{0%,100%{box-shadow:0 0 0 1px rgba(255,193,42,.08),0 0 20px rgba(255,174,15,.16),0 28px 75px rgba(0,0,0,.68)}50%{box-shadow:0 0 0 1px rgba(255,208,72,.16),0 0 32px rgba(255,174,15,.34),0 28px 75px rgba(0,0,0,.72)}}
@keyframes hbSpark{0%,100%{opacity:.20;transform:scale(.55)}45%{opacity:1;transform:scale(1.15)}70%{opacity:.45;transform:scale(.8)}}
@keyframes hbButtonShine{0%,100%{background-position:100% 50%}50%{background-position:0% 50%}}
@keyframes hbSweep{0%,18%{left:-30%;opacity:0}28%{opacity:1}56%,100%{left:120%;opacity:0}}

@media(max-width:800px){
  body.hb-auth-page:before{background:radial-gradient(ellipse at 50% 100%,rgba(255,184,24,.28),transparent 38%),linear-gradient(180deg,rgba(0,0,0,.74) 0%,rgba(0,0,0,.55) 44%,rgba(0,0,0,.88) 100%)!important}
  .hb-card{box-shadow:0 0 18px rgba(255,174,15,.22),0 20px 55px rgba(0,0,0,.70)!important}
}
@media(prefers-reduced-motion:reduce){.hb-card,.hb-primary,.hb-card:before,.hb-card .hb-mini:before,.hb-card .hb-mini:after{animation:none!important}.hb-primary:after{display:none!important}}

/* FINAL VISIBILITY + RESPONSIVE LAYOUT FIX
   Prevent the luxury animation layer from hiding/blur-fading the login card. */
body.hb-auth-page{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body.hb-auth-page .hb-auth-wrap{
  width:min(1450px,calc(100% - 48px))!important;
  margin:0 auto!important;
  padding:44px 0 155px!important;
  grid-template-columns:minmax(0,1fr) minmax(470px,540px)!important;
  gap:clamp(30px,4vw,70px)!important;
  align-items:center!important;
}
body.hb-auth-page .hb-brand-side{
  min-width:0!important;
  width:100%!important;
  justify-self:stretch!important;
  box-sizing:border-box!important;
}
body.hb-auth-page .hb-card{
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  visibility:visible!important;
  will-change:box-shadow!important;
  animation:hbCardBreath 3.8s ease-in-out infinite!important;
}

/* Keep the moving gold border, but never let the effect layer cover form content. */
body.hb-auth-page .hb-card:before{z-index:1!important;pointer-events:none!important}
body.hb-auth-page .hb-card:after{z-index:1!important;pointer-events:none!important}
body.hb-auth-page .hb-card > *{position:relative!important;z-index:3!important}

@media(max-width:1100px){
  body.hb-auth-page .hb-auth-wrap{
    width:min(100% - 32px,1000px)!important;
    grid-template-columns:minmax(0,1fr) minmax(420px,500px)!important;
    gap:28px!important;
  }
}
@media(max-width:800px){
  body.hb-auth-page .hb-auth-wrap{
    width:calc(100% - 24px)!important;
    margin:0 auto!important;
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
    padding:28px 0 145px!important;
  }
  body.hb-auth-page .hb-brand-side,
  body.hb-auth-page .hb-card{
    width:100%!important;
    max-width:540px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}