/**
 * HostingTags Creative Features Styles
 *
 * Styles for all 14 creative features.
 * Uses CSS custom properties from the theme's design tokens system.
 *
 * @package HostingTags
 * @since   3.5.0
 */

/* ====================================================================
 * 1. QUICK VERDICT CARD
 * ==================================================================== */

.htf-verdict-card {
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	margin-bottom: 1.5rem;
	overflow: hidden;
	background: #fff;
	box-shadow: var(--ht-shadow);
}

.htf-verdict-card__header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--ht-primary);
	color: #fff;
	font-weight: var(--ht-heading-weight);
	font-size: 14px;
}

.htf-verdict-card__body {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 16px;
	flex-wrap: wrap;
}

.htf-verdict-card__score-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 80px;
}

.htf-verdict-card__grade {
	font-size: 12px;
	font-weight: 600;
	color: var(--ht-gray-600);
}

.htf-verdict-card__details {
	flex: 1;
	min-width: 180px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
}

.htf-verdict-card__bestfor {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--ht-primary);
}

.htf-verdict-card__pro {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--ht-gray-700);
}

.htf-verdict-card__con {
	display: flex;
	align-items: center;
	gap: 4px;
	color: var(--ht-gray-700);
}

.htf-verdict-card__cta-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 120px;
}

.htf-verdict-card__price {
	font-size: 22px;
	font-weight: 700;
	color: var(--ht-heading);
}
.htf-verdict-card__price small {
	font-size: 12px;
	font-weight: 400;
	color: var(--ht-gray-500);
}


/* ====================================================================
 * SCORE CIRCLE & BADGE (shared by multiple features)
 * ==================================================================== */

.htf-score-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 3px solid;
	font-weight: 700;
}
.htf-score-circle__num {
	font-size: 20px;
	line-height: 1;
}
.htf-score-circle__label {
	font-size: 10px;
	opacity: .6;
}

.htf-score-circle--excellent { border-color: var(--ht-success); color: var(--ht-success); }
.htf-score-circle--good      { border-color: var(--ht-primary); color: var(--ht-primary); }
.htf-score-circle--average   { border-color: var(--ht-warning); color: var(--ht-warning); }
.htf-score-circle--poor      { border-color: var(--ht-danger); color: var(--ht-danger); }

.htf-score-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
}
.htf-score-badge--excellent { background: var(--ht-success); }
.htf-score-badge--good      { background: var(--ht-primary); }
.htf-score-badge--average   { background: var(--ht-warning); }
.htf-score-badge--poor      { background: var(--ht-danger); }


/* ====================================================================
 * 2. SMART TABLE OF CONTENTS
 * ==================================================================== */

.htf-smart-toc {
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	margin: 1.5rem 0;
	background: var(--ht-gray-50);
	padding: 0;
}

.htf-smart-toc__title {
	padding: 12px 16px;
	font-weight: var(--ht-heading-weight);
	cursor: pointer;
	font-size: 14px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.htf-smart-toc__title::before {
	content: '☰';
	margin-right: 4px;
}
.htf-smart-toc__title::-webkit-details-marker { display: none; }

.htf-smart-toc__nav {
	display: flex;
	flex-direction: column;
	padding: 0 16px 12px;
}

.htf-smart-toc__item {
	display: block;
	padding: 5px 0;
	color: var(--ht-link);
	text-decoration: none;
	font-size: 13px;
	border-bottom: 1px solid var(--ht-gray-100);
	transition: color var(--ht-transition);
}
.htf-smart-toc__item:last-child { border-bottom: none; }
.htf-smart-toc__item:hover { color: var(--ht-accent); }
.htf-smart-toc__item--sub { padding-left: 16px; font-size: 12px; }


/* ====================================================================
 * 3. ALTERNATIVES WIDGET
 * ==================================================================== */

.htf-alternatives {
	margin: 2rem 0;
}

.htf-alternatives__grid {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.htf-alt-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--ht-transition), border-color var(--ht-transition);
}
.htf-alt-card:hover {
	box-shadow: var(--ht-shadow-md);
	border-color: var(--ht-primary-light);
}

.htf-alt-card__logo {
	border-radius: var(--ht-radius-sm);
	object-fit: contain;
}

