/* ==========================================================================
   Azan Baby Care - final QA pass, 2026-09-12
   Checkout, product page and product card details. Everything here is scoped
   to a WooCommerce class or a class this pass added to a specific element.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

/* Inline validation message under a field. The server side rule still decides. */
.azan-field-error {
	display: block;
	margin: 6px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
	color: #B32C1C;
}

.woocommerce form .form-row input.input-text[aria-invalid="true"] {
	border-color: #B32C1C;
	box-shadow: 0 0 0 1px #B32C1C;
}

/* Place Order has to read as the primary action on the page. */
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
	display: block;
	width: 100%;
	margin-top: 18px;
	padding: 17px 28px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;
	color: #FFFFFF;
	background-color: var(--azan-accent, #F7941E);
	border: 2px solid var(--azan-accent-dark, #E07E08);
	border-radius: var(--azan-radius-pill, 999px);
	box-shadow: 0 8px 20px rgba(224, 126, 8, 0.22);
}

.woocommerce #payment #place_order:hover,
.woocommerce-checkout #payment #place_order:hover {
	background-color: var(--azan-accent-dark, #E07E08);
	border-color: var(--azan-accent-dark, #E07E08);
}

/* The order summary stays readable next to the form. */
.woocommerce-checkout #order_review {
	background: var(--azan-surface, #FFF7EE);
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-md, 16px);
	padding: 20px;
}

.woocommerce-checkout #order_review table.shop_table {
	background: #FFFFFF;
}

.woocommerce-checkout #order_review_heading {
	margin-top: 34px;
}

/* One column on phones so nothing is squeezed. */
@media (max-width: 767px) {
	.woocommerce-checkout #order_review {
		padding: 16px;
	}

	.woocommerce #payment #place_order,
	.woocommerce-checkout #payment #place_order {
		font-size: 16px;
		padding: 16px 20px;
	}
}

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

.azan-delivery-note {
	list-style: none;
	margin: 18px 0 0;
	padding: 14px 16px;
	background: var(--azan-surface, #FFF7EE);
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-sm, 8px);
	font-size: 14px;
	line-height: 1.6;
	color: var(--azan-ink, #123A56);
}

.azan-delivery-note li + li {
	margin-top: 4px;
}

.azan-delivery-note .amount {
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Age group filter
   -------------------------------------------------------------------------- */

.azan-age-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 26px;
	padding: 14px 16px;
	background: var(--azan-surface, #FFF7EE);
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-md, 16px);
}

.azan-age-filter__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--azan-muted, #5F7C8E);
	flex: none;
}

.azan-age-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.azan-age-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--azan-line, #EBE4DC);
	border-radius: var(--azan-radius-pill, 999px);
	background: #FFFFFF;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--azan-ink, #123A56);
	text-decoration: none;
	white-space: nowrap;
}

.azan-age-filter__chip:hover {
	border-color: var(--azan-accent, #F7941E);
	color: var(--azan-accent-dark, #E07E08);
}

.azan-age-filter__chip.is-active {
	background: var(--azan-accent, #F7941E);
	border-color: var(--azan-accent, #F7941E);
	color: #FFFFFF;
}

.azan-age-filter__count {
	font-size: 11.5px;
	font-weight: 700;
	opacity: 0.65;
	font-variant-numeric: tabular-nums;
}

.azan-age-filter__chip:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}

@media (max-width: 480px) {
	.azan-age-filter {
		padding: 12px;
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   Product cards
   -------------------------------------------------------------------------- */

/* A product with no approved category keeps the card rhythm but prints no label. */
.azan-card__cat--empty {
	display: block;
	min-height: 1em;
	margin-bottom: 4px;
}

/* Images are declared at their real ratio, so the card never reflows on load. */
.woocommerce ul.products li.product .azan-card__media img {
	display: block;
}

/* --------------------------------------------------------------------------
   Keyboard focus stays visible on every control this pass touched.
   -------------------------------------------------------------------------- */

.azan-icon-account a:focus-visible,
.azan-icon-cart a:focus-visible,
.azan-search input:focus-visible,
.azan-search button:focus-visible,
.elementor-social-icon:focus-visible,
.azan-fab__btn:focus-visible,
.azan-card__btn:focus-visible,
.woocommerce #payment #place_order:focus-visible {
	outline: 3px solid var(--azan-sky, #4FC3EE);
	outline-offset: 2px;
}