/* Browser Compatibility Fixes */

/* Fix for older browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .overlay-blur,
    .share-overlay,
    .modal-backdrop,
    .blur-backdrop {
        background: rgba(0, 0, 0, 0.8) !important;
    }
}

/* Fix for Safari text rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix for older Safari user-select */
.no-select,
.dark-mode-toggle,
.product-badge,
.btn {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Fix for older Chrome/Safari text-size-adjust - only for supported browsers */
@supports (-webkit-text-size-adjust: 100%) {
    html {
        -webkit-text-size-adjust: 100%;
    }
}

@supports (-ms-text-size-adjust: 100%) {
    html {
        -ms-text-size-adjust: 100%;
    }
}

/* Modern browsers only if supported */
@supports (text-size-adjust: 100%) {
    html {
        text-size-adjust: 100%;
    }
}

/* Fix for print color support */
@media print {
    * {
        -webkit-print-color-adjust: exact;
    }
}

@supports (print-color-adjust: exact) {
    @media print {
        * {
            print-color-adjust: exact;
        }
    }
}

/* Firefox specific fixes */
@supports (-moz-appearance: none) {
    .btn {
        appearance: none;
        -moz-appearance: none;
    }
    
    select {
        appearance: none;
        -moz-appearance: none;
    }
}

/* Edge/IE specific fixes */
@supports (-ms-ime-align: auto) {
    .flex-container {
        display: -ms-flexbox;
        display: flex;
    }
}

/* Safari specific backdrop-filter fallback */
@supports not (backdrop-filter: blur(10px)) {
    .modal,
    .overlay,
    .popup {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    body.dark-mode .modal,
    body.dark-mode .overlay,
    body.dark-mode .popup {
        background: rgba(30, 41, 59, 0.95) !important;
    }
}

/* Fix for older mobile browsers */
@media screen and (max-width: 768px) {
    .touch-action-manipulation {
        touch-action: manipulation;
        -ms-touch-action: manipulation;
    }
    
    /* Fix for iOS Safari bounce */
    body {
        -webkit-overflow-scrolling: touch;
    }
}

/* Fix for IE11 flexbox issues */
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
    .flex-item {
        flex: 1 1 auto;
        -ms-flex: 1 1 auto;
    }
}

/* Fix for older Android browsers */
@media screen and (-webkit-min-device-pixel-ratio: 1) {
    .android-fix {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}