/**
 * CaKhia Plugin Frontend Styles
 * Isolated styles to prevent conflicts with theme (Flatsome)
 * 
 * This CSS ensures Tailwind CSS only affects elements inside #cakhia-plugin-container
 * and does not interfere with Flatsome theme styles
 */

/* Container isolation - ensure plugin styles don't leak to theme */
#cakhia-plugin-container,
.cakhia-plugin-container {
    /* Use CSS isolation to create a new stacking context */
    isolation: isolate;
    position: relative;
    box-sizing: border-box;
    /* Contain layout and styles to prevent leaks */
    contain: layout style;
}

/* Ensure all children use border-box */
#cakhia-plugin-container *,
#cakhia-plugin-container *::before,
#cakhia-plugin-container *::after,
.cakhia-plugin-container *,
.cakhia-plugin-container *::before,
.cakhia-plugin-container *::after {
    box-sizing: border-box;
}

/* Ensure Tailwind container class works within our container */
#cakhia-plugin-container .container,
.cakhia-plugin-container .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 640px) {
    #cakhia-plugin-container .container,
    .cakhia-plugin-container .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    #cakhia-plugin-container .container,
    .cakhia-plugin-container .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    #cakhia-plugin-container .container,
    .cakhia-plugin-container .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    #cakhia-plugin-container .container,
    .cakhia-plugin-container .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    #cakhia-plugin-container .container,
    .cakhia-plugin-container .container {
        max-width: 1536px;
    }
}