@font-face {
    font-family: Urbanist;
    src: url('../../fonts/Urbanist-Light.ttf');
    font-weight: 300;
}
@font-face {
    font-family: Urbanist;
    src: url('../../fonts/Urbanist-Medium.ttf');
    font-weight: 500;
}

.page-account .icon-arrow-back {
    margin-bottom: 70px;
    display: block;
    margin-left: 20px;
}
/* Login Styles */
.custom-login-wrapper {
	width: 100%;
	/* max-width: 500px; */
	background-color: #ffffff;
	padding: 60px 111px;
	box-sizing: border-box;
	text-align: center;
	display: flex;
	justify-content: space-between;
}
.custom-login-wrapper .show-password-input {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M11.4996%2018C15.4996%2018%2018.9596%2015.78%2020.7396%2012.5C18.9596%209.22%2015.4996%207%2011.4996%207C7.49965%207%204.03965%209.22%202.25965%2012.5C4.03965%2015.78%207.49965%2018%2011.4996%2018ZM11.4996%206C16.0596%206%2019.9996%208.65%2021.8596%2012.5C19.9996%2016.35%2016.0596%2019%2011.4996%2019C6.93965%2019%202.99965%2016.35%201.13965%2012.5C2.99965%208.65%206.93965%206%2011.4996%206ZM11.4996%208C13.9996%208%2015.9996%2010%2015.9996%2012.5C15.9996%2015%2013.9996%2017%2011.4996%2017C8.99965%2017%206.99965%2015%206.99965%2012.5C6.99965%2010%208.99965%208%2011.4996%208ZM11.4996%209C10.5714%209%209.68115%209.36875%209.02478%2010.0251C8.3684%2010.6815%207.99965%2011.5717%207.99965%2012.5C7.99965%2013.4283%208.3684%2014.3185%209.02478%2014.9749C9.68115%2015.6313%2010.5714%2016%2011.4996%2016C12.4279%2016%2013.3181%2015.6313%2013.9745%2014.9749C14.6309%2014.3185%2014.9996%2013.4283%2014.9996%2012.5C14.9996%2011.5717%2014.6309%2010.6815%2013.9745%2010.0251C13.3181%209.36875%2012.4279%209%2011.4996%209Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    width: 23px;
    height: 22px;
    border: unset;
    background-color: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
}
.custom-login-wrapper .show-password-input.display-password {
    width: 20px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2218%22%20viewBox%3D%220%200%2021%2018%22%20fill%3D%22none%22%20xmlns%3D%22http://www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1.4%200.71L2.11%200L18.86%2016.75L18.15%2017.46L14.81%2014.11C13.44%2014.68%2011.94%2015%2010.36%2015C5.8%2015%201.86%2012.35%200%208.5C0.97%206.5%202.49%204.83%204.36%203.68L1.4%200.71ZM10.36%2014C11.65%2014%2012.89%2013.77%2014.03%2013.34L12.91%2012.21C12.18%2012.71%2011.31%2013%2010.36%2013C7.86%2013%205.86%2011%205.86%208.5C5.86%207.55%206.15%206.68%206.65%205.95L5.1%204.41C3.42564%205.38547%202.04947%206.79968%201.12%208.5C2.9%2011.78%206.36%2014%2010.36%2014ZM19.6%208.5C17.82%205.22%2014.36%203%2010.36%203C9.21%203%208.09%203.19%207.05%203.53L6.27%202.75C7.54%202.26%208.92%202%2010.36%202C14.92%202%2018.86%204.65%2020.72%208.5C19.8113%2010.3858%2018.4038%2011.987%2016.65%2013.13L15.93%2012.4C17.46%2011.44%2018.73%2010.1%2019.6%208.5ZM10.36%204C12.86%204%2014.86%206%2014.86%208.5C14.86%209.32%2014.64%2010.08%2014.26%2010.74L13.52%2010C13.74%209.54%2013.86%209.04%2013.86%208.5C13.86%207.57174%2013.4913%206.6815%2012.8349%206.02513C12.1785%205.36875%2011.2883%205%2010.36%205C9.82%205%209.32%205.12%208.86%205.34L8.12%204.6C8.78%204.22%209.54%204%2010.36%204ZM6.86%208.5C6.86%209.42826%207.22875%2010.3185%207.88513%2010.9749C8.5415%2011.6313%209.43174%2012%2010.36%2012C11.03%2012%2011.65%2011.81%2012.18%2011.5L7.36%206.68C7.05%207.21%206.86%207.83%206.86%208.5Z%22%20fill%3D%22black%22/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: 2px;
}
.woocommerce-form-login {
	width: 425px;
	padding: 0;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
}
/* Logo Styles */
.custom-login-logo {
	margin-bottom: 40px;
	width: 88px;
}

