/* RX Mini Cart — drawer styles */

:root {
	--rx-mc-primary: #0058fa;
	--rx-mc-secondary: #0e143d;
	--rx-mc-bg: #ffffff;
	--rx-mc-lavender: #eaf1ff;
	--rx-mc-lavender-border: #d7e4ff;
	--rx-mc-text: #0e143d;
	--rx-mc-muted: #6b7280;
	--rx-mc-track: #e3eaff;
	--rx-mc-radius: 16px;
	--rx-mc-radius-sm: 10px;
}

/* -------------------------------------------------------------------------
 * Theme / page-builder isolation.
 * Every element the drawer renders lives inside one of four ".rx-mc-scope"
 * root containers (overlay, drawer, floating button, shortcode trigger).
 * "all: revert" (no !important — plain cascade order does the job because
 * this block loads first and every rule below it is at least as specific)
 * strips out any Elementor/theme global CSS (buttons, inputs, headings,
 * lists, links, typography resets) that would otherwise leak in, without
 * touching anything outside these containers.
 * ------------------------------------------------------------------------- */
.rx-mc-scope,
.rx-mc-scope * ,
.rx-mc-scope *::before,
.rx-mc-scope *::after {
	all: revert;
	box-sizing: border-box;
}

.rx-mc-scope svg,
.rx-mc-scope img.rx-mc-icon-custom {
	display: inline-block !important;
	vertical-align: middle !important;
	max-width: none !important;
	border-radius: 0 !important;
	flex-shrink: 0;
}

.rx-mc-overlay {
	position: fixed;
	inset: 0;
	background: rgba(20, 12, 40, 0.45);
	backdrop-filter: blur(1px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 2147483000;
}

body.rx-mc-open .rx-mc-overlay {
	opacity: 1;
	visibility: visible;
}

/* Lock the background page while the drawer is open — without this,
   scrolling inside the drawer's own body also scrolled the page behind
   it. Locking both html and body covers browsers/themes that put the
   page's scrollbar on either one. overscroll-behavior on .rx-mc-body
   (below) additionally stops scroll "chaining" past the drawer's own
   edges as a second layer. */
html.rx-mc-open,
body.rx-mc-open {
	overflow: hidden !important;
	height: 100%;
}

.rx-mc-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(430px, 100vw);
	background: var(--rx-mc-bg);
	box-shadow: -8px 0 40px rgba(30, 15, 60, 0.18);
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 2147483001;
	display: flex;
	flex-direction: column;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rx-mc-text);
}

body.rx-mc-open .rx-mc-drawer {
	transform: translateX(0);
}

.rx-mc-drawer-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

/* Header */
.rx-mc-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #e2eaff;
	flex-shrink: 0;
}

.rx-mc-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: var(--rx-mc-text);
}

.rx-mc-title svg { color: var(--rx-mc-primary); }

/* Buttons/inputs below carry !important on their visual properties: real
 * WordPress themes and Elementor's global styles very commonly target bare
 * `button`, `input[type="text"]`, `input[type="range"]` with an attribute
 * selector, which can outrank a plain class selector on specificity alone
 * (e.g. `input[type="text"]` beats a single class). !important here is
 * scoped to these leaf rules only — nothing else in this stylesheet styles
 * the same selectors, so it can't fight itself. */
.rx-mc-close {
	background: none !important;
	border: none !important;
	cursor: pointer;
	color: var(--rx-mc-muted) !important;
	padding: 4px !important;
	line-height: 0;
	border-radius: 8px !important;
	font-family: inherit !important;
	box-shadow: none !important;
}
.rx-mc-close:hover { background: var(--rx-mc-lavender) !important; color: var(--rx-mc-text) !important; }

/* Body */
.rx-mc-body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 20px 8px;
}

.rx-mc-empty {
	text-align: center;
	padding: 60px 0;
	color: var(--rx-mc-muted);
}

.rx-mc-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 16px;
}

.rx-mc-item {
	display: flex;
	gap: 12px;
	border: 1px solid #e2eaff;
	border-radius: var(--rx-mc-radius);
	padding: 12px;
}