.htf-alt-card__info {
	flex: 1;
}
.htf-alt-card__name {
	display: block;
	font-size: 14px;
	color: var(--ht-heading);
}
.htf-alt-card__meta {
	font-size: 12px;
	color: var(--ht-gray-500);
}

.htf-alt-card__right {
	display: flex;
	align-items: center;
	gap: 10px;
}
.htf-alt-card__price {
	font-size: 13px;
	font-weight: 600;
	color: var(--ht-primary);
}


/* ====================================================================
 * 4. TRUST SIGNALS BAR
 * ==================================================================== */

.htf-trust-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0;
	margin-bottom: 1rem;
}

.htf-trust-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 20px;
	background: var(--ht-gray-50);
	border: 1px solid var(--ht-gray-200);
	font-size: 12px;
	color: var(--ht-gray-700);
	white-space: nowrap;
}
.htf-trust-bar__item .ht-icon {
	color: var(--ht-primary);
}


/* ====================================================================
 * 6. FRESHNESS BADGE
 * ==================================================================== */

.htf-fresh-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
}

.htf-fresh-badge--fresh {
	background: var(--ht-success-light);
	color: var(--ht-success-dark);
}
.htf-fresh-badge--stale {
	background: var(--ht-warning-light);
	color: var(--ht-warning-dark);
}


/* ====================================================================
 * 7. LAST UPDATED BAR
 * ==================================================================== */

.htf-updated-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: var(--ht-gray-50);
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	font-size: 12px;
	color: var(--ht-gray-600);
	margin-bottom: 1rem;
}
.htf-updated-bar time {
	font-weight: 600;
	color: var(--ht-heading);
}


/* ====================================================================
 * 8. COMPARISON TABLE SHORTCODE
 * ==================================================================== */

.htf-compare-table-wrap {
	overflow-x: auto;
	margin: 1.5rem 0;
	-webkit-overflow-scrolling: touch;
}

.htf-compare-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 500px;
}

.htf-compare-table th,
.htf-compare-table td {
	padding: 10px 14px;
	text-align: center;
	border-bottom: 1px solid var(--ht-gray-200);
}

.htf-compare-table th {
	background: var(--ht-gray-50);
	font-weight: var(--ht-heading-weight);
	font-size: 13px;
	white-space: nowrap;
}

.htf-compare-table th img {
	display: block;
	margin: 0 auto 4px;
	border-radius: 4px;
}

.htf-compare-table th a {
	color: var(--ht-primary);
	text-decoration: none;
}
.htf-compare-table th a:hover {
	text-decoration: underline;
}

.htf-compare-table td:first-child {
	text-align: left;
	font-weight: 600;
	color: var(--ht-gray-700);
	white-space: nowrap;
}

.htf-compare-table tbody tr:hover {
	background: var(--ht-gray-50);
}


/* ====================================================================
 * 9. HOSTING MATCH TOOL
 * ==================================================================== */

.htf-match {
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	padding: 24px;
	margin: 2rem 0;
	background: #fff;
}

.htf-match__header {
	text-align: center;
	margin-bottom: 24px;
}
.htf-match__header h3 {
	margin: 8px 0 4px;
	font-size: 20px;
	color: var(--ht-heading);
}
.htf-match__header p {
	color: var(--ht-gray-500);
	font-size: 14px;
	margin: 0;
}

.htf-match__step h4 {
	margin: 0 0 12px;
	font-size: 15px;
	color: var(--ht-heading);
}

.htf-match__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.htf-match__options button {
	padding: 8px 16px;
	border: 1px solid var(--ht-gray-300);
	border-radius: var(--ht-radius-sm);
	background: #fff;
	color: var(--ht-gray-700);
	font-size: 13px;
	cursor: pointer;
	transition: all var(--ht-transition);
}
.htf-match__options button:hover,
.htf-match__options button.htf-match--active {
	background: var(--ht-primary);
	color: #fff;
	border-color: var(--ht-primary);
}

.htf-match__step--hidden {
	display: none;
}

.htf-match__results-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.htf-match__result-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	background: var(--ht-gray-50);
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--ht-transition);
}
.htf-match__result-item:hover {
	box-shadow: var(--ht-shadow-md);
}

.htf-match__result-logo {
	width: 36px;
	height: 36px;
	border-radius: 4px;
	object-fit: contain;
}

