/* WC Custom Side Cart — default styling.
   Colors are driven by CSS variables set inline from the admin
   Settings > Side Cart page (see class-cscc-frontend.php). */

:root {
	--cscc-icon-bg: #7f54b3;
	--cscc-icon-symbol: #ffffff;
	--cscc-badge-bg: #ff4d4f;
	--cscc-badge-text: #ffffff;
	--cscc-drawer-bg: #ffffff;
	--cscc-header-text: #1a1a1a;
	--cscc-item-name: #1a1a1a;
	--cscc-item-price: #666666;
	--cscc-qty-border: #dddddd;
	--cscc-qty-text: #1a1a1a;
	--cscc-remove-btn: #999999;
	--cscc-subtotal-text: #1a1a1a;
	--cscc-checkout-bg: #1a1a1a;
	--cscc-checkout-text: #ffffff;
	--cscc-mobile-width: 85vw;
}

/* ---------------------------------------------------------------------
   Hard reset for every interactive element inside our drawer/icon.
   Many themes apply global "button, input, a.button {...}" rules with
   their own border/background/box-shadow — this reset runs AFTER the
   theme's stylesheet (registered late, in the footer) and uses
   !important on the properties themes most commonly hijack, so our own
   color variables above are always what actually renders instead of a
   leftover pink/purple theme accent border.
   ------------------------------------------------------------------- */
.cscc-wrapper button,
.cscc-wrapper a {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Some themes/plugins apply background-color or box-shadow on
   :hover / :focus / :active via high-specificity or !important rules.
   These resets force every interactive state back to transparent so
   no leftover colored box appears behind our icons on hover/tap.
   The checkout button and floating icon are excluded here (via :not())
   so their hover/focus/active state is IDENTICAL to their normal state —
   no override, no restate needed, no specificity race to worry about. */
.cscc-wrapper button:not(.cscc-floating-icon):hover,
.cscc-wrapper button:not(.cscc-floating-icon):focus,
.cscc-wrapper button:not(.cscc-floating-icon):active,
.cscc-wrapper a:not(.cscc-checkout-btn):not(.cscc-return-shop-btn):hover,
.cscc-wrapper a:not(.cscc-checkout-btn):not(.cscc-return-shop-btn):focus,
.cscc-wrapper a:not(.cscc-checkout-btn):not(.cscc-return-shop-btn):active {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	border-color: transparent !important;
}

.cscc-wrapper * {
	box-sizing: border-box;
}

body.cscc-noscroll {
	overflow: hidden;
}

/* ---------- Floating icon ---------- */

.cscc-floating-icon {
	position: fixed !important;
	bottom: 24px !important;
	z-index: 99998 !important;
	width: 56px !important;
	height: 56px !important;
	border-radius: 50% !important;
	border: none !important;
	background: var(--cscc-icon-bg) !important;
	color: var(--cscc-icon-symbol) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
	/* Smooths out the automatic lift applied by cscc-script.js when a
	   fixed/sticky bar (e.g. a "Build Your Own Watch" popup's sticky
	   Add to Cart footer) would otherwise sit under/behind the icon. */
	transition: bottom 0.2s ease !important;
}

.cscc-position-right .cscc-floating-icon {
	right: 24px !important;
}

.cscc-position-left .cscc-floating-icon {
	left: 24px !important;
}

.cscc-icon-svg {
	color: var(--cscc-icon-symbol);
	pointer-events: none;
}

.cscc-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--cscc-badge-bg);
	color: var(--cscc-badge-text);
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	font-weight: 600;
}

/* ---------- Header cart icon (Elementor widget) ---------- */
/* Same idea as the floating icon above but NOT fixed-positioned, so it
   flows naturally wherever it's dropped inside an Elementor header.
   Uses the same --cscc-icon-* variables by default (from Settings >
   Side Cart), but the Elementor widget's own Style tab can override
   size/colors per-instance via inline selectors scoped to {{WRAPPER}}. */

.cscc-header-icon,
.cscc-header-icon:hover,
.cscc-header-icon:focus,
.cscc-header-icon:active {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cscc-icon-bg);
	color: var(--cscc-icon-symbol);
	opacity: 1;
}

.cscc-header-icon-svg {
	width: 22px;
	height: 22px;
	color: var(--cscc-icon-symbol);
	pointer-events: none;
}

/* ---------- Overlay ---------- */

.cscc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 99997;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
}

.cscc-wrapper.cscc-open .cscc-overlay {
	opacity: 1;
	visibility: visible;
}

/* ---------- Drawer ---------- */

.cscc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 380px;
	max-width: 90vw;
	background: var(--cscc-drawer-bg);
	z-index: 99999;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	box-shadow: -6px 0 24px rgba(0, 0, 0, 0.15);
}

.cscc-wrapper.cscc-open .cscc-drawer {
	transform: translateX(0);
}

.cscc-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #eee;
}

.cscc-drawer-header h2 {
	margin: 0;
	font-size: 18px;
	color: var(--cscc-header-text);
}

.cscc-close {
	font-size: 24px !important;
	line-height: 1 !important;
	color: var(--cscc-header-text) !important;
	padding: 4px !important;
}

