/**
 * CWS-Suite mini cart — Jasmin Maziva.
 *
 * Companion to mini-cart.php, and it carries more than that file does: the
 * drawer shell (.cws-cart-wrap and everything down to .cws-cart-item-content,
 * plus the footer with the total and the two buttons) is printed once on
 * wp_footer by the cart widget, so CSS is the only way to reach it. That is why
 * these selectors start at .cws-cart-wrap rather than at a widget wrapper —
 * the drawer lives outside every widget's wrapper.
 *
 * The [class] on that root is a specificity bump, not a filter: it matches the
 * same element and adds (0,1,0). It is there because Elementor enqueues a
 * widget's stylesheet when the widget renders, which puts the plugin's CSS
 * AFTER a theme stylesheet in the document — so every rule of ours that merely
 * tied on specificity would lose the cascade. With the bump, load order stops
 * mattering, and the Elementor kit's (0,1,1) button rules lose to it too.
 *
 * Two consequences of the shell being the widget's:
 *
 *   - the panel's width, background, border and shadow are Elementor Style
 *     controls on the cart widget (they target .cws-cart-wrap .cws-cart-content
 *     unscoped). This file leaves those alone rather than fighting whatever the
 *     editor is set to; the design's 428px belongs in the widget's Panel Width;
 *   - the design's "Ukupno (bez PDV-a)" line and the "Uključuje X € PDV-a" note
 *     under the total have no element to live in — the shell prints one label
 *     and one value — so the footer here is the design's grand-total row only.
 *
 * Radius is 0 throughout — the squared brand look is the point of the design,
 * not an oversight. Same as loop-card.css and filters-panel.css.
 *
 * Manrope is what the design uses. Loading a web font is the theme's call, so
 * nothing here sets font-family and the drawer inherits the theme's.
 */

.cws-cart-wrap[class] {
	--jm-ink:        #16333f;
	--jm-body:       #5c727b;
	--jm-ink-3:      #7c8d95;
	--jm-muted:      #9bacb4;
	--jm-muted-2:    #b6c3c9;

	--jm-accent:     #0b7da9;
	--jm-accent-d:   #096a90;

	--jm-green:      #7cb342;
	--jm-green-h:    #6aa236;
	--jm-green-lbl:  #6f9e34;

	--jm-line:       #e2e9ec;
	--jm-line-2:     #eef2f4;

	--jm-surface:    #ffffff;
	--jm-panel:      #f7fafb;
	--jm-media-bg:   #f6f8f9;
	--jm-tint:       #f2f8fb;
	--jm-danger:     #fdeceb;
}

.cws-cart-wrap[class] *,
.cws-cart-wrap[class] *::before,
.cws-cart-wrap[class] *::after {
	box-sizing: border-box;
}

/*
 * mini-cart.php wraps every icon it renders in span.jm-ico and the box lives on
 * that span, never on the <svg>. The theme sets `svg { width: 100%;
 * height: 100% }` site wide, and the plugin repeats it for the stepper, remove
 * and close icons, so an svg sizing itself would be overruled either way — this
 * way the rules agree and the svg simply fills the box it is given.
 *
 * The drawer's close button is the widget's own markup, not this template's, so
 * it has no wrapper and is still sized on the svg further down.
 */
.cws-cart-wrap[class] .jm-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	line-height: 0;
}

.cws-cart-wrap[class] .jm-ico svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* The design's scrim: cool and deep rather than neutral black. */
.cws-cart-wrap[class] {
	background: rgba(11, 32, 41, .55);
	color: var(--jm-ink);
}

/* ------------------------------------------------------------- header ------ */

/*
 * The shell scrolls the whole items column (overflow-y: scroll on
 * .cws-cart-items-wrap), which would take the title with it. The scroll is
 * moved down onto the row list so the title becomes a fixed header — which is
 * also what gives the close button something stable to be pinned to.
 */
.cws-cart-wrap[class] .cws-cart-items-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	height: auto;
	min-height: 0;
	overflow: hidden;
}

.cws-cart-wrap[class] .cws-cart-title {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	padding: 14px 60px 14px 24px;
	border-bottom: 1px solid var(--jm-line-2);
}

.cws-cart-wrap[class] .cws-cart-title img {
	max-height: 30px;
	width: auto;
	display: block;
}

.cws-cart-wrap[class] .cws-cart-item-content {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/*
 * The plugin ships the close button as a bare absolute 20px box with white
 * strokes and no offsets, so it lands wherever its static position happened to
 * be. Pinned to the header here, in the design's ink.
 */
.cws-cart-wrap[class] .cws-close-minicart {
	position: absolute;
	top: 14px;
	right: 16px;
	z-index: 2;
	width: 36px;
	height: 36px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border-radius: 0;
	transition: background .15s;
}

.cws-cart-wrap[class] .cws-close-minicart:hover {
	background: var(--jm-tint);
}

.cws-cart-wrap[class] .cws-close-minicart svg {
	width: 18px;
	height: 18px;
}

.cws-cart-wrap[class] .cws-close-minicart svg path {
	stroke: var(--jm-body);
	stroke-width: 2.4px;
}

/* -------------------------------------------------------- the row list ----- */

.cws-cart-wrap[class] .jm-mini-head {
	display: flex;
	align-items: center;
	padding: 14px 24px 0;
}

.cws-cart-wrap[class] .jm-mini-head__count {
	display: inline-block;
	padding: 4px 9px;
	background: #eaf4f9;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jm-accent);
}

.cws-cart-wrap[class] .cws-minicart-item-wrap {
	padding: 0;
}

.cws-cart-wrap[class] .jm-mini {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr);
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--jm-line-2);
}

