/**
 * TasisPlus Homepage Dynamic Styles (v1.0)
 * Modern, High-Converting, Responsive & Performance-Optimized (RTL)
 */

:root {
	--tsf-home-primary: #1070e5;
	--tsf-home-primary-dark: #0b56b3;
	--tsf-home-accent: #f59e0b;
	--tsf-home-danger: #ef4444;
	--tsf-home-bg-light: #f8fafc;
	--tsf-home-border: #e2e8f0;
	--tsf-home-text: #0f172a;
	--tsf-home-text-muted: #64748b;
	--tsf-home-radius: 12px;
	--tsf-home-card-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
	--tsf-home-card-hover: 0 10px 25px rgba(16, 112, 229, 0.12);
}

/* ==========================================================================
   1. Global Home Helpers & Animations
   ========================================================================== */
.tasis-home-section {
	padding: 40px 0;
	position: relative;
}

.tasis-home-section--gray {
	background-color: var(--tsf-home-bg-light);
}

/* ==========================================================================
   Themed Shelf Backgrounds (Orange Logo, Soft Blue Search, Royal Purple, Teal, Slate, Gold)
   ========================================================================== */
.tasis-home-section--orange {
	background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
	border-top: 1px solid #fed7aa;
	border-bottom: 1px solid #fed7aa;
}
.tasis-home-section--orange .tsf-section-badge {
	background: #fe700d;
	color: #fff;
}
.tasis-home-section--orange .tsf-home-header__link {
	color: #c2410c;
}
.tasis-home-section--orange .tsf-home-header__link:hover {
	color: #9a3412;
}
.tasis-home-section--orange .tsf-home-card {
	border-color: #ffedd5;
	box-shadow: 0 4px 14px rgba(254, 112, 13, 0.08);
}
.tasis-home-section--orange .tsf-home-card:hover {
	border-color: #fdba74;
	box-shadow: 0 10px 24px rgba(254, 112, 13, 0.16);
}

.tasis-home-section--softblue {
	background: linear-gradient(180deg, #f0f7ff 0%, #e1effe 100%);
	border-top: 1px solid #b6cff2;
	border-bottom: 1px solid #b6cff2;
}
.tasis-home-section--softblue .tsf-section-badge {
	background: #1e40af;
	color: #fff;
}
.tasis-home-section--softblue .tsf-home-header__link {
	color: #1d4ed8;
}
.tasis-home-section--softblue .tsf-home-header__link:hover {
	color: #1e40af;
}
.tasis-home-section--softblue .tsf-home-card {
	border-color: #dbeafe;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.07);
}
.tasis-home-section--softblue .tsf-home-card:hover {
	border-color: #93c5fd;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.15);
}

.tasis-home-section--teal {
	background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
	border-top: 1px solid #99f6e4;
	border-bottom: 1px solid #99f6e4;
}
.tasis-home-section--teal .tsf-section-badge {
	background: #0f766e;
	color: #fff;
}
.tasis-home-section--teal .tsf-home-header__link {
	color: #0f766e;
}
.tasis-home-section--teal .tsf-home-header__link:hover {
	color: #115e59;
}
.tasis-home-section--teal .tsf-home-card {
	border-color: #ccfbf1;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.07);
}
.tasis-home-section--teal .tsf-home-card:hover {
	border-color: #5eead4;
	box-shadow: 0 10px 24px rgba(15, 118, 110, 0.15);
}

.tasis-home-section--purple {
	background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
	border-top: 1px solid #e9d5ff;
	border-bottom: 1px solid #e9d5ff;
}
.tasis-home-section--purple .tsf-section-badge {
	background: #6b21a8;
	color: #fff;
}
.tasis-home-section--purple .tsf-home-header__link {
	color: #6b21a8;
}
.tasis-home-section--purple .tsf-home-header__link:hover {
	color: #581c87;
}
.tasis-home-section--purple .tsf-home-card {
	border-color: #f3e8ff;
	box-shadow: 0 4px 14px rgba(126, 34, 206, 0.07);
}
.tasis-home-section--purple .tsf-home-card:hover {
	border-color: #c084fc;
	box-shadow: 0 10px 24px rgba(126, 34, 206, 0.15);
}

.tasis-home-section--slate {
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}
.tasis-home-section--slate .tsf-section-badge {
	background: #475569;
	color: #fff;
}
.tasis-home-section--slate .tsf-home-header__link {
	color: #334155;
}
.tasis-home-section--slate .tsf-home-header__link:hover {
	color: #0f172a;
}
.tasis-home-section--slate .tsf-home-card {
	border-color: #e2e8f0;
	box-shadow: 0 4px 14px rgba(71, 85, 105, 0.07);
}
.tasis-home-section--slate .tsf-home-card:hover {
	border-color: #94a3b8;
	box-shadow: 0 10px 24px rgba(71, 85, 105, 0.15);
}

.tasis-home-section--gold {
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	border-top: 1px solid #fde68a;
	border-bottom: 1px solid #fde68a;
}
.tasis-home-section--gold .tsf-section-badge {
	background: #b45309;
	color: #fff;
}
.tasis-home-section--gold .tsf-home-header__link {
	color: #b45309;
}
.tasis-home-section--gold .tsf-home-header__link:hover {
	color: #78350f;
}
.tasis-home-section--gold .tsf-home-card {
	border-color: #fef3c7;
	box-shadow: 0 4px 14px rgba(180, 83, 9, 0.07);
}
.tasis-home-section--gold .tsf-home-card:hover {
	border-color: #fcd34d;
	box-shadow: 0 10px 24px rgba(180, 83, 9, 0.15);
}

.tsf-section-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 800;
	margin-bottom: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}


