/* ===================================
   OPERA BROWSER COMPATIBILITY FIXES
   =================================== */

/* Detect Opera browser */
@supports (-o-appearance: none) or (display: -o-flexbox) {

    /* ===== NAVIGATION FIXES ===== */
    .navbar {
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-menu {
        background-color: rgba(255, 255, 255, 0.99) !important;
    }

    /* ===== DRAWER FIXES ===== */
    .drawer-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    .drawer {
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
    }

    /* ===== MODAL FIXES ===== */
    .checkout-modal {
        background: rgba(0, 0, 0, 0.85) !important;
    }

    .checkout-modal-content {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    }

    /* ===== TOAST NOTIFICATION FIXES ===== */
    .toast-notification {
        background: rgba(255, 255, 255, 1) !important;
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    }

    /* ===== PRODUCT CARD FIXES ===== */
    .product-card {
        /* Ensure smooth transitions */
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }

    .product-card:hover {
        -o-transform: translateY(-12px) scale(1.02);
        transform: translateY(-12px) scale(1.02);
    }

    /* ===== GRADIENT TEXT FALLBACK ===== */
    .product-price {
        color: #02c39a !important;
        font-weight: 800;
    }

    .total-price {
        color: #02c39a !important;
        font-weight: 800;
    }

    /* ===== BUTTON FIXES ===== */
    .btn {
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .btn-primary:hover {
        -o-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    /* ===== ANIMATION FIXES ===== */
    @-o-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @-o-keyframes slideInRight {
        from {
            opacity: 0;
            -o-transform: translateX(30px);
            transform: translateX(30px);
        }

        to {
            opacity: 1;
            -o-transform: translateX(0);
            transform: translateX(0);
        }
    }

    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(30px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @-o-keyframes modalSlideUp {
        from {
            opacity: 0;
            -o-transform: translateY(50px) scale(0.95);
            transform: translateY(50px) scale(0.95);
        }

        to {
            opacity: 1;
            -o-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
        }
    }

    @keyframes modalSlideUp {
        from {
            opacity: 0;
            transform: translateY(50px) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* ===== FLEXBOX FIXES ===== */
    .nav-container,
    .hero-btn-group,
    .product-grid,
    .drawer-item,
    .checkout-form-actions {
        display: -o-flexbox;
        display: flex;
    }

    /* ===== GRID FIXES ===== */
    .product-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }

    /* Mobile grid fix for Opera */
    @media (max-width: 767px) {
        .product-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ===== IMAGE RENDERING ===== */
    img {
        -o-object-fit: cover;
        object-fit: cover;
        image-rendering: -o-crisp-edges;
        image-rendering: optimizeQuality;
    }

    /* ===== TRANSFORM FIXES ===== */
    .card:hover,
    .product-card:hover,
    .wishlist-btn:hover {
        -o-transform: translateY(-8px) scale(1.02);
        transform: translateY(-8px) scale(1.02);
    }

    /* ===== SCROLLBAR FIXES ===== */
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #02c39a;
        border-radius: 6px;
    }

    /* ===== POSITION STICKY FALLBACK ===== */
    .image-gallery {
        position: static;
    }

    /* ===== BORDER RADIUS CONSISTENCY ===== */
    .card,
    .product-card,
    .btn,
    .drawer,
    .modal-content {
        -o-border-radius: var(--radius-lg);
        border-radius: var(--radius-lg);
    }
}

/* ===================================
   GENERAL CROSS-BROWSER IMPROVEMENTS
   =================================== */

/* Ensure consistent box-sizing */
*,
*::before,
*::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

/* Improve font rendering across browsers */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -o-text-rendering: optimizeLegibility;
}

/* Smooth scrolling for all browsers */
html {
    scroll-behavior: smooth;
    -webkit-scroll-behavior: smooth;
    -moz-scroll-behavior: smooth;
    -o-scroll-behavior: smooth;
}

/* Ensure all transitions work */
* {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
}

/* Fix for Opera's flexbox quirks */
.nav-menu,
.hero-btn-group,
.product-actions,
.drawer-item-actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

/* Grid layout fixes for older Opera versions */
@supports not (display: grid) {

    .product-grid,
    .hero-bento-grid,
    .books-grid {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .product-card,
    .bento-item {
        width: calc(33.333% - 1rem);
        margin: 0.5rem;
    }

    @media (max-width: 768px) {

        .product-card,
        .bento-item {
            width: calc(50% - 1rem);
        }
    }

    @media (max-width: 480px) {

        .product-card,
        .bento-item {
            width: 100%;
        }
    }
}

/* Ensure proper rendering of transparent backgrounds */
.navbar,
.drawer-overlay,
.checkout-modal {
    will-change: backdrop-filter;
}

/* Performance optimization for Opera */
.product-card,
.card,
.btn {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
}