/*
  Cartpage Mekeover In Popup — namespaced "cmip-" throughout so nothing here can
  collide with Journal theme or OpenCart core styles. Mobile-first:
  base rules target 320-767px, then progressively enhanced at the
  768px (tablet) and 992px (desktop) breakpoints below.
*/
.cmip-root {
	--cmip-primary: #2563eb;
	--cmip-primary-dark: #1d4ed8;
	--cmip-primary-light: #eff4ff;
	--cmip-danger: #e11d48;
	--cmip-danger-light: #fef1f3;
	--cmip-success: #16a34a;
	--cmip-success-light: #f0fdf4;
	--cmip-ink: #111827;
	--cmip-grey: #6b7280;
	--cmip-grey-light: #9ca3af;
	--ckip-border: #e4e9f2;
	--cmip-white: #ffffff;
	--cmip-bg-soft: #f8fafc;
	--cmip-border: #e5e7eb;
	--cmip-border-strong: #cbd5e1;
	--cmip-radius-lg: 20px;
	--cmip-radius-md: 14px;
	--cmip-radius-sm: 10px;
	--cmip-radius-pill: 999px;
	--cmip-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
	--cmip-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--cmip-shadow-lift: 0 16px 32px rgba(15, 23, 42, 0.12);
	--cmip-touch: 44px;
	font-family: inherit;
	color: var(--cmip-ink);
	display: block;
	max-width: 100%;
	box-sizing: border-box;
}
.cmip-root *, .cmip-root *::before, .cmip-root *::after {
	box-sizing: border-box;
}
.cmip-root img {
	max-width: 100%;
}

/* ============ Layout ============ */
.cmip-layout {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 0 16px 32px;
}
.cmip-main {
	min-width: 0;
	flex: 1 1 auto;
}
.cmip-aside {
	min-width: 0;
}

/* ============ Page header actions (wishlist, top-right) ============ */
.cmip-page-actions {
	display: flex;
	justify-content: flex-end;
	padding: 12px 16px 0;
}
.cmip-wishlist-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--cmip-radius-pill);
	border: 1px solid var(--cmip-border);
	background: var(--cmip-white);
	color: var(--cmip-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s, border-color .15s;
}
.cmip-wishlist-link:hover,
.cmip-wishlist-link:focus-visible {
	border-color: var(--cmip-border-strong);
	background: var(--cmip-bg-soft);
}
.cmip-wishlist-link svg {
	flex-shrink: 0;
}

/* ============ Alerts ============ */
.cmip-alerts {
	padding: 12px 16px 0;
}
.cmip-alert {
	padding: 14px 16px;
	border-radius: var(--cmip-radius-md);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 10px;
}
.cmip-alert-error {
	background: var(--cmip-danger-light);
	color: var(--cmip-danger);
}
.cmip-alert-success {
	background: var(--cmip-success-light);
	color: var(--cmip-success);
}

/* ============ Empty state ============ */
.cmip-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 64px 20px 48px;
}
.cmip-empty-illustration {
	margin-bottom: 20px;
}
.cmip-empty-heading {
	font-size: 22px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--cmip-ink);
}
.cmip-empty-desc {
	font-size: 15px;
	color: var(--cmip-grey);
	margin: 0 0 28px;
	max-width: 320px;
}

/* ============ Product cards ============ */
.cmip-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cmip-card {
	position: relative;
	background: var(--cmip-white);
	border: 1px solid var(--cmip-border);
	border-radius: var(--cmip-radius-lg);
	box-shadow: var(--cmip-shadow-sm);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: box-shadow .2s ease, transform .2s ease;
}
@media (hover: hover) {
	.cmip-card:hover {
		box-shadow: var(--cmip-shadow-lift);
		transform: translateY(-2px);
	}
}
.cmip-card-oos {
	border-color: var(--cmip-danger-light);
}
.cmip-card.cmip-card-removing {
	animation: cmip-fade-out .35s ease forwards;
}
@keyframes cmip-fade-out {
	to { opacity: 0; transform: translateY(-12px) scale(.98); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; }
}
.cmip-card.cmip-card-updating {
	opacity: .6;
	pointer-events: none;
}

