/* Общие стили */
@media screen and (min-width: 801px) {
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #32FF00;
    --secondary-color: #000000;
    --bg-light: #F3F3F3;
    --bg-white: #FFFFFF;
    --text-dark: #000000;
    --text-light: #FFFFFF;
    --border-color: rgba(0, 0, 0, 0.2);
    --shadow: 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Cy Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    min-height: 100vh;
}
#uploadimagesus {
 position: relative;
 display: inline-block;
 width: 250px;
 place-items: center;
}
.addcl{
    display: none;
}

.add_cloth{
   cursor: pointer;
    color: white;
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;

    font-weight: 400;
    width: 250px;
    background-color: gray;
    border-radius: 20px;
    text-align: center;
    margin: 10px;
}

.add-cloth{
  cursor: pointer;
    color: white;
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;

    font-weight: 400;
    width: 250px;
    background-color: gray;
    border-radius: 20px;
    text-align: center;
    margin: 10px;  
 
}
#file {
 width: 145px;
}
#savealt {
 display: none;
}
.layer {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
.layerm{
    display: none;
}

.layer-2 {
    position: absolute;
    z-index: 1;
    bottom: 0;
    right: 0;
}
.layer-2m {
  display: none;
}
.admin-clothes .cloth{
display: inline-block;
vertical-align: top;
margin: 10px;
border: 1px solid gray;
border-radius: 20px;
}
#excel{
    cursor: pointer;
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid gray;
    padding: 0 10px;
    margin: 10px;
}
#excel i{
    color: green;
}
.ellipse {
 /* Ellipse 3 */
 margin-left: auto;
 display: inline-block;
width: 56px;
height: 56px;
box-sizing: border-box;
border-radius: 24px;
box-shadow: 0px 4px 4px 0px rgba(50, 255, 0, 1),inset 0px 4px 4px 0px rgba(50, 255, 0, 1),0px 0px 60px 0px rgba(255, 255, 255, 0.14),0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),0px 3px 12px -3px rgba(0, 0, 0, 0.24),inset 1.13px 1.8px 11.600000381469727px 0px rgba(209, 230, 255, 0.23),inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68),inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08),inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
backdrop-filter: blur(67px);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%);
}
.rectangle {
    padding: 0 10px 0 50px;
    margin: 50px 100px;
    display: flex;
    align-items: center;
    justify-content: center;
width: 227px;
height: 82px;
    box-sizing: border-box;
    border-radius: 72px;
    box-shadow: inset 0px -3px 4px 0px rgba(50, 255, 0, 1),0px 0px 60px 0px rgba(255, 255, 255, 0.14),0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),0px 3px 12px -3px rgba(0, 0, 0, 0.24),inset 1.13px 1.8px 11.600000381469727px 0px rgba(209, 230, 255, 0.23),inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68),inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08),inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
    backdrop-filter: blur(67px);
    background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%);
}

.container2 {
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

/* Страница выбора пола */
.gender-selection {
    background: #000000;
    min-height: 100vh;
}

.gender-selection .container {
    min-height: 100vh;
}

.gender-buttons {
    display: flex;
    flex-direction: column;
    gap: 103px;
    justify-content: center;
    align-items: center;
    
}

.gender-btn {
    width: 227px;
    height: 82px;
    border-radius: 72px;
    background: rgba(255, 255, 255, 0.2);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%),
        radial-gradient(circle at 12% 19%, rgba(255, 235, 255, 0.05) 0%, rgba(229, 255, 240, 0.04) 70%, rgba(240, 240, 255, 0) 100%);
    border: 1.2px solid;
    border-image: linear-gradient(0deg, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.3) 68%, rgba(255, 255, 255, 0) 100%) 1;
    backdrop-filter: blur(67px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
}

.gender-btn-female {
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14), 0px 4px 4px 0px rgba(50, 255, 0, 1);
}

.gender-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 20px 50px -6px rgba(0, 0, 0, 0.4);
}

.gender-btn-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 25px;
    position: relative;
    z-index: 1;
}

.gender-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
}
input{
    z-index: 10;
}
.gender-text {


color: rgba(255, 255, 255, 1);

font-family: Cy Grotesk;
font-style: Regular;
font-size: 15px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0%;
text-align: left;
}
.order-i{
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.back-i{
   
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 10;
}
/* Header */
.page-header {
    width: 100%;
    position: fixed;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
    z-index: 3;
}

.back-btn {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.back-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.cart-icon {
    width: 39px;
    height: 39px;
    border-radius: 50%;
    border-radius: 24px;
    background: rgba(0, 255, 0, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
    transition: var(--transition);
}

.cart-icon:hover {
    transform: scale(1.05);
}

.cart-icon svg {
    width: 18px;
    height: 18px;
    color: #FFFFFF;
}

.cart-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--primary-color);
    color: black;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 400;
}
.name-input{
  display: block;
    color: rgba(0, 0, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
   
    font-weight: 400;
    width: 250px;
    border-radius: 20px;
    padding: 5px;
    margin: 10px;  
}
.sex-cloth{
     width: 250px;
    color: rgba(0, 0, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
    font-weight: 400;
    border-radius: 20px;
    padding: 5px;
    margin: 10px;   
}
.uploadimage{
    border: 2px dashed gray;
    border-radius: 20px;
    margin: 10px;
}
.back-im{
    display: none;
}
.name_cloth{
   display: block;
    text-align: center;
}
.del_cloth{
     background-color: red;
    color: white;
    opacity: 0.7;
    border-radius: 0px 0px 20px 20px;
    text-align: center;   
    cursor: pointer;
}
.size-view {
    display: inline-block;
    position: fixed;
}

/* Main Content */
.main-content {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 80px 20px;
    display: flex;
}
.main-orders {
    position: relative;
    z-index: 2;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px;
   
}
.del_a{
cursor: pointer;   
color: red; 
}
.page-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 30px;
    text-align: center;
}

/* Сетка карточек размеров */
.size-cards-grid {
    display: inline-grid;
    place-items: center;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 0 0 auto;
}
.menum{
    display: none;
}
.size-card {
    position: relative;
    background: var(--bg-white);
    border-radius: 24px;
    padding: 20px 21px;
    cursor: pointer;
    transition: var(--transition);
}

.size-card-image {
    width: 139px;
    height: 170px;
    background: #D9D9D9;
    border-radius: 9.6px;
    margin-bottom: 12px;
    object-fit: cover;
}

.size-card-title {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.size-card-params {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.size-card-param {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.3;
}

.size-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    height: 20px;
    border-radius: 9.6px;
    background: rgba(206, 206, 206, 0.28);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border: 0.2px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(26.8px);
    box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.14);
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    transition: var(--transition);
}

.size-card-row:hover {
    background: rgba(206, 206, 206, 0.4);
}

.size-card-row.selected {
    background: #000000;
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    color: #FFFFFF;
    border-color: #32FF00;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
}

.size-card-select-btn {
    width: 28px;
    height: 20px;
    border-radius: 9.6px;
    background: rgba(206, 206, 206, 0.28);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border: 0.2px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(26.8px);
    box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.size-card-select-btn:hover {
    background: rgba(206, 206, 206, 0.4);
}

.size-card-select-btn.selected {
    background: #000000;
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border-color: #32FF00;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
}

.size-card-select-btn-icon {
    width: 16px;
    height: 21px;
    opacity: 0.5;
}

/* Панель информации о размере */
.size-info-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.55);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    backdrop-filter: blur(67px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px -3px 12px -3px rgba(0, 0, 0, 0.24), 0px -17.2px 40px -6px rgba(0, 0, 0, 0.37);
    padding: 20px;
    z-index: 1000;
}

.size-info-content {
    max-width: 187px;
    margin: 0 auto;
    position: relative;
}

.size-info-title {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 15px;
    text-align: center;
}

.size-info-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 25px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.2);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(67px);
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-dark);
    transition: var(--transition);
}

