@import '../general/elementor-wc-common.less';

body.woocommerce {
	// Account.
	&.woocommerce-account {
		// Sub Header.
		.elementor-wc-sub-header();
		// Limit-wrapper
		.elementor-wc-limit-wrapper();
		// Login/Register form.
        .elementor-wc-account-register-login-form();
		// Account page.
		.elementor-wc-account-page();
		// Lost password.
		.elementor-wc-account-lost-password();

		// Ported From Customizer.
		.from-customizer();
	}
}

.elementor-wc-account-page() {
	// Navigation.
	.woocommerce-MyAccount-navigation {
		border: solid 1px var(--vamtam-default-line-color);
		border-radius: var(--vamtam-border-radius);
		margin-bottom: 30px;

		ol, ul {
			margin: 0px;
		}

		ul li {
			border-bottom: solid 1px var(--vamtam-default-line-color);
			padding: .6em 1em;
			&:last-child {
				border: none;
			}
		}
	}
	// Content.
	.woocommerce-MyAccount-content {
		> p {
			margin-bottom: 10px;
			> mark {
				background-color: transparent;
			}
		}

		// Form Labels
        .elementor-wc-form-labels();

		table {
			border-collapse: collapse;
			.product-total {
				text-align: end;
			}
			th {
				font-weight: inherit;
				line-height: inherit;
			}

			tfoot td {
				text-align: end;
			}
			td {
				border: solid 1px var(--vamtam-default-line-color);
			}
		}

		.addresses {
			.woocommerce-Address-title {
				.edit {
					margin-left: auto;
				}
			}
			address {
				font-style: italic;
				margin: 0 0 24px;
			}
		}

		.woocommerce-column--1 address {
			margin-bottom: 35px;
		}

		.woocommerce-address-fields {
			.woocommerce-input-wrapper {
				width: 100%;
			}
		}

		.edit-account {
			button[type=submit] {
				margin-top: 1em;
			}
		}

		.woocommerce-order-details .woocommerce-order-details__title,
		.woocommerce-customer-details .woocommerce-column__title {
			&:extend(.vamtam-font-h4);
			margin-bottom: 10px;
		}
	}

	// Tabbed Login/Register form.
	.vamtam-tabbed {
		max-width: 455px;
		margin: 0 auto;

		> [type="radio"] {
			display: none;

			&:nth-of-type(1):checked ~ .vamtam-tabs .vamtam-tab:nth-of-type(1) label,
			&:nth-of-type(2):checked ~ .vamtam-tabs .vamtam-tab:nth-of-type(2) label {
				border-bottom-color: var(--vamtam-accent-color-1);
			}
			&:nth-of-type(1):checked ~ .vamtam-tab-content .col-1,
			&:nth-of-type(2):checked ~ .vamtam-tab-content .col-2 {
				display: block;
			}
		}

		.vamtam-tabs {
			display: flex;
			justify-content: center;
			list-style: none;
			padding: 0;
			margin-bottom: 40px;
			overflow-x: hidden;

			.vamtam-tab {
				min-width: 220px;
				min-height: 30px;
				label {
					display: block;
					margin-bottom: -1px;
					text-align: center;
					padding-bottom: 10px;
					border-bottom: 1px solid var(--vamtam-accent-color-7);
					color: var(--vamtam-accent-color-1);
					text-transform: uppercase;
					cursor: pointer;
					transition: all 0.3s;
					&:extend(.vamtam-font-h6);
				}
			}

			.vamtam-tab:hover label {
				filter: brightness(.7);
			}
		}

		.vamtam-tab-content {
			.col-1,
			.col-2 {
				border: 0;
				float: none;
				width: 100%;
				display: none;
				text-align: center;
			}

			.woocommerce-form-login,
			.woocommerce-form-register {
				margin-top: 10px;
				text-align: center;
				h4 {
					margin-top: 0;
				}
			}

			.woocommerce-form-register {
				.vamtam-pass-notice {
					order: 1;
					margin-bottom: 0;
				}
				.woocommerce-privacy-policy-text {
					order: 2;
				}
				.vamtam-reg-email {
					order: 3;
				}
				.vamtam-submit {
					margin-top: 25px;
					order: 4;
				}
			}
			.woocommerce-form-row {
				label {
					display: none;
				}
				input {
					border: 0;
					border-bottom: solid 1px;
					padding-left: 0;
					padding-right: 0;
				}
			}
			input::placeholder {
				font-size: 14px;
			}
			p {
				font-size: 12px;
				line-height: 24px;
			}
		}

	}

	// My Account page (Login/Register screen).
	&:not(.logged-in) .page-header {
		h1 {
			&:extend(.vamtam-font-h2);
		}
		.vamtam-logo {
			margin-bottom: 20px;
		}
	}

	// Downloads.
	&.woocommerce-downloads {
		.woocommerce-info {
			border: 0;
			border-top: 3px solid var(--vamtam-accent-color-7);
		}
	}

	// Wishlist.
	.vamtam-empty-wishlist-notice {
		display: none;
	}
	.woosw-item {
		.vamtam-add-to-cart-wrap a.add_to_cart_button {
			display: block;
			text-align: center;
		}
	}
	// Downloads.
	&.woocommerce-downloads {
		.woocommerce-info {
			border: 0;
			border-top: 3px solid var(--vamtam-accent-color-7);
		}
	}
}

