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

@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: Roboto-Bold; 
    src: url(../fonts/Roboto-Bold.ttf);
}

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

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

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

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

body{
	background-color: var(--background);
	font-family: Inter-Regular;
	scrollbar-width: none;
	padding: 12px 16px 96px 16px;
	color:var(--header-color);
	user-select: none;
}

::-webkit-scrollbar {
  display: none;
}

a{
	text-decoration: none;
}

:root {
    --background: #121216;
    --background-fill: #19191F;
    --background-fill-hover: #17171C;
    --secondary-background-fill: #1d1d26;
    --background-input-focus: #17171C;
    --header-color: #D7DEEE;
    --secondary-header-color: #52B2FF;
    --description-color: #4E4F5E;
    --secondary-description-color: #4597da;
    --no-text-color: #40424d;
    --input-color: #313339;
    --outline-color: #1f2d3b;
    --title:#4d4f58;
}


/*Загрузчик*/
.preloader{
  position: fixed;
  inset: 0;
  background: var(--background);
  display: grid;
  place-items: center;
  z-index: 9999;
  transition: opacity .3s ease, visibility .3s ease;
}
.preloader.preloader--hide{
  opacity: 0;
  visibility: hidden;
}

.spinner{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--secondary-description-color);
  border-right-color: var(--secondary-description-color);
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .spinner{ animation-duration: 1.6s; }
}


header{
	font-size: 16px;
	height:52px;
	width:100%;
	color:white;
}

.first-head {
    display: flex;
    align-items: center;
    height:52px;
}

.logo-main {
    display: flex;
    align-items: center;
}

.logo-main svg .logo-svg {
  fill: var(--secondary-header-color);
}

.head-info {
    margin-left:auto;
    height: 52px;
    gap:9px;
    padding: 0 14px; /* только по бокам */
    background-color:var(--background-fill);
    border-radius:30px;
    display: flex;
    align-items: center;
}


.balance-info {
    display:flex;
    gap:6px;
    align-items:center;
    font-family:Inter-SemiBold;
}

.icon-valute {
    width:16px;
    height:16px;
}

.icon-valute svg .valute-svg{
    fill:var(--secondary-description-color);
}



.btn-head {
    display:flex;
    align-items:center;
    margin-left:auto;
    height:26px;
    gap:3px;    
}

.btn-cont {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-cont svg rect,
.btn-cont svg path{
    fill:var(--secondary-description-color);
}

footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 64px;
    background-color: rgba(25, 25, 31, 0.88);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(100px);
    z-index: 100;
    border-radius:15px 15px 0 0;
}

.cont-footer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--secondary-description-color);
}

.cont-footer svg { width:20px; height:20px; display:block; }

.cont-footer svg path {
  fill: var(--secondary-description-color) !important;
}