.logo-symbol svg {
    width: 60px;
    height: 60px;
}

/* Header Styles */
.custom-login-header {
	margin-bottom: 50px;
	text-align: left;
	width: 315px;
}

.woocommerce-account .woocommerce-Input {
	border: 1px solid #79747E !important;
	width: 100% !important;
	padding: 4px 16px;
	font-size: 16px;
	color: #171717;
}
.flux-checkout__content .custom-login-container.bulk-order {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    left: 50%;
}
.flux-checkout__content  .custom-login-wrapper {
    justify-content: space-around;
}

/* #49454F */
.welcome-title {
	font-size: 64px;
	font-weight: 300;
	color: #000000;
	margin: 0 0 16px 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.welcome-subtitle {
	font-size: 16px;
	color: #212529;
	margin: 0;
	line-height: 1.5;
	font-weight: 400;
	font-family: Gravity;
}

/* Form Styles */
.custom-login-form {
    text-align: left;
}

.custom-form-group {
    margin-bottom: 24px;
    position: relative;
}

.custom-form-label {
	display: block;
	font-size: 12px;
	margin-bottom: 8px;
	font-weight: 400;
	text-transform: none;
	background-color: white;
	position: absolute;
	top: -8px;
	left: 12px;
	padding: 0 5px;
	color: #49454F;
	width: auto !important;
}

.custom-form-input {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 16px;
    color: #000000;
    background-color: #ffffff;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.custom-form-input:focus {
    outline: none;
    border-color: #000000;
}

.custom-form-input::placeholder {
    color: #999999;
    font-size: 16px;
}

/* Checkbox Styles */
.custom-checkbox-group {
	margin-bottom: 48px;
}

.custom-checkbox-label {
	display: flex;
	align-items: center;
	font-size: 16px;
	color: #000000;
	cursor: pointer;
	position: relative;
	user-select: none;
	margin: 0;
	font-family: Gravity, Arial, sans-serif;
	font-size: 16px;
}

.custom-checkbox-label .custom-checkbox {
    height: 0;
    width: 0;
    display: none;
}

.custom-checkbox-label .custom-checkbox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    position: relative;
    margin-bottom: 18px;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.custom-checkbox-label .checkmark {
    height: 17px;
    width: 17px;
    border: 1px solid var(--black-color);
    position: relative;
    flex: 0 0 17px;
    margin-right: 10px;
}

.custom-checkbox-label:has(.custom-checkbox:checked) .checkmark {
    background-color: var(--black-color);
}

.custom-checkbox-label .checkmark:after {
    top: -1px;
    width: 16px;
    right: -1px;
    height: 16px;
}

.custom-checkbox-label:has(.custom-checkbox:checked) .checkmark:after {
    display: block;
}

.custom-checkbox-label .checkmark:after {
    content: url('/wp-content/themes/grozio/icons/icon-checked.svg');
    position: absolute;
    display: none;
}

.custom-login-button.ds-button-lg,
.custom-forgot-password.ds-button-lg{
	max-width: unset;
}
/* Button Styles */
.custom-login-button {
    width: 100%;
    padding: 16px 20px;
    background-color: #000000;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.custom-login-button:hover {
    background-color: #333333;
    color: #ffffff;
}

.custom-login-button:active {
    background-color: #000000;
}

/* Forgot Password Link */
.custom-forgot-password {
    display: block;
    width: 100%;
    padding: 16px 20px;
    text-align: center;
    color: #000000;
    text-decoration: none;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    box-sizing: border-box;
}

.custom-forgot-password:hover {
    background-color: #f8f8f8;
    border-color: #000000;
    color: #000000;
    text-decoration: none;
}

/* Footer */
.custom-login-footer {
    margin-top: 40px;
    text-align: center;
}

.footer-text {
    font-size: 16px;
    color: #888888;
    display: none; /* Показываем только на мобильных */
}

/* Mobile Styles */
@media (max-width: 1120px) {
	.custom-login-wrapper {
		flex-direction: column;
		align-items: center;
	}
	.custom-login-wrapper {
		padding: 20px 0px;
	}
	.custom-login-logo{
		width: 72px;
	}
	.welcome-title{
		font-size: 38px;
	}
	.custom-login-header {
		margin-bottom: 50px;
		text-align: center;
		width: auto;
	}
}



/* Hide default WooCommerce styling */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
    background-color: #f8f8f8;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 24px;
}

