/* ============================================
   SAL'S TAKEAWAY - THEME FIXES
   Fixes cookie bar, buttons, and color uniformity
   ============================================ */

/* ============================================
   1. COOKIE BANNER FIXES
   Fix black background with black text
   ============================================ */
#euCookieBanner > div {
    background-color: #f8f9fa !important;
    color: #212529 !important;
    border-top: 3px solid #0066CC !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
    padding: 15px 0 !important;
}

#euCookieBanner p {
    color: #212529 !important;
}

#euCookieBanner a {
    color: #0066CC !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
}

#euCookieBanner a:hover {
    color: #0052A3 !important;
}

#euCookieBanner .btn-secondary {
    background-color: #0066CC !important;
    border-color: #0052A3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 8px 24px !important;
    border-radius: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    transition: all 0.3s ease !important;
}

#euCookieBanner .btn-secondary:hover {
    background-color: #0052A3 !important;
    border-color: #004080 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3) !important;
}

/* ============================================
   2. FIX ORANGE TEXT - MAKE IT BLUE
   Change all orange text to uniform blue
   ============================================ */

/* Override Bootstrap primary color from orange to blue */
:root {
    --bs-primary: #0066CC !important;
    --bs-primary-rgb: 0, 102, 204 !important;
    --bs-link-color: #0066CC !important;
    --bs-link-color-rgb: 0, 102, 204 !important;
    --bs-link-hover-color: #0052A3 !important;
    --bs-link-hover-color-rgb: 0, 82, 163 !important;
    --bs-primary-bg-subtle: #e6f0fa !important;
    --bs-primary-border-subtle: #99c2eb !important;
    --bs-primary-text-emphasis: #004080 !important;
}

/* Fix any remaining orange color references */
.text-primary,
*[class*="text-primary"] {
    color: #0066CC !important;
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: #0066CC !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: #0052A3 !important;
}

/* Fix orange in nav links */
.nav-link.text-primary,
.nav-link.active.text-primary {
    color: #0066CC !important;
}

/* ============================================
   3. BUTTON FIXES
   Fix Order Now (blue with white text)
   Fix Call button (not clear/transparent)
   ============================================ */

/* Primary Button - Order Now */
.btn-primary {
    background-color: #0066CC !important;
    border-color: #0052A3 !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 30px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0052A3 !important;
    border-color: #004080 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 102, 204, 0.4) !important;
}

/* Call Button - Fix transparent/clear appearance */
.btn-outline-light {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 30px !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: #FFFFFF !important;
    color: #0066CC !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3) !important;
}

/* Secondary buttons */
.btn-secondary {
    background-color: #6c757d !important;
    border-color: #5a6268 !important;
    color: #FFFFFF !important;
}

.btn-secondary:hover {
    background-color: #5a6268 !important;
    border-color: #545b62 !important;
    color: #FFFFFF !important;
}

/* Danger/Red buttons - keep red for contrast */
.btn-danger {
    background-color: #dc3545 !important;
    border-color: #c82333 !important;
    color: #FFFFFF !important;
}

.btn-danger:hover {
    background-color: #c82333 !important;
    border-color: #bd2130 !important;
}

/* Success/Green buttons */
.btn-success {
    background-color: #28a745 !important;
    border-color: #1e7e34 !important;
    color: #FFFFFF !important;
}

/* Outline primary */
.btn-outline-primary {
    color: #0066CC !important;
    border-color: #0066CC !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
    color: #FFFFFF !important;
}

/* ============================================
   4. NAVIGATION FIXES
   ============================================ */

/* Active nav items */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

/* Navbar category links */
.nav-categories .nav-link.active,
#navbar-categories .nav-link.active {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

#navbar-categories .nav-link:hover {
    color: #0066CC !important;
}

/* Navbar top border */
.navbar-top {
    border-top: 3px solid #0066CC !important;
}

/* ============================================
   5. FORM ELEMENTS
   ============================================ */

/* Form focus states */
.form-control:focus,
.form-select:focus {
    border-color: #3385D6 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25) !important;
}

/* Form check inputs */
.form-check-input:checked {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
}

.form-check-input:focus {
    border-color: #3385D6 !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25) !important;
}

/* ============================================
   6. PAGINATION
   ============================================ */

.page-link {
    color: #0066CC !important;
}

.page-link:hover {
    color: #0052A3 !important;
}

.page-item.active .page-link {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
    color: #FFFFFF !important;
}

/* ============================================
   7. DROPDOWNS
   ============================================ */

.dropdown-item.active,
.dropdown-item:active {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

.dropdown-item:hover {
    color: #0066CC !important;
    background-color: rgba(0, 102, 204, 0.1) !important;
}

/* ============================================
   8. FOOTER
   ============================================ */

.footer-title {
    color: #0066CC !important;
}

.footer a:hover {
    color: #0066CC !important;
}

/* ============================================
   9. HOME PAGE SPECIFIC FIXES
   ============================================ */

/* Hero section buttons */
.hero-buttons .btn-primary {
    background-color: #0066CC !important;
    border-color: #0052A3 !important;
    color: #FFFFFF !important;
}

.hero-buttons .btn-outline-light {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    color: #FFFFFF !important;
}

.hero-buttons .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: #0066CC !important;
}

