/* ==========================================================================
   Ultimate Bundle for WooCommerce — Frontend styles
   ========================================================================== */

.ub-bundle-items-wrap {
	margin: 0 0 1.5em;
	padding: 1em 1.2em;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	background: #fafafa;
}

.ub-bundle-items-title {
	margin: 0 0 0.75em;
	font-size: 1em;
	font-weight: 600;
}

.ub-bundle-items-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-bundle-item {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding: 0.5em 0;
	border-bottom: 1px solid #ececec;
}

.ub-bundle-item:last-child {
	border-bottom: none;
}

.ub-item-thumb-wrap img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 3px;
	display: block;
}

.ub-item-details {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: 0.95em;
	flex: 1;
}

.ub-item-name {
	font-weight: 500;
	color: inherit;
	text-decoration: none;
}

.ub-item-name:hover {
	text-decoration: underline;
}

.ub-item-qty {
	font-weight: 600;
	color: #444;
}

/* --------------------------------------------------------------------------
   Calculated mode — editable qty inputs & line prices
   -------------------------------------------------------------------------- */
.ub-item-qty-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.25em;
	font-weight: 600;
	color: #444;
}

.ub-item-qty-input {
	width: 45px !important;
	min-width: 45px !important;
	max-width: 45px !important;
	padding: 2px 4px !important;
	text-align: center;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 0.9em;
}

/* Custom +/- steppers replace the native number spinners. */
.ub-item-qty-input::-webkit-outer-spin-button,
.ub-item-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.ub-item-qty-input {
	-moz-appearance: textfield;
	appearance: textfield;
}

.ub-qty-btn {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #f7f7f7;
	color: #333;
	font-size: 1.05em;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.ub-qty-btn:hover {
	background: #ececec;
}

.ub-qty-btn:active {
	background: #e0e0e0;
}

.ub-item-line-price {
	color: #555;
	white-space: nowrap;
}

/* Lay the item name out first and let it absorb the free space so the editable
   qty input and its line price sit together on the right of the row. */
.ub-item-details .ub-item-name {
	order: 1;
	margin-right: auto;
}

.ub-item-details .ub-item-qty-wrap {
	order: 2;
}

.ub-item-details .ub-item-line-price {
	order: 3;
}

.ub-item-details .ub-variation-selects {
	order: 4;
}

/* Prices hidden: the qty stepper is the only right-hand element. Keep it
   pinned to the right edge of the row (name absorbs the free space) so it
   lines up under the price column like the prices-shown layout. */
.ub-prices-hidden .ub-item-details .ub-item-name {
	margin-right: auto;
}

.ub-prices-hidden .ub-item-details .ub-item-qty-wrap {
	margin-left: auto;
	margin-right: 0;
}

.ub-bundle-total {
	margin: 0 0 0.75em;
	font-size: 1.5em;
}

.ub-bundle-total-price {
	font-weight: 700;
}

.ub-total-qty {
	font-size: 0.6em;
	font-weight: 400;
	color: #666;
}

.ub-max-qty-msg {
	margin: 0.25em 0 0.5em;
	font-size: 0.9em;
	color: #666;
}

.ub-max-qty-msg.ub-max-reached {
	color: #c00;
	font-weight: 600;
}

.ub-min-qty-msg {
	margin: 0.25em 0 0.5em;
	font-size: 0.9em;
	color: #c00;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.ub-badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 3px;
	font-size: 0.75em;
	font-weight: 600;
	color: #fff;
	line-height: 1.6;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Variable product — variation selects
   -------------------------------------------------------------------------- */
.ub-variation-selects {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	gap: 6px 12px;
	width: 100%;
	margin-top: 4px;
}

.ub-variation-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ub-variation-label {
	font-size: 0.85em;
	font-weight: 600;
	color: #555;
	white-space: nowrap;
}

.ub-variation-select {
	padding: 4px 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 0.85em;
	min-width: 100px;
}

.ub-bundle-item-variable.ub-variation-missing .ub-variation-select,
.ub-fc-item-variable.ub-variation-missing .ub-variation-select {
	border-color: #cc0000;
}

.ub-bundle-item-variable.ub-variation-oos,
.ub-fc-item-variable.ub-variation-oos {
	opacity: 0.6;
}

.ub-bundle-item-variable.ub-variation-oos .ub-variation-select,
.ub-fc-item-variable.ub-variation-oos .ub-variation-select {
	border-color: #cc0000;
}

.ub-variation-select option:disabled {
	color: #e57373; /* light red — sold-out variation options */
}

/* Disabled add-to-cart button */
.single_add_to_cart_button.ub-disabled,
button[type="submit"].ub-disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   SKU label
   -------------------------------------------------------------------------- */
.ub-item-sku {
	color: #888;
	font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   Free Choice Items
   -------------------------------------------------------------------------- */
.ub-free-choice-wrap {
	margin-top: 1em;
	padding-top: 1em;
	border-top: 1px dashed #ddd;
}

.ub-free-choice-title {
	margin: 0 0 0.5em;
	font-size: 1em;
	font-weight: 600;
}

.ub-free-choice-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-free-choice-item {
	padding: 0.5em 0;
	border-bottom: 1px solid #ececec;
}

.ub-free-choice-item:last-child {
	border-bottom: none;
}

.ub-free-choice-label {
	display: flex;
	align-items: center;
	gap: 0.75em;
	cursor: pointer;
	font-weight: normal;
}

.ub-free-choice-radio {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 2px solid #bbb;
	border-radius: 3px;
	background: #fff;
	cursor: pointer;
	position: relative;
	margin: 0;
}

.ub-free-choice-radio:checked {
	background: #46b450;
	border-color: #46b450;
}

.ub-free-choice-radio:checked::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 12px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg);
}

.ub-free-choice-details {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em;
	font-size: 0.95em;
}

.ub-free-choice-original-price {
	color: #999;
	font-size: 0.9em;
}

.ub-free-choice-free-label {
	display: inline-block;
	padding: 1px 8px;
	background: #46b450;
	color: #fff;
	border-radius: 3px;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Cart/Checkout block — bundle items layout
   -------------------------------------------------------------------------- */
.ub-bundle-cart-details {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
}

.ub-bundle-cart-details span[aria-hidden="true"] {
	display: none;
}

/* Block cart/checkout — hide the "↳:" key label once bundle-cart.js has
   tagged the container; the child list itself now carries its own "↳"
   markers and stacks via hard <br> breaks in the value. */
.ub-bundle-cart-details .wc-block-components-product-details__name {
	display: none;
}

/* Each child now ships as one <span class="ub-cart-child"> per line, joined
   by <br>, so the list stacks regardless of template or theme. */
.ub-cart-child {
	font-size: 13px;
	line-height: 1.5;
}

/* Classic cart/checkout template — the bundle children render as a single
   <dl class="variation"> "↳" (dt) / list (dd) pair. Hide the dt label
   (dropping its hardcoded colon) and let the <br>-separated children stack
   inside the one dd. */
.ub-bundle-cart-item dl.variation {
	margin: 0.35em 0 0;
	font-size: 13px;
}

.ub-bundle-cart-item dl.variation dt {
	display: none;
}

.ub-bundle-cart-item dl.variation dd {
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	white-space: normal;
}

.ub-bundle-cart-item dl.variation dd p {
	display: inline;
	margin: 0;
	font-size: 13px;
}