/**
 * Zion child theme - UX fixes (local optimisation work).
 *
 * Scope is deliberately narrow: contrast/legibility on forms and checkout, and
 * prominence of the primary purchase actions. No layout is restructured, no
 * colour of the brand palette is changed, and nothing here alters cart,
 * checkout or payment behaviour.
 *
 * Contrast targets follow WCAG 2.1 AA (4.5:1 for body text, 3:1 for UI
 * boundaries). The theme previously set no placeholder colour at all, so
 * placeholders fell back to the browser default (~#a9a9a9, ≈2.5:1 on white).
 */

/* =========================================================================
   1. Form field legibility - checkout, cart, account, and general forms
   ========================================================================= */

.woocommerce form .form-row label,
.woocommerce-checkout .form-row label,
.woocommerce-account .form-row label,
.woocommerce form .woocommerce-form__label,
.wc-block-components-text-input label {
	color: #1a1a1a;          /* 15.9:1 on white */
	font-weight: 600;
	opacity: 1;
}

/* Required-field marker needs to be perceivable, not just red-on-white */
.woocommerce form .form-row .required,
.woocommerce-checkout .required {
	color: #b3261e;          /* 5.9:1 on white */
	font-weight: 700;
	text-decoration: none;
	border: 0;
}

/* Input text itself */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input.input-text,
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce .woocommerce-Input,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.wc-block-components-text-input input {
	color: #1a1a1a;
	background-color: #fff;
	border: 1px solid #767676;   /* 3.1:1 against white - visible boundary */
	border-radius: 4px;
}

/* Placeholders: the original omission. #595959 is ≈7:1 on white. */
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder,
.woocommerce-checkout input.input-text::placeholder,
.woocommerce-checkout textarea::placeholder,
.woocommerce .woocommerce-Input::placeholder,
.wc-block-components-text-input input::placeholder,
input::placeholder,
textarea::placeholder {
	color: #595959;
	opacity: 1;              /* Firefox dims placeholders by default */
}

/* Keyboard focus must be obvious and must not rely on colour alone */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce .woocommerce-Input:focus,
.wc-block-components-text-input input:focus {
	outline: 2px solid #1a1a1a;
	outline-offset: 1px;
	border-color: #1a1a1a;
	box-shadow: none;
}

/* Select2 (WooCommerce country/state pickers) parity with native fields */
.select2-container--default .select2-selection--single {
	border: 1px solid #767676;
	border-radius: 4px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: #595959;
}

/* =========================================================================
   2. Checkout readability - order review, totals, notices
   ========================================================================= */

.woocommerce-checkout .shop_table,
.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td,
.woocommerce-checkout #order_review,
.woocommerce-checkout .cart-subtotal,
.woocommerce-checkout .order-total {
	color: #1a1a1a;
}

.woocommerce-checkout .shop_table th,
.woocommerce-checkout .order-total th,
.woocommerce-checkout .order-total td {
	font-weight: 700;
}

/* Payment method labels sit on a tinted panel in this theme */
.woocommerce-checkout #payment .payment_methods li label,
.woocommerce-checkout #payment .payment_box,
.woocommerce-checkout #payment .payment_box p {
	color: #1a1a1a;
}

/* Notices: keep the theme's shapes, raise the text contrast */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
	color: #1a1a1a;
}

/* Small print / descriptions that were rendered in a very light grey */
.woocommerce-checkout .woocommerce-privacy-policy-text,
.woocommerce-checkout .form-row .description,
.woocommerce form .form-row .description {
	color: #4a4a4a;          /* 9.0:1 on white */
}

/* =========================================================================
   2b. WooCommerce Blocks cart & checkout

   This store's /cart/ and /checkout/ are the BLOCK versions, not the classic
   shortcodes - the fields are rendered client-side by React, so none of the
   classic .form-row selectors above ever match them. These are the block
   component classes, which is where the contrast problem actually lives.

   Blocks uses a floating label that sits inside the field, so label contrast
   matters as much as the input text itself.
   ========================================================================= */

/* Field wrappers and the inputs inside them */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-textarea,
.wc-block-components-select .wc-block-components-select__select,
.wc-block-components-combobox .wc-block-components-combobox-control input {
	color: #1a1a1a;
	background-color: #fff;
	border: 1px solid #767676;
	border-radius: 4px;
}

/* Floating labels - these were the lightest text on the page */
.wc-block-components-text-input label,
.wc-block-components-select label,
.wc-block-components-combobox label,
.wc-block-components-checkout-step__heading,
.wc-block-components-title,
.wc-block-components-address-form label {
	color: #4a4a4a;
	opacity: 1;
}