.cws-cart-wrap[class] .cws-minicart-item-wrap:last-child .jm-mini {
	border-bottom: 0;
}

.cws-cart-wrap[class] .minicart-item-image.jm-mini__media {
	width: 68px;
	height: 68px;
	max-width: none;
	border: 1px solid var(--jm-line);
	background: var(--jm-media-bg);
	overflow: hidden;
}

.cws-cart-wrap[class] .minicart-item-image.jm-mini__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	margin: 0;
	border-radius: 0;
}

/*
 * .minicart-item-data is where the quantity handlers are bound; the plugin
 * lays it out as a spaced column. This design wants a two-row stack, so only
 * the gap changes.
 */
.cws-cart-wrap[class] .minicart-item-data.jm-mini__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: flex-start;
	min-width: 0;
}

.cws-cart-wrap[class] .jm-mini__top {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.cws-cart-wrap[class] .jm-mini__id {
	flex: 1;
	min-width: 0;
}

.cws-cart-wrap[class] .jm-mini__brand {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: var(--jm-green-lbl);
}

.cws-cart-wrap[class] .minicart-item-name.jm-mini__name {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -.1px;
	color: var(--jm-ink);
	text-decoration: none;
	text-wrap: pretty;
}

.cws-cart-wrap[class] .minicart-item-name.jm-mini__name:hover {
	color: var(--jm-accent);
}

.cws-cart-wrap[class] .jm-mini__attrs {
	margin-top: 5px;
}

.cws-cart-wrap[class] .jm-mini__attrs .single-cart-item-attr {
	font-size: 11.5px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--jm-muted);
}

.cws-cart-wrap[class] .jm-mini__attrs .attr-name {
	font-weight: 700;
	margin-right: 4px;
}

.cws-cart-wrap[class] .jm-mini__attrs .attr-value {
	font-weight: 600;
	color: var(--jm-body);
}

/* --- remove ------------------------------------------------------------ */

/*
 * The plugin ships this as a red circle pinned to the row's top-left corner
 * (position:absolute, border-radius:100%, white 5px strokes). The design
 * replaces it with a discreet in-row trash, so every one of those declarations
 * has to be taken back — position and offsets included, or the button floats
 * out of the row it belongs to.
 */
.cws-cart-wrap[class] .cws-remove-from-cart.jm-mini__remove {
	position: static;
	top: auto;
	left: auto;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border-radius: 0;
	cursor: pointer;
	color: var(--jm-muted-2);
	transition: background .15s;
}

.cws-cart-wrap[class] .cws-remove-from-cart.jm-mini__remove:hover {
	background: var(--jm-danger);
}

.cws-cart-wrap[class] .cws-remove-from-cart.jm-mini__remove .jm-ico {
	width: 16px;
	height: 16px;
}

.cws-cart-wrap[class] .cws-remove-from-cart.jm-mini__remove svg path {
	stroke: var(--jm-muted-2);
	stroke-width: 2px;
	transition: stroke .15s;
}

.cws-cart-wrap[class] .cws-remove-from-cart.jm-mini__remove:hover svg path {
	stroke: #d0574f;
}

/* --- quantity + price -------------------------------------------------- */

.cws-cart-wrap[class] .minicart-price-data.jm-mini__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.cws-cart-wrap[class] .cws-quantity-input.jm-mini__stepper {
	display: flex;
	align-items: center;
	height: 38px;
	background: none;
	border: 1.5px solid var(--jm-line);
}

.cws-cart-wrap[class] .jm-mini__stepper .jm-mini__step {
	width: 34px;
	height: 100%;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--jm-accent);
	transition: background .15s;
}

.cws-cart-wrap[class] .jm-mini__stepper .jm-mini__step:hover {
	background: var(--jm-tint);
}

/*
 * The plugin paints the +/- white on a primary-coloured hover
 * (.cws-decrease-quantity:hover path, (0,2,1)). This design tints the cell
 * instead and keeps the icon blue, so the stroke is taken back at (0,3,1).
 */
.cws-cart-wrap[class] .jm-mini__stepper .jm-mini__step:hover path {
	stroke: currentColor;
}

.cws-cart-wrap[class] .jm-mini__stepper .jm-mini__step .jm-ico {
	width: 14px;
	height: 14px;
}

.cws-cart-wrap[class] .jm-mini__stepper .jm-mini__step .jm-ico svg {
	stroke-width: 2.6;
}

.cws-cart-wrap[class] .jm-mini__stepper .cws-quantity {
	min-width: 28px;
	padding: 0 2px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--jm-ink);
}

