/**
 * Compare Courses System — Floating bar, comparison modal table, & toast feedback.
 *
 * @package LMS_Theme
 */

/* ==========================================================================
   1. Header action icon & badge
   ========================================================================== */
.lms-header-compare {
	position: relative;
}

.lms-header-compare .lms-compare-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: #ffffff;
	font-family: var(--font-heading);
	font-size: 11px;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
	box-shadow: 0 3px 8px rgba(108, 92, 231, 0.45);
	transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
	pointer-events: none;
}

.lms-header-compare .lms-compare-count:empty,
.lms-header-compare .lms-compare-count[data-count="0"] {
	transform: scale(0.8);
	opacity: 0.75;
}

/* ==========================================================================
   2. Floating Bottom Compare Bar
   ========================================================================== */
.lms-compare-bar {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(140%);
	z-index: 150;
	width: min(860px, calc(100% - 32px));
	background: rgba(18, 14, 43, 0.94);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(108, 92, 231, 0.25);
	padding: 12px 18px;
	transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
}

.lms-compare-bar.is-active {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
	pointer-events: auto;
}

.lms-compare-bar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.lms-compare-bar__left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lms-compare-bar__icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--color-accent-grad);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.lms-compare-bar__icon svg {
	width: 20px;
	height: 20px;
	stroke-width: 2.2;
}

.lms-compare-bar__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.lms-compare-bar__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 14px;
	color: #ffffff;
	line-height: 1.2;
}

.lms-compare-bar__count-badge {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

.lms-compare-bar__count-badge .lms-compare-count {
	font-weight: 700;
	color: #a29bfe;
}

.lms-compare-bar__items {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	justify-content: center;
	min-width: 220px;
}

.lms-compare-bar__item {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	flex-shrink: 0;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.lms-compare-bar__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lms-compare-bar__item:hover {
	transform: translateY(-2px);
	border-color: var(--color-accent);
}

.lms-compare-bar__remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(18, 14, 43, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.3);
	color: #ffffff;
	font-size: 13px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
	padding: 0;
}

.lms-compare-bar__remove:hover {
	background: var(--color-sale);
	border-color: var(--color-sale);
}

.lms-compare-bar__slot {
	width: 52px;
	height: 52px;
	border-radius: 10px;
	border: 1.5px dashed rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
	font-size: 18px;
	font-weight: 300;
	flex-shrink: 0;
}

.lms-compare-bar__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lms-compare-bar__btn {
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

.lms-compare-bar__clear {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	cursor: pointer;
	padding: 6px 8px;
	transition: color 0.2s ease;
}

.lms-compare-bar__clear:hover {
	color: #ff7675;
}

/* ==========================================================================
   3. Compare Modal
   ========================================================================== */
.lms-compare-modal .lms-modal__content {
	width: min(1080px, calc(100% - 32px));
	max-width: none;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	padding: 0;
	overflow: hidden;
	background: var(--color-card);
	box-shadow: 0 24px 64px rgba(18, 14, 43, 0.32);
}

.lms-compare-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 28px;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-surface);
	flex-shrink: 0;
}

.lms-compare-modal__header-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.lms-compare-modal__icon {
	color: var(--color-accent);
	display: inline-flex;
	align-items: center;
}

.lms-compare-modal__icon svg {
	width: 24px;
	height: 24px;
}

.lms-compare-modal__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-heading);
	display: flex;
	align-items: center;
	gap: 8px;
}

.lms-compare-modal__count {
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.lms-compare-modal__header-right {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lms-compare-modal__clear-btn {
	background: none;
	border: none;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	cursor: pointer;
	padding: 6px 10px;
	border-radius: var(--radius-sm);
	transition: background 0.2s ease, color 0.2s ease;
}

.lms-compare-modal__clear-btn:hover {
	background: rgba(239, 68, 68, 0.08);
	color: var(--color-sale);
}

.lms-compare-modal .lms-modal__close {
	position: static;
}

.lms-compare-modal__body {
	flex: 1;
	overflow-y: auto;
	overflow-x: auto;
	padding: 24px 28px 32px;
	min-height: 280px;
}

/* ==========================================================================
   4. Comparison Table
   ========================================================================== */
.lms-compare-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.lms-compare-table {
	width: 100%;
	min-width: 680px;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
}

.lms-compare-row:nth-child(even) td,
.lms-compare-row:nth-child(even) th {
	background: rgba(18, 14, 43, 0.018);
}

.lms-compare-th {
	width: 160px;
	min-width: 150px;
	padding: 16px 20px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-text-muted);
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-border);
	background: var(--color-card);
	position: sticky;
	left: 0;
	z-index: 2;
}

.lms-compare-td {
	padding: 16px 20px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--color-border);
	border-left: 1px solid var(--color-border);
	min-width: 220px;
	max-width: 280px;
	color: var(--color-text);
}

