*{
	box-sizing: border-box;
	padding: 0px;
	margin: 0px;
}

@font-face {
    font-family: Roboto-Regular; 
    src: url(../../fonts/Roboto-Regular.ttf);
}

@font-face {
    font-family: Roboto-Medium; 
    src: url(../../fonts/Roboto-Medium.ttf);
}

@font-face {
    font-family: aptly; 
    src: url(../../fonts/aptly.otf);
}


@font-face {
    font-family: Roboto-Bold; 
    src: url(../../fonts/Roboto-Bold.ttf);
}

:root { color-scheme: dark; } 


html, body {
  height: 100%;
  background: #121212 !important; 
  overscroll-behavior-y: contain;              

}





@supports (-webkit-touch-callout: none) {
  html, body { height: -webkit-fill-available; }
}


body{
	background-color: #121212;
	color: #fff;
	font-family: Roboto-Regular; 
	font-size: 16px;
  	margin: 0;
  	min-height: 100vh;    
	min-height: -webkit-fill-available;     
  	display: flex;
  	flex-direction: column;
}

:root{
 --hue:223;
 --bg:hsl(var(--hue),10%,90%);
 --fg:hsl(var(--hue),10%,10%);
 --trans-dur:.3s;
 font-size:calc(28px + (60 - 28)*(100vw - 280px)/(3840 - 280));
}


a{
	text-decoration: none;
	color: #fff;
}


#app{
  width:30%;
  margin:0 auto;
  position:relative;
  z-index:10;
  flex:1 0 auto;
}

/* фикс-оверлей на весь экран */
#app-loader{
  position:fixed; inset:0;
  background:#121212;
  z-index:9999;
  display:grid;
  place-items:center;   /* идеальное центрирование */
  opacity:1;
  transition:opacity .25s ease;
  margin-top: -20px;
}
/* скрытое состояние */
#app-loader.hidden{
  opacity:0;
  pointer-events:none;
}
/* блокируем прокрутку, пока показан лоадер */
body.no-scroll{ overflow:hidden; }

/* синий спиннер */
.rvpn-spinner{
  width:48px; height:48px;
  border:3px solid rgba(0,131,237,.25);
  border-top-color:#0083ED;
  border-radius:50%;
  animation:rvpn-spin .8s linear infinite;
}
@keyframes rvpn-spin{ to{ transform:rotate(360deg); } }




header{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	z-index: 10;
	padding: 10px;
	font-family: Roboto-Medium; 
}

.circleBg {
  position: absolute;
  pointer-events: none;
  display: flex;
  flex-direction: row;
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
  border-radius: 100%;
  background: radial-gradient( circle, #0F68BB33 0%, #0F68BBBF 30%, #0F68BB80 60%, #0F68BBD4 100% );
  filter: blur(50px);
  top: 0;
  z-index: 0;
  transform: translateY(-80%);
  z-index: -5;
}


.logo-section{
	display: flex;
	align-items: center;
	font-size: 20px;
	text-transform: uppercase;
	font-family: Roboto-Medium; 
	color: #fff;

}

.logo{
	margin-right: 5px;
	transform: translateY(3px);
}




/*‑‑ анимация вращения кольца ‑‑*/
@keyframes spin { to { transform: rotate(360deg); } }

/*‑‑ контейнер спиннера (размер / отражение) ‑‑*/
.loader-container{
  position:relative;
  width:250px;               /* +100 px */
  height:250px;              /* +100 px */
  margin:50px auto 0;
}

/*‑‑ базовое кольцо ‑‑*/
.loader{
  position:absolute;inset:0;border-radius:50%;
  animation:spin 5s linear infinite;
}

/*‑‑ полукольца с градиентом (динамический «след») ‑‑*/
.loader1::before,
.loader2::before{
  content:"";
  position:absolute;inset:0;left:0;width:50%;
  background:linear-gradient(to top,transparent,rgba(18,130,233,.45));
  background-size:150px 270px;            /* пропорционально +100 px */
  background-repeat:no-repeat;
  border-top-left-radius:150px;            /* +50 px */
  border-bottom-left-radius:150px;         /* +50 px */
}

/*‑‑ второе кольцо сдвинуто по фазе + лёгкий hue‑shift ‑‑*/
.loader2,
.loader4{
  animation-delay:-2.5s;      /* половина 5‑секундного цикла */
  filter:hue-rotate(-18deg);
}

/*‑‑ бегущие «точки» на окружности ‑‑*/
.loader i{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:20px;height:20px;border-radius:50%;
  background:#0F68BB;z-index:100;
  box-shadow:
    0 0 10px #0F68BB,0 0 20px #0F68BB,0 0 30px #0F68BB,
    0 0 40px #0F68BB,0 0 50px #0F68BB,0 0 60px #0F68BB;
}

/*‑‑ внутренняя «заглушка» ‑‑*/
.loader span{
  position:absolute;
  inset:20px;                /* толщина дорожки остаётся прежней */
  border-radius:50%;
  background:#121212;        /* ваш фон под спиннером */
  z-index:1;
}


.nav-menu{
	position: fixed;
	left: 0;
	right: 0;
	width: 30%;
	margin: 0 auto;
	bottom: 0;
	border: 2px solid transparent;
	background-color: #1212129e;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border: 2px solid #39333D40;
	border-bottom-color: none;
	display: flex;
	align-items: center;
	backdrop-filter: blur(15px);
	z-index: 10;
	opacity: 0;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {

.nav-menu {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); 
  }

}



.btnMenuNav{
	width: 20%;
	padding: 10px;
	border-radius: 10px;
	background: transparent;
	transition: 0.3s;
}

.btnMenuNav:hover{
	width: 20%;
	padding: 10px;
	border-radius: 10px;
	background: #302E3236;
	transition: 0.3s;
}


.activeTabNav{
	width: 20%;
	padding: 10px;
	border-radius: 10px;
	background: #302E3236;
	transition: 0.3s;
}


.activeTabNav .iconNav_image{
	border: 2px solid #0085FF54;
  	box-shadow: 0px 0px 20px 0px #0085FF40;
}




.iconNav_image{
	border: 1px solid transparent;
	background-color: #554E5A3B;
	border-radius: 50%;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0 auto;
}

.titleNav_text{
	font-size: 13px;
	text-align: center;
	margin-top: 7px;
	color: #ffffffbf;
}

.icon_r_vpn{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -60px;
	background-color: #0085FF;
	padding: 8px;
	border-radius: 50%;
	width: 75px;
	height: 75px;
	box-shadow: 0px 0px 30px 0px #0085FF;
	transition: 0.3s;
}

.icon_r_vpn img{
	width: 45px;
}

.btnVpnMenuNav{
	width: 20%;
	padding: 10px;
	border-radius: 10px;
	background: transparent;
	transition: 0.3s;
}

.btnVpnMenuNav:hover .icon_r_vpn{
	box-shadow: 0px 0px 50px 0px #0085FF;
	transition: 0.3s;
}


#spiral{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	width: 80%;
	height: 80%;
	margin-top: 25px;
	border-radius: 50%;
}

