/**
 * RW Konfig — front-end configurator styles (Apple-like option cards).
 *
 * Native checkboxes are replaced by clickable cards with a selection ring.
 * Variables allow quick theming.
 */

.rwk-configurator {
	display: grid;
	gap: 2rem;
	color: var(--background-dark);
	max-width: 720px;
}

/* ---- Group ---- */
.rwk-configurator__group-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.rwk-configurator__group-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Explanatory text under a group heading. Line breaks the administrator
   entered are kept, so a description can be written as short lines. */
.rwk-configurator__group-description {
	margin: -0.25rem 0 0.75rem;
	max-width: 46ch;
	color: var(--background-dark);
	opacity: 0.65;
	font-size: 0.9rem;
	line-height: 1.45;
	white-space: pre-line;
}

/* "mehr erfahren" next to a group heading, opening its info panel. */
.rwk-configurator__more {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.6rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--accent);
	font-size: 0.85rem;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
}

.rwk-configurator__more-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.05rem;
	height: 1.05rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 0.8rem;
	line-height: 1;
	transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
	font-weight: 600;
}

.rwk-configurator__more:hover .rwk-configurator__more-icon,
.rwk-configurator__more:focus-visible .rwk-configurator__more-icon,
.rwk-configurator__more:focus .rwk-configurator__more-icon {
	color: var(--white) !important;
	background-color: var(--accent);
}

/* Only the icon reacts to hover: it fills orange and the plus turns black.
   The label itself stays as it is — the theme recolours buttons on hover, so
   the colour is restated here to keep the text unchanged. */
.rwk-configurator__more:hover,
.rwk-configurator__more:focus-visible,
.rwk-configurator__more:focus {
	color: var(--text);
	text-decoration: none;
	background: none;
	outline: 0;
}

.rwk-configurator__more:hover .rwk-configurator__more-icon,
.rwk-configurator__more:focus-visible .rwk-configurator__more-icon {
	background-color: var(--orange-300, var(--accent));
	border-color: var(--orange-300, var(--accent));
	color: #000;
}

/* ---- Cards ---- */
.rwk-cards {
	display: grid;
	gap: 0.65rem;
	margin-top: 0.5em;
}

.rwk-card {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	color: var(--text);
	/* Real border (not box-shadow) so the selected ring is never clipped by a
	   parent column; border-box keeps the outer size stable on selection. */
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.rwk-card:hover {
	/* --orange-300 is not defined by the theme, so without the fallback this
	   rule resolved to transparent and the hover border never showed. */
	border-color: var(--orange-300, var(--accent));
}

.rwk-card:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.35);
}

.rwk-card.is-selected {
	/* Keep the 1px border width (no layout jump); thicken visually with an
	   inset ring that is drawn inside the card, so it is never clipped. */
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

/* .is-disabled is gone: an option that cannot be combined is now left out of
   the list entirely rather than shown greyed out. */

.rwk-card__info {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.rwk-card__label {
	font-size: 1.02rem;
	font-weight: 500;
	line-height: 1;
}

.rwk-card__subtitle {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 0.15rem;
	line-height: 1.2;
}

/* Price on the right side of the card. */
.rwk-card__price {
	flex: 0 0 auto;
	margin-left: auto;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--text-muted);
	white-space: nowrap;
	line-height: 1;
}

/* Covered by the base price. Deliberately without its own styling: it sits in
   the price slot and inherits size, weight and colour from .rwk-card__price, so
   the column reads as one consistent line of values. */

/* ---- Product image preview ----
   The configurator swaps the product gallery image by laying its own picture
   over the original. That keeps the gallery's slider and lightbox markup
   untouched, so hiding the overlay restores the original exactly. */
.woocommerce-product-gallery__image {
	position: relative;
}

.rwk-preview-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--background-light);
}

.woocommerce-product-gallery__image {
	background: var(--background-light);
}

.rwk-preview-image[hidden] {
	display: none;
}

/* ---- Stepper ---- */
.rwk-qty {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.55rem;
}

.rwk-stepper {
	display: inline-flex;
	align-items: stretch;
	height: 1.9rem;
	border-radius: 999px;
	background: #f0f0f2;
	overflow: hidden;
}

.rwk-stepper__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--background-dark);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s ease;
}

.rwk-stepper__btn:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.06);
}

/* Last pick of a required group: it may not be stepped down to zero. */
.rwk-stepper__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.rwk-stepper__val {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.6rem;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--background-dark);
}