.cmip-card-top {
	display: flex;
	gap: 14px;
}

.cmip-card-media {
	position: relative;
	width: 76px;
	flex: 0 0 auto;
}
.cmip-thumb {
	width: 76px;
	height: 76px;
	object-fit: cover;
	border-radius: var(--cmip-radius-md);
	background: var(--cmip-bg-soft);
	display: block;
}
.cmip-discount-badge {
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cmip-danger);
	color: var(--cmip-white);
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: var(--cmip-radius-pill);
	white-space: nowrap;
}

.cmip-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.cmip-name {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cmip-ink);
	text-decoration: none;
	line-height: 1.4;
}
.cmip-name:hover,
.cmip-name:focus-visible {
	color: var(--cmip-primary);
}

/* "Selected: Large / Black" pill */
.cmip-selected-pill {
	align-self: flex-start;
	font-size: 12px;
	font-weight: 500;
	color: var(--cmip-grey);
	background: var(--cmip-bg-soft);
	border: 1px solid var(--cmip-border);
	border-radius: 6px;
	padding: 4px 10px;
}

/* Stock status -- small, subtle, shown inline next to the price */
.cmip-stock {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}
.cmip-stock-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex: 0 0 auto;
}
.cmip-stock-in {
	color: #6b9080;
}
.cmip-stock-in .cmip-stock-dot {
	background: #6b9080;
}
.cmip-stock-low {
	color: #b08650;
}
.cmip-stock-low .cmip-stock-dot {
	background: #b08650;
}
.cmip-stock-out {
	color: #c07a7a;
}
.cmip-stock-out .cmip-stock-dot {
	background: #c07a7a;
}

.cmip-reward {
	font-size: 12px;
	color: var(--cmip-primary);
	font-weight: 600;
}

/* Pricing -- compact, lighter weight; stock status sits inline beside it */
.cmip-price-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}
.cmip-price-calc {
	font-size: 12px;
	color: var(--cmip-grey);
	white-space: nowrap;
}
.cmip-price-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.cmip-price-total {
	font-size: 15px;
	font-weight: 500;
	color: var(--cmip-ink);
	white-space: nowrap;
}
.cmip-price-meta {
	display: flex;
	align-items: center;
	gap: 6px;
}
.cmip-price-old {
	font-size: 13px;
	color: var(--cmip-grey-light);
	text-decoration: line-through;
}
.cmip-price-savings {
	font-size: 12px;
	font-weight: 600;
	color: var(--cmip-success);
}

/* Footer row: qty stepper on the left, Wishlist / Delete text links on the right */
.cmip-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding-top: 4px;
	border-top: 1px solid var(--cmip-border);
}

.cmip-qty-stepper {
	position: relative;
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--cmip-border-strong);
	border-radius: var(--cmip-radius-sm);
	overflow: hidden;
}
.cmip-qty-btn {
	width: 34px;
	height: 34px;
	border: none;
	background: var(--cmip-white);
	color: var(--cmip-ink);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.cmip-qty-btn:hover,
.cmip-qty-btn:focus-visible {
	background: var(--cmip-bg-soft);
}
.cmip-qty-value {
	min-width: 30px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--cmip-ink);
	border-left: 1px solid var(--cmip-border-strong);
	border-right: 1px solid var(--cmip-border-strong);
}
/* The real <select> stays in the DOM (so the existing 'change' handler,
   validation, and min/max option list keep working exactly as before) --
   it's just visually replaced by the stepper above it. */
