/**
 * Floor Plan Shortcode Styles
 */

.tamarack-floor-plan-container {
	margin: 20px 0;
}

/* Tab Navigation */
.floor-plan-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #ddd;
	margin-bottom: 20px;
}

.floor-plan-tab-btn {
	padding: 12px 24px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-bottom: none;
	color: #666;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	border-radius: 4px 4px 0 0;
	margin-right: 2px;
	position: relative;
	bottom: -2px;
}

.floor-plan-tab-btn:hover {
	background: #e8e8e8;
	color: #333;
}

.floor-plan-tab-btn.active {
	background: #fff;
	color: #333;
	border-bottom: 2px solid #fff;
	bottom: -2px;
}

.tamarack-floor-plan-layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.tamarack-floor-plan-controls,
.tamarack-elevation-controls {
	width: 33%;
	flex-shrink: 0;
	padding: 20px;
	background: #f9f9f9;
	border: 1px solid #ddd;
	border-radius: 4px;
	display: none;
}

.tamarack-floor-plan-controls.active,
.tamarack-elevation-controls.active {
	display: block;
}

.tamarack-floor-plan-controls h2,
.tamarack-elevation-controls h2 {
	margin: 0 0 20px 0;
	font-size: 20px;
	font-weight: 600;
	color: #333;
}

.floor-plan-control-group {
	margin-bottom: 20px;
}

.tamarack-floor-plan-controls .floor-plan-label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: 14px;
	color: #555;
}

.tamarack-floor-plan-controls .floor-plan-selector {
	width: 100%;
	padding: 8px 12px;
	font-size: 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fff;
}

.floor-plan-options {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.floor-plan-option-item {
	display: flex;
	align-items: center;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: default;
	transition: none;
}

.floor-plan-option-item:hover {
	background: transparent;
}

/* Hide native radio and draw custom circle on the label for consistent styling */
.floor-plan-options .floor-plan-option-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.floor-plan-options .floor-plan-option-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	font-size: 17px;
	font-weight: 400;
	padding-left:35px;
}

.floor-plan-options .floor-plan-option-label::before {
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	border: none;
	border-radius: 50%;
	background: #fff;
	flex: 0 0 auto;
	top:50%;
	transform: translateY(-50%);
}

.floor-plan-options .floor-plan-option-radio:checked + .floor-plan-option-label::before {
	/* Inner circle at ~80% diameter, ensure it doesn't fill the whole circle */
	background: #1D6452;
}

.floor-plan-options .floor-plan-option-radio:focus + .floor-plan-option-label::before {
	outline: 2px solid rgba(29, 100, 82, 0.4);
	outline-offset: 2px;
}
.floor-plan-option-label {
	margin: 0;
	cursor: pointer;
	flex: 1;
	font-size: 14px;
}

/* Mortgage calculator callout */
.floor-plan-mortgage.mobile {
	display: none;
}
.floor-plan-mortgage.mobile .floor-plan-mortgage-title {
	font-size:24px; 
	line-height:34px;
	max-width:288px;
}
.floor-plan-mortgage.mobile .floor-plan-mortgage-heading {
	justify-content: center;
}
.floor-plan-mortgage.mobile .floor-plan-mortgage-link a {
	margin:20px auto 30px;
}

.floor-plan-mortgage {
	margin-top: 50px;
}

.floor-plan-mortgage-heading {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 8px;
}

.floor-plan-mortgage-icon {
	width: 77px;
	height: 61px;
	display: inline-block;
}

.floor-plan-mortgage-title {
	font-size: 26px;
	font-weight: 500;
	line-height:36px;
	color: var(--title-color);
}

.floor-plan-mortgage-link .th-btn.style2 {
	text-decoration: none;
	width:100%; 
	max-width:311px;
	height:64px;
	border: 1px solid #1B6551;
	background-color:transparent;
	font-size:17px;
	font-weight:400;
	display:flex;
	align-items: center;
	justify-content: center;
	color:#070D0A;
	margin-top:40px;
	border-radius: 0;
	padding:0 20px;
	justify-content: space-between;
}
.floor-plan-mortgage-link .th-btn.style2.th-btn-icon:after { filter:unset; -webkit-filter:unset; }

/* Elevation Options with Images (Horizontal Layout) */
.floor-plan-elevation-options {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 10px;
}

.floor-plan-elevation-item {
	width:100%; 
	max-width:369px;
	position: relative;
}

.floor-plan-elevation-item input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tamarack-floor-plan-container .floor-plan-elevation-label {
	display: block;
	border: 2px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.3s ease;
	background: #fff;
	padding:0;
}

.tamarack-floor-plan-container .floor-plan-elevation-label::before { display: none; }

.floor-plan-elevation-label:hover {
	border-color: #999;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.floor-plan-elevation-item input[type="radio"]:checked + .floor-plan-elevation-label {
	border-color: var(--title-color);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
}

