/**
 * HostingTags - Reviews System Styles (v3)
 * Covers: Reviews Archive, Review Cards, Single Review v3, Comparison Page
 *
 * @package HostingTags
 * @since 3.0.0
 */

/* Design tokens are injected via PHP (hostingtags_design_tokens) */

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* --- Buttons --- */
.ht-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	border: none;
	border-radius: var(--ht-radius-sm);
	font-size: var(--ht-body-size, 14px);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none !important;
	transition: transform var(--ht-transition), box-shadow var(--ht-transition), background var(--ht-transition);
	line-height: 1.4;
	white-space: nowrap;
}

.ht-btn:hover { transform: translateY(-1px); }

.ht-btn--primary {
	background: linear-gradient(135deg, var(--ht-primary), var(--ht-primary-dark));
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(var(--ht-primary-rgb),.3);
}
.ht-btn--primary:hover { box-shadow: 0 4px 14px rgba(var(--ht-primary-rgb),.4); color: #fff !important; }

.ht-btn--success {
	background: linear-gradient(135deg, var(--ht-success), var(--ht-success-dark));
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(var(--ht-success-rgb),.3);
}
.ht-btn--success:hover { box-shadow: 0 4px 14px rgba(var(--ht-success-rgb),.4); color: #fff !important; }

.ht-btn--outline {
	background: transparent;
	border: 2px solid var(--ht-primary);
	color: var(--ht-primary) !important;
}
.ht-btn--outline:hover { background: var(--ht-primary-light); }

.ht-btn--primary-sm {
	display: inline-block;
	padding: 6px 16px;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 600;
	border-radius: var(--ht-radius-sm);
	background: var(--ht-primary);
	color: #fff !important;
	text-decoration: none !important;
	transition: background var(--ht-transition);
}
.ht-btn--primary-sm:hover { background: var(--ht-primary-dark); color: #fff !important; }

.ht-btn--lg { padding: 14px 28px; font-size: calc(var(--ht-body-size, 14px) * 1.14); border-radius: 8px; }
.ht-btn--sm { padding: 6px 14px; font-size: calc(var(--ht-body-size, 14px) * 0.86); }
.ht-btn--block { width: 100%; }

/* --- Badges --- */
.ht-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: calc(var(--ht-body-size, 14px) * 0.79);
	font-weight: 600;
	line-height: 1.4;
}
.ht-badge--primary { background: var(--ht-primary-light); color: var(--ht-primary-dark); }
.ht-badge--success { background: var(--ht-success-light); color: var(--ht-success-dark); }
.ht-badge--warning { background: var(--ht-warning-light); color: var(--ht-warning-dark); }
.ht-badge--danger { background: var(--ht-danger-light); color: var(--ht-danger-dark); }
.ht-badge--gold { background: linear-gradient(135deg, var(--ht-star), var(--ht-warning)); color: var(--ht-gray-800); }
.ht-badge--dark { background: var(--ht-gray-800); color: #fff; }

/* --- Chips --- */
.ht-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	font-weight: 500;
	background: var(--ht-gray-100);
	color: var(--ht-gray-700);
	border: 1px solid var(--ht-gray-200);
}
.ht-chip svg { flex-shrink: 0; }
.ht-chip--active { background: var(--ht-success-light); color: var(--ht-success-dark); border-color: var(--ht-success-light); }

/* --- Stars --- */
.ht-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--ht-warning);
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	line-height: 1;
}
.ht-stars--sm { font-size: calc(var(--ht-body-size, 14px) * 0.93); }
.ht-stars--lg { font-size: calc(var(--ht-body-size, 14px) * 1.43); }
.ht-stars .star-empty { color: var(--ht-gray-300); }

.ht-stars-inline {
	color: var(--ht-warning);
	font-size: var(--ht-body-size, 14px);
	letter-spacing: 1px;
}

/* --- Section --- */
.ht-section {
	margin-bottom: 32px;
}
.ht-section__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: calc(var(--ht-body-size, 14px) * 1.43);
	font-weight: 700;
	color: var(--ht-gray-900);
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ht-gray-200);
}
.ht-section__title svg { color: var(--ht-primary); flex-shrink: 0; }

/* ============================================================
   REVIEWS ARCHIVE PAGE
   ============================================================ */
.ht-reviews-page {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 16px;
}

/* --- Hero --- */
.ht-reviews-hero {
	text-align: center;
	padding: 48px 24px 32px;
	background: linear-gradient(135deg, var(--ht-gray-900) 0%, var(--ht-primary-dark) 50%, var(--ht-primary-dark) 100%);
	color: #fff;
	margin-bottom: 32px;
	border-radius: 0 0 var(--ht-radius-lg) var(--ht-radius-lg);
}
.ht-reviews-hero h1 {
	font-size: calc(var(--ht-body-size, 14px) * 2.29);
	font-weight: 800;
	margin: 0 0 10px;
	color: #fff;
}
.ht-reviews-hero p {
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	color: rgba(255,255,255,.8);
	margin: 0 0 20px;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
.ht-reviews-hero .ht-hero-badges {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Toolbar --- */
.ht-reviews-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-shadow);
}

