/*
 * Fields, selects, checkboxes and buttons of the shop, as the site's atoms: components/ui/input.module.css
 * (40-44px, subtle line, 4px radius, gold focus) and button.module.css (black primary, white secondary,
 * press squeeze). The --sem-* tokens come with the site chrome CSS (studio-balans-shop/site-chrome.php).
 */

/* Text fields: classic forms (account, login, coupon), block checkout and cart, search. */
.woocommerce form .input-text,
.woocommerce-Input,
.woocommerce form input[type="text"],
.woocommerce form input[type="email"],
.woocommerce form input[type="password"],
.woocommerce form input[type="tel"],
.woocommerce form textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox .components-combobox-control input,
.wp-block-search__input,
.wc-block-components-totals-coupon__input input {
	box-sizing: border-box;
	min-height: var(--size-control-lg);
	padding: 0 12px;
	border: 1px solid var(--sem-color-border-subtle);
	border-radius: var(--radius-md);
	background: var(--sem-color-surface-default);
	box-shadow: none;
	color: var(--sem-color-text-default);
	font-family: var(--font-body);
	font-size: var(--sem-type-body-md-size);
	line-height: var(--sem-type-line-body);
	transition: border-color var(--sem-motion-duration-fast) var(--sem-motion-ease-standard), box-shadow var(--sem-motion-duration-fast) var(--sem-motion-ease-standard);
}
.woocommerce form textarea,
.wc-block-components-textarea { padding-top: 10px; padding-bottom: 10px; }

/* Selects: sorting, country, quantity-like dropdowns. Native control, the site's chevron. */
.woocommerce-ordering select.orderby,
.woocommerce form select,
.wc-blocks-components-select__select,
.wc-block-product-sort-select__select {
	box-sizing: border-box;
	min-height: var(--size-control-md);
	padding: 0 40px 0 12px;
	border: 1px solid var(--sem-color-border-subtle);
	border-radius: var(--radius-md);
	background: var(--sem-color-surface-default) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
	color: var(--sem-color-text-strong);
	font-family: var(--font-body);
	font-size: var(--sem-type-body-md-size);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
/* Block selects draw their own chevron: keep one. */
.wc-blocks-components-select__select { background-image: none; }

/* Hover and the site's gold field focus. */
.woocommerce form .input-text:hover,
.woocommerce-Input:hover,
.wc-block-components-text-input input:hover,
.wp-block-search__input:hover,
.woocommerce-ordering select.orderby:hover,
.woocommerce form select:hover,
.wc-blocks-components-select__select:hover { border-color: var(--sem-color-border-default); }

.woocommerce form .input-text:focus-visible,
.woocommerce-Input:focus-visible,
.woocommerce form input:focus-visible,
.woocommerce form textarea:focus-visible,
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-combobox .components-combobox-control input:focus,
.wp-block-search__input:focus,
.woocommerce-ordering select.orderby:focus-visible,
.woocommerce form select:focus-visible,
.wc-blocks-components-select__select:focus {
	outline: none;
	border-color: var(--sem-focus-field-border);
	box-shadow: var(--sem-focus-field-ring);
}

/* Labels and required marks as in form-field.module.css. */
.woocommerce form .form-row label,
.woocommerce form label { color: var(--sem-color-text-strong); font-size: var(--sem-type-body-md-size); }
.woocommerce form .required { color: var(--sem-color-feedback-error); text-decoration: none; }

/* Checkboxes: native, brand accent. */
.woocommerce form input[type="checkbox"],
.woocommerce-form__input-checkbox {
	width: 18px;
	height: 18px;
	margin: 0 8px 0 0;
	vertical-align: -3px;
	accent-color: var(--sem-color-text-strong);
}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] { border-color: var(--sem-color-border-subtle); border-radius: 3px; }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--sem-color-action-primary-bg); border-color: var(--sem-color-action-primary-bg); }
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--sem-color-action-primary-fg); }
/* "Załóż mi konto" is ticked by default (assets/js/checkout.js), so the "buying as a guest" line would contradict it. */
.wc-block-checkout__guest-checkout-notice { display: none; }
/* Contact step: e-mail, "Załóż mi konto", the marketing opt-in, then the company invoice (checkout.php). */
#contact-fields .wc-block-components-address-form { display: flex; flex-direction: column; gap: 14px; }
#contact-fields .wc-block-components-address-form > * { margin: 0 !important; }
#contact-fields .wc-block-checkout__create-account { order: 1; margin-top: 4px !important; }
#contact-fields .wc-block-components-address-form__studio-balans-marketing { order: 2; }
#contact-fields .wc-block-components-address-form__studio-balans-invoice,
#contact-fields .wc-block-components-address-form__studio-balans-company,
#contact-fields .wc-block-components-address-form__studio-balans-nip { order: 3; }
.wc-block-components-radio-control__input:checked { border-color: var(--sem-color-action-primary-bg); }
.wc-block-components-radio-control__input:checked::before { background: var(--sem-color-action-primary-bg); }