.htf-match__result-info {
	flex: 1;
}
.htf-match__result-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--ht-heading);
}
.htf-match__result-meta {
	font-size: 12px;
	color: var(--ht-gray-500);
}


/* ====================================================================
 * 10. PRICE HISTORY CHART
 * ==================================================================== */

.htf-price-history {
	margin: 2rem 0;
}

.htf-price-chart {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 160px;
	padding: 8px 0;
	border-bottom: 2px solid var(--ht-gray-200);
}

.htf-price-chart__bar {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	min-width: 40px;
}

.htf-price-chart__fill {
	width: 100%;
	max-width: 48px;
	background: linear-gradient(180deg, var(--ht-primary), var(--ht-primary-light));
	border-radius: var(--ht-radius-sm) var(--ht-radius-sm) 0 0;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	position: relative;
	min-height: 10px;
	transition: height .3s ease;
}

.htf-price-chart__label {
	font-size: 10px;
	font-weight: 600;
	color: #fff;
	padding-top: 4px;
	white-space: nowrap;
}

.htf-price-chart__date {
	font-size: 10px;
	color: var(--ht-gray-500);
	margin-top: 4px;
	white-space: nowrap;
}

.htf-price-history__note {
	font-size: 12px;
	color: var(--ht-gray-500);
	margin-top: 8px;
}


/* ====================================================================
 * 11. VERSUS LINKS
 * ==================================================================== */

.htf-versus-links {
	margin: 1.5rem 0;
	padding: 14px 16px;
	background: var(--ht-gray-50);
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
}

.htf-versus-links h4 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 14px;
	color: var(--ht-heading);
}

.htf-versus-links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.htf-versus-link {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid var(--ht-primary-light);
	border-radius: 20px;
	font-size: 12px;
	color: var(--ht-primary);
	text-decoration: none;
	background: #fff;
	transition: all var(--ht-transition);
}
.htf-versus-link:hover {
	background: var(--ht-primary);
	color: #fff;
}


/* ====================================================================
 * 12. DEAL ALERT
 * ==================================================================== */

.htf-deal-alert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px;
	border: 2px dashed var(--ht-accent);
	border-radius: var(--ht-radius);
	text-align: center;
	margin: 1.5rem 0;
	background: var(--ht-warning-light);
}

.htf-deal-alert h4 {
	margin: 0;
	font-size: 16px;
	color: var(--ht-heading);
}
.htf-deal-alert p {
	font-size: 13px;
	color: var(--ht-gray-600);
	margin: 0;
}

.htf-deal-alert__form {
	display: flex;
	gap: 8px;
	width: 100%;
	max-width: 380px;
	margin-top: 4px;
}

.htf-deal-alert__form input[type="email"] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid var(--ht-gray-300);
	border-radius: var(--ht-radius-sm);
	font-size: 13px;
}

.htf-deal-alert__success {
	color: var(--ht-success-dark);
	font-weight: 600;
	font-size: 14px;
}


/* ====================================================================
 * 13. HOSTING CALCULATOR
 * ==================================================================== */

.htf-calculator {
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius);
	padding: 24px;
	margin: 2rem 0;
	background: #fff;
}

.htf-calculator__header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}
.htf-calculator__header h3 {
	margin: 0;
	font-size: 18px;
	color: var(--ht-heading);
}

.htf-calculator__controls {
	margin-bottom: 16px;
}
.htf-calculator__controls label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ht-gray-700);
}
.htf-calculator__controls select {
	padding: 6px 10px;
	border: 1px solid var(--ht-gray-300);
	border-radius: var(--ht-radius-sm);
	font-size: 13px;
	margin-left: 8px;
}

.htf-calc-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid var(--ht-gray-200);
	border-radius: var(--ht-radius-sm);
	margin-bottom: 8px;
	background: var(--ht-gray-50);
}
.htf-calc-item__rank {
	font-size: 14px;
	font-weight: 700;
	color: var(--ht-gray-400);
	min-width: 24px;
}
.htf-calc-item__name {
	flex: 1;
	font-weight: 600;
	font-size: 14px;
	color: var(--ht-heading);
}
.htf-calc-item__name a {
	color: inherit;
	text-decoration: none;
}
.htf-calc-item__name a:hover { color: var(--ht-primary); }
.htf-calc-item__total {
	font-size: 16px;
	font-weight: 700;
	color: var(--ht-primary);
}