.ht-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	border: 1px solid var(--ht-gray-200);
	border-radius: 20px;
	background: #fff;
	color: var(--ht-gray-600);
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 500;
	cursor: pointer;
	transition: all var(--ht-transition);
}
.ht-filter-btn:hover,
.ht-filter-btn.active {
	background: var(--ht-primary);
	color: #fff;
	border-color: var(--ht-primary);
}

.ht-sort-select {
	padding: 6px 12px;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	color: var(--ht-gray-700);
	background: #fff;
	cursor: pointer;
}
.ht-sort-select:focus { border-color: var(--ht-primary); outline: none; box-shadow: 0 0 0 3px rgba(var(--ht-primary-rgb),.15); }

/* --- Reviews List --- */
.ht-reviews-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 32px;
}

/* --- Toolbar children --- */
.ht-reviews-toolbar__count {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 600;
	color: var(--ht-gray-600);
}
.ht-reviews-toolbar__count svg { color: var(--ht-gray-400); }
.ht-reviews-toolbar__filters {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* --- Select (shared) --- */
.ht-select {
	padding: 7px 14px;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	color: var(--ht-gray-700);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--ht-transition);
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 30px;
}
.ht-select:focus {
	border-color: var(--ht-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--ht-primary-rgb),.15);
}

/* --- CTA Section --- */
.ht-cta-section,
.ht-reviews-cta {
	text-align: center;
	padding: 40px 24px;
	background: linear-gradient(135deg, var(--ht-primary-lighter), var(--ht-primary-lighter));
	border-radius: var(--ht-radius-lg);
	border: 1px solid var(--ht-primary-light);
	margin-bottom: 32px;
}
.ht-cta-section h2,
.ht-reviews-cta h2 { font-size: calc(var(--ht-body-size, 14px) * 1.57); font-weight: 700; margin: 0 0 8px; color: var(--ht-gray-900); }
.ht-cta-section p,
.ht-reviews-cta p { font-size: var(--ht-body-size, 14px); color: var(--ht-gray-500); margin: 0 0 18px; }
.ht-cta-buttons {
	display: flex;
	justify-content: center;
	gap: 12px;
}

/* --- Empty State --- */
.ht-empty-state {
	text-align: center;
	padding: 64px 24px;
	color: var(--ht-gray-400);
}
.ht-empty-state svg { margin-bottom: 16px; opacity: .5; }
.ht-empty-state h3 { font-size: calc(var(--ht-body-size, 14px) * 1.29); font-weight: 700; margin: 0 0 6px; color: var(--ht-gray-500); }
.ht-empty-state p { font-size: var(--ht-body-size, 14px); margin: 0; }

/* --- Pagination --- */
.ht-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	margin-bottom: 32px;
}
.ht-pagination a,
.ht-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 600;
	color: var(--ht-gray-600);
	text-decoration: none;
	transition: all var(--ht-transition);
}
.ht-pagination a:hover {
	border-color: var(--ht-primary);
	color: var(--ht-primary);
	background: var(--ht-primary-lighter);
}
.ht-pagination .current {
	background: var(--ht-primary);
	color: #fff;
	border-color: var(--ht-primary);
}

/* --- No-results text (filter) --- */
.ht-no-results {
	text-align: center;
	padding: 40px 20px;
	color: var(--ht-gray-400);
	font-size: var(--ht-body-size, 14px);
	display: none;
}

/* ============================================================
   REVIEW CARD (Horizontal)
   ============================================================ */
.ht-review-card {
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	box-shadow: var(--ht-shadow);
	overflow: hidden;
	transition: box-shadow var(--ht-transition), transform var(--ht-transition);
	position: relative;
}
.ht-review-card:hover {
	box-shadow: var(--ht-shadow-md);
	transform: translateY(-2px);
}

/* Rank label */
.ht-review-card__rank {
	position: absolute;
	top: 12px;
	left: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 28px;
	padding: 0 8px;
	background: linear-gradient(135deg, var(--ht-primary), var(--ht-primary-dark));
	color: #fff;
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	font-weight: 800;
	border-radius: var(--ht-radius-sm);
	z-index: 2;
	line-height: 1;
}
.ht-review-card__rank--top {
	background: linear-gradient(135deg, var(--ht-warning), var(--ht-warning-dark));
	min-width: 36px;
}

/* Badge (e.g. "POPULAR") */
.ht-review-card__badge {
	position: absolute;
	top: 0;
	right: 16px;
	background: var(--ht-primary);
	color: #fff;
	font-size: calc(var(--ht-body-size, 14px) * 0.71);
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 0 0 var(--ht-radius-sm) var(--ht-radius-sm);
	text-transform: uppercase;
	letter-spacing: .04em;
	z-index: 2;
}

/* Inner wrapper — horizontal row */
.ht-review-card__inner {
	display: flex;
	align-items: center;
	gap: 0;
	padding: 20px;
	padding-left: 56px; /* space for rank label */
}
.ht-review-card:not(:has(.ht-review-card__rank)) .ht-review-card__inner {
	padding-left: 20px;
}

