/**
 * Acuo Travel Agent - Elementor Compatibility Styles
 *
 * This file contains CSS rules that ensure proper integration between
 * the Acuo Travel Agent plugin and Elementor page builder.
 * It overrides default styles to maintain consistent appearance and functionality
 * when the plugin is used within Elementor sections and widgets.
 *
 * @package Acuo_Travel_Agent
 * @version 1.0.0
 */

/**
 * Grid Container Styles
 *
 * Ensures proper width and display of package grids within Elementor containers.
 */
.elementor-section .acuo-packages-grid,
.elementor-column .acuo-packages-grid,
.elementor-widget-container .acuo-packages-grid {
    width: 100%;
    max-width: 100%;
}
.elementor-section .acuo-grid,
.elementor-column .acuo-grid,
.elementor-widget-container .acuo-grid {
    display: grid;
    grid-gap: 20px;
}

/**
 * Title Alignment Compatibility
 *
 * Ensures title alignment classes work properly within Elementor.
 */
.elementor-widget-container .acuo-title-left .acuo-package-title,
.elementor-section .acuo-title-left .acuo-package-title {
    text-align: left !important;
    justify-self: start !important;
}
.elementor-widget-container .acuo-title-center .acuo-package-title,
.elementor-section .acuo-title-center .acuo-package-title {
    text-align: center !important;
    justify-self: center !important;
}
.elementor-widget-container .acuo-title-right .acuo-package-title,
.elementor-section .acuo-title-right .acuo-package-title {
    text-align: right !important;
    justify-self: end !important;
}

/**
 * Image Alignment Compatibility
 *
 * Ensures image alignment classes work properly within Elementor.
 */
.elementor-widget-container .acuo-image-left .acuo-package-image,
.elementor-section .acuo-image-left .acuo-package-image {
    justify-self: start !important;
}
.elementor-widget-container .acuo-image-center .acuo-package-image,
.elementor-section .acuo-image-center .acuo-package-image {
    justify-self: center !important;
}
.elementor-widget-container .acuo-image-right .acuo-package-image,
.elementor-section .acuo-image-right .acuo-package-image {
    justify-self: end !important;
}

/**
 * Excerpt Alignment Compatibility
 *
 * Ensures excerpt alignment classes work properly within Elementor.
 */
.elementor-widget-container .acuo-excerpt-left .acuo-package-excerpt,
.elementor-section .acuo-excerpt-left .acuo-package-excerpt {
    text-align: left !important;
    justify-self: start !important;
}
.elementor-widget-container .acuo-excerpt-center .acuo-package-excerpt,
.elementor-section .acuo-excerpt-center .acuo-package-excerpt {
    text-align: center !important;
    justify-self: center !important;
}
.elementor-widget-container .acuo-excerpt-right .acuo-package-excerpt,
.elementor-section .acuo-excerpt-right .acuo-package-excerpt {
    text-align: right !important;
    justify-self: end !important;
}

/**
 * Button Alignment Compatibility
 *
 * Ensures button alignment classes work properly within Elementor.
 */
.elementor-widget-container .acuo-button-left .acuo-package-link,
.elementor-section .acuo-button-left .acuo-package-link {
    justify-self: start !important;
}
.elementor-widget-container .acuo-button-center .acuo-package-link,
.elementor-section .acuo-button-center .acuo-package-link {
    justify-self: center !important;
}
.elementor-widget-container .acuo-button-right .acuo-package-link,
.elementor-section .acuo-button-right .acuo-package-link {
    justify-self: end !important;
}

/**
 * Elementor Editor Compatibility
 *
 * Ensures proper display in Elementor editor mode.
 */
.elementor-editor-active .acuo-package-card {
    display: grid !important;
}

/**
 * Card Layout Compatibility
 *
 * Ensures different card layout options work properly within Elementor.
 */