.size-info-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.size-info-details {
    background: rgba(255, 255, 255, 0.2);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border-radius: 24px;
    padding: 15px;
    margin-bottom: 15px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(67px);
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
}

.size-info-detail-item {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.size-info-detail-item:last-child {
    margin-bottom: 0;
}

/* Buttons */
.action-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 32.76px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-family: inherit;
    backdrop-filter: blur(4px);
}

.btn-primary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-dark);
    border: 0.55px solid rgba(255, 255, 255, 0.68);
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-dark);
    border: 0.55px solid rgba(255, 255, 255, 0.68);
    box-shadow: var(--shadow);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-order {
    width: 100%;
    padding: 15px;
    font-size: 12.42px;
    margin-top: 20px;
}

/* Корзина */
.cart-page .main-content {
    max-width: 800px;
}

.cart-items {
    margin-bottom: 40px;
}

.cart-item {
    background: var(--bg-white);
    border-radius: 31.79px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-size: 18.63px;
    font-weight: 400;
    margin-bottom: 10px;
}

.cart-item-size {
    font-size: 18.63px;
    font-weight: 400;
    color: #666;
    margin-bottom: 10px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-dark);
    transition: var(--transition);
}

.quantity-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.quantity-value {
    font-size: 12.42px;
    font-weight: 400;
    min-width: 30px;
    text-align: center;
}

/* Форма заказа */


.count-info div{
 display: inline-block;
}

.color-order{
color: rgba(0, 0, 0, 1);
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    line-height: 15px;
    display: block;
}
.name-order{
color: rgba(0, 0, 0, 1);
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    margin-bottom: 35px;
    line-height: 18px;
    display: block;
}
.size-order{
  color: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    display: block;
}
.usersize-order{
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 16px;
}
.count-info{
  position: absolute;
    bottom: 0;
    left: 30px;
    user-select: none;
}
a{
    text-decoration: none;
}
.count-change{
     font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    background-color: black;
    color: white;
    cursor: pointer;
}
.lay{
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.lay2{
position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}
.count{
     font-size: 16px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    width: 40px;
    height: 30px;
    border: #8f8f8f solid 1px;
    border-radius: 10px;
}
.circle-order{
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    color: black;
position: absolute;
top: -15px;
right: -15px;
width: 40px;
height: 40px;
border-radius: 40px;
box-shadow: 0px 0px 115.3066177368164px 0px rgba(255, 255, 255, 0.14),0px 5.77px 23.061323165893555px -5.77px rgba(0, 0, 0, 0.24),inset 2.16px 3.46px 22.292613983154297px 0px rgba(209, 230, 255, 0.23),inset 0px 2.88px 10.08932876586914px 0px rgba(255, 255, 255, 0.68),inset -1.04px 0px 2.8826653957366943px 0px rgba(38, 115, 255, 0.08),inset 1.04px 0px 2.8826653957366943px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 1.8256880044937134px 0px rgba(242, 242, 255, 0.02);
backdrop-filter: blur(128.75904846191406px);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%),rgba(0, 255, 0, 0.66);
}
.inform{
  margin-left: auto;
    padding-right: 100px;
}
.span-info{
display: block;
    margin-left: 20px;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 5px;
}
.input-info{
    margin-bottom: 10px;
     padding-left: 10px;
    font-size: 18px;
    line-height: 40px;
    vertical-align: middle;
    display: block;
    width: 400px;
    height: 50px;
    border: #8f8f8f solid 1px;
    border-radius: 30px;
    border-radius: 53.07px;
box-shadow: 0px 0px 132.67605590820312px 0px rgba(255, 255, 255, 0.14),0px 6.63px 26.53520965576172px -6.63px rgba(0, 0, 0, 0.24),inset 2.49px 3.98px 25.650707244873047px 0px rgba(209, 230, 255, 0.23),inset 0px 3.32px 11.60915470123291px 0px rgba(255, 255, 255, 0.68),inset -1.19px 0px 3.316901206970215px 0px rgba(38, 115, 255, 0.08),inset 1.19px 0px 3.316901206970215px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 2.1007041931152344px 0px rgba(242, 242, 255, 0.02);
backdrop-filter: blur(148.1549072265625px);

}

 table, th, td {
  border: 1px solid black; /* Sets border width, style, and color */
  padding: 10px;
}

table {
  border-collapse: collapse; /* Merges double borders into single borders */
}

 .img_a img{
    max-height: 30px; 
}
.order_a div{
    vertical-align: top;
    display: inline-block;
    padding: 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
}
.but-info{
    cursor: pointer;
    padding-left: 20px;
    font-size: 18px;
    line-height: 40px;
    vertical-align: middle;
    display: block;
    width: 140px;
    height: 50px;
    border: #8f8f8f solid 1px;
    border-radius: 30px;
    margin-top: 40px;
}
 .cloth{
    width: 200px;
    color: rgba(0, 0, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
      position: relative;
    font-weight: 400;
    letter-spacing: 0%;
    text-align: left;
        }
        .tekst-height{
            display: block;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
       .parametrs select {
        width: 35px;
            float: right;
            padding: 2px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 30px;
            background-color: white;
                appearance: none;
   margin: 3px 0;
    background: url(Vector.svg) no-repeat right;
    background-position-x: calc(100% - 12px);
        }
        select::before{

}

.parametrs select::-webkit-scrollbar {
width: 0; /* Ширина полосы = 0 */
background: transparent; /* Прозрачный фон */
}
/* Для Firefox, чтобы скрыть, но сохранить прокрутку мышью/клавиатурой */
.parametrs select {
scrollbar-width: none;
}
.parametrs select option{
box-sizing: border-box;
border-radius: 24px;
box-shadow: 0px 0px 60px 0px rgba(255, 255, 255, 0.14),0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68),inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08),inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%),rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 1);
font-family: Cy Grotesk;
font-style: Regular;
font-weight: 400;
line-height: 30px;
letter-spacing: 0%;
text-align: center;        
}
.hiden{
    display: none !important;
}
.count-order-cloth{
  
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 15px;
    border-radius: 50px;
    cursor: pointer;
    background: rgba(0, 255, 0, 0.66);
    vertical-align: middle;
    line-height: 30px;
    text-align: center;
}
.select-size{
    display: none;
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 30px;
}
.select-size-img{
      height: calc(100% - 4px);
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 2px 10px;
    margin-right: 5px;  
 
}
.select-size-img img{
height: 100%;
   max-width: 15px;
}
.select-size-span{
    margin-left: auto;
    margin-right: auto;
    height: 25px;
    line-height: 25px;
}
.result {
margin-top: 15px;
padding: 10px;
background-color: #e8f5e9;
border-radius: 4px;
display: none;
}
.parametrs{
height: 30px;
border-radius: 40px;
line-height: 26px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 5px 0;
background-color: white;
}
.photo{
    max-width: 190px;
        width: auto;
        max-height: 200px;
margin: 0 auto;

    }