/* Provider: logo + name */
.ht-review-card__provider {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	min-width: 180px;
	padding-right: 20px;
	border-right: 1px solid var(--ht-gray-100);
}
.ht-review-card__logo {
	width: 56px;
	height: 56px;
	border-radius: var(--ht-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--ht-gray-50);
	overflow: hidden;
}
.ht-review-card__logo img {
	max-width: 48px;
	max-height: 48px;
	object-fit: contain;
}
.ht-review-card__logo--placeholder {
	background: var(--ht-primary-light);
}
.ht-review-card__logo--placeholder span {
	color: var(--ht-primary);
	font-size: calc(var(--ht-body-size, 14px) * 1.29);
	font-weight: 800;
}
.ht-review-card__name-wrap {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ht-review-card__name {
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	font-weight: 700;
	color: var(--ht-gray-900);
	margin: 0;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ht-review-card__bestfor {
	font-size: calc(var(--ht-body-size, 14px) * 0.79);
	color: var(--ht-gray-400);
	line-height: 1.3;
}

/* Metrics: stars + stats */
.ht-review-card__metrics {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
}
.ht-review-card__stars-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.ht-review-card__rating-num {
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	font-weight: 800;
	color: var(--ht-primary-dark);
}

/* Stats grid */
.ht-review-card__stats {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ht-stat {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.ht-stat__label {
	font-size: calc(var(--ht-body-size, 14px) * 0.71);
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--ht-gray-400);
	font-weight: 600;
}
.ht-stat__value {
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 700;
	color: var(--ht-gray-800);
}
.ht-stat--price .ht-stat__value {
	color: var(--ht-success);
	font-size: var(--ht-body-size, 14px);
}

/* Action buttons */
.ht-review-card__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding-left: 20px;
	border-left: 1px solid var(--ht-gray-100);
	flex-shrink: 0;
	min-width: 140px;
}

/* Discount tag */
.ht-review-card__discount {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: calc(var(--ht-body-size, 14px) * 0.71);
	font-weight: 700;
	color: var(--ht-danger);
	background: var(--ht-danger-light);
	padding: 2px 8px;
	border-radius: 10px;
}

/* Excerpt toggle */
.ht-review-card__excerpt {
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	color: var(--ht-gray-600);
	line-height: 1.6;
	padding: 0 20px 14px;
	display: none;
	border-top: 1px solid var(--ht-gray-100);
	margin-top: -1px;
}
.ht-review-card__excerpt.open { display: block; padding-top: 14px; }

/* ============================================================
   SINGLE REVIEW v3
   ============================================================ */
.ht-single-review {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 16px;
}

/* --- Hero --- */
.ht-review-hero {
	display: flex;
	gap: 24px;
	margin-bottom: 32px;
	position: relative;
}
.ht-review-hero__logo {
	width: 80px;
	height: 80px;
	border-radius: var(--ht-radius);
	object-fit: contain;
	background: #fff;
	padding: 8px;
	box-shadow: var(--ht-shadow);
	flex-shrink: 0;
}
.ht-review-hero__info { flex: 1; min-width: 0; }
.ht-review-hero__title {
	font-size: calc(var(--ht-body-size, 14px) * 2.0);
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--ht-gray-900);
	line-height: 1.25;
}
.ht-review-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.ht-hero-sidebar {
	width: 240px;
	flex-shrink: 0;
}

/* --- Price Card --- */
.ht-price-card {
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	padding: 20px;
	text-align: center;
	box-shadow: var(--ht-shadow);
}
.ht-price-card__discount {
	display: inline-block;
	background: var(--ht-danger);
	color: #fff;
	font-size: calc(var(--ht-body-size, 14px) * 0.79);
	font-weight: 700;
	padding: 2px 10px;
	border-radius: 12px;
	margin-bottom: 8px;
}
.ht-price-card__amount {
	font-size: calc(var(--ht-body-size, 14px) * 2.29);
	font-weight: 800;
	color: var(--ht-gray-900);
	margin: 6px 0 2px;
}
.ht-price-card__period {
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	color: var(--ht-gray-500);
	margin-bottom: 14px;
}

/* --- Sticky Sidebar --- */
.ht-sidebar-sticky {
	position: sticky;
	top: 80px;
}
.ht-sidebar-stats {
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: var(--ht-shadow);
}
.ht-sidebar-stats dl {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.ht-sidebar-stats dt {
	font-size: calc(var(--ht-body-size, 14px) * 0.71);
	text-transform: uppercase;
	color: var(--ht-gray-400);
	letter-spacing: .05em;
	font-weight: 600;
}
.ht-sidebar-stats dd {
	font-size: var(--ht-body-size, 14px);
	font-weight: 700;
	color: var(--ht-gray-800);
	margin: 0 0 8px;
}

/* --- Sidebar TOC --- */
.ht-sidebar-toc {
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	padding: 16px;
	box-shadow: var(--ht-shadow);
}
.ht-sidebar-toc h3 {
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--ht-gray-700);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.ht-sidebar-toc ol {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}
.ht-sidebar-toc li {
	counter-increment: toc;
}
.ht-sidebar-toc li a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	color: var(--ht-gray-600);
	text-decoration: none;
	border-left: 2px solid transparent;
	padding-left: 10px;
	transition: all var(--ht-transition);
}
.ht-sidebar-toc li a::before {
	content: counter(toc) ".";
	font-weight: 600;
	color: var(--ht-gray-400);
	min-width: 16px;
}
.ht-sidebar-toc li a:hover,
.ht-sidebar-toc li a.active {
	color: var(--ht-primary);
	border-left-color: var(--ht-primary);
}

/* --- Benchmark Cards --- */
.ht-benchmark-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	margin-bottom: 12px;
}
.ht-benchmark-card__icon {
	width: 44px;
	height: 44px;
	border-radius: var(--ht-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.ht-benchmark-card__icon--uptime { background: var(--ht-success-light); color: var(--ht-success); }
.ht-benchmark-card__icon--speed { background: var(--ht-primary-lighter); color: var(--ht-primary); }
.ht-benchmark-card__info { flex: 1; min-width: 0; }
.ht-benchmark-card__label {
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	color: var(--ht-gray-400);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 600;
	margin-bottom: 2px;
}
.ht-benchmark-card__value {
	font-size: calc(var(--ht-body-size, 14px) * 1.57);
	font-weight: 800;
	color: var(--ht-gray-900);
}
.ht-benchmark-card__bar {
	height: 6px;
	border-radius: 3px;
	background: var(--ht-gray-100);
	margin-top: 6px;
	overflow: hidden;
}
.ht-benchmark-card__bar-fill {
	height: 100%;
	border-radius: 3px;
	transition: width .6s ease;
}
.ht-benchmark-card__bar-fill--good { background: var(--ht-success); }
.ht-benchmark-card__bar-fill--avg { background: var(--ht-warning); }
.ht-benchmark-card__bar-fill--bad { background: var(--ht-danger); }
.ht-benchmark-card__badge {
	font-size: calc(var(--ht-body-size, 14px) * 0.79);
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 12px;
}

/* --- Pricing Breakdown --- */
.ht-pricing-breakdown {
	margin-bottom: 24px;
}
.ht-pricing-table {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
.ht-pricing-item {
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	padding: 18px;
	text-align: center;
}
.ht-pricing-item__label {
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	color: var(--ht-gray-500);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-weight: 600;
	margin-bottom: 4px;
}
.ht-pricing-item__value {
	font-size: calc(var(--ht-body-size, 14px) * 1.86);
	font-weight: 800;
	color: var(--ht-gray-900);
}
.ht-pricing-item__period {
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	color: var(--ht-gray-400);
}
.ht-pricing-inclusions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* --- Coupon Banner --- */
.ht-coupon-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 22px;
	background: linear-gradient(135deg, var(--ht-primary-dark), var(--ht-primary-dark));
	border-radius: var(--ht-radius);
	margin-bottom: 32px;
	color: #fff;
}
.ht-coupon-banner__info { flex: 1; min-width: 0; }
.ht-coupon-banner__code {
	font-family: 'Courier New', Courier, monospace;
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	font-weight: 700;
	padding: 6px 18px;
	background: rgba(255,255,255,.15);
	color: var(--ht-star);
	border: 1px dashed rgba(255,255,255,.4);
	border-radius: var(--ht-radius-sm);
	cursor: pointer;
	transition: background var(--ht-transition);
}
.ht-coupon-banner__code:hover { background: rgba(255,255,255,.25); }

/* --- Pros & Cons v3 --- */
.ht-proscons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 32px;
}
.ht-pros-col,
.ht-cons-col {
	border-radius: var(--ht-radius);
	padding: 20px 22px;
	border: 1px solid var(--ht-gray-200);
}
.ht-pros-col {
	border-top: 4px solid var(--ht-success);
	background: linear-gradient(180deg, var(--ht-success-light), #fff);
}
.ht-cons-col {
	border-top: 4px solid var(--ht-danger);
	background: linear-gradient(180deg, var(--ht-danger-light), #fff);
}
.ht-pros-col h3,
.ht-cons-col h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 14px;
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	font-weight: 700;
	color: var(--ht-gray-800);
}
.ht-pros-col ul,
.ht-cons-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.ht-pros-col li,
.ht-cons-col li {
	padding: 7px 0 7px 24px;
	font-size: var(--ht-body-size, 14px);
	line-height: 1.6;
	border-bottom: 1px solid rgba(0,0,0,.04);
	position: relative;
	color: var(--ht-gray-700);
}
.ht-pros-col li:last-child,
.ht-cons-col li:last-child { border-bottom: 0; }
.ht-pros-col li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 7px;
	color: var(--ht-success);
	font-weight: 800;
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	line-height: 1.6;
}
.ht-cons-col li::before {
	content: "\2212";
	position: absolute;
	left: 0;
	top: 7px;
	color: var(--ht-danger);
	font-weight: 800;
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	line-height: 1.6;
}

/* --- Rating Bars --- */
.ht-rating-bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ht-rating-bar {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ht-rating-bar__label {
	width: 110px;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 500;
	color: var(--ht-gray-600);
	flex-shrink: 0;
}
.ht-rating-bar__track {
	flex: 1;
	height: 8px;
	background: var(--ht-gray-100);
	border-radius: 4px;
	overflow: hidden;
}
.ht-rating-bar__fill {
	height: 100%;
	border-radius: 4px;
	background: var(--ht-primary);
	transition: width .6s ease;
}
.ht-rating-bar__value {
	width: 28px;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 700;
	color: var(--ht-gray-800);
	text-align: right;
}
.ht-rating-overall {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--ht-primary-light);
	border-radius: var(--ht-radius);
	margin-top: 16px;
}
.ht-rating-overall__score {
	font-size: calc(var(--ht-body-size, 14px) * 2.57);
	font-weight: 800;
	color: var(--ht-primary-dark);
	line-height: 1;
}
.ht-rating-overall__label {
	font-size: var(--ht-body-size, 14px);
	color: var(--ht-gray-600);
}

/* --- Features Grid v3 --- */
.ht-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 8px;
}
.ht-feature-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: var(--ht-success-light);
	border: 1px solid var(--ht-success-light);
	border-radius: var(--ht-radius-sm);
	font-size: var(--ht-body-size, 14px);
	color: var(--ht-success-dark);
	transition: background var(--ht-transition);
}
.ht-feature-item:hover { background: var(--ht-success-light); }
.ht-feature-item svg { flex-shrink: 0; }