/* Preview / Course Card Top Row */
.lms-compare-row--preview .lms-compare-th,
.lms-compare-row--preview .lms-compare-td {
	padding-top: 8px;
	padding-bottom: 22px;
	vertical-align: top;
}

.lms-compare-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.lms-compare-card__remove {
	position: absolute;
	top: -6px;
	right: -6px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--color-card);
	border: 1px solid var(--color-border);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	z-index: 3;
}

.lms-compare-card__remove:hover {
	background: var(--color-sale);
	color: #ffffff;
	border-color: var(--color-sale);
	transform: scale(1.1);
}

.lms-compare-card__thumb {
	display: block;
	width: 100%;
	height: 130px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--color-surface);
}

.lms-compare-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.lms-compare-card__thumb:hover img {
	transform: scale(1.04);
}

.lms-compare-card__title {
	font-family: var(--font-heading);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0;
}

.lms-compare-card__title a {
	color: var(--color-heading);
	transition: color 0.2s ease;
}

.lms-compare-card__title a:hover {
	color: var(--color-accent);
}

/* Price row */
.lms-compare-price {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--color-accent);
}

.lms-compare-price del {
	font-size: 14px;
	font-weight: 400;
	color: var(--color-text-muted);
	margin-right: 6px;
}

.lms-compare-price ins {
	text-decoration: none;
}

/* Rating row */
.lms-compare-rating {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.lms-compare-rate {
	font-weight: 700;
	color: #e67e22;
	font-size: 14px;
}

.lms-compare-rating .star-rating {
	font-size: 13px;
	color: #f1c40f;
}

.lms-compare-count {
	font-size: 12px;
	color: var(--color-text-muted);
}

.lms-compare-unrated {
	font-size: 13px;
	color: var(--color-text-muted);
	font-style: italic;
}

/* Meta Pills */
.lms-compare-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
	color: var(--color-heading);
}

.lms-compare-subtext {
	font-size: 12px;
	color: var(--color-text-muted);
	margin-top: 2px;
}

/* Summary row */
.lms-compare-desc {
	font-size: 13px;
	line-height: 1.5;
	color: var(--color-text-muted);
	max-height: 90px;
	overflow: hidden;
}

.lms-compare-desc p {
	margin: 0;
}

/* Stock row */
.lms-compare-stock--in {
	color: #10b981;
	font-weight: 600;
	font-size: 13px;
}

.lms-compare-stock--out {
	color: #ef4444;
	font-weight: 600;
	font-size: 13px;
}

/* Action row */
.lms-compare-row--action .lms-compare-td {
	padding-top: 20px;
	padding-bottom: 24px;
}

.lms-compare-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lms-compare-cart-btn {
	width: 100%;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	text-align: center;
	border: none;
	cursor: pointer;
}

.lms-compare-view-btn {
	width: 100%;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 600;
	border-radius: var(--radius-sm);
	text-align: center;
}

/* Empty / Loading / Error states */
.lms-compare__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 16px;
	padding: 56px 20px;
}

.lms-compare__empty-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lms-compare__empty-icon svg {
	width: 32px;
	height: 32px;
}

.lms-compare__empty p {
	margin: 0;
	font-size: 16px;
	color: var(--color-text-muted);
	max-width: 360px;
}

.lms-compare__loading,
.lms-compare__error {
	padding: 64px 20px;
	text-align: center;
	color: var(--color-text-muted);
	font-size: 15px;
}

/* ==========================================================================
   5. Toast Notification
   ========================================================================== */
.lms-toast {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: #18142c;
	color: #ffffff;
	border: 1px solid rgba(108, 92, 231, 0.45);
	border-radius: var(--radius-pill);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
	font-family: var(--font-heading);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	opacity: 0;
	transform: translateY(20px) scale(0.95);
	transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	pointer-events: none;
}

.lms-toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.lms-toast__icon {
	color: #a29bfe;
	display: inline-flex;
	align-items: center;
}

/* ==========================================================================
   6. Mobile adjustments
   ========================================================================== */
@media (max-width: 767px) {
	.lms-compare-bar {
		bottom: 74px; /* above the mobile bottom bar */
		width: calc(100% - 24px);
		padding: 10px 14px;
		border-radius: 14px;
	}

	.lms-compare-bar__items {
		display: none; /* Hide preview thumbnails on small screens */
	}

	.lms-compare-modal .lms-modal__content {
		width: calc(100% - 20px);
		max-height: 94vh;
	}

	.lms-compare-modal__header {
		padding: 16px 20px;
	}

	.lms-compare-modal__body {
		padding: 16px 20px 24px;
	}

	.lms-toast {
		left: 50%;
		right: auto;
		transform: translateX(-50%) translateY(20px) scale(0.95);
		bottom: 84px;
		white-space: nowrap;
	}

	.lms-toast.is-visible {
		transform: translateX(-50%) translateY(0) scale(1);
	}
}