/* ==========================================================
   CM24 Account Styles v1.0
   All rules are scoped to .cm24-form, which the JS adds only
   to forms containing password / email fields. Nothing else
   on the site is affected.
   ========================================================== */

:root {
	--cm24-acc: #F7941D;
	--cm24-acc-dark: #d97d0c;
	--cm24-ink: #1f2328;
	--cm24-muted: #6c757d;
	--cm24-line: #dfe3e8;
}

/* ---------- Card ---------- */
.cm24-form {
	max-width: 430px;
	margin: 36px auto !important;
	background: #fff;
	border: 1px solid #eaedf0;
	border-radius: 16px;
	padding: 34px 30px !important;
	box-shadow: 0 6px 30px rgba(0, 0, 0, .07);
	box-sizing: border-box;
	width: 100%;
}

.cm24-form *,
.cm24-form *::before,
.cm24-form *::after { box-sizing: border-box; }

/* Optional heading injected by JS */
.cm24-form-head {
	text-align: center;
	margin: 0 0 24px;
}
.cm24-form-head h2 {
	font-size: 22px;
	font-weight: 700;
	color: var(--cm24-ink);
	margin: 0 0 6px;
	line-height: 1.3;
}
.cm24-form-head p {
	font-size: 13px;
	color: var(--cm24-muted);
	margin: 0;
}

/* ---------- Labels ---------- */
.cm24-form label {
	display: block;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--cm24-ink) !important;
	margin: 0 0 7px !important;
	line-height: 1.4;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.cm24-form label.cm24-inline-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 500 !important;
	font-size: 13px !important;
	color: var(--cm24-muted) !important;
}

/* ---------- Inputs ---------- */
.cm24-form input[type="text"],
.cm24-form input[type="email"],
.cm24-form input[type="password"],
.cm24-form input[type="tel"],
.cm24-form input[type="number"],
.cm24-form select,
.cm24-form textarea {
	width: 100% !important;
	display: block;
	background: #fff !important;
	border: 1.5px solid var(--cm24-line) !important;
	border-radius: 10px !important;
	padding: 13px 15px !important;
	/* 16px prevents iOS Safari zooming in when the field is focused */
	font-size: 16px !important;
	line-height: 1.4 !important;
	color: var(--cm24-ink) !important;
	margin: 0 0 18px !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 48px;
	transition: border-color .18s ease, box-shadow .18s ease;
	-webkit-appearance: none;
	appearance: none;
}

.cm24-form textarea {
	min-height: 120px;
	resize: vertical;
}

.cm24-form input:focus,
.cm24-form select:focus,
.cm24-form textarea:focus {
	border-color: var(--cm24-acc) !important;
	box-shadow: 0 0 0 3px rgba(247, 148, 29, .15) !important;
	outline: none !important;
}

.cm24-form input::placeholder,
.cm24-form textarea::placeholder {
	color: #a8afb7;
	opacity: 1;
}

/* Kill Chrome's blue autofill background */
.cm24-form input:-webkit-autofill,
.cm24-form input:-webkit-autofill:hover,
.cm24-form input:-webkit-autofill:focus,
.cm24-form input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 1000px #fff inset !important;
	-webkit-text-fill-color: var(--cm24-ink) !important;
	caret-color: var(--cm24-ink);
	border: 1.5px solid var(--cm24-line) !important;
	transition: background-color 9999s ease-in-out 0s;
}
.cm24-form input:-webkit-autofill:focus {
	border-color: var(--cm24-acc) !important;
}

/* ---------- Password field + show/hide ---------- */
.cm24-pw-wrap {
	position: relative;
	margin-bottom: 18px;
}
.cm24-pw-wrap input {
	margin-bottom: 0 !important;
	padding-right: 62px !important;
}
.cm24-pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--cm24-acc);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	padding: 10px 10px;
	border-radius: 7px;
	letter-spacing: .02em;
	-webkit-tap-highlight-color: transparent;
	min-height: 40px;
}
.cm24-pw-toggle:hover { background: rgba(247, 148, 29, .08); }

/* ---------- Row: label + helper link ---------- */
.cm24-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 7px;
	flex-wrap: wrap;
}
.cm24-label-row label { margin-bottom: 0 !important; }
.cm24-label-row a {
	font-size: 12px !important;
	font-weight: 600;
	white-space: nowrap;
}

/* ---------- Buttons ---------- */
/* Only real submit buttons get the big orange treatment.
   Password-eye toggles and other icon buttons are excluded below. */
.cm24-form button[type="submit"]:not(.show-password-input):not(.hide-password-input),
.cm24-form input[type="submit"],
.cm24-form button.button:not(.show-password-input):not(.hide-password-input),
.cm24-form a.button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	background: var(--cm24-acc) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 10px !important;
	padding: 14px 18px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1.3;
	min-height: 50px;
	cursor: pointer;
	margin: 4px 0 0 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	transition: background .2s ease, transform .1s ease;
	-webkit-tap-highlight-color: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.cm24-form button[type="submit"]:not(.show-password-input):not(.hide-password-input):hover,
.cm24-form input[type="submit"]:hover,
.cm24-form a.button:hover {
	background: var(--cm24-acc-dark) !important;
	color: #fff !important;
}

