/* ==========================================================
   Check Cart — Side Cart
   All rules are scoped to .cc-drawer or .cc-icon
   to prevent conflicts with theme CSS classes.
   ========================================================== */

:root {
	--cc-bg: #ffffff;
	--cc-text: #1a1a1a;
	--cc-accent: #000000;
	--cc-accent-text: #ffffff;
	--cc-btn-bg: #000000;
	--cc-btn-text: #ffffff;
	--cc-overlay: rgba(0,0,0,0.45);
	--cc-shipping-bar: #000000;
	--cc-border: #e8e8e8;
	--cc-muted: #6b7280;
	--cc-savings: #16a34a;
	--cc-radius: 12px;
	--cc-panel-width: 420px;
	--cc-transition: 0.32s cubic-bezier(0.4,0,0.2,1);
	--cc-shadow: 0 25px 60px rgba(0,0,0,0.18);
	--cc-font: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

html.cc-cart-locked,
body.cc-cart-locked {
	overflow: hidden !important;
}

/* ==========================================================
   Drawer wrapper (full-screen fixed layer)
   ========================================================== */
.cc-drawer {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999999 !important;
	pointer-events: none !important;
	font-family: var(--cc-font) !important;
	/* isolate from theme styles */
	all: initial;
	position: fixed;
	inset: 0;
	z-index: 999999;
	pointer-events: none;
	font-family: var(--cc-font);
}

.cc-drawer *,
.cc-drawer *::before,
.cc-drawer *::after {
	box-sizing: border-box !important;
}

.cc-drawer button,
.cc-drawer input[type="button"],
.cc-drawer input[type="submit"],
.cc-drawer .cc-btn,
.cc-icon.cc-cart-trigger,
.cc-shortcode-btn {
	-webkit-appearance: none !important;
	appearance: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	font-family: var(--cc-font) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.cc-drawer .cc-header__close,
.cc-drawer .cc-item__remove,
.cc-drawer .cc-qty__btn,
.cc-drawer .cc-coupon__remove,
.cc-drawer .cc-coupon__toggle,
.cc-drawer .cc-coupon__apply,
.cc-drawer .cc-cta__continue {
	-webkit-appearance: none !important;
	appearance: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
}

.cc-drawer.cc-is-open {
	pointer-events: auto !important;
}

.cc-drawer:not(.cc-is-open),
.cc-drawer:not(.cc-is-open) .cc-overlay,
.cc-drawer:not(.cc-is-open) .cc-panel {
	pointer-events: none !important;
}

/* ==========================================================
   Overlay
   ========================================================== */
.cc-drawer .cc-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--cc-overlay);
	opacity: 0 !important;
	pointer-events: none !important;
	transition: opacity var(--cc-transition);
}

.cc-drawer.cc-is-open .cc-overlay {
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* ==========================================================
   Panel
   ========================================================== */
.cc-drawer .cc-panel {
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: var(--cc-panel-width);
	max-width: 100vw;
	background: var(--cc-bg);
	color: var(--cc-text);
	display: flex;
	flex-direction: column;
	box-shadow: var(--cc-shadow);
	transform: translateX(100%);
	transition: transform var(--cc-transition);
	overflow: hidden;
}

.cc-drawer--right .cc-panel {
	right: 0;
	transform: translateX(100%);
}

.cc-drawer--left .cc-panel {
	left: 0;
	transform: translateX(-100%);
}

.cc-drawer.cc-is-open .cc-panel {
	transform: translateX(0) !important;
}

/* ==========================================================
   Header
   ========================================================== */
.cc-drawer .cc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--cc-border);
	flex-shrink: 0;
}

.cc-drawer .cc-header__title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cc-drawer .cc-header__text {
	font-size: 18px;
	font-weight: 700;
	color: var(--cc-text);
	letter-spacing: -0.01em;
	margin: 0;
	padding: 0;
	line-height: 1;
}