.floor-plan-elevation-image {
	width: 100%;
	background: #f5f5f5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.floor-plan-elevation-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.floor-plan-elevation-name {
	padding: 0 10px;
	text-align: left;
	font-weight: 500;
	font-size: 24px;
	background: #1B6551;
	color: white;
}

.tamarack-floor-plan-svg-container {
	flex: 1;
	border: 1px solid #ddd;
	background: #fff;
	position: relative;
	overflow: hidden;
}

.floor-plan-svg-wrapper {
	width: 100%;
	height: 600px;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.floor-plan-svg-wrapper svg {
	max-width: 100%;
	height: auto;
	transition: transform 0.1s ease-out;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.floor-plan-zoom-controls {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.floor-plan-zoom-btn {
	width: 36px;
	height: 36px;
	border: 1px solid #ccc;
	background: #fff;
	color: #333;
	font-size: 20px;
	font-weight: bold;
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	padding: 0;
	line-height: 1;
}

.floor-plan-zoom-btn:hover {
	background: #f5f5f5;
	border-color: #999;
}

.floor-plan-zoom-btn:active {
	background: #e0e0e0;
	transform: scale(0.95);
}

.floor-plan-zoom-btn.zoom-reset {
	font-size: 18px;
}


#inv-floor-plan { background-color:#D4D9D4; }
#inv-floor-plan .tamarack-floor-plan-container { margin:10px; }
#inv-floor-plan .tamarack-floor-plan-layout { gap:10px; }
#inv-floor-plan .tamarack-floor-plan-controls { height: calc(100vh - 120px); max-width:580px; overflow-y:scroll; padding:50px 70px; background-color:#EAEFEA }
#inv-floor-plan .tamarack-floor-plan-controls h2 { color:#1D6452; font-size:47px; font-weight:500; margin-bottom:10px; }
#inv-floor-plan .tamarack-floor-plan-controls p { margin-bottom:0; }
#inv-floor-plan .floor-plan-svg-wrapper { height: calc(100vh - 120px); }
#inv-floor-plan .floor-plan-tabs { margin:40px 0; justify-content: space-between; gap:10px; }
#inv-floor-plan .floor-plan-tabs button { width:199px; height:64px; font-size:16px; font-weight:400; background-color:white; color:#1D6452; display:flex; justify-content: center; align-items: center; }
#inv-floor-plan .floor-plan-tabs button.active { background-color: #1D6452; color:white; }
#inv-floor-plan .tamarack-floor-plan-controls .floor-plan-selector { font-size:17px; font-weight:400; color:#070D0A; }
#inv-floor-plan .floor-plan-control-group:has(.floor-plan-selector) { position: relative; }
#inv-floor-plan .floor-plan-control-group:has(.floor-plan-selector)::after { content:''; width:17px; height:9px; position: absolute; top:50%; transform:translateY(-50%); right:10px; background-image:url('../../uploads/images/select-arrow-down.svg'); background-repeat:no-repeat; background-size:100%; background-position: center; }
#inv-floor-plan option:checked { color:#070D0A; }
@media (max-width:1200px) {
	#inv-floor-plan .tamarack-floor-plan-controls { padding:50px 20px; }
}
/* Responsive adjustments */
@media (max-width: 850px) {
	.floor-plan-tabs {
		flex-wrap: wrap;
	}

	.floor-plan-tab-btn {
		flex: 1;
		min-width: 120px;
		padding: 10px 16px;
		font-size: 14px;
	}

	.tamarack-floor-plan-layout {
		flex-direction: column;
	}

	.tamarack-floor-plan-controls,
	.tamarack-elevation-controls {
		width: 100%;
	}

	.tamarack-floor-plan-svg-container {
		width: 100%;
	}

	.floor-plan-svg-wrapper {
		height: 400px;
	}

	.floor-plan-zoom-controls {
		top: 10px;
		right: 10px;
	}

	.floor-plan-zoom-btn {
		width: 32px;
		height: 32px;
		font-size: 18px;
	}

	.floor-plan-elevation-item {
		width:100%; 
		max-width:369px;
	}
	.floor-plan-mortgage.mobile { display: block; }
	.floor-plan-mortgage.desktop { display: none; }
	#inv-floor-plan .tamarack-floor-plan-container .tamarack-floor-plan-controls h2 {
		font-size:24px; 
		line-height:28px;
	}
	#inv-floor-plan .head-and-stats {
		display:flex;
		justify-content: space-between;
		align-items: center;
		max-width:411px;
		margin:0 auto;
	}
	#inv-floor-plan .floor-plan-tabs button { width:100%; max-width:50%; }
	#inv-floor-plan .tamarack-floor-plan-controls { height:auto; max-width:unset; }
	#inv-floor-plan .floor-plan-svg-wrapper { height:60vh; }
	.floor-plan-elevation-options { justify-content: center; }
}