/* BLACKSAW2081 LAB v2.8.44 — stabilny system ramy 9-slice */

/*
  9 stref:
  4 stałe narożniki + 4 rozciągane belki + teksturowany środek.
  Narożniki nie zmieniają rozmiaru wraz z treścią.
*/
.phase-toast{
  --bs-corner-w:96px;
  --bs-corner-h:82px;
  --bs-edge:16px;

  width:min(560px,88vw)!important;
  min-width:0!important;
  min-height:156px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:0 22px 60px rgba(0,0,0,.68)!important;
  isolation:isolate!important;
  text-align:center!important;
}

/* Środkowy, elastyczny plaster. Tło nie może wyjść poza ramę. */
.phase-toast>.blacksaw-frame-content{
  position:relative!important;
  z-index:3!important;
  min-height:156px!important;
  margin:0!important;
  padding:36px 112px 43px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:
    linear-gradient(180deg,rgba(6,7,9,.20),rgba(3,4,6,.48)),
    url('../images/ui/frame_background.png') center/cover no-repeat!important;
  box-shadow:inset 0 0 34px rgba(0,0,0,.48)!important;
}

/* Stałe narożniki — nigdy nie są rozciągane. */
.phase-toast>.blacksaw-frame-corner{
  position:absolute!important;
  width:var(--bs-corner-w)!important;
  height:var(--bs-corner-h)!important;
  aspect-ratio:auto!important;
  z-index:8!important;
  opacity:1!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.88))!important;
}
.phase-toast>.frame-top-left{left:0!important;top:0!important}
.phase-toast>.frame-top-right{right:0!important;top:0!important}
.phase-toast>.frame-bottom-left{left:0!important;bottom:0!important}
.phase-toast>.frame-bottom-right{right:0!important;bottom:0!important}

/* Cztery rozciągane plastry krawędzi. */
.phase-toast>.bs-nine-edge{
  position:absolute!important;
  z-index:6!important;
  pointer-events:none!important;
  background:
    linear-gradient(180deg,#302523 0%,#0b0c0f 38%,#141114 67%,#3b2420 100%)!important;
  border-color:rgba(238,20,71,.50)!important;
  box-shadow:
    inset 0 0 5px rgba(255,92,42,.16),
    0 0 8px rgba(0,0,0,.78)!important;
}
.phase-toast>.bs-nine-edge-top{
  top:5px!important;
  left:calc(var(--bs-corner-w) - 9px)!important;
  right:calc(var(--bs-corner-w) - 9px)!important;
  height:var(--bs-edge)!important;
  border-top:1px solid rgba(238,20,71,.54)!important;
}
.phase-toast>.bs-nine-edge-bottom{
  bottom:5px!important;
  left:calc(var(--bs-corner-w) - 9px)!important;
  right:calc(var(--bs-corner-w) - 9px)!important;
  height:var(--bs-edge)!important;
  border-bottom:1px solid rgba(238,20,71,.54)!important;
}
.phase-toast>.bs-nine-edge-left{
  left:5px!important;
  top:calc(var(--bs-corner-h) - 8px)!important;
  bottom:calc(var(--bs-corner-h) - 8px)!important;
  width:var(--bs-edge)!important;
  border-left:1px solid rgba(238,20,71,.54)!important;
}
.phase-toast>.bs-nine-edge-right{
  right:5px!important;
  top:calc(var(--bs-corner-h) - 8px)!important;
  bottom:calc(var(--bs-corner-h) - 8px)!important;
  width:var(--bs-edge)!important;
  border-right:1px solid rgba(238,20,71,.54)!important;
}

/* Tekst zawsze w centrum elastycznej strefy. */
.phase-toast>.blacksaw-frame-content>strong,
.phase-toast>.blacksaw-frame-content>span,
.phase-toast>.blacksaw-frame-content>small{
  display:block!important;
  width:100%!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.phase-toast>.blacksaw-frame-content>strong{margin-bottom:3px!important}
.phase-toast>.blacksaw-frame-content>span{margin:0 0 6px!important}
.phase-toast>.blacksaw-frame-content>small{margin:0!important;line-height:1.35!important}

/* Pasek czasu w dolnym, wewnętrznym plastrze. */
.phase-toast>.message-progress{
  position:absolute!important;
  z-index:9!important;
  left:112px!important;
  right:112px!important;
  bottom:24px!important;
  top:auto!important;
  margin:0!important;
}

/* Loader znika płynniej i nie czeka na ciężkie animacje. */
.app-loader{
  transition:opacity .18s ease,visibility .18s ease!important;
}
.app-loader-track span{
  transition:width .08s linear!important;
}

@media(max-width:720px){
  .phase-toast{
    --bs-corner-w:76px;
    --bs-corner-h:65px;
    --bs-edge:12px;
    min-height:140px!important;
  }
  .phase-toast>.blacksaw-frame-content{
    min-height:140px!important;
    padding:31px 88px 39px!important;
  }
  .phase-toast>.message-progress{
    left:88px!important;
    right:88px!important;
    bottom:21px!important;
  }
}