/**
 * Ezyhut Grocery — login, registration and account styling.
 *
 * Loaded on the Grocery Login / Grocery Register page templates and on
 * WooCommerce account pages. style.css (tokens, buttons, typography) is always
 * loaded first, so this file only adds what those screens need.
 *
 * NOTE ON SPECIFICITY: the generic `input[type="..."]` block in style.css is
 * (0,1,1). Any single-class rule aimed at an input (0,1,0) silently loses to
 * it — that is exactly the bug that broke the product-tile quantity stepper.
 * Every input rule below is therefore qualified to at least (0,2,1).
 *
 * @package Ezyhut_Grocery
 */

/* ==========================================================================
   1. SPLIT-PANEL SHELL
   ========================================================================== */

.ezy-auth-wrap {
	padding-block: clamp(28px, 4vw, 64px);
	background:
		radial-gradient(120% 80% at 100% 0%, var(--ezy-green-50) 0%, transparent 60%),
		var(--ezy-surface);
}

.ezy-container--narrow-auth {
	max-width: 1080px;
}

.ezy-auth {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
	box-shadow: var(--ezy-shadow-md);
	overflow: hidden;
}

@media (min-width: 860px) {
	.ezy-auth { grid-template-columns: 0.85fr 1fr; }
}

/* --- Brand panel --------------------------------------------------------- */

.ezy-auth__panel {
	position: relative;
	padding: clamp(26px, 3.2vw, 44px);
	background: linear-gradient(150deg, var(--ezy-green-800) 0%, var(--ezy-green) 100%);
	color: #fff;
	isolation: isolate;
	overflow: hidden;
}

.ezy-auth__panel::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -80px;
	z-index: -1;
	width: 280px;
	height: 280px;
	border-radius: 50%;
	background: rgba(var(--ezy-yellow-rgb), 0.16);
}

.ezy-auth__panel::after {
	content: "";
	position: absolute;
	bottom: -110px;
	left: -70px;
	z-index: -1;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.07);
}

.ezy-auth__panel-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ezy-auth__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	padding: 5px 14px;
	margin-bottom: 16px;
	border-radius: var(--ezy-radius-pill);
	background: var(--ezy-yellow);
	color: var(--ezy-ink);
	font-size: var(--ezy-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ezy-auth__panel-title {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	line-height: 1.22;
}

.ezy-auth__panel-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: var(--ezy-text-md);
}

@media (max-width: 859px) {
	.ezy-auth__panel { padding-block: 26px; }
}

/* --- Form side ----------------------------------------------------------- */

.ezy-auth__main {
	padding: clamp(26px, 3.2vw, 48px);
	display: flex;
	flex-direction: column;
}

.ezy-auth__head { margin-bottom: 22px; }

.ezy-auth__title {
	margin: 0 0 6px;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.ezy-auth__sub {
	margin: 0;
	color: var(--ezy-muted);
	font-size: var(--ezy-text-md);
}

.ezy-auth__content {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--ezy-line);
	font-size: var(--ezy-text-base);
}

.ezy-auth__content > *:last-child { margin-bottom: 0; }

/* ==========================================================================
   2. FORM CONTROLS
   ========================================================================== */

.ezy-authform { display: grid; gap: 16px; }

.ezy-field { margin: 0; display: grid; gap: 6px; }

.ezy-field label {
	font-size: var(--ezy-text-sm);
	font-weight: 700;
	color: var(--ezy-ink);
}

.ezy-field__req { color: var(--ezy-danger); margin-left: 2px; }

.ezy-field__hint {
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
}

/* (0,2,1) — must out-specify style.css's input[type="..."] block at (0,1,1). */
.ezy-authform input.ezy-input {
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface);
	color: var(--ezy-ink);
	font-family: inherit;
	font-size: var(--ezy-text-md);
	line-height: 1.5;
	transition: border-color var(--ezy-transition), box-shadow var(--ezy-transition);
}

.ezy-authform input.ezy-input:focus {
	outline: none;
	border-color: var(--ezy-green);
	box-shadow: 0 0 0 3px rgba(var(--ezy-green-rgb), 0.16);
}

.ezy-authform input.ezy-input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 60px var(--ezy-green-50) inset;
}

/* Password reveal toggle */
.ezy-field__reveal { position: relative; display: block; }

.ezy-field__reveal input.ezy-input { padding-right: 52px; }