/* ==========================================================================
   Themed Shelf Backgrounds (Orange Logo, Soft Blue Search, Royal Purple, Teal, Slate, Gold)
   ========================================================================== */
.tasis-home-section--orange {
	background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
	border-top: 1px solid #fed7aa;
	border-bottom: 1px solid #fed7aa;
}
.tasis-home-section--orange .tsf-section-badge {
	background: #fe700d;
	color: #fff;
}
.tasis-home-section--orange .tsf-home-header__link {
	color: #c2410c;
}
.tasis-home-section--orange .tsf-home-header__link:hover {
	color: #9a3412;
}
.tasis-home-section--orange .tsf-home-card {
	border-color: #ffedd5;
	box-shadow: 0 4px 14px rgba(254, 112, 13, 0.08);
}
.tasis-home-section--orange .tsf-home-card:hover {
	border-color: #fdba74;
	box-shadow: 0 10px 24px rgba(254, 112, 13, 0.16);
}

.tasis-home-section--softblue {
	background: linear-gradient(180deg, #f0f7ff 0%, #e1effe 100%);
	border-top: 1px solid #b6cff2;
	border-bottom: 1px solid #b6cff2;
}
.tasis-home-section--softblue .tsf-section-badge {
	background: #1e40af;
	color: #fff;
}
.tasis-home-section--softblue .tsf-home-header__link {
	color: #1d4ed8;
}
.tasis-home-section--softblue .tsf-home-header__link:hover {
	color: #1e40af;
}
.tasis-home-section--softblue .tsf-home-card {
	border-color: #dbeafe;
	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.07);
}
.tasis-home-section--softblue .tsf-home-card:hover {
	border-color: #93c5fd;
	box-shadow: 0 10px 24px rgba(37, 99, 235, 0.15);
}

.tasis-home-section--teal {
	background: linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 100%);
	border-top: 1px solid #99f6e4;
	border-bottom: 1px solid #99f6e4;
}
.tasis-home-section--teal .tsf-section-badge {
	background: #0f766e;
	color: #fff;
}
.tasis-home-section--teal .tsf-home-header__link {
	color: #0f766e;
}
.tasis-home-section--teal .tsf-home-header__link:hover {
	color: #115e59;
}
.tasis-home-section--teal .tsf-home-card {
	border-color: #ccfbf1;
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.07);
}
.tasis-home-section--teal .tsf-home-card:hover {
	border-color: #5eead4;
	box-shadow: 0 10px 24px rgba(15, 118, 110, 0.15);
}