.rx-mc-item-image {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	border-radius: var(--rx-mc-radius-sm);
	overflow: hidden;
	background: linear-gradient(160deg, #e6edff, #f4f8ff);
	display: flex;
	align-items: center;
	justify-content: center;
}
.rx-mc-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rx-mc-item-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rx-mc-item-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.rx-mc-item-name {
	font-weight: 600;
	font-size: 14.5px;
	line-height: 1.3;
}

.rx-mc-item-variant {
	font-size: 12.5px;
	color: var(--rx-mc-muted);
	margin-top: 2px;
}

.rx-mc-item-remove {
	background: none !important;
	border: none !important;
	cursor: pointer;
	color: var(--rx-mc-muted) !important;
	padding: 2px !important;
	line-height: 0;
	flex-shrink: 0;
	box-shadow: none !important;
}
.rx-mc-item-remove:hover { color: #d33 !important; }

.rx-mc-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.rx-mc-qty-stepper {
	display: flex;
	align-items: center;
	gap: 0;
	border: 1px solid #d7e4ff;
	border-radius: 999px;
	overflow: hidden;
}

.rx-mc-qty-btn {
	width: 26px !important;
	height: 26px !important;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f8ff !important;
	border: none !important;
	cursor: pointer;
	color: var(--rx-mc-primary) !important;
	padding: 0 !important;
	font-size: 13px !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}
.rx-mc-qty-btn:hover { background: var(--rx-mc-lavender) !important; }

.rx-mc-qty-value {
	min-width: 26px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
}

.rx-mc-item-price {
	font-weight: 700;
	font-size: 14.5px;
}

/* Info rows */
.rx-mc-row-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--rx-mc-primary);
	margin: 4px 0 14px;
}

/* Points box */
.rx-mc-points-box {
	background: var(--rx-mc-lavender);
	border: 1px solid var(--rx-mc-lavender-border);
	border-radius: var(--rx-mc-radius);
	margin-bottom: 14px;
	overflow: hidden;
}

.rx-mc-points-header {
	width: 100% !important;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: none !important;
	border: none !important;
	cursor: pointer;
	padding: 14px 16px !important;
	text-align: left !important;
	color: var(--rx-mc-text) !important;
	font-size: 14px !important;
	box-shadow: none !important;
}

.rx-mc-points-label {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rx-mc-points-label svg { color: var(--rx-mc-primary); flex-shrink: 0; }

.rx-mc-points-title {
	display: block;
	font-weight: 600;
	font-size: 14px;
}
.rx-mc-points-sub {
	display: block;
	font-size: 12px;
	color: var(--rx-mc-muted);
	margin-top: 1px;
}

.rx-mc-points-right {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--rx-mc-muted);
}

.rx-mc-chevron {
	display: flex !important;
	transition: transform 0.2s ease;
	color: var(--rx-mc-muted) !important;
}
.rx-mc-points-box.is-open .rx-mc-chevron { transform: rotate(90deg); }

.rx-mc-points-panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
	padding: 0 16px;
}
.rx-mc-points-box.is-open .rx-mc-points-panel {
	max-height: 340px; /* generous enough for the embedded WooRewards widget below, not just the old slider */
	padding-bottom: 16px;
}

.rx-mc-points-hint {
	font-size: 12.5px;
	color: var(--rx-mc-muted);
	margin: 0;
}

.rx-mc-points-form { display: flex; flex-direction: column; gap: 10px; }
.rx-mc-points-form input[type="range"] { width: 100% !important; accent-color: var(--rx-mc-primary); margin: 0 !important; padding: 0 !important; border: none !important; background: none !important; }
.rx-mc-points-form-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--rx-mc-text);
}

/* Real WooRewards [wr_points_on_cart] widget, embedded via
   RX_MC_Points::render_redeem_widget(). Classes below copied exactly
   from the live widget's real markup, not guessed — safe to target
   directly. Because everything inside .rx-mc-scope goes through an
   "all: revert" isolation reset (see top of this file), every property
   these elements need is set explicitly here rather than relying on
   WooRewards' own default styling, which the reset strips. */
.rx-mc-wr-embed .lws-wr-pointsoncart > h2 {
	display: none !important; /* redundant — the box header above already says "Redeem points" */
}
.rx-mc-wr-embed .wr-cart-balance {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	font-size: 12px !important;
	color: var(--rx-mc-muted) !important;
	padding-bottom: 8px !important;
	margin: 0 0 8px !important;
	border-bottom: 1px solid var(--rx-mc-lavender-border) !important;
}
.rx-mc-wr-embed .wr-cart-balance-label { font-size: 11px !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; }
.rx-mc-wr-embed .wr-cart-balance-value { font-size: 13px !important; font-weight: 700 !important; color: var(--rx-mc-text) !important; }