/* --- Support Info --- */
.ht-support-info {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
}
.ht-support-info__type {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: var(--ht-primary-light);
	color: var(--ht-primary-dark);
	border-radius: 20px;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	font-weight: 600;
	flex-shrink: 0;
}
.ht-support-info__channels {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* --- Company Info --- */
.ht-company-info {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}
.ht-company-info__item {
	padding: 16px;
	background: var(--ht-gray-50);
	border-radius: var(--ht-radius);
	text-align: center;
}
.ht-company-info__label {
	font-size: calc(var(--ht-body-size, 14px) * 0.79);
	text-transform: uppercase;
	color: var(--ht-gray-400);
	letter-spacing: .05em;
	font-weight: 600;
	margin-bottom: 4px;
}
.ht-company-info__value {
	font-size: calc(var(--ht-body-size, 14px) * 1.07);
	font-weight: 700;
	color: var(--ht-gray-800);
}

/* --- Verdict Box --- */
.ht-verdict-box {
	padding: 28px;
	background: linear-gradient(135deg, var(--ht-primary-lighter), var(--ht-primary-lighter));
	border: 1px solid var(--ht-primary-light);
	border-radius: var(--ht-radius-lg);
	text-align: center;
}
.ht-verdict-box__score {
	font-size: calc(var(--ht-body-size, 14px) * 3.43);
	font-weight: 800;
	color: var(--ht-primary-dark);
	line-height: 1;
	margin-bottom: 4px;
}
.ht-verdict-box__text {
	font-size: calc(var(--ht-body-size, 14px) * 1.07);
	color: var(--ht-gray-600);
	line-height: 1.7;
	max-width: 600px;
	margin: 12px auto 20px;
}

/* ============================================================
   COMPARISON PAGE
   ============================================================ */
.ht-compare-page {
	padding-bottom: 48px;
}

.ht-compare-hero {
	text-align: center;
	padding: 48px 24px 32px;
	background: linear-gradient(135deg, var(--ht-gray-900) 0%, var(--ht-primary-dark) 50%, var(--ht-primary-dark) 100%);
	color: #fff;
	margin-bottom: 32px;
	border-radius: 0 0 var(--ht-radius-lg) var(--ht-radius-lg);
}
.ht-compare-hero h1 {
	font-size: calc(var(--ht-body-size, 14px) * 2.14);
	font-weight: 800;
	margin: 0 0 8px;
	color: #fff;
}
.ht-compare-hero p {
	font-size: calc(var(--ht-body-size, 14px) * 1.07);
	color: rgba(255,255,255,.8);
	margin: 0;
}

/* --- Selectors --- */
.ht-compare-selectors {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	max-width: 960px;
	margin: 0 auto 32px;
	padding: 0 16px;
}
.ht-compare-selector label {
	display: block;
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	font-weight: 600;
	color: var(--ht-gray-500);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
}
.ht-compare-select {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	font-size: var(--ht-body-size, 14px);
	color: var(--ht-gray-700);
	background: #fff;
	cursor: pointer;
	transition: border-color var(--ht-transition);
}
.ht-compare-select:focus {
	outline: none;
	border-color: var(--ht-primary);
	box-shadow: 0 0 0 3px rgba(var(--ht-primary-rgb),.12);
}

/* --- Compare Table --- */
.ht-compare-table-wrap {
	max-width: 960px;
	margin: 0 auto 40px;
	padding: 0 16px;
	overflow-x: auto;
}
.ht-compare-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	overflow: hidden;
	background: #fff;
}
.ht-compare-table th,
.ht-compare-table td {
	padding: 14px 16px;
	text-align: center;
	border-bottom: 1px solid var(--ht-gray-100);
	font-size: var(--ht-body-size, 14px);
	vertical-align: middle;
}
.ht-compare-table thead th,
.ht-compare-table thead td {
	background: var(--ht-gray-50);
	font-weight: 700;
	font-size: calc(var(--ht-body-size, 14px) * 0.93);
	color: var(--ht-gray-600);
	text-transform: uppercase;
	letter-spacing: .03em;
}
.ht-compare-table th.ht-compare-table__feature {
	text-align: left;
	width: 160px;
	color: var(--ht-gray-600);
	font-weight: 600;
}
.ht-compare-table tbody th {
	text-align: left;
	font-weight: 600;
	color: var(--ht-gray-700);
	background: var(--ht-gray-50);
}
.ht-compare-table tr:last-child th,
.ht-compare-table tr:last-child td {
	border-bottom: 0;
}
.ht-compare-table tr:hover td {
	background: #fafbff;
}
.ht-compare-table img {
	border-radius: var(--ht-radius-sm);
}