/* Override WooCommerce default form styles */
.woocommerce-form-login .form-row {
    margin: 0;
    padding: 0;
}

.woocommerce form .form-row {
    margin: 0;
    padding: 0;
}

body:has(.custom-login-container) .flux-checkout__spinner {
    display: none;
}
body:has(.custom-login-container) .woocommerce-info {
    display: none;
}
.form-login-popup {
    position: fixed;
    z-index: 9999;
    background: white;
    top: 0;
    width: 100%;
    height: 100%;
}
.form-login-popup .custom-login-wrapper {
    flex-direction: column;
}
.form-login-popup .custom-login-wrapper {
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.form-login-popup .custom-login-header {
    text-align: center;
}
.form-login-popup .close {
    float: right;
    position: relative;
    margin: 20px;
    cursor: pointer;
}
.form-login-popup .custom-form-label {
    font-family: Urbanist;
    font-size: 12px;
    font-weight: 500;
}
.form-login-popup .custom-form-input {
    font-family: Gravity;
    font-weight: 350;
}
.form-login-popup .va-lang-swith a {
    color: black !important;
    justify-content: center;
}
.form-login-popup .va-lang-swith a::before {
    display: none;
}
.form-login .custom-form-input {
    border: 1px solid #79747E;
}

.form-lost-password-popup .back-to-login-icon-mobile {
    display: none !important;
}
.form-lost-password-popup .container-form-lost-password {
    padding-top: 0;
    padding-bottom: 140px;
}
.form-lost-password-popup form.woocommerce-ResetPassword {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.form-lost-password-popup form.woocommerce-ResetPassword .left-part .reset-password-title {
    font-family: Urbanist;
    font-size: 64px;
    font-weight: 300;
    color: #000000;
}
.form-lost-password-popup form.woocommerce-ResetPassword .left-part .icon {
    margin-bottom: 40px;
}
.form-lost-password-popup form.woocommerce-ResetPassword .left-part p {
    max-width: 425px;
    font-family: Gravity;
    font-weight: 350;
    font-size: 16px;
    color: #212529;
}
.form-lost-password-popup form.woocommerce-ResetPassword .right-part input[name="user_login"] {
    border: 1px solid #79747E !important;
    height: 56px !important;
    font-family: Gravity;
    font-weight: 350;
    font-size: 16px;
    color: #171717;
}
.form-lost-password-popup form.woocommerce-ResetPassword .right-part {
    flex: 1;
    max-width: 426px;
    align-self: center;
    position: relative;
    top: 13px;
}
.form-lost-password-popup form.woocommerce-ResetPassword .form-row {
    align-items: start;
    text-align: left;
    justify-content: start;
}
.form-lost-password-popup form.woocommerce-ResetPassword .right-part label[for="user_login"] {
    color: #49454F;
    font-family: Urbanist;
    font-weight: 500;
    font-size: 12px;
    background: white;
    width: fit-content;
    position: relative;
    top: 6px;
    left: 10px;
    padding: 0 4px;
}
.form-lost-password-popup .woocommerce-form-row.reset-password-btn button {
    height: 46px;
    border: unset;
    outline: none;
    background: black;
    color: #FFF;
    font-family: Urbanist;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    width: 100%;
}
.form-lost-password-popup .woocommerce-form-row.reset-password-btn {
    position: relative;
    top: 50px;
}
.form-lost-password-popup .back-to-login-icon {
    width: fit-content;
    position: relative;
    left: 35px;
    cursor: pointer;
}
.form-lost-password-popup .va-lang-swith a {
    color: black !important;
    margin: 70px 0;
    gap: 0;
    text-align: center;
    display: block;
}
.form-lost-password-popup .page-header,
.form-lost-password-popup .va-lang-swith,
.form-lost-password-popup .back-to-login-icon-mobile,
.form-lost-password-popup .va-lang-swith a::before {
    display: none;
}
.form-lost-password-popup .back-to-login-icon-mobile {
    width: fit-content;
    margin-left: auto;
    position: relative;
    bottom: 40px;
    cursor: pointer;
}

.form-lost-password-popup #user_login {
    width: 100%;
    padding: 0 16px;
}
.form-lost-password-popup[for="user_login"] {
    position: absolute;
    top: -7px;
}
.form-lost-password-popup .woocommerce-ResetPassword {
    width: 100%;
}

.form-login-popup {
    display: none;
}

.popup-form-lost-password {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000004D;
    backdrop-filter: blur(24px);
    z-index: 99999999999;
    display: none;
}

.popup-form-lost-password.active {
    display: block;
}

.popup-form-lost-password .inner {
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    max-width: 648px;
    text-align: center;
    padding: 32px 72px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.popup-form-lost-password .inner > div {
    flex-basis: content;
}

.popup-form-lost-password .inner div.close {
    width: fit-content;
    margin-left: auto;
    cursor: pointer;
}
.popup-form-lost-password .inner .button-got-it {
    background: black;
    outline: none;
    border: unset;
    width: 100%;
    height: 46px;
    color: white;
}

.popup-form-lost-password .inner h3 {
    margin-bottom: 32px;
}

.popup-form-lost-password .inner p.content {
    max-width: 495px;
    font-size: 18px;
    font-family: Gravity;
    line-height: 130%;
    font-weight: 350;
    margin-bottom: 48px;
}

.popup-form-lost-password .inner .confirmation-icon {
    margin-bottom: 10px;
}

.popup-form-lost-password .inner .logo-site {
    display: none;
}

.popup-form-lost-password .inner .va-lang-swith {
    display: none;
}

@media (max-width: 680px) {
    .popup-form-lost-password .inner {
        position: relative;
        top: unset;
        left: unset;
        margin-right: unset;
        transform: unset;
        max-width: unset;
        height: 100%;
        padding: 25px 29px;
    }
    .popup-form-lost-password .inner .close svg {
        width: 32px;
        height: 32px;
    }
    .popup-form-lost-password .inner .logo-site {
        padding: 37px 0 60px 0;
        display: block;
    }

    .popup-form-lost-password .inner p.content {
        max-width: 100%;
        margin-bottom: 40px;
        font-size: 16px;
    }

    .popup-form-lost-password .inner h3 {
        font-size: 38px;
        margin-bottom: 24px;
    }
    .popup-form-lost-password .inner .confirmation-icon {
        width: 64px;
        height: 64px;
    }

    .popup-form-lost-password .inner .va-lang-swith {
        display: block;
        margin-top: auto;
    }
    .popup-form-lost-password .inner .va-lang-swith a {
        margin-bottom: 56px;
    }
}

@media (min-width: 600px) {
    .form-login-popup {
        display: none !important;
    }
}

@media (max-width: 1100px) {
    .form-lost-password-popup form.woocommerce-ResetPassword {
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
    .form-lost-password-popup form.woocommerce-ResetPassword .left-part p {
        max-width: 352px;
    }
    .form-lost-password-popup form.woocommerce-ResetPassword .left-part p,
    .form-lost-password-popup form.woocommerce-ResetPassword .left-part .reset-password-title {
        text-align: center;
    }
    .form-lost-password-popup form.woocommerce-ResetPassword .left-part {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .form-lost-password-popup form.woocommerce-ResetPassword .right-part {
        width: 100%;
    }
    .form-lost-password-popup .back-to-login-icon {
        display: none;
    }
    .form-lost-password-popup form.woocommerce-ResetPassword .left-part .reset-password-title {
        font-family: Urbanist;
        font-weight: 400;
        font-size: 38px;
    }
    .form-lost-password-popup .back-to-login-icon-mobile,
    .form-lost-password-popup .va-lang-swith {
        display: block;
    }
}
@media (max-width: 500px) {
    .form-lost-password-popup form.woocommerce-ResetPassword .left-part .reset-password-title {
        max-width: 200px;
    }
}