.cards-img{
    display: flex;
    align-items: center;
  height: 205px; 
  margin: 10px 0; 
}


.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    display: none;
}

.modal .close{
    position:absolute;
    right:-40px;
    top:0;
    padding: 5px;
    cursor:pointer;
}

.modal .overlay{
    position:absolute;
    background: rgba(0, 0, 0, 0.69);
    left:0;
    top:0;
    z-index:9;
    width:100%;
    height:100%;
}

.modal-content{
    position:relative;
    z-index:10;
    padding:15px;
    margin:10px;
}

.modal .close svg {
    fill: #fff;
}
.orderc{
    margin: 20px;
    padding: 10px;
position: relative;
border-radius: 31.79px;
box-shadow: 0px 0px 79.47286224365234px 0px rgba(255, 255, 255, 0.14),0px 3.97px 15.894574165344238px -3.97px rgba(0, 0, 0, 0.24),inset 1.49px 2.38px 15.364754676818848px 0px rgba(209, 230, 255, 0.23),inset 0px 1.99px 6.95387601852417px 0px rgba(255, 255, 255, 0.68),inset -0.72px 0px 1.9868217706680298px 0px rgba(38, 115, 255, 0.08),inset 0.72px 0px 1.9868217706680298px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 1.2583203315734863px 0px rgba(242, 242, 255, 0.02);
backdrop-filter: blur(88.74469757080078px);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01),rgba(255, 249.9, 249.9, 0.01),rgba(252.45, 252.45, 255, 0))/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04),rgba(239.7, 239.7, 255, 0))/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3) 17.241%,rgba(255, 255, 255, 0) 58.621%,rgba(216.75, 234.6, 255, 0.14) 86.207%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%),rgba(255, 255, 255, 0.55);

}
.orderc img{
   max-height: 200px;
        max-width: 200px;
        margin-right: 10px;
    display: inline-block;
    box-sizing: border-box;
border: 0.66px solid rgba(0, 0, 0, 1);
border-radius: 31.79px;
box-shadow: 0px 22.78px 52.981910705566406px -7.95px rgba(0, 0, 0, 0.37),0px 3.97px 15.894574165344238px -3.97px rgba(0, 0, 0, 0.24),inset 1.49px 2.38px 15.364754676818848px 0px rgba(209, 230, 255, 0.23),inset 0.72px 0px 1.9868217706680298px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 1.2583203315734863px 0px rgba(242, 242, 255, 0.02);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01),rgba(255, 249.9, 249.9, 0.01),rgba(252.45, 252.45, 255, 0))/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04),rgba(239.7, 239.7, 255, 0))/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3) 17.241%,rgba(255, 255, 255, 0) 58.621%,rgba(216.75, 234.6, 255, 0.14) 86.207%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%),rgba(186, 186, 186, 0.88);

}
.inf-order{
    position: relative;
    min-height: 200px;
    display: inline-block;
    vertical-align: top;
    width: 300px;
}
.order{
    display: inline-block;
    background-color: black;
    color: white;
    padding: 20px;
    width: auto;
}

.but_span{
    display: inline-block;
    width: 100px;
    color: rgba(255, 255, 255, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
    font-weight: 400;
 
    text-align: left;
}
.s_n_m{
    display: none;
    cursor: pointer;
    font-size: 100px;
    font-weight: 400;
    text-align: left;
    line-height: 100px;
    position: absolute;
    right: 380px;
}
.s_n_b{
    display: none;
    font-size: 100px;
    font-weight: 400;
    text-align: left;
    line-height: 100px;
    position: absolute;
    left: 380px;
  cursor: pointer;
}
.circle{
margin-left: auto;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    box-shadow: 0px 1.82px 1.8198431730270386px 0px rgba(50, 255, 0, 1), inset 0px 1.82px 1.8198431730270386px 0px rgba(50, 255, 0, 1), 0px 0px 27.297645568847656px 0px rgba(255, 255, 255, 0.14), 0px 7.83px 18.19843292236328px -2.73px rgba(0, 0, 0, 0.37), 0px 1.36px 5.459529876708984px -1.36px rgba(0, 0, 0, 0.24), inset 0.51px 0.82px 5.277544975280762px 0px rgba(209, 230, 255, 0.23), inset 0px 0.68px 2.3885443210601807px 0px rgba(255, 255, 255, 0.68), inset -0.25px 0px 0.682441234588623px 0px rgba(38, 115, 255, 0.08), inset 0.25px 0px 0.682441234588623px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.432212769985199px 0px rgba(242, 242, 255, 0.02);
    backdrop-filter: blur(30.482376098632812px);
    background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01) 30%, rgba(255, 249.9, 249.9, 0.01) 60%, rgba(252.45, 252.45, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04) 70%, rgba(239.7, 239.7, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(216.75, 234.6, 255, 0.14) 100%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%);}
