/* ==========================================================================
   Mini basket - offcanvas sidebar
   --------------------------------------------------------------------------
   Markup: ext/yavi-admin/templates/client/html/basket/mini/body-yavi.php

   Stands apart from shop-custom.css because the drawer is not the shop's
   alone: components/yavi/header.blade.php renders the widget on the portal
   too, and the portal loads yavi.css instead. The header component therefore
   pulls this file in itself, so shop and portal always show the same drawer -
   in shop-custom.css it would have left the portal side unstyled.

   Every rule goes through ".basket-mini .zeynep.yavi-basket" (0,3,0) rather
   than plain class names: basket-mini.css, the widget's own stylesheet, is
   injected right before this one and would win every tie at equal
   specificity. A handful of its ::before/::after glyphs (close cross, trash
   can, the "= " in front of the total) are switched off the same way - the
   layout draws those as inline SVG so their size and colour are controllable.

   The panel is a flex column: header and footer keep their height, the item
   list takes the rest and scrolls on its own.
   ========================================================================== */

.basket-mini .aimeos-overlay-offscreen {
	background-color: rgba(11, 22, 38, .42);
}

.basket-mini .zeynep.yavi-basket {
	width: 352px;
	right: -352px;
	background-color: #fff;
	box-shadow: -18px 0 40px rgba(11, 22, 38, .22);
	color: #1a2438;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-align: start;
}

[dir="rtl"] .basket-mini .zeynep.yavi-basket {
	left: -352px;
	right: unset;
	box-shadow: 18px 0 40px rgba(11, 22, 38, .22);
}

.basket-mini .zeynep.yavi-basket.opened {
	transform: translateX(-352px);
}

[dir="rtl"] .basket-mini .zeynep.yavi-basket.opened {
	transform: translateX(352px);
}

/* Below the panel width the drawer would hang off the screen edge. */
@media (max-width: 400px) {
	.basket-mini .zeynep.yavi-basket {
		width: 100vw;
		right: -100vw;
	}

	[dir="rtl"] .basket-mini .zeynep.yavi-basket {
		left: -100vw;
		right: unset;
	}

	.basket-mini .zeynep.yavi-basket.opened {
		transform: translateX(-100vw);
	}

	[dir="rtl"] .basket-mini .zeynep.yavi-basket.opened {
		transform: translateX(100vw);
	}
}

/* Empty and filled state both live in the DOM so the JSON-API update can
   switch between them without rebuilding markup - see basket-mini-yavi.js. */
.basket-mini .zeynep.yavi-basket.is-empty .basket,
.basket-mini .zeynep.yavi-basket.is-empty .basket-footer,
.basket-mini .zeynep.yavi-basket.is-empty .header .count,
.basket-mini .zeynep.yavi-basket.is-filled .basket-empty,
.basket-mini .zeynep.yavi-basket.is-filled .basket-secure {
	display: none;
}


/* Header */