.cont-nav {
    padding: 16px 0;
    flex: 1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slider-main {
    margin-top: 35px;
}

.slide-item {
    height: 112px;
    width:290px;
    background-color: var(--background-fill);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
}

.slider-main .slide-item {
  margin: 0 4px;
}

.slider-main .slick-dots li {
  margin: 0 0;         
}

.slider-main .slick-dots li button:before {
  font-size: 7px;       
  color: var(--secondary-background-fill);        
  opacity: 1;            
}

/* активная точка */
.slider-main .slick-dots li.slick-active button:before {
  color: var(--secondary-description-color);        
  opacity: 1;
}

.cont-category-change {
    width:100%;
    margin-top:45px;
    border-radius:30px;
    background-color:var(--background-fill);
    height:36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    color:var(--secondary-description-color);
    font-size:14px;
    text-align:center;
    font-family:Inter-SemiBold;
    cursor:pointer;
    justify-items: center;
}

.switch-category {
  display: flex;
  align-items: center;      
  justify-content: center;
  width:100%;
}

.active-switch {
    border-radius:30px;
    width:100%;
    background-color:var(--secondary-background-fill);
    color:var(--secondary-header-color);
}

.category-main-cont {
    margin-top:20px;
    display: grid; 
    gap: 6px;                         
    grid-template-columns: repeat(2, 1fr);
}

.category-cont {
    display:flex;
    border-radius: 9px;
    align-items:center;
    height:50px;
    padding:9px;
    gap:10px;
    cursor:pointer;
}

.category-cont:hover {
    background: var(--background-fill);
}

.img-cat {
    width:34px;
    height:34px;
}

.img-cat img {
    width:34px;
    height:34px;
    border-radius:10px;
    -webkit-user-drag: none;
}

.name-cat {
    color:white;
    font-size:14px;
    font-family: Inter-Semibold;
    color: var(--header-color);
}

.balance-count{
  color: var(--header-color);
  position: relative;              
}

.balance-count.is-masked{
  color: transparent;             
  display: inline-block;
  width: 3ch;                     
}

.balance-count.is-masked::before{
  content: "";
  position: absolute;
  inset: 0 0;                 
  height: 1.1em;
  border-radius: 6px;
  pointer-events: none;

  background:
    linear-gradient(90deg,
      rgba(255,255,255,0.12) 0%,
      rgba(255,255,255,0.22) 50%,
      rgba(255,255,255,0.12) 100%);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  filter: blur(3px) saturate(120%);
  opacity: 0.95;
}


/*О магазине*/

.logoshop {
    display:flex;
    justify-content:center;
    align-items:center;
    margin:0 auto;
    width:96px;
    height:96px;
    background-color:var(--background-fill);
    border-radius:15px;
    margin-top:25px;
}

.logoshop svg .doplogo-svg {
    fill:var(--secondary-header-color);
}

.about-name {
    font-size:18px;
    font-family:Inter-Bold;
    text-align:center;
    margin-top:16px;
}

.about-name { color: var(--header-color); }
.about-name .store { color: var(--secondary-header-color); }

.stats-cont {
    height:48px;
    width:100%;
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top:20px;
    align-items:center;
}

.stats-item {
    text-align:center;
}

.count-stats {
    font-size:16px;
    font-family:Inter-SemiBold;
    color:var(--header-color);
}

.name-stats {
    font-size:11px;
    font-family:Inter-Semibold;
    color:var(--description-color);
}

.cont-contacts {
    margin-top:20px;
}

.title-about {
    color:var(--secondary-description-color);
    font-family:Inter-SemiBold;
    font-size:11px;
    margin-bottom:9px;
}

.cont-items-contacts {
    display:grid;
    width:100%;
    grid-template-columns: repeat(2, 1fr);
    gap:6px;
}

.item-contacts {
    display:flex;
    width:100%;
    padding:9px 6px 0 6px;
    gap:9px;
}

.img-contact {
    display:flex;
    width:32px;
    height:32px;
    align-items:center;
    justify-content:center;
    background-color:var(--background-fill);
    border-radius:9px;
    flex:0 0 32px;
}

.img-contact svg path{
    fill:var(--secondary-description-color);
}

.cont-info-contacts {
    padding:0 0 16px 0;
    height:46px;
    border-bottom:1.5px solid var(--background-fill);
    flex:1 1 auto;
}

.title-contacts {
    font-family:Inter-Bold;
    font-size:14px;
    color:var(--header-color);
    height:10px;
    margin-bottom:9px;
}

.contact-link {
    font-family:Inter-Bold;
    font-size:11px;
    color:var(--secondary-description-color);
    height:8px;
}


.cont-yrinformation {
    margin-top:16px;
}

.cont-items-yrinfo {
    width:100%;
    gap:6px;
}

.yrinfo-link {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--description-color);
    height:8px;
}

.title-geo {
    font-family:Inter-Bold;
    font-size:12px;
    color:var(--header-color);
}

.footer-about {
    margin-top:16px;
    text-align:center;
    color:var(--description-color);
    font-family:Inter-SemiBold;
    font-size:11px;
    padding:0 6px;
}

.cont-agreement {
    margin-top:24px;
}

.title-agreement {
    color:var(--header-color);
    font-size:15px;
    font-family:Inter-Bold;
    height:11px;
}

.maininfo-agreement {
    margin-bottom:24px;
    margin-top:16px;
    font-family:Inter-SemiBold;
    font-size:12px;
    color:var(--description-color);
}

.maininfo-agreement span {
    color:var(--secondary-description-color);
}

.main-punkt-agreement {
    height:10px;
    font-family:Inter-Bold;
    font-size:14px;
    color:var(--description-color);
    margin-bottom:12px;
}

.main-punkt-agreement span{
    color:var(--secondary-description-color);
}