/* Quantity: field with − / + like the cart block. */
.quantity input.qty,
.wc-block-components-quantity-selector { border-radius: var(--radius-md); border-color: var(--sem-color-border-subtle); }
.quantity input.qty {
	box-sizing: border-box;
	width: 64px;
	min-height: var(--size-control-lg);
	border: 1px solid var(--sem-color-border-subtle);
	font-size: var(--sem-type-body-md-size);
	text-align: center;
}

/* Buttons: the site's primary (black plate) for actions, the secondary (white, grey line) for the rest. */
.wp-element-button,
.woocommerce .button,
.woocommerce button.button,
.wc-block-components-button:not(.is-link),
.wc-block-order-confirmation-status__actions .button,
#payu-payment-status .button,
.sb-account__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--size-control-lg);
	padding: 0 20px;
	border: 0;
	border-radius: var(--radius-md);
	background: var(--sem-color-action-primary-bg);
	color: var(--sem-color-action-primary-fg);
	font-family: var(--font-heading);
	font-size: var(--sem-type-button-md-size);
	font-weight: var(--sem-type-weight-regular);
	line-height: var(--sem-type-line-button);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--sem-motion-duration-fast) var(--sem-motion-ease-default), transform var(--sem-motion-duration-fast) var(--sem-motion-ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.wp-element-button:hover,
	.woocommerce .button:hover,
	.woocommerce button.button:hover,
	.wc-block-components-button:not(.is-link):hover,
	.wc-block-order-confirmation-status__actions .button:hover,
	#payu-payment-status .button:hover,
	.sb-account__submit:hover { background: var(--sem-color-action-primary-bg-hover); color: var(--sem-color-action-primary-fg); }
}
.wp-element-button:active,
.woocommerce .button:active,
.wc-block-components-button:not(.is-link):active,
.wc-block-order-confirmation-status__actions .button:active,
#payu-payment-status .button:active,
.sb-account__submit:active { transform: scale(var(--sem-motion-press-scale)); }
.wp-element-button:focus-visible,
.woocommerce .button:focus-visible,
.wc-block-components-button:not(.is-link):focus-visible { outline: none; box-shadow: var(--sem-focus-ring); }

.sb-account__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--size-control-lg);
	padding: 0 20px;
	border: 1px solid var(--sem-color-button-secondary-border);
	border-radius: var(--radius-md);
	background: var(--sem-color-button-secondary-bg);
	color: var(--sem-color-text-strong);
	font-family: var(--font-heading);
	font-size: var(--sem-type-button-md-size);
	text-decoration: none;
}
.sb-account__secondary:hover { border-color: var(--sem-color-button-secondary-border-hover); background: var(--sem-color-button-secondary-hover); color: var(--sem-color-text-strong); }