.but_size{
    cursor: pointer;
    padding: 5px 20px 5px 20px;
    margin: 0px 20px 0px 20px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    /* display: inline-block; */
    width: 170px;
    box-sizing: border-box;
    border-radius: 32.76px;
    box-shadow: inset 0px -1.36px 1.8198431730270386px 0px rgba(50, 255, 0, 1), 0px 0px 27.297645568847656px 0px rgba(255, 255, 255, 0.14), 0px 7.83px 18.19843292236328px -2.73px rgba(0, 0, 0, 0.37), 0px 1.36px 5.459529876708984px -1.36px rgba(0, 0, 0, 0.24), inset 0.51px 0.82px 5.277544975280762px 0px rgba(209, 230, 255, 0.23), inset 0px 0.68px 2.3885443210601807px 0px rgba(255, 255, 255, 0.68), inset -0.25px 0px 0.682441234588623px 0px rgba(38, 115, 255, 0.08), inset 0.25px 0px 0.682441234588623px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.432212769985199px 0px rgba(242, 242, 255, 0.02);
    backdrop-filter: blur(30.482376098632812px);
    background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01) 30%, rgba(255, 249.9, 249.9, 0.01) 60%, rgba(252.45, 252.45, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04) 70%, rgba(239.7, 239.7, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(216.75, 234.6, 255, 0.14) 100%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%);}
.but_basket{
     cursor: pointer;
    padding: 5px 20px 5px 20px;
    display: inline-flex;
    align-items: center;
    text-align: center;
    /* display: inline-block; */
    width: 170px;
    box-sizing: border-box;
    border-radius: 32.76px;
    box-shadow: inset 0px -1.36px 1.8198431730270386px 0px rgba(50, 255, 0, 1), 0px 0px 27.297645568847656px 0px rgba(255, 255, 255, 0.14), 0px 7.83px 18.19843292236328px -2.73px rgba(0, 0, 0, 0.37), 0px 1.36px 5.459529876708984px -1.36px rgba(0, 0, 0, 0.24), inset 0.51px 0.82px 5.277544975280762px 0px rgba(209, 230, 255, 0.23), inset 0px 0.68px 2.3885443210601807px 0px rgba(255, 255, 255, 0.68), inset -0.25px 0px 0.682441234588623px 0px rgba(38, 115, 255, 0.08), inset 0.25px 0px 0.682441234588623px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.432212769985199px 0px rgba(242, 242, 255, 0.02);
    backdrop-filter: blur(30.482376098632812px);
    background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01) 30%, rgba(255, 249.9, 249.9, 0.01) 60%, rgba(252.45, 252.45, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04) 70%, rgba(239.7, 239.7, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(216.75, 234.6, 255, 0.14) 100%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%);}
.select-size-order{
    /* Ellipse 5 */
    position: relative;
margin: 20px 20px 20px 20px;
width: 360px;
height: 360px;
border-radius: 360px;
display: flex;
align-items: center;
box-sizing: border-box;
border: 1.56px solid rgba(255, 255, 255, 1);
}
.select-div{
  
    width: 100%;
}
.select-div span{
 display: block;
 text-align: center;
}
.description{
        margin: 20px 50px 10px 10px;
    display: inline-block;
    vertical-align: top;
}
.registration{
    display: inline-block;
}
.s_s{
color: rgba(255, 255, 255, 1);
font-family: 'Cy Grotesk', serif;
font-size: 30px;
font-weight: 400;
text-align: center;
}
.s_n{
color: rgba(50, 255, 0, 1);
font-family: 'Cy Grotesk', serif;
font-size: 200px;
font-weight: 400;
text-align: left;
line-height: 200px;
}
.s_h{
color: rgba(255, 255, 255, 1);
font-family: 'Cy Grotesk', serif;
font-size: 20px;
font-weight: 400;
text-align: center;
}
.color{
    display: block;
    color: rgba(255, 255, 255, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
}
.parametrs-oders{
    color: rgba(255, 255, 255, 1);
font-family: 'Cy Grotesk', serif;
font-size: 17.15px;
font-weight: 400;
text-align: left;
}
.parametrs-orders div{
 margin: 20px 0px;
 display: flex;
}
.sp-num{
    margin-left: auto;
}

.name{
    display: block;
    color: rgba(50, 255, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 40px;
    width: 200px;
    font-weight: 400;
    text-align: left;
}
.in_par{
    display: block;
    width: 200px;
 color: rgba(255, 255, 255, 1);
font-family: 'Cy Grotesk', serif;
font-size: 30px;
font-weight: 400;
text-align: left;   
}
/* Responsive */
}

@media screen and (max-width: 800px) {
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #32FF00;
    --secondary-color: #000000;
    --bg-light: #F3F3F3;
    --bg-white: #FFFFFF;
    --text-dark: #000000;
    --text-light: #FFFFFF;
    --border-color: rgba(0, 0, 0, 0.2);
    --shadow: 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
    --transition: all 0.3s ease;
}

body {
    font-family: 'Cy Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-light);
    min-height: 100vh;
}
#uploadimagesus {
 position: relative;
 display: inline-block;
 width: 250px;
 place-items: center;
}
.addcl{
    display: none;
}

.add_cloth{
   cursor: pointer;
    color: white;
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;

    font-weight: 400;
    width: 250px;
    background-color: gray;
    border-radius: 20px;
    text-align: center;
    margin: 10px;
}

.add-cloth{
  cursor: pointer;
    color: white;
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;

    font-weight: 400;
    width: 250px;
    background-color: gray;
    border-radius: 20px;
    text-align: center;
    margin: 10px;  
 
}
#file {
 width: 145px;
}
#savealt {
 display: none;
}
.layer {
  display: none;
}

.layer-2 {
display: none;
}
.layerm {
        position: fixed;
        top: 0;
        left: 0;
                z-index: -1;
}

.layer-2m {
           position: fixed;
        bottom: 0;
        left: 0;
                z-index: -1;
}
.admin-clothes .cloth{
display: inline-block;
vertical-align: top;
margin: 10px;
border: 1px solid gray;
border-radius: 20px;
}
.buttons{
    margin-top: 500px;
}
.ellipse {
 /* Ellipse 3 */
 margin-left: auto;
 display: inline-block;
width: 33px;
        height: 33px;
        box-sizing: border-box;
        border-radius: 25px;
box-shadow: 0px 4px 4px 0px rgba(50, 255, 0, 1),inset 0px 4px 4px 0px rgba(50, 255, 0, 1),0px 0px 60px 0px rgba(255, 255, 255, 0.14),0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),0px 3px 12px -3px rgba(0, 0, 0, 0.24),inset 1.13px 1.8px 11.600000381469727px 0px rgba(209, 230, 255, 0.23),inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68),inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08),inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
backdrop-filter: blur(67px);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%);
}
.rectangle {
    padding: 0 10px 0 30px;
   /*  margin: 50px 100px; */
    display: flex;
    align-items: center;
    justify-content: center;
width: 100%;
height: 62px;
    box-sizing: border-box;
    border-radius: 52px;
    box-shadow: inset 0px -3px 4px 0px rgba(50, 255, 0, 1),0px 0px 60px 0px rgba(255, 255, 255, 0.14),0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),0px 3px 12px -3px rgba(0, 0, 0, 0.24),inset 1.13px 1.8px 11.600000381469727px 0px rgba(209, 230, 255, 0.23),inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68),inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08),inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
    backdrop-filter: blur(67px);
    background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%);
}

