/* ============================================================
   Dar Manhal fields — Contact-style everywhere (NO floating labels)
   Loads last so it beats core contact-outline.css / auth / checkout
   ============================================================ */

/* ——— Kill floating labels; static label above ——— */
.contact-outline-field,
.account-select-field,
.account-phone-combo {
	display: flex !important;
	flex-direction: column !important;
	position: relative !important;
	margin-bottom: 16px !important;
}

.contact-outline-label {
	position: static !important;
	order: -1 !important;
	transform: none !important;
	inset: auto !important;
	left: auto !important;
	top: auto !important;
	max-width: none !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #16181D !important;
	line-height: 1.3 !important;
	pointer-events: auto !important;
	background: transparent !important;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	opacity: 1 !important;
}

.contact-outline-field:focus-within .contact-outline-label,
.contact-outline-input:not(:placeholder-shown) + .contact-outline-label,
.contact-outline-field--textarea:focus-within .contact-outline-label,
.contact-outline-field--textarea .contact-outline-input:not(:placeholder-shown) + .contact-outline-label,
.account-select-field .contact-outline-input:invalid + .contact-outline-label,
.account-select-field:focus-within .contact-outline-input:invalid + .contact-outline-label,
.account-select-field .contact-outline-input:valid + .contact-outline-label,
.account-select-field:focus-within .contact-outline-input:valid + .contact-outline-label {
	position: static !important;
	top: auto !important;
	transform: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #16181D !important;
	opacity: 1 !important;
	background: transparent !important;
}

/* ——— Contact form look (gray fill, no border) ——— */
.contact-outline-input,
.account-select-input,
.account-phone-combo-number,
.sf-auth__form .form-control,
.sf-auth__form input[type='email'],
.sf-auth__form input[type='password'],
.sf-auth__form input[type='text'],
.sf-auth__form input[type='tel'],
.sf-auth__form input[type='number'],
.page-my-account .form-control,
.page-login .form-control,
.contact-form .form-control {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 52px !important;
	padding: 15px 20px !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	color: #16181D !important;
	background: #f3f3f3 !important;
	background-color: #f3f3f3 !important;
	border: none !important;
	border-radius: 5px !important;
	box-shadow: none !important;
	outline: none !important;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

textarea.contact-outline-input,
.contact-outline-textarea,
.contact-form textarea.form-control {
	min-height: 120px !important;
	resize: vertical !important;
}

.contact-outline-input::placeholder,
.account-phone-combo-number::placeholder,
.sf-auth__form input::placeholder,
.contact-form .form-control::placeholder,
.page-my-account .form-control::placeholder {
	color: rgba(22, 24, 29, 0.45) !important;
	opacity: 1 !important;
}

.contact-outline-input:focus,
.account-select-input:focus,
.account-phone-combo-number:focus,
.sf-auth__form input:focus,
.contact-form .form-control:focus,
.page-my-account .form-control:focus {
	background: #ececec !important;
	box-shadow: 0 0 0 2px rgba(64, 154, 157, 0.35) !important;
	outline: none !important;
	border: none !important;
}

/* Selects keep chevron */
.account-select-field .contact-outline-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23333' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 12px !important;
	background-color: #f3f3f3 !important;
	padding-right: 44px !important;
	cursor: pointer;
}

.account-select-field .contact-outline-input:focus {
	background-color: #ececec !important;
}

/* Phone combo shell — same 46px row as other fields (kill core floating-label padding) */
.account-phone-combo-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	padding: 0 !important;
	background: #f3f3f3 !important;
	border: none !important;
	border-radius: var(--jg-settings-radius, 5px) !important;
	overflow: hidden !important;
	box-shadow: none !important;
}

.account-phone-combo-prefix {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 8px !important;
	position: relative !important;
	flex: 0 0 auto !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	padding: 0 10px 0 14px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.account-phone-combo-flag {
	display: block !important;
	width: 20px !important;
	height: 14px !important;
	max-height: 14px !important;
	flex: 0 0 20px !important;
	object-fit: cover !important;
	border-radius: 5px !important;
}

.account-phone-combo-prefix select,
.account-phone-combo-code {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	border: 0 !important;
	background: transparent none !important;
	box-shadow: none !important;
	outline: none !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;
	width: auto !important;
	min-width: 2.75em !important;
	margin: 0 !important;
	padding: 0 16px 0 0 !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 22px !important;
	color: #16181D !important;
	cursor: pointer !important;
	font-family: inherit !important;
}

.account-phone-combo-chevron {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	left: auto !important;
	bottom: auto !important;
	width: 10px !important;
	height: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E") no-repeat center !important;
	background-size: 10px 6px !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
}

.account-phone-combo-sep {
	align-self: center !important;
	width: 0 !important;
	min-width: 0 !important;
	height: 22px !important;
	min-height: 22px !important;
	margin: 0 0 0 2px !important;
	padding: 0 !important;
	border: 0 !important;
	border-left: 1px solid rgba(22, 24, 29, 0.14) !important;
	background: transparent !important;
	flex: 0 0 0 !important;
}

.account-phone-combo-number {
	flex: 1 1 auto !important;
	align-self: stretch !important;
	width: auto !important;
	min-width: 0 !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 46px !important;
	color: #16181D !important;
	font-family: inherit !important;
}

.account-phone-combo:focus-within .account-phone-combo-inner {
	box-shadow: 0 0 0 2px rgba(64, 154, 157, 0.35) !important;
	background: #ececec !important;
}

.contact-outline-field.is-invalid .contact-outline-input,
.contact-outline-field.is-invalid .account-phone-combo-inner {
	box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.35) !important;
}

