/* static/css/navbar.css */
.navbar {
    background: linear-gradient(135deg, #fef08a, #facc15) !important; /* Dégradé jaune plus vif */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    padding: 0.75rem 0;
}

.navbar-logo {
    max-height: 40px;
    transition: transform 0.3s ease;
}

.navbar-brand:hover .navbar-logo {
    transform: scale(1.1);
}

.navbar-brand-text {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1e3a8a; /* Bleu foncé pour contraste avec le fond jaune */
    transition: color 0.3s ease;
}

.navbar-brand:hover .navbar-brand-text {
    color: #1e40af; /* Bleu légèrement plus clair au survol */
}

.navbar-toggler {
    border: 2px solid #1e3a8a; /* Bordure bleu foncé pour contraste */
    color: #1e3a8a;
    transition: background-color 0.3s ease;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(30, 58, 138, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.navbar-toggler:hover {
    background-color: #fefce8; /* Fond jaune pâle au survol */
}

.nav-link {
    color: #1e3a8a !important; /* Bleu foncé pour contraste */
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1.5rem !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-link:hover {
    color: #d97706 !important; /* Jaune plus foncé au survol */
    background-color: rgba(245, 158, 11, 0.2);
    border-radius: 5px;
}

.nav-link.active {
    color: #d97706 !important;
    font-weight: 700;
}

.navbar-actions {
    gap: 0.75rem;
}

.navbar-btn-cart {
    background: linear-gradient(135deg, #facc15, #f59e0b); /* Dégradé jaune */
    border: none;
    color: #1f2937; /* Texte gris foncé pour contraste */
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.navbar-btn-cart:hover {
    background: linear-gradient(135deg, #eab308, #d97706); /* Dégradé plus foncé au survol */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
    color: #1f2937;
}

.navbar-btn-logout {
    background: linear-gradient(135deg, #ef4444, #dc2626); /* Dégradé rouge */
    border: none;
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.navbar-btn-logout:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c); /* Dégradé plus foncé au survol */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
    color: #ffffff;
}

.bi-cart-fill, .bi-box-arrow-right {
    font-size: 1.2rem;
}

.badge.bg-danger {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    background-color: #ef4444 !important;
    border-radius: 50%;
}

.main-content {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Styles pour l'Offcanvas */
.offcanvas-bottom {
    height: 40vh;
    background: linear-gradient(135deg, #fef08a, #facc15); /* Dégradé jaune plus vif */
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}

.offcanvas-header {
    background-color: #fefce8; /* Fond jaune pâle */
    border-bottom: 1px solid #f59e0b; /* Bordure jaune vif */
}

.offcanvas-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1e3a8a; /* Bleu foncé pour contraste */
}

.offcanvas-body {
    padding: 1.5rem;
}

.offcanvas-body .nav-link {
    font-size: 1.1rem;
    padding: 0.75rem 1.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 0.5rem;
}

@media (max-width: 991px) {
    .navbar-brand-text {
        font-size: 1rem;
    }

    .navbar-btn-cart, .navbar-btn-logout {
        padding: 0.25rem 0.75rem;
        font-size: 0.875rem;
    }

    .bi-cart-fill, .bi-box-arrow-right {
        font-size: 1rem;
    }

    .badge.bg-danger {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }

    .offcanvas-body .nav-link {
        font-size: 1rem;
    }
}