/**
 * Form controls shared by cart, checkout and My account:
 * fields, checkboxes, choice (radio) cards, quantity stepper, status pill,
 * panel card, key/value list, page head, icon button, data table.
 * Mobile-first; tokens only.
 */

.pm-field { display: grid; gap: var( --space-6 ); min-width: 0; }
.pm-field__label { font-size: var( --text-sm ); font-weight: var( --fw-semibold ); color: var( --color-text ); }
.pm-field__req { color: var( --color-primary ); margin-left: var( --space-2 ); }
.pm-field__input,
.pm-field__select,
.pm-field__textarea {
	width: 100%;
	min-height: var( --control-height );
	padding: 0 var( --space-14 );
	border: var( --border-width-strong ) solid var( --color-border );
	border-radius: var( --radius-control );
	background: var( --surface );
	font: inherit;
	font-size: var( --text-sm-5 );
	color: var( --color-text );
	transition: var( --transition-color );
}
.pm-field__textarea { min-height: var( --space-120 ); padding: var( --space-12 ) var( --space-14 ); resize: vertical; }
.pm-field__input:focus-visible,
.pm-field__select:focus-visible,
.pm-field__textarea:focus-visible { outline: none; border-color: var( --color-secondary ); }
.pm-field--error .pm-field__input { border-color: var( --color-primary ); }
.pm-field__hint { font-size: var( --text-xs ); color: var( --color-text-meta ); }
.pm-field__error { font-size: var( --text-xs ); color: var( --color-primary ); font-weight: var( --fw-semibold ); }
.pm-field__select-wrap { position: relative; }
.pm-field__caret { position: absolute; right: var( --space-14 ); top: 50%; transform: translateY( -50% ); pointer-events: none; color: var( --color-text-meta ); }

.pm-form-grid { display: grid; gap: var( --space-14 ); }
.pm-form-grid__full { grid-column: 1 / -1; }
@media ( min-width: 768px ) { .pm-form-grid { grid-template-columns: 1fr 1fr; } }

.pm-check { display: flex; align-items: flex-start; gap: var( --space-10 ); min-height: var( --space-44 ); cursor: pointer; font-size: var( --text-sm ); color: var( --color-text-soft ); line-height: var( --lh-normal ); }
.pm-check__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-check__box { flex: 0 0 auto; width: var( --space-20 ); height: var( --space-20 ); margin-top: var( --space-2 ); border: var( --border-width-box ) solid var( --color-control-border ); border-radius: var( --radius-3xs ); background: var( --surface ); display: grid; place-items: center; color: var( --color-text-invert ); transition: var( --transition-color ); }
.pm-check__box svg { opacity: 0; }
.pm-check__input:checked + .pm-check__box { background: var( --color-primary ); border-color: var( --color-primary ); }
.pm-check__input:checked + .pm-check__box svg { opacity: 1; }
.pm-check__input:focus-visible + .pm-check__box { border-color: var( --color-secondary ); }
.pm-check a { color: inherit; text-decoration: underline; }
.pm-check--toggle { padding: var( --space-10 ) var( --space-16 ); background: var( --surface-chip ); border-radius: var( --radius-control ); font-weight: var( --fw-semibold ); color: var( --color-text ); align-items: center; }
.pm-check--toggle .pm-check__box { margin-top: 0; }

.pm-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var( --space-14 ); min-height: var( --space-64 ); padding: var( --space-12 ) var( --space-16 ); border: var( --border-width-strong ) solid var( --color-border ); border-radius: var( --radius-control ); background: var( --surface ); cursor: pointer; transition: var( --transition-color ); }
.pm-choice:hover, .pm-choice:focus-within { border-color: var( --color-border-strong ); }
.pm-choice--selected { border-color: var( --color-primary ); background: var( --color-primary-tint-soft ); }
.pm-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pm-choice__icon { width: var( --space-40 ); height: var( --space-40 ); border-radius: var( --radius-md ); background: var( --surface-sunken ); display: grid; place-items: center; overflow: hidden; }
.pm-choice__icon img, .pm-choice__icon svg { max-width: var( --space-28 ); max-height: var( --space-28 ); }
.pm-choice__name { font-size: var( --text-sm-5 ); font-weight: var( --fw-bold ); }
.pm-choice__note { font-size: var( --text-xs ); color: var( --color-text-meta ); }
.pm-choice__cost { font-size: var( --text-sm-5 ); font-weight: var( --fw-black ); white-space: nowrap; }
.pm-choice__cost--free { color: var( --color-success-strong ); }
.pm-choice__radio { width: var( --space-20 ); height: var( --space-20 ); border-radius: var( --radius-circle ); border: var( --border-width-box ) solid var( --color-control-border ); display: grid; place-items: center; }
.pm-choice__radio::after { content: ""; width: var( --space-10 ); height: var( --space-10 ); border-radius: var( --radius-circle ); background: var( --color-primary ); opacity: 0; }
.pm-choice--selected .pm-choice__radio { border-color: var( --color-primary ); }
.pm-choice--selected .pm-choice__radio::after { opacity: 1; }
.pm-choice__fields { grid-column: 1 / -1; padding-top: var( --space-8 ); font-size: var( --text-sm ); color: var( --color-text-soft ); }
.pm-choice-list { display: grid; gap: var( --space-10 ); }

