/* Cross-Browser Compatibility Fixes */
/* Optimized for Zen Browser (Firefox-based) and other browsers */


/* Flexbox fallback for browsers without grid support */
@supports not (display: grid) {

    .pcb-grid,
    .projects-grid,
    .skills-grid,
    .contact-grid {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .pcb-card,
    .project-card,
    .skill-card {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1 1 calc(33.333% - 2rem);
        -ms-flex: 1 1 calc(33.333% - 2rem);
        flex: 1 1 calc(33.333% - 2rem);
        min-width: 300px;
        margin-bottom: 2rem;
    }
}

/* Backdrop-filter with proper fallbacks */
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
    .navbar {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .modal {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }

    .project-card,
    .pcb-card {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

/* Fallback for browsers without backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .navbar {
        background: rgba(26, 31, 53, 0.98) !important;
    }

    .modal {
        background-color: rgba(10, 14, 26, 0.95) !important;
    }

    .project-card,
    .pcb-card {
        background: rgba(26, 31, 53, 0.95) !important;
    }
}

/* Flexbox compatibility for all browsers */
.nav-menu,
.pcb-links,
.project-links,
.form-actions {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/* Border-radius with vendor prefixes */
.pcb-card,
.project-card,
.btn,
.modal-content {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
}

/* Transform with vendor prefixes */
.pcb-card:hover,
.project-card:hover,
.btn:hover {
    -webkit-transform: translateY(-8px);
    -moz-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
}

.pcb-image:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

/* Transition with vendor prefixes */
.pcb-card,
.project-card,
.btn,
.nav-link,
.pcb-image,
.pcb-link {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Box-shadow with vendor prefixes */
.pcb-card:hover,
.project-card:hover {
    -webkit-box-shadow: 0 20px 40px rgba(0, 255, 65, 0.2);
    -moz-box-shadow: 0 20px 40px rgba(0, 255, 65, 0.2);
    box-shadow: 0 20px 40px rgba(0, 255, 65, 0.2);
}

.navbar {
    -webkit-box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
    -moz-box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.3);
}

/* Object-fit compatibility */
.pcb-image,
.project-image {
    -o-object-fit: cover;
    object-fit: cover;
}

/* Grid gap fallback */
.pcb-grid,
.projects-grid {
    grid-gap: 2.5rem;
    -ms-grid-row-gap: 2.5rem;
    -ms-grid-column-gap: 2.5rem;
}

/* Ensure proper stacking context */
.modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10000 !important;
}

.navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
}

/* Firefox scrollbar styling */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) var(--bg-dark);
    }
}