/* =========================================================
   URBAN NOTES PERFUMES
   CUSTOM LOGIN / REGISTER
   FONT: DM SANS ONLY
========================================================= */

html body.woocommerce-account .un-auth-page,
html body.woocommerce-account .un-auth-page * {
	box-sizing: border-box;
	font-family: "DM Sans", sans-serif !important;
}


/* =========================================================
   OUTER PAGE
========================================================= */

html body.woocommerce-account .un-auth-page {
	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #eef1f6 !important;

	color: #0c0b12 !important;
}


/* =========================================================
   MAIN 1195 × 730 AREA
========================================================= */

html body.woocommerce-account .un-auth-wrap {
	width: 1195px !important;
	max-width: calc(100% - 32px) !important;

	height: 730px !important;
	min-height: 730px !important;

	margin: 0 auto !important;

	display: grid !important;

	grid-template-columns: 597.2px minmax(0, 1fr) !important;

	background: #eef1f6 !important;

	overflow: hidden !important;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

html body.woocommerce-account .un-auth-visual {
	position: relative !important;

	width: 100% !important;
	height: 730px !important;

	background: #0c0b12 !important;

	overflow: hidden !important;
}

html body.woocommerce-account .un-auth-visual-image {
	position: absolute !important;

	inset: 0 !important;

	width: 100% !important;
	height: 100% !important;

	display: block !important;

	object-fit: cover !important;

	opacity: 0.30 !important;

	margin: 0 !important;
}

html body.woocommerce-account .un-auth-overlay {
	position: absolute !important;

	inset: 0 !important;

	background:
		linear-gradient(
			to bottom,
			rgba(12,11,18,0.08) 0%,
			rgba(12,11,18,0.18) 45%,
			rgba(12,11,18,0.72) 100%
		) !important;

	pointer-events: none !important;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

html body.woocommerce-account .un-auth-visual-content {
	position: absolute !important;

	left: 64px !important;
	right: 64px !important;
	bottom: 64px !important;

	width: 469.2px !important;
	max-width: calc(100% - 128px) !important;

	z-index: 2 !important;

	margin: 0 !important;
	padding: 0 !important;
}

html body.woocommerce-account .un-auth-eyebrow {
	margin: 0 !important;

	color: #ffffff !important;

	font-size: 10px !important;
	font-weight: 500 !important;

	line-height: 12px !important;

	letter-spacing: 0 !important;
}

html body.woocommerce-account .un-auth-visual-content h2 {
	margin: 16px 0 0 !important;
	padding: 0 !important;

	color: #eef1f6 !important;

	font-size: 32px !important;
	font-weight: 500 !important;

	line-height: 38px !important;

	letter-spacing: 0 !important;
}

html body.woocommerce-account .un-auth-visual-content p {
	width: 320px !important;
	max-width: 100% !important;

	margin: 16px 0 0 !important;
	padding: 0 !important;

	color: #e1e1e1 !important;

	font-size: 14px !important;
	font-weight: 400 !important;

	line-height: 20px !important;

	letter-spacing: 0 !important;
}


/* =========================================================
   RIGHT FORM AREA
========================================================= */

html body.woocommerce-account .un-auth-form-area {
	align-self: stretch !important;

	width: 100% !important;

	padding: 64px 24px !important;

	display: flex !important;

	flex-direction: column !important;

	justify-content: center !important;

	align-items: center !important;

	background: #eef1f6 !important;
}

html body.woocommerce-account .un-auth-form {
	width: 384px !important;
	max-width: 384px !important;

	margin: 0 auto !important;
	padding: 0 !important;
}


/* =========================================================
   BRAND
========================================================= */

html body.woocommerce-account .un-auth-brand {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #0c0b12 !important;

	font-size: 20px !important;
	font-weight: 500 !important;

	line-height: 24px !important;
}


/* =========================================================
   HEADING
========================================================= */

html body.woocommerce-account .un-auth-heading {
	width: 100% !important;

	margin: 40px 0 0 !important;
	padding: 0 !important;
}

html body.woocommerce-account .un-auth-heading h1 {
	margin: 0 !important;
	padding: 0 !important;

	color: #0c0b12 !important;

	font-size: 24px !important;
	font-weight: 500 !important;

	line-height: 30px !important;
}


/* =========================================================
   SWITCH LOGIN / REGISTER
========================================================= */

html body.woocommerce-account .un-auth-switch {
	width: 100% !important;

	margin: 8px 0 0 !important;
	padding: 0 !important;

	display: flex !important;

	align-items: center !important;

	gap: 4px !important;

	color: #5a6478 !important;

	font-size: 14px !important;
	font-weight: 400 !important;

	line-height: 20px !important;
}

html body.woocommerce-account .un-auth-switch a {
	color: #0c0b12 !important;

	font-size: 14px !important;
	font-weight: 400 !important;

	line-height: 20px !important;

	text-decoration: none !important;
}

html body.woocommerce-account .un-auth-switch a:hover {
	text-decoration: underline !important;
}


/* =========================================================
   FORMS
========================================================= */

html body.woocommerce-account .un-auth-real-form {
	width: 384px !important;
	max-width: 384px !important;

	margin: 32px 0 0 !important;
	padding: 0 !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 16px !important;

	background: transparent !important;

	border: 0 !important;
}

html body.woocommerce-account .un-auth-real-form p {
	margin: 0 !important;
	padding: 0 !important;
}


/* =========================================================
   FIELD
========================================================= */

html body.woocommerce-account .un-auth-field {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;

	flex-direction: column !important;

	gap: 6px !important;
}

html body.woocommerce-account .un-auth-field label,
html body.woocommerce-account .un-auth-label-row label {
	margin: 0 !important;
	padding: 0 !important;

	color: #5a6478 !important;

	font-size: 10px !important;
	font-weight: 500 !important;

	line-height: 12px !important;
}


/* =========================================================
   PASSWORD LABEL + FORGOT
========================================================= */

html body.woocommerce-account .un-auth-label-row {
	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;
}

html body.woocommerce-account .un-auth-forgot {
	color: #0c0b12 !important;

	font-size: 10px !important;
	font-weight: 500 !important;

	line-height: 12px !important;

	text-decoration: none !important;
}

html body.woocommerce-account .un-auth-forgot:hover {
	text-decoration: underline !important;
}


/* =========================================================
   INPUTS
========================================================= */

html body.woocommerce-account .un-auth-field input.input-text {
	width: 384px !important;
	max-width: 100% !important;

	height: 45.6px !important;

	margin: 0 !important;

	padding: 12px 16px !important;

	border: 0 !important;

	border-radius: 18px !important;

	outline: 0.8px solid rgba(26,25,23,0.15) !important;

	outline-offset: -0.8px !important;

	background: transparent !important;

	color: #0c0b12 !important;

	font-size: 14px !important;
	font-weight: 400 !important;

	line-height: 20px !important;

	box-shadow: none !important;
}

html body.woocommerce-account .un-auth-field input.input-text::placeholder {
	color: #5a6478 !important;

	opacity: 1 !important;
}

html body.woocommerce-account .un-auth-field input.input-text:focus {
	outline: 1px solid rgba(12,11,18,0.40) !important;

	outline-offset: -1px !important;

	box-shadow: none !important;
}


/* =========================================================
   PASSWORD WRAPPER
========================================================= */

html body.woocommerce-account .un-password-wrap {
	position: relative !important;

	width: 384px !important;
	max-width: 100% !important;
}

html body.woocommerce-account .un-password-wrap input {
	padding-right: 44px !important;
}

html body.woocommerce-account .un-password-toggle {
	position: absolute !important;

	right: 12px !important;
	top: 50% !important;

	width: 24px !important;
	height: 24px !important;

	transform: translateY(-50%) !important;

	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	padding: 0 !important;

	margin: 0 !important;

	border: 0 !important;

	background: transparent !important;

	color: #5a6478 !important;

	cursor: pointer !important;

	box-shadow: none !important;
}

html body.woocommerce-account .un-password-toggle:hover,
html body.woocommerce-account .un-password-toggle:focus {
	background: transparent !important;

	color: #0c0b12 !important;

	outline: none !important;
}


/* =========================================================
   CHECKBOXES
========================================================= */

html body.woocommerce-account .un-auth-check-row {
	width: 100% !important;

	margin: 0 !important;
	padding: 4px 0 0 !important;
}

html body.woocommerce-account .un-auth-check-row label {
	width: 100% !important;

	display: flex !important;

	align-items: flex-start !important;

	gap: 12px !important;

	cursor: pointer !important;

	margin: 0 !important;
	padding: 0 !important;
}

html body.woocommerce-account .un-auth-check-row input[type="checkbox"] {
	flex: 0 0 13px !important;

	width: 13px !important;
	height: 13px !important;

	margin: 2px 0 0 !important;

	padding: 0 !important;

	accent-color: #0c0b12 !important;
}

html body.woocommerce-account .un-auth-check-row span {
	color: #5a6478 !important;

	font-size: 10px !important;
	font-weight: 500 !important;

	line-height: 12px !important;
}

html body.woocommerce-account .un-auth-check-row a {
	color: #0c0b12 !important;

	text-decoration: none !important;
}

html body.woocommerce-account .un-auth-check-row a:hover {
	text-decoration: underline !important;
}


/* =========================================================
   SUBMIT
========================================================= */

html body.woocommerce-account .un-auth-submit-wrap {
	width: 100% !important;

	margin: 8px 0 0 !important;
	padding: 0 !important;
}

html body.woocommerce-account .un-auth-submit {
	display: flex !important;

	width: 384px !important;
	max-width: 100% !important;

	min-height: 48px !important;

	margin: 0 !important;
	padding: 16px !important;

	align-items: center !important;
	justify-content: center !important;

	border: 0 !important;

	border-radius: 80px !important;

	background: #0c0b12 !important;

	color: #eef1f6 !important;

	font-size: 12px !important;
	font-weight: 500 !important;

	line-height: 16px !important;

	text-transform: none !important;

	cursor: pointer !important;

	box-shadow:
		0 2px 4px -2px rgba(12,11,18,0.20),
		0 4px 6px -1px rgba(12,11,18,0.20) !important;

	transition:
		transform .2s ease,
		opacity .2s ease !important;
}

html body.woocommerce-account .un-auth-submit:hover {
	background: #0c0b12 !important;

	color: #eef1f6 !important;

	opacity: 0.92 !important;

	transform: translateY(-1px) !important;
}

html body.woocommerce-account .un-auth-submit:focus {
	outline: 0 !important;
}


/* =========================================================
   POLICY
========================================================= */

html body.woocommerce-account .un-auth-policy {
	width: 100% !important;

	margin: 32px 0 0 !important;
	padding: 32px 0 0 !important;

	border-top: 0.8px solid rgba(26,25,23,0.10) !important;

	text-align: center !important;

	color: #5a6478 !important;

	font-size: 10px !important;
	font-weight: 500 !important;

	line-height: 12px !important;
}

html body.woocommerce-account .un-auth-policy a {
	color: #0c0b12 !important;

	text-decoration: none !important;
}

html body.woocommerce-account .un-auth-policy a:hover {
	text-decoration: underline !important;
}


/* =========================================================
   WOOCOMMERCE NOTICES
========================================================= */

html body.woocommerce-account .un-auth-page .woocommerce-notices-wrapper,
html body.woocommerce-account .un-auth-page .woocommerce-message,
html body.woocommerce-account .un-auth-page .woocommerce-error,
html body.woocommerce-account .un-auth-page .woocommerce-info {
	width: 384px !important;
	max-width: 100% !important;

	margin: 0 0 16px !important;
	padding: 12px 14px !important;

	font-family: "DM Sans", sans-serif !important;

	font-size: 12px !important;
	line-height: 18px !important;

	border-radius: 10px !important;
}


/* =========================================================
   REMOVE DEFAULT WOOCOMMERCE FORM STYLES
========================================================= */

html body.woocommerce-account .un-auth-page form.login,
html body.woocommerce-account .un-auth-page form.register {
	background: transparent !important;

	border: 0 !important;

	padding: 0 !important;

	box-shadow: none !important;
}

html body.woocommerce-account .un-auth-page .woocommerce-form-login__submit,
html body.woocommerce-account .un-auth-page .woocommerce-form-register__submit {
	float: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 950px) {

	html body.woocommerce-account .un-auth-wrap {
		width: 100% !important;

		max-width: 100% !important;

		height: auto !important;
		min-height: 0 !important;

		grid-template-columns: 1fr !important;

		overflow: visible !important;
	}

	html body.woocommerce-account .un-auth-visual {
		height: 420px !important;
	}

	html body.woocommerce-account .un-auth-visual-content {
		left: 32px !important;
		right: 32px !important;
		bottom: 32px !important;

		width: auto !important;
		max-width: none !important;
	}

	html body.woocommerce-account .un-auth-form-area {
		padding: 48px 24px !important;
	}

	html body.woocommerce-account .un-auth-form,
	html body.woocommerce-account .un-auth-real-form {
		width: 100% !important;
		max-width: 384px !important;
	}

	html body.woocommerce-account .un-auth-field input.input-text,
	html body.woocommerce-account .un-password-wrap,
	html body.woocommerce-account .un-auth-submit {
		width: 100% !important;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 600px) {

	html body.woocommerce-account .un-auth-visual {
		height: 360px !important;
	}

	html body.woocommerce-account .un-auth-visual-content h2 {
		font-size: 28px !important;
		line-height: 34px !important;
	}

	html body.woocommerce-account .un-auth-visual-content p {
		font-size: 13px !important;
		line-height: 19px !important;
	}

	html body.woocommerce-account .un-auth-form-area {
		padding: 40px 20px !important;
	}
}