.pm-qty { display: inline-flex; align-items: center; padding: var( --space-4 ); border: var( --border-width-strong ) solid var( --color-border ); border-radius: var( --radius-control ); background: var( --surface ); }
.pm-qty__step { width: var( --space-44 ); height: var( --space-44 ); border: 0; border-radius: var( --radius-md ); background: transparent; color: var( --color-text ); display: grid; place-items: center; cursor: pointer; transition: var( --transition-color ); }
.pm-qty__step:hover, .pm-qty__step:focus-visible { background: var( --color-primary ); color: var( --color-text-invert ); outline: none; }
.pm-qty__input { width: var( --space-40 ); border: 0; background: transparent; text-align: center; font: inherit; font-weight: var( --fw-bold ); font-size: var( --text-base ); -moz-appearance: textfield; }
.pm-qty__input::-webkit-outer-spin-button, .pm-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media ( min-width: 1024px ) { .pm-qty__step { width: var( --space-36 ); height: var( --space-36 ); } }

.pm-status { display: inline-flex; align-items: center; gap: var( --space-6 ); padding: var( --space-4 ) var( --space-10 ); border-radius: var( --radius-pill ); font-size: var( --text-xs ); font-weight: var( --fw-bold ); line-height: var( --lh-normal ); white-space: nowrap; background: var( --surface-chip ); color: var( --color-text-soft ); }
.pm-status::before { content: ""; width: var( --space-7 ); height: var( --space-7 ); border-radius: var( --radius-circle ); background: currentColor; }
.pm-status--completed { background: var( --color-success-tint ); color: var( --color-success-strong ); }
.pm-status--processing { background: var( --color-tertiary-tint ); color: var( --color-tertiary ); }
.pm-status--on-hold, .pm-status--pending { background: var( --color-accent-tint ); color: var( --color-accent-strong ); }
.pm-status--cancelled, .pm-status--refunded, .pm-status--failed { background: var( --color-primary-tint-soft ); color: var( --color-primary ); }
.pm-status--active { background: var( --color-success-tint ); color: var( --color-success-strong ); }

.pm-panel { min-width: 0; background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); padding: var( --space-20 ); }
.pm-panel--sunken { background: var( --surface-sunken ); }
.pm-panel__head { display: flex; align-items: center; gap: var( --space-14 ); margin-bottom: var( --space-18 ); }
.pm-panel__icon { flex: 0 0 auto; width: var( --icon-tile-size ); height: var( --icon-tile-size ); border-radius: var( --radius-control ); background: var( --color-primary-tint ); color: var( --color-primary ); display: grid; place-items: center; }
.pm-panel__icon--cyan { background: var( --color-secondary-tint ); color: var( --color-secondary-strong ); }
.pm-panel__icon--green { background: var( --color-success-tint ); color: var( --color-success-strong ); }
.pm-panel__icon--gold { background: var( --color-accent-tint ); color: var( --color-accent-strong ); }
.pm-panel__title { font-size: var( --text-2xl ); font-weight: var( --fw-black ); letter-spacing: var( --ls-tight ); line-height: var( --lh-tight ); }
.pm-panel__lead { font-size: var( --text-sm ); color: var( --color-text-muted ); margin-top: var( --space-2 ); }
.pm-panel__foot { display: flex; flex-wrap: wrap; gap: var( --space-12 ); align-items: center; justify-content: space-between; margin-top: var( --space-20 ); }
@media ( min-width: 768px ) { .pm-panel { padding: var( --card-padding ); } }


.pm-icon-btn { width: var( --space-36 ); height: var( --space-36 ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-circle ); background: var( --surface ); color: var( --color-text-meta ); display: grid; place-items: center; cursor: pointer; transition: var( --transition-color ); }
.pm-icon-btn:hover, .pm-icon-btn:focus-visible { background: var( --color-primary ); border-color: var( --color-primary ); color: var( --color-text-invert ); outline: none; }

