/* KRAZYFI UI STABILIZATION V1
   Loaded after Mobile Foundation and Design Normalization.
   Intentionally narrow: fixes shared shell regressions without redesigning feature pages. */

/* Keep the shared header predictable on desktop. */
.top{
  width:100%;
  min-width:0;
}
.top .brand{flex:0 0 auto}
.top .kf-main-nav{min-width:0}
.kmf-mobile-toggle{position:relative}

/* Authentication pages should look like focused forms, not full dashboards. */
body.kf-auth-page .krazyfi-global-search-wrap,
body.kf-auth-page .ku-upgrade-bar,
body.kf-auth-page .addon-side-left,
body.kf-auth-page .addon-side-right,
body.kf-auth-page .krazyfi-live-ad-top,
body.kf-auth-page .krazyfi-live-ad-player,
body.kf-auth-page .krazyfi-live-ad-footer{
  display:none!important;
}

body.kf-auth-page main.wrap{
  width:min(100%,560px)!important;
  max-width:560px!important;
  margin:clamp(32px,7vh,84px) auto!important;
  padding-left:18px!important;
  padding-right:18px!important;
}

body.kf-auth-page main.wrap>.card,
body.kf-auth-page main.wrap>.panel,
body.kf-auth-page main.wrap>.form{
  width:100%!important;
  max-width:100%!important;
  padding:clamp(20px,4vw,34px)!important;
  border-radius:22px!important;
}

body.kf-auth-page main.wrap h1{
  margin-bottom:20px;
  font-size:clamp(1.9rem,4vw,2.55rem)!important;
}

body.kf-auth-page main.wrap form{
  display:block!important;
}

body.kf-auth-page main.wrap label{
  margin-top:14px;
}

body.kf-auth-page main.wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
body.kf-auth-page main.wrap select,
body.kf-auth-page main.wrap textarea{
  width:100%!important;
  min-height:48px;
}

body.kf-auth-page main.wrap form>.btn,
body.kf-auth-page main.wrap form>button[type="submit"]{
  width:100%;
  margin-top:18px;
}

body.kf-auth-page main.wrap p .btn{
  width:100%;
}

/* Prevent broad normalization rules from stretching icon/navigation buttons. */
.kmf-mobile-toggle,
.kf-nav-dd-btn,
.kn-bell,
button[aria-label="Open navigation"]{
  width:auto;
}

/* The mobile drawer button must never inherit global full-width button rules. */
@media (max-width:900px){
  .kmf-mobile-toggle,
  button.kmf-mobile-toggle,
  button[aria-label="Open navigation"]{
    display:inline-flex!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    margin:0!important;
  }

  .top{
    flex-wrap:nowrap!important;
  }

  .top .brand{
    flex:1 1 auto!important;
    max-width:calc(100% - 56px)!important;
  }

  .top .kf-main-nav{
    max-width:min(88vw,360px)!important;
  }

  body.kf-auth-page main.wrap{
    margin:24px auto 42px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  body.kf-auth-page main.wrap>.card,
  body.kf-auth-page main.wrap>.panel,
  body.kf-auth-page main.wrap>.form{
    padding:18px!important;
    border-radius:18px!important;
  }
}

/* Do not let the smallest-screen global button rule affect compact header controls. */
@media (max-width:420px){
  .kmf-mobile-toggle,
  .kf-nav-dd-btn,
  .kn-bell,
  button[aria-label="Open navigation"]{
    width:auto!important;
  }

  .kmf-mobile-toggle,
  button.kmf-mobile-toggle,
  button[aria-label="Open navigation"]{
    width:44px!important;
  }
}

/* Persistent player mobile protection */
@media (max-width:760px){

  #kfPersistentPlayer{
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  #kfPersistentPlayer .kf-player-inner{
    display:grid!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;

    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "track controls"
      "progress progress"!important;

    gap:6px 8px!important;
  }

  #kfPersistentPlayer .kf-track{
    grid-area:track!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
  }

  #kfPersistentPlayer .kf-controls{
    grid-area:controls!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }

  #kfPersistentPlayer .kf-progress-wrap{
    grid-area:progress!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #kfPersistentPlayer .kf-actions{
    display:none!important;
  }

  #kfPersistentPlayer .kf-btn,
  #kfPersistentPlayer button{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    flex:0 0 auto!important;
    margin:0!important;
  }

  #kfPersistentPlayer #kfProgress{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #kfPersistentPlayer #kfOffline,
  #kfPersistentPlayer #kfStop{
    display:none!important;
  }
}


/* Mobile viewport lock
   Prevents the full website from sliding horizontally and exposing black space. */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body,
main,
header,
footer,
.top,
.wrap,
.krazyfi-global-search-wrap,
.krazyfi-live-ad-top,
.krazyfi-live-ad-player,
.krazyfi-live-ad-footer{
  max-width:100%!important;
  box-sizing:border-box!important;
}

@media (max-width:900px){
  body{
    position:relative;
  }

  .top,
  main,
  .wrap{
    min-width:0!important;
  }

  img,
  video,
  iframe,
  canvas,
  svg{
    max-width:100%!important;
  }
}