/**
 * Background Switcher Widget Styles
 */

.angie-bg-switcher {
	position: relative;
	width: 100%;
	height: 500px; /* Default, overridden by control */
	overflow: hidden;
	display: flex;
}

/* Orientation Modifiers */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__items-container {
	flex-direction: column;
}

/* Background Layer */
.angie-bg-switcher__backgrounds {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.angie-bg-switcher__bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.5s ease-in-out; /* Default, overridden by control */
	z-index: 1;
}

.angie-bg-switcher__bg-image.is-active {
	opacity: 1;
	z-index: 2;
}

.angie-bg-switcher__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3); /* Optional: Dark overlay for better text readability */
	z-index: 3;
	pointer-events: none;
}

/* Content Layer */
.angie-bg-switcher__items-container {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	z-index: 10;
}

.angie-bg-switcher__item {
	flex: 1; /* Start equal */
	position: relative;
	cursor: pointer;
	transition: flex-grow 0.5s ease; /* Animate flex growth specifically */
	min-height: 0; 
	overflow: hidden;
}

/* Horizontal Layout Borders */
.angie-bg-switcher:not(.angie-bg-switcher--orientation-vertical) .angie-bg-switcher__item {
	height: 100%;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.2); 
}

.angie-bg-switcher:not(.angie-bg-switcher--orientation-vertical) .angie-bg-switcher__item:first-child {
	border-inline-start: none;
}

/* Vertical Layout Borders */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__item {
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.2); 
	height: auto; /* Let flex handle height */
}

/* Vertical Layout - Accordion Logic */
/* Active item grows significantly to make room for content */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__item.is-active {
    flex-grow: 10; /* Expand active item massively compared to others (flex:1 vs flex:10) */
}

.angie-bg-switcher--orientation-vertical .angie-bg-switcher__item:first-child {
	border-top: none;
}


.angie-bg-switcher__item-inner {
	width: 100%;
	height: 100%;
	padding: 40px;
	display: flex;
	/* Direction controlled by settings for vertical mode, default column for horizontal */
	flex-direction: column;
	justify-content: flex-end; /* Default alignment */
	box-sizing: border-box;
	position: relative;
}

/* 
 * =========================================
 * Vertical Side Title Mode (Horizontal Layout Only)
 * =========================================
 */

/* Common Side Mode Styles */
.angie-bg-switcher--title-side-left .angie-bg-switcher__item-inner,
.angie-bg-switcher--title-side-right .angie-bg-switcher__item-inner {
	flex-direction: row; /* Horizontal layout for inner content */
	align-items: center; /* Center items vertically */
	justify-content: space-between;
}

.angie-bg-switcher--title-side-left .angie-bg-switcher__title-container,
.angie-bg-switcher--title-side-right .angie-bg-switcher__title-container {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	z-index: 20;
	position: relative;
}