.pm-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var( --gap-section ); margin-bottom: var( --space-24 ); }
.pm-page-head__title { font-size: var( --text-display-category ); line-height: var( --lh-tight ); letter-spacing: var( --ls-display-lg ); }
.pm-page-head__meta { font-size: var( --text-sm ); color: var( --color-text-muted ); }
.pm-page-head__link { font-size: var( --text-sm ); font-weight: var( --fw-black ); color: var( --color-text ); text-decoration: none; display: inline-flex; align-items: center; gap: var( --space-6 ); min-height: var( --space-44 ); }
.pm-page-head__link:hover { color: var( --color-primary ); }

/* Non-shipping days notice (Doprava a platba, checkout) — printmania_non_shipping_notice(). */
.pm-nonship { display: flex; align-items: center; gap: var( --space-16 ); padding: var( --space-18 ) var( --space-22 ); border: var( --border-width ) solid var( --color-accent-border ); border-radius: var( --radius-card ); background: var( --color-accent-tint ); color: var( --color-text ); }
.pm-nonship__icon { flex: 0 0 auto; display: grid; place-items: center; width: var( --space-44 ); height: var( --space-44 ); border-radius: var( --radius-control ); background: var( --color-accent ); color: var( --color-text ); }
.pm-nonship__icon .pm-info-icon { width: 22px; height: 22px; }
.pm-nonship__body { min-width: 0; }
.pm-nonship__title { margin: 0 0 var( --space-4 ); font-size: var( --text-md ); font-weight: var( --fw-black ); line-height: var( --lh-tight ); }
/* Reset legacy scorg `.nonShippingDaysList` (grey pill, fit-content, centred on mobile). */
.pm-nonship ul.pm-nonship__list { display: grid; gap: var( --space-4 ); width: auto; margin: 0; padding: 0; list-style: none; background: none; border-radius: 0; text-align: left; font-size: var( --text-base ); line-height: var( --lh-relaxed ); color: var( --color-text-soft ); }
.pm-nonship__list time { font-weight: var( --fw-bold ); color: var( --color-text ); white-space: nowrap; }
@media ( max-width: 600px ) {
	.pm-nonship { align-items: flex-start; padding: var( --space-16 ); }
	.pm-nonship__icon { width: var( --space-36 ); height: var( --space-36 ); }
}
.pm-checkout .pm-nonship { margin-bottom: var( --space-24 ); }

/* Order steps (cart → checkout → thank-you) — replaces the visible page title. */
.pm-page-head--steps { display: block; }
.pm-steps { padding: var( --space-16 ) var( --space-20 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); box-shadow: var( --shadow-1 ); }
.pm-steps__list { display: flex; align-items: center; gap: var( --space-16 ); margin: 0; padding: 0; list-style: none; }
.pm-steps__item { display: flex; align-items: center; gap: var( --space-12 ); color: var( --color-text-meta ); white-space: nowrap; }
.pm-steps__item:not( :last-child ) { flex: 1; }
.pm-steps__item:not( :last-child )::after { content: ""; flex: 1; min-width: var( --space-24 ); height: 3px; border-radius: var( --radius-pill ); background: var( --surface-sunken ); }
.pm-steps__item--done:not( :last-child )::after { background: var( --color-secondary ); }
.pm-steps__link { display: inline-flex; align-items: center; gap: var( --space-12 ); color: inherit; text-decoration: none; }
.pm-steps__link:hover .pm-steps__label,
.pm-steps__link:hover .pm-steps__dot { color: var( --color-primary ); }
.pm-steps__dot { flex: 0 0 auto; display: grid; place-items: center; width: var( --space-44 ); height: var( --space-44 ); border-radius: var( --radius-circle ); background: var( --surface-sunken ); color: var( --color-text-meta ); transition: var( --transition-color ); }
.pm-steps__text { display: grid; line-height: var( --lh-tight ); }
.pm-steps__num { font-size: var( --text-xxs ); font-weight: var( --fw-semibold ); letter-spacing: .06em; text-transform: uppercase; color: var( --color-text-meta ); }
.pm-steps__label { font-size: var( --text-sm-5 ); font-weight: var( --fw-bold ); color: var( --color-text-muted ); }
.pm-steps__item--done .pm-steps__dot { background: var( --color-secondary-tint ); color: var( --color-secondary-strong ); }
.pm-steps__item--done .pm-steps__label { color: var( --color-secondary-strong ); }
.pm-steps__item--current .pm-steps__dot { background: var( --color-primary ); color: var( --color-text-invert ); }
.pm-steps__item--current .pm-steps__num { color: var( --color-primary ); }
.pm-steps__item--current .pm-steps__label { color: var( --color-text ); font-weight: var( --fw-black ); }
@media ( max-width: 600px ) {
	.pm-steps { padding: var( --space-12 ) var( --space-14 ); }
	.pm-steps__list, .pm-steps__item { gap: var( --space-10 ); }
	.pm-steps__dot { width: var( --space-36 ); height: var( --space-36 ); }
	.pm-steps__dot svg { width: var( --space-16 ); height: var( --space-16 ); }
	.pm-steps__item:not( .pm-steps__item--current ) .pm-steps__text { display: none; }
}