.cmip-qty-select-hidden {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
.cmip-qty-spinner {
	display: none;
	position: absolute;
	top: 50%;
	right: -22px;
	transform: translateY(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--cmip-border-strong);
	border-top-color: var(--cmip-primary);
}
.cmip-card-updating .cmip-qty-spinner {
	display: block;
	animation: cmip-spin .6s linear infinite;
}
@keyframes cmip-spin {
	to { transform: rotate(360deg); }
}

.cmip-footer-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cmip-action-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: none;
	background: transparent;
	padding: 4px 2px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--cmip-grey);
	cursor: pointer;
	white-space: nowrap;
}
.cmip-action-link:hover,
.cmip-action-link:focus-visible {
	color: var(--cmip-primary);
}
.cmip-action-link-danger {
	color: var(--cmip-danger);
}
.cmip-action-link-danger:hover,
.cmip-action-link-danger:focus-visible {
	color: #b91c1c;
}
.cmip-action-divider {
	width: 1px;
	height: 14px;
	background: var(--cmip-border-strong);
}

.cmip-card-voucher {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.cmip-card-body-voucher {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Vouchers keep their own small icon-only delete button (unchanged) */
.cmip-delete-btn {
	width: 32px;
	height: 32px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--cmip-bg-soft);
	border: none;
	color: var(--cmip-grey);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.cmip-delete-btn:hover,
.cmip-delete-btn:focus-visible {
	background: var(--cmip-danger);
	color: var(--cmip-white);
	transform: scale(1.08);
}
.cmip-delete-btn:focus-visible {
	outline: 2px solid var(--cmip-danger);
	outline-offset: 2px;
}

/* ============ Order summary ============ */
.cmip-summary {
	background: var(--cmip-white);
	border: 1px solid var(--cmip-border);
	border-radius: var(--cmip-radius-lg);
	box-shadow: var(--cmip-shadow-sm);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cmip-summary-heading {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 14px;
	color: var(--cmip-ink);
}
.cmip-totals-list {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}
.cmip-total-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px dashed var(--cmip-border);
	font-size: 13.5px;
}
.cmip-total-row:last-child {
	border-bottom: none;
}
.cmip-total-title {
	color: var(--cmip-grey);
}
.cmip-total-text {
	font-weight: 500;
	color: var(--cmip-ink);
}
.cmip-total-row-grand {
	background: var(--cmip-bg-soft);
	border-radius: var(--cmip-radius-md);
	border-bottom: none;
	margin-top: 10px;
	padding: 14px 14px;
}
.cmip-total-row-grand .cmip-total-title {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cmip-ink);
}
.cmip-total-row-grand .cmip-total-text {
	font-size: 17px;
	font-weight: 600;
	color: var(--cmip-primary);
}

.cmip-collapsible {
	border-top: 1px solid var(--cmip-border);
	padding: 6px 0;
}
.cmip-collapsible-summary {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	cursor: pointer;
	padding: 10px 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cmip-ink);
	min-height: var(--cmip-touch);
}
.cmip-collapsible-summary::-webkit-details-marker {
	display: none;
}
.cmip-collapsible-chevron {
	margin-left: auto;
	transition: transform .2s ease;
	color: var(--cmip-grey);
}
.cmip-collapsible[open] .cmip-collapsible-chevron {
	transform: rotate(180deg);
}
.cmip-collapsible-body {
	padding: 4px 0 14px;
}
.cmip-reward-available {
	font-size: 12px;
	color: var(--cmip-grey);
	margin: 0 0 10px;
}
.cmip-code-form {
	display: flex;
	gap: 8px;
}
.cmip-code-input {
	flex: 1 1 auto;
	min-width: 0;
	height: var(--cmip-touch);
	padding: 0 16px;
	border-radius: var(--cmip-radius-pill);
	border: 1px solid var(--cmip-border-strong);
	font-size: 14px;
	color: var(--cmip-ink);
	background: var(--cmip-bg-soft);
}
.cmip-code-input:focus-visible {
	outline: 2px solid var(--cmip-primary);
	outline-offset: 1px;
	background: var(--cmip-white);
}