/* ---- Errors ---- */
.rwk-configurator__errors {
	margin: 0;
	padding: 0.75rem 1rem;
	list-style: none;
	background: #fff4f4;
	border: 1px solid #f3c0c0;
	border-radius: 10px;
	color: #b32d2e;
}

/* GeneratePress clears the floated product gallery by giving the summary column
   overflow: hidden. That turns the column into a scroll container, which
   silently disables position: sticky inside it. flow-root establishes the same
   block formatting context without clipping or scrolling, so the float layout
   stays intact and the action bar below can stick. Scoped to products that
   actually show the configurator. */
.rwk-has-configurator.woocommerce #content div.product div.summary,
.rwk-has-configurator.woocommerce div.product div.summary,
.rwk-has-configurator.woocommerce-page #content div.product div.summary,
.rwk-has-configurator.woocommerce-page div.product div.summary {
	display: flow-root;
	overflow: visible;
}

/* ---- Action bar ----
   Total price, tax notice, quantity input and add-to-cart button share one
   row. The quantity input and the button are rendered by WooCommerce itself:
   the wrapper is opened on woocommerce_before_add_to_cart_button and closed on
   woocommerce_after_add_to_cart_button, so both end up inside it without
   overriding a template.

   position: sticky pins the bar to the bottom of the viewport for as long as
   the configurator is taller than the screen, so the price and the button stay
   reachable from the very top of the list. Once the end of the configurator is
   scrolled into view, the bar settles into its natural place. */
.rwk-actionbar {
	position: sticky;
	bottom: 0;
	z-index: 20;
	box-sizing: border-box;
	display: grid;
	/* The bar lives in the narrow summary column, so price and notice get their
	   own rows and only quantity and button share one. */
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"total total"
		"legal legal"
		"qty   cart";
	align-items: center;
	column-gap: 0.75rem;
	row-gap: 0.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius);
	backdrop-filter: saturate(180%) blur(20px);
    background-color: var(--overlay);
}

.rwk-actionbar .rwk-configurator__total {
	grid-area: total;
}

/* The Germanized tax and shipping notice, which its shopmark setting hooks to
   woocommerce_before_add_to_cart_quantity — inside the bar. */
.rwk-actionbar .legal-price-info {
	grid-area: legal;
	font-size: 0.78rem;
	line-height: 1.3;
	color: var(--gray-300);
	margin-bottom: 0.75rem;
}

.rwk-actionbar .legal-price-info p {
	margin: 0;
	color: var(--text-muted);
}

.rwk-actionbar .quantity {
	grid-area: qty;
	margin: 0.5rem 0 0;
	/* The theme styles minus, plus and the number with `color: inherit`, which
	   picks up the configurator's dark ink and makes them invisible on the dark
	   bar. Colouring the wrapper fixes all three without a specificity fight. */
	color: var(--black);
	border: 1px solid var(--border);
	border-radius: var(--rwk-radius-sm);
	overflow: hidden;
}

.rwk-actionbar .quantity .qty {
	background: transparent;
	color: inherit;
}

.rwk-actionbar .quantity .minus:hover,
.rwk-actionbar .quantity .plus:hover {
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
}

/* The child theme sizes the button against the whole form width
   (width: calc(100% - 154px)) to fake the row the bar now builds properly.
   Inside the bar the button is a grid cell and simply fills its column; the
   selector matches that rule's specificity plus one so it wins. */
.woocommerce div.product form.cart .rwk-actionbar .single_add_to_cart_button.button {
	grid-area: cart;
	width: 100%;
    height: 100%;
	margin: 0;
	white-space: nowrap;
	border-radius: 5px;
}

/* ---- Total ---- */
.rwk-configurator__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
}

.rwk-configurator__total-label {
	color: var(--black);
    margin: 0;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
	line-height: 1;
}

.rwk-configurator__total-price {
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* While the price is recalculating, only fade the total — not the whole UI,
   otherwise selecting an option flickers the cards and headings. */
.rwk-configurator[aria-busy="true"] .rwk-configurator__total-price {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

/* Very narrow screens: the quantity control and the button no longer fit side
   by side, so each gets its own row. */
@media (max-width: 480px) {
	.rwk-actionbar {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"total"
			"legal"
			"qty"
			"cart";
	}

	.rwk-actionbar .quantity {
		justify-self: start;
	}

	.woocommerce div.product form.cart .rwk-actionbar .single_add_to_cart_button.button {
		margin-top: 0.6rem;
	}
}