/* Password toggle — vertically centered on the input (label sits above) */
.auth-password-field {
	position: relative !important;
}

.auth-password-toggle,
.sf-auth .auth-password-toggle,
.dmah-auth-livewire .auth-password-toggle {
	position: absolute !important;
	right: 10px !important;
	top: auto !important;
	bottom: 0 !important;
	height: 52px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 0 !important;
	background: transparent !important;
	color: rgba(22, 24, 29, 0.5) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	z-index: 2 !important;
	transform: none !important;
}

.auth-password-toggle:hover,
.sf-auth .auth-password-toggle:hover {
	color: #409A9D !important;
}

.auth-password-field .contact-outline-input,
.auth-password-field .auth-password-input {
	padding-right: 64px !important;
}

/* ——— Login / register page shell ——— */
.page-login {
	padding-top: 40px !important;
	padding-bottom: 72px !important;
	background: #fff !important;
}

.page-login.light-section {
	background: #fff !important;
}

.dmah-auth-shell,
.page-login .login-content-box {
	display: block !important;
	max-width: 480px !important;
	margin: 0 auto !important;
	width: 100% !important;
	gap: 0 !important;
}

.page-login .login-content-form-item,
.dmah-auth-livewire {
	width: 100% !important;
	max-width: none !important;
}

.dmah-auth-livewire .sf-auth {
	max-width: none !important;
	padding: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
}

.dmah-auth-livewire .sf-auth__card {
	background: #fff !important;
	border: 1px solid rgba(22, 24, 29, 0.08) !important;
	border-radius: var(--jg-settings-radius, 5px) !important;
	padding: 32px 28px !important;
	box-shadow: 0 16px 48px rgba(16, 18, 22, 0.05) !important;
}

.dmah-auth-livewire .sf-auth__eyebrow {
	margin: 0 0 8px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: #409A9D !important;
}

.dmah-auth-livewire .sf-auth__title {
	margin: 0 0 8px !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	text-transform: none !important;
	color: #16181D !important;
}

.dmah-auth-livewire .sf-auth__lead {
	margin: 0 0 24px !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: rgba(22, 24, 29, 0.55) !important;
}

.dmah-auth-livewire .sf-auth__flash {
	margin: 0 0 18px !important;
	padding: 12px 14px !important;
	background: rgba(64, 154, 157, 0.1) !important;
	border: 1px solid rgba(64, 154, 157, 0.28) !important;
	border-radius: 5px !important;
	color: #2f7578 !important;
}

.dmah-auth-livewire .sf-auth__meta {
	display: flex !important;
	justify-content: flex-end !important;
	margin: -4px 0 16px !important;
}