.dop-punkt-agreement {
    font-family:Inter-SemiBold;
    font-size:12px;
    color:var(--description-color);
}

.dop-punkt-agreement span {
    color:var(--secondary-description-color);
}


/*Отзывы*/

.logo-reviews {
    margin:0 auto;
    margin-top:24px;
    height:96px;
    width:96px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.maininfo-reviews {
    display:grid;
    gap:3px;
    text-align:center;
    margin-top:20px;
    margin-bottom:32px;
}

.title-reviews {
    font-family:Inter-SemiBold;
    font-size:16px;
    color:var(--secondary-header-color);
}

.dopinfo-reviews {
    font-family:Inter-Medium;
    font-size:13px;
    color:var(--description-color);
}

.head-reviews {
    display:flex;
    align-items:center;
    height:48px;
}

.logohead-reviews {
    width:48px;
    height:48px;
    background-color:var(--background-fill);
    border-radius:15px;
}

.logohead-reviews svg .doplogo-svg {
    fill:var(--secondary-header-color);
}

.dophead-reviews {
    display:grid;
    gap:6px;
    margin-left:10px;
}

.headinfo-reviews {
    display:flex;
    align-items: baseline;
    gap:6px;
}

.name-reviews {
    color: var(--header-color);
    font-family:Inter-Bold;
    font-size:14px;
}

.name-reviews span {
    color: var(--secondary-header-color);
}

.count-reviews {
    color:var(--description-color);
    font-family:Inter-SemiBold;
    font-size:11px;
}

.stats-reviews {
    display:flex;
    font-family:Inter-SemiBold;
    font-size:12px;
    gap:6px;
    color: var(--secondary-description-color);
}

.stats-reviews span{
    color:var(--description-color);
}

.badcount-reviews {
    display:flex;
    align-items:center;
    gap:5px;
}

.badcount-reviews path {
    fill:var(--secondary-description-color);
}

.goodcount-reviews {
    display:flex;
    align-items:center;
    gap:3px;
}

.goodcount-reviews path {
    fill:var(--secondary-description-color);
}

.sort-reviews {
    display:flex;
    align-items:center;
    justify-content:center;
    height:32px;
    width:32px;
    border-radius:9px;
    background-color:var(--background-fill);
    margin-left:auto;
    cursor:pointer;
}

.sort-reviews path {
    fill:var(--secondary-description-color);
}

.warning-reviews {
    display:flex;
    align-items:center;
    background-color:var(--secondary-background-fill);
    width:100%;
    border-radius:12px;
    gap:6px;
    height:33px;
    font-size:12px;
    font-family:Inter-SemiBold;
    margin-top:12px;
    padding: 9px 12px;
    color:var(--secondary-header-color);
}

.warning-reviews path {
    fill:var(--secondary-description-color);
}

.reviewsmain-cont {
    display:grid;
    gap:6px;
    font-family:Inter-SemiBold;
    font-size:11px;
    margin-top:9px;
}

.item-review {
    display:grid;
    padding:16px 6px 24px 6px;
    gap:16px;
    border-bottom:1.5px solid var(--background-fill);
    
}

.info-review {
    display:flex;
}

.img-review {
    width:32px;
    height:32px;
}

.img-review img{
    width:32px;
    height:32px;
    border-radius:50%;
}

.review-maininfo {
    display:grid;
    gap:3px;
    flex:1;
    margin-left:12px;
}

.infouser-review {
    display:flex;
    align-items:center;
}

.name-review {
    font-family:Inter-Bold;
    font-size:14px;
    color:var(--header-color);
}

.rating-review {
    display:flex;
    align-items:center;
    gap:1px;
    color:var(--description-color);
    margin-left:4px;
}

.rating-review path {
    fill:var(--secondary-description-color);
}

.date-review {
    margin-left:auto;
    color:var(--description-color);
}

.tovar-review {
    color:var(--secondary-description-color);
    cursor: pointer;
}

.tovar-review:hover {
    color: var(--secondary-header-color);
}

.text-reviews {
    font-size:12px;
    color:var(--no-text-color);
    padding:0 3px;
}

/*Профиль*/
    
.profile-cont {
    margin-top:24px;
}

.profile-img {
    position: relative;
    width:96px;
    height:96px;
    margin:0 auto;
}

.profile-img img {
    width:96px;
    height:96px;
    border-radius:50%;
    opacity: 0;
    transition: opacity .25s ease;
}

.profile-img img.is-loaded {
  opacity: 1;
}

.profile-settings {
    position: absolute;
    right: 0;             
    bottom: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    background-color:var(--background-fill);
    border:3px solid var(--background);
    border-radius:50%;
    z-index: 1;
    cursor:pointer;
}

.profile-settings path{
    fill:var(--secondary-description-color);
}

.profilename-cont {
    display:flex;
    margin-top:16px;
    gap:6px;
    align-items:center;
    justify-content:center;
}

.profilename-cont path{
    fill:var(--secondary-description-color);
}

.profile-name {
    text-align:center;
    font-family:Inter-Bold;
    font-size:18px;
    color:var(--header-color);
}

.profile-stats {
    display:grid;
    margin-top:16px;
    padding:9px 0;
    grid-template-columns: repeat(3, 1fr);
}

.stats-item {
    display:grid;
    gap:4px;
    text-align:center;
}

.count-profile {
    font-family:Inter-Bold;
    font-size:16px;
    color:var(--header-color);
}

.nameprofile-stats {
    font-family:Inter-Medium;
    font-size:11px;
    color:var(--description-color);
} 

.switch-profile {
    display:grid;
    font-family:Inter-SemiBold;
    font-size:14px;
    grid-template-columns: repeat(2, 1fr);
    margin-top:20px;
}

.purchases-profile {
    color:var(--secondary-header-color);
    background-color:var(--secondary-background-fill);
    border-radius:20px;
    padding:7px 0;
    text-align:center;
}

.transactions-profile {
    color:var(--secondary-description-color);
    border-radius:20px;
    padding:7px 0;
    text-align:center;
    cursor:pointer;
}

.transactions-profile:hover,  .purchases-profile:hover {
    color: var(--secondary-header-color);
}

.profile-empty {
    display:grid;
    gap:6px;
    margin-top:24px;
    text-align:center;
    justify-items: center;
}

.empty-emoji {
    width:40px;
    height:40px;
}

.empty-text {
    font-family: Inter-Medium;
    font-size:14px;
    color:var(--description-color);
}

/*Категории*/

.maincont-items {
    display:grid;
    gap:20px;
}

.header-items {
    margin-top:24px;
    display:grid;
    justify-items: center;
    gap:24px;
}

.items-logo {
    width:96px;
    height:96px;
}

.text-items {
    display:grid;
    gap:6px;
    text-align:center;
}

.name-items {
    font-size:18px;
    font-family:Inter-Bold;
    color: var(--header-color);
}

.note-items {
    font-size:13px;
    font-family:Inter-Medium;
    color:var(--description-color);
}

.body-items {
    display:grid;
    margin-top:12px;
    gap:32px;
}

.switch-items {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    text-align:center;
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--secondary-description-color);
}

