/* =============================================================================
   WC Compare Pro — Frontend Styles
   ============================================================================= */

/* ── CSS Custom Properties (overridden inline by PHP with admin color) ─────── */
:root {
	--wc-compare-primary:     #0071a1;
	--wc-compare-primary-dk:  #005177;
	--wc-compare-text-light:  #ffffff;
	--wc-compare-bar-bg:      #ffffff;
	--wc-compare-bar-shadow:  0 -2px 12px rgba(0, 0, 0, 0.12);
	--wc-compare-radius:      6px;
	--wc-compare-radius-pill: 50px;
	--wc-compare-z:           9999;
	--wc-compare-transition:  0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   1. COMPARE BUTTON
   ============================================================================= */
.wc-compare-btn {
	display:         inline-flex;
	align-items:     center;
	gap:             5px;
	margin-top:      6px;
	padding:         5px 12px;
	background:      transparent;
	color:           var(--wc-compare-primary);
	border:          1px solid var(--wc-compare-primary);
	border-radius:   var(--wc-compare-radius);
	font-size:       13px;
	font-weight:     500;
	cursor:          pointer;
	transition:      background var(--wc-compare-transition),
	                 color var(--wc-compare-transition),
	                 border-color var(--wc-compare-transition);
	white-space:     nowrap;
}

.wc-compare-btn:hover,
.wc-compare-btn:focus-visible {
	background:      var(--wc-compare-primary);
	color:           var(--wc-compare-text-light);
	outline:         none;
}

/* Added state */
.wc-compare-btn.is-added {
	background:      var(--wc-compare-primary);
	color:           var(--wc-compare-text-light);
	border-color:    var(--wc-compare-primary);
}

.wc-compare-btn.is-added:hover {
	background:      var(--wc-compare-primary-dk);
	border-color:    var(--wc-compare-primary-dk);
}

/* Max-reached / disabled */
.wc-compare-btn:disabled,
.wc-compare-btn.is-disabled {
	opacity:         0.45;
	cursor:          not-allowed;
	pointer-events:  none;
}

.wc-compare-btn__icon {
	font-size: 15px;
	line-height: 1;
}

/* =============================================================================
   2. COMPARISON BAR (sticky — expanded)
   ============================================================================= */

/* ── Outer wrapper: full width, positions the floating card ── */
.wc-compare-bar {
	position:       fixed;
	left:           0;
	right:          0;
	z-index:        var(--wc-compare-z);
	padding:        0 24px 14px;
	pointer-events: none;
	/* Animation — starts off-screen */
	transform:      translateY(110%);
	transition:     transform var(--wc-compare-transition);
}

.wc-compare-bar--bottom { bottom: 0; }
.wc-compare-bar--top    { top: 0; padding: 14px 24px 0; transform: translateY(-110%); }

.wc-compare-bar.is-visible      { transform: translateY(0); }
.wc-compare-bar--top.is-visible { transform: translateY(0); }

/* ── Inner card: white floating card ── */
.wc-compare-bar__inner {
	pointer-events:  auto;
	display:         flex;
	align-items:     center;
	max-width:       1200px;
	margin:          0 auto;
	background:      #ffffff;
	border-radius:   12px 12px 0 0;
	box-shadow:      0 -4px 32px rgba(0, 0, 0, 0.12);
	padding:         16px 20px;
	gap:             0;
}

/* ── LEFT: slots container ── */
.wc-compare-bar__slots {
	flex:        1;
	display:     flex;
	align-items: stretch;
	min-width:   0;
}

/* ── Each slot: equal width, separated by right border ── */
.wc-compare-bar__slot {
	flex:            1;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0 16px;
	border-right:    1px solid #e8edf2;
	min-height:      130px;
}
.wc-compare-bar__slot:first-child { padding-left: 0; }
.wc-compare-bar__slot:last-child  { border-right: none; }

/* ── Filled product card (vertical: image + name + × top-right) ── */
.wc-compare-bar__product {
	position:        relative;
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             8px;
	width:           100%;
	padding:         8px 8px 10px;
	border:          1px solid #e8edf2;
	border-radius:   8px;
	background:      #ffffff;
	min-height:      118px;
	justify-content: flex-start;
	text-align:      center;
}

/* × remove button — top-right inside card */
.wc-compare-bar__remove {
	position:        absolute;
	top:             6px;
	right:           6px;
	width:           22px;
	height:          22px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      transparent;
	border:          1px solid #d1d5db;
	border-radius:   50%;
	cursor:          pointer;
	font-size:       13px;
	line-height:     1;
	color:           #6b7280;
	padding:         0;
	transition:      background 0.15s, color 0.15s, border-color 0.15s;
	z-index:         2;
}

.wc-compare-bar__remove:hover {
	background:   #fee2e2;
	border-color: #fca5a5;
	color:        #dc2626;
}

/* Product image — portrait */
.wc-compare-bar__product img {
	width:       72px;
	height:      80px;
	object-fit:  contain;
	display:     block;
	margin-top:  4px;
	flex-shrink: 0;
}

/* Product name */
.wc-compare-bar__product-name {
	font-size:    12px;
	font-weight:  500;
	color:        #1d2327;
	line-height:  1.4;
	overflow:     hidden;
	display:      -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	width:        100%;
	padding:      0 4px;
}

/* ── Empty add-slot ── */
.wc-compare-bar__add-slot {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	justify-content: center;
	gap:             10px;
	width:           100%;
	min-height:      118px;
	background:      transparent;
	border:          none;
	cursor:          pointer;
	padding:         0;
	transition:      none;
}

.wc-compare-bar__add-slot:hover .wc-compare-add-icon {
	background:   var(--wc-compare-primary);
	border-color: var(--wc-compare-primary);
	color:        #ffffff;
}

.wc-compare-bar__add-slot:hover .wc-compare-add-slot-text {
	color: var(--wc-compare-primary);
}

.wc-compare-add-icon {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border:          2px solid #c8d6e1;
	border-radius:   50%;
	font-size:       22px;
	font-weight:     300;
	color:           #94a3b8;
	line-height:     1;
	background:      transparent;
	transition:      background 0.18s, color 0.18s, border-color 0.18s;
}

.wc-compare-add-slot-text {
	font-size:   12px;
	color:       #6b7280;
	text-align:  center;
	line-height: 1.4;
	font-weight: 500;
	max-width:   100px;
	transition:  color 0.18s;
}

/* ── Divider between slots and actions ── */
.wc-compare-bar__divider {
	width:       1px;
	height:      100px;
	background:  #e8edf2;
	flex-shrink: 0;
	margin:      0 4px;
}

/* ── RIGHT: counter + buttons ── */
.wc-compare-bar__actions {
	display:         flex;
	flex-direction:  column;
	align-items:     flex-start;
	justify-content: center;
	gap:             10px;
	padding-left:    20px;
	flex-shrink:     0;
	min-width:       170px;
}

.wc-compare-bar__count {
	font-size:   13px;
	color:       #1d2327;
	font-weight: 500;
	white-space: nowrap;
}

.wc-compare-bar__btns {
	display: flex;
	gap:     8px;
	width:   100%;
}

/* "Thu gọn" — outline */
.wc-compare-bar__btn-collapse {
	flex:            1;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         9px 14px;
	background:      #ffffff;
	color:           #1d2327;
	border:          1.5px solid #d1d5db;
	border-radius:   8px;
	font-size:       13px;
	font-weight:     600;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      background 0.15s, border-color 0.15s;
}

.wc-compare-bar__btn-collapse:hover {
	background:   #f8fafc;
	border-color: #94a3b8;
}

/* "So sánh" — filled primary */
.wc-compare-bar__btn-compare {
	flex:            1;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         9px 14px;
	background:      var(--wc-compare-primary);
	color:           var(--wc-compare-text-light);
	border:          none;
	border-radius:   8px;
	font-size:       13px;
	font-weight:     700;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      background var(--wc-compare-transition);
}

.wc-compare-bar__btn-compare:hover:not(:disabled) {
	background: var(--wc-compare-primary-dk);
}

.wc-compare-bar__btn-compare:disabled {
	background: #d1d5db;
	color:      #9ca3af;
	cursor:     not-allowed;
	opacity:    1;
}

/* =============================================================================
   3. COMPARISON PILL (collapsed state)
   ============================================================================= */
.wc-compare-pill {
	position:        fixed;
	z-index:         var(--wc-compare-z);
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         10px 16px;
	background:      var(--wc-compare-primary);
	color:           var(--wc-compare-text-light);
	border:          none;
	border-radius:   var(--wc-compare-radius-pill);
	font-size:       13px;
	font-weight:     600;
	cursor:          pointer;
	box-shadow:      0 4px 16px rgba(0, 0, 0, 0.18);
	/* Start hidden/scaled */
	transform:       scale(0);
	opacity:         0;
	transition:      transform var(--wc-compare-transition),
	                 opacity   var(--wc-compare-transition),
	                 background var(--wc-compare-transition);
}

/* Visible state */
.wc-compare-pill.is-visible {
	transform: scale(1);
	opacity:   1;
}

.wc-compare-pill:hover {
	background: var(--wc-compare-primary-dk);
	transform:  scale(1.05);
}

/* Positions */
.wc-compare-pill--bottom-right {
	bottom: 24px;
	right:  24px;
}

.wc-compare-pill--bottom-left {
	bottom: 24px;
	left:   24px;
}

.wc-compare-pill__icon {
	font-size: 16px;
}

.wc-compare-pill__count {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	min-width:       22px;
	height:          22px;
	padding:         0 6px;
	background:      rgba(255, 255, 255, 0.25);
	border-radius:   50px;
	font-size:       12px;
	font-weight:     700;
}

/* =============================================================================
   4. SEARCH MODAL (add-slot popup)
   ============================================================================= */

/* Backdrop — same overlay as comparison table modal but separate z-index */
.wc-compare-search-backdrop {
	position:       fixed;
	inset:          0;
	background:     rgba(0, 0, 0, 0.45);
	z-index:        calc(var(--wc-compare-z) + 5);
	opacity:        0;
	pointer-events: none;   /* ← does NOT block clicks when hidden */
	transition:     opacity var(--wc-compare-transition);
}
.wc-compare-search-backdrop.is-visible {
	opacity:        1;
	pointer-events: auto;   /* ← blocks clicks only when visible */
}

/* Modal box — slides up from bottom center */
.wc-compare-search-box {
	position:       fixed;
	bottom:         90px;   /* above the comparison bar */
	left:           50%;
	transform:      translateX(-50%) translateY(20px);
	z-index:        calc(var(--wc-compare-z) + 6);
	background:     #fff;
	border-radius:  12px;
	box-shadow:     0 8px 40px rgba(0,0,0,0.18);
	width:          min(640px, calc(100vw - 32px));
	max-height:     70vh;
	display:        flex;
	flex-direction: column;
	opacity:        0;
	pointer-events: none;   /* ← does NOT block clicks when hidden */
	transition:     opacity var(--wc-compare-transition),
	                transform var(--wc-compare-transition);
}
.wc-compare-search-box.is-visible {
	opacity:        1;
	pointer-events: auto;   /* ← interactive only when visible */
	transform:      translateX(-50%) translateY(0);
}

/* Search input area */
.wc-compare-search-input-wrap {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     14px 16px;
	border-bottom: 1px solid #eee;
	flex-shrink: 0;
}

.wc-compare-search-icon {
	font-size: 18px;
	color:     #aaa;
	flex-shrink: 0;
}

#wc-compare-search-input {
	flex:        1;
	border:      none;
	outline:     none;
	font-size:   15px;
	color:       #222;
	background:  transparent;
	padding:     0;
}