.elementor-wc-account-register-login-form() {
    form.woocommerce-form-register.register,
	form.woocommerce-form-login.login {
		border: 0;
		&,
		.form-row {
			display: flex;
			flex-direction: column;
			padding: 0;
			button[name="login"] {
				margin-top: 30px;
				margin-right: 0;
			}
			.woocommerce-form-login__rememberme {
				.vamtam-checkbox();
			}
		}

		.form-row-first,
		.form-row-last {
			width: 100%;
		}

		p {
			margin-bottom: 10px;
		}

		p.lost_password {
			&::before {
				display: none;
			}

			padding: 0;
			margin: 0;
		}

		.password-input {
			input::-webkit-credentials-auto-fill-button {
				margin-inline-end: 40px;
			}
		}
	}
}

.elementor-wc-account-lost-password() {
	&.woocommerce-lost-password {
		min-height: 100vh;
		display: flex;
		flex-direction: column;

		> .elementor-location-header {
			flex-shrink: 0;
		}

		> #page {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			margin: 0;

			> #main-content {
				flex-grow: 1;
				margin-bottom: 30px;
			}

			> .footer-wrapper {
				flex-shrink: 0;
			}
		}
	}
}

.from-customizer() {
	&.woocommerce {
		.woocommerce-customer-details address,
		&.woocommerce-checkout.woocommerce-order-received .woocommerce address {
			border: none;
			padding: 20px 0 0 0 !important;
		}
	}

	.woocommerce-MyAccount-content {
		margin-bottom: 100px;

		> p {
			a {
				text-decoration: underline;
			}

			&:nth-of-type(2) a {
				font-weight: normal;
			}

			&:first-of-type :is(strong, mark) {
				font-weight: inherit;
				color: inherit;
			}
		}

		> p:first-of-type {
			&:extend(.vamtam-font-h6);
		}

		:is(.woocommerce-Message, .woocommerce-Address-title h3, form h3) {
			&:extend(.vamtam-font-h5);
		}

		table {
			border-left-width: 0;
			border-right-width: 0;
			border-top: 1px solid var( --vamtam-accent-color-7);
			border-bottom: 1px solid var( --vamtam-accent-color-7);

			th {
				font-family: var( --e-global-typography-vamtam_h6-font-family);
				font-size: var( --e-global-typography-vamtam_h6-font-size);
				font-weight: var( --e-global-typography-vamtam_h6-font-weight) !important;
				text-transform: var( --e-global-typography-vamtam_h6-text-transform);
				line-height: var( --e-global-typography-vamtam_h6-line-height);
			}

			td {
				border-left-width: 0 !important;
				font-family: var( --e-global-typography-vamtam_h6-font-family);
				font-size: var( --e-global-typography-vamtam_h6-font-size) !important;
				font-weight: var( --e-global-typography-vamtam_h6-font-weight) !important;
				text-transform: var( --e-global-typography-vamtam_h6-text-transform) !important;
				line-height: var( --e-global-typography-vamtam_h6-line-height);

				&:last-of-type {
					border-right-width: 0;
				}
			}

		}

		.order-number {
			color: var( --vamtam-accent-color-1);
		}

		.woocommerce-order-details {
			.woocommerce-order-details__title {
				margin-bottom: 20px !important;
			}
		}

		:is(
			.woocommerce-order-details .woocommerce-order-details__title,
			.woocommerce-customer-details .woocommerce-column__title
		) {
			font: var(--vamtam-h3-font-style, normal) var(--vamtam-h4-font-weight, normal) var(--vamtam-h3-font-size)/var(--vamtam-h4-line-height) var(--vamtam-h3-font-family);
			letter-spacing: var(--vamtam-h3-letter-spacing, normal);
			text-transform: var(--vamtam-h3-transform, none);
			text-decoration: var(--vamtam-h3-decoration, none);
		}

		.woocommerce-Message {
			background-color: transparent !important;
			border: 0px !important;
			padding: 0 0 0 2% !important;
			color: inherit;
		}

		.woocommerce-Address-title h3 {
			padding-bottom: 10px;
			color: inherit;
			width: 100%;
		}

		.addresses {
			address {
				font-style: normal !important;
			}

			.title .edit {
				font-family: var( --e-global-typography-vamtam_h6-font-family);
				font-size: var( --e-global-typography-vamtam_h6-font-size);
				font-weight: var( --e-global-typography-vamtam_h6-font-weight);
				text-decoration: underline;
				text-transform: var( --e-global-typography-vamtam_h6-text-transform);
				margin-bottom: 15px;
				float: left;
			}
		}

		form {
			p:nth-of-type(3) span em {
				display: none;
			}

			fieldset legend {
				display: none;
			}
		}

		form .woocommerce-address-fields .selection span:first-of-type {
			padding-left: 0!important;
			padding-right: 0 !important;
		}

		.elementor-select-wrapper.woocommerce-input-wrapper:before {
			right: 0px;
		}
	}

	.woocommerce-MyAccount-navigation {
		background: var( --vamtam-accent-color-5);
		border: solid 1px var( --vamtam-accent-color-5)!important;

		ul li {
			padding: 0.6em 0 !important;
			border-bottom: none !important;

			a {
				&:extend(.vamtam-font-h5);
				background-image: linear-gradient( 120deg, transparent 0%, transparent 100%);

				&:hover {
					background-image: linear-gradient( 120deg, var( --vamtam-accent-color-3) 0%, var( --vamtam-accent-color-3) 100%);
					background-repeat: no-repeat;
					background-size: 100% 7px;
					background-position: 0 88%;
					transition: background-size 0.25s ease-in;
				}
			}
		}
	}

	td {
		&.woocommerce-table__product-name {
			font-family: var( --vamtam-primary-font-font-family) !important;
			font-size: var(--vamtam-primary-font-font-size) !important;
			font-weight: var(--vamtam-primary-font-font-weight) !important;
			text-transform: none !important;
			line-height: var(--vamtam-primary-font-line-height) !important;
			letter-spacing: var(--vamtam-primary-font-letter-spacing) !important;

			.wc-item-meta {
				padding-left: 0;
			}

			strong {
				font-weight: var(--vamtam-primary-font-font-weight) !important;
			}
		}
	}


	@media only screen and (min-width: 769px) {
		.woocommerce-MyAccount-navigation {
			margin-bottom: 100px !important;
		}
	}

	@media only screen and (min-width: 768px) {
		.woocommerce-MyAccount-content > p:first-of-type {
			padding: 30px 0px 20px 0px;
		}
	}

	table {
		&.shop_table {
			tfoot th {
				border-top: 1px solid var( --vamtam-accent-color-7);
			}
		}

		&.my_account_orders td {
			font-size: var( --e-global-typography-vamtam_primary_font-font-size);
		}
	}

	:is(
		.woocommerce-MyAccount-content table.shop_table_responsive tr td::before,
		table.shop_table_responsive tr td::before
	 ) {
		font-weight: 400;
		text-transform: uppercase;
	}

	:is(
		table.my_account_orders td,
		table.my_account_orders th,
		table.woocommerce-table td,
		table.woocommerce-table th,
		.woocommerce-order-received .woocommerce table.woocommerce-table--order-details th,
		.woocommerce-order-received .woocommerce table.woocommerce-table--order-details td
	) {
		padding: 25px 10px !important;
		color: inherit;
	}

	.woocommerce-customer-details {
		margin-bottom: 0;

		address p:first-of-type {
			padding-top: 20px;
		}
	}

	@media only screen and (min-width: 769px) {
		.woocommerce-MyAccount-content {
			.col-1.woocommerce-Address {
				border-right: 1px solid var( --vamtam-accent-color-7);

				:is(
					.title,
					address
				) {
					padding-right: 5%;
				}
			}


			:is(
				.col-2.woocommerce-Address .title,
				.col-2.woocommerce-Address address
			) {
				padding-left: 5%;
			}
		}
	}

	.woocommerce .form-row input.input-text {
		padding: 0;
		min-height: 50px;
	}

	&.woocommerce .woocommerce-MyAccount-content label {
		font-weight: inherit !important;
	}

	input:focus:not([type="button"]):not([type="submit"]),
	.elementor-kit-5 textarea:focus,
	.elementor-kit-5 .elementor-field-textual:focus {
		border-width: 0px 0px 1px 0px;
		border-color: var( --vamtam-accent-color-1);
	}

	.form-row .required {
		font-weight: 300 !important;
		color: var( --vamtam-accent-color-6) !important;
	}

	.form-row,
	.woocommerce .form-row {
		margin: 0 0 30px !important;
		padding: 0;
	}

	.vamtam-tabbed .vamtam-tabs {
		margin-bottom: 30px;
	}

	:is(
		.woocommerce-MyAccount-content .woocommerce-address-fields p button.button,
		p.return-to-shop a.button.wc-backward,
		.woocommerce .woocommerce-form-track-order.track_order button.button
	) {
		border-color: var( --vamtam-accent-color-5);
		background-color: var( --vamtam-accent-color-5);
		border-radius: 0;
		transition-duration: 0.3s !important;
	}

	:is(
		.woocommerce-MyAccount-content .woocommerce-address-fields p button.button:hover,
		p.return-to-shop a.button.wc-backward:hover,
		.woocommerce-form-track-order.track_order button.button:hover
	) {
		border-color: var( --vamtam-accent-color-1) !important;
		background-color: var( --vamtam-accent-color-3) !important;
		color: var( --vamtam-accent-color-1) !important;
	}

	form .woocommerce-MyAccount-content .show-password-input,
	form .show-password-input {
		&, &:hover, &:focus {
			background-color: transparent;
			border: 0;
			color: currentColor;
		}
		&::after {
			font-family: 'Font Awesome 5 Free';
			content: '\f070';
		}
		&::before {
			display: none;
		}
	}
}