﻿/* Manor ISP Final UX V2.7.4 START */
#payment-billing{
  scroll-margin-top:118px;
  outline:none;
}
#payment-billing.payment-anchor-focus{
  animation:manorPaymentAnchorFocus 1.35s ease;
}
@keyframes manorPaymentAnchorFocus{
  0%{box-shadow:0 0 0 0 rgba(77,217,255,.52),var(--shadow);}
  55%{box-shadow:0 0 0 10px rgba(77,217,255,.12),var(--shadow);}
  100%{box-shadow:var(--shadow);}
}

/* Premium Manor Telecom-style scroll pilot. */
.manor-scroll-pilot{
  --manor-progress:0deg;
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:190;
  min-width:148px;
  height:68px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:7px 8px 7px 22px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--heading);
  background:linear-gradient(145deg,var(--surface),var(--surface-soft));
  box-shadow:0 18px 44px rgba(2,8,20,.34),inset 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.96);
  transition:opacity .24s ease,transform .24s ease,visibility .24s ease,border-color .24s ease,box-shadow .24s ease;
  -webkit-tap-highlight-color:transparent;
}
.manor-scroll-pilot.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.manor-scroll-pilot:hover{
  border-color:rgba(77,217,255,.55);
  box-shadow:0 22px 50px rgba(2,8,20,.44),0 0 0 5px rgba(77,217,255,.08);
}
.manor-scroll-pilot:focus-visible{
  outline:3px solid rgba(77,217,255,.38);
  outline-offset:4px;
}
.manor-scroll-pilot-label{
  order:2;
  min-width:58px;
  text-align:center;
  font-size:16px;
  line-height:1;
  font-weight:900;
  letter-spacing:.12em;
  color:var(--muted);
}
.manor-scroll-pilot-disc{
  order:1;
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#07101f;
  background:conic-gradient(var(--green) var(--manor-progress),rgba(119,145,179,.24) 0deg);
}
.manor-scroll-pilot-disc::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:inherit;
  background:linear-gradient(145deg,var(--green),var(--cyan));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.manor-scroll-pilot-arrow,
.manor-scroll-pilot-value{
  position:relative;
  z-index:1;
}
.manor-scroll-pilot-arrow{
  width:19px;
  height:19px;
  margin-top:-8px;
  transition:transform .25s ease;
}
.manor-scroll-pilot-value{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  font-size:8px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.02em;
  color:#07101f;
}
.manor-scroll-pilot.is-at-top{
  padding:7px 8px 7px 22px;
}
.manor-scroll-pilot.is-at-top .manor-scroll-pilot-label{order:1;}
.manor-scroll-pilot.is-at-top .manor-scroll-pilot-disc{order:2;}
.manor-scroll-pilot:not(.is-at-top) .manor-scroll-pilot-arrow{transform:rotate(180deg);}

/* Suppress legacy top controls when present, leaving the premium control as the only one. */
.back-to-top,
.scroll-to-top,
.scroll-top-button,
.to-top-button{
  display:none!important;
}

@media(max-width:680px){
  #payment-billing{scroll-margin-top:92px;}
  .manor-scroll-pilot{right:12px;bottom:12px;min-width:128px;height:60px;padding-left:17px;gap:8px;}
  .manor-scroll-pilot-disc{width:46px;height:46px;flex-basis:46px;}
  .manor-scroll-pilot-label{min-width:52px;font-size:14px;}
  .manor-scroll-pilot-arrow{width:17px;height:17px;}
  .manor-scroll-pilot-value{bottom:6px;font-size:7px;}
}
@media(prefers-reduced-motion:reduce){
  #payment-billing.payment-anchor-focus{animation:none;}
  .manor-scroll-pilot,.manor-scroll-pilot-arrow{transition:none;}
}
/* Manor ISP Final UX V2.7.4 END */