#wc-compare-search-input::placeholder { color: #bbb; }

.wc-compare-search-clear {
	background: none;
	border:     none;
	font-size:  20px;
	color:      #bbb;
	cursor:     pointer;
	padding:    0 2px;
	line-height: 1;
	display:    none;
	transition: color 0.15s;
}
.wc-compare-search-clear:hover { color: #555; }
.wc-compare-search-clear.is-visible { display: block; }

/* Results area */
.wc-compare-search-results {
	overflow-y:    auto;
	flex:          1;
	padding:       8px 0;
	scrollbar-width: thin;
}

.wc-compare-search-section-title {
	padding:     8px 16px 4px;
	font-size:   11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color:       #aaa;
}

/* Product row */
.wc-compare-search-item {
	display:     flex;
	align-items: center;
	gap:         12px;
	padding:     8px 16px;
	cursor:      default;
	transition:  background 0.12s;
}
.wc-compare-search-item:hover { background: #f7f7f7; }

.wc-compare-search-item__thumb {
	width:         64px;
	height:        64px;
	flex-shrink:   0;
	border-radius: 6px;
	overflow:      hidden;
	border:        1px solid #eee;
	background:    #fafafa;
}
.wc-compare-search-item__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.wc-compare-search-item__info {
	flex:        1;
	min-width:   0;
}

.wc-compare-search-item__name {
	font-size:     13px;
	font-weight:   500;
	color:         #222;
	line-height:   1.3;
	display:       -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:      hidden;
	margin-bottom: 3px;
}

.wc-compare-search-item__price {
	font-size: 12px;
	color:     #888;
}
.wc-compare-search-item__price ins  { color: var(--wc-compare-primary); text-decoration: none; font-weight: 600; }
.wc-compare-search-item__price del  { color: #bbb; font-size: 11px; }

/* "Chọn" / "Đã chọn" button */
.wc-compare-search-item__btn {
	flex-shrink:   0;
	padding:       6px 14px;
	border-radius: var(--wc-compare-radius);
	font-size:     13px;
	font-weight:   500;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    background 0.15s, color 0.15s, border-color 0.15s;
}

.wc-compare-search-item__btn--add {
	background:  rgba(var(--wc-compare-primary-rgb, 0,113,161), 0.08);
	color:       var(--wc-compare-primary);
	border:      1px solid var(--wc-compare-primary);
}
.wc-compare-search-item__btn--add:hover {
	background: var(--wc-compare-primary);
	color:      #fff;
}

.wc-compare-search-item__btn--added {
	background:  #eee;
	color:       #888;
	border:      1px solid #ddd;
	cursor:      default;
}

/* Loading / no-results state */
.wc-compare-search-status {
	padding:    24px 16px;
	text-align: center;
	color:      #aaa;
	font-size:  13px;
}

/* =============================================================================
   5. MODAL OVERLAY (comparison table)
   ============================================================================= */
.wc-compare-overlay {
	position:       fixed;
	inset:          0;
	background:     rgba(0, 0, 0, 0.55);
	z-index:        calc(var(--wc-compare-z) + 1);
	opacity:        0;
	pointer-events: none;
	transition:     opacity var(--wc-compare-transition);
}

.wc-compare-overlay.is-visible {
	opacity:        1;
	pointer-events: auto;
}

/* =============================================================================
   5. COMPARISON TABLE MODAL
   ============================================================================= */
.wc-compare-modal {
	position:       fixed;
	inset:          0;
	z-index:        calc(var(--wc-compare-z) + 2);
	display:        flex;
	align-items:    flex-start;
	justify-content: center;
	padding:        32px 16px 16px;
	overflow-y:     auto;
	pointer-events: none;
	opacity:        0;
	transform:      translateY(20px);
	transition:     opacity var(--wc-compare-transition),
	                transform var(--wc-compare-transition);
}

.wc-compare-modal.is-visible {
	pointer-events: auto;
	opacity:        1;
	transform:      translateY(0);
}

.wc-compare-modal__box {
	background:    #fff;
	border-radius: 10px;
	box-shadow:    0 8px 40px rgba(0, 0, 0, 0.18);
	max-width:     1100px;
	width:         100%;
	overflow:      hidden;
}

.wc-compare-modal__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         16px 20px;
	border-bottom:   1px solid #eee;
}

.wc-compare-modal__title {
	margin:      0;
	font-size:   18px;
	font-weight: 700;
	color:       #1d2327;
}

.wc-compare-modal__close {
	background:    none;
	border:        none;
	font-size:     22px;
	line-height:   1;
	cursor:        pointer;
	color:         #777;
	padding:       4px 8px;
	border-radius: 4px;
	transition:    background 0.15s, color 0.15s;
}

.wc-compare-modal__close:hover {
	background: #f0f0f0;
	color:      #222;
}

.wc-compare-modal__body {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Loading spinner */
.wc-compare-modal__loading {
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         48px;
	font-size:       14px;
	color:           #999;
	gap:             10px;
}

.wc-compare-spinner {
	width:  24px;
	height: 24px;
	border: 3px solid #ddd;
	border-top-color: var(--wc-compare-primary);
	border-radius: 50%;
	animation: wc-compare-spin 0.7s linear infinite;
}

@keyframes wc-compare-spin {
	to { transform: rotate(360deg); }
}

@keyframes wc-compare-notice-in {
	from { opacity: 0; transform: translate(-50%, 8px); }
	to   { opacity: 1; transform: translate(-50%, 0);   }
}

/* Pulse animation — triggered when user clicks "+" slot */
@keyframes wc-compare-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(var(--wc-compare-primary-rgb, 0,113,161), 0.5); }
	70%  { box-shadow: 0 0 0 10px rgba(var(--wc-compare-primary-rgb, 0,113,161), 0); }
	100% { box-shadow: 0 0 0 0   rgba(var(--wc-compare-primary-rgb, 0,113,161), 0); }
}

.wc-compare-btn--pulse {
	animation: wc-compare-pulse 0.7s ease 2;
	border-color: var(--wc-compare-primary) !important;
}

/* =============================================================================
   6. COMPARISON TABLE
   ============================================================================= */
.wc-compare-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       14px;
}

