/* Browser Compatibility CSS */

/* IE 11 Fixes */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .saudi-riyal-symbol::before {
        font-family: 'SaudiRiyalSymbol', sans-serif !important;
    }
    
    .showcase-grid, .implementation-grid, .downloads-grid, .footer-content {
        display: flex;
        flex-wrap: wrap;
    }
    
    .showcase-item, .implementation-item, .download-item {
        flex: 0 0 calc(33.333% - 20px);
        margin: 10px;
    }
    
    @media (max-width: 1024px) {
        .implementation-item, .download-item {
            flex: 0 0 calc(50% - 20px);
        }
    }
    
    @media (max-width: 768px) {
        .showcase-item, .implementation-item, .download-item {
            flex: 0 0 calc(100% - 20px);
        }
    }
}

/* Safari Fixes */
@supports (-webkit-appearance:none) {
    .size-slider {
        -webkit-appearance: none;
    }
    
    .color-picker {
        -webkit-appearance: none;
    }
}

/* Firefox Fixes */
@-moz-document url-prefix() {
    .size-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--primary-color);
        cursor: pointer;
        border: none;
    }
    
    .tab-btn {
        background-color: transparent;
    }
}

/* Edge Fixes */
@supports (-ms-ime-align:auto) {
    .saudi-riyal-symbol::before {
        font-family: 'SaudiRiyalSymbol', sans-serif !important;
    }
}