/**
 * Way2Rentals Layout System
 * Flexible layout patterns for content and sidebar arrangements
 * @package Way2Rentals
 */

/* =================================================================
   Base Layout Container
   Flexible container that supports multiple layout patterns
   ================================================================= */

.w2r-layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

/* =================================================================
   Content Area
   Main content region that grows to fill available space
   ================================================================= */

.w2r-layout-main {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* =================================================================
   Sidebar Area
   Fixed-width sidebar that can be positioned left or right
   ================================================================= */

.w2r-layout-sidebar {
    min-width: 270px;
    max-width: 400px;
}


.w2r-layout-bordered {
    background: var(--color-bg-main);
    box-shadow: var(--shadow-main);
    background: var(--color-bg-panel);
}

/* =================================================================
   Layout Modifiers
   ================================================================= */

/* Right Sidebar (default) */
.w2r-layout--sidebar-right {
    flex-direction: row;
}

.w2r-layout--sidebar-right .w2r-layout-sidebar {
    order: 2;
}

/* Left Sidebar (for fleet search with filters) */
.w2r-layout--sidebar-left {
    flex-direction: row;
}

.w2r-layout--sidebar-left .w2r-layout-sidebar {
    order: 1;
}

.w2r-layout--sidebar-left .w2r-layout-main {
    order: 2;
}

/* Full Width (no sidebar, just padded content) */
.w2r-layout--full {
    flex-direction: column;
}

.w2r-layout--full .w2r-layout-main {
    width: 100%;
    max-width: 100%;
}

/* =================================================================
   Responsive Behavior
   Stack vertically on mobile, sidebar position depends on layout type
   ================================================================= */

@media (max-width: 992px) {
    .w2r-layout {
        flex-direction: column !important;
        padding: 15px;
    }

    .w2r-layout-sidebar,
    .w2r-layout-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Right sidebar: sidebar goes below main content */
    .w2r-layout--sidebar-right .w2r-layout-main {
        order: 1;
    }

    .w2r-layout--sidebar-right .w2r-layout-sidebar {
        order: 2;
    }

    /* Left sidebar: sidebar goes above main content */
    .w2r-layout--sidebar-left .w2r-layout-sidebar {
        order: 1;
    }

    .w2r-layout--sidebar-left .w2r-layout-main {
        order: 2;
    }
}

@media (max-width: 768px) {
    .w2r-layout {
        padding: 8px !important;
        gap: 10px;
    }

    .w2r-layout-bordered {
        box-shadow: none;
    }
}

@media (max-width: 375px) {
    .w2r-layout {
        padding: 4px !important;
    }
}

/* =================================================================
   Responsive Visibility Utilities
   Toggle elements based on the same breakpoint as the layout stack
   ================================================================= */

/* Hidden on mobile (≤992px), visible on desktop */
.w2r-hide-mobile {
    display: block;
}

/* Visible on mobile (≤992px), hidden on desktop */
.w2r-hide-desktop {
    display: none;
}

@media (max-width: 992px) {
    .w2r-hide-mobile {
        display: none;
    }

    .w2r-hide-desktop {
        display: block;
    }
}