/* When the label floats up it shrinks - keep it readable at the smaller size */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:focus + label {
	color: #1a1a1a;
	font-weight: 600;
}

/* Focus state must be obvious */
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus,
.wc-block-components-combobox-control input:focus {
	outline: 2px solid #1a1a1a;
	outline-offset: 1px;
	border-color: #1a1a1a;
	box-shadow: none;
}

/* Checkboxes (ship-to-different-address, terms, marketing opt-in) */
.wc-block-components-checkbox .wc-block-components-checkbox__label,
.wc-block-components-checkbox__label {
	color: #1a1a1a;
}

/* Order summary / totals */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__description,
.wc-block-components-product-name,
.wc-block-components-product-metadata,
.wc-block-components-totals-footer-item {
	color: #1a1a1a;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
}

/* Validation errors must be legible, not just red */
.wc-block-components-validation-error,
.wc-block-components-validation-error p {
	color: #b3261e;
	font-weight: 600;
}

/* Place-order button: the single most important control on the site */
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link) {
	min-height: 54px;
	font-size: 17px;
	font-weight: 700;
	border-radius: 6px;
}

.wc-block-components-checkout-place-order-button:focus-visible,
.wc-block-cart__submit-button:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

/* Blocks fields on mobile: 16px stops iOS zooming, 48px is the tap target */
@media (max-width: 767px) {
	.wc-block-components-text-input input,
	.wc-block-components-textarea,
	.wc-block-components-select .wc-block-components-select__select,
	.wc-block-components-combobox .wc-block-components-combobox-control input {
		font-size: 16px;
		min-height: 48px;
	}

	.wc-block-components-checkout-place-order-button,
	.wc-block-cart__submit-button {
		width: 100%;
		min-height: 54px;
	}
}

/* =========================================================================
   3. Primary purchase actions - Add to Cart / Buy Now
   Prominence + reliable 48px tap targets, without changing brand colours.
   ========================================================================= */

.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product .buy-now-button,
.woocommerce div.product .buy_now_button,
.ecomus-buy-now,
.single_add_to_cart_button {
	min-height: 52px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: 6px;
	line-height: 1.2;
}

/* Add to Cart: solid, high-contrast (theme's button palette is #000 on #fff) */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.single_add_to_cart_button {
	background-color: #000;
	color: #fff;
	border: 2px solid #000;
}
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover,
.single_add_to_cart_button:hover {
	background-color: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
}

/* Buy Now: visually distinct from Add to Cart so the two read as a pair */
.woocommerce div.product .buy-now-button,
.woocommerce div.product .buy_now_button,
.ecomus-buy-now {
	background-color: #DB1215;   /* existing brand accent */
	color: #fff;
	border: 2px solid #DB1215;
}
.woocommerce div.product .buy-now-button:hover,
.woocommerce div.product .buy_now_button:hover,
.ecomus-buy-now:hover {
	background-color: #b30f11;
	border-color: #b30f11;
	color: #fff;
}

/* Focus ring for keyboard users on the primary actions */
.single_add_to_cart_button:focus-visible,
.buy-now-button:focus-visible,
.ecomus-buy-now:focus-visible,
#place_order:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

/* Place-order button on checkout */
.woocommerce-checkout #place_order {
	min-height: 54px;
	font-size: 17px;
	font-weight: 700;
	border-radius: 6px;
}

/* =========================================================================
   4. Mobile - the majority of paid traffic
   ========================================================================= */

@media (max-width: 767px) {

	/* Full-width primary actions with comfortable tap targets */
	.woocommerce div.product form.cart .button.single_add_to_cart_button,
	.woocommerce div.product .buy-now-button,
	.woocommerce div.product .buy_now_button,
	.ecomus-buy-now,
	.woocommerce-checkout #place_order {
		width: 100%;
		min-height: 54px;
		font-size: 17px;
	}

	/* Stack the two actions with clear separation instead of cramming them */
	.woocommerce div.product form.cart .button.single_add_to_cart_button {
		margin-bottom: 10px;
	}

	/* 16px minimum prevents iOS Safari zooming the page on field focus */
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select,
	.woocommerce-checkout input.input-text,
	.woocommerce-checkout select,
	.woocommerce .woocommerce-Input {
		font-size: 16px;
		min-height: 48px;
		padding: 12px 14px;
	}

	/* Quantity stepper is a touch target too */
	.woocommerce div.product form.cart .quantity input.qty {
		min-height: 48px;
		font-size: 16px;
	}
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
	.single_add_to_cart_button,
	.buy-now-button,
	.ecomus-buy-now,
	#place_order {
		transition: none;
	}
}