/* ====================================================================
 * 14. PROVIDER TIMELINE
 * ==================================================================== */

.htf-timeline {
	margin: 2rem 0;
}

.htf-timeline__track {
	position: relative;
	padding-left: 28px;
}
.htf-timeline__track::before {
	content: '';
	position: absolute;
	left: 9px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--ht-gray-200);
}

.htf-timeline__item {
	position: relative;
	padding-bottom: 20px;
}
.htf-timeline__item:last-child { padding-bottom: 0; }

.htf-timeline__dot {
	position: absolute;
	left: -28px;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--ht-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}
.htf-timeline__dot .ht-icon {
	width: 12px;
	height: 12px;
}

.htf-timeline__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.htf-timeline__date {
	font-size: 11px;
	color: var(--ht-gray-500);
	font-weight: 600;
}
.htf-timeline__text {
	font-size: 13px;
	color: var(--ht-heading);
}


/* ====================================================================
 * RESPONSIVE
 * ==================================================================== */

@media (max-width: 640px) {
	.htf-verdict-card__body {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.htf-verdict-card__score-col {
		flex-direction: row;
		gap: 12px;
	}
	.htf-verdict-card__cta-col {
		flex-direction: row;
		justify-content: space-between;
	}
	.htf-match__options {
		flex-direction: column;
	}
	.htf-deal-alert__form {
		flex-direction: column;
	}
	.htf-price-chart {
		height: 120px;
	}
	.htf-price-chart__label {
		font-size: 9px;
	}
	.htf-compare-table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.htf-calc-item {
		flex-wrap: wrap;
	}
}


/* ====================================================================
 * MATCH WIZARD — Progress Bar & Reset
 * ==================================================================== */

.htf-match__progress {
	width: 100%;
	height: 4px;
	background: var(--ht-gray-200);
	border-radius: 2px;
	margin-top: 12px;
	overflow: hidden;
}
.htf-match__progress-fill {
	height: 100%;
	background: var(--ht-success, #059669);
	border-radius: 2px;
	transition: width .4s ease;
}
.htf-match__reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ht-gray-600);
	background: var(--ht-gray-100, #f3f4f6);
	border: 1px solid var(--ht-gray-300);
	border-radius: var(--ht-radius-sm);
	cursor: pointer;
	transition: all var(--ht-transition);
}
.htf-match__reset:hover {
	background: var(--ht-gray-200);
	color: var(--ht-heading);
}
.htf-match__result-rank {
	font-size: 13px;
	font-weight: 700;
	color: var(--ht-primary);
	min-width: 24px;
}
.htf-match__no-results {
	text-align: center;
	color: var(--ht-gray-500);
	padding: 24px;
	font-size: 14px;
}


/* ====================================================================
 * COMPARE TABLE — Winner Highlighting
 * ==================================================================== */

.htf-compare-winner {
	background: rgba(5, 150, 105, .06);
	position: relative;
}
.htf-compare-winner::after {
	content: '★';
	position: absolute;
	top: 2px;
	right: 4px;
	font-size: 10px;
	color: var(--ht-success, #059669);
}


/* ====================================================================
 * CALCULATOR — Enhanced Items
 * ==================================================================== */

.htf-calculator__header p {
	font-size: 13px;
	color: var(--ht-gray-500);
	margin: 4px 0 0;
}
.htf-calculator__note {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	color: var(--ht-gray-500);
	margin-top: 6px;
}
.htf-calc-item--best {
	border-color: var(--ht-success, #059669);
	background: rgba(5, 150, 105, .04);
}
.htf-calc-item__info {
	flex: 1;
	min-width: 0;
}
.htf-calc-item__detail {
	display: block;
	font-size: 11px;
	color: var(--ht-gray-500);
	margin-top: 2px;
}
.htf-calc-item__diff {
	display: block;
	font-size: 11px;
	font-weight: 400;
	color: var(--ht-gray-400);
}


/* ====================================================================
 * DEAL ALERT — Success icon
 * ==================================================================== */

.htf-deal-alert__success {
	display: flex;
	align-items: center;
	gap: 8px;
}