/**
 * WooCommerce – shared layer, loaded on every WooCommerce context only (see
 * inc/woocommerce.php): WooCommerce colour variables mapped to the brand,
 * breadcrumbs, notice banners, prices, order status badges, classic forms
 * (My Account, order-pay, e-mail verification) and classic notices.
 * The Cart/Checkout block form controls live in checkout.css.
 *
 * Brand: dark surfaces, one accent (gold), no shadows (hairline borders),
 * fields #333 r15, gold focus ring, errors #FE7762 always with icon + text.
 * Overrides match or exceed WooCommerce's specificity and load after
 * WooCommerce's styles, so equal specificity is enough.
 */

:root {
	/* Field height of the brief (~56 px); everything else comes from aliases. */
	--woo-field-height: 3.5rem;
	--woo-field-radius: var(--radius-md);
	--woo-field-bg: var(--color-input);
	--woo-field-border: var(--color-border-strong);
	--woo-control-border: var(--color-text-muted);
	--woo-focus-ring: var(--focus-width) solid var(--color-gold);
	--woo-focus-offset: 2px;
	--woo-icon-size: 1.25rem;

	/*
	 * WooCommerce's classic stylesheets (My Account, order endpoints, product
	 * forms) read these from :root; this file loads after them.
	 */
	--woocommerce: var(--color-gold-strong);
	--wc-primary: var(--color-gold-strong);
	--wc-primary-text: var(--color-light);
	--wc-secondary: var(--color-surface);
	--wc-secondary-text: var(--color-text);
	--wc-highlight: var(--color-gold-strong);
	--wc-highligh-text: var(--color-light);
	--wc-content-bg: var(--color-background);
	--wc-subtext: var(--color-text-muted);
	--wc-red: var(--color-error);
	--wc-destructive: var(--color-error);
	--wc-green: var(--color-border-strong); /* only the "validated" field border */
	--wc-orange: var(--color-gold);
	--wc-blue: var(--color-gold);
	--wc-form-border-color: var(--woo-field-border);
	--wc-form-border-radius: var(--woo-field-radius);
	--wc-form-border-width: 1px;
	--wc-form-color-background: var(--woo-field-bg);
	--wc-form-color-text: var(--color-text);
	--wc-card-border-radius: var(--radius-sm);
	--wc-separator-color: var(--color-border);
}

/* Native parts of form controls (select arrow, date picker, scrollbars) in dark. */
:where(.woocommerce-page, .dubianna-woo) :is(input, select, textarea) {
	color-scheme: dark;
}

/* -------------------------------------------------------------------------
 * Breadcrumbs (woocommerce/breadcrumbs): Kezdőlap › Programok › current
 * ---------------------------------------------------------------------- */

.dubianna-woo .wc-block-breadcrumbs {
	margin-block-end: var(--space-md);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.5;
}

.dubianna-woo .dubianna-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2xs) var(--space-xs);
}

.dubianna-woo .dubianna-breadcrumb a {
	color: var(--color-text-subtle);
	text-decoration: underline;
	text-decoration-color: var(--color-border-strong);
	text-underline-offset: 0.25em;
}

.dubianna-woo .dubianna-breadcrumb a:hover {
	color: var(--color-gold);
	text-decoration-color: currentColor;
}