/* --- Popular Comparisons --- */
.ht-popular-comparisons {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 16px;
}
.ht-popular-comparisons h2 {
	font-size: calc(var(--ht-body-size, 14px) * 1.57);
	font-weight: 700;
	margin: 0 0 18px;
	color: var(--ht-gray-900);
}
.ht-pop-compare-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}
.ht-pop-compare-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	text-decoration: none !important;
	color: var(--ht-gray-700) !important;
	font-size: calc(var(--ht-body-size, 14px) * 1.07);
	font-weight: 600;
	transition: box-shadow var(--ht-transition), border-color var(--ht-transition);
}
.ht-pop-compare-card:hover {
	border-color: var(--ht-primary);
	box-shadow: var(--ht-shadow-md);
	color: var(--ht-primary) !important;
}
.ht-vs {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--ht-gray-100);
	color: var(--ht-gray-400);
	font-size: calc(var(--ht-body-size, 14px) * 0.79);
	font-weight: 700;
	text-transform: uppercase;
	flex-shrink: 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.ht-review-hero {
		flex-direction: column;
	}
	.ht-hero-sidebar {
		width: 100%;
	}
	.ht-compare-selectors {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.ht-reviews-hero h1 { font-size: calc(var(--ht-body-size, 14px) * 1.71); }
	.ht-reviews-toolbar { flex-direction: column; align-items: stretch; }
	.ht-reviews-toolbar__filters { flex-wrap: wrap; }

	/* Card: stack vertically */
	.ht-review-card__inner {
		flex-direction: column;
		padding: 16px;
		padding-top: 40px; /* space for rank */
		gap: 14px;
	}
	.ht-review-card:not(:has(.ht-review-card__rank)) .ht-review-card__inner {
		padding-top: 16px;
	}
	.ht-review-card__provider {
		border-right: 0;
		padding-right: 0;
		min-width: 0;
		width: 100%;
	}
	.ht-review-card__metrics {
		flex-direction: column;
		padding: 0;
		gap: 10px;
		align-items: flex-start;
	}
	.ht-review-card__stats {
		gap: 12px;
		width: 100%;
	}
	.ht-review-card__actions {
		border-left: 0;
		border-top: 1px solid var(--ht-gray-100);
		padding-left: 0;
		padding-top: 14px;
		flex-direction: row;
		width: 100%;
		justify-content: flex-start;
		min-width: 0;
	}
	.ht-review-card__badge { right: 12px; }

	.ht-review-hero__title { font-size: calc(var(--ht-body-size, 14px) * 1.57); }
	.ht-pricing-table { grid-template-columns: 1fr; }
	.ht-proscons { grid-template-columns: 1fr; }
	.ht-features-grid { grid-template-columns: 1fr; }
	.ht-company-info { grid-template-columns: 1fr 1fr; }
	.ht-compare-selectors { grid-template-columns: 1fr; }
	.ht-compare-table-wrap { font-size: calc(var(--ht-body-size, 14px) * 0.93); }
	.ht-compare-hero h1 { font-size: calc(var(--ht-body-size, 14px) * 1.57); }

	.ht-coupon-banner {
		flex-direction: column;
		text-align: center;
	}

	.ht-support-info {
		flex-direction: column;
	}

	.ht-verdict-box { padding: 20px; }
	.ht-verdict-box__score { font-size: calc(var(--ht-body-size, 14px) * 2.57); }
}