.container2 {
z-index: 2;
        max-width: 800px;
       
        padding: 20px;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        position: relative;
}
.fem{
  position: absolute;
    left: 50px;
    top: 150px;  
}
.fem img{
height: 350px;
}
.man img{
height: 350px;
}
.man{
   position: absolute;
    right: 50px;
    top: 150px; 
}
.buttons a{
    display: inline-block;
    width: 49%;
}
/* Страница выбора пола */
.gender-selection {
    background: #000000;
    min-height: 100vh;
}

.gender-selection .container {
    min-height: 100vh;
}

.gender-buttons {
    display: flex;
    flex-direction: column;
    gap: 103px;
    justify-content: center;
    align-items: center;
    
}

.gender-btn {
    width: 227px;
    height: 82px;
    border-radius: 72px;
    background: rgba(255, 255, 255, 0.2);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%),
        radial-gradient(circle at 12% 19%, rgba(255, 235, 255, 0.05) 0%, rgba(229, 255, 240, 0.04) 70%, rgba(240, 240, 255, 0) 100%);
    border: 1.2px solid;
    border-image: linear-gradient(0deg, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.3) 68%, rgba(255, 255, 255, 0) 100%) 1;
    backdrop-filter: blur(67px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
}

.gender-btn-female {
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14), 0px 4px 4px 0px rgba(50, 255, 0, 1);
}

.gender-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0px 20px 50px -6px rgba(0, 0, 0, 0.4);
}

.gender-btn-inner {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 25px;
    position: relative;
    z-index: 1;
}

.gender-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
}
input{
    z-index: 10;
}
.gender-text {


color: rgba(255, 255, 255, 1);

font-family: Cy Grotesk;
font-style: Regular;
font-size: 15px;
font-weight: 400;
line-height: 18px;
letter-spacing: 0%;
text-align: left;
}
.order-i{
   position: fixed;
        bottom: 20px;
        right: calc(50% - 25px);
        z-index: 13;
}
.back-i{
        position: fixed;
        bottom: 20px;
       
        right: calc(80% - 20px);
        z-index: 13;
}
.back-im{
        position: fixed;
        bottom: 20px;
      transform: scaleX(-1);
        left: calc(80% - 20px);
        z-index: 13;
}
/* Header */
.page-header {
    width: 100%;
    position: fixed;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-light);
    z-index: 3;
}

.back-btn {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.back-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
}

.cart-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border-radius: 24px;
    background: rgba(0, 255, 0, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), 0px 0px 60px 0px rgba(255, 255, 255, 0.14);
    transition: var(--transition);
}

.cart-icon:hover {
    transform: scale(1.05);
}

.cart-icon svg {
    width: 18px;
    height: 18px;
    color: #FFFFFF;
}

.cart-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: var(--primary-color);
    color: black;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 400;
}
.name-input{
  display: block;
    color: rgba(0, 0, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
   
    font-weight: 400;
    width: 250px;
    border-radius: 20px;
    padding: 5px;
    margin: 10px;  
}
.sex-cloth{
     width: 250px;
    color: rgba(0, 0, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
    font-weight: 400;
    border-radius: 20px;
    padding: 5px;
    margin: 10px;   
}
.uploadimage{
    border: 2px dashed gray;
    border-radius: 20px;
    margin: 10px;
}
.name_cloth{
   display: block;
    text-align: center;
}
.del_cloth{
     background-color: red;
    color: white;
    opacity: 0.7;
    border-radius: 0px 0px 20px 20px;
    text-align: center;   
    cursor: pointer;
}
.cart-iconmr{
 background: none !important;
 width: 40px !important;
 height: 40px !important;
 bottom: 5px !important;
 box-shadow: none !important;
}
.cart-iconm{
 background: none !important;
 width: 40px !important;
 height: 40px !important;
 bottom: 5px !important;
 box-shadow: none !important;
}
.menum{
width: 96%;
        height: 40px;
        position: fixed;
        bottom: 25px;
        left: 2%;
        box-sizing: border-box;
        border-radius: 24px;
        box-shadow: 0px 0px 60px 0px rgba(255, 255, 255, 0.14), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37), inset 1.13px 1.8px 11.600000381469727px 0px rgba(209, 230, 255, 0.23), inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68), inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08), inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
        backdrop-filter: blur(67px);
        background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01), rgba(255, 249.9, 249.9, 0.01), rgba(252.45, 252.45, 255, 0)) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04), rgba(239.7, 239.7, 255, 0)) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3) 17.241%, rgba(255, 255, 255, 0) 58.621%, rgba(216.75, 234.6, 255, 0.14) 86.207%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%), rgba(255, 255, 255, 0.2);
        z-index: 12;
}
.size-view {
    display: inline-block;
    position: fixed;
}
.size-view img{
    height: 300px;
}
/* Main Content */
.main-content {
 position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
        padding: 40px 10px;
        display: flex;
}
.main-orders {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 50px 20px;
   
}
.del_a{
cursor: pointer;   
color: red; 
}
.page-title {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 30px;
    text-align: center;
}

/* Сетка карточек размеров */
.size-cards-grid {
display: inline-grid;
        place-items: center;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 20px;
        padding: 0px;
        max-width: 300px;
        margin: 0 0 0 auto;
}

.size-card {
    position: relative;
    background: var(--bg-white);
    border-radius: 24px;
    padding: 20px 21px;
    cursor: pointer;
    transition: var(--transition);
}

.size-card-image {
    width: 139px;
    height: 170px;
    background: #D9D9D9;
    border-radius: 9.6px;
    margin-bottom: 12px;
    object-fit: cover;
}

.size-card-title {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.size-card-params {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.size-card-param {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    line-height: 1.3;
}

.size-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 10px;
    height: 20px;
    border-radius: 9.6px;
    background: rgba(206, 206, 206, 0.28);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border: 0.2px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(26.8px);
    box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.14);
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    transition: var(--transition);
}

.size-card-row:hover {
    background: rgba(206, 206, 206, 0.4);
}

.size-card-row.selected {
    background: #000000;
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    color: #FFFFFF;
    border-color: #32FF00;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
}

.size-card-select-btn {
    width: 28px;
    height: 20px;
    border-radius: 9.6px;
    background: rgba(206, 206, 206, 0.28);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border: 0.2px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(26.8px);
    box-shadow: 0px 0px 24px 0px rgba(255, 255, 255, 0.14);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}

.size-card-select-btn:hover {
    background: rgba(206, 206, 206, 0.4);
}

.size-card-select-btn.selected {
    background: #000000;
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border-color: #32FF00;
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
}

.size-card-select-btn-icon {
    width: 16px;
    height: 21px;
    opacity: 0.5;
}