.wc-compare-table th,
.wc-compare-table td {
	padding:       10px 14px;
	border:        1px solid #ebebeb;
	vertical-align: top;
	text-align:    left;
}

.wc-compare-table th {
	background:  #f7f7f7;
	font-weight: 600;
	color:       #444;
	white-space: nowrap;
	min-width:   130px;
}

/* Product header column */
.wc-compare-table .wc-ct-product-col {
	text-align: center;
	min-width:  160px;
	vertical-align: top;
}

.wc-ct-product-image img {
	width:         120px;
	height:        120px;
	object-fit:    cover;
	border-radius: var(--wc-compare-radius);
	display:       block;
	margin:        0 auto 8px;
}

.wc-ct-product-name {
	font-weight: 600;
	font-size:   14px;
	display:     block;
	margin-bottom: 6px;
}

.wc-ct-product-name a {
	color:           #1d2327;
	text-decoration: none;
}

.wc-ct-product-name a:hover { text-decoration: underline; }

.wc-ct-remove-btn {
	background:    none;
	border:        1px solid #ddd;
	border-radius: 4px;
	padding:       3px 8px;
	font-size:     12px;
	color:         #888;
	cursor:        pointer;
	transition:    background 0.15s, color 0.15s;
}

.wc-ct-remove-btn:hover {
	background: #fff0f0;
	color:      #c00;
	border-color: #ffbbbb;
}