@media (max-width: 480px) {
	.ht-review-card__inner { padding: 12px; padding-top: 38px; }
	.ht-review-card:not(:has(.ht-review-card__rank)) .ht-review-card__inner { padding-top: 12px; }
	.ht-review-card__name { font-size: calc(var(--ht-body-size, 14px) * 1.0); }
	.ht-review-card__actions { gap: 6px; }
	.ht-review-card__stats { gap: 8px; flex-wrap: wrap; }
	.ht-review-card__cta { padding: 12px 14px; }
	.ht-btn--lg { padding: 12px 20px; font-size: var(--ht-body-size, 14px); }
	.ht-rating-bar__label { width: 80px; font-size: calc(var(--ht-body-size, 14px) * 0.86); }
	.ht-company-info { grid-template-columns: 1fr; }
}

/* ============================================================
   RTL SUPPORT
   ============================================================ */
[dir="rtl"] .ht-pros-col li,
[dir="rtl"] .ht-cons-col li {
	padding-left: 0;
	padding-right: 24px;
}
[dir="rtl"] .ht-pros-col li::before,
[dir="rtl"] .ht-cons-col li::before {
	left: auto;
	right: 0;
}
[dir="rtl"] .ht-compare-table th.ht-compare-table__feature,
[dir="rtl"] .ht-compare-table tbody th {
	text-align: right;
}
[dir="rtl"] .ht-review-card__rank {
	left: auto;
	right: 12px;
}
[dir="rtl"] .ht-review-card__badge {
	right: auto;
	left: 16px;
}
[dir="rtl"] .ht-review-card__inner {
	padding-left: 20px;
	padding-right: 56px;
}
[dir="rtl"] .ht-review-card:not(:has(.ht-review-card__rank)) .ht-review-card__inner {
	padding-right: 20px;
}
[dir="rtl"] .ht-review-card__provider {
	border-right: 0;
	border-left: 1px solid var(--ht-gray-100);
	padding-right: 0;
	padding-left: 20px;
}
[dir="rtl"] .ht-review-card__actions {
	border-left: 0;
	border-right: 1px solid var(--ht-gray-100);
	padding-left: 0;
	padding-right: 20px;
}
[dir="rtl"] .ht-select {
	background-position: left 10px center;
	padding-right: 14px;
	padding-left: 30px;
}
[dir="rtl"] .ht-sidebar-toc li a {
	border-left: 0;
	border-right: 2px solid transparent;
	padding-left: 0;
	padding-right: 10px;
}
[dir="rtl"] .ht-sidebar-toc li a:hover,
[dir="rtl"] .ht-sidebar-toc li a.active {
	border-right-color: var(--ht-primary);
}
[dir="rtl"] .ht-rating-bar__value {
	text-align: left;
}
[dir="rtl"] .ht-rating-bar__label {
	text-align: right;
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
	.ht-reviews-hero,
	.ht-compare-hero,
	.ht-reviews-toolbar,
	.ht-reviews-cta,
	.ht-coupon-banner,
	.ht-btn,
	.ht-sidebar-sticky {
		display: none !important;
	}
	.ht-review-card,
	.ht-compare-table {
		box-shadow: none;
		border: 1px solid #ccc;
	}
}

