/**
 * Argo Shop — global side login drawer polish (Job 15B / 15B.6).
 * Scope: .login-form-side only (WoodMart login sidebar).
 * Visual / presentation only — no auth, validation, or drawer JS changes.
 * Social: Nextend Social Login Free (Google).
 */

/* ------------------------------------------------------------------
   Local tokens
   ------------------------------------------------------------------ */

.login-form-side {
	--argo-auth-field-h: 49px;
	--argo-auth-btn-h: 49px;
	--argo-auth-social-h: 46px;
	--argo-auth-radius: 13px;
	--argo-auth-pad: 30px;
	--argo-auth-border: rgba(232, 168, 188, 0.55);
	--argo-auth-ring: 0 0 0 3px rgba(232, 168, 188, 0.35);

	font-family: "Poppins", sans-serif;
	--wd-side-hidden-w: 400px;
	width: min(var(--wd-side-hidden-w), calc(100vw - 24px));
	max-width: calc(100vw - 24px);
	background-color: var(--argo-cream-light, #fff7f2);
	color: var(--argo-plum, #29121c);
	border-inline-start: 1px solid var(--argo-auth-border);
	box-shadow: -8px 0 24px rgba(41, 18, 28, 0.08);
}

/* ------------------------------------------------------------------
   Overlay (login drawer open only — shared .wd-close-side left intact)
   ------------------------------------------------------------------ */

body:has(.login-form-side.wd-opened) .wd-close-side.wd-close-side-opened {
	background-color: rgba(41, 18, 28, 0.6);
}

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */

.login-form-side > .wd-heading {
	padding: var(--argo-auth-pad) var(--argo-auth-pad) 0;
	gap: 12px;
	border-bottom: none;
	background-color: transparent;
	margin-bottom: 24px;
}

.login-form-side .wd-heading > .title {
	color: var(--argo-plum, #29121c);
	font-family: "Poppins", sans-serif;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.login-form-side .close-side-widget.wd-action-btn.wd-style-text > a,
.login-form-side .close-side-widget a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border-radius: 11px;
	color: var(--argo-plum, #29121c);
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.login-form-side .close-side-widget a:hover {
	background-color: var(--argo-cream, #fff1e4);
	color: var(--argo-plum-soft, #3d1c2a);
}

.login-form-side .close-side-widget a:focus-visible {
	background-color: var(--argo-cream, #fff1e4);
	color: var(--argo-plum-soft, #3d1c2a);
	outline: none;
	box-shadow: var(--argo-auth-ring);
}

.login-form-side .close-side-widget .wd-action-icon {
	color: inherit;
}

.login-form-side .close-side-widget .wd-action-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
   Notices
   ------------------------------------------------------------------ */

.login-form-side .woocommerce-notices-wrapper {
	padding: 0 var(--argo-auth-pad);
}

.login-form-side .woocommerce-notices-wrapper:empty {
	display: none;
}

/* ------------------------------------------------------------------
   Form shell + rhythm
   ------------------------------------------------------------------ */

.login-form-side .woocommerce-form-login {
	padding: 0 var(--argo-auth-pad) 0;
	border-bottom: none;
	margin: 0;
}

.login-form-side .woocommerce-form-login .form-row {
	margin-bottom: 14px;
}

.login-form-side .woocommerce-form-login .form-row-btn {
	margin-top: 4px;
	margin-bottom: 16px;
}

.login-form-side .woocommerce-form-login .login-form-footer {
	margin-bottom: 24px;
}

/* ------------------------------------------------------------------
   Labels
   ------------------------------------------------------------------ */

.login-form-side .woocommerce-form-login .form-row > label {
	display: block;
	margin-bottom: 8px;
	color: var(--argo-plum, #29121c);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
}

.login-form-side .woocommerce-form-login .form-row .required {
	color: #d4899a;
	font-weight: 500;
	text-decoration: none;
	border: 0;
}

/* ------------------------------------------------------------------
   Inputs
   ------------------------------------------------------------------ */

.login-form-side .woocommerce-form-login .input-text,
.login-form-side .woocommerce-form-login input[type="text"],
.login-form-side .woocommerce-form-login input[type="email"],
.login-form-side .woocommerce-form-login input[type="password"] {
	width: 100%;
	min-height: var(--argo-auth-field-h);
	height: var(--argo-auth-field-h);
	padding-block: 0;
	padding-inline: 15px;
	border: 1px solid var(--argo-border, #ead8cf);
	border-radius: var(--argo-auth-radius);
	background-color: var(--argo-white, #fff);
	color: var(--argo-plum, #29121c);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
	box-shadow: none;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.login-form-side .woocommerce-form-login .password-input input {
	padding-inline-end: var(--argo-auth-field-h) !important;
}

.login-form-side .woocommerce-form-login .input-text:hover,
.login-form-side .woocommerce-form-login input[type="text"]:hover,
.login-form-side .woocommerce-form-login input[type="email"]:hover,
.login-form-side .woocommerce-form-login input[type="password"]:hover {
	border-color: var(--argo-pink, #e8a8bc);
}

.login-form-side .woocommerce-form-login .input-text:focus,
.login-form-side .woocommerce-form-login input[type="text"]:focus,
.login-form-side .woocommerce-form-login input[type="email"]:focus,
.login-form-side .woocommerce-form-login input[type="password"]:focus {
	border-color: var(--argo-pink, #e8a8bc);
	box-shadow: var(--argo-auth-ring);
	outline: none;
}

.login-form-side .woocommerce-form-login .input-text:focus:not(:focus-visible),
.login-form-side .woocommerce-form-login input[type="text"]:focus:not(:focus-visible),
.login-form-side .woocommerce-form-login input[type="email"]:focus:not(:focus-visible),
.login-form-side .woocommerce-form-login input[type="password"]:focus:not(:focus-visible) {
	/* Mouse focus: soft pink ring only (no harsh browser outline) */
	outline: none;
}

.login-form-side .woocommerce-form-login .input-text:focus-visible,
.login-form-side .woocommerce-form-login input[type="text"]:focus-visible,
.login-form-side .woocommerce-form-login input[type="email"]:focus-visible,
.login-form-side .woocommerce-form-login input[type="password"]:focus-visible {
	border-color: var(--argo-pink, #e8a8bc);
	box-shadow: var(--argo-auth-ring);
	outline: none;
}

/* Password reveal — keep WooCommerce toggle behavior */
.login-form-side .password-input {
	position: relative;
	display: block;
}

.login-form-side .show-password-input {
	top: 0;
	inset-inline-end: 0;
	width: var(--argo-auth-field-h);
	height: var(--argo-auth-field-h);
	color: var(--argo-text-muted, #6f6065);
	border-radius: 0 var(--argo-auth-radius) var(--argo-auth-radius) 0;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.login-form-side .show-password-input:hover {
	color: var(--argo-plum, #29121c);
	background-color: transparent;
	opacity: 1;
}

.login-form-side .show-password-input:focus-visible {
	color: var(--argo-plum, #29121c);
	outline: none;
	box-shadow: inset 0 0 0 2px var(--argo-pink, #e8a8bc);
}

/* ------------------------------------------------------------------
   Login button
   ------------------------------------------------------------------ */

.login-form-side .woocommerce-form-login__submit,
.login-form-side .woocommerce-form-login button[name="login"],
.login-form-side .woocommerce-form-login .form-row-btn .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--argo-auth-btn-h);
	height: var(--argo-auth-btn-h);
	padding: 0 18px;
	border: 1px solid var(--argo-plum, #29121c);
	border-radius: var(--argo-auth-radius);
	background-color: var(--argo-plum, #29121c);
	color: var(--argo-cream, #fff1e4);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: none;
	box-shadow: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.login-form-side .woocommerce-form-login__submit:hover,
.login-form-side .woocommerce-form-login button[name="login"]:hover,
.login-form-side .woocommerce-form-login .form-row-btn .button:hover {
	background-color: var(--argo-plum-soft, #3d1c2a);
	border-color: var(--argo-plum-soft, #3d1c2a);
	color: var(--argo-cream, #fff1e4);
	transform: translateY(-1px);
}

.login-form-side .woocommerce-form-login__submit:focus-visible,
.login-form-side .woocommerce-form-login button[name="login"]:focus-visible,
.login-form-side .woocommerce-form-login .form-row-btn .button:focus-visible {
	outline: none;
	box-shadow: var(--argo-auth-ring);
}

/* ------------------------------------------------------------------
   Remember / Lost password row
   ------------------------------------------------------------------ */

.login-form-side .login-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 12px;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--argo-text-muted, #6f6065);
}

.login-form-side .login-form-footer .woocommerce-form-login__rememberme {
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--argo-plum, #29121c);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
}

.login-form-side .login-form-footer .woocommerce-form-login__rememberme span {
	color: inherit;
}

.login-form-side .login-form-footer .woocommerce-form__input-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	flex-shrink: 0;
	border: 1px solid var(--argo-border, #ead8cf);
	border-radius: 4px;
	background-color: var(--argo-white, #fff);
	accent-color: var(--argo-plum, #29121c);
	vertical-align: middle;
	cursor: pointer;
	position: relative;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.login-form-side .login-form-footer .woocommerce-form__input-checkbox:hover {
	border-color: var(--argo-pink, #e8a8bc);
}

.login-form-side .login-form-footer .woocommerce-form__input-checkbox:checked {
	background-color: var(--argo-plum, #29121c);
	border-color: var(--argo-plum, #29121c);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFF1E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 6.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
}

.login-form-side .login-form-footer .woocommerce-form__input-checkbox:focus-visible {
	outline: none;
	box-shadow: var(--argo-auth-ring);
}

.login-form-side .login-form-footer .lost_password {
	order: 2;
	margin: 0;
	color: var(--argo-plum, #29121c);
	font-size: 13.5px;
	font-weight: 500;
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.login-form-side .login-form-footer .lost_password:hover,
.login-form-side .login-form-footer .lost_password:focus-visible {
	color: var(--argo-plum-soft, #3d1c2a);
	text-decoration: underline;
	text-decoration-color: var(--argo-pink, #e8a8bc);
	opacity: 1;
	outline: none;
}

/* ------------------------------------------------------------------
   Social login — Nextend Social Login Free (Google)
   Job 15B.6 — outside WooCommerce <form>; subtle secondary CTA
   ------------------------------------------------------------------ */

.login-form-side .argo-social-login {
	margin: 4px var(--argo-auth-pad) 22px;
	padding: 0;
}

.login-form-side .argo-social-login__sep {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	color: var(--argo-text-muted, #6f6065);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.35;
	text-align: center;
	text-transform: none;
}

.login-form-side .argo-social-login__buttons,
.login-form-side .argo-social-login .nsl-container,
.login-form-side .argo-social-login .nsl-container-buttons {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

.login-form-side .argo-social-login .nsl-container-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.login-form-side .argo-social-login .nsl-button,
.login-form-side .argo-social-login a.nsl-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: var(--argo-auth-social-h);
	height: var(--argo-auth-social-h) !important;
	margin: 0 !important;
	padding: 0 16px 0 44px !important;
	border: 1px solid rgba(232, 168, 188, 0.55) !important;
	border-radius: 12px !important;
	box-sizing: border-box;
	box-shadow: none !important;
	background-color: #ffffff !important;
	background-image: none !important;
	color: #3d1c2a !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	overflow: hidden;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.login-form-side .argo-social-login .nsl-button:hover,
.login-form-side .argo-social-login a.nsl-button:hover {
	background-color: #fff7f2 !important;
	border-color: rgba(232, 168, 188, 0.85) !important;
	color: #29121c !important;
	transform: translateY(-1px);
	filter: none;
}

.login-form-side .argo-social-login .nsl-button:focus-visible,
.login-form-side .argo-social-login a.nsl-button:focus-visible {
	outline: none;
	box-shadow: var(--argo-auth-ring);
}

/*
 * Nextend ships `padding: 8px` on .nsl-button-svg-container. Combined with our
 * 20px box (border-box), the SVG content box collapsed to ~4px (tiny colour dot).
 */
.login-form-side .argo-social-login .nsl-button-svg-container {
	position: absolute;
	inset-inline-start: 15px;
	top: 50%;
	left: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: content-box;
	overflow: visible;
	background: transparent !important;
	transform: translateY(-50%);
	pointer-events: none;
}

.login-form-side .argo-social-login .nsl-button-svg-container svg {
	display: block;
	width: 20px !important;
	height: 20px !important;
	max-width: none;
	flex-shrink: 0;
}

.login-form-side .argo-social-login .nsl-button-label-container {
	display: block;
	width: 100%;
	text-align: center;
}

/* ------------------------------------------------------------------
   Create account section
   ------------------------------------------------------------------ */

.login-form-side .create-account-question {
	margin: 0;
	padding: 0 var(--argo-auth-pad) var(--argo-auth-pad);
	border-bottom: none;
	text-align: center;
	--wd-tags-mb: 10px;
}

.login-form-side .create-account-question:before {
	/* Neutralize WoodMart decorative account glyph — reduces empty stretch */
	content: none !important;
	display: none !important;
}

.login-form-side .create-account-question > p {
	margin: 0 0 12px;
	color: var(--argo-text-muted, #6f6065);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
}

.login-form-side .create-account-question .btn.create-account-button,
.login-form-side .create-account-question a.create-account-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	max-width: 100%;
	min-height: 46px !important;
	height: 46px !important;
	padding: 0 16px !important;
	border: 1px solid var(--argo-plum, #29121c) !important;
	border-radius: var(--argo-auth-radius) !important;
	background-color: var(--argo-white, #fff) !important;
	background-image: none !important;
	color: var(--argo-plum, #29121c) !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	--btn-color: var(--argo-plum, #29121c);
	--btn-color-hover: var(--argo-plum, #29121c);
	--btn-brd-color: var(--argo-plum, #29121c);
	--btn-brd-color-hover: var(--argo-plum, #29121c);
	--btn-bgcolor: var(--argo-white, #fff);
	--btn-bgcolor-hover: rgba(232, 168, 188, 0.18);
	--btn-brd-width: 1px;
	--btn-height: 46px;
	--btn-padding: 0 16px;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.login-form-side .create-account-question .btn.create-account-button:hover,
.login-form-side .create-account-question a.create-account-button:hover {
	background-color: rgba(232, 168, 188, 0.18) !important;
	border-color: var(--argo-plum, #29121c) !important;
	color: var(--argo-plum, #29121c) !important;
}

.login-form-side .create-account-question .btn.create-account-button:focus-visible,
.login-form-side .create-account-question a.create-account-button:focus-visible {
	outline: none;
	box-shadow: var(--argo-auth-ring);
}

/* ------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.login-form-side {
		--argo-auth-pad: 22px;
		--wd-side-hidden-w: 390px;
		width: min(100vw, 390px);
		max-width: 100vw;
	}

	.login-form-side > .wd-heading {
		margin-bottom: 20px;
	}

	.login-form-side .woocommerce-form-login .form-row,
	.login-form-side .woocommerce-form-login .form-row-btn,
	.login-form-side .woocommerce-form-login .login-form-footer,
	.login-form-side .argo-social-login,
	.login-form-side .create-account-question .btn.create-account-button,
	.login-form-side .create-account-question a.create-account-button {
		max-width: 100%;
	}

	.login-form-side .login-form-footer {
		row-gap: 8px;
	}
}

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.login-form-side,
	.login-form-side .close-side-widget a,
	.login-form-side .woocommerce-form-login .input-text,
	.login-form-side .woocommerce-form-login input,
	.login-form-side .show-password-input,
	.login-form-side .woocommerce-form-login__submit,
	.login-form-side .woocommerce-form-login button[name="login"],
	.login-form-side .woocommerce-form-login .form-row-btn .button,
	.login-form-side .login-form-footer .woocommerce-form__input-checkbox,
	.login-form-side .login-form-footer .lost_password,
	.login-form-side .argo-social-login .nsl-button,
	.login-form-side .create-account-question .btn.create-account-button,
	.login-form-side .create-account-question a.create-account-button,
	body:has(.login-form-side.wd-opened) .wd-close-side {
		transition: none !important;
	}

	.login-form-side .woocommerce-form-login__submit:hover,
	.login-form-side .woocommerce-form-login button[name="login"]:hover,
	.login-form-side .woocommerce-form-login .form-row-btn .button:hover,
	.login-form-side .argo-social-login .nsl-button:hover {
		transform: none;
	}
}