.choice-switch {
    padding:8px 0;
    border-radius:100px;
}

.choice-switch:hover {
    color: var(--secondary-header-color);
}

.active-switch {
    background-color:var(--secondary-background-fill);
    color:var(--secondary-header-color);
}

.items-maintovarcont {
    display:grid;
    gap:24px;
}

.items-main {
    display:grid;
    gap:12px;
}

.items-title {
    color:var(--secondary-description-color);
    font-family:Inter-Bold;
    font-size:16px;
}

.items-tovarcont {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
}

.items-tovar {
    display:grid;
    gap:12px;
    padding:9px 9px 16px 9px;
    border-radius: 12px;
    justify-content: center;
}

.items-tovar:hover {
    background: var(--background-fill-hover);
}

.items-logotovar {
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:16px;
    background-color:var(--background-fill);
    width:152px;
    height:152px;
}

.items-logotovar img{
    width:96px;
    height:96px;
}

.items-infotovar {
    display:grid;
    gap:8px;
    font-family:Inter-Bold;
    color:var(--header-color);
}

.items-nametovar {
    font-size:14px;
}

.items-pricetovar {
    font-size:15px;
    display:flex;
    align-items:center;
    gap:6px;
}

.items-pricetovar svg .rub-svg{
    fill:var(--secondary-description-color);
}

/*Товар*/

.maincont-item {
    display:grid;
    gap:32px;
    margin-top:24px;
}