/* Панель информации о размере */
.size-info-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.55);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    backdrop-filter: blur(67px);
    border-top: 0.5px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px -3px 12px -3px rgba(0, 0, 0, 0.24), 0px -17.2px 40px -6px rgba(0, 0, 0, 0.37);
    padding: 20px;
    z-index: 1000;
}

.size-info-content {
    max-width: 187px;
    margin: 0 auto;
    position: relative;
}

.size-info-title {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 15px;
    text-align: center;
}

.size-info-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 25px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.2);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(67px);
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-dark);
    transition: var(--transition);
}

.size-info-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.size-info-details {
    background: rgba(255, 255, 255, 0.2);
    background-image: 
        linear-gradient(0deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224, 237, 255, 0.11) 100%),
        linear-gradient(-43deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 66%, rgba(217, 235, 255, 0.14) 100%);
    border-radius: 24px;
    padding: 15px;
    margin-bottom: 15px;
    border: 0.5px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(67px);
    box-shadow: 0px 3px 12px -3px rgba(0, 0, 0, 0.24), 0px 17.2px 40px -6px rgba(0, 0, 0, 0.37);
}

.size-info-detail-item {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.size-info-detail-item:last-child {
    margin-bottom: 0;
}

/* Buttons */
.action-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 32.76px;
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    font-family: inherit;
    backdrop-filter: blur(4px);
}

.btn-primary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-dark);
    border: 0.55px solid rgba(255, 255, 255, 0.68);
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-dark);
    border: 0.55px solid rgba(255, 255, 255, 0.68);
    box-shadow: var(--shadow);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
}

.btn-order {
    width: 100%;
    padding: 15px;
    font-size: 12.42px;
    margin-top: 20px;
}

/* Корзина */
.cart-page .main-content {
    max-width: 800px;
}

.cart-items {
    margin-bottom: 40px;
}

.cart-item {
    background: var(--bg-white);
    border-radius: 31.79px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-title {
    font-size: 18.63px;
    font-weight: 400;
    margin-bottom: 10px;
}

.cart-item-size {
    font-size: 18.63px;
    font-weight: 400;
    color: #666;
    margin-bottom: 10px;
}

.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 15px;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-dark);
    transition: var(--transition);
}

.quantity-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.quantity-value {
    font-size: 12.42px;
    font-weight: 400;
    min-width: 30px;
    text-align: center;
}

/* Форма заказа */


.count-info div{
 display: inline-block;
}

.color-order{
color: rgba(0, 0, 0, 1);
    font-size: 15px;
    font-weight: 400;
    text-align: left;
    line-height: 15px;
    display: block;
}
.name-order{
        color: rgba(0, 0, 0, 1);
        font-size: 18px;
        font-weight: 400;
        text-align: left;
        margin-bottom: 20px;
        line-height: 18px;
        display: block;
}
.size-order{
  color: rgba(0, 0, 0, 1);
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    line-height: 20px;
    display: block;
}
.usersize-order{
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    line-height: 16px;
}
.count-info{
  position: absolute;
    bottom: 0;
    left: 30px;
    user-select: none;
}
a{
    text-decoration: none;
}
.count-change{
     font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border-radius: 25px;
    background-color: black;
    color: white;
    cursor: pointer;
}
.lay{
 display: none;
}
.main-contentm{
display: block !important;
}
.lay2{
 display: none;
}
.count{
     font-size: 16px;
    line-height: 25px;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    width: 40px;
    height: 30px;
    border: #8f8f8f solid 1px;
    border-radius: 10px;
}
.circle-order{
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    color: black;
position: absolute;
top: -15px;
right: -15px;
width: 40px;
height: 40px;
border-radius: 40px;
box-shadow: 0px 0px 115.3066177368164px 0px rgba(255, 255, 255, 0.14),0px 5.77px 23.061323165893555px -5.77px rgba(0, 0, 0, 0.24),inset 2.16px 3.46px 22.292613983154297px 0px rgba(209, 230, 255, 0.23),inset 0px 2.88px 10.08932876586914px 0px rgba(255, 255, 255, 0.68),inset -1.04px 0px 2.8826653957366943px 0px rgba(38, 115, 255, 0.08),inset 1.04px 0px 2.8826653957366943px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 1.8256880044937134px 0px rgba(242, 242, 255, 0.02);
backdrop-filter: blur(128.75904846191406px);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%),rgba(0, 255, 0, 0.66);
}
.inform{
  margin-left: auto;
   
}
.span-info{
display: block;
    margin-left: 20px;
    font-weight: 500;
    font-size: 20px;
    margin-bottom: 5px;
}
.input-info{
        margin-bottom: 10px;
        padding-left: 10px;
        font-size: 18px;
        line-height: 40px;
        vertical-align: middle;
        display: block;
        width: 100%;
        height: 50px;
        border: #8f8f8f solid 1px;
        border-radius: 30px;
        border-radius: 53.07px;
        box-shadow: 0px 0px 132.67605590820312px 0px rgba(255, 255, 255, 0.14), 0px 6.63px 26.53520965576172px -6.63px rgba(0, 0, 0, 0.24), inset 2.49px 3.98px 25.650707244873047px 0px rgba(209, 230, 255, 0.23), inset 0px 3.32px 11.60915470123291px 0px rgba(255, 255, 255, 0.68), inset -1.19px 0px 3.316901206970215px 0px rgba(38, 115, 255, 0.08), inset 1.19px 0px 3.316901206970215px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 2.1007041931152344px 0px rgba(242, 242, 255, 0.02);
        backdrop-filter: blur(148.1549072265625px);
}

 table, th, td {
  border: 1px solid black; /* Sets border width, style, and color */
  padding: 10px;
}

