/**
 * Togaether Loop Grid Filter - Styles
 * Clean, responsive, and theme-compatible styles
 * 
 * @package TogaetherLoopFilter
 * @since 1.0.0
 */

/* ==========================================================================
   Container & Layout
   ========================================================================== */

.togaether-loop-filter-container {
    width: 100%;
    box-sizing: border-box;
}

.togaether-navigation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    color: #FFFFFF;
    flex-wrap: wrap;
}

body .togaether-navigation-container {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Search Input
   ========================================================================== */

#togaether-filter-input,
.togaether-search-input {
    /* Base styles */
    border: 1px solid #d9d9d9 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    padding: 12px 16px !important;
    border-radius: 3px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-weight: 300 !important;
    
    /* Transitions */
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
    
    /* Reset conflicting styles */
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

#togaether-filter-input:focus,
.togaether-search-input:focus {
    border-color: #C83D53 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(200, 61, 83, 0.1) !important;
}

#togaether-filter-input::placeholder,
.togaether-search-input::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.togaether-nav-btn,
#togaether-prev-btn,
#togaether-next-btn,
.togaether-loop-filter-container button {
    /* Core button reset */
    padding: 6px 12px !important;
    border-width: 0px !important;
    border-style: solid !important;
    border-color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    cursor: pointer !important;
    
    /* Typography */
    font-size: 15px !important;
    color: #FFFFFF !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    
    /* Layout */
    border-radius: 0px !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
    
    /* Dimensions reset */
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    max-height: none !important;
    
    /* Smooth transitions */
    transition: color 0.3s ease, opacity 0.3s ease !important;
}

/* Hover states */
.togaether-nav-btn:hover:not(:disabled),
#togaether-prev-btn:hover:not(:disabled),
#togaether-next-btn:hover:not(:disabled),
.togaether-loop-filter-container button:hover:not(:disabled) {
    color: #C83D53 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Focus states for accessibility */
.togaether-nav-btn:focus,
#togaether-prev-btn:focus,
#togaether-next-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Disabled states */
.togaether-nav-btn:disabled,
#togaether-prev-btn:disabled,
#togaether-next-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    color: #FFFFFF !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Counter/Item Count
   ========================================================================== */

#togaether-item-count,
.togaether-item-count {
    font-family: inherit !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 300 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ==========================================================================
   CSS Custom Properties for Dynamic Styling
   ========================================================================== */

:root {
    --togaether-button-padding: 6px 12px;
    --togaether-button-font-size: 15px;
    --togaether-button-color: #FFFFFF;
    --togaether-button-font-weight: 300;
    --togaether-button-border-radius: 0px;
    --togaether-button-border-width: 0px;
    --togaether-button-border-style: solid;
    --togaether-button-border-color: #FFFFFF;
    --togaether-primary-color: #C83D53;
    --togaether-counter-font-size: 15px;
    --togaether-counter-color: #FFFFFF;
    --togaether-counter-font-weight: 300;
    --togaether-input-background: #ffffff;
    --togaether-input-border-color: #d9d9d9;
    --togaether-navigation-gap: 15px;
}

/* Apply CSS variables */
#togaether-prev-btn,
#togaether-next-btn {
    padding: var(--togaether-button-padding) !important;
    font-size: var(--togaether-button-font-size) !important;
    color: var(--togaether-button-color) !important;
    font-weight: var(--togaether-button-font-weight) !important;
    border-radius: var(--togaether-button-border-radius) !important;
    border-width: var(--togaether-button-border-width) !important;
    border-style: var(--togaether-button-border-style) !important;
    border-color: var(--togaether-button-border-color) !important;
}

#togaether-prev-btn:hover:not(:disabled),
#togaether-next-btn:hover:not(:disabled) {
    color: var(--togaether-primary-color) !important;
}

#togaether-item-count {
    font-size: var(--togaether-counter-font-size) !important;
    color: var(--togaether-counter-color) !important;
    font-weight: var(--togaether-counter-font-weight) !important;
}

.togaether-navigation-container {
    gap: var(--togaether-navigation-gap) !important;
}

#togaether-filter-input {
    background-color: var(--togaether-input-background) !important;
    border-color: var(--togaether-input-border-color) !important;
}

/* ==========================================================================
   Touch and Mobile Optimizations
   ========================================================================== */

/* Prevent text selection on buttons */
#togaether-prev-btn,
#togaether-next-btn {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Touch target optimization */
@media (max-width: 1024px) {
    #togaether-prev-btn,
    #togaether-next-btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 8px 12px !important;
    }
    
    #togaether-filter-input {
        font-size: 1rem !important;
        padding: 12px 16px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet */
@media (max-width: 768px) {
    .togaether-navigation-container {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }
    
    #togaether-prev-btn,
    #togaether-next-btn {
        padding: 8px 12px !important;
        font-size: 15px !important;
    }
    
    #togaether-item-count {
        font-size: 15px !important;
        text-align: center !important;
        order: 3 !important;
        flex-basis: 100% !important;
        margin-top: 5px !important;
    }
}

/* Mobile */
@media (max-width: 567px) {
    #togaether-filter-input {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 16px !important;
    }
    
    #togaether-prev-btn,
    #togaether-next-btn {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
    
    #togaether-item-count {
        font-size: 14px !important;
    }
    
    .togaether-navigation-container {
        gap: 10px !important;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    #togaether-prev-btn,
    #togaether-next-btn {
        padding: 6px 8px !important;
        font-size: 13px !important;
    }
    
    #togaether-item-count {
        font-size: 13px !important;
    }
    
    .togaether-navigation-container {
        gap: 8px !important;
    }
    
}

/* ==========================================================================
   High Contrast and Accessibility
   ========================================================================== */

@media (prefers-contrast: high) {
    #togaether-filter-input {
        border-width: 2px !important;
    }
    
    #togaether-prev-btn:focus,
    #togaether-next-btn:focus {
        outline-width: 3px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    #togaether-prev-btn,
    #togaether-next-btn,
    #togaether-filter-input {
        transition: none !important;
    }
}

/* ==========================================================================
   Theme Compatibility Overrides
   ========================================================================== */

/* Force styles to override theme conflicts */
html .togaether-loop-filter-container #togaether-prev-btn,
html .togaether-loop-filter-container #togaether-next-btn,
html #togaether-prev-btn,
html #togaether-next-btn {
    font-weight: 300 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html .togaether-loop-filter-container #togaether-item-count,
html #togaether-item-count {
    font-weight: 300 !important;
    background: transparent !important;
    border: none !important;
    text-shadow: none !important;
}

html .togaether-loop-filter-container #togaether-filter-input,
html #togaether-filter-input {
    font-weight: 300 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Elementor specific overrides */
.elementor-widget-container .togaether-loop-filter-container button {
    background: transparent !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Loading and State Indicators
   ========================================================================== */

.togaether-loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.togaether-fade-in {
    animation: togaetherFadeIn 0.4s ease-in-out;
}

@keyframes togaetherFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Screen Reader Only Content
   ========================================================================== */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .togaether-loop-filter-container {
        display: none !important;
    }
}

/* ==========================================================================
   Additional overrides for focus and navigation
   ========================================================================== */

/* Remove blue outline completely */
.togaether-nav-btn:focus,
#togaether-prev-btn:focus,
#togaether-next-btn:focus,
.togaether-nav-btn:active,
#togaether-prev-btn:active,
#togaether-next-btn:active {
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Ensure buttons hide properly during search */
.togaether-loop-filter-container .togaether-nav-btn[style*="display: none"],
.togaether-loop-filter-container button[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
}