.cscc-items {
	list-style: none;
	margin: 0;
	padding: 10px 20px;
	flex: 1 1 auto;
	overflow-y: auto;
}

.cscc-loading,
.cscc-empty {
	text-align: center;
	padding: 40px 0;
	opacity: 0.65;
	font-size: 14px;
	color: var(--cscc-item-name);
}

.cscc-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f0;
	position: relative;
}

.cscc-item-image {
	flex: 0 0 64px;
	width: 64px;
}

.cscc-item-image img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.cscc-item-details {
	flex: 1 1 auto;
	min-width: 0;
}

.cscc-item-name {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 4px;
	color: var(--cscc-item-name);
}

.cscc-item-name a {
	color: var(--cscc-item-name) !important;
	text-decoration: none !important;
}

.cscc-item-meta {
	margin-bottom: 6px;
}

.cscc-item-meta-row {
	font-size: 12px;
	line-height: 1.5;
	color: var(--cscc-item-price);
}

.cscc-item-meta-key {
	font-weight: 500;
	opacity: 0.85;
}

.cscc-item-price {
	font-size: 13px;
	margin-bottom: 8px;
	color: var(--cscc-item-price);
}

.cscc-item-qty {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--cscc-qty-border);
	border-radius: 4px;
	padding: 2px 8px;
	background: transparent;
}

.cscc-qty-btn {
	font-size: 16px !important;
	color: var(--cscc-qty-text) !important;
	line-height: 1 !important;
	padding: 4px 2px !important;
}

.cscc-qty-value {
	min-width: 16px;
	text-align: center;
	font-size: 13px;
	color: var(--cscc-qty-text);
}

.cscc-item-qty-locked {
	border-style: dashed;
	opacity: 0.75;
	padding: 2px 10px;
}

.cscc-item-gift .cscc-item-price {
	font-style: italic;
}

/* ---------- Declined free-gift placeholder row ---------- */
/* Shown instead of a gift item's normal row after the customer taps ×
   on it — informational only, not clickable, no image/price/remove
   button. Confirms a free gift is/was available without re-adding it. */

.cscc-item-gift-declined {
	padding: 10px 0 !important;
}

.cscc-item-gift-declined-text {
	font-size: 13px;
	font-style: italic;
	opacity: 0.65;
	color: #ff0000;
}

.cscc-item-remove {
	position: absolute !important;
	top: 14px !important;
	right: 0 !important;
	font-size: 18px !important;
	color: var(--cscc-remove-btn) !important;
	line-height: 1 !important;
	padding: 4px !important;
}

.cscc-item-remove:hover {
	opacity: 0.7;
}

.cscc-drawer-footer {
	padding: 16px 20px 20px;
	border-top: 1px solid #eee;
}

.cscc-subtotal-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 14px;
	color: var(--cscc-subtotal-text);
}

.cscc-checkout-btn {
	display: block !important;
	text-align: center !important;
	padding: 13px 16px !important;
	border-radius: 4px !important;
	background: var(--cscc-checkout-bg) !important;
	color: var(--cscc-checkout-text) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}

/* Bulletproof override: some themes apply their own global link-hover
   color/underline styles (e.g. "a:hover { color: ... !important }")
   with enough weight to beat a plain class selector. #cscc-checkout-btn
   uses the element's own id — which the markup already has — so this
   wins against virtually any theme rule, and every state below is
   forced to look IDENTICAL to the normal state on purpose. */
#cscc-checkout-btn,
#cscc-checkout-btn:link,
#cscc-checkout-btn:visited,
#cscc-checkout-btn:hover,
#cscc-checkout-btn:focus,
#cscc-checkout-btn:active {
	background: var(--cscc-checkout-bg) !important;
	color: var(--cscc-checkout-text) !important;
	text-decoration: none !important;
	opacity: 1 !important;
}

/* Same treatment for the floating icon button. */
#cscc-floating-icon,
#cscc-floating-icon:hover,
#cscc-floating-icon:focus,
#cscc-floating-icon:active {
	background: var(--cscc-icon-bg) !important;
	color: var(--cscc-icon-symbol) !important;
	opacity: 1 !important;
}

/* No separate :hover rule for .cscc-checkout-btn on purpose — it must
   look exactly the same on hover as it does normally. */

/* ---------- Trust badges row (below the Checkout button) ---------- */

.cscc-trust-badges {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
	margin-top: 14px;
}

.cscc-trust-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	max-width: 32%;
	text-align: center;
}

.cscc-trust-icon {
	flex-shrink: 0;
	color: var(--cscc-item-price);
}

.cscc-trust-badge-label {
	font-size: 9.5px;
	line-height: 1.25;
	color: var(--cscc-item-price);
	letter-spacing: 0.01em;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.cscc-drawer {
		width: var(--cscc-mobile-width);
		max-width: var(--cscc-mobile-width);
	}

	/* Controlled by the "Show Product Image On Mobile" admin setting.
	   When OFF, the wrapper gets .cscc-hide-mobile-image and we hide
	   just the thumbnail — everything else in the row stays intact. */
	.cscc-hide-mobile-image .cscc-item-image {
		display: none;
	}
}