table {
  border-collapse: collapse; /* Merges double borders into single borders */
}

 .img_a img{
    max-height: 30px; 
}
.order_a div{
    vertical-align: top;
    display: inline-block;
    padding: 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
}
.but-info{
    cursor: pointer;
    padding-left: 20px;
    font-size: 18px;
    line-height: 40px;
    vertical-align: middle;
    display: block;
    width: 140px;
    height: 50px;
    border: #8f8f8f solid 1px;
    border-radius: 30px;
    margin-top: 40px;
}
 .cloth{
    width: 180px;
    color: rgba(0, 0, 0, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 18px;
      position: relative;
    font-weight: 400;
    letter-spacing: 0%;
    text-align: left;
        }
        .tekst-height{
            display: block;
        }
        .container {
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }
       .parametrs select {
        width: 35px;
            float: right;
            padding: 2px;
            font-size: 16px;
            border: 1px solid #ddd;
            border-radius: 30px;
            background-color: white;
                appearance: none;
   margin: 3px 0;
    background: url(Vector.svg) no-repeat right;
    background-position-x: calc(100% - 12px);
        }
        select::before{

}

.parametrs select::-webkit-scrollbar {
width: 0; /* Ширина полосы = 0 */
background: transparent; /* Прозрачный фон */
}
/* Для Firefox, чтобы скрыть, но сохранить прокрутку мышью/клавиатурой */
.parametrs select {
scrollbar-width: none;
}
.parametrs select option{
box-sizing: border-box;
border-radius: 24px;
box-shadow: 0px 0px 60px 0px rgba(255, 255, 255, 0.14),0px 17.2px 40px -6px rgba(0, 0, 0, 0.37),inset 0px 1.5px 5.25px 0px rgba(255, 255, 255, 0.68),inset -0.54px 0px 1.5px 0px rgba(38, 115, 255, 0.08),inset 0.54px 0px 1.5px 0px rgba(255, 38, 64, 0.07),inset 0px 0px 0.949999988079071px 0px rgba(242, 242, 255, 0.02);
background: radial-gradient(20.00% 20.00% at 0% 0%,rgba(255, 255, 255, 0.01),rgba(249.9, 249.9, 255, 0.01) 30%,rgba(255, 249.9, 249.9, 0.01) 60%,rgba(252.45, 252.45, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,radial-gradient(39.00% 38.00% at 12% 19%,rgba(255, 234.6, 255, 0.05),rgba(229.5, 255, 239.7, 0.04) 70%,rgba(239.7, 239.7, 255, 0) 100%)/* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */,linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0) 60%,rgba(216.75, 234.6, 255, 0.14) 100%),linear-gradient(0.00deg, rgba(255, 255, 255, 0.45),rgba(255, 255, 255, 0.15) 30%,rgba(255, 255, 255, 0) 70%,rgba(224.4, 237.15, 255, 0.11) 100%),rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 1);
font-family: Cy Grotesk;
font-style: Regular;
font-weight: 400;
line-height: 30px;
letter-spacing: 0%;
text-align: center;        
}
.hiden{
    display: none !important;
}
.count-order-cloth{
  
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 15px;
    border-radius: 50px;
    cursor: pointer;
    background: rgba(0, 255, 0, 0.66);
    vertical-align: middle;
    line-height: 30px;
    text-align: center;
}
.select-size{
    display: none;
    width: 100%;
    height: 25px;
    display: flex;
    align-items: center;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 30px;
}
.select-size-img{
      height: calc(100% - 4px);
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 30px;
    padding: 2px 10px;
    margin-right: 5px;  
 
}
.select-size-img img{
height: 100%;
   max-width: 15px;
}
.select-size-span{
    margin-left: auto;
    margin-right: auto;
    height: 25px;
    line-height: 25px;
}
.result {
margin-top: 15px;
padding: 10px;
background-color: #e8f5e9;
border-radius: 4px;
display: none;
}
.parametrs{
height: 30px;
border-radius: 40px;
line-height: 26px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 5px 0;
background-color: white;
}
.photo{
max-width: 180px;
        max-height: 200px;
    
        margin: 0 auto;


    }
.cards-img{
    display: flex;
    align-items: center;
  height: 205px; 
  margin: 10px 0; 
}


.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal {
    display: none;
}

.modal .close{
    position:absolute;
    right:10px;
    top:0;
    padding: 5px;
    cursor:pointer;
}

.modal .overlay{
    position:absolute;
    background: rgba(0, 0, 0, 0.69);
    left:0;
    top:0;
    z-index:9;
    width:100%;
    height:100%;
}

.modal-content{
    position:relative;
    z-index:10;
    padding:15px;
    margin:10px;
}

.modal .close svg {
    fill: #fff;
}
.orderc{
        margin: 20px;
        padding: 10px;
        position: relative;
        border-radius: 31.79px;
        box-shadow: 0px 0px 79.47286224365234px 0px rgba(255, 255, 255, 0.14), 0px 3.97px 15.894574165344238px -3.97px rgba(0, 0, 0, 0.24), inset 1.49px 2.38px 15.364754676818848px 0px rgba(209, 230, 255, 0.23), inset 0px 1.99px 6.95387601852417px 0px rgba(255, 255, 255, 0.68), inset -0.72px 0px 1.9868217706680298px 0px rgba(38, 115, 255, 0.08), inset 0.72px 0px 1.9868217706680298px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 1.2583203315734863px 0px rgba(242, 242, 255, 0.02);
        backdrop-filter: blur(88.74469757080078px);
        background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01), rgba(255, 249.9, 249.9, 0.01), rgba(252.45, 252.45, 255, 0)) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04), rgba(239.7, 239.7, 255, 0)) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3) 17.241%, rgba(255, 255, 255, 0) 58.621%, rgba(216.75, 234.6, 255, 0.14) 86.207%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%), rgba(255, 255, 255, 0.55);
    
}
.orderc img{
        /* width: 150px; */
        height: 150px;
        max-width: 150px;
        margin-right: 10px;
        display: inline-block;
        box-sizing: border-box;
        border: 0.66px solid rgba(0, 0, 0, 1);
        border-radius: 31.79px;
        box-shadow: 0px 22.78px 52.981910705566406px -7.95px rgba(0, 0, 0, 0.37), 0px 3.97px 15.894574165344238px -3.97px rgba(0, 0, 0, 0.24), inset 1.49px 2.38px 15.364754676818848px 0px rgba(209, 230, 255, 0.23), inset 0.72px 0px 1.9868217706680298px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 1.2583203315734863px 0px rgba(242, 242, 255, 0.02);
        background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01), rgba(255, 249.9, 249.9, 0.01), rgba(252.45, 252.45, 255, 0)) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04), rgba(239.7, 239.7, 255, 0)) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3) 17.241%, rgba(255, 255, 255, 0) 58.621%, rgba(216.75, 234.6, 255, 0.14) 86.207%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%), rgba(186, 186, 186, 0.88);
}
.inf-order{
  position: relative;
        min-height: 150px;
        display: inline-block;
        vertical-align: top;
        width: calc(100% - 160px);
        
}
.order{
   display: inline-block;
        background-color: black;
        color: white;
        padding: 20px;
        width: auto;
}

