/* Shop frame: cart, checkout, account and the thanks page. Loaded only there (parking_needs_wc_css). Tokens come from base.css. */
.park-shop { padding: clamp(16px, 3vw, 40px) clamp(16px, 3vw, 32px) 0; color: var(--park-fg); }
/* WooCommerce's block-theme CSS caps the title at 1000px and centres it; the content starts at the 1180px grid's edge. */
body .park-shop > .wp-block-post-title { max-width: 1180px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -.03em; margin: 0 auto 1rem; }

/* Panel: the glass box of the cart and checkout parts. Same recipe as .glass without the SVG refraction. */
.park-panel { position: relative; isolation: isolate; border-radius: 22px; padding: clamp(16px, 2.4vw, 28px); background: var(--park-glass-strong);
	box-shadow: inset 0 1px 0 var(--park-rim), inset 0 -1px 0 var(--park-rim2), 0 18px 50px var(--park-drop), 0 2px 8px var(--park-drop);
	-webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%); }

/* Fields */
.park-shop :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea, select) {
	font: inherit; color: var(--park-fg); background: var(--park-card); border: 1px solid var(--park-line); border-radius: 12px; padding: .7em .9em; min-height: 46px; box-sizing: border-box;
	transition: border-color .2s ease, box-shadow .2s ease; }
.park-shop :is(input, textarea, select):focus-visible { outline: 0; border-color: var(--park-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--park-accent) 30%, transparent); }
.park-shop label { color: var(--park-muted); font-size: .875rem; }

/* Buttons. #place_order stays outside :is(), which would give every button its ID specificity. */
.park-shop :is(button.button, a.button, .button, input[type="submit"], button[type="submit"]), .park-shop #place_order {
	font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; color: #fff; background: var(--park-accent); border: 0; border-radius: 999px; padding: .8em 1.5em; min-height: 46px;
	transition: transform .6s var(--park-spring), background-color .2s ease; }
.park-shop :is(button.button, a.button, .button, input[type="submit"], button[type="submit"]):hover, .park-shop #place_order:hover { background: var(--park-accent-soft); transform: scale(1.03); }
.park-shop :is(button.button, a.button, .button, input[type="submit"], button[type="submit"]):active, .park-shop #place_order:active { transform: scale(.96); transition-duration: .15s; }
.park-shop :is(button, a.button, input[type="submit"]):focus-visible { outline: 3px solid color-mix(in srgb, var(--park-accent) 45%, transparent); outline-offset: 2px; }
.park-shop :is(button, .button)[disabled], .park-shop .button.disabled { opacity: .5; cursor: not-allowed; }

/* Notices */
.park-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { list-style: none; margin: 0 0 1rem; padding: .9em 1.2em; border: 0; border-radius: 16px; color: var(--park-fg);
	background: var(--park-glass-strong); box-shadow: inset 4px 0 0 var(--park-accent), 0 6px 20px var(--park-drop); }
.park-shop :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before { display: none; }
.park-shop .woocommerce-message { box-shadow: inset 4px 0 0 var(--park-ok), 0 6px 20px var(--park-drop); }
.park-shop .woocommerce-error { box-shadow: inset 4px 0 0 var(--park-danger), 0 6px 20px var(--park-drop); }
.park-shop :is(.woocommerce-message, .woocommerce-info) .button { float: right; margin-left: 1em; }
/* The block notices WooCommerce prints in block themes: the same glass strip. */
.park-shop .wc-block-components-notice-banner { margin: 0 0 1rem; padding: .8em 1.1em; gap: .8em; align-items: center; border: 0; border-radius: 16px; color: var(--park-fg); font-size: .95rem;
	background: var(--park-glass-strong); box-shadow: inset 4px 0 0 var(--park-accent), 0 6px 20px var(--park-drop); }
.park-shop .wc-block-components-notice-banner.is-success { box-shadow: inset 4px 0 0 var(--park-ok), 0 6px 20px var(--park-drop); }
.park-shop .wc-block-components-notice-banner.is-error { box-shadow: inset 4px 0 0 var(--park-danger), 0 6px 20px var(--park-drop); }
.park-shop .wc-block-components-notice-banner > svg { width: 22px; height: 22px; flex: none; }
.park-shop .wc-block-components-notice-banner:focus { outline: 0; }
/* „… е добавен във вашата количка“ (the success notices with the "View cart" link): on the cart and checkout the product
   is in sight. Only success notices: an error (stock, quantity) always shows, even with a link in it. */
.park-shop .woocommerce-notices-wrapper > :is(.wc-block-components-notice-banner.is-success, .woocommerce-message):has(a.wc-forward) { display: none; }