.infocont-item {
    display:grid;
    gap:32px;
    width:256px;
    margin:0 auto;
}

.switch-item {
    padding:3px;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    border-radius:100px;
    background-color:var(--background-fill);
    font-family:Inter-SemiBold;
    font-size:14px;
    text-align:center;
}

.choice-item {
    padding:6px 0;
    border-radius:100px;
    color:var(--secondary-description-color);
}

.active-choice-item {
    background-color:var(--secondary-background-fill);
    color:var(--secondary-header-color);
}

.info-item {
    display:grid;
    gap:15px;
    justify-items:center;
}

.logo-item {
    width:96px;
    height:96px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background-color:var(--background-fill);
}

.logo-item img {
    width:64px;
    height:64px;
}

.textinfo-item {
    display:grid;
    gap:6px;
    justify-items:center;
    padding:0 6px;
}

.title-item {
    font-family:Inter-Bold;
    font-size:18px;
    color:var(--header-color);
}

.leadtime-item {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--title);
}

.detailcont-item {
    display:grid;
    gap:12px;
}

.orderinfocont-item {
    display:grid;
    gap:16px;
}

.orderinfo-title {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.order-details-cont {
    display:grid;
    gap:12px;
}

.form-groupcont {
    gap:6px;
    display:flex;
    padding:0 6px;
}

.form-group {
    display:flex;
    gap:16px;
    padding:9px 6px 0 6px;
}

.form-group-code {
    display:flex;
    gap:16px;
    padding:9px 0 0 0;
}

.form-group img {
    width:16px;
    height:16px;
}

.form-group-code img{
    width:16px;
    height:16px;
}

.input-details {
    padding:0 0 15px 0;
    border: 0;
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--header-color);
    border-bottom:1.5px solid var(--background-fill);
    outline: none;
    background-color: transparent;
    flex:1 1 auto;
    width:100%;
}

.input-details::placeholder {
  color: var(--no-text-color);     
  opacity: 1;          
}

.btn-code{
  display: inline-grid; 
  place-items: center;     
  padding: 10px 32px;      
  border-radius: 12px;
  background: var(--background-fill);
  color: var(--secondary-description-color);
  font: 14px/1 Inter-SemiBold, sans-serif;
  white-space: nowrap;
  text-align: center;
  cursor:pointer;
}

.btn-code:hover {
    background: var(--background-fill-hover);
}

.dopinfocont-item {
    display:grid;
    gap:9px;
}

.availability-item {
    display:flex;
    align-items:center;
    gap:6px;
    padding: 9px 12px;
    border-radius:12px;
    background-color:var(--secondary-background-fill);
}

.availability-item path{
    fill:var(--secondary-description-color);
}

.availability-text {
    font-family:Inter-Medium;
    font-size:12px;
    color:var(--secondary-description-color);
}

.punkts-info {
    display:grid;
    gap:6px;
}

.flexpunkts-info {
    display:flex;
    gap:6px;
}

.punkt-dopinfo {
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 9px;
    border-radius:100px;
    background-color:var(--secondary-background-fill);
}

.punkt-dopinfo path{
    fill:var(--secondary-description-color);
}

.text-dopinfo {
    font-family:Inter-SemiBold;
    font-size:12px;
    color:var(--header-color);
}

.make-ordercont {
    display:flex;
    margin-top:24px;
}

.price-contitem {
    display:grid;
    gap:6px;
}

.summ-itemcont {
    display:flex;
    align-items:center;
    gap:6px;
}

.summ-itemcont svg .rub-svg {
    fill:var(--secondary-description-color);
}

.summ-item {
    font-family:Inter-Bold;
    font-size:18px;
    color:var(--header-color);
}

.promo-item {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
    cursor:pointer;
}

.promo-item:hover {
    color: var(--secondary-header-color);
}