.but_span{
        /* padding: 0; */
        display: inline-block;
        /* width: 100px; */
        color: rgba(255, 255, 255, 1);
        font-family: 'Cy Grotesk', serif;
        font-size: 13px;
        font-weight: 400;
        text-align: center;
}
.s_n_m{
    display: none;
 cursor: pointer;
        font-size: 60px;
        font-weight: 400;
        text-align: left;
        line-height: 100px;
        position: absolute;
        right: 180px;
}
.s_n_b{
        font-size: 60px;
        font-weight: 400;
        text-align: left;
        line-height: 100px;
        position: absolute;
        left: 180px;
        cursor: pointer;
}
.circle{
margin-left: auto;
        width: 14px;
        height: 14px;
        box-sizing: border-box;
        border-radius: 100%;
        box-shadow: 0px 1.82px 1.8198431730270386px 0px rgba(50, 255, 0, 1), inset 0px 1.82px 1.8198431730270386px 0px rgba(50, 255, 0, 1), 0px 0px 27.297645568847656px 0px rgba(255, 255, 255, 0.14), 0px 7.83px 18.19843292236328px -2.73px rgba(0, 0, 0, 0.37), 0px 1.36px 5.459529876708984px -1.36px rgba(0, 0, 0, 0.24), inset 0.51px 0.82px 5.277544975280762px 0px rgba(209, 230, 255, 0.23), inset 0px 0.68px 2.3885443210601807px 0px rgba(255, 255, 255, 0.68), inset -0.25px 0px 0.682441234588623px 0px rgba(38, 115, 255, 0.08), inset 0.25px 0px 0.682441234588623px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.432212769985199px 0px rgba(242, 242, 255, 0.02);
        backdrop-filter: blur(30.482376098632812px);
        background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01) 30%, rgba(255, 249.9, 249.9, 0.01) 60%, rgba(252.45, 252.45, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04) 70%, rgba(239.7, 239.7, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(216.75, 234.6, 255, 0.14) 100%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%);
    }
    .but_size{
cursor: pointer;
        padding: 5px 10px 5px 5px;
        margin: 0px 20px 0px 0px;
        display: inline-flex;
        align-items: center;
        text-align: center;
        /* display: inline-block; */
        width: 120px;
        box-sizing: border-box;
        border-radius: 32.76px;
        box-shadow: inset 0px -1.36px 1.8198431730270386px 0px rgba(50, 255, 0, 1), 0px 0px 27.297645568847656px 0px rgba(255, 255, 255, 0.14), 0px 7.83px 18.19843292236328px -2.73px rgba(0, 0, 0, 0.37), 0px 1.36px 5.459529876708984px -1.36px rgba(0, 0, 0, 0.24), inset 0.51px 0.82px 5.277544975280762px 0px rgba(209, 230, 255, 0.23), inset 0px 0.68px 2.3885443210601807px 0px rgba(255, 255, 255, 0.68), inset -0.25px 0px 0.682441234588623px 0px rgba(38, 115, 255, 0.08), inset 0.25px 0px 0.682441234588623px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.432212769985199px 0px rgba(242, 242, 255, 0.02);
        backdrop-filter: blur(30.482376098632812px);
        background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01) 30%, rgba(255, 249.9, 249.9, 0.01) 60%, rgba(252.45, 252.45, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04) 70%, rgba(239.7, 239.7, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(216.75, 234.6, 255, 0.14) 100%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%);
}
        .but_basket{
cursor: pointer;
        padding: 5px 10px 5px 0px;
        display: inline-flex;
        align-items: center;
        text-align: center;
        /* display: inline-block; */
        width: 120px;
        box-sizing: border-box;
        border-radius: 32.76px;
        box-shadow: inset 0px -1.36px 1.8198431730270386px 0px rgba(50, 255, 0, 1), 0px 0px 27.297645568847656px 0px rgba(255, 255, 255, 0.14), 0px 7.83px 18.19843292236328px -2.73px rgba(0, 0, 0, 0.37), 0px 1.36px 5.459529876708984px -1.36px rgba(0, 0, 0, 0.24), inset 0.51px 0.82px 5.277544975280762px 0px rgba(209, 230, 255, 0.23), inset 0px 0.68px 2.3885443210601807px 0px rgba(255, 255, 255, 0.68), inset -0.25px 0px 0.682441234588623px 0px rgba(38, 115, 255, 0.08), inset 0.25px 0px 0.682441234588623px 0px rgba(255, 38, 64, 0.07), inset 0px 0px 0.432212769985199px 0px rgba(242, 242, 255, 0.02);
        backdrop-filter: blur(30.482376098632812px);
        background: radial-gradient(20.00% 20.00% at 0% 0%, rgba(255, 255, 255, 0.01), rgba(249.9, 249.9, 255, 0.01) 30%, rgba(255, 249.9, 249.9, 0.01) 60%, rgba(252.45, 252.45, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, radial-gradient(39.00% 38.00% at 12% 19%, rgba(255, 234.6, 255, 0.05), rgba(229.5, 255, 239.7, 0.04) 70%, rgba(239.7, 239.7, 255, 0) 100%) /* Предупреждение: градиент использует вращение, не поддерживаемое CSS, и может работать не так, как ожидается. */, linear-gradient(-43.34deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%, rgba(216.75, 234.6, 255, 0.14) 100%), linear-gradient(0.00deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0) 70%, rgba(224.4, 237.15, 255, 0.11) 100%);
        }
        .select-size-order{
        position: relative;
        margin: 20px 20px 20px 20px;
        width: 170px;
        height: 170px;
        border-radius: 360px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border: 1.56px solid rgba(255, 255, 255, 1);
        display: inline-flex;
}
.select-div{
  
    width: 100%;
}
.select-div span{
 display: block;
 text-align: center;
}
.description{
        /* margin: 20px 50px 10px 10px; */
        /* display: inline-block; */
        vertical-align: top;
}
.registration{
/*  display: inline-block; */
        text-align: center;
        margin: 0 !important;
}
.s_s{
color: rgba(255, 255, 255, 1);
        font-family: 'Cy Grotesk', serif;
        font-size: 18px;
        font-weight: 400;
text-align: center;
}
.s_n{
color: rgba(50, 255, 0, 1);
        font-family: 'Cy Grotesk', serif;
        font-size: 80px;
        font-weight: 400;
        text-align: left;
        line-height: 80px;
}
.s_h{
color: rgba(255, 255, 255, 1);
        font-family: 'Cy Grotesk', serif;
        font-size: 14px;
        font-weight: 400;
        text-align: center;
}
.color{
    display: block;
    color: rgba(255, 255, 255, 1);
    font-family: 'Cy Grotesk', serif;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
}
.parametrs-oders{
    color: rgba(255, 255, 255, 1);
font-family: 'Cy Grotesk', serif;
font-size: 17.15px;
font-weight: 400;
text-align: left;
}
.parametrs-orders div{
 margin: 20px 0px;
 display: flex;
}
.sp-num{
    margin-left: auto;
}

.name{
          display: block;
        color: rgba(50, 255, 0, 1);
        font-family: 'Cy Grotesk', serif;
        font-size: 30px;
        width: 200px;
        font-weight: 400;
        text-align: left;
}
.in_par{
display: block;
        width: 200px;
        color: rgba(255, 255, 255, 1);
        font-family: 'Cy Grotesk', serif;
        font-size: 20px;
        font-weight: 400;
        text-align: left; 
}
}