/* =============================================================================
   LEGACY INTEGRATION STYLES
   Additional styles to better integrate modern design with existing elements
   ============================================================================= */

/* Hide old header and menu elements when modern header is active - but only if modern header exists */
.modern-header ~ .header-area,
.modern-header ~ .mainmenu-area {
    display: none !important;
}

/* Only hide old slider when modern hero exists */
.modern-hero ~ .slider-area,
body:has(.modern-hero) .slider-area {
    display: none !important;
}

/* Only hide old promo when modern promo exists */
.modern-promo ~ .promo-area,
body:has(.modern-promo) .promo-area {
    display: none !important;
}

/* Only hide old footer when modern footer exists */
.modern-footer ~ .footer-top-area,
.modern-footer ~ .footer-bottom-area,
body:has(.modern-footer) .footer-top-area,
body:has(.modern-footer) .footer-bottom-area {
    display: none !important;
}

/* Fallback for browsers that don't support :has() */
@supports not (selector(:has(*))) {
    /* More conservative approach - only hide when on specific pages */
    .home-page .slider-area,
    .home-page .promo-area,
    .home-page .footer-top-area,
    .home-page .footer-bottom-area {
        display: none !important;
    }
}

/* Product container improvements */
.product_container {
    background: transparent !important;
    padding: 2rem 0 !important;
}

.product_container h1 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-dark, #333) !important;
    font-size: 2rem !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Modernize existing product boxes */
.product_boxes li,
.product_boxes-cart li {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    border: 2px solid #f0f0f0 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.product_boxes li:hover,
.product_boxes-cart li:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
    border-color: var(--primary-color, #b70000) !important;
}

/* Modernize category sections */
.main-category-content {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
}

.main-category-content:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.main-category-content .main-category {
    background: linear-gradient(135deg, #2C2C2C 0%, #1a1a1a 100%) !important;
    font-family: 'Inter', sans-serif !important;
}

.main-category-content .child,
.main-category-content .child2 {
    transition: all 0.3s ease !important;
    border-radius: 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.main-category-content .child:hover,
.main-category-content .child2:hover {
    background: var(--primary-color, #b70000) !important;
    transform: translateX(5px) !important;
}

/* Modernize existing buttons across the site */
button,
input[type="submit"],
input[type="button"],
.btn,
.button,
.add-toCart,
.add-Orden,
.readmore {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover,
.add-toCart:hover,
.add-Orden:hover,
.readmore:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Improve table styling */
table {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

table th {
    background: linear-gradient(135deg, #333 0%, #2C2C2C 100%) !important;
    color: white !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
}

table tbody tr {
    transition: all 0.3s ease !important;
}

table tbody tr:hover {
    background: #f8f9fa !important;
}

/* Modernize pagination */
.pagination {
    display: flex !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    margin: 2rem 0 !important;
}

.pagination > li > a,
.pagination > li > span {
    border-radius: 8px !important;
    border: 1px solid #e0e0e0 !important;
    padding: 0.75rem 1rem !important;
    transition: all 0.3s ease !important;
    font-family: 'Inter', sans-serif !important;
}

.pagination > li > a:hover,
.pagination > li.active > a {
    background: var(--primary-color, #b70000) !important;
    border-color: var(--primary-color, #b70000) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* Modernize alerts and notifications */
.alert,
.notification,
.message {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    font-family: 'Inter', sans-serif !important;
}

.alert-success { background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important; color: white !important; }
.alert-error { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%) !important; color: white !important; }
.alert-warning { background: linear-gradient(135deg, #FF9800 0%, #f57c00 100%) !important; color: white !important; }
.alert-info { background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%) !important; color: white !important; }

/* Modernize breadcrumbs */
.breadcrumb,
.product-breadcroumb {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
    font-family: 'Inter', sans-serif !important;
}

.breadcrumb > li + li:before,
.product-breadcroumb > a::before {
    content: "?" !important;
    color: var(--primary-color, #b70000) !important;
    font-weight: bold !important;
}

/* Modernize tabs */
.nav-tabs {
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden !important;
}

.nav-tabs > li > a {
    border-radius: 0 !important;
    border: none !important;
    background: #f8f9fa !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li > a:hover {
    background: var(--primary-color, #b70000) !important;
    color: white !important;
}

/* Modernize modals and popups */
.modal,
.popup,
.login-box,
.login-box-admin {
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;
    border: none !important;
    font-family: 'Inter', sans-serif !important;
}

.modal-header {
    background: linear-gradient(135deg, #333 0%, #2C2C2C 100%) !important;
    color: white !important;
    border-radius: 12px 12px 0 0 !important;
    border: none !important;
}

.modal-body {
    padding: 2rem !important;
}

/* Improve loading states - only spin inline spinner/icon elements, never the body or page containers */
.spinner,
.fa-spinner,
i.fa-spinner,
span.fa-spinner {
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Modernize product cards */
.single-product {
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    transition: all 0.3s ease !important;
    border: 1px solid #f0f0f0 !important;
    background: white !important;
}

.single-product:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
}

.single-product h2 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    color: var(--text-dark, #333) !important;
}

.single-product p {
    font-family: 'Inter', sans-serif !important;
    color: var(--primary-color, #b70000) !important;
    font-weight: 600 !important;
}

/* Modernize gallery items */
.galery-images {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
}

.galery-images:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
}

/* Responsive improvements for legacy elements */
@media (max-width: 768px) {
    .product_boxes,
    .product_boxes-cart {
        margin: 0 !important;
        padding: 0 1rem !important;
    }

    .product_boxes li,
    .product_boxes-cart li {
        width: 100% !important;
        margin: 0 0 1rem 0 !important;
        padding: 1rem !important;
        height: auto !important;
    }

    .main-category-content {
        width: 100% !important;
        min-width: auto !important;
        margin-bottom: 1rem !important;
    }

    .contact-table {
        width: 100% !important;
        margin: 2rem auto !important;
    }

    .cart-conteinerItems {
        display: block !important;
        padding: 2rem 0 !important;
    }

    .cart-conteinerAmount {
        width: 100% !important;
        margin: 1rem auto !important;
    }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --text-dark: #e0e0e0;
        --text-light: #b0b0b0;
        --background-light: #2C2C2C;
    }
    
    body {
        background-color: #1a1a1a !important;
        color: #e0e0e0 !important;
    }
    
    .modern-header {
        background: rgba(42, 42, 42, 0.98) !important;
        backdrop-filter: blur(10px) !important;
    }
    
    .single-product,
    .promo-card {
        background: #2C2C2C !important;
        border-color: #404040 !important;
    }
}

/* Print styles for legacy elements */
@media print {
    .product_boxes,
    .main-category-content,
    .cart-conteinerItems,
    .cart-conteinerAmount {
        box-shadow: none !important;
        transform: none !important;
    }
    
    .modern-header,
    .modern-footer {
        display: none !important;
    }
    
    body {
        padding-top: 0 !important;
    }
}

/* Accessibility improvements */
.modern-nav-link:focus,
.add-toCart:focus,
.add-Orden:focus,
.readmore:focus {
    outline: 2px solid var(--primary-color, #b70000) !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .modern-nav-link,
    .add-toCart,
    .add-Orden,
    .readmore {
        border: 2px solid currentColor !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}