/*
 * Blaze King skin for the Fireplace Finder.
 * Component rules from the reference site's design-fireplace.css, scoped under .bff
 * so nothing leaks into the rest of the site. Page-chrome rules (header, footer,
 * hero, logo, body background) were deliberately left out.
 */

.bff .questions-section .summary-products-title span { text-decoration: none; }
.bff .top-panel { display: flex; justify-content: space-between; align-items: center; border-top: 2px solid #ededed; border-right: 2px solid #ededed; border-bottom: 2px solid #ededed; height:44px; }
.bff .top-panel ul.tabs { display: flex; list-style: none; padding: 0; margin-right: 40px; border-left: 1px solid #eee; border-right: 1px solid #eee; }
.bff .top-panel ul.tabs li { padding: 10px; border-left: 1px solid #eee; border-right: 1px solid #eee; font-size: 16px; cursor: pointer; line-height: 20px; font-family: 'Inter', sans-serif !important; }
.bff .top-panel ul.tabs li.active { color: #F5F5F5; background: #0F0F0F; border-bottom: 2px solid #bc3913; }
.bff .top-panel ul.tabs li.visited { color: #1D1D1D; background: #ebebeb; border-bottom: 2px solid #bc3913; position: relative; border-right: 0px !important; border-left: 0; }
.bff .top-panel ul.tabs li.visited::after { content: ''; width: 1px; background: #fff; position: absolute; right: 0px; top: 0px; bottom: 00; }
.bff .tab-content.products.step7 { width: 51%; }
.bff .top-panel-btns { margin-right: 20px; }
.bff .top-panel-btns a { font-size: 14px; text-decoration: none; padding: 5px 15px; margin: 0px 5px; border: 1px solid; border-radius: 50px; }
.bff .tab-content { display:none; padding: 40px 30px 60px 46px; }
.bff .tab-content.active { display:block; }
.bff .tab-content h2 { font-size: 31px; margin: 15px 0 30px; line-height: 38px; color: #1D1D1D; position: relative; }
.bff .tab-content h2 .drop-list { position: absolute; left: -40px; }
.bff .tab-content .inputs { display: grid; }
.bff .tab-content .inputs label { display: flex; align-items: center; font-size: 16px; font-weight: 400; line-height: 24px; color: #1D1D1D; margin-bottom: 15px; }
.bff .tab-content .inputs label input[type="radio"] { margin-right: 15px; border: 1px solid #cdcdcd; }
.bff .tab-content .inputs label input[type=radio]:after { width: 18px; height: 18px; left:4px; top:4px; }
.bff .tab-content .inputs label input[type=radio] { width:28px; height:28px; }
.bff .next-btn.bottom { position: absolute; bottom: 80px; }
.bff .next-btn a { font-size: 20px; text-decoration: none; padding: 15px 58px; border: 1px solid #b8b8b8; color: #b8b8b8; border-radius: 50px; line-height: 24px; font-weight: 500; }
.bff .products-section .tab-questions { width: 57%; float: left; padding-left: 9%; }
.bff .products-section .questions-summary { width: 40%; height: 72%; position: fixed; right: 0; padding: 40px 30px 10px; background: #f5f5f5; overflow-y: scroll; }
.bff .questions-summary h3 { font-size: 31px; margin: 15px 0; line-height: 38px; color: #1D1D1D; }
.bff .questions-summary h3 span { font-size: 14px; float: right; line-height: 50px; }
.bff .summary-details { margin-bottom: 15px; display: none; }
.bff .summary-products-title span { text-decoration: underline; }
.bff .summary-products-title { margin-bottom: 15px; font-size: 16px; }
.bff .summary-bottom { margin-bottom: 15px; font-size: 14px; padding-bottom: 25px; }
.bff .bottom-btns.summary-btns { position: sticky; bottom: -10px; padding: 17px 0; background: #f5f5f5; }
.bff .bottom-btns.summary-btns a { background: #1d1d1d; color: #fff; padding: 10px 40px; margin: 10px; border-radius: 50px; font-size: 14px; text-decoration: none; }
.bff .bottom-btns.summary-btns a img { filter: invert(1); width: 14px; }
.bff .questions-summary p { font-size: 16px; margin: 10px 0 -5px; line-height: 30px; color: #1D1D1D; }
.bff .products-section .questions-summary::-webkit-scrollbar-track { background-color: #1D1D1D38; }
.bff .products-section .questions-summary::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
.bff .products-section .questions-summary::-webkit-scrollbar-thumb { background-color: #1d1d1d; border: 2px solid #1d1d1d; }
.bff .tab-content.products { overflow-y: scroll; position: fixed; width: 52%; height: 72%; }
.bff .tab-content.products::-webkit-scrollbar-track { background-color: #1D1D1D38; }
.bff .tab-content.products::-webkit-scrollbar { width: 5px; background-color: #F5F5F5; }
.bff .tab-content.products::-webkit-scrollbar-thumb { background-color: #1d1d1d; border: 2px solid #1d1d1d; }
.bff .tab-content.products .product { display: flex; justify-content: space-between; align-items: center; padding: 15px 0 15px; }
.bff .tab-content.products .product .product-img, .bff .tab-content.products .product .product-img img { width: 320px; }
.bff .tab-content.products .product .product-img { margin-right: 25px; }
.bff .tab-content.products .product .product-details { width: 48%; }
.bff .tab-content.products .product .product-details h3 { font-size: 31px; line-height: 38px; color: #1D1D1D; margin-bottom:20px; }
.bff .tab-content.products .product .product-details p { font-size: 16px; line-height: 30px; color: #1D1D1D; }
.bff .tab-content.products .product .product-details .row-tab h4 { padding: 15px 0px !important; line-height: 30px !important; font-size: 20px; line-height: 30px; color: #1D1D1D; }
.bff .tab-content.products .product .product-details .tab-action-link { padding: 0px !important; top:16px; }
.bff .tab-questions .tab-content.products .product-details .manual row-tab .product-manual { position: absolute; background: #fff; z-index: 99; left: 0; right: 0; border-top: 2px solid #ddd; padding-top: 10px; padding-bottom: 7px; }
.bff .tab-content.products .product .product-details .manual-1 { margin-bottom: 15px !important; }
.bff .tab-content.products .product .product-details .bottom-btns { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; }
.bff .tab-content.products .product .product-details .bottom-btns .tinvwl_add_to_wishlist_button { background: #1d1d1d; width: 156px; padding: 7px 10px; }
.bff .tab-content .product .manual.row-tab { border-bottom:2px solid #ddd; }
.bff .tab-content.products .product .product-details .bottom-btns .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text { position: relative; top: -3px; }
.bff .tab-content.products .product .product-details .bottom-btns .tinvwl_add_to_wishlist_button img { position: absolute; right: 32px; top: 15px; }
.bff .next-btn a.active { border-color: black; color: black; }
.bff .dimension-text { width: 100% !important; font-size: 16px !important; line-height: 29px; }
.bff .product-manual .dimension-row:last-child { margin-bottom: 0px !important; }
.bff .dimension-row { line-height: 25px !important; padding: 0px 0 !important; border-bottom: none !important; }
.bff .summary-bottom, .bff .summary-btns { display: none; }
.bff .modal { display: none; position: fixed; z-index: 9; padding-top: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.4); }
.bff .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 40%; }
.bff .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }
.bff .close:hover, .bff .close:focus { color: #000; text-decoration: none; cursor: pointer; }
.bff .form-control { display: grid; width: 100%; align-items: center; justify-content: center; padding: 10px 0; }
.bff .form-control input#submit { padding: 5px 25px; border-radius: 5px; }
.bff .mobile-results { display: none; }
.bff .steps-count.view-mobile { display: none !important; }
.bff .tab-questions .manual-1 .product-manual { padding-bottom: 17px; }

@media screen and (max-width: 1300px) {
	.bff .top-panel ul.tabs li { font-size: 13px; }
}

@media screen and (max-width: 1264px) {
	.bff .products-section .tab-questions { width: 60%; padding-left: 38px; }
	.bff .tab-content.products { width: 57%; }
}

@media screen and (max-width: 1150px) {
	.bff .tab-content.products .product .product-img, .bff .tab-content.products .product .product-img img { width: 280px; }
}

@media screen and (max-width: 1130px) {
	.bff .top-panel ul.tabs li { font-size: 12px; }
}

@media screen and (max-width: 1090px) {
	.bff .top-panel-btns { margin-top: -4px; }
	.bff .top-panel-btns a { font-size: 11px; }
}

@media screen and (max-width: 1070px) {
	.bff .top-panel ul.tabs li { font-size: 11px; }
}

@media screen and (max-width: 1060px) {
	.bff .tab-content { padding: 40px 30px 60px 0px; }
}

@media screen and (max-width: 1023px) {
	.bff .tab-content.products .product .product-img, .bff .tab-content.products .product .product-img img { width: 320px; margin: 0 auto; }
	.bff .top-panel ul.tabs { margin-top: 16px; }
	.bff .bottom-btns.summary-btns { position: unset; padding: 0; background: transparent; }
	.bff .steps-count.view-mobile { display: block !important; font-size: 16px; line-height: 20px; color: #1D1D1D; font-weight: 400; }
	.bff .products-section .tab-questions { width: 100%; padding: 0; }
	.bff .products-section .questions-summary { display: none; width: 100%; height: 100%; top: 0; z-index: 9; background: #fff; }
	.bff .next-btn a { padding: 10px 145px; }
	.bff .top-panel { display: grid; justify-content: inherit; border-top: 1px solid #707070; padding-top: 15px; padding-bottom: 41px; }
	.bff .top-panel ul.tabs { order: 1; }
	.bff .top-panel ul.tabs li { display: none; font-weight:50px; }
	.bff .top-panel ul.tabs li.active { display: block; position: fixed; text-align: center; width: 100%; }
	.bff .top-panel-btns { margin-bottom: 20px; }
	.bff .top-panel-btns a.reset { border: none; text-decoration: underline; }
	.bff .top-panel-btns a.back { background: #f5f5f5; border: none; }
	.bff .modal-content { width: 90%; }
	.bff .tab-content.products { width: 100% !important; left: 0; }
	.bff .tab-content.products .product { display: grid; grid-template-columns: auto auto; }
	.bff .tab-content.products .product { padding: 15px 17px 15px; }
	.bff .tab-content.products .product .product-details { width: 100%; }
	.bff .tab-action-link { top: 12px; }
	.bff .mobile-results { display: block; position: relative; }
	.bff #mobile-questions-summary h3 span.prd-count { float: right; font-size: 16px; line-height: 39px; color: #1D1D1D; }
	.bff .mobile-results .summary-bottom, .bff .mobile-results .summary-btns { display: block; }
	.bff .mobile-results .summary-btns a { width: 50%; }
	.bff .mobile-summary-btn { background: #0f0f0f; color: #fff; padding: 10px; text-align: center; border-radius: 50px; width: 86%; position: fixed; top: 133px; z-index: 9999; display: none; }
	.bff .mobile-results.summ { position: absolute; border-bottom: 1px solid #6e6e6e; right: 0; left: 0; padding: 0 30px; text-align: right; line-height: 50px; }
	.bff .mobile-close-btn { background: #f5f5f5; display: inline-block; padding: 0px 25px; line-height: 40px; margin-bottom: 10px; border-radius: 50px; }
	.bff .bottom-btns.summary-btns.view-mobile { text-align: center; }
	.bff .steps-count { float: right; padding: 5px 0px; }
	.bff .tab-content h2 .drop-list { left: 0; position: relative; display: table; }
	.bff .tab-content h2, .bff .tab-content .inputs { margin: 15px 15px 30px; }
	.bff .top-panel { height: unset; }
	.bff .top-panel-btns a { font-size: 16px; line-height: 20px; color: #1D1D1D; }
	.bff .tab-content.products.step7 .product, .bff .mobile-results { width: 96%; margin: 0 auto; }
	.bff .view-mobile.m-btn-bk { left: 15px; position: absolute; top: 8px; width: 48px; height: 48px; z-index: 999; }
	.bff .tab-content { padding: 20px 4px 60px; }
	.bff .tab-content h2 { font-size: 25px; line-height: 35px; }
	.bff .next-btn.bottom { bottom: 50px; left: 20px; }
	.bff .mobile-results #mobile-questions-summary h3 { font-size: 31px !important; line-height: 38px; color: #1D1D1D; }
	.bff .mobile-results #mobile-questions-summary h3 { font-size: 34px; border-bottom: 3px solid; margin-bottom: 27px; padding-bottom: 15px; }
	.bff .mobile-results #mobile-questions-summary p.mob-heading { font-size: 25px; line-height: 35px; color: #1D1D1D; margin-bottom: 15px; }
	.bff .mobile-results #mobile-questions-summary p { font-size: 16px; line-height: 24px; color: #1D1D1D; font-weight: 400; }
	.bff .mobile-results .summary-bottom { margin-bottom: 30px; }
	.bff .tab-content.products.step7 .product .product-img { width: auto; margin-right: 0; }
	.bff .tab-content.products.step7 .product { display: block; }
	.bff .mobile-results .bottom-btns.summary-btns a { font-size: 16px; }
	.bff .mobile-results .bottom-btns.summary-btns a img, .bff .mobile-results .bottom-btns.summary-btns a .fa { position:relative; right: -5px; }
	.bff .top-panel ul.tabs li { font-size: 16px; }
	.bff .view-mobile { display: block; }
}

@media screen and (max-width: 690px) {
	.bff .tab-content.products .product { display: block; }
}


/* ==========================================================================
   Shared behaviour glue (both modes).
   ========================================================================== */

.bff,
.bff *,
.bff *::before,
.bff *::after { box-sizing: border-box; }

.bff { font-family: 'Inter', sans-serif; }

.bff [hidden] { display: none !important; }

/* These are display:none in the reference and revealed by its JS; here the
   hidden attribute drives them, so restore a display value when shown. */
.bff .summary-details:not([hidden]),
.bff .summary-bottom:not([hidden]) { display: block; }
.bff .bottom-btns.summary-btns:not([hidden]) { display: block; }

/* The reference's custom radio look lives in its parent theme; tint the
   native control instead so it reads as brand-coloured at the size set. */
.bff .tab-content .inputs label input[type="radio"] {
	accent-color: #bc3913;
	flex: 0 0 auto;
}
.bff .tab-content .inputs label { cursor: pointer; }
.bff a[role="button"] { cursor: pointer; }
.bff .next-btn a:not(.active) { cursor: not-allowed; opacity: .8; }
.bff .next-btn a.active:hover { background: #eee; }

.bff .modal:not([hidden]) {
	display: flex;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .55);
}
.bff .modal-content { position: relative; max-width: 460px; }
.bff .modal .close {
	position: absolute;
	top: 6px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #777;
	cursor: pointer;
}
.bff .modal-content h4 { margin: 0 0 8px; font-size: 20px; color: #1d1d1d; }
.bff .modal-content p { margin: 0 0 12px; color: #555; font-size: 14px; }
.bff .modal-content input[type="email"] {
	width: 100%;
	margin: 6px 0;
	padding: 11px 14px;
	border: 1px solid #cdcdcd;
	font: inherit;
}
.bff .modal-content input[type="email"].is-invalid { border-color: #c0392b; }
.bff .modal-content .form-control a {
	display: inline-block;
	background: #1d1d1d;
	color: #fff;
	padding: 10px 40px;
	border-radius: 50px;
	font-size: 14px;
	text-decoration: none;
}
.bff .bff-msg:empty { display: none; }
.bff .bff-msg { margin: 10px 0 0; color: #1d1d1d; }

.bff .bff-loading { padding: 30px 46px; color: #777; }
.bff .bff-error {
	margin: 16px 46px;
	padding: 12px 16px;
	border-left: 3px solid #bc3913;
	background: #fdf1f0;
	color: #8e2b21;
}

/* Print / Email pill buttons hold inline SVG icons. */
.bff .bottom-btns.summary-btns a { display: inline-flex; align-items: center; gap: 8px; }
.bff .bottom-btns.summary-btns a svg { flex: 0 0 auto; }

/* ==========================================================================
   Hero + full-screen takeover — the reference page experience.

   The reference is a dedicated page template: dark #0F0F0F body, site header
   and footer hidden, a fixed two-panel hero (text left 42%, photo right 58%),
   and the quiz revealed full-viewport on Get Started. Reproduced here as a
   fixed wrapper so it works on any page, with any theme.
   ========================================================================== */

.bff--full {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: #0F0F0F;
	overflow: hidden;
}

body.admin-bar .bff--full { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .bff--full { top: 46px; }
}

.bff .featured-slider-box { position: relative; width: 100%; height: 100%; }

.bff .box-left {
	position: absolute;
	left: 0;
	top: 0;
	width: 42%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bff .box-left h3 {
	color: #F5F5F5;
	font-size: 39px;
	font-weight: 400;
	margin: 15px 0;
	line-height: 47px;
	text-transform: uppercase;
}
.bff .box-left p {
	color: #F5F5F5;
	font-size: 16px;
	font-weight: 400;
	margin: 17px 0 29px;
	line-height: 24px;
}

.bff .box-right {
	position: absolute;
	right: 0;
	top: 0;
	width: 58%;
	height: 100%;
}
.bff .box-right-inner { width: 100%; height: 100%; }
.bff .image-back {
	background-color: #1d1d1d;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat;
}

.bff span.back-home {
	position: absolute;
	right: 50px;
	top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	background: #f5f5f5;
	border-radius: 50px;
	color: #1d1d1d;
	font-size: 26px;
	line-height: 1;
	transition: all .2s ease;
}
.bff span.back-home:hover { transform: scale(1.1); }

/* Get Started transition — mirrors the reference: hero panels slide up
   (~700ms), the dark base fades to white, then the quiz fades in. */
.bff .box-left,
.bff .box-right {
	transition: transform .7s ease-in-out;
	will-change: transform;
}
.bff.bff-starting .box-left,
.bff.bff-starting .box-right { transform: translateY(-110%); }

.bff--full { transition: background-color .45s ease .35s; }
.bff--full.bff-starting { background-color: #fff; }

.bff .questions-section {
	opacity: 0;
	transition: opacity .4s ease;
}
.bff.bff-started .questions-section { opacity: 1; }


.bff .fe-btn {
	max-width: 350px;
	width: 90%;
	background: #1d1d1d;
	border-radius: 28px;
	box-shadow: 0px 3px 6px #0000006A;
	overflow: hidden;
	transition: all 0.3s ease-in;
}
.bff .fe-btn a {
	display: block;
	font-size: 20px;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 17px 10px;
}
.bff .fe-btn.orange-bg { background: #BC3913 !important; }
.bff .fe-btn.orange-bg:hover { background: #f5f5f5 !important; }
.bff .fe-btn.orange-bg:hover a { color: #000 !important; }
.bff .box-left .fe-btn.orange-bg { width: 366px; max-width: 100%; }

/* Quiz surface fills the takeover; light like the reference. */
.bff--full .questions-section {
	position: absolute;
	inset: 0;
	background: #fff;
	overflow: hidden;
}
.bff--full .products-section { position: relative; height: calc(100% - 44px); }
.bff--full .tab-questions { position: relative; height: 100%; }
.bff--full .questions-summary { top: auto; bottom: 0; }
.bff--full .view-mobile { display: none; }

/* Full-mode mobile: hero stacks photo over text, quiz panels flow. */
@media screen and (max-width: 767px) {
	.bff--full { overflow-y: auto; }
	.bff .box-left { width: 100%; height: 50%; top: 50%; }
	.bff .box-left .inner-div { width: 100%; padding: 30px 20px; }
	.bff .box-left h3 { font-size: 31px; line-height: 38px; }
	.bff .box-right { width: 100%; height: 50%; }
	.bff span.back-home { right: auto; left: 40px; }
	.bff .box-left .fe-btn.orange-bg { width: 100%; }

	.bff--full .questions-section { overflow-y: auto; }
	.bff--full .products-section { height: auto; }
	.bff--full .tab-questions { height: auto; width: 100%; float: none; padding: 0 20px; }
	.bff--full .products-section .questions-summary {
		position: static;
		width: auto;
		height: auto;
	}
	.bff--full .tab-content.products {
		position: static;
		width: auto;
		height: auto;
	}
	.bff--full .next-btn.bottom { position: static; margin: 20px 0 40px; }
	.bff--full .view-mobile.m-btn-bk { display: block; position: absolute; left: 15px; top: 8px; width: 48px; height: 48px; z-index: 999; }
	.bff--full .view-mobile.m-btn-bk span.back-home { left: 0; top: 0; }
}

/* ==========================================================================
   Embedded mode — flows inside a normal themed page.

   Opt-in via [blaze_fireplace_finder fullpage="no"]. Reproduces the same
   arrangement (questions left, summary right, own scroll) with grid + sticky
   instead of the reference's fixed/floated full-page positioning.
   ========================================================================== */

.bff--embedded .featured-slider-box {
	position: relative;
	height: auto;
	min-height: 420px;
	background: #0F0F0F;
}
.bff--embedded .box-left { position: relative; width: 100%; height: auto; padding: 60px 30px; }
.bff--embedded .box-right { display: none; }

.bff--embedded .products-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 32px;
	align-items: start;
}
.bff--embedded .tab-questions {
	width: auto;
	float: none;
	padding-left: 0;
}
.bff--embedded .products-section .questions-summary {
	position: sticky;
	top: 20px;
	right: auto;
	width: auto;
	height: auto;
	max-height: 80vh;
}
.bff--embedded .tab-content { padding: 24px 0 32px; }
.bff--embedded .tab-content.products.step7,
.bff--embedded .tab-content.products {
	position: static;
	width: auto;
	height: auto;
	max-height: 70vh;
	overflow-y: auto;
}
.bff--embedded .next-btn.bottom {
	position: static;
	bottom: auto;
	left: auto;
	margin-top: 28px;
}
.bff--embedded .view-mobile { display: none; }

@media screen and (max-width: 860px) {
	.bff--embedded .products-section { grid-template-columns: minmax(0, 1fr); }
	.bff--embedded .products-section .questions-summary { position: static; max-height: none; }
}