.basket-mini .zeynep.yavi-basket > .header {
	flex-shrink: 0;
	height: 60px;
	padding: 0 8px 0 20px;
	background-color: #16223a;
	color: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.basket-mini .zeynep.yavi-basket .header .title {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.basket-mini .zeynep.yavi-basket .header .title svg {
	color: #e3c58f;
	flex-shrink: 0;
}

.basket-mini .zeynep.yavi-basket .header .name {
	padding: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: start;
	color: #fff;
	cursor: auto;
}

.basket-mini .zeynep.yavi-basket .header .count {
	padding: 2px 8px;
	border-radius: 100px;
	background-color: #c2790e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}

/* float/opacity/text-shadow are reset explicitly: on the portal ".close" is
   also a Bootstrap 4 utility (floated, 50% opaque), which would leave the
   cross washed out and out of line. */
.basket-mini .zeynep.yavi-basket .header .close {
	width: 40px;
	height: 40px;
	padding: 0;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	opacity: 1;
	text-shadow: none;
	color: #9ea8b8;
	text-decoration: none;
}

.basket-mini .zeynep.yavi-basket .header .close:hover,
.basket-mini .zeynep.yavi-basket .header .close:not(:disabled):not(.disabled):hover {
	opacity: 1;
	color: #fff;
}

.basket-mini .zeynep.yavi-basket .header .close::before {
	content: none;
}


/* Item list */

.basket-mini .zeynep.yavi-basket .basket {
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	overflow-y: auto;
}

.basket-mini .zeynep.yavi-basket .product-item {
	display: flex;
	gap: 14px;
	padding: 18px 20px;
	border-bottom: 1px solid #f1ede6;
}

.basket-mini .zeynep.yavi-basket .product-item.prototype {
	display: none;
}

.basket-mini .zeynep.yavi-basket .product-item .image {
	width: 58px;
	height: 58px;
	flex-shrink: 0;
	border-radius: 7px;
	background-color: #f2efe9;
	overflow: hidden;
}

.basket-mini .zeynep.yavi-basket .product-item .image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.basket-mini .zeynep.yavi-basket .product-item .detail {
	flex: 1 1 auto;
	min-width: 0;
}

.basket-mini .zeynep.yavi-basket .product-item .name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-align: start;
	color: #1a2438;
}

.basket-mini .zeynep.yavi-basket .product-item .code {
	margin-top: 3px;
	font-size: 11px;
	color: #8a8f98;
}

.basket-mini .zeynep.yavi-basket .product-item .line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 9px;
}


/* Quantity stepper */

.basket-mini .zeynep.yavi-basket .product-item .quantity {
	display: flex;
	align-items: center;
	height: 26px;
	flex-shrink: 0;
	border: 1px solid #e2ddd4;
	border-radius: 5px;
	overflow: hidden;
}

.basket-mini .zeynep.yavi-basket .product-item .qty-btn {
	width: 24px;
	height: 100%;
	padding: 0;
	border: 0;
	background-color: #fbf8f3;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
}

.basket-mini .zeynep.yavi-basket .product-item .qty-btn:hover {
	color: #c2790e;
}

.basket-mini .zeynep.yavi-basket .product-item .qty-btn:disabled {
	opacity: .45;
	cursor: default;
}

.basket-mini .zeynep.yavi-basket .product-item .qty-value {
	width: 28px;
	border-inline-start: 1px solid #f1ede6;
	border-inline-end: 1px solid #f1ede6;
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
}

.basket-mini .zeynep.yavi-basket .product-item .price {
	font-size: 14px;
	font-weight: 700;
	color: #c2790e;
	text-align: end;
	white-space: nowrap;
}

/* Products the basket plugins mark immutable (e.g. bundled items) carry no
   stepper and no bin - their row still has to line up with the others. */
.basket-mini .zeynep.yavi-basket .product-item.immutable .quantity {
	border-color: transparent;
	background: none;
}

.basket-mini .zeynep.yavi-basket .product-item.immutable .qty-btn {
	display: none;
}

.basket-mini .zeynep.yavi-basket .product-item.immutable .qty-value {
	border: 0;
	width: auto;
	min-width: 28px;
}

.basket-mini .zeynep.yavi-basket .product-item .action {
	flex-shrink: 0;
}

.basket-mini .zeynep.yavi-basket .product-item .delete {
	width: 26px;
	height: 26px;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	color: #c4526e;
}

.basket-mini .zeynep.yavi-basket .product-item .delete:hover {
	color: #9d3550;
}

.basket-mini .zeynep.yavi-basket .product-item .delete::after {
	content: none;
}

.basket-mini .zeynep.yavi-basket .product-item .delete.hidden {
	display: none;
}


/* Totals */

.basket-mini .zeynep.yavi-basket .basket-footer {
	flex-shrink: 0;
	border-top: 1px solid #eae6df;
}

.basket-mini .zeynep.yavi-basket .sums {
	padding: 18px 20px 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

/* display:contents, not a nested flex column: the tax rows then sit in the
   same gap rhythm as subtotal and shipping, and a basket without tax leaves
   no empty box behind (":empty" would not match - the loop emits whitespace). */
.basket-mini .zeynep.yavi-basket .taxes {
	display: contents;
}

.basket-mini .zeynep.yavi-basket .sums .subtotal,
.basket-mini .zeynep.yavi-basket .sums .delivery,
.basket-mini .zeynep.yavi-basket .sums .tax {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12.5px;
	color: #6b7280;
}

.basket-mini .zeynep.yavi-basket .sums .price {
	white-space: nowrap;
	text-align: end;
}

.basket-mini .zeynep.yavi-basket .basket-footer .total {
	margin: 14px 20px 0;
	padding: 12px 14px;
	background-color: #fbf4e9;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-weight: 400;
}

.basket-mini .zeynep.yavi-basket .basket-footer .total .name {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #1a2438;
}

.basket-mini .zeynep.yavi-basket .basket-footer .total .name::before {
	content: none;
}

.basket-mini .zeynep.yavi-basket .basket-footer .total .price {
	font-size: 20px;
	font-weight: 800;
	color: #c2790e;
	white-space: nowrap;
}


/* Actions */

.basket-mini .zeynep.yavi-basket .to-basket {
	margin: 0;
	padding: 16px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.basket-mini .zeynep.yavi-basket .btn-checkout {
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 5px;
	background-image: linear-gradient(135deg, #e4a034, #c2790e);
	box-shadow: 0 5px 14px rgba(194, 121, 14, .26);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
}

.basket-mini .zeynep.yavi-basket .btn-checkout:hover {
	color: #fff;
	filter: brightness(.96);
}

.basket-mini .zeynep.yavi-basket .btn-basket {
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #16223a;
	border-radius: 5px;
	background-color: #fff;
	color: #16223a;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .04em;
	text-decoration: none;
}

.basket-mini .zeynep.yavi-basket .btn-basket:hover {
	background-color: #16223a;
	color: #fff;
}


/* Empty state */

.basket-mini .zeynep.yavi-basket .basket-empty {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 32px;
	text-align: center;
}

.basket-mini .zeynep.yavi-basket .basket-empty .icon-circle {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background-color: #fbf4e9;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #c2790e;
}

.basket-mini .zeynep.yavi-basket .basket-empty .headline {
	margin-top: 20px;
	font-size: 17px;
	font-weight: 700;
	color: #1a2438;
}

.basket-mini .zeynep.yavi-basket .basket-empty p {
	max-width: 230px;
	margin: 9px 0 0;
	font-size: 13.5px;
	line-height: 1.65;
	color: #8a8f98;
}

.basket-mini .zeynep.yavi-basket .basket-empty .btn-checkout {
	height: 44px;
	margin-top: 24px;
	padding: 0 28px;
	font-size: 14px;
}

.basket-mini .zeynep.yavi-basket .basket-secure {
	flex-shrink: 0;
	border-top: 1px solid #eae6df;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 12px;
	color: #8a8f98;
}

.basket-mini .zeynep.yavi-basket .basket-secure svg {
	color: #2fae73;
	flex-shrink: 0;
}