/* Stock badges */
.wc-ct-stock-in    { color: #2a9e2a; font-weight: 500; }
.wc-ct-stock-out   { color: #cc0000; font-weight: 500; }
.wc-ct-stock-back  { color: #e68a00; font-weight: 500; }

/* Rating stars */
.wc-ct-stars       { color: #f5a623; letter-spacing: 1px; }
.wc-ct-rating-count { color: #888; font-size: 12px; margin-left: 4px; }

/* Add to cart row */
.wc-compare-table .wc-ct-addcart-row td {
	background:  #fafafa;
	text-align:  center;
	border-top:  2px solid #e0e0e0;
}

/* =============================================================================
   7. MOBILE RESPONSIVE
   ============================================================================= */
@media ( max-width: 768px ) {
	.wc-compare-bar {
		padding: 0 8px 8px;
	}

	.wc-compare-bar__inner {
		padding: 12px 14px;
		border-radius: 10px 10px 0 0;
	}

	.wc-compare-bar__slot {
		padding:    0 10px;
		min-height: 100px;
	}

	.wc-compare-bar__product {
		min-height: 90px;
		padding:    6px 6px 8px;
	}

	.wc-compare-bar__product img {
		width:  52px;
		height: 58px;
	}

	.wc-compare-bar__add-slot { min-height: 90px; }
	.wc-compare-add-icon      { width: 36px; height: 36px; font-size: 18px; }

	.wc-compare-bar__actions  { min-width: 140px; padding-left: 14px; gap: 7px; }
	.wc-compare-bar__count    { font-size: 12px; }

	.wc-compare-bar__btn-collapse,
	.wc-compare-bar__btn-compare {
		padding:   7px 10px;
		font-size: 12px;
	}
}

@media ( max-width: 480px ) {
	.wc-compare-bar {
		padding: 0 0 0;
	}

	.wc-compare-bar__inner {
		padding:       10px 10px;
		border-radius: 8px 8px 0 0;
	}

	.wc-compare-bar__slot {
		padding:    0 8px;
		min-height: 80px;
	}

	.wc-compare-bar__product {
		min-height: 72px;
		padding:    4px 4px 6px;
	}

	.wc-compare-bar__product img {
		width:  44px;
		height: 50px;
	}

	.wc-compare-bar__product-name { display: none; }
	.wc-compare-bar__add-slot     { min-height: 72px; gap: 6px; }
	.wc-compare-add-icon          { width: 30px; height: 30px; font-size: 16px; }
	.wc-compare-add-slot-text     { font-size: 10px; max-width: 70px; }

	.wc-compare-bar__divider  { height: 60px; }
	.wc-compare-bar__actions  { min-width: 110px; padding-left: 10px; gap: 6px; }
	.wc-compare-bar__count    { font-size: 11px; }

	.wc-compare-bar__btns { gap: 5px; }
	.wc-compare-bar__btn-collapse,
	.wc-compare-bar__btn-compare {
		padding:   6px 8px;
		font-size: 11px;
	}

	.wc-compare-pill--bottom-right { bottom: 16px; right: 16px; }
	.wc-compare-pill--bottom-left  { bottom: 16px; left: 16px; }

	.wc-compare-modal {
		padding: 8px;
		align-items: flex-end;
	}

	.wc-compare-modal__box {
		border-radius: 10px 10px 0 0;
		max-height: 90vh;
	}
}