/* custom-checkout: sticky cart header icon + dropdown panel */

.cc-sticky-cart-icon {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer !important;
	color: #1a2b3c;
	background: none !important;
	border: none !important;
	padding: 4px !important;
}

/* Physical top-right corner on purpose (not logical inset-inline-end) —
   badge position should read as "top-right of the icon" regardless of
   the page's text direction, matching common cart-badge conventions. */
.cc-sticky-cart-badge {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var( --color-error, #d84040 );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	min-width: 16px;
	height: 16px;
	border-radius: 8px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

.cc-sticky-cart-panel {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	margin-top: 0;
	/* Hardcoded white/dark-text on purpose (not var(--color-surface)) —
	   this panel should always read clearly regardless of site-core's
	   dark/light mode state, since it's a transient action panel, not
	   page content. */
	background: #ffffff !important;
	color: #1a2b3c !important;
	border: none !important;
	border-top: 1px solid #e2e5ea !important;
	border-radius: 0 !important;
	box-shadow: 0 12px 32px rgba( 0, 0, 0, 0.18 );
	z-index: 99999;
	font-family: var( --site-font, "IRANYekanX", Tahoma, sans-serif );
}

.cc-sticky-cart-panel-inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 24px 32px;
	max-height: 70vh;
	overflow-y: auto;
	box-sizing: border-box;
}

.cc-sticky-cart-panel *:focus,
.cc-sticky-cart-panel *:focus-visible {
	outline: none !important;
}

.cc-sticky-items {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cc-sticky-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid #eef0f3 !important;
}

.cc-sticky-item:last-child {
	border-bottom: none !important;
}

/* Container is fixed-size and centers the image via object-fit:contain
   (not "cover") — cover was cropping the image, cutting off its height.
   Contain shows the WHOLE image, scaled down to fit, centered. */
.cc-sticky-item-img-box {
	width: 150px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px !important;
	border: 1px solid #e2e5ea !important;
	background: #ffffff;
	flex-shrink: 0;
	overflow: hidden;
}

.cc-sticky-item-img-box img {
	max-width: 100%;
	max-height: 170px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.cc-sticky-item-noimg {
	width: 150px;
	height: 150px;
	border-radius: 6px !important;
	border: 1px solid #e2e5ea !important;
	background: #f4f5f7;
	flex-shrink: 0;
}

.cc-sticky-item-info {
	flex: 1;
	min-width: 0;
}

.cc-sticky-item-name {
	font-size: 13px;
	font-weight: 600;
	color: #1a2b3c;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-bottom: 4px;
}

.cc-sticky-item-total {
	font-size: 13px;
	font-weight: 700;
	color: #1a2b3c;
	white-space: nowrap;
}

.cc-sticky-qty-stepper {
	display: flex !important;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.cc-sticky-qty-btn {
	all: unset;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px !important;
	min-width: 14px;
	line-height: 1 !important;
	cursor: pointer !important;
	background: var( --color-primary, #2f6fed ) !important;
	color: #ffffff !important;
	border-radius: 6px !important;
	font-size: 14px;
	font-weight: 700;
}

.cc-sticky-qty-btn:hover {
	background: var( --color-primary-hover, #1f5adb ) !important;
	color: #ffffff !important;
}

.cc-sticky-qty-value {
	font-size: 13px;
	min-width: 14px;
	text-align: center;
}

.cc-sticky-remove-item {
	all: unset;
	display: flex !important;
	align-items: center;
	justify-content: center;
	color: #9aa4b2 !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	flex-shrink: 0;
	padding: 4px !important;
	margin: 0 !important;
}

.cc-sticky-remove-item:hover {
	color: #d84040 !important;
}

.cc-sticky-subtotal {
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 14px;
	color: #1a2b3c;
	border-top: 1px solid #e2e5ea !important;
	margin-top: 12px;
	padding-top: 12px;
}

.cc-sticky-actions {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	margin-top: 14px;
}

.cc-sticky-view-cart-btn {
	display: block;
	text-align: center;
	padding: 11px 18px;
	background: transparent;
	color: #1a2b3c !important;
	border: 1px solid #e2e5ea !important;
	border-radius: 8px !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.cc-sticky-view-cart-btn:hover {
	border-color: var( --color-primary, #2f6fed ) !important;
	color: var( --color-primary, #2f6fed ) !important;
}

/* Deliberately compact (not full-width) and left-aligned, per the
   requested layout — sits next to "View Cart" rather than spanning
   the whole panel. */
.cc-sticky-checkout-btn {
	display: block;
	text-align: center;
	padding: 11px 18px;
	background: var( --color-primary, #2f6fed );
	color: #fff !important;
	border-radius: 8px !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.cc-sticky-checkout-btn:hover {
	background: var( --color-primary-hover, #1f5adb ) !important;
}

.cc-sticky-empty {
	color: #6b7280;
	text-align: center;
	padding: 20px 0;
	font-size: 13px;
}