/* Login and registration (woocommerce/myaccount/form-login.php): one narrow card, two stacked actions. */
.sb-account { max-width: 420px; margin: 0 auto; }
.sb-account__panel { padding: 36px; border: 1px solid var(--sem-color-border-default); border-radius: 12px; background: var(--sem-color-surface-default); box-shadow: var(--sem-elevation-card-md, 0 8px 24px rgba(10, 10, 10, 0.06)); }
.sb-account__title { margin: 0 0 24px; font-size: 28px !important; }
.sb-account__note { margin: 0 0 24px; color: var(--sem-color-text-muted); }
.sb-account__benefits { margin: 0 0 24px; padding-left: 20px; color: var(--sem-color-text-default); }
.sb-account .form-row { margin: 0 0 16px; }
.sb-account label { display: block; margin-bottom: 6px; }
.sb-account__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sb-account .sb-account__row label.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; line-height: 20px; }
.sb-account__row .woocommerce-form-login__rememberme input { margin: 0; vertical-align: middle; }
.sb-account__link { color: var(--sem-color-text-default); font-size: 14px; line-height: 20px; }
.sb-account__submit { width: 100%; }
.sb-account__or { margin: 20px 0 12px; color: var(--sem-color-text-muted); font-size: 14px; text-align: center; }
.sb-account__secondary { width: 100%; }
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register { margin: 0; padding: 0; border: 0; }

@media (max-width: 767px) {
	.sb-account__panel { padding: 24px 20px; }
}
.woocommerce-account:not(.logged-in) h1.wp-block-post-title { text-align: center; }

/*
 * InPost "Wybierz punkt odbioru" (inpost-for-woocommerce: .easypack_show_geowidget, yellow, centred, 19px,
 * shadow — all !important in the plugin's front.css). Here: the site's secondary button, left under the
 * shipping options; the doubled class outranks the plugin's rules.
 */
.easypack_show_geowidget.easypack_show_geowidget {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: auto;
	max-width: none;
	min-height: var(--size-control-lg);
	margin: 12px 0 20px !important;
	padding: 0 20px !important;
	border: 1px solid var(--sem-color-button-secondary-border) !important;
	border-radius: var(--radius-md) !important;
	background: var(--sem-color-button-secondary-bg) !important;
	box-shadow: none !important;
	color: var(--sem-color-text-strong) !important;
	font-family: var(--font-heading);
	font-size: var(--sem-type-button-md-size) !important;
	font-weight: var(--sem-type-weight-regular);
	line-height: var(--sem-type-line-button) !important;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--sem-motion-duration-fast) var(--sem-motion-ease-default), transform var(--sem-motion-duration-fast) var(--sem-motion-ease-out);
}
.easypack_show_geowidget.easypack_show_geowidget::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.5A7 7 0 0 1 19 9.5C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
	.easypack_show_geowidget.easypack_show_geowidget:hover {
		border-color: var(--sem-color-button-secondary-border-hover) !important;
		background: var(--sem-color-button-secondary-hover) !important;
	}
}
.easypack_show_geowidget.easypack_show_geowidget:active { transform: scale(var(--sem-motion-press-scale)); }
.easypack_show_geowidget.easypack_show_geowidget:focus-visible { outline: none; box-shadow: var(--sem-focus-ring) !important; }

/*
 * Alerts — the site's components/ui/alert look: tinted box, 1px line and icon in the tone's colour, dark
 * medium text. `.sb-alert` for our own notices; WooCommerce's notice banners (cart, checkout errors such as
 * a refused order) get the same look. Fallback colours match app/tokens until the chrome CSS carries them.
 */
.sb-alert,
.wc-block-components-notice-banner.wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border: 1px solid currentColor;
	border-radius: var(--radius-md);
	box-shadow: none;
	color: var(--sem-color-feedback-info, #4553d8);
	background: var(--sem-color-feedback-info-bg, #e8edff);
}
.sb-alert__icon,
.wc-block-components-notice-banner > svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.wc-block-components-notice-banner > svg { fill: currentColor; background: none; border-radius: 0; padding: 0; }
.sb-alert__text,
.wc-block-components-notice-banner__content {
	margin: 0;
	color: var(--sem-color-text-strong, #171717);
	font-size: var(--sem-type-body-md-size, 16px);
	font-weight: var(--sem-type-weight-medium, 500);
	line-height: 1.45;
}
.wc-block-components-notice-banner.is-error { color: var(--sem-color-feedback-error, #b00020); background: var(--sem-color-feedback-error-bg, #fdecec); }
.wc-block-components-notice-banner.is-warning { color: var(--sem-color-feedback-warning, #b45f06); background: var(--sem-color-feedback-warning-bg, #fff1df); }
.wc-block-components-notice-banner.is-success { color: var(--sem-color-feedback-success, #1e6b43); background: var(--sem-color-feedback-success-bg, #eaf5ee); }