.cc-drawer .cc-header__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cc-accent);
	color: var(--cc-accent-text, #fff);
	border-radius: 999px;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.cc-drawer .cc-header__close {
	position: relative !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	border: none !important;
	background: transparent !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	color: var(--cc-text) !important;
	transition: background 0.15s;
	padding: 0 !important;
	margin: 0 !important;
}

.cc-drawer .cc-header__close:hover {
	background: var(--cc-border);
}

/* ==========================================================
   Shipping bar
   ========================================================== */
.cc-drawer .cc-shipping-bar {
	padding: 14px 24px;
	border-bottom: 1px solid var(--cc-border);
	flex-shrink: 0;
}

.cc-drawer .cc-shipping-bar__text {
	font-size: 13px;
	color: var(--cc-muted);
	margin: 0 0 8px;
	line-height: 1.4;
	padding: 0;
}

.cc-drawer .cc-shipping-bar--reached .cc-shipping-bar__text {
	color: var(--cc-savings);
	font-weight: 600;
}

.cc-drawer .cc-shipping-bar__track {
	height: 5px;
	background: var(--cc-border);
	border-radius: 999px;
	overflow: hidden;
}

.cc-drawer .cc-shipping-bar__fill {
	height: 100%;
	background: var(--cc-shipping-bar);
	border-radius: 999px;
	transition: width 0.5s ease;
}

/* ==========================================================
   Body
   ========================================================== */
.cc-drawer .cc-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 16px 24px;
}

.cc-drawer .cc-body::-webkit-scrollbar { width: 4px; }
.cc-drawer .cc-body::-webkit-scrollbar-track { background: transparent; }
.cc-drawer .cc-body::-webkit-scrollbar-thumb { background: var(--cc-border); border-radius: 4px; }

.cc-drawer .cc-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* ==========================================================
   Item
   ========================================================== */
.cc-drawer .cc-item {
	display: grid;
	grid-template-columns: 80px 1fr 24px;
	gap: 12px;
	align-items: start;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--cc-border);
	margin: 0;
}

.cc-drawer .cc-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cc-drawer .cc-item__image-wrap {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	text-decoration: none;
}

.cc-drawer .cc-item__image {
	width: 80px;
	height: 80px;
	object-fit: cover;
	display: block;
}

.cc-drawer .cc-item__info {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cc-drawer .cc-item__name {
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-text);
	text-decoration: none;
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.cc-drawer .cc-item__name:hover { text-decoration: underline; }

.cc-drawer .cc-item__variants {
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: var(--cc-muted);
	line-height: 1.4;
}

/* WooCommerce outputs <dl class="variation"><dt>…</dt><dd>…</dd></dl> */
.cc-drawer .cc-item__variants dl,
.cc-drawer .cc-item__variants .variation {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-drawer .cc-item__variants dl dt,
.cc-drawer .cc-item__variants .variation dt {
	font-weight: 600;
	color: var(--cc-muted);
	margin: 0;
	padding: 0;
}

.cc-drawer .cc-item__variants dl dd,
.cc-drawer .cc-item__variants .variation dd {
	margin: 0;
	padding: 0;
}

.cc-drawer .cc-item__variants dl dd p,
.cc-drawer .cc-item__variants .variation dd p {
	margin: 0;
	padding: 0;
	display: inline;
}

/* CommerceKit / ckit outputs inline <strong> + <span> — hide raw tags, show clean */
.cc-drawer .cc-item__variants strong {
	font-weight: 600;
	color: var(--cc-muted);
}

.cc-drawer .cc-item__variants [class*="ckit-chosen-attribute"] {
	color: var(--cc-muted);
}

.cc-drawer .cc-item__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 4px;
}

.cc-drawer .cc-item__price {
	font-size: 14px;
	font-weight: 700;
	color: var(--cc-text);
	text-align: right;
	line-height: 1.2;
}

.cc-drawer .cc-item__savings {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: var(--cc-savings);
	margin-top: 2px;
}

.cc-drawer .cc-item__remove {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 24px !important;
	height: 24px !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--cc-muted) !important;
	border-radius: 4px !important;
	padding: 0 !important;
	margin: 0 !important;
	transition: color 0.15s, background 0.15s;
	align-self: center !important;
}

.cc-drawer .cc-item__remove:hover {
	color: #ef4444;
	background: #fef2f2;
}

/* ==========================================================
   Qty stepper
   ========================================================== */
.cc-drawer .cc-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--cc-border);
	border-radius: 8px;
	overflow: hidden;
	height: 32px;
}

.cc-drawer .cc-qty__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 100% !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--cc-text) !important;
	transition: background 0.15s;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

.cc-drawer .cc-qty__btn:hover { background: var(--cc-border); }