/* ============ Buttons ============ */
.cmip-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: var(--cmip-touch);
	padding: 0 20px;
	border-radius: var(--cmip-radius-pill);
	font-size: 14px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.cmip-btn:active {
	transform: scale(.97);
}
.cmip-btn-primary {
	background: var(--cmip-primary);
	color: var(--cmip-white);
}
.cmip-btn-outline {
	background: transparent;
	border: 1px solid var(--cmip-border-strong);
	color: var(--cmip-ink);
}
.cmip-btn-outline:hover {
	border-color: var(--cmip-primary);
	color: var(--cmip-primary);
}
.cmip-btn-danger {
	background: var(--cmip-danger);
	color: var(--cmip-white);
}
.cmip-btn-lg {
	height: 52px;
	padding: 0 32px;
	font-size: 15px;
}

.cmip-checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	margin-top: 16px;
	border-radius: var(--cmip-radius-pill);
	background: linear-gradient(135deg, var(--cmip-primary) 0%, var(--cmip-primary-dark) 100%);
	color: var(--cmip-white);
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.32);
	transition: transform .15s ease, box-shadow .15s ease;
}
.cmip-checkout-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(37, 99, 235, 0.4);
}
.cmip-checkout-btn:active {
	transform: translateY(0);
}

/* ============ Sticky mobile checkout bar ============ */
.cmip-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 400;
	background: var(--cmip-white);
	border-top: 1px solid var(--cmip-border);
	box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
	display: flex;
	align-items: stretch;
	padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
	gap: 10px;
}
.cmip-mobile-bar-summary {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: transparent;
	border: none;
	padding: 4px 8px;
	cursor: pointer;
	min-height: var(--cmip-touch);
	color: var(--cmip-ink);
}
.cmip-mobile-bar-total {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
}
.cmip-mobile-bar-label {
	font-size: 11px;
	color: var(--cmip-grey);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.cmip-mobile-bar-amount {
	font-size: 18px;
	font-weight: 800;
	color: var(--cmip-primary);
}
.cmip-mobile-bar-checkout {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	min-height: var(--cmip-touch);
	border-radius: var(--cmip-radius-pill);
	background: linear-gradient(135deg, var(--cmip-primary) 0%, var(--cmip-primary-dark) 100%);
	color: var(--cmip-white);
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
}

/* ============ Toasts ============ */
.cmip-toast-stack {
	position: fixed;
	left: 50%;
	bottom: 90px;
	transform: translateX(-50%);
	z-index: 600;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: calc(100% - 32px);
	max-width: 380px;
	pointer-events: none;
}
.cmip-toast {
	background: var(--cmip-ink);
	color: var(--cmip-white);
	font-size: 13px;
	font-weight: 600;
	padding: 12px 16px;
	border-radius: var(--cmip-radius-md);
	box-shadow: var(--cmip-shadow-md);
	text-align: center;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease;
}
.cmip-toast-show {
	opacity: 1;
	transform: translateY(0);
}
.cmip-toast-error {
	background: var(--cmip-danger);
}
.cmip-toast-success {
	background: var(--cmip-success);
}

/* ============ Confirmation modal ============ */
.cmip-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.5);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2147483000;
	padding: 20px;
}
.cmip-modal-overlay.cmip-open {
	display: flex;
}
.cmip-modal {
	background: var(--cmip-white);
	border-radius: var(--cmip-radius-lg);
	box-shadow: var(--cmip-shadow-lift);
	padding: 24px;
	width: 100%;
	max-width: 360px;
	animation: cmip-modal-in .18s ease-out;
}
@keyframes cmip-modal-in {
	from { opacity: 0; transform: scale(.96) translateY(6px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
.cmip-modal-title {
	font-size: 17px;
	font-weight: 800;
	margin: 0 0 8px;
}
.cmip-modal-body {
	font-size: 14px;
	color: var(--cmip-grey);
	margin: 0 0 20px;
}
.cmip-modal-actions {
	display: flex;
	gap: 10px;
}
.cmip-modal-actions .cmip-btn {
	flex: 1 1 0;
}

/* When the sticky mobile bar is present, keep it from covering the last card */
@media (max-width: 991px) {
	.cmip-root {
		padding-bottom: 76px;
	}
}

/* ============ Tablet (768px+) ============ */
@media (min-width: 768px) {
}

/* ============ Desktop (992px+) ============ */
@media (min-width: 992px) {
	.cmip-layout {
		flex-direction: row;
		align-items: flex-start;
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 32px 48px;
	}
	.cmip-main {
		flex: 1 1 auto;
	}
	.cmip-aside {
		flex: 0 0 340px;
		position: sticky;
		top: 24px;
	}
	.cmip-mobile-bar {
		display: none;
	}
	.cmip-root {
		padding-bottom: 0;
	}
}

/* ============================================================
   Sitewide cart popup (cartpage_mekeover_in_popup_popup.twig)
   Same popup pattern used sitewide by the Vehicle Selector module:
   a bottom sheet on mobile that becomes a centered, height-capped
   modal on larger screens. No separate "desktop drawer" layout --
   one popup design at every width, just re-centered above 768px.
   ============================================================ */
.cmip-popup-overlay {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	margin: 0 !important;
	background: rgba(15, 23, 42, 0.5) !important;
	display: none;
	align-items: flex-end;
	justify-content: center;
	z-index: 2147483000 !important;
	font-family: inherit;
}
.cmip-popup-overlay.cmip-popup-open {
	display: flex !important;
}
body.cmip-popup-scroll-lock {
	overflow: hidden;
}
@media (min-width: 768px) {
	.cmip-popup-overlay {
		align-items: center;
	}
}

.cmip-popup-drawer {
	position: relative;
	width: 100%;
    max-width: 100%;
    height: 90vh;
	background: var(--cmip-white, #fff);
	display: flex;
	flex-direction: column;
	box-shadow: 0 -10px 40px rgba(15, 23, 42, 0.18);
	animation: cmip-popup-slide-up .28s ease-out;
}
@media (min-width: 768px) {
	.cmip-popup-drawer {
		border-radius: var(--cmip-radius-lg, 20px);
		max-width: 400px;
		height: min(720px, 90vh);
		box-shadow: 0 20px 60px rgba(15, 23, 42, 0.22);
	}
}
@keyframes cmip-popup-slide-up {
	from { transform: translateY(24px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}

.cmip-popup-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	padding-bottom:10px;
	border-bottom: 1px solid var(--cmip-border, #e5e7eb);
	flex: 0 0 auto;
}
.cmip-popup-header-titles {
	flex: 1 1 auto;
	min-width: 0;
}
.cmip-popup-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
	color: var(--cmip-ink, #111827);
	line-height:0;
}
.cmip-popup-subtitle {
	font-size: 12px;
	font-weight: 500;
	margin: 2px 0 0;
	color: var(--cmip-grey, #6b7280);
	min-height: 15px;
}
.ckip-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid #e4e9f2;
	background: var(--ckip-white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	color: var(--ckip-ink);
	transition: background 0.15s;
	padding: 0;
	text-decoration: none;
}
.ckip-icon-btn:hover {
	background: var(--ckip-bg-page);
}
.cmip-hidden {
	display: none !important;
}

.cmip-popup-body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.cmip-popup-layout {
	flex-direction: column;
	padding: 16px;
	max-width: none;
	margin: 0;
}
.cmip-popup-layout .cmip-aside {
	flex: 0 0 auto;
	position: static;
	width:100%;
}

/* Loading skeleton, shown instantly while the first AJAX fetch resolves */
.cmip-popup-skeleton {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cmip-skeleton-row {
	height: 90px;
	border-radius: var(--cmip-radius-lg, 20px);
	background: linear-gradient(90deg, #f1f5f9 25%, #f8fafc 37%, #f1f5f9 63%);
	background-size: 400% 100%;
	animation: cmip-skeleton-shimmer 1.4s ease infinite;
}
@keyframes cmip-skeleton-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

.cmip-popup-error {
	padding: 24px 16px;
	text-align: center;
	color: var(--cmip-danger, #e11d48);
	font-size: 14px;
}