/*
Theme Name:  Salient Child – SmartKraut
Description: Child theme for SmartKraut (smartkraut.at). Adds subscription bundle card layout and Select2 mobile fix.
Template:    salient
Version:     1.0.0
Author:      Yoren Chang
Author URI:  https://developer.developer.developer
License:     GPL-2.0-or-later
Text Domain: salient-child
*/

/* ==========================================================================
   Select2 Mobile Fix
   --------------------------------------------------------------------------
   Salient applies `min-width: 200px` to .variations select via
   body[data-fancy-form-rcs="1"], which beats a plain `width: 1px !important`
   so the hidden native <select> stays 200px wide. On iOS Safari, tapping
   the styled Select2 UI can still trigger the native dropdown — anchored
   to the offscreen 200px element it ends up pinned to the viewport edge
   instead of the styled box. Forcing `min-width: 1px` collapses it
   completely so touch events go to the Select2 overlay.
   ========================================================================== */

select.select2-hidden-accessible {
	pointer-events: none !important;
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
	width: 1px !important;
	min-width: 1px !important;
	max-width: 1px !important;
	height: 1px !important;
}

/* ==========================================================================
   Subscription Bundle Items — Compact Card Layout
   --------------------------------------------------------------------------
   Styles the WooCommerce Product Bundles form on subscription products
   to display bundled tea items as compact horizontal cards, matching the
   visual style of the tasting set page (Easy Product Bundles Pro).
   ========================================================================== */

/* --- Hide verbose / unnecessary content --- */

.bundle_form .bundled_product .bundled_product_excerpt,
.bundle_form .bundled_product .product_excerpt,
.bundle_form .bundled_product .tabbed,
.bundle_form .bundled_product .wpb_tabs_nav,
.bundle_form .bundled_product .ui-tabs-nav,
.bundle_form .bundled_product .wpb_tab,
.bundle_form .bundled_product .ui-tabs-panel,
.bundle_form .bundled_product .bundled_product_permalink,
.bundle_form .bundled_product .woocommerce-variation-description,
.bundle_form .bundled_product .stock,
.bundle_form .bundled_product .woocommerce-variation-price,
.bundle_form .bundled_product .woocommerce-variation-availability,
.bundle_form .bundled_product .bundled_qty,
.bundle_form .bundled_product .bundled_product_title_link,
.bundle_form .bundled_product .bundled_variation_attribute_options_wrapper,
.bundle_form .bundled_product .attribute_value_static,
.bundle_form .bundled_product .item_qty,
.bundle_form .bundled_product .bundled_item_cart_content {
	display: none !important;
}

/* --- Card container --- */

.bundle_form .bundled_product.bundled_product_summary {
	background: hsla(0, 0%, 100%, 0.87) !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 4px !important;
	margin-bottom: 10px !important;
	box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.18) !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	float: none !important;
	width: 100% !important;
	transition: box-shadow 0.2s ease !important;
}

.bundle_form .bundled_product.bundled_product_summary:hover {
	box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.22) !important;
}

/* --- Image thumbnail --- */

.bundle_form .bundled_product .bundled_product_images {
	width: 80px !important;
	min-width: 80px !important;
	max-width: 80px !important;
	height: 80px !important;
	float: none !important;
	margin: 0 !important;
	background: rgba(238, 238, 238, 0.93) !important;
	border-radius: 6px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.bundle_form .bundled_product .bundled_product_images figure {
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

.bundle_form .bundled_product .bundled_product_images img {
	border-radius: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.bundle_form .bundled_product .bundled_product_images a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

/* --- Details area --- */

.bundle_form .bundled_product .details {
	float: none !important;
	width: auto !important;
	flex: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 4px !important;
}

/* --- Product title --- */

.bundle_form .bundled_product .bundled_product_title {
	font-size: 14px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.218 !important;
	color: #606060 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.bundle_form .bundled_product .bundled_product_title_inner {
	display: flex !important;
	align-items: center !important;
}

/* --- Checkbox and price text --- */

.bundle_form .bundled_product .bundled_product_optional_checkbox {
	font-size: 13px !important;
	display: block !important;
	color: rgb(96, 96, 96) !important;
	line-height: 1.4 !important;
}

.bundle_form .bundled_product .bundled_product_checkbox {
	vertical-align: middle !important;
	margin: -2px 2px 0 0 !important;
}

.bundle_form .bundled_product .price {
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgb(96, 96, 96) !important;
	line-height: inherit !important;
	white-space: nowrap !important;
}

/* The German WC Product Bundles translation closes .price and renders
   the trailing "hinzufügen" verb directly after </span> with no space.
   Inject a non-breaking space so words don't run together. Harmless in
   English where the label ends inside .price and there's no trailing
   text after it. */
.bundle_form .bundled_product .bundled_product_optional_checkbox .price::after {
	content: "\00a0";
}


/* --- Inner wraps --- */

.bundle_form .bundled_product .bundled_item_wrap {
	width: 100% !important;
}

.bundle_form .bundled_product .single_variation_wrap {
	margin: 0 !important;
	padding: 0 !important;
}

.bundle_form .bundled_product .single_variation {
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Bundle total area --- */

.bundle_wrap .bundle_price {
	margin-top: 20px !important;
	padding-top: 20px !important;
}

/* --------------------------------------------------------------------------
   Select2 dropdown overflow fix
   --------------------------------------------------------------------------
   The Select2 subscription-plan dropdown renders ~4px taller than its
   .wcsatt-options-wrapper container. When .bundle_error ("Please choose N
   items.") is shown it creates enough vertical gap on its own. Once the
   user selects all required items, WC Product Bundles JS hides .bundle_error
   via inline style="display:none" and .bundle_availability ("In stock")
   slides up under the dropdown's bottom border — visually striking through
   the "In stock" text. Scope the margin to that hidden-error state so the
   default layout keeps its tight default spacing.
   ---------------------------------------------------------------------- */

.bundle_wrap:has(> .bundle_error[style*="display: none"]) .bundle_availability {
	margin-top: 16px !important;
}

/* ==========================================================================
   Mobile Responsive
   ========================================================================== */

@media screen and (max-width: 768px) {

	.bundle_form .bundled_product.bundled_product_summary {
		gap: 6px !important;
		padding: 4px !important;
	}

	.bundle_form .bundled_product .bundled_product_images {
		width: 56px !important;
		min-width: 56px !important;
		max-width: 56px !important;
		height: 56px !important;
	}

	.bundle_form .bundled_product .bundled_product_title {
		font-size: 13px !important;
	}

	.bundle_form .bundled_product .bundled_product_optional_checkbox,
	.bundle_form .bundled_product .price {
		font-size: 12px !important;
	}
}