/* Feature icons */
.feature-icon {
    background: linear-gradient(135deg, #0066CC 0%, #3385D6 100%) !important;
}

/* Info banner */
.info-banner {
    background: linear-gradient(135deg, #0066CC 0%, #0052A3 100%) !important;
}

/* Icon blue */
.icon-blue,
.text-primary.me-2 {
    color: #0066CC !important;
}

/* ============================================
   10. REMOVE RANDOM ORANGE COLORS
   ============================================ */

/* Force all elements with orange to be blue */
[style*="#ff4900"],
[style*="#FF4900"],
[style*="rgb(255, 73, 0)"],
[style*="rgba(255, 73, 0"],
.text-primary {
    color: #0066CC !important;
}

/* Fix any bg-primary that was orange */
.bg-primary {
    background-color: #0066CC !important;
}

/* Fix border-primary */
.border-primary {
    border-color: #0066CC !important;
}

/* ============================================
   11. CART AND CHECKOUT FIXES
   ============================================ */

/* Cart button */
.cart-btn {
    background-color: #0066CC !important;
    color: #FFFFFF !important;
}

.cart-btn:hover {
    background-color: #0052A3 !important;
}

/* Cart badge */
.cart-badge {
    background-color: #dc3545 !important;
    color: #FFFFFF !important;
}

/* ============================================
   12. MENU PAGE FIXES
   ============================================ */

/* Menu item prices */
.menu-item .price,
.menu-price {
    color: #0066CC !important;
    font-weight: 700 !important;
}

/* Add to cart buttons on menu */
.menu-item .btn-primary,
.add-to-cart-btn {
    background-color: #0066CC !important;
    border-color: #0052A3 !important;
    color: #FFFFFF !important;
}

.menu-item .btn-primary:hover,
.add-to-cart-btn:hover {
    background-color: #0052A3 !important;
    border-color: #004080 !important;
}

/* ============================================
   13. ALERTS AND NOTIFICATIONS
   ============================================ */

/* Primary alert */
.alert-primary {
    background-color: #e6f0fa !important;
    border-color: #99c2eb !important;
    color: #004080 !important;
}

/* ============================================
   14. PROGRESS BARS
   ============================================ */

.progress-bar {
    background-color: #0066CC !important;
}

/* ============================================
   15. LIST GROUPS
   ============================================ */

.list-group-item.active {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
    color: #FFFFFF !important;
}

/* ============================================
   16. BADGES
   ============================================ */

.badge.bg-primary {
    background-color: #0066CC !important;
}

/* ============================================
   17. FOCUS RING
   ============================================ */

:focus-visible {
    outline-color: #0066CC !important;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25) !important;
}

/* ============================================
   18. SMOOTH TRANSITIONS
   ============================================ */

a, .btn, .nav-link, .form-control, .form-select {
    transition: all 0.2s ease-in-out !important;
}

/* ============================================
   19. ACCESSIBILITY IMPROVEMENTS
   ============================================ */

/* Better focus indicators */
*:focus-visible {
    outline: 2px solid #0066CC !important;
    outline-offset: 2px !important;
}

/* ============================================
   20. FOOTER STYLING
   ============================================ */

.footer {
    background-color: #1a1a2e !important;
    color: #ffffff !important;
}

.footer-title {
    color: #0066CC !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.footer a {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.footer a:hover {
    color: #0066CC !important;
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.footer .text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.footer .social-link {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

.footer .social-link:hover {
    background-color: #0066CC !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4) !important;
}

.footer-links li a:hover {
    color: #0066CC !important;
    padding-left: 5px !important;
}

.footer .form-control {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

.footer .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.footer .form-control:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #0066CC !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 102, 204, 0.25) !important;
    color: #ffffff !important;
}

.footer .btn-primary {
    background-color: #0066CC !important;
    border-color: #0066CC !important;
}

.footer .btn-primary:hover {
    background-color: #0052A3 !important;
    border-color: #0052A3 !important;
}

/* ============================================
   21. MOBILE RESPONSIVE FIXES
   ============================================ */

@media (max-width: 768px) {
    /* Cookie banner on mobile */
    #euCookieBanner > div {
        padding: 15px !important;
    }
    
    #euCookieBanner .d-flex {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    #euCookieBanner p {
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    #euCookieBanner .btn-secondary {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Hero buttons on mobile */
    .hero-buttons {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .hero-buttons .btn {
        width: 100% !important;
    }
    
    /* Better touch targets */
    .btn {
        min-height: 44px !important;
    }
    
    .nav-link {
        padding: 12px 16px !important;
    }
    
    /* Footer mobile */
    .footer-main {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    .footer .col-lg-4,
    .footer .col-lg-2,
    .footer .col-md-6 {
        margin-bottom: 1.5rem !important;
    }
}