/* ==========================================================================
   Calm Wolf — Login / Create Account
   Scoped entirely under #cwad-auth so it never touches the logged-in
   My Account dashboard (which keeps its existing sage-green styling).
   ========================================================================== */

#cwad-auth {
	--cwad-card: #fff;
	--cwad-ink: #211d19;
	--cwad-muted: #6f6a5f;
	--cwad-border: #e0e0e0;
	--cwad-tab-inactive: #fff;
	--cwad-tab-active: #e2ead8;
	--cwad-required: #b13b3b;
	--cwad-radius: 0;

	max-width: 700px !important;
	margin: 0 auto !important;
	background: #fff !important;
	border-radius: 0 !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--cwad-ink) !important;
	box-sizing: border-box;
}

#cwad-auth *,
#cwad-auth *::before,
#cwad-auth *::after {
	box-sizing: border-box;
}

/* Elementor's Text Editor widget runs the shortcode output through wpautop(),
   which turns the raw newline after every opening tag in this template into
   a literal <br>. None of our spacing relies on real line breaks, so drop
   every one it inserts (e.g. inside the tab buttons, causing the extra
   height above "Create an Account" / "Login to your Account"). */
#cwad-auth br {
	display: none !important;
}

/* Neutralise the grey rounded "card" the dashboard's Additional CSS wraps
   around .woocommerce — only while logged out, so the dashboard keeps it. */
body.woocommerce-account:not(.logged-in) .woocommerce {
	background-color: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* -- Card ----------------------------------------------------------------- */

#cwad-auth .cwad-auth__card {
	background: var(--cwad-card) !important;
	border: 1px solid var(--cwad-border) !important;
	border-radius: 0 !important;
	overflow: hidden;
}

/* WooCommerce core CSS (.woocommerce form.login, form.register) puts its own
   border + padding + border-radius directly on the <form> — that was
   stacking a second border/box inside our card. Strip it back to plain.
   The site's own Additional CSS also caps .woocommerce-form-login at
   max-width:500px (a leftover from before this redesign) — our form keeps
   that class for compatibility with anything else hooking into it, so undo
   the cap here too, otherwise only the login panel's fields (not register,
   which doesn't carry that class) end up narrower than the card. */
#cwad-auth .cwad-form {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* -- Tabs ------------------------------------------------------------------ */

#cwad-auth .cwad-tabs {
	display: flex;
}

#cwad-auth .cwad-tabs__btn {
	flex: 1 1 50%;
	appearance: none;
	border: none;
	border-radius: 0 !important;
	border-bottom: 1px solid var(--cwad-border);
	background: var(--cwad-tab-inactive) !important;
	color: var(--cwad-ink) !important;
	font-size: 19px;
	padding: 20px 12px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#cwad-auth .cwad-tabs__btn + .cwad-tabs__btn {
	border-left: 1px solid var(--cwad-border);
}

#cwad-auth .cwad-tabs__btn[aria-selected="true"] {
	background: var(--cwad-tab-active) !important;
	font-weight: 600;
}

/* -- Panels ------------------------------------------------------------------ */

#cwad-auth .cwad-panel {
	padding: 20px 40px 10px;
	display: none;
}

#cwad-auth .cwad-panel.is-active {
	display: block;
}

#cwad-auth .cwad-panel__title {
	font-weight: 600;
	font-size: 28px;
	text-align: center;
	margin: 0 0 8px;
	color: var(--cwad-ink);
}

#cwad-auth .cwad-panel__lead {
	text-align: center;
	color: var(--cwad-muted);
	font-size: 14px;
	margin: 0 0 28px;
}

/* -- Fields ------------------------------------------------------------------ */

#cwad-auth .cwad-field {
	margin-bottom: 16px;
}

#cwad-auth .cwad-field label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: 0.3px !important;
	color: var(--cwad-ink) !important;
	margin-bottom: 8px !important;
}

#cwad-auth .cwad-req {
	color: var(--cwad-required);
}

#cwad-auth .cwad-field input.input-text,
#cwad-auth .cwad-field input[type="text"],
#cwad-auth .cwad-field input[type="email"],
#cwad-auth .cwad-field input[type="password"] {
	width: 100% !important;
	background: #fff !important;
	border: 1px solid var(--cwad-border) !important;
	border-radius: 0 !important;
	padding: 12px 14px !important;
	font-size: 14px !important;
	color: var(--cwad-ink) !important;
	font-family: inherit !important;
	box-shadow: none !important;
}

#cwad-auth .cwad-field input:focus {
	outline: none !important;
	border-color: var(--cwad-ink) !important;
}

#cwad-auth .cwad-field__pw {
	position: relative;
}

