/*
 * My Account tap targets.
 *
 * Loaded on is_account_page() only. Presentation exclusively: no field, no
 * validation, no WooCommerce account logic and no page content is touched --
 * every rule here changes a size, never a behaviour.
 *
 * The forms WooCommerce renders in the account area size their controls from
 * padding and line-height alone, which lands them under the 44px touch target
 * on a phone: the Save changes button measured 39px, the password reveal
 * controls 15x16, the empty-state CTA 39px and every text input 40px. This file
 * raises the floors and nothing else.
 *
 * Scoping and specificity: every selector starts at .woocommerce-account
 * .woocommerce-MyAccount-content, which keeps these rules off the checkout,
 * the cart, the product page and the Grovidex address modal rendered outside
 * the account area -- and outranks WooCommerce's own (0,2,x) button and
 * show-password rules without a single !important.
 */

/* ---- Submit buttons ------------------------------------------------------ */

/*
 * "Save changes" is `padding: 12px 24px` over a 14.6px line box: 39px on a
 * phone, 46px on desktop where the line box is taller. A min-height floors the
 * short case without changing the tall one, so desktop proportions are
 * untouched. inline-flex keeps the label optically centred once the box is
 * taller than its text.
 */
.woocommerce-account .woocommerce-MyAccount-content form button.button,
.woocommerce-account .woocommerce-MyAccount-content form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}

/* ---- Password reveal ----------------------------------------------------- */

/*
 * WooCommerce positions this control absolutely inside the field and draws its
 * eye from the WooCommerce icon font on ::after. The glyph is left exactly as
 * it is -- only the box around it grows to a 44x44 target, with the icon
 * centred inside it. WooCommerce's own rule already sets `top: 50%` and
 * `translate: 0 -50%`, which still centres the taller box.
 */
.woocommerce-account .woocommerce-MyAccount-content form .show-password-input {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	right: 2px;
	padding: 0;
	background: none;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-content form .show-password-input:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
	border-radius: 6px;
}

/*
 * The field must reserve room for that control, or typed text runs underneath
 * it. Only password fields get the extra room; the other inputs keep their own
 * padding.
 */
.woocommerce-account .woocommerce-MyAccount-content .password-input input {
	padding-right: 48px;
}

/* ---- Text controls ------------------------------------------------------- */

/*
 * 40px comes from padding plus line-height; a min-height floors it at 44
 * without altering the padding, so the text keeps its position in the field and
 * nothing reflows.
 *
 * Scoped to the account content rather than to `form`: the Grovidex address
 * form is a <div>, not a <form>, so a `form` descendant selector reached the
 * Account Details fields and silently missed all nine on My Addresses. The
 * account-content scope still keeps this off the product page, where the same
 * address form is rendered inside the delivery modal -- that modal keeps the
 * sizing it was verified with.
 *
 * Textareas are deliberately absent: they are already multi-line.
 */
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content input[type="search"],
.woocommerce-account .woocommerce-MyAccount-content select {
	min-height: 44px;
}

/* ---- Empty-state calls to action ----------------------------------------- */

/*
 * "Browse products" on Downloads, on Payment methods and -- the case that
 * matters most -- on Orders for a customer who has not ordered yet. All three
 * come from wc_print_notice(), so one rule covers them; the zero-order variant
 * carries `woocommerce-Button wc-forward button` and is matched by `a.button`
 * exactly like the other two.
 */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
}