.dubianna-breadcrumb__sep {
	inline-size: 0.375rem;
	block-size: 0.375rem;
	border-block-start: 1px solid var(--color-gold);
	border-inline-end: 1px solid var(--color-gold);
	transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
 * Notices (block notice banners – also used for PHP notices in block themes)
 * Icon and text always; the colour only reinforces the type.
 * ---------------------------------------------------------------------- */

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner,
.wc-block-components-notice-banner.dubianna-checkout-notice {
	gap: var(--space-sm);
	margin-block: var(--space-sm);
	padding: var(--space-sm) var(--space-md) !important; /* WooCommerce sets padding with !important. */
	border: 1px solid var(--color-border-strong);
	border-inline-start-width: 3px;
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: 1.55;
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner.dubianna-checkout-notice > svg {
	flex: 0 0 auto;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	padding: 0;
	border-radius: 0;
	background: none;
	fill: var(--color-text-subtle);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-success {
	border-color: var(--color-gold-line);
	border-inline-start-color: var(--color-gold);
	background-color: var(--color-surface);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-success > svg {
	background: none;
	fill: var(--color-gold);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-info.dubianna-checkout-notice {
	border-color: var(--color-border-strong);
	border-inline-start-color: var(--color-gold);
	background-color: var(--color-surface);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-info > svg,
.wc-block-components-notice-banner.is-info.dubianna-checkout-notice > svg {
	background: none;
	fill: var(--color-gold);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-warning {
	border-color: var(--color-gold-line);
	border-inline-start-color: var(--color-gold);
	background-color: var(--color-surface);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-warning > svg {
	background: none;
	fill: var(--color-gold);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-error {
	border-color: var(--color-error);
	background-color: var(--color-surface);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner.is-error > svg {
	background: none;
	fill: var(--color-error);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner > .wc-block-components-notice-banner__content {
	align-self: center;
	padding-inline-end: 0;
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner__content :is(p, ul, ol) {
	margin-block: 0;
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner__content p + p {
	margin-block-start: var(--space-2xs);
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner__content a,
.dubianna-checkout-notice a {
	color: var(--color-gold);
	font-weight: 600;
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward {
	color: var(--color-gold) !important; /* WooCommerce sets it with !important. */
	opacity: 1;
}

/* Dismiss (×) button of block notices: visible focus, enough contrast. */
:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner > .wc-block-components-button {
	color: var(--color-text) !important; /* WooCommerce sets it with !important. */
	opacity: 0.8;
}

:is(.dubianna-woo, .woocommerce) .wc-block-components-notice-banner > .wc-block-components-button:focus-visible {
	outline: var(--woo-focus-ring) !important; /* WooCommerce sets it with !important. */
	outline-offset: var(--woo-focus-offset);
	opacity: 1;
}

/* -------------------------------------------------------------------------
 * Prices
 * ---------------------------------------------------------------------- */

.dubianna-woo :is(.wc-block-components-product-price, .price) {
	color: var(--color-text);
	font-weight: 700;
}

.dubianna-woo :is(.wc-block-components-product-price, .price) del {
	color: var(--color-text-muted);
	font-weight: 400;
}

.dubianna-woo :is(.wc-block-components-product-price, .price) ins {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Order status badge (My Account order list; the text label is always set)
 * ---------------------------------------------------------------------- */

.dubianna-order-status {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.25em 0.75em;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-lg);
	color: var(--color-text);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.dubianna-order-status::before {
	content: "";
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	background: var(--color-text-muted);
}

.dubianna-order-status--completed {
	border-color: var(--color-gold);
	color: var(--color-gold);
}

.dubianna-order-status--completed::before {
	background: var(--color-gold);
}

.dubianna-order-status--processing::before {
	background: var(--color-text);
}

.dubianna-order-status--on-hold,
.dubianna-order-status--pending,
.dubianna-order-status--checkout-draft {
	color: var(--color-text-subtle);
}

.dubianna-order-status--cancelled,
.dubianna-order-status--failed {
	border-color: var(--color-error);
	color: var(--color-error);
}

.dubianna-order-status--cancelled::before,
.dubianna-order-status--failed::before {
	background: var(--color-error);
}

.dubianna-order-status--refunded {
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
 * Classic forms (My Account, lost password, order-pay): same field look as
 * the block checkout. 16 px text keeps iOS from zooming into the field.
 * WooCommerce's block-theme sheet sets (0,3,2); equal specificity, later.
 * ---------------------------------------------------------------------- */

.woocommerce-page form .form-row label,
.woocommerce-page form .woocommerce-form-row label {
	margin-block-end: var(--space-2xs);
	color: var(--color-text-subtle);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.5;
}

.woocommerce-page form .form-row :is(input.input-text, select, textarea.input-text) {
	min-block-size: var(--woo-field-height);
	padding: 0.75rem 1rem;
	border: 1px solid var(--woo-field-border);
	border-radius: var(--woo-field-radius);
	background-color: var(--woo-field-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.5;
	transition: border-color var(--duration-fast) var(--ease);
}

.woocommerce-page form .form-row :is(input.input-text, select, textarea.input-text):hover {
	border-color: var(--woo-control-border);
}

.woocommerce-page form .form-row :is(input.input-text, select, textarea.input-text):focus {
	border-color: var(--color-gold);
	outline: var(--woo-focus-ring);
	outline-offset: var(--woo-focus-offset);
}

/* WooCommerce draws the select arrow as a black image; use the native one (dark). */
.woocommerce-page form .form-row select {
	appearance: auto;
	background-image: none;
}

.woocommerce-page form .form-row.woocommerce-invalid :is(input.input-text, select) {
	border-color: var(--color-error);
}

.woocommerce-page form .form-row.woocommerce-invalid label {
	color: var(--color-error);
}

.woocommerce-page form .form-row .optional {
	color: var(--color-text-muted);
	font-weight: 400;
}

.woocommerce-page form :is(.form-row, .woocommerce-form-row) .description,
.woocommerce-page form :is(.form-row, .woocommerce-form-row) em {
	display: block;
	margin-block-start: var(--space-2xs);
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	font-style: normal;
}

.woocommerce-page form input[type="checkbox"] {
	inline-size: 1.25rem;
	block-size: 1.25rem;
	accent-color: var(--color-gold-strong);
}

.woocommerce-page form input[type="checkbox"]:focus-visible {
	outline: var(--woo-focus-ring);
	outline-offset: var(--woo-focus-offset);
}

.woocommerce-page form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	color: var(--color-text);
	font-weight: 400;
	cursor: pointer;
}

.woocommerce-page form fieldset {
	margin: var(--space-lg) 0 0;
	padding: var(--space-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.woocommerce-page form fieldset legend {
	padding-inline: var(--space-2xs);
	color: var(--color-text);
	font-weight: 700;
}

/* Password field: WooCommerce's show/hide toggle sits inside the field. */
.woocommerce-page form .password-input {
	display: block;
}

.woocommerce-page form .show-password-input {
	inset-block-start: 50%;
	inset-inline-end: 0.75rem;
	transform: translateY(-50%);
	color: var(--color-text-subtle);
}

.woocommerce-page form .show-password-input:focus-visible {
	outline: var(--woo-focus-ring);
	outline-offset: var(--woo-focus-offset);
}

/* Classic buttons carry .wp-element-button (theme.json primary button). */
.woocommerce-page :is(a, button, input).button.wp-element-button:focus-visible {
	outline: var(--woo-focus-ring);
	outline-offset: var(--woo-focus-offset);
}

/* -------------------------------------------------------------------------
 * Classic notices (fallback: block themes normally get the banner markup)
 * ---------------------------------------------------------------------- */

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	margin-block: var(--space-sm);
	padding: var(--space-sm) var(--space-md) var(--space-sm) 3.25rem;
	border: 1px solid var(--color-border-strong);
	border-inline-start: 3px solid var(--color-gold);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	color: var(--color-text);
	font-size: var(--fs-small);
	line-height: 1.55;
}

:is(.woocommerce-message, .woocommerce-info)::before {
	inset-block-start: var(--space-sm);
	inset-inline-start: var(--space-md);
	color: var(--color-gold);
}

.woocommerce-error {
	border-color: var(--color-error);
}

.woocommerce-error::before {
	inset-block-start: var(--space-sm);
	inset-inline-start: var(--space-md);
	color: var(--color-error);
}

:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
	color: var(--color-gold);
	font-weight: 600;
}