.tasis-home-section--purple {
	background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
	border-top: 1px solid #e9d5ff;
	border-bottom: 1px solid #e9d5ff;
}
.tasis-home-section--purple .tsf-section-badge {
	background: #6b21a8;
	color: #fff;
}
.tasis-home-section--purple .tsf-home-header__link {
	color: #6b21a8;
}
.tasis-home-section--purple .tsf-home-header__link:hover {
	color: #581c87;
}
.tasis-home-section--purple .tsf-home-card {
	border-color: #f3e8ff;
	box-shadow: 0 4px 14px rgba(126, 34, 206, 0.07);
}
.tasis-home-section--purple .tsf-home-card:hover {
	border-color: #c084fc;
	box-shadow: 0 10px 24px rgba(126, 34, 206, 0.15);
}

.tasis-home-section--slate {
	background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
	border-top: 1px solid #e2e8f0;
	border-bottom: 1px solid #e2e8f0;
}
.tasis-home-section--slate .tsf-section-badge {
	background: #475569;
	color: #fff;
}
.tasis-home-section--slate .tsf-home-header__link {
	color: #334155;
}
.tasis-home-section--slate .tsf-home-header__link:hover {
	color: #0f172a;
}
.tasis-home-section--slate .tsf-home-card {
	border-color: #e2e8f0;
	box-shadow: 0 4px 14px rgba(71, 85, 105, 0.07);
}
.tasis-home-section--slate .tsf-home-card:hover {
	border-color: #94a3b8;
	box-shadow: 0 10px 24px rgba(71, 85, 105, 0.15);
}

.tasis-home-section--gold {
	background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
	border-top: 1px solid #fde68a;
	border-bottom: 1px solid #fde68a;
}
.tasis-home-section--gold .tsf-section-badge {
	background: #b45309;
	color: #fff;
}
.tasis-home-section--gold .tsf-home-header__link {
	color: #b45309;
}
.tasis-home-section--gold .tsf-home-header__link:hover {
	color: #78350f;
}
.tasis-home-section--gold .tsf-home-card {
	border-color: #fef3c7;
	box-shadow: 0 4px 14px rgba(180, 83, 9, 0.07);
}
.tasis-home-section--gold .tsf-home-card:hover {
	border-color: #fcd34d;
	box-shadow: 0 10px 24px rgba(180, 83, 9, 0.15);
}

.tsf-section-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 800;
	margin-bottom: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}


.tsf-home-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}

.tsf-home-header__titles h2 {
	font-size: 22px;
	font-weight: 800;
	color: var(--tsf-home-text);
	margin: 0 0 6px;
	line-height: 1.3;
}

.tsf-home-header__titles p {
	font-size: 13px;
	color: var(--tsf-home-text-muted);
	margin: 0;
}

.tsf-home-header__link {
	font-size: 13px;
	font-weight: 700;
	color: var(--tsf-home-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: color 0.2s, transform 0.2s;
}

.tsf-home-header__link:hover {
	color: var(--tsf-home-primary-dark);
	transform: translateX(-4px);
}

/* ==========================================================================
   2. Daily Lightning Deals / پیشنهاد شگفت‌انگیز روز
   ========================================================================== */
.tsf-deals-box {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-radius: 16px;
	padding: 24px;
	color: #fff;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
}

.tsf-deals-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	flex-wrap: wrap;
	gap: 16px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	padding-bottom: 16px;
}

.tsf-deals-badge-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tsf-deals-icon-pulse {
	width: 38px;
	height: 38px;
	background: #ef4444;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	box-shadow: 0 0 16px rgba(239, 68, 68, 0.5);
	animation: tsfPulse 2s infinite;
}

@keyframes tsfPulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.08); }
}

.tsf-deals-badge-title h2 {
	color: #fff !important;
	font-size: 20px;
	font-weight: 800;
	margin: 0;
}

.tsf-deals-badge-title span {
	font-size: 12px;
	color: #cbd5e1;
	display: block;
}

/* Countdown Timer */
.tsf-countdown {
	display: flex;
	align-items: center;
	gap: 6px;
	direction: ltr;
}