/* Tables and links */
.park-shop :is(table.shop_table, table.shop_table td, table.shop_table th) { border-color: var(--park-line); }
.park-shop a:where(:not(.button)) { color: var(--park-accent-soft); }

/* Fluid Checkout: its variables on our tokens (same specificity as the plugin's design-template overrides). */
:root body.woocommerce-page[class*="theme-"][class*="has-fc-design-template"],
:root body.woocommerce-page.has-fluid-checkout {
	--fluidcheckout--color--success: var(--park-ok);
	--fluidcheckout--color--error: var(--park-danger);
	--fluidcheckout--color--alert: var(--park-star);
	--fluidcheckout--color--white: var(--park-card);
	--fluidcheckout--color--black: var(--park-fg);
	--fluidcheckout--color--darker-grey: var(--park-fg);
	--fluidcheckout--color--dark-grey: var(--park-muted);
	--fluidcheckout--color--grey: var(--park-muted);
	--fluidcheckout--color--light-grey: var(--park-line);
	--fluidcheckout--color--lighter-grey: var(--park-bg);
	--fluidcheckout--border-color: var(--park-line);
	--fluidcheckout--border-color--light: var(--park-line);
	--fluidcheckout--border-color--dark: var(--park-muted);
	--fluidcheckout--button--primary--background-color: var(--park-accent);
	--fluidcheckout--button--primary--background-color--hover: var(--park-accent-soft);
	--fluidcheckout--button--primary--border-color: var(--park-accent);
	--fluidcheckout--button--primary--border-color--hover: var(--park-accent-soft);
	--fluidcheckout--button--primary--text-color: #fff;
	--fluidcheckout--button--primary--text-color--hover: #fff;
	--fluidcheckout--button--secondary--background-color: transparent;
	--fluidcheckout--button--secondary--background-color--hover: var(--park-glass-strong);
	--fluidcheckout--button--secondary--border-color: var(--park-line);
	--fluidcheckout--button--secondary--border-color--hover: var(--park-accent);
	--fluidcheckout--button--secondary--text-color: var(--park-fg);
	--fluidcheckout--button--secondary--text-color--hover: var(--park-accent-soft);
	--fluidcheckout--button--border-radius: 999px;
	--fluidcheckout--field--background-color: var(--park-card);
	--fluidcheckout--field--background-color--focus: var(--park-card);
	--fluidcheckout--field--background-color--accent: var(--park-bg);
	--fluidcheckout--field--border-color: var(--park-line);
	--fluidcheckout--field--border-radius: 12px;
	--fluidcheckout--field--text-color: var(--park-fg);
	--fluidcheckout--field--text-color--accent: var(--park-muted);
	--fluidcheckout--section--background-color: var(--park-glass-strong);
	--fluidcheckout--section--border-color: transparent;
	--fluidcheckout--section--border-radius: 22px;
	--fluidcheckout--section--highlighted-background-color: var(--park-bg);
	--fluidcheckout--option-box--background-color: var(--park-card);
	--fluidcheckout--option-box--background-color--checked: color-mix(in srgb, var(--park-accent) 8%, var(--park-card));
	--fluidcheckout--option-box--border-color: var(--park-line);
	--fluidcheckout--option-box--border-color--hover: var(--park-accent);
	--fluidcheckout--option-box--border-radius: 14px;
	--fluidcheckout--option-box--label-border-color--checked: var(--park-accent);
	--fluidcheckout--option-box--radio-color--checked: var(--park-accent);
	--fluidcheckout--order-summary--background-color: var(--park-glass-strong);
	--fluidcheckout--order-summary--border-color: transparent;
	--fluidcheckout--order-summary--cell-border-color: var(--park-line);
	--fluidcheckout--order-summary--quantity-background-color: var(--park-accent);
	--fluidcheckout--order-summary--quantity-text-color: #fff;
	--fluidcheckout--coupon-code--background-color: var(--park-bg);
	--fluidcheckout--checkout-progress--bar-color--current: var(--park-accent);
	--fluidcheckout--checkout-progress--bar-color--complete: var(--park-ok);
}
.fc-content, .fc-checkout-order-review { color: var(--park-fg); }
@media (prefers-reduced-motion: reduce) {
	.park-shop :is(button, .button, input[type="submit"]), .park-shop #place_order, .park-shop :is(input, textarea, select) { transition: none; }
	.park-shop :is(button, .button, input[type="submit"]):is(:hover, :active), .park-shop #place_order:is(:hover, :active) { transform: none; }
}