/**
 * Browser Compatibility CSS
 * Fallbacks for older browsers
 */

/* ───────── Fallback for browsers without CSS Grid ───────── */
.no-grid .row {
    display: block;
}

.no-grid [class*="col-"] {
    width: 100%;
    float: left;
}

.no-grid .row::after {
    content: "";
    display: table;
    clear: both;
}

/* ───────── Fallback for browsers without Flexbox ───────── */
.no-flexbox .d-flex {
    display: block;
}

.no-flexbox .justify-content-between {
    text-align: justify;
}

.no-flexbox .justify-content-between::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.no-flexbox .align-items-center {
    vertical-align: middle;
}

/* ───────── Fallback for browsers without CSS Variables ───────── */
.no-css-vars {
    --primary: #D7263D;
    --accent: #0D6EFD;
    --secondary: #FF7F50;
    --bg-light: #FFF7F5;
    --neutral: #333;
    --border: #E9E9E9;
}

.no-css-vars .btn-primary {
    background-color: #D7263D;
    border-color: #D7263D;
    color: #ffffff;
}

.no-css-vars .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
}

.no-css-vars .text-primary {
    color: #D7263D !important;
}

.no-css-vars .bg-primary {
    background-color: #D7263D !important;
}

.no-css-vars .border-primary {
    border-color: #D7263D !important;
}

/* ───────── IE11 Specific Fixes ───────── */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE11 specific styles */
    .card {
        display: block;
    }
    
    .d-flex {
        display: -ms-flexbox;
        display: flex;
    }
    
    .justify-content-between {
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    
    .align-items-center {
        -ms-flex-align: center;
        align-items: center;
    }
}

/* ───────── Safari Specific Fixes ───────── */
@supports (-webkit-appearance: none) {
    /* Safari-specific styles */
    .navbar {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* ───────── Firefox Specific Fixes ───────── */
@-moz-document url-prefix() {
    /* Firefox-specific styles */
    .card {
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

/* ───────── Older Mobile Browsers ───────── */
@media screen and (max-width: 480px) {
    /* Ensure touch targets are large enough */
    .btn, a, button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ───────── Print Styles ───────── */
@media print {
    .no-print {
        display: none !important;
    }
    
    .navbar,
    .footer,
    .btn,
    .alert {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    a[href]:after {
        content: " (" attr(href) ")";
    }
}