/* ============================================================
   COMPARISON PAGE v3.1 — Enhanced Interactivity
   ============================================================ */

/* --- Selector Wrap --- */
.ht-selector-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.ht-selector-wrap .ht-compare-select {
	padding-right: 36px;
}
.ht-selector-clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	font-size: calc(var(--ht-body-size, 14px) * 1.29);
	color: var(--ht-gray-400);
	cursor: pointer;
	padding: 0 4px;
	line-height: 1;
	transition: color var(--ht-transition);
}
.ht-selector-clear:hover {
	color: var(--ht-danger);
}
.ht-compare-selector.ht-selector--active {
	position: relative;
}
.ht-compare-selector.ht-selector--active::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 3px;
	background: var(--ht-primary);
	border-radius: 2px;
}

/* --- Actions Bar --- */
.ht-compare-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 10px 16px;
	background: var(--ht-gray-50);
	border-radius: var(--ht-radius);
}
.ht-compare-count {
	font-size: var(--ht-body-size, 14px);
	font-weight: 600;
	color: var(--ht-gray-700);
}
.ht-btn--outline-sm {
	padding: 6px 14px;
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	font-weight: 600;
	border: 1px solid var(--ht-gray-300);
	border-radius: var(--ht-radius-sm);
	background: #fff;
	color: var(--ht-gray-600);
	cursor: pointer;
	transition: all var(--ht-transition);
}
.ht-btn--outline-sm:hover {
	border-color: var(--ht-primary);
	color: var(--ht-primary);
}
.ht-btn--success {
	border-color: var(--ht-success) !important;
	color: var(--ht-success) !important;
	background: var(--ht-success-bg) !important;
}

/* --- Empty State --- */
.ht-compare-empty {
	text-align: center;
	padding: 48px 16px;
	color: var(--ht-gray-400);
}
.ht-compare-empty__icon {
	margin-bottom: 12px;
}
.ht-compare-empty p {
	font-size: calc(var(--ht-body-size, 14px) * 1.07);
	margin: 0;
}

/* --- Winner Highlight --- */
.ht-compare-table td.ht-winner {
	background: var(--ht-success-bg);
	position: relative;
}
.ht-compare-table td.ht-winner::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--ht-success);
}

