/**
 * Universal View Button Styling
 * Applies consistent colors to view toggle buttons across all categories
 * 
 * Dark Blue (#003c71) - View Table/Grid buttons
 * Green (#2c8659) - View AI enhanced video button
 */

/* ============================================
   VIEW TABLE/GRID BUTTONS - DARK BLUE
   ============================================ */

/* Primary view toggle button (consolidated Table/Grid button) */
.view-toggle-button,
.view-as-table,
.view-as-grid,
a.view-toggle-button,
a.view-as-table,
a.view-as-grid,
button.view-toggle-button,
button.view-as-table,
button.view-as-grid {
    background-color: #003c71 !important;
    color: #ffffff !important;
    border: 1px solid #003c71 !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Hover state for Table/Grid buttons */
.view-toggle-button:hover,
.view-as-table:hover,
.view-as-grid:hover,
a.view-toggle-button:hover,
a.view-as-table:hover,
a.view-as-grid:hover,
button.view-toggle-button:hover,
button.view-as-table:hover,
button.view-as-grid:hover {
    background-color: #0f2d4d !important; /* Darker blue on hover */
    border-color: #0f2d4d !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(22, 65, 112, 0.3) !important;
}

/* Active/pressed state for Table/Grid buttons */
.view-toggle-button:active,
.view-as-table:active,
.view-as-grid:active,
.view-toggle-button.active,
.view-as-table.active,
.view-as-grid.active,
a.view-toggle-button:active,
a.view-as-table:active,
a.view-as-grid:active,
button.view-toggle-button:active,
button.view-as-table:active,
button.view-as-grid:active {
    background-color: #0a1e33 !important; /* Even darker when pressed */
    border-color: #0a1e33 !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(22, 65, 112, 0.2) !important;
}

/* Focus state for accessibility */
.view-toggle-button:focus,
.view-as-table:focus,
.view-as-grid:focus,
a.view-toggle-button:focus,
a.view-as-table:focus,
a.view-as-grid:focus,
button.view-toggle-button:focus,
button.view-as-table:focus,
button.view-as-grid:focus {
    outline: 2px solid #4a90e2 !important;
    outline-offset: 2px !important;
}

/* ============================================
   VIEW AI ENHANCED VIDEO BUTTON - GREEN
   ============================================ */

/* Video view button */
.view-as-video,
.view-video-button,
.view-ai-video,
a.view-as-video,
a.view-video-button,
a.view-ai-video,
button.view-as-video,
button.view-video-button,
button.view-ai-video,
a[href*="video"]:not(.view-toggle-button):not(.view-as-table):not(.view-as-grid) {
    background-color: #2c8659 !important;
    color: #ffffff !important;
    border: 1px solid #2c8659 !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    text-align: center !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Hover state for Video button */
.view-as-video:hover,
.view-video-button:hover,
.view-ai-video:hover,
a.view-as-video:hover,
a.view-video-button:hover,
a.view-ai-video:hover,
button.view-as-video:hover,
button.view-video-button:hover,
button.view-ai-video:hover,
a[href*="video"]:not(.view-toggle-button):not(.view-as-table):not(.view-as-grid):hover {
    background-color: #236847 !important; /* Darker green on hover */
    border-color: #236847 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(44, 134, 89, 0.3) !important;
}

/* Active/pressed state for Video button */
.view-as-video:active,
.view-video-button:active,
.view-ai-video:active,
.view-as-video.active,
.view-video-button.active,
.view-ai-video.active,
a.view-as-video:active,
a.view-video-button:active,
a.view-ai-video:active,
button.view-as-video:active,
button.view-video-button:active,
button.view-ai-video:active {
    background-color: #1a4f36 !important; /* Even darker when pressed */
    border-color: #1a4f36 !important;
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(44, 134, 89, 0.2) !important;
}

/* Focus state for accessibility */
.view-as-video:focus,
.view-video-button:focus,
.view-ai-video:focus,
a.view-as-video:focus,
a.view-video-button:focus,
a.view-ai-video:focus,
button.view-as-video:focus,
button.view-video-button:focus,
button.view-ai-video:focus {
    outline: 2px solid #4a90e2 !important;
    outline-offset: 2px !important;
}

/* ============================================
   BUTTON GROUP STYLING
   ============================================ */

/* When buttons are in a group/container */
.view-toggle,
.view-controls,
.view-buttons,
.view-sort-container .view-toggle {
    display: inline-flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Ensure consistent spacing between buttons */
.view-toggle > a,
.view-toggle > button,
.view-controls > a,
.view-controls > button {
    margin: 0 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile responsive - stack buttons on small screens */
@media (max-width: 768px) {
    .view-toggle-button,
    .view-as-table,
    .view-as-grid,
    .view-as-video,
    .view-video-button,
    .view-ai-video {
        padding: 12px 24px !important;
        font-size: 15px !important;
        width: auto !important;
        min-width: 120px !important;
    }
    
    .view-toggle,
    .view-controls,
    .view-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .view-toggle > a,
    .view-toggle > button,
    .view-controls > a,
    .view-controls > button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .view-toggle-button,
    .view-as-table,
    .view-as-grid,
    .view-as-video,
    .view-video-button,
    .view-ai-video {
        padding: 10px 18px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   DISABLED STATE
   ============================================ */

/* Disabled button styling */
.view-toggle-button:disabled,
.view-as-table:disabled,
.view-as-grid:disabled,
.view-as-video:disabled,
.view-toggle-button.disabled,
.view-as-table.disabled,
.view-as-grid.disabled,
.view-as-video.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ============================================
   LOADING STATE
   ============================================ */

/* Loading spinner for buttons */
.view-toggle-button.loading::after,
.view-as-table.loading::after,
.view-as-grid.loading::after,
.view-as-video.loading::after {
    content: "" !important;
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    margin-left: 8px !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    border-top-color: transparent !important;
    animation: button-spin 0.8s linear infinite !important;
}

@keyframes button-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   OVERRIDE CONFLICTING STYLES
   ============================================ */

/* Ensure our styles take precedence over theme defaults */
.woocommerce .view-toggle-button,
.woocommerce .view-as-table,
.woocommerce .view-as-grid,
.woocommerce .view-as-video,
.product-category .view-toggle-button,
.product-category .view-as-table,
.product-category .view-as-grid,
.product-category .view-as-video,
.tax-product_cat .view-toggle-button,
.tax-product_cat .view-as-table,
.tax-product_cat .view-as-grid,
.tax-product_cat .view-as-video {
    /* Reapply main colors to ensure override */
    background-color: inherit !important;
}

/* Specific overrides for dark blue buttons */
.woocommerce .view-toggle-button,
.woocommerce .view-as-table,
.woocommerce .view-as-grid,
.product-category .view-toggle-button,
.product-category .view-as-table,
.product-category .view-as-grid,
.tax-product_cat .view-toggle-button,
.tax-product_cat .view-as-table,
.tax-product_cat .view-as-grid {
    background-color: #003c71 !important;
}

/* Specific overrides for green video button */
.woocommerce .view-as-video,
.product-category .view-as-video,
.tax-product_cat .view-as-video {
    background-color: #2c8659 !important;
}