.dmah-auth-livewire .sf-auth__forgot,
.dmah-auth-livewire .sf-auth__alt a {
	color: #409A9D !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

.dmah-auth-livewire .sf-auth__forgot:hover,
.dmah-auth-livewire .sf-auth__alt a:hover {
	text-decoration: underline !important;
}

.dmah-auth-livewire .sf-auth__submit,
.dmah-auth-livewire .btn.btn-contact-send {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-height: 52px !important;
	margin-top: 8px !important;
	padding: 14px 20px !important;
	background: #409A9D !important;
	border: 1px solid #409A9D !important;
	border-radius: 5px !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	box-shadow: 0 10px 28px rgba(64, 154, 157, 0.28) !important;
}

.dmah-auth-livewire .sf-auth__submit:hover,
.dmah-auth-livewire .btn.btn-contact-send:hover {
	background: #358285 !important;
	border-color: #358285 !important;
	color: #fff !important;
}

.dmah-auth-livewire .sf-auth__alt {
	margin: 18px 0 0 !important;
	text-align: center !important;
	font-size: 14px !important;
	color: rgba(22, 24, 29, 0.55) !important;
}

.dmah-auth-livewire .sf-auth__row {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
}

/* Kill Bejou pink auth page wash if class appears */
.sf-auth-page {
	background: #fff !important;
	background-image: none !important;
	--sf-auth-pink: #409A9D;
}

@media (max-width: 575px) {
	.dmah-auth-livewire .sf-auth__row {
		grid-template-columns: 1fr !important;
	}

	.dmah-auth-livewire .sf-auth__card {
		padding: 24px 18px !important;
	}
}

/* Checkout inputs — same 46px height (postal/country use contact-outline 52px globally) */
.dmah-checkout .contact-outline-field,
.dmah-checkout .account-select-field {
	margin-bottom: 12px !important;
}

.dmah-checkout .contact-outline-label,
.dmah-checkout .dmah-co-field__label,
.dmah-checkout .dmah-field__label {
	margin: 0 0 6px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
}

.dmah-checkout .contact-outline-input,
.dmah-checkout .account-select-input,
.dmah-checkout .dmah-co-field .form-control,
.dmah-checkout .checkout-bill-address-form .form-control,
.dmah-checkout select.form-control,
.dmah-checkout .checkout-gift__input {
	min-height: 46px !important;
	height: 46px !important;
	max-height: 46px !important;
	padding: 12px 14px !important;
	font-size: 15px !important;
	line-height: 22px !important;
	box-sizing: border-box !important;
	border-radius: var(--jg-settings-radius, 5px) !important;
}

.dmah-checkout textarea.contact-outline-input,
.dmah-checkout .dmah-field__textarea,
.dmah-checkout textarea.form-control {
	height: auto !important;
	max-height: none !important;
	min-height: 120px !important;
	line-height: 1.5 !important;
}

.dmah-checkout .checkout-city-zip-row {
	align-items: stretch !important;
	margin-bottom: 16px !important;
}

.dmah-checkout .checkout-city-zip-row .contact-outline-field,
.dmah-checkout .checkout-city-zip-row .dmah-co-field {
	margin-bottom: 0 !important;
}

/* Phone combo — force same 46px as City/Postal (beats core padding) */
.dmah-checkout .account-phone-combo-inner {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	box-sizing: border-box !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	padding: 0 !important;
	background: #f3f3f3 !important;
	border: none !important;
	border-radius: var(--jg-settings-radius, 5px) !important;
	overflow: hidden !important;
}

.dmah-checkout .account-phone-combo-prefix {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	position: relative !important;
	gap: 8px !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	padding: 0 10px 0 14px !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
}

.dmah-checkout .account-phone-combo-flag {
	width: 20px !important;
	height: 14px !important;
	display: block !important;
	flex: 0 0 20px !important;
	object-fit: cover !important;
}

.dmah-checkout .account-phone-combo-prefix select,
.dmah-checkout .account-phone-combo-code {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	background: transparent none !important;
	border: 0 !important;
	box-shadow: none !important;
	height: 22px !important;
	min-height: 22px !important;
	max-height: 22px !important;
	width: auto !important;
	min-width: 2.75em !important;
	margin: 0 !important;
	padding: 0 16px 0 0 !important;
	font-size: 15px !important;
	line-height: 22px !important;
	color: #16181D !important;
}

.dmah-checkout .account-phone-combo-chevron {
	position: absolute !important;
	right: 10px !important;
	top: 50% !important;
	width: 10px !important;
	height: 6px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-width: 0 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23555' d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E") no-repeat center !important;
	background-size: 10px 6px !important;
	transform: translateY(-50%) !important;
	pointer-events: none !important;
}

.dmah-checkout .account-phone-combo-sep {
	align-self: center !important;
	width: 0 !important;
	height: 22px !important;
	min-height: 22px !important;
	margin: 0 0 0 2px !important;
	border: 0 !important;
	border-left: 1px solid rgba(22, 24, 29, 0.14) !important;
	background: transparent !important;
	flex: 0 0 0 !important;
}

.dmah-checkout .account-phone-combo-number {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
	height: 46px !important;
	min-height: 46px !important;
	max-height: 46px !important;
	margin: 0 !important;
	padding: 0 14px !important;
	font-size: 15px !important;
	line-height: 46px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* iOS: never zoom on focus — keep field text ≥16px on mobile */
@media (max-width: 991px) {
	.form-control,
	.contact-outline-input,
	.account-select-input,
	.account-phone-combo-number,
	.account-phone-combo-code,
	.account-phone-combo-prefix select,
	.dmah-field__input,
	.dmah-field__textarea,
	.dmah-co-field .form-control,
	.dmah-checkout .dmah-co-field .form-control,
	.dmah-checkout .contact-outline-input,
	.dmah-checkout .account-phone-combo-number,
	.dmah-checkout .account-phone-combo-code,
	.dmah-checkout .account-phone-combo-prefix select,
	.dmah-checkout select.form-control {
		font-size: 16px !important;
	}
}