/* --- Check / X Icons --- */
.ht-check-icon { color: var(--ht-success); }
.ht-x-icon { color: var(--ht-danger); }

/* --- Mobile Cards View --- */
.ht-compare-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	max-width: 960px;
	margin: 0 auto 32px;
	padding: 0 16px;
}
.ht-mobile-card {
	background: #fff;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	overflow: hidden;
	box-shadow: var(--ht-shadow-sm);
}
.ht-mobile-card__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--ht-gray-50);
	border-bottom: 1px solid var(--ht-gray-100);
}
.ht-mobile-card__header img {
	border-radius: var(--ht-radius-sm);
}
.ht-mobile-card__header h3 {
	margin: 0;
	font-size: calc(var(--ht-body-size, 14px) * 1.14);
	font-weight: 700;
}
.ht-mobile-card__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
}
.ht-mobile-card__features dt {
	padding: 10px 16px;
	font-weight: 600;
	font-size: calc(var(--ht-body-size, 14px) * 0.86);
	color: var(--ht-gray-500);
	background: var(--ht-gray-50);
	border-bottom: 1px solid var(--ht-gray-100);
}
.ht-mobile-card__features dd {
	padding: 10px 16px;
	margin: 0;
	font-size: var(--ht-body-size, 14px);
	border-bottom: 1px solid var(--ht-gray-100);
	display: flex;
	align-items: center;
}
.ht-mobile-card__cta {
	display: block;
	text-align: center;
	margin: 16px;
}

/* --- Stars inline --- */
.ht-stars-inline {
	color: var(--ht-star, #f59e0b);
	font-weight: 700;
	white-space: nowrap;
}

/* ============================================================
   MOBILE RESPONSIVE ENHANCEMENTS — Reviews & Compare
   ============================================================ */

/* --- Compare selector: prevent overflow at all sizes --- */
.ht-compare-selectors {
	box-sizing: border-box;
	max-width: 100%;
	overflow: hidden;
}
.ht-compare-selector {
	min-width: 0; /* allow flex/grid items to shrink */
	overflow: hidden;
}
.ht-selector-wrap {
	max-width: 100%;
	overflow: hidden;
}
.ht-compare-select {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	text-overflow: ellipsis;
}

/* --- Compare page container --- */
.ht-compare-page {
	overflow-x: hidden;
	max-width: 100%;
}

@media (max-width: 768px) {
	/* Selector label + select vertical layout */
	.ht-compare-selector {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	.ht-compare-selector label {
		margin-bottom: 4px;
		font-size: calc(var(--ht-body-size, 14px) * 0.86);
	}
	.ht-compare-select {
		font-size: 16px; /* prevents iOS zoom */
		padding: 10px 36px 10px 12px;
	}

	/* Actions bar wrap */
	.ht-compare-actions {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Popular comparisons grid */
	.ht-pop-compare-grid {
		grid-template-columns: 1fr;
	}

	/* Review list item: ensure logo doesn't shrink text */
	.ht-review-card__provider img {
		max-width: 80px;
		height: auto;
	}
}

@media (max-width: 480px) {
	/* Compare selectors tighter spacing */
	.ht-compare-selectors {
		gap: 10px;
		padding: 10px;
	}
	.ht-compare-select {
		padding: 8px 32px 8px 10px;
	}

	/* Mobile cards: stacked features */
	.ht-mobile-card__features {
		grid-template-columns: 1fr;
	}

	/* Verdict more compact */
	.ht-verdict-box {
		padding: 14px;
	}
	.ht-verdict-box__score {
		font-size: calc(var(--ht-body-size, 14px) * 2);
	}

	/* Review card CTA: full width */
	.ht-review-card__cta {
		width: 100%;
		text-align: center;
	}
}

@media (max-width: 360px) {
	.ht-compare-hero {
		padding: 16px 8px;
	}
	.ht-compare-hero h1 {
		font-size: 1.1rem;
	}
	.ht-review-card__inner {
		padding: 10px;
		padding-top: 36px;
	}
	.ht-review-card:not(:has(.ht-review-card__rank)) .ht-review-card__inner {
		padding-top: 10px;
	}
	.ht-review-card__stats {
		gap: 6px;
	}
}

/* --- RTL Mobile Fixes --- */
@media (max-width: 768px) {
	[dir="rtl"] .ht-review-card__inner {
		padding-right: 16px;
		padding-left: 16px;
		padding-top: 40px;
	}
	[dir="rtl"] .ht-review-card:not(:has(.ht-review-card__rank)) .ht-review-card__inner {
		padding-right: 16px;
		padding-top: 16px;
	}
	[dir="rtl"] .ht-review-card__provider {
		border-left: 0;
		padding-left: 0;
	}
	[dir="rtl"] .ht-review-card__actions {
		border-right: 0;
		padding-right: 0;
		border-top: 1px solid var(--ht-gray-100);
		padding-top: 14px;
	}
	[dir="rtl"] .ht-compare-select {
		padding: 10px 12px 10px 36px;
	}
}