@import '../Headers/HeaderNoImg/headerNoImg.css';
@import "../components/Shop/product-preview.css";

@import "shop-general.css";
@import "../components/Shop/woocommerce-form-fields.css";
@import "../components/Shop/woocommerce-message.css";


/* Registration page
----------------------------------------------------------*/
	.afreg_extra_fields h3 {
	    margin: 0;
	}
	#dropdown_state.form-row.afreg_full {
	    margin-bottom: 0;
	}

	/* Log-in Column
	-----------------------------------------------*/
		#custom-account .col-1,
		.woocommerce-MyAccount-navigation {
		    position: relative;
		}
		#custom-account .col-1 .col-container,
		.woocommerce-MyAccount-navigation ul {
		    position: sticky;
		    top: calc( var(--menu-height) + 2.083vw); /*40*/
		    transition: top 0.3s linear;
		}
		.woocommerce-LostPassword a {
		    text-decoration: underline;
		    text-underline-offset: 0.104vw; /*2*/
		}
		.woocommerce-LostPassword a:hover {
		    text-decoration: unset;
		}


/* Password Manager
--------------------------------------------------------------*/
	.woocommerce-password-hint {
	    font-size: 0.677vw; /*13*/
	    margin-bottom: 1.042vw; /*20*/
	    display: block;
	    margin-top: 0.26vw; /*5*/
	}
	.woocommerce-password-strength {
	    font-size: 0.729vw; /*14*/
	    margin-top: 0.521vw; /*10*/
	    font-family: var(--md-font);
	}
	.woocommerce-password-strength,
	.woocommerce-password-hint {
	    padding: 0 1.563vw; /*30*/
	}
	.woocommerce-password-strength.short,
	.woocommerce-password-strength.bad {
	    color: var(--color-red);
	}
	.woocommerce-password-strength.good {
	    color: var(--color_2);
	}
	.woocommerce-password-strength.strong {
	    color: var(--color_1);
	}
	input#reg_password {
	    margin-bottom: 0;
	}

