/* Header */
.header{
    padding: 40px 0px 0px 0px;
}

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

.header__left{
    display: flex;
    align-items: center;
    column-gap: 30px;
    width: 50%;
}

.header__right{
    display: flex;
    align-items: center;
    column-gap: 30px;
}

.logo{
    font-family: Montserrat Alternates, sans-serif;
    font-weight: 700;
    font-size: 40px;
}

/* navigation */
.nav{
    display: flex;
    align-items: center;
}

.nav ul{
    display: flex;
    align-items: center;
    column-gap: 30px;
}

.nav ul li{
    font-weight: 600;
    font-size: 18px;
    color: #1d1d1f;
    transition: 0.1s;
}

.nav ul li a{
    color: #1d1d1f;
	transition: 0.1s;
}

.nav ul li a:hover{
    cursor: pointer;
    color: #1283ca;
}

/* header__right */


.header__location{
    display: flex;
    align-items: center;
    column-gap: 5px;

    font-weight: 500;
    font-size: 20px;
    color: #9292a1;
}

.header__buttons{
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.header__location i{
    font-size: 16px;
}

/* Дроп список городов */

.header__location {
    position: relative;
    display: inline-block;
}

.city-toggle {
    cursor: pointer;
    padding: 6px 0px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.city-dropdown {
    position: absolute;
    top: 110%;
    right: 0;
    background: #fff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: none;
    z-index: 100;
    width: auto;
}

.city-dropdown.active {
    display: block;
}

.city-dropdown__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.city-dropdown__inner span {
    padding: 8px 10px;
    background: #f2f2f2;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
	white-space: nowrap
}

.city-dropdown__inner span.active {
    background: #000;
    color: #fff;
}

@media (max-width: 480px) {
    .city-dropdown {
		/*
        width: 200px;
		*/
		width: auto;
        padding: 12px;
    }
    .city-dropdown__inner {
        grid-template-columns: 1fr;
    }
}

/* Финиш дроп список городов */

.header__dark{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f4f4f4;
}

.header__dark i{
    font-size: 20px;
}

.header__humberger{
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f4f4f4;
}

.header__humberger:hover{
    cursor: pointer;
}

.header__humberger i{
    font-size: 24px;
}

/* footer */

footer{
    padding: 60px 0px 40px 0px;
    border-radius: 100px 100px 0 0;
    background: #1D1D1F
}

.footer__content{
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
}

.footer__content-title{
    font-weight: 600;
    font-size: 22px;
}

.footer__content-item{
    font-weight: 500;
    font-size: 14px;
    color: #82828c;
    margin-top: 15px;
}

.footer__content-item i{
    color: #ffffff;
    font-size: 40px;
}

.footer__hr{
    border: 1px solid rgba(244, 244, 244, 0.2);
    margin: 40px 0px;
}

.footer__lineblock{
    display: flex;
    column-gap: 30px;
}

.footer__lineblock .footer__content-item{
    margin-top: 0px;
}

.footer__content-item {
    position: relative;
    padding-right: 16px; /* было 10 при размере точки в 20px*/
    margin-right: 6px;
}

.footer__content-item::after {
    content: "·";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;     /* ← размер точки */
    line-height: 1;
}

.footer__content-item:last-child::after {
    content: "";
}
/*  */

.page-title{
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    margin: 0px 0px 0px 0px;
    color: #1D1D1F;
}

.page-desc{
    max-width: 572px;
    color: rgba(243, 244, 245, 0.70);

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;

    margin: 0px 0px 0px 0px;
}

/* */
.maininfo__wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr 0.6fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;

    margin: 28px 0px 60px 0px;
}

.maininfo__block{
    padding: 30px 25px;
    background: #FFF;
    border-radius: 30px;
}

.maininfo__block h3{
    font-weight: 600;
    font-size: 20px;
    color: #1d1d1f;
    margin-bottom: 15px;
}


.maininfo__block span{
    font-weight: 500;
    font-size: 14px;
    color: rgba(29, 29, 31, 0.6);
}

.maininfo__block-tgFirst{
    display: none;
    flex-direction: column;
    justify-content: space-between;
	
	background: linear-gradient(rgb(0 0 0 / 50%), rgb(22 22 22 / 50%)), url(https://img.freepik.com/free-photo/padel-blade-racket-hanging-net_657883-609.jpg?t=st=1766503785~exp=1766507385~hmac=8ed8077…&w=1480);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.maininfo__block-tgButton{
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 7px;
	
    background: #fff;
    width: 100%;
    text-align: center;
    padding: 10px 0px;
    border-radius: 10px;
	
	font-size: 16px;
	
	color: #1d1d1f; 
	font-weight: 500;
}

.maininfo__block-tgButton i{
	font-size: 22px;
}

.maininfo__items-wrapper{
    display: flex;
    align-items: center;
    column-gap: 30px;

    margin-top: 27px;
}

.maininfo__item{
    display: flex;
    align-items: center;
    column-gap: 9px;
}

.maininfo__item img{
    border-radius: 10px;
    width: 40px;
    height: 40px;
}

.maininfo__item span{
    font-weight: 500;
    font-size: 18px;
    color: #000;
}

.maininfo__block-unic{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	
    background: linear-gradient(rgb(78 78 78 / 50%), rgb(143 143 143 / 50%)), url(https://img.freepik.com/free-photo/padel-blade-racket-hanging-net_657883-609.jpg?t=st=1766503785~exp=1766507385~hmac=8ed8077…&w=1480);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.maininfo__block-unic h3{
    color: #fff;
}

.maininfo__block-unic span{
    color: rgba(255, 255, 255, 0.8);
}

.maininfo__items-wrapper {
    display: flex;                     /* горизонтальный ряд */
    gap: 20px;                         /* расстояние между карточками */
    overflow-x: auto;                  /* горизонтальная прокрутка */
    max-width: 400px;                  /* ограничение ширины контейнера */
    scroll-snap-type: x mandatory;     /* прилипание к элементам */
    -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
    padding-bottom: 10px;
}

.maininfo__item {
    flex: 0 0 auto;            /* не растягивается */
    width: auto;              /* ширина карточки */
    scroll-snap-align: start;  /* прилипание к началу */

}

/* Скрыть скроллбар (необязательно) */
.maininfo__items-wrapper::-webkit-scrollbar {
    display: none;
}
.maininfo__items-wrapper {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/*  */

/* Мобильное меню по умолчанию скрыто */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 70%;
  height: 100%;
  background: #fafafa;
  box-shadow: 2px 0 22px 2px rgba(0, 0, 0, 0.15);
  
  transition: right 0.3s ease;
  padding: 60px 20px; /* чтобы было место под хедер */
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1000;
}

/* Когда открыто */
.mobile-menu.open {
  right: 0;
}

/* Анимация иконки бургера (пример) */
.header__humberger.active i::before {
  content: "✕"; /* крестик вместо иконки */
  font-size: 24px;
}

.mobile-menu__close {
  background: none;
  border: none;
  font-size: 28px;
  color: #000;
  cursor: pointer;
}

/* index-form */

.index-form .find-job-wrap{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    align-items: end;    
}

.index-form .radio-group{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 10px;
    grid-row-gap: 20px;
}

.index-form form .shipping-select{
    width: 100%;
}

.index-form form .salary-form-flex{
    width: 100% !important;
}

.index-form form div, .btn-find{
    width: 100%;
}


.index-form form .btn-find{
    width: 100%;
}

.index-form form .jq-selectbox{
    height: 40px;
}

.index-form form .btn-find{
    height: 40px;
}

.index-form form .find-job-wrap .shipping-select .jq-selectbox:after {
    top: 11px;
    right: 16px;
}

.index-form form .find-job-wrap .shipping-select .jq-selectbox__select-text{
    padding: 10px 35px 13px 15px;
}

.shipping-main__some-courts-title{
    font-weight: 600;
    font-size: 24px;
    color: #1d1d1f;
    margin: 60px 0px 30px 0px;
}
/*  */

.some-courts{
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}


/*  */

.electrician-page{
    margin-top: 50px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 25px;
}
.electrician-page p{
    font-weight: 400;
    font-size: 14px;
    line-height: 125%;
    color: #1D1D1F;
}
.electric-mechanic{
    max-width: 727px;
    width: 100%;
}
.electric-mechanic-cnt{
    display: flex;
    gap: 20px;
}
.electric-mechanic-cnt img{
}

.electric-mechanic-cnt .electric-img.preview {
    width: 160px;
    height: 160px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.clubs .electric-mechanic-cnt .electric-img.preview {
    width: 18.3vw;
    height: 14.5vw;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.clubs .advantages-margin{
    margin-top: 15px;
}


.preview {
    position: relative;
    overflow: hidden;
}

.preview-img {
    position: absolute;
    inset: 0;
    width: 100%;        /* теперь 100% от контейнера, а контейнер = 160×160 */
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    transition: opacity .25s ease;
    opacity: 0;
    pointer-events: none;
}


.preview-img[data-index="0"] {
    opacity: 1;
}

.hotspots {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 3;
}

.hotspot {
    flex: 1;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.preview-dots {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    width: 90%; /* ширина всей полоски-контейнера */
    z-index: 10;

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.preview:hover .preview-dots,
.preview:focus-within .preview-dots {
    opacity: 1;
}

.preview-dots .dot {
    flex: 1; /* каждая полоска делит пространство равномерно */
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    transition: background 0.1s ease;
}

.preview-dots .dot.active {
    background: rgba(0, 0, 0, 0.85);
}





.electric-mechanic-info{
    padding-top: 15px;
}

.electric-mechanic-info-logoCourt img{
	border-radius: 6px;
}

.electric-mechanic-info strong{
    font-weight: 500;
    font-size: 18px;
    line-height: 100%;
    color: #1283CA;
}

.electric-mechanic-info p{

    margin-top: 10px;
}
.electric-mechanic-info .electric-mechanic-info-coast{
    margin-top: 15px;
    display: block;
    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    color: #000000;
}
.electric-mechanic-info p a {
    color: #2C723B;
    display: inline;
}

.electric-mechanic-info .club-name{
    font-size: 14px;
    font-weight: 500;
    color: #d5d5d5;
    margin-top: 0px;
    margin-bottom: 7px;
}

.conditions-min{
    margin-top: 35px;
}

.conditions-text{
    margin-top: 15px;
}
.conditions-flex{
    display: flex;
    align-items: start;
    gap: 5px;
    margin-top: 10px;

}
.conditions-flex p{
    color: #1D1D1F99;
}
.conditions-flex span{
    color: #1D1D1F;
    font-weight: 400;
    font-size: 14px;
    line-height: 125%;
    max-width: 354px;
    width: 100%;
}

.location-babush{
    margin-top: 35px;
}
.location-babush p{
    margin-top: 15px;
}
.location-babush ul {
    margin-top: 10px;

}
.location-babush ul li{
    display: flex;
    align-items: center;

    position: relative;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #1D1D1F;
}

.metro-dot {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}

.conditions-check .conditions-check__search{
    margin-top: 10px;
    margin-bottom: 10px;
    width:100%;
}

.ship-checked__name{
    display: flex;
    align-items: center;
}

.conditions-check__more{
    background: none;
    color: #1283CA;
    margin-top: 15px;
}


.electric-mechanic-info .metro-dot {
    width: 5px;
    height: 5px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 3px;
    flex-shrink: 0;

    margin: 0px 5px 0px 0px;
}
.ship-checked label {
    display: flex;
    align-items: center;
    gap: 6px;
}


.work-experience{
    margin-top: 35px;
}
.work-experience-flex{
    margin-top: 15px;
    display: flex;
    align-items: start;
    gap: 12px;
}
.work-experience-flex + .work-experience-flex{
    margin-top: 35px;

}
.work-experience-year{
    max-width: 162px;
    width: 100%;
}
.work-experience-year span{
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    color: #1D1D1F;
}
.work-experience-year p{
    margin-top: 7px;
}
.work-experience-ozon{
    max-width: 466px;
    width: 100%;
}
.work-experience-ozon strong{
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    color: #1D1D1F;

}
.work-experience-ozon span{
    display: block;
    margin-top: 10px;
    font-weight: 600;
    font-size: 14px;
    line-height: 120%;
    color: #1D1D1F;
}
.work-experience-ozon p{
    margin-top: 10px;
}
.work-experience-ozon ul{
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style-type: auto;
    margin-left: 16px;
}
.work-experience-ozon ul li{
    color: #1D1D1F;
    font-weight: 400;
    font-size: 14px;
    line-height: 130%;

}
.experience-about{
    margin-top: 15px;
}
.experience-about p{
    margin-top: 15px;

}

.conditions-updated{
    margin-top: 50px;
}
.conditions-updated ul{
    display: flex;
    align-items: center;
    gap: 20px;
}
.conditions-updated ul li{
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-align: right;
    color: #1D1D1F99;
    display: flex;
    align-items: center;
    gap: 5px;
}
.icon-bx-show{
    content: url("../images/bx-show.svg");
}
.icon-bx-heart{
    content: url("../images/bx-heart.svg");

}

.becomes-visible{
    max-width: 277px;
    width: 100%;
}
.becomes-visible strong{
    font-weight: 600;
    font-size: 28px;
    line-height: 100%;
    color: #000000;
}
.show-phone{
    margin-top: 35px;
    background: #30CE52;
    width: 100%;
    height: 60px;
    gap: 10px;
    border-radius: 6px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #FFFFFF;
}
.btn-blue{
    margin-top: 15px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1283CA;
    width: 100%;
    height: 60px;
    gap: 10px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: #FFFFFF;
    padding: 10px 15px;

}
.becomes-visible p{
    margin-top: 25px;
    text-align: center;
    color: #1D1D1FCC;
}



.becomes-visible .electric-mechanic-cnt{
    margin-top: 100px;
    gap: 18px;
}
.icon-bxl-whatsapp{
    content: url("../images/bxl-whatsapp.svg");
    width: 18px;
    height: 18px;
}

.electric-mechanic-info a{
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    font-size: 14px;
    line-height: 100%;
    color: #1D1D1F99;
    margin-top: 10px;
}

.electric-mechanic-info strong{
    color: #1283CA;
    font-size: 18px;
}
.becomes-visible .electric-mechanic-cnt img {
    width: 72px;
    border-radius: 15px;
}


/* single-clubs */
.back-button{
    font-family: 'Montserrat';
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    column-gap: 7px;
    padding: 6px 15px;
    background: #FAFAFA;
    border-radius: 8px;
    margin-bottom: 15px;
    color: rgba(29, 29, 31, 0.6);
}
.back-button i{
    font-size: 24px;
}
.single-clubs__wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 20px;
}

.single-clubs__smalls{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    row-gap: 13px;
}

.single-clubs__smalls small{
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.single-clubs__smalls small i{
    font-size: 24px;
    color: rgba(29, 29, 31, 0.6);
}

.single small a{
    margin: 0px;
}

.single small a:hover{
    color: #1283ca;
}

.single-clubs__smalls .location-babush{
    margin: 0px;
}

.single .advantages{
    margin-top: 10px;
    flex-wrap: wrap;
    row-gap: 10px;
}

.single .advantages .advantages__item{
    padding: 4.5px 7px;
    background: #f5f5f5;

    font-weight: 400;
    font-size: 14px;
    color: rgba(29, 29, 31, 0.6);

    border-radius: 6px;
}

.single .advantages-title{
    margin-top: 30px;
}

.preview-single{
    height: 440px;
}

/* Single some-court */
.single .some-courts__single{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.single .some-courts__single .electric-mechanic-cnt .electric-img.preview {
    width: 7.3vw;
    height: 7.3vw;
}


.popular-vac-box .popular-vac__players{
    font-weight: 500;
    font-size: 16px;
}

/* content-text */
.content-text{
    margin-top: 20px;
    color: #1d1d1f;
}

.content-text h2{
    font-size: 28px;
    font-weight: 700;
    line-height: 32px;
    margin-top: 40px;
}

.content-text h3{
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-top: 40px;
}

.content-text h4{
    font-size: 20px;
    font-weight: 600;
    line-height: 32px;
    margin-top: 40px;
}

.content-text p{
    margin-top: 16px;
    line-height: 150%;
}


@media (max-width: 991px){
    .electrician-page {
        margin-top: 35px;
        flex-direction: column;
    }
    .show-phone {
        margin-top: 20px;
    }

    footer{
        border-radius: 60px 60px 0 0;
    }

    .index-form .find-job-wrap{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }

}
@media (max-width: 767px){
    .maininfo__wrapper{
        margin: 28px 0px 40px 0px;
    }
	
	.page-title-main{
		display:none;
	}
	
	.maininfo__block-tgFirst{
		display: flex;
	}
	
	.maininfo__block-unic{
		display: none;
	}

    .electric-mechanic-cnt {
        margin-top: 20px;
        gap: 22px;
    }
    .electric-mechanic-info p {
        margin-top: 6px;
    }

    .work-experience-flex {
        gap: 16px;
        flex-direction: column;
    }
    .work-experience-year {
        max-width: 100%;
    }
    .conditions-updated ul {
        gap: 12px;
        flex-wrap: wrap;
    }
    .becomes-visible .electric-mechanic-cnt {
        margin-top: 50px;
    }

    .electric-mechanic-cnt{
        flex-direction: column;
    }

    .clubs .electric-mechanic-cnt .electric-img.preview {
        width: 100%;
        height: 30vw;
    }

    .electric-mechanic-cnt .electric-img.preview {
        width: 100%;
        height: 30vw;
    }

    .maininfo__wrapper{
    display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 0.6fr;
        grid-row-gap: 20px;
    }

    .electric-mechanic-cnt{
        margin-top: 0px;
    }
	
	.single .shipping-main h1 {
		font-weight: 600;
		font-size: 20px;
	}
	
	.single-clubs__wrapper {
		grid-template-columns: 1fr;
	}
	
	.single .some-courts__single {
		grid-template-columns: 1fr 1fr;
	}
	
	.single .some-courts__single .electric-mechanic-cnt .electric-img.preview{
		height: 26.3vw;
    	width: 100%;
	}
}

/**/

@media (max-width: 570px){

    .header__humberger{
        display: flex;
    }

    .nav{
        display: none;
    }

    .header__location{
        display: none;
    }

    .mobile-menu .header__location{
		position: relative;
    	display: inline-block;
    }

    .mobile-menu__header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .mobile-menu__list{
        display: flex;
        flex-direction: column;
        row-gap: 25px;

        margin-top: 30px;
        margin-bottom: 30px;
    }
		
	.mobile-menu .nav .mobile-menu__list{
        margin-top: 0px;
        margin-bottom: 0px;
	}
	
	.mobile-menu .nav {
		align-items: end;
	}

    .mobile-menu .header__location{
        justify-content: flex-end;
		text-align: right;
    }

    .mobile-menu .nav__list-item{
        font-size: 30px;
        font-weight: 500;
        color: #1D1D1F; 
        text-align: right
    }
	
	.mobile-menu .city-toggle{
		padding: 0px;
	}
	
	.mobile-menu .city-dropdown{
		top: 160%;
	}

    .header__left {
        width: auto;
    }

    .header__right {
        column-gap: 7px;
    }

    .nav__list{
        display: none;
    }

    .index-form .find-job-wrap{
        grid-template-columns: 1fr ;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-row-gap: 15px;
    }

    .some-courts{
        grid-template-columns: 1fr ;
    }
	
	.maininfo__items-wrapper{
		max-width: 300px;
	}
	
    .single .some-courts__single {
		grid-template-columns: 1fr;
	}
	
	.footer__content{
	    flex-direction: column;
		row-gap: 40px;
	}
}