.tsf-countdown__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 8px;
	padding: 4px 6px;
}

.tsf-countdown__val {
	font-size: 18px;
	font-weight: 800;
	color: #f8fafc;
	line-height: 1.1;
	font-family: inherit;
}

.tsf-countdown__label {
	font-size: 9px;
	color: #94a3b8;
	text-transform: uppercase;
}

.tsf-countdown__colon {
	color: #ef4444;
	font-weight: 800;
	font-size: 16px;
}

/* ==========================================================================
   3. Category Showcase Tabs / دسته‌بندی‌های پربازدید
   ========================================================================== */
.tsf-tabs-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 12px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 24px;
}

.tsf-tabs-nav::-webkit-scrollbar {
	display: none;
}

.tsf-tab-btn {
	background: #fff;
	border: 1px solid var(--tsf-home-border);
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--tsf-home-text);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.25s ease;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tsf-tab-btn:hover {
	border-color: var(--tsf-home-primary);
	color: var(--tsf-home-primary);
	background-color: var(--tsf-home-bg-light);
}

.tsf-tab-btn.is-active {
	background-color: var(--tsf-home-primary);
	border-color: var(--tsf-home-primary);
	color: #fff;
	box-shadow: 0 4px 14px rgba(16, 112, 229, 0.3);
}

/* ==========================================================================
   4. Universal Touch Carousel
   ========================================================================== */
.tasis-carousel-container {
	position: relative;
}

.tasis-carousel-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 6px 2px 16px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tasis-carousel-track::-webkit-scrollbar {
	display: none;
}

.tasis-carousel-arrow {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	background: #fff;
	border: 1px solid var(--tsf-home-border);
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 5;
	font-size: 18px;
	color: var(--tsf-home-text);
	transition: all 0.2s ease;
}

.tasis-carousel-arrow:hover {
	background: var(--tsf-home-primary);
	color: #fff;
	border-color: var(--tsf-home-primary);
}

.tasis-carousel-arrow--prev {
	right: -16px;
}

.tasis-carousel-arrow--next {
	left: -16px;
}

@media (max-width: 768px) {
	.tasis-carousel-arrow {
		display: none !important;
	}
}

/* ==========================================================================
   5. Modern Homepage Product Card
   ========================================================================== */
.tsf-home-card {
	flex: 0 0 240px;
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid var(--tsf-home-border);
	border-radius: var(--tsf-home-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	position: relative;
}

.tsf-home-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tsf-home-card-hover);
	border-color: #93c5fd;
}

.tsf-deals-box .tsf-home-card {
	border-color: #334155;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.tsf-home-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 12px;
}

.tsf-home-card__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.3s ease;
}

.tsf-home-card:hover .tsf-home-card__media img {
	transform: scale(1.05);
}

.tsf-card-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 800;
	z-index: 2;
}

.tsf-card-badge--sale {
	background: #ef4444;
	color: #fff;
	box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.tsf-home-card__body {
	padding: 12px 14px 14px;
	display: flex;
	flex-direction: column;
	flex: 1;
	border-top: 1px solid var(--tsf-home-border);
}

.tsf-home-card__title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 38px;
}

.tsf-home-card__title a {
	color: var(--tsf-home-text);
	text-decoration: none;
	transition: color 0.2s;
}

.tsf-home-card__title a:hover {
	color: var(--tsf-home-primary);
}

.tsf-home-card__price {
	margin-top: auto;
	font-size: 14px;
	font-weight: 800;
	color: var(--tsf-home-primary);
	line-height: 1.3;
	margin-bottom: 12px;
}

.tsf-home-card__price del {
	font-size: 11px;
	color: #94a3b8;
	font-weight: 400;
	margin-left: 6px;
}

.tsf-home-card__price ins {
	text-decoration: none;
	color: #ef4444;
}

.tsf-btn-view-card {
	display: block;
	text-align: center;
	padding: 8px 12px;
	background: var(--tsf-home-bg-light);
	border: 1px solid var(--tsf-home-border);
	border-radius: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--tsf-home-text);
	text-decoration: none;
	transition: all 0.2s ease;
}

