/**
 * Plugin Name: PixelcraftDev Elementor Addon
 * Author: Supapong Sakulkoo (K.Auu)
 * Author URI: https://supapongai.com
 * License: Commercial - Proprietary
 * Copyright: (c) 2026 PixelcraftDev. All rights reserved.
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 */
/**
 * Pixelcraft Floor Plan Styles - Redesigned & Isolated
 */

/* Top-level Isolation using Widget WRAPPER */
.pixelcraft-floor-plan-wrapper {
	width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.pixelcraft-floor-plan-wrapper * {
	box-sizing: border-box;
}

/* Layout Container */
.pixelcraft-floor-plan-wrapper .pixelcraft-layout-container {
	display: flex;
	gap: 60px;
	align-items: flex-start;
}

/* Columns */
.pixelcraft-floor-plan-wrapper .pixelcraft-images-column {
	flex: 1.2; /* Slightly larger image side */
	display: block;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-content-column {
	flex: 0.8; /* Content side */
	display: flex;
	flex-direction: column;
}

.pixelcraft-floor-plan-wrapper.pixelcraft-no-image .pixelcraft-content-column {
	flex: 1; /* Stretch fully when no image */
	width: 100%;
}


/* Image Panels */
.pixelcraft-floor-plan-wrapper .pixelcraft-image-panel {
	display: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-image-panel.active {
	display: block;
	opacity: 1;
	animation: pixelcraftFadeIn 0.5s ease-in-out;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-image-panel img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 4px;
}

/* Section Title */
.pixelcraft-floor-plan-wrapper .pixelcraft-main-section-title {
	font-size: 42px;
	font-weight: 700;
	margin: 0 0 30px 0;
	line-height: 1.2;
	width: 100%;
}

/* Tab Navigation Styles */
.pixelcraft-floor-plan-wrapper .pixelcraft-tabs-nav {
	display: flex;
	flex-wrap: wrap; /* Added for mobile wrapping */
	gap: 15px;
	margin-bottom: 25px;
	padding-bottom: 0;
	border-bottom: none;
	width: 100%;
}

/* DEFAULT: Underline Style */
.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-default .pixelcraft-tabs-nav {
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
}

.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-default .pixelcraft-tab-btn {
	background: none;
	border: none;
	padding: 0 0 10px 0;
	margin: 0;
	color: #999;
	border-bottom: 2px solid transparent;
	margin-bottom: -11px;
}

.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-default .pixelcraft-tab-btn.active {
	border-bottom: 2px solid #222;
}

/* PILL: Rounded Background Style */
.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-pill .pixelcraft-tab-btn {
	padding: 10px 25px;
	border-radius: 50px;
	background: #f5f5f5;
	border: 1px solid transparent;
	color: #666;
}

.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-pill .pixelcraft-tab-btn.active {
	background: #222;
	color: #fff;
}

/* SQUARE: Rectangular Background Style */
.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-square .pixelcraft-tab-btn {
	padding: 12px 20px;
	border-radius: 4px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	color: #666;
}

.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-square .pixelcraft-tab-btn.active {
	background: #222;
	color: #fff;
	border-color: #222;
}


/* Common Tab Button Base */
.pixelcraft-floor-plan-wrapper .pixelcraft-tab-btn {
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: fit-content;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-tab-btn:hover {
	color: #333;
}

/* Content Panels */
.pixelcraft-floor-plan-wrapper .pixelcraft-content-panel {
	display: none;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-content-panel.active {
	display: flex; /* Changed from block to flex */
	animation: pixelcraftFadeIn 0.4s ease forwards;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-floor-description {
	font-size: 16px;
	line-height: 1.6;
	color: #666;
	width: 100%;
}

/* DOT LEADERS (Room Dimensions List) */
/* Usage: Wrap your list in <div class="pixelcraft-dimensions-list"> */
/* Format: <div class="list-item"><span>Bedroom 1</span><span>39 Sq Ft</span></div> */
.pixelcraft-floor-plan-wrapper .pixelcraft-dimensions-list .list-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
	font-size: 15px;
	color: #333;
	font-weight: 500;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-dimensions-list .list-item::after {
	content: '';
	flex: 1;
	border-bottom: 1px dotted #ccc;
	margin: 0 10px;
	order: 1;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-dimensions-list .list-item span:first-child {
	order: 0;
}

.pixelcraft-floor-plan-wrapper .pixelcraft-dimensions-list .list-item span:last-child {
	order: 2;
	font-weight: 700;
}

/* Animations */
@keyframes pixelcraftFadeIn {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

.pixelcraft-tabs-nav-container {
	position: relative;
	width: 100%;
	margin-bottom: 30px;
}

.pixelcraft-tabs-nav-container::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 10px; /* Leave space for potential padding */
	width: 40px;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.9));
	pointer-events: none;
	z-index: 2;
}

.pixelcraft-tabs-nav {
	display: flex;
	gap: 15px;
	flex-wrap: nowrap;
	width: 100%;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge */
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	padding-bottom: 5px;
}

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

.pixelcraft-tabs-nav {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}

/* OVERFLOW BEHAVIOR (RESPONSIVE) */
/* Desktop */
.pixelcraft-tabs-overflow-wrap .pixelcraft-tabs-nav {
	flex-wrap: wrap !important;
	overflow-x: visible !important;
}
.pixelcraft-tabs-overflow-wrap .pixelcraft-tabs-nav-container::after,
.pixelcraft-tabs-overflow-wrap .pixelcraft-nav-arrow {
	display: none !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.pixelcraft-tabs-overflow-tablet-wrap .pixelcraft-tabs-nav {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
	}
	.pixelcraft-tabs-overflow-tablet-wrap .pixelcraft-tabs-nav-container::after,
	.pixelcraft-tabs-overflow-tablet-wrap .pixelcraft-nav-arrow {
		display: none !important;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.pixelcraft-tabs-overflow-mobile-wrap .pixelcraft-tabs-nav {
		flex-wrap: wrap !important;
		overflow-x: visible !important;
	}
	.pixelcraft-tabs-overflow-mobile-wrap .pixelcraft-tabs-nav-container::after,
	.pixelcraft-tabs-overflow-mobile-wrap .pixelcraft-nav-arrow {
		display: none !important;
	}
}

/* Slide Mode Base */
.pixelcraft-tabs-nav-container .pixelcraft-tabs-nav {
	flex-wrap: nowrap;
	overflow-x: auto;
}

.pixelcraft-tabs-nav-container.force-wrap .pixelcraft-tabs-nav {
	flex-wrap: wrap !important;
	overflow-x: visible !important;
}

.pixelcraft-tabs-nav-container.force-wrap::after,
.pixelcraft-tabs-nav-container.force-wrap .pixelcraft-nav-arrow {
	display: none !important;
}

/* NAVIGATION ARROWS */
.pixelcraft-nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100; /* Increased */
	width: 38px;
	height: 38px;
	background-color: #ffffff !important;
	border: 1px solid #ddd;
	border-radius: 50%;
	display: flex !important; /* Force display if script doesn't hide */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	padding: 0;
	color: #333;
}

.pixelcraft-nav-arrow.prev {
	left: 5px;
}

.pixelcraft-nav-arrow.next {
	right: 5px;
}

/* Ensure icons are visible */
.pixelcraft-nav-arrow i {
	font-size: 16px;
	line-height: 1;
	display: block;
}

.pixelcraft-nav-arrow:hover {
	background-color: #f8f8f8;
	transform: translateY(-50%) scale(1.1);
	box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

/* Outer Position */
.pixelcraft-nav-arrows-outer {
	padding: 0 50px;
}

.pixelcraft-nav-arrows-outer .pixelcraft-nav-arrow.prev {
	left: -5px;
}

.pixelcraft-nav-arrows-outer .pixelcraft-nav-arrow.next {
	right: -5px;
}

.pixelcraft-floor-plan-wrapper.pixelcraft-tabs-layout-line .pixelcraft-tabs-nav {
	border-bottom: 1px solid #eee;
	gap: 30px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 1024px) {
	.pixelcraft-floor-plan-wrapper .pixelcraft-layout-container {
		gap: 30px;
	}
	.pixelcraft-floor-plan-wrapper .pixelcraft-main-section-title {
		font-size: 32px;
	}
}

@media (max-width: 991px) {
	.pixelcraft-floor-plan-wrapper .pixelcraft-layout-container {
		flex-direction: column !important;
		gap: 40px;
	}
	.pixelcraft-floor-plan-wrapper .pixelcraft-images-column,
	.pixelcraft-floor-plan-wrapper .pixelcraft-content-column {
		width: 100%;
		flex: none;
	}
}

@media (max-width: 767px) {
	.pixelcraft-floor-plan-wrapper .pixelcraft-layout-container {
		flex-direction: column;
	}
	
	.pixelcraft-floor-plan-wrapper .pixelcraft-images-column,
	.pixelcraft-floor-plan-wrapper .pixelcraft-content-column {
		width: 100%;
		flex: none;
	}

	.pixelcraft-floor-plan-wrapper .pixelcraft-main-section-title {
		margin-top: 10px;
	}
}

/* EDITOR SPECIFIC FIX */
/* Prevent pixelcraft global styles from leaking into elementor editor panels */
body.elementor-editor-active .pixelcraft-floor-plan-wrapper button {
	font-family: inherit;
}

/* Download Button */
.pixelcraft-content-panel .pixelcraft-download-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 25px;
	padding: 12px 24px;
	background-color: #222;
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	border-radius: 4px;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.pixelcraft-content-panel .pixelcraft-download-btn:hover {
	background-color: #444;
	transform: translateY(-2px);
}

.pixelcraft-download-icon {
	display: flex;
	align-items: center;
	font-size: 16px;
}

.pixelcraft-download-icon i,
.pixelcraft-download-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}