circle {
  fill: #0072DB7A;
  opacity: 0.6;
}


.logoVPNmiddle{
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	text-align: center;
	width: 80%;
	height: 80%;
	margin-top: 25px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {

.logoVPNmiddle{
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
  }

}
*/


.contStatus_subscribe{
	margin-top: 20px;
	text-align: center;
}

.contSubscribe_inactive{
	padding: 10px;
  	border: 2px solid #29262B69;
  	background-color: #29262B29;
  	color: #ffffff7a;
  	border-radius: 30px;
  	display: none;
}

.contSubscribe_active{
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.greenActiveSubscribe{
	padding: 10px;
  	border: 2px solid #5aec8c63;
  	background-color: #5aec8c17;
  	color: #5aec8c;
  	border-radius: 30px;
  	width: 48%;
}

.dateSubscribe{
	padding: 10px;
  	border: 2px solid #29262B;
  	background-color: #29262B3B;
  	color: #ffffff73;
  	border-radius: 30px;
  	width: 48%;
}

.btnExtendSubscribe{
	padding: 15px;
	background-color: #0085FF;
	text-align: center;
	border-radius: 15px;
	margin-top: 15px;
	width: 100%;
	font-family: Roboto-Medium;
	transition: 0.3s;
	cursor: pointer;
}

.btnCancelSubscribe{
	padding: 15px;
	background-color: #29262B;
	text-align: center;
	border-radius: 15px;
	margin-top: 15px;
	width: 100%;
	font-family: Roboto-Medium;
	transition: 0.3s;
	cursor: pointer;
}

.refcontMain{
	padding: 15px;
	border-radius: 20px;
	margin-top: 20px;
	background: radial-gradient(61.63% 100.04% at 43.18% 123.86%, #0085FFCF 0%, #0085FF00 100%), linear-gradient(#0085FF00 0%, #0085FF1A 100%);
	font-size: 16px;
}

.devicescontMain{
	padding: 15px;
	border-radius: 20px;
	margin-top: 20px;
	background: radial-gradient(61.63% 100.04% at 43.18% 123.86%, #0085FFCF 0%, #0085FF00 100%), linear-gradient(#0085FF00 0%, #0085FF1A 100%);
	font-size: 16px;
	margin-bottom: 50px;
}

.refscontMain{
	padding: 15px;
	border-radius: 20px;
	margin-top: 20px;
	background: radial-gradient(61.63% 100.04% at 43.18% 123.86%, #0085FF 0%, #0085FF00 100%), linear-gradient(#0085FF00 0%, #0085FF1A 100%);
	font-size: 16px;
}

.promocontMain{
	padding: 15px;
	border-radius: 20px;
	margin-top: 20px;
	background: radial-gradient(61.63% 100.04% at 43.18% 123.86%, #0085FF 0%, #0085FF00 100%), linear-gradient(#0085FF00 0%, #0085FF1A 100%);
	font-size: 16px;
	margin-bottom: 20px;
}



.titleContRef{
	font-size: 20px;
	font-family: Roboto-Medium;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
}


.contRowLink{
	background-color: #0085FF17; 
	font-size: 15px;
	margin-top: 15px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.iconTitle{
	transform: translateY(3px);
	margin-right: 5px;
}

.rulesRefs{
	line-height: 25px;
	font-size: 15px;
}


.valueRefLink{
	padding: 15px;
}

.btnCopyRefLink{
	background-color: #151316;
	padding: 15px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	cursor: pointer;
}

.btn_gosettings{
	background-color: #0085ff73;
	padding: 15px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	cursor: pointer;
}

.btnCopyRefLink_bonus{
	background-color: #0085ff73;
	padding: 15px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	cursor: pointer;
}

.btnCopyLink_connect{
	background-color: #0085ff73;
	padding: 20px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	cursor: pointer;
}


.btnMethodFree{
	background-color: #0085ff3d;
	padding: 20px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	cursor: pointer;
}



@media(max-height: 900px){

#app{
	margin-bottom: 150px;
}


}


@media(max-width: 1500px){

#app{
	width: 40%;
}

.nav-menu{
	width: 40%;
}


}

@media(max-width: 1100px){

#app{
	width: 60%;
}

.nav-menu{
	width: 60%;
}


}

@media(max-width: 800px){

#app{
	width: 80%;
}

.nav-menu{
	width: 80%;
}


}

@media(max-width: 500px){

#app{
	width: 95%;
}



.nav-menu{
	width: 100%;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border: none;
	/* padding-bottom: 25px; */
	padding-top: 5px;
}


.btnMenuNav{
	padding: 5px;
	padding-bottom: 20px;
}

.btnMenuNav:hover{
	padding: 5px;
	padding-bottom: 20px;
}

.icon_r_vpn img{
	width: 35px;
}


}







/* ===== базовая раскладка ================================================= */
.plan-picker{
  position:relative;
  max-width:700px;width:100%;
  margin:50px auto 0;
  display:flex;justify-content:center;align-items:center;
  margin-bottom: 30px;
}
.plan-picker__box{
  position:relative;
  width:100%;
  border-radius:25px;
  background-color: #39333D05;
  box-sizing:border-box;
  backdrop-filter: blur(15px);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {

.plan-picker__box {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px); 
  }

}


/* ===== переключатель Month / Year ======================================= */
.plan-picker__switch{
  position:relative;
  display:flex;
  width:100%;
  padding:15px;
  border-radius:30px;
  background:#222024;
  cursor:pointer;
}
.plan-picker__switch-bg{
  position:absolute;
  top:6px;
  left:8px;
  width:calc(50% - 6px);
  height:calc(100% - 12px);
  background:#0085FF;
  color: #fff;
  border-radius:25px;
  transition:all .3s linear;
}
.plan-picker__switch-btn{
  flex:1 1 50%;text-align:center;font-size:17px;
  font-weight:600;padding:5px 15px;
  transition:color .3s linear;position:relative;z-index:1;
	display: flex;
  	justify-content: center;
  	align-items: center;
	font-size: clamp(14px, 2.2vw, 17px);  
}
.plan-picker__switch-btn--active{color:#fff;}

/* ===== лист тарифов ====================================================== */
.plan-picker__pricing{display:none;margin-top:20px;}
.plan-picker__pricing--active{display:block;}

/* ===== карточка тарифа =================================================== */
.plan-picker__item{
  position:relative;
  display:flex;
  justify-content:space-between;
  padding:15px;
  margin-bottom:10px;
  cursor:pointer;
  border:2px solid #F3F3F20D;
  border-radius:15px;
  transition:all .3s linear;
  color:#fff;
}
.plan-picker__item--active{border-color:#0085FF;}

/* ===== описание тарифа =================================================== */
.plan-picker__info h2{
  margin:0 0 3px;font-size:20px;font-weight:500;
}
.plan-picker__info h2 span{
  display: inline-block;
  font-size: 16px;
  color: #0085FFE5;
  margin-left: 5px;
  border-radius: 5px;
  font-weight: 400;
  transform: translateY(-1px);
}
.plan-picker__money{
  display:block;font-size:17px;font-weight:500;
}
.plan-picker__money span{color:#838388;font-weight:400;}

/* ===== индикатор выбранного тарифа ======================================= */
.plan-picker__select{
  width:20px;height:20px;border:2px solid #838388;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all .3s linear;
}
.plan-picker__select i{display:none;font-size:11px;line-height:1;color:#fff;}
.plan-picker__select--active{
  background:#0085FF;border-color:#0085FF;
  box-shadow: 0px 0px 30px 0px #0085FFA8;
}
.plan-picker__select--active i{display:block;}

/* ===== кнопка действия =================================================== */
.plan-picker__action{
	padding: 20px;
  	background-color: #0085FF;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	width: 100%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: pointer;
	  font-size: clamp(17px, 2.2vw, 18px); 
}

.feedback_add__action{
	padding: 20px;
  	background-color: #0085FF;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	width: 100%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: pointer;
	font-size: clamp(15px, 2.2vw, 17px); 
}

.feedback_add__action i{
	margin-right: 5px;
}

.feedback_isset__action{
	padding: 20px;
  	background-color: #1A191B;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	width: 100%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: not-allowed;
	font-size: clamp(15px, 2.2vw, 17px); 	
}

.feedback_isset__action i{
	margin-right: 5px;
}


.user-id{
	text-align: center;
	margin-top: 15px;
	opacity: 0.5;
	cursor: pointer;
}

.user-id i{
	margin-left: 5px;
}

/* ===== адаптив =========================================================== */
@media (max-width:768px){
  .plan-picker{max-width: 100%;}
}



.freecontMain{
	padding: 15px;
	border-radius: 20px;
	margin-top: 50px;
	background-image: url('../../image/promo.svg');
  	background-size: cover;
	  background-position: 860px;
	font-size: 16px;
}


.contHelloFeedbacks{
	margin-top: 50px;
}


#iconfeedback_an{
	width: 150px;
	margin: 0 auto;
}


.titleContMiddle{
	text-align: center;
	font-family: Roboto-Medium;
	font-size: 25px;
	margin-top: 10px;
}

.bl-cont-feedbacks{
	background: radial-gradient(61.63% 100.04% at 49.18% 123.86%, #0085FFCF 0%, #0085FF00 100%), linear-gradient(#0085FF00 0%, #0085FF1A 100%);
	margin-top: 20px;
	border-radius: 20px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}



.numMeanRaiting{
	font-size: 40px;
	font-family: Roboto-Medium;
}

.countStars{
	color: #FFD527;
	margin-bottom: 5px;
}

.titleMean{
	font-size: 15px;
	margin-bottom: 3px;
	color: #ffffffb0;
}


.totalCountsFeedbacks{
	color: #ffffffab;
	text-align: right;
}

.contMeanInfo{
	text-align: left;
}

.row-wrap-feedbacks{
	display: flex;
	align-items: center;
	margin-top: 50px;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 150px;
}


.contFeedbackItem{
	background-color: #2220238a;
	padding: 10px;
	border-radius: 15px;
	width: 100%;
}

.headerFeedback{
	padding: 5px;
	border: 1px solid transparent;
	border-bottom-color: #ffffff0f;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 20px;

}

.avatarFeedback{
	width: 50px;
	height: 50px;
	background-size: cover;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.usernameUserFeedback{
	font-family: Roboto-Medium;
	color: #ffffffd6;
	font-size: 14px;
	margin-bottom: 3px;
}

.contLeftinfo_header{
	display: flex;
	align-items: center;
}

.infoUser_feeditem{
	margin-left: 10px;
}

.starsItemFeed{
	font-size: 13px;
	color: #FFFFFF;
}

.starActive{
	color: #FFD527;
}


.datePublicatedFeedback{
	text-align: right;
	font-size: 13px;
	color: #ffffff96;
}

.contTxtFeedbackitem{
	padding: 15px;
	font-size: 14px;
	margin-top: 14px;
	background-color: #2220238a;
	border-radius: 10px;
}


.titlePage-middle{
	margin-top: 50px;
	text-align: center;
	font-family: Roboto-Medium;
	font-size: 25px;

}


.bl-section{
	background-color: #0085FF30;
	padding: 10px;
	border-radius: 20px;
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 0.3s;
	color: #fff;
}

.bl-section:hover{
	opacity: 0.6;
	transition: 0.3s;
}

.iconWalletHeader{
	background-color: #0085FF;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 27px;
	height: 27px;
	text-align: center;
	margin-right: 7px;
}

.iconWalletHeader img{
	margin-left: 2px;
  	margin-top: -1px;
}

.btnDepositNav{
	margin-left: 7px;
	background-color: #fff;
	color: #000;
	border-radius: 50%;
	width: 23px;
	height: 23px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
}

.accordion{
	width: 90%;
	margin: 0 auto;
	margin-top: 40px;
}


.accordion .accordion-item {
  border-bottom: 1px solid #ffffff17;
}

.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #0085FF;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1.5em 0;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
  font-size: 18px;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #fff;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #fff;
  border: 1px solid #0085FF;
}

.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 28px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: '';
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: '';
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded='true'] {
  color: #0085FF;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 16px;
  font-weight: 300;
  margin-top: 15px;
  margin-bottom: 15px;
}



.btnSupport{
	background-color: #222023;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 15px;
	margin-top: 15px;
	transition: 0.3s;
	cursor: pointer;
	margin-bottom: 150px;
}

.btnSupport:hover{
	opacity: 0.5;
	transition: 0.3s;
}

.l-section-btn{
	display: flex;
	align-items: center;
}

.iconBtnL{
	margin-right: 7px;
}


.iconBtnR{
	border-radius: 50%;
	background-color: #2e2d2f;
	padding: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatarUserProfile{
	width: 100px;
	height: 100px;
	margin: 0 auto;
	margin-top: 70px;
	background-size: cover;
	background-position: center center;
	border-radius: 20px;
}

.row-tabs-profile-top{
	display: block;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
}

.cont-tab-p{
	background-color: #2220237a;
	padding: 20px;
	border-radius: 20px;
	width: 100%;
	min-height: 198px;
	margin-bottom: 10px;
}

.cont-tab-p-width{
	background-color: #2220237a;
	padding: 20px;
	border-radius: 20px;
	width: 100%;
}

.icon-sub-s{
	background-color: #EB291C;
	border-radius: 50%;
	width: 12px;
	height: 12px;

}



/* Красный индикатор */
.icon-sub-s.red-ping {
  background-color: #EB291C;
  animation: pulse-red 1.5s infinite;
}

/* Зелёный индикатор */
.icon-sub-s.green-ping {
  background-color: #18C964;
  animation: pulse-green 1.5s infinite;
}

/* Золотой индикатор */
.icon-sub-s.gold-ping {
  background-color: #F4CA16;
  animation: pulse-gold 1.5s infinite;
}



@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(235, 41, 28, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(235, 41, 28, 0); }
}

@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 201, 100, 0.7); }
  50% { box-shadow: 0 0 0 6px rgba(24, 201, 100, 0); }
}

@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 #F4CA161C; }
  50% { box-shadow: 0 0 0 6px #F4CA160A; }
}



.title-left{
	font-size: 15px;
	margin-bottom: 5px;
}

.value-bl-p{
	font-size: 23px;
	font-family: Roboto-Medium;
}

.value-bl-p span{
	color: #ffffff70;
	font-size: 21px;
}

.value-bl-p-card{
	font-size: 25px;
	font-family: Roboto-Medium;
	text-align: center
}


.row-status-subscribe{
	display: flex;
	align-items: center;
	margin-top: 20px;
	font-size: 15px;
	justify-content: space-between;
}

.date-expired{
	font-family: Roboto-Medium;
}

.date-expired i{
	color: #0085FF;
	margin-right: 4px;
}


.left-cont-p-index{
	display: flex;
	align-items: center;
}

.date-expired-p{
	opacity: 0.5; 
	font-size: clamp(12px, 2.2vw, 15px); 
}

.icon-sub-s{
	margin-right: 7px;
}

.date-active-subscribe{
	font-size: 14px;
  	margin-top: 13px;
  	color: #ffffff91;
  	background-color: #242429;
  	padding: 10px;
  	border-radius: 10px;
}

.row-config{
	font-size: 14px;
  	margin-top: 13px;
  	color: #ffffff91;
  	background-color: #02020254;
  	cursor: pointer;
  	border-radius: 10px;
	display: flex;
	align-items: center;
}

.icon-conf{
	font-size: clamp(16px, 2.2vw, 18px); 
	padding: 15px;
	width: 15%;
	text-align: center;
	background-color: #02020224;
	border-radius: 10px;
	margin-right: 6px;
}

.icon-copy-link{
	background-color: #0085FF26;
	padding: 15px;
	border-radius: 10px;
	color: #0085FF;
	font-size: clamp(16px, 2.2vw, 18px); 
	width: 15%;
	text-align: center;
}

.value-link-cong{
  display: block;        /* или inline-block */
  width: 70%;
  max-width: 100%;
  white-space: nowrap;   /* не переносить */
  overflow: hidden;      /* обрезать лишнее */
  text-overflow: ellipsis; /* троеточие */
}


.btn-deposit-p{
	background-color: #0085FF;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	margin-top: 15px;
	transition: 0.3s;
	font-size: 16px;
	font-family: Roboto-Medium;
}

.btn-deposit-p:hover{
	opacity: 0.7;
	transition: 0.3s;
}


.btn-settings-p{
	background-color: #181E27;
	padding: 15px;
	text-align: center;
	border-radius: 10px;
	margin-top: 15px;
	transition: 0.3s;
	font-size: 16px;
	font-family: Roboto-Medium;
}

.btn-settings-p:hover{
	opacity: 0.7;
	transition: 0.3s;
}



.row-btns-main{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 15px;
	
}


.btn-main-config{
	display: inline-block;
	background-color: #0202027a;
	padding: 15px;
	text-align: center;
	border-radius: 10px;
	transition: 0.3s;
	font-size: clamp(16px, 2.2vw, 17px); 
	font-family: Roboto-Medium;	
	width: 47%;
}


.btn-main-config i{
	margin-right: 5px;
}

.btn-main-manual{
	display: inline-block;
	background-color: #0202027a;
	padding: 15px;
	text-align: center;
	border-radius: 10px;
	transition: 0.3s;
	font-size: clamp(16px, 2.2vw, 17px); 
	margin-top: 10px;
	font-family: Roboto-Medium;	
	width: 100%;
}


.btn-main-manual i{
	margin-right: 5px;
}



.btn-tarif-p{
	background-color: #121212;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	margin-top: 7px;
	transition: 0.3s;
	font-size: 16px;
	font-family: Roboto-Medium;
}

.btn-tarif-p:hover{
	opacity: 0.7;
	transition: 0.3s;
}

.btn-pockets-p{
	background-color: #0202027a;
	padding: 15px;
	text-align: center;
	border-radius: 10px;
	margin-top: 15px;
	transition: 0.3s;
	font-family: Roboto-Medium;	
	font-size: clamp(16px, 2.2vw, 17px); 
}

.btn-pockets-p:hover{
	opacity: 0.7;
	transition: 0.3s;
}

.btn-pockets-p i{
	margin-right: 5px;
}



.outline-row{
	position: relative;
	background-color: #211f22bd;
	width: 100%;
	height: 35px;
	border-radius: 20px;
	display: flex;
	align-items: center;
	margin-top: 15px;
}

.percent-value-t{
	position: absolute;
	margin: 0 auto;
	width: 100%;
	text-align: center;
	font-size: clamp(16px, 2.2vw, 18px); 
	font-family: Roboto-Medium;
	text-shadow: 0px 0px 7px #000;

}

.inner-row-t{
	background-color: #0085FF;
	height: 35px;
	border-radius: 20px;
}

.row-t-rage{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px;
	font-size: clamp(15px, 2.2vw, 16px);
	margin-top: 5px;
}


.txt-spent{
	font-size: 14px;
	margin-top: 15px;
	color: #ffffff91;
}

footer{
	background-color: #171718;
	padding: 20px;
	margin: 0 auto;
	margin-top: auto;
	width: 100%;
	padding-bottom: 130px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.rowSectionInfo{
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.l-s-info{
	display: flex;
	align-items: center;
	font-size: 14px;
	width: 100%;
}

.description-secr{
	font-size: 13px;
	color: #ffffff52;
}

.iconSecurity{
	margin-right: 17px;
}

.dev-link img{
	width: 130px;
}












.device{
 margin: 0 auto;	
 margin-top: 70px;
 position:relative;
 width:4em;
 height:4em;
 transform: scale(1.2);

}
.device__a,
.device__a-1,
.device__a-2,
.device__b,
.device__c,
.device__d,
.device__e,
.device__f,
.device__g{
 animation:device-a 3s cubic-bezier(.65,0,.35,1) infinite;
 position:absolute;
 transition:background-color var(--trans-dur),box-shadow var(--trans-dur)
}
.device__a,
.device__d,
.device__e{
 background-color:hsl(var(--hue),10%,70%);
 box-shadow:0 0 0 .25em inset
}
.device__a{
 border-radius:.375em;
 top:0;
 width:4em;
 height:2.5em;
 z-index:1
}
.device__a-1,
.device__a-2{
 visibility:hidden
}
.device__a-1{
 animation-name:device-a-1;
 top:2.25em;
 left:1.5em;
 width:1em;
 height:.25em
}
.device__a-2{
 animation-name:device-a-2;
 top:.625em;
 right:0;
 width:.25em;
 height:.75em
}
.device__a-1,
.device__a-2,
.device__b,
.device__c,
.device__f,
.device__g{
 background-color:var(--fg);
 border-radius:.125em
}
.device__b{
 animation-name:device-b;
 top:2.25em;
 left:1.875em;
 width:.25em;
 height:1em
}
.device__c{
 animation-name:device-c;
 top:3em;
 left:1em;
 width:2em;
 height:.25em
}
.device__d,
.device__e{
 left:1.25em;
 width:1.5em;
 height:.875em;
 visibility:hidden
}
.device__d{
 animation-name:device-d;
 border-radius:.375em .375em 0 0;
 top:.75em
}
.device__e{
 animation-name:device-e;
 border-radius:0 0 .375em .375em;
 top:1.625em
}
.device__f,
.device__g{
 filter:blur(.375em);
 bottom:0;
 height:.25em
}
.device__f{
 animation-name:device-f;
 opacity:.5;
 left:1em;
 width:2em
}
.device__g{
 animation-name:device-g;
 opacity:0;
 left:0;
 width:4em
}
@media (prefers-color-scheme:dark){
 :root{
  --bg:hsl(var(--hue),10%,10%);
  --fg:hsl(var(--hue),10%,90%)
 }
 .device__a,
 .device__d,
 .device__e{
  background-color:hsl(var(--hue),10%,30%)
 }
}
/* Animations */
@keyframes device-a{
 from,to{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  left:0;
  width:4em;
  height:2.5em;
  transform:translateY(0)
 }
 12.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:0;
  width:4em;
  height:2.5em;
  transform:translateY(1.5em)
 }
 25%{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  left:0;
  width:4em;
  height:2.5em;
  transform:translateY(.375em)
 }
 37.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:0;
  width:4em;
  height:2.5em;
  transform:translateY(1.5em)
 }
 50%{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  left:1em;
  width:2em;
  height:3em;
  transform:translateY(.125em)
 }
 62.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:1em;
  width:2em;
  height:3em;
  transform:translateY(1em)
 }
 75%{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  left:1em;
  width:2em;
  height:2em;
  transform:translateY(.625em)
 }
 87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:1em;
  width:2em;
  height:2em;
  transform:translateY(1.375em)
 }
}
@keyframes device-a-1{
 from{
  animation-timing-function:steps(1,end);
  left:1.5em;
  width:1em;
  transform:translateY(0);
  visibility:hidden
 }
 12.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:1.5em;
  width:1em;
  transform:translateY(0);
  visibility:visible
 }
 25%,37.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:1.5em;
  width:1em;
  transform:translateY(-.5em);
  visibility:visible
 }
 50%,62.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:.875em;
  width:.25em;
  transform:translateY(0);
  visibility:visible
 }
 75%,to{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:.875em;
  width:.25em;
  transform:translateY(-.5em);
  visibility:hidden
 }
}
@keyframes device-a-2{
 from{
  animation-timing-function:steps(1,end);
  transform:translate(0,.375em);
  visibility:hidden
 }
 62.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translate(0,.375em);
  visibility:visible
 }
 75%,87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translate(.375em,0);
  visibility:visible
 }
 to{
  transform:translate(0,.25em);
  visibility:visible
 }
}
@keyframes device-b{
 from,to{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  transform:translateY(0);
  visibility:visible
 }
 10%,12.5%{
  animation-timing-function:steps(1,start);
  transform:translateY(.75em);
  visibility:visible
 }
 25%{
  animation-timing-function:steps(1,start);
  top:2.25em;
  left:1.875em;
  transform:translateY(.75em);
  visibility:hidden
 }
 87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translateY(.75em);
  visibility:hidden
 }
}
@keyframes device-c{
 from,to{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  transform:translateY(0);
  visibility:visible;
  width:2em
 }
 10%,12.5%{
  animation-timing-function:steps(1,start);
  transform:translateY(.75em);
  visibility:visible;
  width:2em
 }
 25%{
  animation-timing-function:steps(1,start);
  top:3em;
  left:1em;
  width:2em;
  transform:translateY(.75em);
  visibility:hidden
 }
 87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  left:1.5em;
  transform:translateY(.75em);
  visibility:hidden;
  width:1em
 }
}
@keyframes device-d{
 from{
  animation-timing-function:steps(1,end);
  transform:translateY(.25em);
  visibility:hidden
 }
 62.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translateY(.25em);
  visibility:visible
 }
 75%{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  transform:translateY(-.75em)
 }
 87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translateY(0)
 }
 to{
  transform:translateY(-.75em)
 }
}
@keyframes device-e{
 from{
  animation-timing-function:steps(1,end);
  transform:translateY(1.5em);
  visibility:hidden
 }
 62.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translateY(1.5em);
  visibility:visible
 }
 75%{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  transform:translateY(.75em)
 }
 87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  transform:translateY(1.5em)
 }
 to{
  transform:translateY(0)
 }
}
@keyframes device-f{
 from{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  filter:blur(.375em)
 }
 12.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  filter:blur(.1875em);
  opacity:.5
 }
 25%,to{
  filter:blur(.375em);
  opacity:0
 }
}
@keyframes device-g{
 from,12.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  background-color:var(--fg);
  filter:blur(.1875em);
  opacity:0
 }
 25%{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  background-color:var(--fg);
  filter:blur(.375em);
  opacity:.5
 }
 37.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  filter:blur(.1875em);
  opacity:.5;
  left:0;
  width:4em
 }
 50%,75%,to{
  animation-timing-function:cubic-bezier(.33,0,.67,0);
  filter:blur(.375em);
  opacity:.5;
  left:1em;
  width:2em
 }
 62.5%,87.5%{
  animation-timing-function:cubic-bezier(.33,1,.67,1);
  filter:blur(.1875em);
  opacity:.5;
  left:1em;
  width:2em
 }
}