.pm-kv { display: grid; gap: var( --space-8 ); margin: 0; }
.pm-kv__row { display: flex; justify-content: space-between; gap: var( --space-14 ); font-size: var( --text-sm ); color: var( --color-text-soft ); margin: 0; }
.pm-kv__row dt { font-weight: var( --fw-medium ); }
.pm-kv__row dd { margin: 0; font-weight: var( --fw-semibold ); color: var( --color-text ); text-align: right; }
.pm-kv__row--total { padding-top: var( --space-12 ); margin-top: var( --space-4 ); border-top: var( --border-width ) solid var( --color-border ); align-items: baseline; }
.pm-kv__row--total dt { font-size: var( --text-md ); font-weight: var( --fw-bold ); color: var( --color-text ); }
.pm-kv__row--total dd { font-size: var( --text-5xl ); font-weight: var( --fw-black ); letter-spacing: var( --ls-tight ); }
.pm-kv__vat { display: block; font-size: var( --text-xs ); font-weight: var( --fw-regular ); color: var( --color-text-meta ); }

/* Order items + address cards — shared by My account (view-order) and the thank-you page. */
.pm-order-items { display: grid; gap: 0; border-top: var( --border-width ) solid var( --color-border ); }
.pm-order-item { display: grid; grid-template-columns: var( --space-56 ) 1fr auto; gap: var( --space-14 ); align-items: center; padding: var( --space-12 ) 0; border-bottom: var( --border-width ) solid var( --color-border ); }
.pm-order-item__thumb { width: var( --space-56 ); height: var( --space-56 ); border-radius: var( --radius-md ); background: var( --surface-sunken ); display: grid; place-items: center; overflow: hidden; }
.pm-order-item__thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pm-order-item__name { font-size: var( --text-sm-5 ); font-weight: var( --fw-semibold ); color: var( --color-text ); text-decoration: none; }
.pm-order-item__name:hover { color: var( --color-primary ); }
.pm-order-item__meta { font-size: var( --text-xs ); color: var( --color-text-meta ); }
.pm-order-item__total { font-weight: var( --fw-black ); font-size: var( --text-base ); white-space: nowrap; }
.pm-order-item__unit { display: block; font-size: var( --text-xs ); font-weight: var( --fw-regular ); color: var( --color-text-meta ); text-align: right; }
.pm-order-item__total .wa-formatted-line-subtotal { text-align: right; }
.pm-order-item__total .wa-formatted-line-subtotal__cost { font-weight: var( --fw-black ); font-size: var( --text-base ); }
.pm-order-item__total .wa-formatted-line-subtotal__unit-price { display: block; font-size: var( --text-xs ); font-weight: var( --fw-regular ); color: var( --color-text-meta ); }
.pm-address-grid { display: grid; gap: var( --gap-grid ); }
.pm-address { padding: var( --space-18 ); background: var( --surface ); border: var( --border-width ) solid var( --color-border ); border-radius: var( --radius-card ); display: grid; gap: var( --space-10 ); align-content: start; }
.pm-address__head { display: flex; align-items: center; gap: var( --space-10 ); }
.pm-address__icon { width: var( --space-36 ); height: var( --space-36 ); border-radius: var( --radius-md ); background: var( --surface-sunken ); display: grid; place-items: center; color: var( --color-secondary-strong ); }
.pm-address__title { font-size: var( --text-base ); font-weight: var( --fw-bold ); }
.pm-address address { font-style: normal; font-size: var( --text-sm ); line-height: var( --lh-relaxed ); color: var( --color-text-soft ); }
.pm-address__empty { font-size: var( --text-sm ); color: var( --color-text-meta ); }
.pm-address__edit { font-size: var( --text-xs-5 ); font-weight: var( --fw-bold ); color: var( --color-secondary ); text-decoration: none; display: inline-flex; align-items: center; gap: var( --space-6 ); min-height: var( --space-44 ); }
.pm-address__edit:hover { color: var( --color-primary ); }
@media ( min-width: 768px ) { .pm-address-grid { grid-template-columns: 1fr 1fr; } .pm-address__edit { min-height: 0; } }

/* Legacy thank-you hook (includes/functions/functions.shared.php) prepends a 300px product image to every order item; the row already has its own thumbnail. */
.pm-order-item .wa-thankyou-product-image { display: none; }