/**
 * Safari Mobile Compatibility Fixes for Beef Sires Categories
 * Addresses issues with view toggle button on iPhone Safari
 * 
 * IMPORTANT: These styles ONLY apply to Safari browsers
 * Other browsers (Chrome, Firefox, Edge) will ignore these rules
 */

/* Safari-only styles using multiple detection methods */

/* Method 1: Safari 10.1+ using @supports with -webkit-appearance */
@supports (-webkit-appearance: none) and (stroke-color: transparent) {
    /* Safari-specific button sizing for touch targets */
    .view-toggle-button {
        /* Ensure proper touch target size (Apple's 44px minimum) */
        min-height: 44px !important;
        min-width: 120px !important;
        
        /* Add padding for better touch target */
        padding: 12px 16px !important;
    }
}

/* Method 2: Safari Mobile specific using -webkit-touch-callout */
@supports (-webkit-touch-callout: none) {
    /* Additional Safari mobile specific styles */
    .view-toggle-button {
        /* Improve touch responsiveness */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        
        /* Safari-specific tap highlight */
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
        
        /* Force hardware acceleration for smoother interaction */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    /* Active state for Safari */
    .view-toggle-button:active {
        background-color: rgba(0, 0, 0, 0.1) !important;
        -webkit-transform: translate3d(0, 1px, 0);
        transform: translate3d(0, 1px, 0);
    }
}

/* Method 3: iOS Safari specific using -webkit-overflow-scrolling */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Target Safari but not Chrome on iOS */
    _::-webkit-full-page-media, _:future, :root .view-toggle-button {
        /* Safari-only button dimensions */
        min-height: 44px !important;
        min-width: 120px !important;
        padding: 12px 16px !important;
    }
}

/* Non-Safari specific styles that are safe for all browsers */
.view-toggle-button {
    /* These styles apply to ALL browsers */
    cursor: pointer;
    display: inline-block !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Ensure table is properly displayed on Safari mobile */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    .angus-data-table.visible {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        
        /* Force Safari to properly render the table */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        
        /* Ensure proper positioning */
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Hide grid when table is visible */
    .angus-products-grid.table-view {
        display: none !important;
    }
}

/* Safari-specific table fixes */
@supports (-webkit-appearance: none) {
    .angus-data-table table {
        /* Force table layout */
        table-layout: auto !important;
        width: 100% !important;
        
        /* Ensure proper rendering */
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    .angus-data-table td,
    .angus-data-table th {
        /* Prevent text from being cut off */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}