.row-title-devices{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 30px;
	font-size: 18px;
}

.titleDevices span{
	color: #ffffff52;
}

.btn-devices-add{
	background-color: #0085FF;
  	padding: 10px;
  	text-align: center;
  	border-radius: 10px;
  	transition: 0.3s;
  	font-size: 16px;
}

.btn-devices-add i{
	font-size: 13px;
	margin-right: 5px;
}

.none-device{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 350px;
	color: #ffffff52;
}



.btn-back-page{
	background-color: #181818;
	color: #ffffffa1;
  	padding: 10px;
  	text-align: center;
  	border-radius: 10px;
  	transition: 0.3s;
  	font-size: 16px;
}

.btn-back-page i{
	font-size: 13px;
	margin-right: 5px;
}

.btn-back-page:hover{
	opacity: 0.5;
  	transition: 0.3s;
}

.title-add-devices{
	text-align: center;
	margin-top: 50px;
	font-family: Roboto-Medium;
	font-size: 20px;
}

.title-page-a{
	text-align: center;
	margin-top: 50px;
	font-family: Roboto-Medium;
	font-size: 20px;
}



.cont-add-devices{
	margin-top: 30px;
	margin-bottom: 200px;
}





/* глобальных селекторов нет — всё только внутри .radio-select */
.radio-select{
	--accent:#257dff;      /* цвет рамки и радиокнопки */
	--gap:10px;            /* расстояние между пунктами */
	--rad:12px;            /* радиус скругления карточки */
	font-family:"DM Sans",sans-serif;
	color:#fff;
	margin:0 auto;
}
.radio-select__form{
	display:flex;
	flex-direction:column;
	gap:var(--gap);
	position:relative;
	margin:0 auto;
}