.rx-mc-wr-embed .wr-cart-input {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 0 8px !important;
	flex-wrap: wrap !important;
}
.rx-mc-wr-embed .wr-cart-use-label { font-size: 12px !important; color: var(--rx-mc-muted) !important; white-space: nowrap !important; }
.rx-mc-wr-embed .wr-cart-line-input { flex: 1 !important; min-width: 80px !important; }
.rx-mc-wr-embed .wr-input-amount {
	width: 100% !important;
	height: 34px !important;
	border-radius: 8px !important;
	border: 1px solid var(--rx-mc-lavender-border) !important;
	padding: 0 10px !important;
	font-size: 12.5px !important;
	font-family: inherit !important;
	background: #fff !important;
	color: var(--rx-mc-text) !important;
	box-shadow: none !important;
}
.rx-mc-wr-embed .wr-input-amount:focus { border-color: var(--rx-mc-primary) !important; outline: none !important; }

.rx-mc-wr-embed .wr-cart-buttons { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.rx-mc-wr-embed .wr-cart-buttons .button {
	height: 32px !important;
	padding: 0 12px !important;
	border-radius: 99px !important;
	border: none !important;
	cursor: pointer !important;
	font-size: 10.5px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	font-weight: 600 !important;
	font-family: inherit !important;
}
.rx-mc-wr-embed .wr-cart-buttons .button:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }
.rx-mc-wr-embed .wr-cart-max { background: none !important; border: 1px solid var(--rx-mc-lavender-border) !important; color: var(--rx-mc-text) !important; }
.rx-mc-wr-embed .wr-cart-apply { background: var(--rx-mc-primary) !important; color: #fff !important; }
.rx-mc-wr-embed .wr-minpoints { font-size: 10.5px !important; color: var(--rx-mc-muted) !important; margin: 6px 0 0 !important; line-height: 1.5 !important; }

.rx-mc-wr-embed { position: relative !important; }

/* Shown while WooRewards' own AJAX redemption (Apply / Use Max) is in
   flight — see mini-cart.js. Every property is explicit (including
   display/position) because of the "all: revert" isolation reset above,
   which strips anything not set directly here. */
.rx-mc-points-loading {
	display: none !important;
	position: absolute !important;
	inset: 0 !important;
	background: rgba(255, 255, 255, 0.85) !important;
	border-radius: var(--rx-mc-radius-sm) !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	color: var(--rx-mc-text) !important;
	z-index: 2 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.rx-mc-points-loading.is-visible { display: flex !important; }
.rx-mc-points-spinner {
	display: block !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	border: 2px solid var(--rx-mc-lavender-border) !important;
	border-top-color: var(--rx-mc-primary) !important;
	animation: rx-mc-points-spin 0.7s linear infinite !important;
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
@keyframes rx-mc-points-spin { to { transform: rotate(360deg) } }

/* Free shipping */
.rx-mc-shipping-box {
	background: #f8faff;
	border: 1px solid var(--rx-mc-lavender-border);
	border-radius: var(--rx-mc-radius);
	padding: 14px 16px;
	margin-bottom: 14px;
}

.rx-mc-shipping-line {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--rx-mc-text);
	margin-bottom: 10px;
}
.rx-mc-shipping-line svg { color: var(--rx-mc-primary); flex-shrink: 0; }
.rx-mc-shipping-line strong { color: var(--rx-mc-primary); font-weight: 700; }

.rx-mc-progress-track {
	height: 6px;
	background: var(--rx-mc-track);
	border-radius: 999px;
	overflow: hidden;
}
.rx-mc-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--rx-mc-primary), var(--rx-mc-secondary));
	border-radius: 999px;
	transition: width 0.35s ease;
}

.rx-mc-progress-labels {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	letter-spacing: 0.03em;
	color: var(--rx-mc-muted);
	margin-top: 6px;
	text-transform: uppercase;
}

.rx-mc-pack-estimate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--rx-mc-muted);
	text-align: center;
	margin: 6px 0 10px;
}
.rx-mc-pack-estimate svg { color: var(--rx-mc-primary); }

/* Footer */
.rx-mc-footer {
	flex-shrink: 0;
	border-top: 1px solid #e2eaff;
	padding: 16px 20px 20px;
}