.tsf-btn-view-card:hover {
	background: var(--tsf-home-primary);
	color: #fff;
	border-color: var(--tsf-home-primary);
}

/* ==========================================================================
   6. Comprehensive Multi-Step Engineering Sizing Wizard
   ========================================================================== */
.tsf-wizard-calculator {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: 32px;
	box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
	position: relative;
	overflow: hidden;
}

@media (max-width: 768px) {
	.tsf-wizard-calculator {
		padding: 20px 16px;
		border-radius: 16px;
	}
}

.tsf-wizard-header {
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 24px;
	margin-bottom: 28px;
}

.tsf-wizard-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

.tsf-wizard-tag {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 12px;
	background: #eff6ff;
	color: #1d4ed8;
	border-radius: 20px;
	border: 1px solid #dbeafe;
}

.tsf-wizard-tag--gold {
	background: #fefce8;
	color: #a16207;
	border-color: #fef08a;
}

.tsf-wizard-title {
	font-size: clamp(1.25rem, 2.5vw, 1.65rem);
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 8px;
	line-height: 1.35;
}

.tsf-wizard-subtitle {
	font-size: 13.5px;
	color: #64748b;
	line-height: 1.65;
	margin: 0 0 24px;
	max-width: 820px;
}

/* Stepper Indicator */
.tsf-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 650px;
	margin: 0 auto;
	padding: 0 10px;
}

.tsf-step-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: default;
	position: relative;
	z-index: 2;
}

.tsf-step-num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f1f5f9;
	color: #64748b;
	font-size: 13px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #e2e8f0;
	transition: all 0.25s ease;
}

.tsf-step-name {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	white-space: nowrap;
	transition: color 0.25s;
}

.tsf-step-node.is-active .tsf-step-num {
	background: #1070e5;
	color: #fff;
	border-color: #1070e5;
	box-shadow: 0 0 0 4px rgba(16, 112, 229, 0.2);
}

.tsf-step-node.is-active .tsf-step-name {
	color: #1070e5;
}

.tsf-step-node.is-completed .tsf-step-num {
	background: #10b981;
	color: #fff;
	border-color: #10b981;
}

.tsf-step-node.is-completed .tsf-step-name {
	color: #059669;
}

.tsf-step-line {
	flex: 1;
	height: 2px;
	background: #e2e8f0;
	margin: 0 8px 18px;
	transition: background 0.3s;
}

.tsf-step-line.is-active {
	background: #1070e5;
}

/* Wizard Panels */
.tsf-wizard-panel {
	display: none;
}

.tsf-wizard-panel.is-active {
	display: block;
	animation: tsfFadeIn 0.3s ease forwards;
}

.tsf-panel-heading {
	margin-bottom: 24px;
}

.tsf-panel-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	color: #1070e5;
	background: #eff6ff;
	padding: 2px 10px;
	border-radius: 6px;
	margin-bottom: 8px;
}

.tsf-panel-heading h3 {
	font-size: 18px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 6px;
}

.tsf-panel-heading p {
	font-size: 13px;
	color: #64748b;
	margin: 0;
}

/* Step 0: Big Choice Cards */
.tsf-system-cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

@media (max-width: 680px) {
	.tsf-system-cards-grid {
		grid-template-columns: 1fr;
	}
}

.tsf-system-card {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 16px;
	padding: 24px;
	text-align: right;
	cursor: pointer;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
	position: relative;
}

.tsf-system-card:hover {
	border-color: #1070e5;
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(16, 112, 229, 0.1);
}