/*MY ACCOUNY Page
---------------------------------------------------------*/

	#custom-account .woocommerce {
	    display: flex;
	}
	#custom-account .woocommerce-MyAccount-content.text-content {
	    width: calc(100% - 15.625vw); /*300*/
	}


	/* My Account Navigation
	-----------------------------------------------------*/
		nav.woocommerce-MyAccount-navigation ul {
		    margin: 0 !important;
		    border: 1px solid var(--color-main-);
		}
		nav.woocommerce-MyAccount-navigation ul li:before {
		    display: none;
		}
		nav.woocommerce-MyAccount-navigation ul li {
		    margin: 0 !important;
		    border-top: 0.052vw solid var(--color-main); /*1*/
		}
		nav.woocommerce-MyAccount-navigation ul li:last-child {
		    border-bottom: 0.052vw solid var(--color-main); /*1*/
		}
		nav.woocommerce-MyAccount-navigation ul li a {
		    display: flex;
		    align-items: center;
		    line-height: 1;
		    padding: 1.04vw 1.563vw; /*20 30*/
		    margin: 0 !important;
		}
		nav.woocommerce-MyAccount-navigation {
		    width: 15.625vw; /*300*/
		    min-width: 15.625vw; /*300*/
		}
		nav.woocommerce-MyAccount-navigation ul li:nth-child(odd) a {
		    background-color: var(--color-main--);
		    color: var(--color-white);
		}
		nav.woocommerce-MyAccount-navigation ul li:nth-child(even) a {
		    background-color: var(--color-pure-white);
		}
		nav.woocommerce-MyAccount-navigation ul li.is-active a,
		nav.woocommerce-MyAccount-navigation ul li a:hover {
		    background-color: var(--color-main);
		    color: var(--color-white);
		}
		nav.woocommerce-MyAccount-navigation ul li svg {
		    height: 1.042vw; /*20*/
		    width: 1.042vw; /*20*/
		    margin-right: 0.521vw; /*10*/
		}
		nav.woocommerce-MyAccount-navigation ul li:nth-child(odd) a svg,
		nav.woocommerce-MyAccount-navigation ul li.is-active a svg,
		nav.woocommerce-MyAccount-navigation ul li a:hover svg{
		    fill: var(--color-white);
		}
		nav.woocommerce-MyAccount-navigation ul li:nth-child(odd) a svg path,
		nav.woocommerce-MyAccount-navigation ul li:nth-child(odd) a svg line,
		nav.woocommerce-MyAccount-navigation ul li:nth-child(odd) a svg polyline,
		nav.woocommerce-MyAccount-navigation ul li.is-active a svg path,
		nav.woocommerce-MyAccount-navigation ul li.is-active a svg line,
		nav.woocommerce-MyAccount-navigation ul li.is-active a svg polyline,
		nav.woocommerce-MyAccount-navigation ul li a:hover svg path,
		nav.woocommerce-MyAccount-navigation ul li a:hover svg line,
		nav.woocommerce-MyAccount-navigation ul li a:hover svg polyline {
			stroke: var(--color-white);
		}

		/* Addres section
		--------------------------------------------------------------------------------*/
			.woocommerce-Address-title .post-content {
			    margin-top: 0.521vw; /*10*/
			}
			.woocommerce-Address-title h3 {
			    width: 100%;
			}
			.woocommerce-Address-title .post-content a {
			    font-size: 0.729vw; /*14*/
			}
			.woocommerce-Address-title .edit svg {
			    height: 0.73vw; /*14*/
			    width: 0.73vw; /*14*/
			    margin-right: 0.1vw; /*2*/
			}
			h3.woocommerce-column__title {
				margin-bottom: 0 !important;
			}
			.woocommerce-Address-title .edit {
			    padding-bottom: 2px;
			}

		/* Account detail
		--------------------------------------------------------------------------------*/
			fieldset {
			    border: 0.052vw solid var(--color-gray); /*1*/
			    padding: 0.781vw; /*15*/
			    margin-bottom: 1.042vw; /*20*/
			}
			.afreg_extra_fields fieldset {
			    border: unset;
			    margin-bottom: 0;
			}
			fieldset .af-dependable-field label {
				padding-left: 0 !important;
			}

		/* Order Section
		--------------------------------------------------------------------------------*/
			table.shop_table.woocommerce-orders-table td {
			    padding: 1.042vw 1.302vw !important; /*20 25*/
			}
			.cart_totals td:not(:last-child) {
			    border-right: 1px solid var(--color-main-);
			}

			.woocommerce-button svg {
			    width: 1.04vw; /*20*/
			    height: 1.04vw; /*20*/
			    border: 1px solid var(--color-main);
			    border-radius: 100px;
			    padding: 0.21vw; /*4*/
			    margin-left: 0.26vw; /*5*/
			}
			.woocommerce-button:hover svg path {
			    fill: var(--color_1);
			}
			.woocommerce-button:hover svg {
			    border-color: var(--color_1) !important;
			}

		/* Password Field
		--------------------------------------------------------------------------------*/
			span.password-input {
			    position: relative;
			}
			button.show-password-input {
			    position: absolute;
			    top: 50%;
			    right: 1.56vw;
			    transform: translateY(-50%);
			    height: 0.83vw;
			    width: 1.09vw;
			    padding: 0;
			    margin: 0;
			    border: unset;
			    background: transparent;
			}
			button.show-password-input:before {
			    content: '';
			    display: block;
			    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 9 20 8.5"><path stroke="%23000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10a13.358 13.358 0 0 0 3 2.685M21 10a13.358 13.358 0 0 1-3 2.685m-8 1.624L9.5 16.5m.5-2.19a10.59 10.59 0 0 0 4 0m-4 0a11.275 11.275 0 0 1-4-1.625m8 1.624.5 2.191m-.5-2.19a11.275 11.275 0 0 0 4-1.625m0 0 1.5 1.815M6 12.685 4.5 14.5"></path></svg>');
			    height: 100%;
			    width: 100%;
			    background-position: center;
			    background-size: contain;
			    background-repeat: no-repeat;
			}
			button.show-password-input.display-password:before {
				background-image: url('data:image/svg+xml,<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 3 24 18"><path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M1 12C1 12 5 20 12 20C19 20 23 12 23 12" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="12" cy="12" r="3" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle></svg>');
			}

		/* Registration Form
		--------------------------------------------------------------------------------*/
			.woocommerce-privacy-policy-text {
				display: none;
			}

		/* Message
		--------------------------------------------------------------------------------*/
			.easy-message strong {
			    margin-right: 5px;
			}