/* карточка пункта */
.radio-select__item{
	position:relative;
	display:flex;
	align-items:center;
	padding:1.5em;
	border:2px solid #ffffff14;
	border-radius:var(--rad);
	background:#00000020;
	transition:background .3s;
	cursor: pointer;
}
.radio-select__item:hover{background:#ffffff10}

/* кастомная радио‑кнопка */
.radio-select__radio{
	appearance:none;
	width:1.5em;
	height:1.5em;
	margin-right:1em;
	flex-shrink:0;
	border-radius:50%;
	background:#000;
	box-shadow:0 0 0 2px var(--accent) inset;
	position:relative;
	cursor:pointer;
}
.radio-select__radio::after{
	content:"";
	position:absolute;
	inset:25%;
	border-radius:50%;
	background:var(--accent);
	transform:scale(0);
	transition:transform .25s cubic-bezier(.65,0,.35,1);
}
.radio-select__radio:checked::after{transform:scale(1)}

/* текст + иконка внутри карточки */
.radio-select__row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
}
.radio-select__text{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.radio-select__row svg{fill:#fff;height:1.5em;width:1.5em}

/* синяя обводка активного пункта */
.radio-select__item::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:var(--rad);
	border:2px solid var(--accent);
	opacity:0;
	pointer-events:none;
	transition:opacity .25s ease;
}
.radio-select__item:has(.radio-select__radio:checked)::after{opacity:1}

/* тёмная тема уже есть, можно лишь скорректировать акцент при желании */
@media (prefers-color-scheme:dark){
	.radio-select__item{background:#00000040}
	.radio-select__item:hover{background:#00000060}
}



.btn-add-devices_next-step{
	padding: 15px;
  	background-color: #0085FF;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	width: 100%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: pointer;
}


.mini-description-help{
	text-align: center;
	margin-top: 50px;
	margin-bottom: 30px;
}

.secondary-help{
	text-align: center;
	margin-top: 30px;
	color: #ffffff52;
	margin-bottom: 50px;
}

.download-app-btn{
	padding: 10px;
  	background-color: #181818;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	margin: 0 auto;
  	width: 70%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: pointer;
}

.nxtstep-btn{
	padding: 15px;
  	background-color: #0085FF;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	width: 100%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: pointer;	
  	margin-bottom: 250px;
}


.cont-promo{
	background-image: url('../../image/promo.svg');
	background-size: cover;
	width: 100%;
	min-height: 100px;
	border-radius: 20px;
	padding: 20px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 0.3s;
}

.cont-promo:hover .chevronIcon{
	transform: translateX(5px);
	transition: 0.3s;
}

.titlePromoRow{
	display: flex;
	align-items: center;
	font-size: 20px;
	font-family: Roboto-Medium;
}

.titlePromoRow img{
	margin-right: 10px;
	transform: translateY(3px);
}

.description-promo{
	margin-top: 5px;
	color: #ffffff81;
}

.chevronIcon{
	opacity: 0.6;
	transition: 0.3s;
}


.btn-out-services{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #19181A;
	padding: 15px;
	border-radius: 20px;
	margin-top: 20px;
	margin-bottom: 80px;
	opacity: 0.7;
	transition: 0.3s;
}

.btn-out-services:hover{
	opacity: 1;
	transition: 0.3s;
}

.iconOutbtn{
	margin-left: 5px;
	transform: translateY(3px);
	font-family: Roboto-Medium;
}


.row-title{
	width: 100%;
	border: 1px solid #ffffff0a;
	margin-top: 20px;
}

.cont-date-section{
	margin-top: 20px;
	margin-bottom: 10px;
}

.title-date-section{
	font-size: 20px;
	font-family: Roboto-Medium;
	margin-bottom: 15px;
	margin-top: 30px;
}

.inproccess-tab{
	margin-right: 3px;
}

.cont-tab-history{
	background-color: #181818;
	border-radius: 20px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: 0.3s;
}


.cont-tab-history:hover{
	opacity: 0.6;
	transition: 0.3s;
}

.cont-tab-history:hover .chevron-tab-history{
	margin-right: -3px;
	transition: 0.3s;
}



.icon-tab-history{
	padding: 20px;
	border-radius: 20px;
	background-color: #272727;
	width: 70px;
	height: 70px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}


.l-content-tab{
	display: flex;
	align-items: center;
}

.icon-tab-history{
	margin-right: 15px;
}

.title-tab{
	font-size: 17px;
}

.date-trans-tab{
	font-size: 14px;
	color: #ffffff52;
	margin-top: 3px;
}

.vl-summ-tab{
	font-size: 14px;
	font-family: Roboto-Medium;
}

.cont-history{
	min-height: 500px;
	margin-bottom: 50px;
}

.title-empty-history{
	text-align: center;
	margin-top: 20px;
	color: #ffffff52;
}


.r-content-tab{
	display: flex;
	align-items: center;
	margin-right: 20px;
}

.chevron-tab-history{
	margin-left: 15px;
	transform: translateY(2px);
	opacity: 0.3;
	margin-right: 0px;
	transition: 0.3s;
	font-size: 20px;
}

.deposit-val{
	background-color: #0D0D0D;
	border: 2px solid #202020;
	padding: 15px;
	border-radius: 20px;
	margin: 0 auto;
	text-align: center;
	width: 100%;
	margin-top: 10px;
	color: #fff;
	font-family: Roboto-Medium;
	font-size: 17px;
	outline: none;
}

.deposit-val:focus{
	border: 2px solid #0085FF9C;
	outline: none;
}

.row-varios-fast{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 7px;
	margin-top: 10px;
}

.tab-fast-dep{
	width: 25%;
	background-color: #202020;
	padding: 10px;
	text-align: center;
	border-radius: 10px;
	cursor: pointer;
	transition: 0.3s;
}

.tab-fast-dep:hover{
	opacity: 0.7;
	transition: 0.3s;
}


#notify-stack { /* контейнер стилизуется inline в JS */ }
.notify{
  min-width: 90%;
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-family: Roboto-Medium, system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateY(10px);
  opacity: 0;
  transition: .25s ease;
  background-color: #232124a8;
  backdrop-filter: blur(10px);
}
.notify--in{ transform: translateY(0); opacity: 1; }
.notify--success{ background: #232124a8; }
.notify--error{ background: #232124a8; }
.notify .fa, .notify .ico{ font-size: 18px; }

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {

.notify {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
  }

}


.icon-payments{
	width: 40px;
	height: 40px;
	background-size: cover;
	background-position: center center;
	border-radius: 10px;
}

.methodtxt{
	font-family: Roboto-Medium;
}

.methodtxt span{
	font-size: 13px;
	display: block;
	color: #ffffff52;
	font-family: Roboto-Regular;
	margin-top: 3px;
}

.cont-reflist{
	margin-top: 30px;
	margin-bottom: 50px;
}


.tab-free{
	position: relative;
	background-image: url('../../image/promo.svg');
	background-size: cover;
	padding: 20px;
	border-radius: 10px;
	width: 46%;
	background-position: 650px;
}

.row-tabs-freebalance{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 25px;
	margin-bottom: 30px;
}

.title-free{
	font-family: Roboto-Medium;
	font-size: clamp(16px, 2.2vw, 16px); 
}

.title-free span{
	opacity: 0.5;
	font-size: 15px;
}

.btn-free-go{
	background-color: #0085FFB5;
	color: #fff;
	padding: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	border-radius: 10px;
	font-family: Roboto-Medium;
	margin-top: 10px;
	transition: 0.3s;
}

.btn-free-go i{
	font-size: 14px;
	margin-left: 5px;
	transition: 0.3s;
}

.btn-free-go:hover{
	opacity: 0.8;
	transition: 0.3s;
}



.btn-check-task-go{
	background-color: #232124de;
  	color: #ffffffb8;
	padding: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
	border-radius: 10px;
	font-family: Roboto-Medium;
	margin-top: 10px;
	transition: 0.3s;
	cursor: pointer;
}

.btn-check-task-go i{
	font-size: 14px;
	margin-left: 5px;
	transition: 0.3s;
}

.btn-check-task-go:hover{
	opacity: 0.8;
	transition: 0.3s;
}




.activate-subscribe-btn-main{
	background-color: #0085FF;
	text-align: center;
	padding: 20px;
	width: 100%;
	border-radius: 15px;
	font-family: Roboto-Medium;
}

.activate-subscribe-btn-main i{
	margin-right: 5px;
}




.row-icons-free{
	display: flex;
	align-items: center;
}

.iconFreeTab img{
	width: 30px;
	margin-right: 8px;
}

.refscontBonus{
	padding: 15px;
	border-radius: 20px;
	margin-top: 20px;
	background-image: url('../../image/promo.svg');
	background-size: cover;
	font-size: 16px;
}

.row-secondary-profile{
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 50px;
}


.row-top-tab{
	display: flex;
	align-items: center;
}


.tab-profile{
	background-color: #19181A;
	padding: 20px;
	border-radius: 20px;
	width: 49%;
	font-family: Roboto-Medium;
}

.txt-profile-tab{
	font-size: 15px;
}


.btn-go-page-profile{
	background-color: #0085FF1A;
  	color: #0085FF;
  	padding: 5px;
  	padding-top: 10px;
  	padding-bottom: 10px;
  	text-align: center;
  	border-radius: 10px;
  	font-family: Roboto-Medium;
  	margin-top: 10px;
  	transition: 0.3s;	
}



.btn-go-page-profile i{
	font-size: 14px;
	margin-left: 5px;
	transition: 0.3s;
}

.btn-go-page-profile:hover{
	opacity: 0.8;
	transition: 0.3s;
}

.btn-go-page-profile:hover i{
	transform: translateX(3px);
	transition: 0.3s;
}

.icon-profile-tab{
	margin-right: 5px;
}


.activate-promo{
	padding: 15px;
  	background-color: #0085FF;
  	text-align: center;
  	border-radius: 15px;
  	margin-top: 15px;
  	width: 100%;
  	font-family: Roboto-Medium;
  	transition: 0.3s;
  	cursor: pointer;
  	margin-bottom: 350px;
}



.linkConfig{
	width: 80%;
}


.row-count-traffic{
	background-color: #171718;
	padding: 15px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	color: #ffffff82;
	font-size: clamp(14px, 2.2vw, 16px); 
}


.row-count-traffic-main{
	background-color: #17171836;
	padding: 15px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	color: #ffffff82;
	font-size: clamp(14px, 2.2vw, 16px); 
	margin-top: 10px;
}

.row-count-traffic-payment{
	background-color: #171718;
	padding: 10px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	color: #ffffff82;
	font-size: clamp(13px, 2.2vw, 16px); 
}


.price-plan-page{
	margin-top: 30px;

}


.icon-warn{
	font-size: clamp(17px, 2.2vw, 20px);  
	margin-right: 15px;
}


.success-task{
	background-color: #00531d6b;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Roboto-Medium;
	font-size: clamp(14px, 2.2vw, 17px);  
	font-size: 20px;
	border: 2px solid #5aec8c;
	backdrop-filter: blur(5px);
	text-align: center;
}

.title-success-task span{
	font-size: 11px;
	color: #05FB59;
}

.title-success-task i{
	color: #05FB59;
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {

.success-task {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); 
  }

}

@media(max-width: 500px){

.row-tabs-profile-top{
	display: block;
}	

.cont-tab-p{
	width: 100%;
}

.btn-deposit-p{
	padding: 15px;
	margin-bottom: 10px;
}

.btn-tarif-p{
	padding: 15px;
}

.btn-pockets-p{
	padding: 15px;
}

.linkConfig{
  padding: 7px;
  font-size: 13px;

  white-space: normal;        /* разрешаем переносы */
  overflow-wrap: anywhere;    /* современный способ */
  word-wrap: break-word;      /* фоллбек для старых браузеров */
  word-break: break-word;     /* доп. фоллбек */
  hyphens: auto;              /* ставит дефисы, если есть словарь (lang="ru") */
}


.row-tabs-freebalance{
	display: block;
}


.tab-free{
	width: 100%;
	margin-bottom: 15px;
}

.refscontBonus{
	background-position: 850px;
}




}








.cont-info-tarif{
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	background-color: #242225;
	font-size: clamp(18px, 2.2vw, 20px); 
}

.filed-list-payment{
	margin-bottom: 15px;
}


.filed-list-payment span{
	opacity: 0.5;
}


.price-plan-page{
	margin-top: 20px;
}


.val-price-plan{
	color: #0085FF;
  	font-size: clamp(22px, 2.2vw, 25px);
  	font-family: Roboto-Medium;
  	background-color: #0085FF24;
	text-align: center;
  	padding: 7px;
  	border-radius: 20px;
  	padding-left: 15px;
  	padding-right: 15px;
}







.throught-oldprice{
  position: relative;
  display: inline-block;     /* чтобы ширина была по тексту */
  line-height: 1;
  background-color: #0085FF26;
  padding: 5px;
}

/* наклонная черта */
.throught-oldprice::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 49%;
  width: 100%;               /* ровно по ширине текста */
  height: 1px;               /* толщина линии */
  background: #0085FF;
  transform-origin: left center;
  pointer-events: none;
}