.tsf-system-card__icon {
	width: 60px;
	height: 60px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.tsf-system-card__icon--heat {
	background: #fff1f2;
	color: #e11d48;
}

.tsf-system-card__icon--cool {
	background: #eff6ff;
	color: #2563eb;
}

.tsf-system-card__content strong {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 8px;
}

.tsf-system-card__content span {
	display: block;
	font-size: 12.5px;
	color: #64748b;
	line-height: 1.6;
	margin-bottom: 18px;
}

.tsf-system-card__action {
	margin-top: auto;
	font-size: 13px;
	font-weight: 700;
	color: #1070e5;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Form Groups & Inputs */
.tsf-fields-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: 24px;
}

.tsf-form-group {
	display: flex;
	flex-direction: column;
}

.tsf-form-group label {
	font-size: 13px;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 8px;
}

.tsf-required {
	color: #ef4444;
}

.tsf-form-group input,
.tsf-form-group select {
	width: 100% !important;
	height: 44px !important;
	padding: 8px 14px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 10px !important;
	font-size: 13.5px !important;
	background: #fff !important;
	color: #0f172a !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.tsf-form-group input:focus,
.tsf-form-group select:focus {
	outline: none !important;
	border-color: #1070e5 !important;
	box-shadow: 0 0 0 3px rgba(16, 112, 229, 0.15) !important;
}

.tsf-field-hint {
	font-size: 11px;
	color: #64748b;
	margin-top: 6px;
	line-height: 1.4;
}

/* Pool & Jacuzzi Toggle Cards */
.tsf-pool-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 24px;
}

.tsf-toggle-card {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px 20px;
	transition: border-color 0.2s;
}

.tsf-toggle-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
}

.tsf-toggle-card__title strong {
	display: block;
	font-size: 14px;
	color: #0f172a;
	margin-bottom: 3px;
}

.tsf-toggle-card__title span {
	font-size: 12px;
	color: #64748b;
}

.tsf-toggle-buttons {
	display: inline-flex;
	background: #e2e8f0;
	border-radius: 8px;
	padding: 3px;
	gap: 3px;
}

.tsf-tbtn {
	border: none;
	background: transparent;
	padding: 6px 18px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	color: #64748b;
	cursor: pointer;
	transition: all 0.2s;
}

.tsf-tbtn.is-selected {
	background: #fff;
	color: #0f172a;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.tsf-toggle-card__body {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed #cbd5e1;
}

.tsf-hidden {
	display: none !important;
}

/* Chips Selector (Bathrooms) */
.tsf-chips-selector {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.tsf-chip {
	padding: 9px 20px;
	background: #fff;
	border: 1.5px solid #cbd5e1;
	border-radius: 25px;
	font-size: 13px;
	font-weight: 700;
	color: #334155;
	cursor: pointer;
	transition: all 0.2s;
}

.tsf-chip:hover {
	border-color: #1070e5;
	color: #1070e5;
}

.tsf-chip.is-selected {
	background: #1070e5;
	border-color: #1070e5;
	color: #fff;
	box-shadow: 0 4px 12px rgba(16, 112, 229, 0.25);
}

/* Cooling Choice Cards */
.tsf-cool-choice-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 640px) {
	.tsf-cool-choice-grid {
		grid-template-columns: 1fr;
	}
}

.tsf-cool-choice-card {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	border-radius: 14px;
	padding: 20px;
	text-align: right;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: all 0.2s;
}

.tsf-cool-choice-card:hover {
	border-color: #2563eb;
	background: #fff;
	transform: translateY(-2px);
}

.tsf-cool-choice-card__icon {
	color: #2563eb;
}

.tsf-cool-choice-card__text strong {
	display: block;
	font-size: 15px;
	color: #0f172a;
	margin-bottom: 4px;
}

.tsf-cool-choice-card__text span {
	font-size: 12px;
	color: #64748b;
	line-height: 1.5;
}

.tsf-cool-choice-card__btn {
	margin-top: auto;
	font-size: 12.5px;
	font-weight: 700;
	color: #2563eb;
}

/* Dynamic Room Areas */
.tsf-rooms-dynamic {
	background: #f1f5f9;
	border-radius: 12px;
	padding: 16px 20px;
	margin-bottom: 24px;
}

.tsf-rooms-dynamic__title {
	font-size: 13px;
	font-weight: 800;
	color: #1e293b;
	margin-bottom: 12px;
}

.tsf-rooms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
}

.tsf-room-field label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #475569;
	margin-bottom: 4px;
}