.ezy-reveal {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: inline-grid;
	place-items: center;
	border: 0;
	border-radius: var(--ezy-radius-sm);
	background: transparent;
	color: var(--ezy-muted);
	cursor: pointer;
	transition: background var(--ezy-transition), color var(--ezy-transition);
}

.ezy-reveal:hover { background: var(--ezy-green-50); color: var(--ezy-green-700); }
.ezy-reveal[aria-pressed="true"] { color: var(--ezy-green); }

/* Checkbox */
.ezy-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: var(--ezy-text-base);
	font-weight: 600;
	color: var(--ezy-body);
	cursor: pointer;
}

.ezy-check input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: 5px;
	background: var(--ezy-surface);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	position: relative;
	transition: background var(--ezy-transition), border-color var(--ezy-transition);
}

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

.ezy-check input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 5px;
	width: 4px;
	height: 9px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(42deg);
}

.ezy-auth__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: -2px 0 2px;
}

.ezy-auth__minor {
	font-size: var(--ezy-text-sm);
	font-weight: 700;
}

.ezy-auth__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border-radius: var(--ezy-radius);
	background: var(--ezy-yellow-50);
	border: 1px solid var(--ezy-yellow-300);
	color: var(--ezy-ink);
	font-size: var(--ezy-text-sm);
	font-weight: 600;
}

.ezy-auth__note svg { flex: none; margin-top: 2px; color: var(--ezy-yellow-700); }

.ezy-auth__fineprint {
	margin: -4px 0 0;
	font-size: var(--ezy-text-xs);
	color: var(--ezy-muted);
	text-align: center;
}

.ezy-auth__switch {
	margin: 22px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ezy-line);
	text-align: center;
	font-size: var(--ezy-text-base);
	color: var(--ezy-muted);
}

.ezy-auth__switch a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: 6px;
	font-weight: 800;
}

/* Notices sit above the form, inside the panel */
.ezy-auth__main .woocommerce-message,
.ezy-auth__main .woocommerce-info,
.ezy-auth__main .woocommerce-error {
	display: block;
	margin: 0 0 18px;
	padding: 13px 16px;
	border: 1px solid var(--ezy-green-100);
	border-left: 4px solid var(--ezy-green);
	border-radius: var(--ezy-radius);
	background: var(--ezy-green-50);
	color: var(--ezy-ink);
	font-size: var(--ezy-text-base);
	font-weight: 600;
	list-style: none;
}

.ezy-auth__main .woocommerce-error {
	border-color: #f3cdc9;
	border-left-color: var(--ezy-danger);
	background: var(--ezy-danger-bg);
	color: #7e2119;
}

.ezy-auth__main .woocommerce-info {
	border-color: var(--ezy-yellow-300);
	border-left-color: var(--ezy-yellow);
	background: var(--ezy-yellow-50);
}

.ezy-auth__main .woocommerce-error li,
.ezy-auth__main .woocommerce-message li,
.ezy-auth__main .woocommerce-info li { margin-left: 0; list-style: none; }

.ezy-auth__main .woocommerce-error a,
.ezy-auth__main .woocommerce-message a { font-weight: 800; }

/* ==========================================================================
   3. LOGGED-OUT MY-ACCOUNT CARD
   ========================================================================== */

.ezy-account-gate {
	max-width: 560px;
	margin-inline: auto;
	padding: clamp(26px, 3.2vw, 40px);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
	box-shadow: var(--ezy-shadow);
	text-align: center;
}

.ezy-account-gate__icon {
	width: 58px;
	height: 58px;
	margin: 0 auto 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--ezy-green-50);
	color: var(--ezy-green);
}

.ezy-account-gate h2 { margin: 0 0 8px; font-size: var(--ezy-text-2xl); }
.ezy-account-gate p { margin: 0 0 22px; color: var(--ezy-muted); }

.ezy-account-gate__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.ezy-account-gate__actions .ezy-btn { flex: 1 1 180px; }

/* ==========================================================================
   4. MY ACCOUNT DASHBOARD
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: grid;
	gap: clamp(20px, 3vw, 38px);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 900px) {
	.woocommerce-account .woocommerce { grid-template-columns: 254px minmax(0, 1fr); }
}

/* The login form is not a dashboard — never grid it. */
.woocommerce-account.woocommerce-page .woocommerce:has(.ezy-account-gate) {
	display: block;
}