.elementor-widget-container .acuo-layout-vertical .acuo-package-card,
.elementor-section .acuo-layout-vertical .acuo-package-card {
    grid-template-areas: "image" "title" "excerpt" "details" !important;
    grid-template-columns: 1fr !important;
}
.elementor-widget-container .acuo-layout-horizontal .acuo-package-card,
.elementor-section .acuo-layout-horizontal .acuo-package-card {
    grid-template-areas: "image title" "image excerpt" "image details" !important;
    grid-template-columns: 1fr 2fr !important;
}
.elementor-widget-container .acuo-layout-image-left .acuo-package-card,
.elementor-section .acuo-layout-image-left .acuo-package-card {
    grid-template-areas: "image title" "image excerpt" "image details" !important;
    grid-template-columns: 1fr 2fr !important;
}
.elementor-widget-container .acuo-layout-image-right .acuo-package-card,
.elementor-section .acuo-layout-image-right .acuo-package-card {
    grid-template-areas: "title image" "excerpt image" "details image" !important;
    grid-template-columns: 2fr 1fr !important;
}

/**
 * Filter Button Styles
 *
 * Styles for the filter button when used within Elementor.
 * Uses CSS variables for customization through the Elementor interface.
 */
.elementor-widget-container .acuo-filter-button,
.elementor-section .acuo-filter-button {
    background-color: var(--button-bg, #0073aa) !important;
    color: var(--button-color, #fff) !important;
    border-style: solid !important;
    border-width: var(--button-border-width, 1px) !important;
    border-color: var(--button-border-color, #0073aa) !important;
    border-radius: var(--button-border-radius, 4px) !important;
    padding: var(--button-padding, 12px 24px) !important;
    font-size: var(--button-font-size, 16px) !important;
    font-weight: var(--button-font-weight, 500) !important;
    width: var(--button-width, auto) !important;
    height: var(--button-height, auto) !important;
    margin: var(--button-margin, 24px 0 0 0) !important;
    text-align: var(--button-text-align, center) !important;
    cursor: pointer !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}
.elementor-widget-container .acuo-filter-button:hover,
.elementor-section .acuo-filter-button:hover {
    background-color: var(--button-hover-bg, #005a87) !important;
    color: var(--button-hover-color, #fff) !important;
}

/**
 * Filter Button Styles (Duplicate)
 * 
 * Note: This appears to be a duplicate of the above styles and could be removed.
 */
.elementor-widget-container .acuo-filter-button,
.elementor-section .acuo-filter-button {
    background-color: var(--button-bg, #0073aa) !important;
    color: var(--button-color, #fff) !important;
    border-style: solid !important;
    border-width: var(--button-border-width, 1px) !important;
    border-color: var(--button-border-color, #0073aa) !important;
    border-radius: var(--button-border-radius, 4px) !important;
    padding: var(--button-padding, 12px 24px) !important;
    font-size: var(--button-font-size, 16px) !important;
    font-weight: var(--button-font-weight, 500) !important;
    width: var(--button-width, auto) !important;
    height: var(--button-height, auto) !important;
    margin: var(--button-margin, 24px 0 0 0) !important;
    text-align: var(--button-text-align, center) !important;
    cursor: pointer !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s !important;
}
.elementor-widget-container .acuo-filter-button:hover,
.elementor-section .acuo-filter-button:hover {
    background-color: var(--button-hover-bg, #005a87) !important;
    color: var(--button-hover-color, #fff) !important;
}

/**
 * Responsive Styles - Mobile
 *
 * Adjusts layouts for mobile devices (screens up to 768px wide).
 */
@media (max-width: 768px) {
    .elementor-widget-container .acuo-grid,
    .elementor-section .acuo-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    .elementor-widget-container .acuo-layout-horizontal .acuo-package-card,
    .elementor-section .acuo-layout-horizontal .acuo-package-card,
    .elementor-widget-container .acuo-layout-image-left .acuo-package-card,
    .elementor-section .acuo-layout-image-left .acuo-package-card,
    .elementor-widget-container .acuo-layout-image-right .acuo-package-card,
    .elementor-section .acuo-layout-image-right .acuo-package-card {
        grid-template-areas: "image" "title" "excerpt" "details" !important;
        grid-template-columns: 1fr !important;
    }
}

/**
 * Responsive Styles - Tablet
 *
 * Adjusts layouts for tablet devices (screens between 769px and 1024px wide).
 */
@media (min-width: 769px) and (max-width: 1024px) {
    .elementor-widget-container .acuo-grid,
    .elementor-section .acuo-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}