.cws-cart-wrap[class] .jm-mini__prices {
	text-align: right;
}

.cws-cart-wrap[class] .cws-single-item-total-price.jm-mini__line {
	display: block;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.3px;
	color: var(--jm-ink);
}

.cws-cart-wrap[class] .jm-mini__each {
	display: block;
	margin-top: 2px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--jm-muted);
	white-space: nowrap;
}

/* ------------------------------------------------------- empty state ------- */

/*
 * cws_suite_get_cart_items() only renders rows server-side for a non-empty
 * cart, so this notice is always the client's own — the same markup whether it
 * comes from the cache, from a response, or from the no-data branch. Styling it
 * here is what keeps the empty drawer on-design in all three.
 */
.cws-cart-wrap[class] .empty-cart-notice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	padding: 40px 40px 60px;
	text-align: center;
}

.cws-cart-wrap[class] .empty-cart-notice::before {
	content: "";
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	background-color: #c7d3d8;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14h18V6l-3-4z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14h18V6l-3-4z'/%3E%3Cpath d='M3 6h18M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}

.cws-cart-wrap[class] .empty-cart-notice p {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--jm-ink);
}

/*
 * The design's second line. The heading above it is the plugin's localized
 * string, so this is the only part of the empty state a stylesheet can add —
 * the design's "Idi u trgovinu" button would need markup the client owns.
 */
.cws-cart-wrap[class] .empty-cart-notice::after {
	content: "Pretražite maziva, aditive i sredstva za održavanje ili odaberite brend.";
	max-width: 300px;
	margin-top: 8px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--jm-ink-3);
}

/* ------------------------------------------------------------- footer ------ */

.cws-cart-wrap[class] .cws-cart-footer {
	padding: 18px 24px 22px;
	border-top: 1px solid var(--jm-line);
	background: var(--jm-surface);
}

.cws-cart-wrap[class] .minicart-total-data {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 18px;
}

.cws-cart-wrap[class] .minicart-total {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--jm-body);
}

.cws-cart-wrap[class] .minicart-value {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -.8px;
	color: var(--jm-ink);
}

.cws-cart-wrap[class] .cws-cart-footer .minicartcart-actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/*
 * (0,2,0) — beats .elementor-kit-N .elementor-button (0,1,1) cleanly, and the
 * .view-cart pair below beats the plugin's own neutral-outline rule at (0,3,0).
 */
.cws-cart-wrap[class] .cws-cart-checkout-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 52px;
	padding: 0 14px;
	border: 0;
	border-radius: 0;
	background: var(--jm-green);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background .16s, color .16s, border-color .16s;
}

.cws-cart-wrap[class] .cws-cart-checkout-action:hover {
	background: var(--jm-green-h);
	color: #fff;
}

.cws-cart-wrap[class] .cws-cart-checkout-action.view-cart {
	border: 1.5px solid var(--jm-ink);
	background: transparent;
	color: var(--jm-ink);
}

.cws-cart-wrap[class] .cws-cart-checkout-action.view-cart:hover {
	border-color: var(--jm-ink);
	background: var(--jm-tint);
	color: var(--jm-ink);
}

/* The chevron the design puts on the checkout action only. */
.cws-cart-wrap[class] .cws-cart-checkout-action:not(.view-cart)::after {
	content: "";
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* -------------------------------------------------------- responsive ------- */

@media (max-width: 480px) {
	.cws-cart-wrap[class] .cws-cart-title {
		min-height: 56px;
		padding: 12px 56px 12px 18px;
	}

	.cws-cart-wrap[class] .cws-close-minicart {
		top: 11px;
		right: 12px;
		width: 34px;
		height: 34px;
	}

	.cws-cart-wrap[class] .jm-mini-head {
		padding: 12px 18px 0;
	}

	.cws-cart-wrap[class] .jm-mini {
		grid-template-columns: 62px minmax(0, 1fr);
		gap: 13px;
		padding: 16px 18px;
	}

	.cws-cart-wrap[class] .minicart-item-image.jm-mini__media {
		width: 62px;
		height: 62px;
	}

	.cws-cart-wrap[class] .minicart-item-name.jm-mini__name {
		font-size: 13.5px;
	}

	.cws-cart-wrap[class] .cws-quantity-input.jm-mini__stepper {
		height: 40px;
	}

	.cws-cart-wrap[class] .jm-mini__stepper .jm-mini__step {
		width: 36px;
	}

	.cws-cart-wrap[class] .cws-single-item-total-price.jm-mini__line {
		font-size: 15.5px;
	}

	.cws-cart-wrap[class] .cws-cart-footer {
		padding: 14px 18px 24px;
	}

	.cws-cart-wrap[class] .minicart-total-data {
		padding-bottom: 14px;
	}

	.cws-cart-wrap[class] .minicart-value {
		font-size: 22px;
		letter-spacing: -.6px;
	}

	.cws-cart-wrap[class] .cws-cart-footer .minicartcart-actions {
		gap: 10px;
	}

	.cws-cart-wrap[class] .cws-cart-checkout-action {
		height: 50px;
	}
}