@media screen and (max-width: 1920px) {
	/* Registration page
	----------------------------------------------------------*/
		/* Log-in Column
		-----------------------------------------------*/
			#custom-account .col-1 .col-container,
			.woocommerce-MyAccount-navigation ul {
			    top: calc( var(--menu-height) + 40px); /*40*/
			}
			.woocommerce-LostPassword a {
			    text-underline-offset: 2px; /*2*/
			}

	/* Password Manager
	--------------------------------------------------------------*/
		.woocommerce-password-hint {
		    font-size: 13px; /*13*/
		    margin-bottom: 20px; /*20*/
		    margin-top: 5px; /*5*/
		}
		.woocommerce-password-strength {
		    font-size: 14px; /*14*/
		    margin-top: 10px; /*10*/
		}
		.woocommerce-password-strength,
		.woocommerce-password-hint {
		    padding: 0 30px; /*30*/
		}

	/*MY ACCOUNY Page
	---------------------------------------------------------*/
		#custom-account .woocommerce-MyAccount-content.text-content {
		    width: calc(100% - 300px); /*300*/
		}

		/* My Account Navigation
		-----------------------------------------------------*/
			nav.woocommerce-MyAccount-navigation ul li {
			    border-top: 1px solid var(--color-gray); /*1*/
			}
			nav.woocommerce-MyAccount-navigation ul li:last-child {
			    border-bottom: 1px solid var(--color-gray); /*1*/
			}
			nav.woocommerce-MyAccount-navigation ul li a {
			    padding: 20px 30px; /*16 30*/
			}
			nav.woocommerce-MyAccount-navigation {
			    width: 300px; /*300*/
			    min-width: 300px; /*300*/
			}
			nav.woocommerce-MyAccount-navigation ul li svg {
			    height: 20px; /*20*/
			    width: 20px; /*20*/
			    margin-right: 10px; /*10*/
			}

			/* Order Section
			--------------------------------------------------------------------------------*/
				.woocommerce-button svg {
				    width: 20px; /*20*/
				    height: 20px; /*20*/
				    padding: 4px; /*4*/
				    margin-left: 5px; /*5*/
				}

			/* Addres section
			--------------------------------------------------------------------------------*/
				.woocommerce-Address-title .post-content {
				    margin-top: 10px; /*10*/
				}
				.woocommerce-Address-title .post-content a {
				    font-size: 14px; /*14*/
				}
				.woocommerce-Address-title .edit svg {
				    height: 14px;
				    width: 14px;
				    margin-right: 2px;
				}

			/* Account detail
			--------------------------------------------------------------------------------*/
				fieldset {
				    border: 1px solid var(--color-main-); /*1*/
				    padding: 15px; /*15*/
				    margin-bottom: 20px; /*20*/
				    border-radius: 10px;
				}

			/* Password Field
			--------------------------------------------------------------------------------*/
				span.password-input {
				    position: relative;
				}
				button.show-password-input {
				    right: 30px;
				    height: 16px;
				    width: 21px;
				}
}


/* Big Laptops - Ok until 1441 px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1600px) {

}

/* Standard Laptops - Ok until 1281px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1440px) {
	#custom-account .woocommerce-MyAccount-content.text-content {
	    padding-left: 60px;
	    width: calc(100% - 260px);
	}
	table.shop_table.woocommerce-orders-table td {
	    padding: 20px !important;
	}

	nav.woocommerce-MyAccount-navigation ul li a {
	    padding: 15px 25px;
	}
	nav.woocommerce-MyAccount-navigation {
	    width: 260px;
	    min-width: 260px;
	}
}

/* Small Laptops - Ok until 1151px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	/* Address page
	--------------------------------------------------------------------------------*/
		.woocommerce-Address-title {
		    display: block;
		}
		.woocommerce-Address-title .edit {
		    margin-top: 10px;
		    display: block;
		}
}

/* Small Laptops - Ok until 993px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1150px) {
	nav.woocommerce-MyAccount-navigation {
	    width: 230px;
	    min-width: 230px;
	}
	#custom-account .woocommerce-MyAccount-content.text-content {
	    padding-left: 30px;
	    width: calc(100% - 230px);
	}
}

/* Mobile Start ok until 768px
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 992px) {
	#custom-account .stripe-container {
	    padding-top: 0;
	}
	nav.woocommerce-MyAccount-navigation {
	    width: 100%;
	    min-width: unset;
	}	
	nav.woocommerce-MyAccount-navigation ul li a {
	    padding: 15px 20px;
	}

	#custom-account .woocommerce {
	    flex-flow: wrap;
	}
	#custom-account .woocommerce-MyAccount-content.text-content {
	    padding-left: 0;
	    width: 100%;
	    padding-top: 45px;
	}


	.woocommerce-order-details table .product-total {
	    max-width: unset;
	    min-width: unset;
	    width: 50%;
	}
	.woocommerce-order-details .order_details td.woocommerce-table__product-name.product-name {
	    width: 50%;
	}

	table.my_account_orders td:first-child {
	    border-top: unset !important;
	}
	.woocommerce-orders-table__cell-order-actions:before {
	    display: none !important;
	}
	.woocommerce-orders-table__cell-order-actions a {
		display: block !important;
		font-size: 15px;
		padding: 13px 10px !important;
		border: 1px solid var(--color-main-);
		background-color: var(--color-main);
		color: var(--color-white);
		text-decoration: unset;
		border-radius: 10px;
		text-align: center;
	}
	.woocommerce-orders-table__cell-order-actions a svg {
		display: none;
	}

	.woocommerce-Address-title h3 {
	    width: 100%;
	}
	.woocommerce-Address-title .edit svg {
	    height: 15px;
	    width: 15px;
	    margin-right: 4px;
	}
}

/* Mobile Landscape
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    .u-columns,
    .woocommerce-columns--addresses {
        gap: 40px;
    }
	button.show-password-input {
	    right: 20px;
	    transform: translateY(-50%);
	    height: 13px;
	    width: 17px;
	}
}

/* Mobile port
------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 600px) {

}