#cwad-auth .cwad-field__pw input {
	padding-right: 42px !important;
}

#cwad-auth .cwad-pw-toggle {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	color: var(--cwad-muted);
}

#cwad-auth .cwad-pw-toggle::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0 auto;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5.4 0-9.8 3.6-11 7 1.2 3.4 5.6 7 11 7s9.8-3.6 11-7c-1.2-3.4-5.6-7-11-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-2A2.5 2.5 0 1 0 12 9.5a2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5c-5.4 0-9.8 3.6-11 7 1.2 3.4 5.6 7 11 7s9.8-3.6 11-7c-1.2-3.4-5.6-7-11-7zm0 11.5A4.5 4.5 0 1 1 12 7.5a4.5 4.5 0 0 1 0 9zm0-2A2.5 2.5 0 1 0 12 9.5a2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#cwad-auth .cwad-pw-toggle.is-visible {
	color: var(--cwad-ink);
}

/* -- Password tooltip --------------------------------------------------- */

#cwad-auth .cwad-tip {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--cwad-muted);
	cursor: help;
}

#cwad-auth .cwad-tip__bubble {
	position: absolute;
	left: 50%;
	bottom: 130%;
	transform: translateX(-50%);
	background: var(--cwad-ink);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	white-space: nowrap;
	padding: 6px 10px;
	border-radius: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 2;
}

#cwad-auth .cwad-tip:hover .cwad-tip__bubble,
#cwad-auth .cwad-tip:focus .cwad-tip__bubble,
#cwad-auth .cwad-tip:focus-visible .cwad-tip__bubble {
	opacity: 1;
	visibility: visible;
}

/* -- WooCommerce's password-strength meter --------------------------------
   Rendered by WooCommerce core JS right after the .password-input wrapper
   (see the `password-input` class on .cwad-field__pw), so it never disturbs
   the input/toggle layout above it. */

#cwad-auth .woocommerce-password-strength {
	margin: 8px 0 0;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	background: #f2f2f2;
	color: var(--cwad-muted);
}

#cwad-auth .woocommerce-password-strength.strong {
	background: #e2ead8;
	color: #3a5a34;
}

#cwad-auth .woocommerce-password-strength.good {
	background: #eef3e6;
	color: #4a6741;
}

#cwad-auth .woocommerce-password-strength.bad,
#cwad-auth .woocommerce-password-strength.short {
	background: #f7e6e6;
	color: var(--cwad-required);
}

/* -- Checkboxes ------------------------------------------------------------ */

#cwad-auth .cwad-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--cwad-ink);
	cursor: pointer;
}

#cwad-auth .cwad-checkbox input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--cwad-ink);
	margin: 0;
}

#cwad-auth .cwad-checkbox--remember {
	margin: 4px 0 20px;
}

/* -- Buttons -------------------------------------------------------------- */

#cwad-auth .cwad-btn {
	display: block;
	width: 100%;
	appearance: none;
	border: none;
	border-radius: 0 !important;
	padding: 14px 20px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

#cwad-auth .cwad-btn--primary {
	background: var(--cwad-ink) !important;
	color: #fff !important;
}

#cwad-auth .cwad-btn--primary:hover {
	background: #3a352e !important;
}

#cwad-auth .cwad-lost {
	text-align: center;
	margin: 28px 0 32px;
	font-size: 15px;
}

#cwad-auth .cwad-lost a {
	color: var(--cwad-ink);
	text-decoration: underline;
}

#cwad-auth .cwad-switch {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	gap: 6px;
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--cwad-border);
	font-size: 15px;
	color: var(--cwad-muted);
}

#cwad-auth .cwad-switch__link {
	appearance: none;
	border: none;
	background: none;
	padding: 0;
	color: var(--cwad-ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	transition: color 0.15s ease;
}

#cwad-auth .cwad-switch__link:hover,
#cwad-auth .cwad-switch__link:focus-visible {
	color: #4a6741;
}

/* -- Notices (printed above the card by WooCommerce) ---------------------- */

body.woocommerce-account:not(.logged-in) ul.woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce-info {
	max-width: 700px;
	margin: 24px auto 0 !important;
	border-radius: 0;
	list-style: none;
	padding: 14px 18px !important;
}

/* -- Responsive ------------------------------------------------------------- */

@media (max-width: 600px) {
	#cwad-auth {
		margin: 24px auto !important;
		padding: 28px 12px !important;
	}

	#cwad-auth .cwad-panel {
		padding: 28px 20px 32px;
	}

	#cwad-auth .cwad-tabs__btn {
		font-size: 15px;
		padding: 14px 8px;
	}
}