.tsf-room-field input {
	width: 100% !important;
	height: 40px !important;
	padding: 6px 12px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	background: #fff !important;
	box-sizing: border-box !important;
}

/* Wizard Footers & Action Buttons */
.tsf-wizard-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid #f1f5f9;
	flex-wrap: wrap;
}

.tsf-wbtn {
	height: 44px;
	padding: 0 24px;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 800;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.2s;
	border: none;
}

.tsf-wbtn--back {
	background: #f1f5f9;
	color: #475569;
}

.tsf-wbtn--back:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.tsf-wbtn--next,
.tsf-wbtn--calc {
	background: #1070e5;
	color: #fff;
	box-shadow: 0 4px 14px rgba(16, 112, 229, 0.3);
}

.tsf-wbtn--next:hover,
.tsf-wbtn--calc:hover {
	background: #0d5bbd;
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(16, 112, 229, 0.4);
}

/* ==========================================================================
   Results View Styling
   ========================================================================== */
.tsf-results-container {
	animation: tsfFadeIn 0.35s ease;
}

.tsf-results-summary-strip {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 16px 20px;
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-around;
	align-items: center;
}

.tsf-summary-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tsf-summary-item span {
	font-size: 11px;
	color: #64748b;
	margin-bottom: 3px;
}

.tsf-summary-item strong {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
}

.tsf-summary-item--total strong {
	color: #1070e5;
	font-size: 18px;
}

.tsf-results-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.tsf-result-box {
	background: #ffffff;
	border: 2px solid #e2e8f0;
	border-radius: 16px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
	position: relative;
	transition: all 0.25s ease;
}

.tsf-result-box:hover {
	border-color: #1070e5;
	box-shadow: 0 8px 24px rgba(16, 112, 229, 0.1);
}

.tsf-result-box--highlight {
	border-color: #93c5fd;
	background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 100%);
}

.tsf-result-badge {
	position: absolute;
	top: -11px;
	right: 18px;
	background: #1070e5;
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	padding: 2px 10px;
	border-radius: 12px;
}

.tsf-result-box__header {
	margin-bottom: 12px;
	padding-top: 4px;
}

.tsf-result-box__header h4 {
	font-size: 16px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 4px;
}

.tsf-result-box__header span {
	font-size: 12px;
	color: #64748b;
}

.tsf-result-box__val {
	background: #f1f5f9;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	margin-bottom: 12px;
	text-align: center;
}

.tsf-result-box--highlight .tsf-result-box__val {
	background: #eff6ff;
	color: #1d4ed8;
}

.tsf-result-box__desc {
	font-size: 12.5px;
	color: #475569;
	line-height: 1.6;
	margin-bottom: 18px;
}

.tsf-result-box__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	background: #1070e5;
	color: #fff !important;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	transition: all 0.2s;
}

.tsf-result-box__cta:hover {
	background: #0d5bbd;
	box-shadow: 0 4px 12px rgba(16, 112, 229, 0.3);
}

.tsf-results-reset-bar {
	display: flex;
	justify-content: center;
	padding-top: 12px;
}

.tsf-wbtn--reset {
	background: transparent;
	border: 1.5px solid #cbd5e1;
	color: #64748b;
	padding: 8px 24px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.2s;
}

.tsf-wbtn--reset:hover {
	background: #f8fafc;
	border-color: #94a3b8;
	color: #0f172a;
}


/* ==========================================================================
   7. Top Brands Showcase
   ========================================================================== */
.tsf-brands-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
	gap: 14px;
}

.tsf-brand-card {
	background: #fff;
	border: 1px solid var(--tsf-home-border);
	border-radius: 12px;
	padding: 16px 12px;
	text-align: center;
	text-decoration: none;
	transition: all 0.25s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tsf-brand-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tsf-home-card-hover);
	border-color: var(--tsf-home-primary);
}

.tsf-brand-card__title {
	font-size: 14px;
	font-weight: 800;
	color: var(--tsf-home-text);
	margin-bottom: 4px;
}

.tsf-brand-card__badge {
	font-size: 10px;
	color: var(--tsf-home-text-muted);
}

@keyframes tsfFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}