/* Left Side Specifics */
.angie-bg-switcher--title-side-left .angie-bg-switcher__item-inner {
	flex-direction: row;
}
.angie-bg-switcher--title-side-left .angie-bg-switcher__content {
	order: 2;
	margin-left: auto;
	/* Initial state: Hidden off-canvas to the right */
	transform: translateX(100%); 
	opacity: 0;
	width: 0;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.angie-bg-switcher--title-side-left .angie-bg-switcher__title-container {
	order: 1;
	margin-right: 20px;
	flex-shrink: 0;
}


/* Right Side Specifics */
.angie-bg-switcher--title-side-right .angie-bg-switcher__item-inner {
	flex-direction: row-reverse;
}
.angie-bg-switcher--title-side-right .angie-bg-switcher__content {
	order: 2;
	margin-right: auto;
	/* Initial state: Hidden off-canvas to the left */
	transform: translateX(-100%);
	opacity: 0;
	width: 0;
	overflow: hidden;
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.angie-bg-switcher--title-side-right .angie-bg-switcher__title-container {
	order: 1;
	margin-left: 20px;
	flex-shrink: 0;
}


/* Standard Mode Title (When not side mode) */
.angie-bg-switcher:not(.angie-bg-switcher--title-side-left):not(.angie-bg-switcher--title-side-right) .angie-bg-switcher__title-container {
	width: 100%;
	margin-bottom: 15px;
}


/* Title Styling */
.angie-bg-switcher__title {
	margin: 0;
	color: #fff;
	transition: all 0.3s ease;
	white-space: nowrap; /* Prevent wrapping in vertical mode */
}

/* Content (Description + Button) hidden initially */
.angie-bg-switcher__content {
	/* Default hidden state */
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 0.5s ease;
	display: flex;
	flex-direction: column;
}

/* 
 * =========================================================================
 * ANIMATIONS & LAYOUT FOR VARIOUS MODES
 * =========================================================================
 */

/* 1. HORIZONTAL MODE (Standard Stacked) */
/* Content slides UP from bottom */
.angie-bg-switcher:not(.angie-bg-switcher--orientation-vertical):not(.angie-bg-switcher--title-side-left):not(.angie-bg-switcher--title-side-right) .angie-bg-switcher__content {
	transform: translateY(20px);
}
.angie-bg-switcher:not(.angie-bg-switcher--orientation-vertical):not(.angie-bg-switcher--title-side-left):not(.angie-bg-switcher--title-side-right) .angie-bg-switcher__item.is-active .angie-bg-switcher__content {
	transform: translateY(0);
	max-height: 500px;
	opacity: 1;
}

/* 2. HORIZONTAL MODE (Side Title) */
/* Content slides IN from side (Already handled in specific sections above) */
.angie-bg-switcher--title-side-left .angie-bg-switcher__content,
.angie-bg-switcher--title-side-right .angie-bg-switcher__content {
	max-height: none; 
	height: auto;
	white-space: normal;
	min-width: 0;
}

/* Active State for Side Mode */
.angie-bg-switcher--title-side-left .angie-bg-switcher__item.is-active .angie-bg-switcher__content,
.angie-bg-switcher--title-side-right .angie-bg-switcher__item.is-active .angie-bg-switcher__content {
	width: auto;      
	max-width: 80%;   
	opacity: 1;
	transform: translateX(0);
	padding-inline: 20px;
}

/* 
 * 3. VERTICAL MODE (Stacked Rows) - **MODIFIED HERE** 
 * Requested: Title static on left. Content (Desc+Btn) fades in next to it.
 */

/* Change inner layout to ROW for vertical mode */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__item-inner {
    flex-direction: row; 
    align-items: center; /* Vertically center content with title - DEFAULT */
    justify-content: flex-start; /* Start from left */
    height: 100%; /* Important: Fill the container height to allow vertical centering */
}

/* Title adjustments for Vertical Mode - KEEP STATIC */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__title-container {
    width: auto !important;
    margin: 0;
    flex-shrink: 0;
    margin-right: 30px; /* Space between title and content */
    margin-bottom: 0 !important; /* Ensure no bottom margin pushes it up */
    
    /* Ensure title stays static and doesn't jump */
    position: relative;
    z-index: 10;
}

/* Content adjustments for Vertical Mode */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__content {
    /* Layout: Items inside content (Desc, Button) */
    display: flex; /* Ensure flex is applied */
    flex-direction: column; 
    align-items: flex-start; 
    justify-content: center; /* Center items inside */
    
    /* Ensure it has space */
    flex-grow: 1;
    min-width: 0; /* Flex fix */
    
    /* Align self within the row */
    align-self: center; /* Default, overridden by control */

    /* Animation state: Hidden initially */
    max-width: 0; /* Animate width from 0 to reveal sideways */
    max-height: none; /* Height is not restricted */
    opacity: 0;
    overflow: visible; /* Changed from hidden to avoid cutting off */
    
    /* Prevent clipping */
    padding-right: 20px; /* Space on the right */
    white-space: nowrap; /* Keep content on one line initially to measure width smoothly */
    
    /* Controls will inject margin-top and margin-left here */
}

/* Vertical Mode ACTIVE State */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__item.is-active .angie-bg-switcher__content {
    max-width: 80%; /* Open up to available space */
    opacity: 1;
    transition: max-width 0.5s ease, opacity 0.5s ease 0.1s; /* Slight delay for opacity */
}

/* Force description to wrap properly when visible */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__description {
    margin-bottom: 10px;
    margin-right: 0;
    white-space: normal; /* Allow wrapping */
}

/* FIX: Ensure container has height/flex to center items properly */
.angie-bg-switcher--orientation-vertical .angie-bg-switcher__item {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center the inner content */
}


.angie-bg-switcher__button {
	display: inline-block;
	padding: 10px 25px;
	background-color: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.3s ease;
	white-space: nowrap;
	width: fit-content;
}

.angie-bg-switcher__button:hover {
	background-color: #fff;
	color: #000;
}

/* Responsive adjustments */
@media (max-width: 767px) {
	.angie-bg-switcher {
		height: auto !important;
	}
	
	.angie-bg-switcher__items-container {
		flex-direction: column !important;
	}

	.angie-bg-switcher__item {
		width: 100% !important;
		border-inline-start: none !important; 
		border-top: none !important;
		border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		min-height: 200px; /* Minimum height for mobile items */
		flex: none !important; /* Disable flex-grow on mobile */
		justify-content: flex-end; /* Reset vertical centering for mobile */
	}
	
	.angie-bg-switcher__item:last-child {
		border-bottom: none;
	}

	/* Reset vertical side mode on mobile */
	.angie-bg-switcher--title-side-left .angie-bg-switcher__item-inner,
	.angie-bg-switcher--title-side-right .angie-bg-switcher__item-inner {
		flex-direction: column !important;
		align-items: flex-start !important;
	}
	
	.angie-bg-switcher--title-side-left .angie-bg-switcher__title-container,
	.angie-bg-switcher--title-side-right .angie-bg-switcher__title-container {
		writing-mode: horizontal-tb !important;
		height: auto !important;
		margin: 0 0 15px 0 !important;
		width: 100% !important;
		justify-content: flex-start !important;
		order: 0 !important;
		transform: none !important; /* Reset rotation */
	}

	.angie-bg-switcher__title-container h3 {
		transform: none !important;
	}
	
	.angie-bg-switcher--title-side-left .angie-bg-switcher__content,
	.angie-bg-switcher--title-side-right .angie-bg-switcher__content {
		order: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
		transform: none !important;
		margin: 0 !important;
		opacity: 0; /* Start hidden on mobile too */
	}

	/* Restore standard animation for mobile */
	.angie-bg-switcher__content {
		max-height: 0 !important;
		transform: translateY(20px) !important;
	}
	
	.angie-bg-switcher__item.is-active .angie-bg-switcher__content {
		max-height: 500px !important;
		opacity: 1 !important;
		transform: translateY(0) !important;
	}
    
    /* Reset Vertical Mode special layout on mobile */
    .angie-bg-switcher--orientation-vertical .angie-bg-switcher__item-inner {
        flex-direction: column;
        align-items: flex-start;
        height: auto; /* Reset height logic */
    }
    .angie-bg-switcher--orientation-vertical .angie-bg-switcher__content {
        max-width: 100%;
        transform: translateY(20px);
        padding-right: 0;
        overflow: hidden; /* Reset overflow */
        margin-left: 0 !important; /* Reset margin override */
        margin-top: 0 !important; /* Reset margin override */
        align-self: flex-start !important; /* Reset align-self */
    }
    
    .angie-bg-switcher--orientation-vertical .angie-bg-switcher__title-container {
        margin-right: 0;
        margin-bottom: 15px !important;
    }
}