.rx-mc-promo {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.rx-mc-promo-input {
	flex: 1;
	border: 1px solid #d7e4ff !important;
	border-radius: var(--rx-mc-radius-sm) !important;
	padding: 10px 12px !important;
	font-size: 13.5px !important;
	line-height: normal !important;
	outline: none !important;
	background: #fff !important;
	color: var(--rx-mc-text) !important;
	box-shadow: none !important;
	height: auto !important;
	font-family: inherit !important;
}
.rx-mc-promo-input:focus { border-color: var(--rx-mc-primary) !important; }

.rx-mc-promo-message {
	font-size: 12.5px;
	margin-bottom: 4px;
	min-height: 0;
}
.rx-mc-promo-message.is-error { color: #d33; }
.rx-mc-promo-message.is-success { color: #1a7f37; }

.rx-mc-applied-coupon {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--rx-mc-lavender);
	border-radius: var(--rx-mc-radius-sm);
	padding: 8px 12px;
	font-size: 13px;
	margin-bottom: 8px;
}
.rx-mc-applied-coupon svg { color: var(--rx-mc-primary); }
.rx-mc-applied-coupon span { flex: 1; text-transform: uppercase; font-weight: 600; }
.rx-mc-coupon-remove { background: none !important; border: none !important; cursor: pointer; color: var(--rx-mc-muted) !important; line-height: 0; padding: 2px !important; box-shadow: none !important; }

.rx-mc-totals { margin: 14px 0 8px; }
.rx-mc-totals-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding: 4px 0;
	color: var(--rx-mc-text);
}
.rx-mc-muted { color: var(--rx-mc-muted); }
.rx-mc-totals-total {
	font-weight: 700;
	font-size: 15.5px;
	border-top: 1px solid #e2eaff;
	margin-top: 6px;
	padding-top: 10px;
}

.rx-mc-earn-note {
	text-align: center;
	font-size: 12px;
	color: var(--rx-mc-muted);
	margin: 4px 0 14px;
}
.rx-mc-earn-note strong { color: var(--rx-mc-primary); }

.rx-mc-checkout-btn {
	display: block;
	width: 100%;
	text-align: center;
	background: linear-gradient(90deg, var(--rx-mc-primary), var(--rx-mc-secondary));
	color: #fff !important;
	font-weight: 700;
	font-size: 15px;
	padding: 15px;
	border-radius: 999px;
	text-decoration: none !important;
	box-shadow: 0 8px 20px rgba(0, 88, 250, 0.25);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--rx-mc-primary) 25%, transparent);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rx-mc-checkout-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 88, 250, 0.32);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--rx-mc-primary) 32%, transparent);
	color: #fff;
}

.rx-mc-tagline {
	text-align: center;
	font-size: 10.5px;
	letter-spacing: 0.03em;
	color: var(--rx-mc-muted);
	margin: 12px 0 0;
	text-transform: uppercase;
}

/* Generic buttons */
.rx-mc-btn {
	display: inline-block !important;
	border-radius: var(--rx-mc-radius-sm) !important;
	padding: 10px 16px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: normal !important;
	cursor: pointer;
	border: 1px solid transparent !important;
	text-decoration: none !important;
	font-family: inherit !important;
	box-shadow: none !important;
}
.rx-mc-btn-outline {
	background: #fff !important;
	border-color: var(--rx-mc-primary) !important;
	color: var(--rx-mc-primary) !important;
}
.rx-mc-btn-outline:hover { background: var(--rx-mc-lavender) !important; color: var(--rx-mc-primary) !important; }
.rx-mc-btn-small { padding: 6px 12px !important; font-size: 12px !important; }
.rx-mc-btn[disabled] { opacity: 0.6; cursor: default; }

/* Triggers */
.rx-mc-trigger {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	background: none !important;
	border: none !important;
	cursor: pointer;
	color: inherit;
	font: inherit;
	box-shadow: none !important;
	padding: 0 !important;
}

.rx-mc-trigger-count {
	position: absolute;
	top: -6px;
	right: -10px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--rx-mc-primary);
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
}

.rx-mc-trigger-label { font-size: 14px; }

.rx-mc-floating-trigger {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rx-mc-primary), var(--rx-mc-secondary));
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(0, 88, 250, 0.35);
	box-shadow: 0 10px 26px color-mix(in srgb, var(--rx-mc-primary) 35%, transparent);
	z-index: 2147482999;
}
.rx-mc-floating-trigger .rx-mc-trigger-count {
	background: #fff;
	color: var(--rx-mc-primary);
	top: -4px;
	right: -4px;
}

@media (max-width: 480px) {
	.rx-mc-drawer { width: 100vw; }
}

.rx-mc-busy {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}