.cc-drawer .cc-qty__input {
	width: 36px;
	height: 100%;
	border: none;
	border-left: 1px solid var(--cc-border);
	border-right: 1px solid var(--cc-border);
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--cc-text);
	background: transparent;
	padding: 0;
	margin: 0;
	-moz-appearance: textfield;
}

.cc-drawer .cc-qty__input::-webkit-inner-spin-button,
.cc-drawer .cc-qty__input::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ==========================================================
   Empty state
   ========================================================== */
.cc-drawer .cc-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 24px;
	gap: 12px;
	min-height: 300px;
}

.cc-drawer .cc-empty__icon { color: var(--cc-border); margin-bottom: 8px; }

.cc-drawer .cc-empty__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--cc-text);
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

.cc-drawer .cc-empty__subtitle {
	font-size: 14px;
	color: var(--cc-muted);
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

/* ==========================================================
   Footer
   ========================================================== */
.cc-drawer .cc-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--cc-border);
	padding: 16px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ==========================================================
   Coupon
   ========================================================== */
.cc-drawer .cc-coupon {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cc-drawer .cc-coupon__applied {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.cc-drawer .cc-coupon__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 12px;
}

.cc-drawer .cc-coupon__tag-code { font-weight: 700; color: #166534; letter-spacing: 0.03em; }
.cc-drawer .cc-coupon__tag-discount { color: var(--cc-savings); font-weight: 600; }

.cc-drawer .cc-coupon__remove {
	border: none !important;
	background: transparent !important;
	cursor: pointer !important;
	color: var(--cc-muted) !important;
	padding: 0 !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
}

.cc-drawer .cc-coupon__remove:hover { color: #ef4444; }

.cc-drawer .cc-coupon__toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	font-size: 13px !important;
	color: var(--cc-muted) !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: var(--cc-font) !important;
	transition: color 0.15s;
}

.cc-drawer .cc-coupon__toggle:hover { color: var(--cc-text); }

.cc-drawer .cc-coupon__input-wrap {
	display: none;
	gap: 8px;
	align-items: center;
}

.cc-drawer .cc-coupon__input-wrap.cc-coupon--open { display: flex; }

.cc-drawer .cc-coupon__input {
	flex: 1;
	height: 40px;
	border: 1px solid var(--cc-border);
	border-radius: 8px;
	padding: 0 12px;
	font-size: 13px;
	color: var(--cc-text);
	background: var(--cc-bg);
	font-family: var(--cc-font);
	transition: border-color 0.15s;
	margin: 0;
}

.cc-drawer .cc-coupon__input:focus { outline: none; border-color: var(--cc-accent); background: var(--cc-bg); }

.cc-drawer .cc-coupon__message {
	font-size: 12px;
	margin: 0;
	padding: 0;
	min-height: 16px;
	line-height: 1.4;
}

.cc-drawer .cc-coupon__message--error { color: #ef4444; }
.cc-drawer .cc-coupon__message--success { color: var(--cc-savings); }

/* ==========================================================
   Totals
   ========================================================== */
.cc-drawer .cc-totals {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cc-drawer .cc-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	margin: 0;
	padding: 0;
}

.cc-drawer .cc-totals__row--subtotal { font-weight: 700; font-size: 16px; }
.cc-drawer .cc-totals__savings { color: var(--cc-savings); font-weight: 600; }

.cc-drawer .cc-totals__tax-note {
	font-size: 11px;
	color: var(--cc-muted);
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/* ==========================================================
   Buttons — scoped inside drawer
   ========================================================== */
.cc-drawer .cc-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 48px !important;
	padding: 0 20px !important;
	border-radius: 10px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	font-family: var(--cc-font) !important;
	cursor: pointer !important;
	text-decoration: none !important;
	border: 2px solid transparent !important;
	transition: opacity 0.15s, transform 0.1s !important;
	letter-spacing: 0.01em !important;
	line-height: 1 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.cc-drawer .cc-btn:active { transform: scale(0.98) !important; }

.cc-drawer .cc-btn--primary {
	background: var(--cc-btn-bg) !important;
	color: var(--cc-btn-text) !important;
}

.cc-drawer .cc-btn--primary:hover {
	opacity: 0.88 !important;
	color: var(--cc-btn-text) !important;
	text-decoration: none !important;
}

.cc-drawer .cc-btn--outline {
	background: transparent !important;
	border-color: var(--cc-border) !important;
	color: var(--cc-text) !important;
	height: 40px !important;
	font-size: 13px !important;
	padding: 0 14px !important;
}

.cc-drawer .cc-btn--outline:hover { border-color: var(--cc-accent) !important; }
.cc-drawer .cc-btn--full { width: 100% !important; }

/* ==========================================================
   CTA
   ========================================================== */
.cc-drawer .cc-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cc-drawer .cc-cta__checkout { width: 100%; }

.cc-drawer .cc-cta__continue {
	background: transparent !important;
	border: none !important;
	font-size: 13px !important;
	color: var(--cc-muted) !important;
	cursor: pointer !important;
	font-family: var(--cc-font) !important;
	padding: 4px 0 !important;
	margin: 0 !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	transition: color 0.15s;
}

.cc-drawer .cc-cta__continue:hover { color: var(--cc-text); }

/* ==========================================================
   Loading
   ========================================================== */
.cc-drawer .cc-body--loading { opacity: 0.5; pointer-events: none; }

/* ==========================================================
   Floating cart icon — standalone, fully scoped
   ========================================================== */
.cc-icon.cc-cart-trigger {
	position: fixed !important;
	z-index: 99999 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 55px !important;
	height: 55px !important;
	border-radius: var(--cc-radius, 10px) !important;
	background: var(--cc-icon-bg, #fff) !important;
	color: var(--cc-icon-color, #000) !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
	transition: transform 0.2s, box-shadow 0.2s !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
	text-decoration: none !important;
}

.cc-icon.cc-cart-trigger:hover {
	transform: scale(1.06) !important;
	box-shadow: 0 6px 24px rgba(0,0,0,0.25) !important;
}

.cc-icon.cc-cart-trigger.cc-icon--bottom-right { right: 24px !important; bottom: 24px !important; }
.cc-icon.cc-cart-trigger.cc-icon--bottom-left  { left: 24px !important;  bottom: 24px !important; }
.cc-icon.cc-cart-trigger.cc-icon--top-right    { right: 24px !important; top: 24px !important; }
.cc-icon.cc-cart-trigger.cc-icon--top-left     { left: 24px !important;  top: 24px !important; }

.cc-icon.cc-cart-trigger .cc-icon__count {
	position: absolute !important;
	top: -4px !important;
	right: -4px !important;
	min-width: 18px !important;
	height: 18px !important;
	background: var(--cc-accent) !important;
	color: var(--cc-accent-text, #fff) !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 4px !important;
	font-family: var(--cc-font) !important;
	pointer-events: none !important;
	border: 2px solid var(--cc-icon-bg, #fff) !important;
	transition: transform 0.2s !important;
	line-height: 1 !important;
	margin: 0 !important;
}

.cc-icon.cc-cart-trigger .cc-icon__count--hidden {
	transform: scale(0) !important;
}

/* ==========================================================
   Shortcode button — icon+badge style (like screenshot)
   Customize via --cc-icon-bg, --cc-icon-color, --cc-radius
   ========================================================== */
.cc-shortcode-btn {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 55px !important;
	height: 55px !important;
	background: var(--cc-icon-bg, #ffffff) !important;
	color: var(--cc-icon-color, #000000) !important;
	border: none !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: var(--cc-radius, 10px) !important;
	text-decoration: none !important;
	line-height: 1 !important;
}

.cc-shortcode-btn:hover .cc-shortcode-btn__count {
	transform: scale(1.2);
}

.cc-shortcode-btn__icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.cc-shortcode-btn__label {
	display: inline-block !important;
	white-space: nowrap !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.cc-shortcode-btn__count {
	position: absolute !important;
	top: -8px !important;
	right: -8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 22px !important;
	height: 22px !important;
	background: var(--cc-accent) !important;
	color: var(--cc-accent-text, #fff) !important;
	border-radius: 999px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	padding: 0 4px !important;
	line-height: 1 !important;
	border: 2px solid var(--cc-icon-bg, #fff) !important;
	pointer-events: none !important;
	transition: transform 0.2s !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.cc-shortcode-btn__count--hidden {
	transform: scale(0) !important;
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 480px) {
	.cc-drawer .cc-panel { width: 100vw !important; }
}