/* WooCommerce's `woocommerce-layout.css` still lays the account dashboard out
   with floats: `MyAccount-navigation { float: left; width: 30% }` and
   `MyAccount-content { float: right; width: 68% }`. Those selectors are
   (0,2,0) — exactly the specificity of the theme rules below — and the theme
   never declared a width, so core's widths applied unopposed inside the grid.
   A percentage on a grid item resolves against its grid *area*, so the 254px
   nav track rendered at 30% of 254px ≈ 76px (roughly 48px of usable width
   once its 14px padding is removed) and the content sat at 68% of its own
   track with the remainder dead space. That is what broke every account
   endpoint at once — they all share this wrapper.

   `float` is inert on a grid item, but it is reset here for the
   `:has(.ezy-account-gate)` case above, where the wrapper falls back to
   `display: block` and floats would apply again. */
/* WooCommerce's float-era clearfix in woocommerce.css --
   `.woocommerce::after, .woocommerce-account .woocommerce::before
   { content: " "; display: table }` -- becomes two phantom GRID ITEMS here,
   because a pseudo-element with generated content participates in grid
   layout just like a real child.

   They claimed row 1 / column 1 and row 2 / column 2, pushing the nav into
   the 964px content track and dropping the content into the 254px sidebar
   track. That column swap is what actually broke every account endpoint --
   and it is easy to miss, because pseudo-elements never appear in
   `element.children`, so the grid looks like it holds only two items that
   are somehow placed backwards.

   The wrapper is a grid, so there are no floats left to clear. */
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after {
	content: none;
}

/* The dashboard renders as a direct child of `.ezy-block-canvas`, whose
   Gutenberg alignment rule (style.css §13) caps every child at the 780px
   reading measure and centres it. That measure is right for prose and wrong
   for an application layout: it squeezed the 254px sidebar and the orders
   table into under 500px of content inside a 1320px container, on every
   account endpoint at once.

   Cart and Checkout escape this already because their WooCommerce blocks
   carry `alignwide`; the account wrapper is a plain `<div class="woocommerce">`
   with no alignment class, so it falls through to the default. Opt it out
   explicitly. */
.woocommerce-account .ezy-entry__content > .woocommerce,
.woocommerce-account .ezy-block-canvas > .woocommerce {
	max-width: none;
	margin-inline: 0;
}

.woocommerce-account .woocommerce nav.woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce div.woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 14px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface-alt);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--ezy-radius-sm);
	color: var(--ezy-body);
	font-weight: 600;
	transition: background var(--ezy-transition), color var(--ezy-transition);
}

.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
	background: var(--ezy-green-50);
	color: var(--ezy-green-700);
}

.woocommerce-account .woocommerce-MyAccount-navigation .is-active a {
	background: var(--ezy-green);
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-content {
	min-width: 0;
	padding: clamp(20px, 2.6vw, 32px);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
}

.woocommerce-account .woocommerce-MyAccount-content > *:last-child { margin-bottom: 0; }

.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	font-size: var(--ezy-text-xl);
	margin-bottom: 14px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address {
	padding: 18px 20px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface-alt);
	margin-bottom: 16px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 {
	margin: 0;
	font-size: var(--ezy-text-lg);
}

.woocommerce-account .woocommerce-MyAccount-content table {
	font-size: var(--ezy-text-base);
}

.woocommerce-account .woocommerce-MyAccount-content table th {
	background: var(--ezy-surface-alt);
	color: var(--ezy-ink);
}

/* Account edit / address forms reuse the auth field styling. */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .form-row input.input-text,
.woocommerce-account .woocommerce-MyAccount-content .form-row select,
.woocommerce-EditAccountForm .form-row input.input-text {
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface);
	font-size: var(--ezy-text-base);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset {
	margin-top: 22px;
	padding: 18px 20px;
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius);
	background: var(--ezy-surface-alt);
}

.woocommerce-account .woocommerce-MyAccount-content fieldset legend {
	padding-inline: 8px;
	font-weight: 800;
	color: var(--ezy-ink);
}

/* Lost password screen */
.woocommerce-ResetPassword.lost_reset_password {
	max-width: 520px;
	margin-inline: auto;
	padding: clamp(22px, 2.8vw, 34px);
	border: 1px solid var(--ezy-line);
	border-radius: var(--ezy-radius-lg);
	background: var(--ezy-surface);
	box-shadow: var(--ezy-shadow-sm);
}

.woocommerce-ResetPassword .woocommerce-form-row { display: grid; gap: 6px; }

.woocommerce-ResetPassword input.input-text {
	height: 48px;
	padding: 0 16px;
	border: 1.5px solid var(--ezy-line-strong);
	border-radius: var(--ezy-radius);
	font-size: var(--ezy-text-md);
}