/**
 * 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;
    }
}

/* Theme Toggle Button Styles */
#cakhia-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6601 0%, #F03131 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: none !important; /* Hidden button */
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

#cakhia-theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

#cakhia-theme-toggle svg {
    width: 24px;
    height: 24px;
}

/* Dark Theme Styles */
.cakhia-plugin-container.theme-dark,
#cakhia-plugin-container.theme-dark {
    /* Dark theme overrides */
}

.cakhia-plugin-container.theme-dark .bg-white,
#cakhia-plugin-container.theme-dark .bg-white {
    background-color: #161B26 !important;
}

.cakhia-plugin-container.theme-dark .bg-gray-100,
#cakhia-plugin-container.theme-dark .bg-gray-100,
.cakhia-plugin-container.theme-dark .bg-gray-50,
#cakhia-plugin-container.theme-dark .bg-gray-50 {
    background-color: #1a1f2e !important;
}

.cakhia-plugin-container.theme-dark .text-gray-900,
#cakhia-plugin-container.theme-dark .text-gray-900 {
    color: #ffffff !important;
}

.cakhia-plugin-container.theme-dark .border-gray-200,
#cakhia-plugin-container.theme-dark .border-gray-200,
.cakhia-plugin-container.theme-dark .border-gray-300,
#cakhia-plugin-container.theme-dark .border-gray-300 {
    border-color: #9A9A9A !important;
}

.cakhia-plugin-container.theme-dark .bg-gray-100,
#cakhia-plugin-container.theme-dark .bg-gray-100 {
    background-color: #1a1f2e !important;
}

/* Specific dark theme overrides for match cards */
.cakhia-plugin-container.theme-dark .match-card,
#cakhia-plugin-container.theme-dark .match-card {
    background-color: #161B26 !important;
    border-color: #9A9A9A !important;
}

.cakhia-plugin-container.theme-dark [class*="bg-\[#161B26\]"],
#cakhia-plugin-container.theme-dark [class*="bg-\[#161B26\]"] {
    background-color: #161B26 !important;
}