.btn-createorder {
    margin-left:auto;
    padding:14px 16px;
    border-radius:12px;
    background-color:var(--background-fill);
    color:var(--secondary-description-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    cursor:pointer;
}

.btn-createorder:hover {
    background: var(--background-fill-hover);
}


/*Создание заказа*/

.crodrer-cont {
    display:grid;
    gap:24px;
    margin-top:24px;
}

.crorderinfo-cont {
    display:grid;
    gap:24px;
}

.crorder-text {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.crorder-dopcont {
    display:grid;
    gap:12px;
}

.crorderinfo-flex {
    display:flex;
    gap:12px;
    align-items:center;
}

.crodrerinfo-img {
    border-radius:12px;
    background-color:var(--background-fill);
    display:flex;
    justify-content:center;
    align-items:center;
    width:48px;
    height:48px;
}

.crodrerinfo-img img {
    width:24px;
    height:24px;
}

.crorderinfo-iteminfo {
    display:grid;
    color:var(--header-color);
    font-family:Inter-Bold;
    gap:6px;
}

.crorderinfo-itemname {
    font-size:14px;
}

.crorderinfo-itemprice {
    display:flex;
    align-items:center;
    font-size:15px;
    gap:6px;
}

.crorderinfo-itemprice svg .rub-svg {
    fill:var(--secondary-description-color);
}

.crorder-detailcont {
    display:grid;
    gap:6px;
}

.crorder-inputinfo {
    display:flex;
    padding:3px 6px 0 6px;
    gap:12px
}

.crorder-inputimg {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    background-color:var(--background-fill);
    border-radius:9px;
}

.dog{
  width:16px;height:16px;
  background-color:var(--secondary-description-color);
  -webkit-mask: url("../image/sobaka.svg") no-repeat center / contain;
          mask: url("../image/sobaka.svg") no-repeat center / contain;
}

.cube{
  width:16px;height:16px;
  background-color:var(--secondary-description-color);
  -webkit-mask: url("../image/cube.svg") no-repeat center / contain;
          mask: url("../image/cube.svg") no-repeat center / contain;
}

.crorder-input {
    padding:8px 12px 18px 0;
    display:flex;
    flex:1;
    font-family:Inter-SemiBold;
    font-size:14px;
    border-bottom:1px solid var(--background-fill);
}

.crorder-inputtitle {
    color:var(--header-color);
}

.crorder-inputpass {
    margin-left:auto;
    color:var(--secondary-description-color);
}

.crorder-paymentcont {
    display:grid;
    gap:6px;
}

.crorder-payment {
    display:flex;
    gap:12px;
    padding:9px 6px 0 6px;
    border-radius:12px;
    cursor:pointer;
}

.crorder-payment:hover{
    background-color:var(--background-fill);
}

.crorder-paymentimg {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    background-color:var(--background-fill);
    border-radius:9px;
}

.crorder-paymentimg img{
    width:16px;
    height:16px;
}

.crorder-paymentinfocont {
    padding:0 0 10px 0;
    border-bottom:1px solid var(--background-fill);
    flex:1;
}

.crorder-paymentinfo {
    display:grid;
    gap:4px;
}

.crorder-paymentname {
    font-family:Inter-Bold;
    font-size:14px;
    color:var(--header-color);
}

.crorder-paymentcomission {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.crorder-paycont {
    display:grid;
    gap:16px;
}

.crorder-payflex {
    display:flex;
    align-items:center;
}

.crorder-summcont {
    display:grid;
    gap:5px;
}

.crorder-summ {
    display:flex;
    align-items:center;
    gap:6px;
    font-family:Inter-Bold;
    font-size:17px;
    color:var(--header-color);
}

.crorder-summ svg .rub-svg{
    fill:var(--secondary-description-color);
}

.crorder-promo {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
    cursor:pointer;
}

.crorder-promo:hover  {
    color: var(--secondary-header-color);
}

.btn-pay {
    margin-left:auto;
    border-radius:12px;
    padding:14px 32px;
    color:var(--secondary-description-color);
    background-color:var(--background-fill);
    font-family:Inter-SemiBold;
    font-size:14px;
    cursor:pointer;
}

.btn-pay:hover {
    background-color: var(--background-fill-hover);
}


.crorder-payinfo {
    text-align:center;
    color:var(--description-color);
    font-family:Inter-SemiBold;
    font-size:11px;
}

.crorder-payinfo span {
    color:var(--secondary-description-color);
    cursor:pointer;
}

.crorder-payinfo span:hover {
    color: var(--secondary-header-color);
}


/*Пополнение баланса*/

.deposit-cont {
    display:grid;
    gap:24px;
    margin-top:24px;
}

.deposit-headcont {
    display:grid;
    gap:12px;
}

.deposit-inputcont {
    display:flex;
    padding:9px 6px 0 6px;
    gap:16px;
}

.deposit-inputcont img {
    width:16px;
    height:16px;
}

.deposit-input {
    padding:0 0 15px 0;
    border: 0;
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--header-color);
    border-bottom:1.5px solid var(--background-fill);
    outline: none;
    background-color: transparent;
    flex:1;
}

.deposit-input::placeholder {
  color: var(--no-text-color);     
  opacity: 1;          
}

.deposit-autosumcont {
    display:grid;
    gap:6px;
    grid-template-columns: repeat(4, 1fr);
}

.deposit-autosumitem {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 0;
    border-radius:12px;
    background-color:var(--background-fill);
    color:var(--header-color);
    font-size:14px;
    font-family:Inter-SemiBold;
    cursor:pointer;
}

.deposit-autosumitem svg .rub-svg {
    fill:var(--secondary-description-color);
}

.deposit-autosumitem:hover {
    background-color: var(--background-fill-hover);
}


.deposit-text {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.deposit-dopcont {
    display:grid;
    gap:16px;
}

.deposit-paymentcont {
    display:grid;
    gap:6px;
}

.deposit-payment {
    display:flex;
    gap:12px;
    padding:9px 6px 0 6px;
    border-radius:12px;
    cursor:pointer;
}

.deposit-payment:hover{
    background-color:var(--background-fill);
}

.deposit-paymentimg {
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    background-color:var(--background-fill);
    border-radius:9px;
}

.deposit-paymentimg img{
    width:16px;
    height:16px;
}

.deposit-paymentinfocont {
    padding:0 0 10px 0;
    border-bottom:1px solid var(--background-fill);
    flex:1;
}

.deposit-paymentinfo {
    display:grid;
    gap:4px;
}

.deposit-paymentname {
    font-family:Inter-Bold;
    font-size:14px;
    color:var(--header-color);
}

.deposit-paymentcomission {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.deposit-payflex {
    display:flex;
    align-items:center;
}

.deposit-summcont {
    display:grid;
    gap:5px;
}

.deposit-summ {
    display:flex;
    align-items:center;
    gap:6px;
    font-family:Inter-Bold;
    font-size:18px;
    color:var(--header-color);
}

.deposit-summ svg .rub-svg{
    fill:var(--secondary-description-color);
}

.deposit-titlepay {
    font-family:Inter-SemiBold;
    font-size:11px;
    color:var(--secondary-description-color);
}

.btn-deposit {
    margin-left:auto;
    border-radius:12px;
    padding:14px 32px;
    color:var(--secondary-description-color);
    background-color:var(--background-fill);
    font-family:Inter-SemiBold;
    font-size:14px;
    cursor:pointer;
}

.btn-deposit:hover {
    background-color: var(--background-fill-hover);
}


.deposit-payinfo {
    text-align:center;
    color:var(--description-color);
    font-family:Inter-SemiBold;
    font-size:11px;
}

.deposit-payinfo span {
    color:var(--secondary-description-color);
    cursor:pointer;
}

.deposit-payinfo span:hover {
    color: var(--secondary-header-color);
}

/*Вывод баланса*/

.withdrawal-inputcont img {
    width:16px;
    height:16px;
}

.withdrawal-inputcont {
    display:flex;
    padding:0 0 15px 0;
    flex:1;
    border-bottom:1.5px solid var(--background-fill);
}

.withdrawal-input {
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--header-color);
    border: 0;
    outline: none;
    background-color: transparent;
}

.withdrawal-input::placeholder {
  color: var(--no-text-color);     
  opacity: 1;          
}

.withdrawal-btnall {
    margin-left:auto;
    padding:0 16px;
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--secondary-description-color);
    cursor:pointer;
}

.withdrawal-btnall:hover {
    color: var(--secondary-header-color);
}


.withdrawal-autosumcont {
    display:grid;
    gap:6px;
    grid-template-columns: repeat(2, 1fr);
}

.withdrawal-autosumitem {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:9px 0;
    border-radius:12px;
    background-color:var(--background-fill);
    color:var(--header-color);
    font-size:14px;
    font-family:Inter-SemiBold;
}

.withdrawal-autosumitem span {
    color:var(--description-color);
}

.withdrawal-autosumitem svg .rub-svg{
    fill:var(--secondary-description-color);
}

/*Настройки*/

.settings-maincont {
    display:grid;
    gap:32px;
    margin-top:24px;
}

.head-settings {
    display:grid;
    gap:15px;
    justify-items:center;
}

.stik-settings {
    border-radius:18px;
    height:96px;
    width:96px;
}

.head-textcont {
    display:grid;
    gap:10px;
    text-align:center;
}

.head-settingstitle {
    font-family:Inter-SemiBold;
    font-size:16px;
    color:var(--secondary-header-color);
}

.head-settingsnote {
    font-family:Inter-Medium;
    font-size:13px;
    color:var(--description-color);
}

.settings-main {
    display:grid;
    gap:20px;
}

.settings-dopcont {
    display:grid;
    gap:9px;
}

.settings-title {
    font-size:11px;
    font-family:Inter-SemiBold;
    color:var(--secondary-header-color);
}

.settings-items {
    display:grid;
    gap:6px;
}

.settings-item {
    display:flex;
    gap:9px;
    padding:9px 6px 0 6px;
}

.settigns-itemimg {
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:var(--background-fill);
    border-radius:9px;
}

.settigns-itemimg path {
    fill:var(--secondary-header-color);
}

.settings-itemdop {
    display:flex;
    align-items:center;
    flex:1;
    border-bottom:1px solid var(--background-fill);
    padding:2px 0 16px 0;
}

.settings-itemdopend {
    display:flex;
    align-items:center;
    flex:1;
    padding:2px 0 16px 0;   
}

.settings-itemdopmore {
    display:flex;
    align-items:center;
    flex:1;
    border-bottom:1px solid var(--background-fill);
    padding:3px 0 21px 0;
}

.settings-itemdopmoreend {
    display:flex;
    align-items:center;
    flex:1;
    padding:3px 0 21px 0;
}

.settings-itemtitle {
    font-family:Inter-SemiBold;
    font-size:14px;
    color:var(--header-color);
}

.settings-switch {
  background: var(--background-fill);
  padding: 2px;
  border-radius: 999px;
  margin-left: auto;      
  display: flex; 
  align-items: center;
  justify-content: center;
}

.settings-switch span {
  background: var(--secondary-background-fill);
  color: var(--secondary-header-color);
  padding: 4px 13px;
  border-radius: 999px;
  font-family:Inter-Bold;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.settings-color {
    display:flex;
    align-items:center;
    gap:9px;
    margin-left:auto;
}

.color-edit {
    border-radius:50%;
    width:16px;
    height:16px;
    cursor:pointer;
    box-sizing: content-box;
}


#color-blue   { background-color:#4597da; }
#color-pink   { background-color:#DB7BB8; }
#color-purple  { background-color:#8A7BDB; }
#color-yellow { background-color:#DAC945; }
#color-green { background-color:#45DAAB; }

.active-color {
    padding:2px;
    border:1px solid var(--secondary-description-color);
    background-clip: content-box;
}

.settigns-switchlock {
    padding:3px;
    background-color:var(--background-fill);
    border-radius:100px;
    width:41px;
    display:flex;
    align-items:center;
    justify-content:right;
    margin-left:auto;
    cursor:pointer;
}

.settigns-switchlock-active {
    padding: 3px;
    width: 41px;
    height: 22px;                
    border-radius: 999px;
    background-color: var(--background-fill);
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: background-color .2s ease;
    margin-left:auto;
}

.settigns-switchlock svg rect {
    fill:var(--secondary-description-color);
}


.padlock-cont {
    background-color:var(--secondary-description-color);
    width:16px;
    height:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
}


/* КРУЖОК */
.circle-switch {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--secondary-background-fill);
    transform: translateX(0); 
    transition: transform .22s ease, background-color .2s ease, box-shadow .2s ease;
}

/* ВКЛЮЧЕНО (скрыт баланс) */
.settigns-switchlock-active.is-on {
    background-color: var(--secondary-description-color);
}
.settigns-switchlock-active.is-on .circle-switch {
    transform: translateX(19px); 
    background-color: #fff;     
}

.settigns-switchlock-active:active .circle-switch {
    box-shadow: 0 0 0 8px rgba(0,0,0,.06);
}

@media (prefers-reduced-motion: reduce) {
    .settigns-switchlock-active, .circle-switch { transition: none !important; }
}