.cm24-form button[type="submit"]:active,
.cm24-form input[type="submit"]:active {
	transform: scale(.99);
}

.cm24-form button[disabled],
.cm24-form input[type="submit"][disabled] {
	opacity: .6;
	cursor: not-allowed;
}

/* ---------- Links ---------- */
.cm24-form a {
	color: var(--cm24-acc) !important;
	text-decoration: none !important;
	font-weight: 600;
	border: 0 !important;
}
.cm24-form a:hover { text-decoration: underline !important; }

/* ---------- Footer text ---------- */
.cm24-form-foot,
.cm24-form > p:last-of-type {
	text-align: center;
	margin: 20px 0 0 !important;
	font-size: 13px;
	color: var(--cm24-muted);
	line-height: 1.6;
}

/* ---------- Divider ---------- */
.cm24-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 22px 0;
	color: #a8afb7;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.cm24-divider::before,
.cm24-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #ebeef1;
}

/* ---------- Checkbox / remember me ---------- */
.cm24-form input[type="checkbox"] {
	width: 17px !important;
	height: 17px !important;
	min-height: 0 !important;
	margin: 0 !important;
	accent-color: var(--cm24-acc);
	flex: 0 0 auto;
}

/* ---------- Notices ---------- */
.cm24-form .woocommerce-error,
.cm24-form .woocommerce-message,
.cm24-form .cm24-notice {
	border-radius: 10px;
	padding: 12px 15px;
	font-size: 13px;
	margin: 0 0 18px;
	list-style: none;
	border: 1px solid transparent;
	line-height: 1.5;
}
.cm24-form .woocommerce-error,
.cm24-form .cm24-notice.error {
	background: #fdeeee;
	border-color: #f5c6c6;
	color: #a12b2b;
}
.cm24-form .woocommerce-message,
.cm24-form .cm24-notice.success {
	background: #eefaf0;
	border-color: #bfe6c8;
	color: #1f6b33;
}

/* ---------- Page spacing ---------- */
.cm24-form-page .entry-header,
.cm24-form-page .page-header { margin-bottom: 8px; }

/* ==========================================================
   MOBILE
   ========================================================== */
@media (max-width: 600px) {
	.cm24-form {
		margin: 18px 12px !important;
		padding: 26px 20px !important;
		border-radius: 14px;
		box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
	}

	.cm24-form-head { margin-bottom: 20px; }
	.cm24-form-head h2 { font-size: 19px; }
	.cm24-form-head p { font-size: 12.5px; }

	.cm24-form input[type="text"],
	.cm24-form input[type="email"],
	.cm24-form input[type="password"],
	.cm24-form input[type="tel"],
	.cm24-form select {
		padding: 12px 14px !important;
		margin-bottom: 16px !important;
		min-height: 46px;
	}

	.cm24-form button[type="submit"],
	.cm24-form input[type="submit"] {
		font-size: 13px !important;
		min-height: 48px;
		letter-spacing: .06em;
	}

	.cm24-label-row a { font-size: 11.5px !important; }
	.cm24-pw-toggle { font-size: 11.5px; padding: 10px 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.cm24-form * { transition: none !important; }
}


/* ==========================================================
   WooCommerce native password eye — must stay a small icon
   ========================================================== */
.cm24-form .woocommerce-password-input,
.cm24-form .password-input {
	position: relative !important;
	display: block !important;
	width: 100%;
	margin-bottom: 18px;
}

.cm24-form .woocommerce-password-input input,
.cm24-form .password-input input {
	margin-bottom: 0 !important;
	padding-right: 48px !important;
}

.cm24-form .show-password-input,
.cm24-form .hide-password-input,
.cm24-form span.show-password-input,
.cm24-form button.show-password-input {
	position: absolute !important;
	right: 14px !important;
	top: 50% !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	width: 26px !important;
	height: 26px !important;
	min-height: 0 !important;
	max-width: 26px !important;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	color: #8a9099 !important;
	font-size: 0 !important;
	line-height: 1 !important;
	display: block !important;
	cursor: pointer;
	z-index: 5;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

.cm24-form .show-password-input::after,
.cm24-form .hide-password-input::after {
	font-size: 15px !important;
	color: #8a9099;
}

.cm24-form .show-password-input:hover::after,
.cm24-form .hide-password-input:hover::after {
	color: var(--cm24-acc);
}

/* Remember me row */
.cm24-form .woocommerce-form-login__rememberme,
.cm24-form label.woocommerce-form__label-for-checkbox {
	display: flex !important;
	align-items: center;
	gap: 9px;
	font-weight: 500 !important;
	font-size: 13px !important;
	color: var(--cm24-muted) !important;
	margin: 0 0 18px !important;
	cursor: pointer;
}
.cm24-form .woocommerce-form-login__rememberme span { line-height: 1.3; }

/* Required asterisk */
.cm24-form .required {
	color: #d64545 !important;
	text-decoration: none;
	border: 0;
}

/* Lost password link at the bottom */
.cm24-form .woocommerce-LostPassword {
	text-align: center;
	margin: 16px 0 0 !important;
	font-size: 13px;
}