/**
 * Oasis Accounts — front-end styles for native WooCommerce account forms.
 *
 * The active Oasis theme supplies the --ol-* design tokens. Every token used
 * here includes a local fallback so the plugin remains fully standalone.
 * Admin-editable --oa-* values are injected by OA_Account as an additional
 * standalone fallback layer.
 */

:root {
	--oa-primary: #353525;
	--oa-primary-hover: #424530;
	--oa-bg: #f5f3ee;
	--oa-text: #252518;
	--oa-border: #dfdad0;
	--oa-radius: 12px;
	--oa-font-display: var(--ol-font-display, "Cormorant Garamond", Georgia, serif);
	--oa-font-body: var(--ol-font-body, "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
	--oa-forest: var(--ol-forest-900, var(--oa-primary, #353525));
	--oa-forest-hover: var(--ol-forest-800, var(--oa-primary-hover, #424530));
	--oa-cream: var(--ol-cream-50, var(--oa-bg, #f5f3ee));
	--oa-cream-deep: var(--ol-cream-100, #edeae3);
	--oa-ink: var(--ol-ink-900, var(--oa-text, #252518));
	--oa-ink-soft: var(--ol-ink-700, #3e3d30);
	--oa-line: var(--ol-cream-200, var(--oa-border, #dfdad0));
	--oa-pill: var(--ol-radius-pill, 999px);
	--oa-card-radius: var(--ol-radius-lg, 20px);
	--oa-shadow: var(--ol-shadow-md, 0 10px 30px -12px rgba(20, 32, 26, 0.18));
	--oa-ease: var(--ol-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--oa-duration: var(--ol-dur, 0.4s);
	--oa-required: #9a463c;
}

.woocommerce-account:not(.logged-in) .woocommerce .u-columns.col2-set,
.woocommerce-page .woocommerce .u-columns.col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	max-width: 960px;
	margin: 0 auto;
	align-items: stretch;
}

.woocommerce .u-columns.col2-set > .u-column1,
.woocommerce .u-columns.col2-set > .u-column2 {
	flex: 1 1 360px;
	float: none;
	width: auto;
	margin: 0;
	box-sizing: border-box;
}

.woocommerce .u-columns.col2-set > .u-column1,
.woocommerce .u-columns.col2-set > .u-column2,
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register {
	background: var(--oa-cream);
	border: 1px solid var(--oa-line);
	border-radius: var(--oa-card-radius);
	box-shadow: var(--oa-shadow);
	padding: clamp(1rem, 3vw, 1.5rem);
}

.woocommerce .u-columns.col2-set > .u-column1 form.woocommerce-form-login,
.woocommerce .u-columns.col2-set > .u-column2 form.woocommerce-form-register {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.woocommerce .u-columns.col2-set h2 {
	color: var(--oa-ink);
	font-family: var(--oa-font-display);
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1.1;
	margin-top: 0;
}

.woocommerce form .form-row label,
.oa-group-label {
	color: var(--oa-ink);
	font-family: var(--oa-font-body);
	font-weight: 500;
	display: block;
	margin-bottom: 0.3rem;
}

.oa-group-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.woocommerce form .form-row .required,
.oa-group-label .required {
	color: var(--oa-required);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="password"],
.oa-register-fields input.input-text {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid var(--oa-line);
	border-radius: var(--ol-radius-md, var(--oa-radius, 12px));
	min-height: 46px;
	padding: 0.7rem 0.9rem;
	background: #fff;
	color: var(--oa-ink);
	font-family: var(--oa-font-body);
	font-size: 1rem;
	line-height: 1.3;
	transition: border-color var(--oa-duration) var(--oa-ease), box-shadow var(--oa-duration) var(--oa-ease);
}

.woocommerce form .form-row input.input-text:focus,
.oa-register-fields input.input-text:focus {
	border-color: var(--oa-forest);
	box-shadow: 0 0 0 3px rgba(53, 53, 37, 0.14);
	outline: none;
}

.oa-register-fields {
	font-family: var(--oa-font-body);
	margin-top: 0.55rem;
}

.oa-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.oa-field--half {
	min-width: 0;
}

.oa-field {
	margin-bottom: 0.75rem;
}

.oa-checkbox-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem;
	margin-top: 0.3rem;
}

.oa-check {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-family: var(--oa-font-body);
	font-weight: 400 !important;
	color: var(--oa-ink);
	cursor: pointer;
	line-height: 1.45;
}

.oa-check input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.1rem;
	border: 1px solid var(--oa-line);
	border-radius: var(--ol-radius-sm, 6px);
	background: #fff;
	flex: 0 0 auto;
	position: relative;
	cursor: pointer;
	transition: background var(--oa-duration) var(--oa-ease), border-color var(--oa-duration) var(--oa-ease);
}

.oa-checkbox-grid .oa-check {
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0.42rem 0.65rem;
	border: 1px solid var(--oa-line);
	border-radius: var(--oa-pill);
	background: color-mix(in srgb, var(--oa-cream) 72%, #fff);
	font-size: 0.84rem;
	font-weight: 500 !important;
	letter-spacing: 0;
	line-height: 1.25;
	text-transform: none;
	white-space: nowrap;
	transition: background var(--oa-duration) var(--oa-ease), border-color var(--oa-duration) var(--oa-ease), box-shadow var(--oa-duration) var(--oa-ease), color var(--oa-duration) var(--oa-ease);
}

.oa-checkbox-grid .oa-check:hover {
	border-color: var(--oa-forest);
}

.oa-checkbox-grid .oa-check:has(input:checked) {
	border-color: var(--oa-forest);
	background: color-mix(in srgb, var(--oa-forest) 10%, #fff);
	box-shadow: inset 0 0 0 1px var(--oa-forest);
	color: var(--oa-ink);
}

.oa-checkbox-grid .oa-check:has(input:focus-visible) {
	outline: 3px solid rgba(53, 53, 37, 0.2);
	outline: 3px solid color-mix(in srgb, var(--oa-forest) 25%, transparent);
	outline-offset: 2px;
}

.oa-check input[type="checkbox"]:checked {
	background: var(--oa-forest);
	border-color: var(--oa-forest);
}

.oa-check input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 0.35rem;
	top: 0.12rem;
	width: 0.3rem;
	height: 0.6rem;
	border: solid var(--ol-cream-50, #f5f3ee);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.oa-check input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--oa-forest);
	outline-offset: 2px;
}

.oa-check--terms {
	align-items: flex-start;
	margin-top: 0.2rem;
	font-size: 0.82rem;
	line-height: 1.5;
}

.oa-check--terms a {
	color: var(--oa-forest-hover);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.oa-strength {
	margin-top: 0.4rem;
	font-family: var(--oa-font-body);
	font-size: 0.85rem;
	color: var(--oa-ink-soft);
	display: none;
}

.oa-strength.is-visible {
	display: block;
}

.oa-strength__bar {
	height: 5px;
	border-radius: var(--oa-pill);
	background: var(--oa-line);
	overflow: hidden;
	margin-top: 0.3rem;
}

.oa-strength__fill {
	display: block;
	height: 100%;
	width: 0;
	transition: width 0.2s ease, background 0.2s ease;
}

.oa-strength[data-level="weak"] .oa-strength__fill { width: 33%; background: #a33a32; }
.oa-strength[data-level="medium"] .oa-strength__fill { width: 66%; background: #a46e16; }
.oa-strength[data-level="strong"] .oa-strength__fill { width: 100%; background: var(--oa-forest); }

.woocommerce form.woocommerce-form-login .button,
.woocommerce form.woocommerce-form-register .button,
.woocommerce #customer_login .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--oa-forest);
	color: var(--ol-cream-50, #f5f3ee);
	border: 1px solid transparent;
	border-radius: var(--oa-pill);
	box-shadow: var(--oa-shadow);
	padding: 0.9rem 1.75rem;
	font-family: var(--oa-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: all var(--oa-duration) var(--oa-ease);
}

.woocommerce form.woocommerce-form-login .button:hover,
.woocommerce form.woocommerce-form-register .button:hover,
.woocommerce #customer_login .button:hover {
	background: var(--oa-forest-hover);
	box-shadow: var(--ol-shadow-lg, 0 30px 80px -20px rgba(20, 32, 26, 0.28));
	transform: translateY(-1px);
}

.oa-turnstile {
	margin: 0.75rem 0 1rem;
}

.oa-turnstile--failed {
	display: none !important;
	margin: 0 !important;
	min-height: 0 !important;
}

.oa-profile {
	background: var(--oa-cream);
	border: 1px solid var(--oa-line);
	border-radius: var(--oa-card-radius);
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.oa-profile legend {
	font-family: var(--oa-font-display);
	font-size: 1.5rem;
	font-weight: 500;
	color: var(--oa-ink);
	padding: 0 0.5rem;
}

@media (max-width: 639px) {
	.woocommerce .u-columns.col2-set {
		flex-direction: column;
	}

	.oa-checkbox-grid {
		grid-template-columns: 1fr;
	}

	.oa-field--half {
		min-width: 0;
	}

	.oa-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Unified login / registration card and progressive tabs.
 * Without JavaScript both panels remain visible, stacked in this one card.
 * ---------------------------------------------------------------------- */
.woocommerce #customer_login.u-columns,
.woocommerce #customer_login.col2-set {
	display: block;
	width: min(100%, 700px);
	max-width: 700px;
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 1.5rem);
	box-sizing: border-box;
	background: var(--oa-cream);
	border: 1px solid var(--oa-line);
	border-radius: var(--oa-card-radius);
	box-shadow: var(--oa-shadow);
}

.woocommerce #customer_login > .u-column1,
.woocommerce #customer_login > .u-column2,
.woocommerce #customer_login > .col-1,
.woocommerce #customer_login > .col-2 {
	display: block;
	float: none;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.woocommerce #customer_login:not(.oa-auth-tabs--enhanced) > .u-column2,
.woocommerce #customer_login:not(.oa-auth-tabs--enhanced) > .col-2 {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--oa-line);
}

.woocommerce #customer_login form.woocommerce-form-login,
.woocommerce #customer_login form.woocommerce-form-register {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.woocommerce #customer_login.oa-auth-tabs--enhanced {
	max-width: 480px;
}

.woocommerce #customer_login.oa-auth-tabs--enhanced.oa-active-register {
	max-width: 700px;
}

.woocommerce #customer_login.oa-auth-tabs--enhanced [hidden] {
	display: none !important;
}

.woocommerce #customer_login.oa-auth-tabs--enhanced > .u-column1 > h2,
.woocommerce #customer_login.oa-auth-tabs--enhanced > .u-column2 > h2,
.woocommerce #customer_login.oa-auth-tabs--enhanced > .col-1 > h2,
.woocommerce #customer_login.oa-auth-tabs--enhanced > .col-2 > h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.oa-auth-tabs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.25rem;
	margin: 0 0 1rem;
	padding: 0.25rem;
	background: var(--oa-cream-deep);
	border: 1px solid var(--oa-line);
	border-radius: var(--oa-pill);
}

.woocommerce #customer_login .oa-auth-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 2.65rem;
	margin: 0;
	padding: 0.6rem 0.85rem;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--oa-pill) !important;
	box-shadow: none !important;
	color: var(--oa-ink) !important;
	font-family: var(--oa-font-body);
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	line-height: 1.2;
	text-transform: none !important;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.woocommerce #customer_login .oa-auth-tab[aria-selected="true"] {
	background: var(--oa-forest) !important;
	color: var(--ol-cream-50, #f5f3ee) !important;
}

.woocommerce #customer_login .oa-auth-tab:focus-visible {
	outline: 3px solid rgba(53, 53, 37, 0.28) !important;
	outline-offset: 2px;
}

/* WooCommerce owns the one password visibility button per field. These rules
 * only neutralise broad theme button styling and position that native control. */
.woocommerce .password-input,
.woocommerce .wp-pwd {
	display: block;
	position: relative;
	width: 100%;
}

.woocommerce .password-input input,
.woocommerce .wp-pwd input,
.woocommerce-form__input-password {
	padding-right: 2.75rem !important;
}

.woocommerce button.show-password-input,
.woocommerce .show-password-input,
.woocommerce button.wp-hide-pw {
	position: absolute;
	top: 50%;
	right: 0.5rem;
	bottom: auto;
	left: auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	min-width: 2.75rem;
	max-width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
	max-height: 2.75rem;
	margin: 0;
	padding: 0 !important;
	transform: translateY(-50%);
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--oa-forest) !important;
	font-family: var(--oa-font-body) !important;
	font-size: 0 !important;
	font-weight: 600;
	letter-spacing: 0 !important;
	line-height: 1;
	text-decoration: none;
	text-transform: none !important;
	appearance: none;
	cursor: pointer;
	z-index: 3;
}

.woocommerce .show-password-input::before,
.woocommerce button.wp-hide-pw::before {
	content: "";
	display: block;
	width: 1.15rem;
	height: 1.15rem;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23353525' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}

.woocommerce button.show-password-input:focus-visible,
.woocommerce .show-password-input:focus-visible,
.woocommerce button.wp-hide-pw:focus-visible {
	outline: 2px solid var(--oa-forest) !important;
	outline-offset: 1px !important;
}

/* WC's generated-username setting is also enforced in PHP. This is a final
 * presentation guard for fields injected by another extension. */
.woocommerce form.woocommerce-form-register .form-row:has(#reg_username),
.woocommerce form.woocommerce-form-register .form-row:has(input[name="username"]) {
	display: none !important;
}

.oa-loyalty-note {
	display: flex;
	align-items: center;
	width: fit-content;
	margin: 0 0 1.15rem !important;
	padding: 0.42rem 0.7rem !important;
	background: color-mix(in srgb, var(--oa-forest) 9%, #fff);
	border: 1px solid color-mix(in srgb, var(--oa-forest) 22%, transparent);
	border-radius: var(--oa-pill);
	color: var(--oa-forest) !important;
	font-family: var(--oa-font-body);
	font-size: 0.8rem !important;
	font-weight: 600;
	line-height: 1.3;
}

@media (max-width: 639px) {
	.woocommerce #customer_login.u-columns,
	.woocommerce #customer_login.col2-set {
		width: 100%;
		padding: 1rem;
		border-radius: 14px;
	}

	.oa-auth-tabs {
		margin-bottom: 1.15rem;
	}

	.oa-checkbox-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.oa-checkbox-grid .oa-check {
		white-space: normal;
	}
}

/* ==========================================================================
   SINGLE-CHOICE CHIPS (radio)
   The rules above only neutralise input[type="checkbox"], so the radios fell
   back to the browser's native control — a blue dot that fights the forest
   chip. Draw our own, and key it off currentColor so one rule reads correctly
   on both the pale chip (dark ring) and the selected forest chip (cream ring).
   ========================================================================== */
.oa-check input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	display: grid;
	place-content: center;
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0;
	padding: 0;
	border: 1.5px solid color-mix(in srgb, currentColor 34%, transparent);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition:
		border-color var(--oa-duration) var(--oa-ease),
		background var(--oa-duration) var(--oa-ease);
}

.oa-check input[type="radio"]::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: currentColor;
	transform: scale(0);
	transition: transform 0.16s var(--oa-ease);
}

.oa-check:hover input[type="radio"] {
	border-color: color-mix(in srgb, currentColor 60%, transparent);
}

.oa-check input[type="radio"]:checked {
	border-color: currentColor;
}

.oa-check input[type="radio"]:checked::before {
	transform: scale(1);
}

/* The native focus ring is also browser-blue; the chip carries focus instead. */
.oa-check input[type="radio"]:focus-visible {
	outline: none;
}

/* White text fields on the Log In / Create Account forms (2026-07-20).
   The theme (main.css / detail-polish.css) tints .ol-account-page inputs cream
   via color-mix; force pure white here with high specificity + !important. */
html body.oasis-redesign :is(form.woocommerce-form-login, form.woocommerce-form-register, .oa-register-fields) :is(input.input-text, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea) {
  background: #fff !important;
  background-color: #fff !important;
}