/**
 * CUSTOM CSS OVERRIDE SYSTEM
 * 
 * This file contains custom styles that will override all theme and plugin styles.
 * Use the high-specificity selectors below to ensure your styles take priority
 * even over !important declarations.
 * 
 * CSS Specificity Guide:
 * - html body .custom-override = 0,0,3,0 (3 classes)
 * - html body .custom-override .element = 0,0,4,0 (4 classes)
 * - html body .custom-override #element = 0,1,3,0 (1 ID + 3 classes)
 * 
 * To override !important, use higher specificity without !important
 */

/* ========================================
   HIGH SPECIFICITY OVERRIDE EXAMPLES
   ======================================== */

/* Example 1: Override theme button styles */
html body .custom-override .btn,
html body .custom-override button,
html body .custom-override input[type='button'],
html body .custom-override input[type='submit'] {
    background-color: #your-color !important;
    color: #your-text-color !important;
    border: 2px solid #your-border-color !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

html body .custom-override .btn:hover,
html body .custom-override button:hover {
    background-color: #your-hover-color !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Example 2: Override theme colors */
html body .custom-override .primary-color,
html body .custom-override .color-primary {
    color: #your-primary-color !important;
}

html body .custom-override .bg-primary,
html body .custom-override .background-primary {
    background-color: #your-primary-color !important;
}

/* Example 3: Override theme typography */
html body .custom-override h1,
html body .custom-override h2,
html body .custom-override h3,
html body .custom-override h4,
html body .custom-override h5,
html body .custom-override h6 {
    font-family: 'Your-Font', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
}

html body .custom-override p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
}

/* Example 4: Override theme layout */
html body .custom-override .container,
html body .custom-override .wrapper {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Example 5: Override theme navigation */
html body .custom-override .main-navigation,
html body .custom-override .nav-menu {
    background-color: #your-nav-bg !important;
}

html body .custom-override .main-navigation a,
html body .custom-override .nav-menu a {
    color: #your-nav-color !important;
    font-weight: 500 !important;
    padding: 15px 20px !important;
    text-decoration: none !important;
}

html body .custom-override .main-navigation a:hover,
html body .custom-override .nav-menu a:hover {
    color: #your-nav-hover-color !important;
    background-color: #your-nav-hover-bg !important;
}

/* ========================================
   FLOATING CONTACTS OVERRIDES
   ======================================== */

/* Ensure floating contacts are always visible and styled correctly */
html body .custom-override #fc-floating-contacts {
    z-index: 999999 !important;
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
}

html body .custom-override #fc-floating-contacts .fc-btn {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

html body .custom-override #fc-floating-contacts .fc-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */

/* Mobile overrides */
@media (max-width: 768px) {
    html body .custom-override .container {
        padding: 0 15px !important;
    }
    
    html body .custom-override h1 {
        font-size: 2rem !important;
    }
    
    html body .custom-override h2 {
        font-size: 1.5rem !important;
    }
    
    html body .custom-override #fc-floating-contacts {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    html body .custom-override #fc-floating-contacts .fc-btn {
        width: 50px !important;
        height: 50px !important;
    }
}

/* Tablet overrides */
@media (min-width: 769px) and (max-width: 1024px) {
    html body .custom-override .container {
        max-width: 960px !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* High specificity utility classes */
html body .custom-override .text-center {
    text-align: center !important;
}

html body .custom-override .text-left {
    text-align: left !important;
}

html body .custom-override .text-right {
    text-align: right !important;
}

html body .custom-override .hidden {
    display: none !important;
}

html body .custom-override .visible {
    display: block !important;
}

html body .custom-override .no-margin {
    margin: 0 !important;
}

html body .custom-override .no-padding {
    padding: 0 !important;
}

/* ========================================
   YOUR CUSTOM STYLES GO HERE
   ======================================== */

/* Add your specific customizations below this line */

/* Example: Custom button style */
html body .custom-override .my-custom-button {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4) !important;
    color: white !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

html body .custom-override .my-custom-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* Example: Custom card style */
html body .custom-override .my-custom-card {
    background: white !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    padding: 30px !important;
    margin: 20px 0 !important;
    transition: all 0.3s ease !important;
}

html body .custom-override .my-custom-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
}