/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 2025   *
* / /_\ | | _____  _| |_/ /_ __ __ _ _ __   __| |_ _ __   __ _   | |_ ___  __ _ _ __ ___   *
* |  _  | |/ _ \ \/ / ___ \ '__/ _` | '_ \ / _` | | '_ \ / _` |  | __/ _ \/ _` | '_ ` _ \  *
* | | | | |  __/>  <| |_/ / | | (_| | | | | (_| | | | | | (_| |  | ||  __/ (_| | | | | | | *
* \_| |_/_|\___/_/\_\____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |  \___\___|\__,_|_| |_| |_| *
*                                                         __/ |                            *
*                                                        |___/                             *
* ---------------------------------------------------------------------------------------- *
* This is commercial software, only users who have purchased a valid license and accept    *
* to the terms of the License Agreement can install and use this program.                  *
* ---------------------------------------------------------------------------------------- *
* website: https://cs-cart.alexbranding.com                                                *
*   email: info@alexbranding.com                                                           *
*******************************************************************************************/
/* ==========================================================================
Buy together
========================================================================== */

.ut2__buy-together {
	background-color: var(--fill-gray);
	border-radius: var(--border-radius-box);

	@media (max-width: 767px) {
		border: 1px solid @base;
	}

	&.owl-carousel .owl-controls .owl-buttons {
		.owl-prev,
		.owl-next {
			html[dir="rtl"] & {
				transform: scaleX(-1);
			}
		}
	}

	.subheader {
		padding-block-start: var(--gap-sm);
		font-size: var(--font-size-large);
		font-weight: bold;
		padding-inline: var(--gap-xs);
	}

	.owl-pagination {
		position: relative !important;
		bottom: 8px !important;
	}
}

.ut2-bt {
	margin: var(--gap-xs);
	background: @general_bg_color;
	border-radius: calc(var(--border-radius-box) / 2);

	&__products {
		display: flex;
		padding-block: var(--gap-sm);
		width: fit-content;
		margin-left: auto;
		margin-right: auto;

		@media (max-width: 767px) {
			flex-flow: column;
		}
	}

	&__product {
		display: flex;
	    align-items: center;

		@media (min-width: 768px) {
			flex-flow: column;
			padding-inline: 2%;
			min-height: 200px;
			max-width: 250px;
			flex: 1 0 200px;
		}
		@media (max-width: 767px) {
			padding-inline: var(--gap-s);
			gap: var(--gap-s);
		}
	}

	&__product-image {
		overflow: hidden;

		@media (max-width: 767px) {
			flex: 1 0 auto;
			max-width: min(80px, 15vw);
		}

		.ut2_product_image_mask() when not (@general_bg_image = transparent) {
			background: @general_bg_image;
		}
		.ut2_product_image_mask() when (@abt__ut2_product_list_mask_images_gallery = true) and (@general_bg_color = #ffffff) {

			.ut2_round() when (@abt__ut2_general_use_rounding = little) {
				border-radius: calc(var(--border-radius-box) - 2px);
			}
			.ut2_round() when (@abt__ut2_general_use_rounding = full) {
				border-radius: calc(var(--border-radius-box) - 6px);
			}
			.ut2_round();

			background: lighten(@fill-gray-box, 0.5%);

			.ut2_product_image_mask_bg_ready() when (@general_bg_color = #ffffff) {
				img.ty-pict {
					mix-blend-mode: multiply;
					filter: brightness(1.05);
				}
			}
			.ut2_product_image_mask_bg_ready();
		}
		.ut2_product_image_mask();
	}

	&__plus {
		font-family: monospace;
		font-size: 20px;
		line-height: 1;
		flex-shrink: 0;
		align-self: center;
		align-content: center;
		text-align: center;

		@media (min-width: 768px) {
			border-radius: 50%;
			height: var(--min-height-button);
			width: var(--min-height-button);
			background: var(--fill-gray);
		}
	}

	&__product-name {
		padding: var(--gap-s) 0 var(--gap-xxs);

		@media (min-width: 768px) {
			text-align: center;
		}
		@media (max-width: 767px) {
			flex: 1;
		}

		a {
			color: @font;
			.ut2_line_clamp(2);
		}
	}

	&__price-block {
		display: flex;
		justify-content: center;
		padding-block: var(--gap-sm);
		padding-inline: var(--gap-sm);
		width: 100%;

		border-top: 1px solid @base;
	}
	&__price-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: var(--gap-s);

		@media (max-width: 767px) {
			justify-content: center;
		}
	}
	&__product-price {
		display: flex;
		flex-flow: column;
		text-align: center;

		@media (max-width: 767px) {
			text-align: end;
		}

		.price {
			font-size: var(--font-size-medium);
			font-family: @price_font;
			font-weight: @price_font_weight;
		}
	}
	.ut2-bt-price {
		display: inline-flex;
		gap: var(--gap-s);

		> div {
			display: flex;
			align-items: center;
			gap: var(--gap-xs);
		}

		&__title {
			white-space: nowrap;
			color: var(--color-font-lighten);
		}
		&__new {
			.price {
				font-family: @price_font;
				font-weight: @price_font_weight;
				font-size: @price_font_size;
				color: @price;
			}
		}
	}

	.count {
		display: inline-block;
		position: relative;
		align-content: center;
		margin: 0;
		margin-inline-end: var(--gap-xxs);
		top: -2px;
		left: 0;
		box-shadow: 0 0 0 1px var(--color-font-lighten-max);
		background: unset;
		color: var(--color-font-lighten);
	}

	&__product-options {
		margin-bottom: var(--gap-xs);
		zoom: .8;
	}
	.ut2-bt-option {
		color: var(--color-font-lighten);
		text-align: center;
		zoom: .8;

		& + .ut2-bt__product-price {
			padding-top: var(--gap-xxs);
		}
	}
}

.ty-buy-together-cart-items__list {
    width: 100%;
    padding-left: 55px;
    padding-bottom: var(--gap-s);
    margin-top: -20px;
    
    &:before {
        display: inline-block;
        position: relative;
        content: "+";
        height: 15px;
        width: 15px;
        line-height: 16px;
        border-radius: 50%;
        background: @base;
        text-align: center;
        margin-top: 7px;
        left: -7px;
    } 

    &-item {
        display: flex;
        min-height: 42px;
        padding-bottom: var(--gap-xxs);
        
        &:not(:hover) {
            opacity: .7;
        }
    }
    .ty-cart-items__list-item-desc {
        a {
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            display: flex;
            display: -ms-flexbox;
            display: -webkit-box;
            text-overflow: ellipsis;
            font-size: var(--font-size-normal);
            min-height: 42px;
            max-height: 42px;
            overflow: hidden;
            padding-bottom: 0;
        }
        > p {
            display: none;
        }
    }
}


.ty-buy-together-notification {
	&__item {
		margin-left: var(--gap-s);
		display: flex;
	    justify-content: space-between;
	    padding: var(--gap-xxs) 0;
	
		.ty-product-options {
			margin-bottom: 0;
			&__info {
				margin: var(--gap-xs) 0;
			}
		}
	}
	&__items, &__items &__items {
		margin-left: 0;
	}
}

.ui-dialog.ui-widget[aria-describedby^="content_buy_together_options_"] {
	position: fixed;
	top: 50% !important;
	left: 50% !important;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* Url: dispatch=checkout.checkout */
/* Template: templates/addons/buy_together/hooks/block_checkout/product_extra.post.tpl */
.ty-buy-together-info {
    margin-top: var(--gap-xs);
}
.ty-buy-together-info__product {
    margin: 0;
    font-size: 120%;
    font-weight: bold;
}
.ty-buy-together-info__item {
    padding: var(--gap-xs) 0;
    border-bottom: 1px solid #e5e5e5;
    color: var(--color-font-lighten);
}
.ty-buy-together-info__item:last-child {
    border-bottom: 0;
}

.ty-buy-together-popup {
    margin-bottom: var(--gap-s);
}
/* /Buy together */