#ingredient-list li {
:root{
    --gg-bg-night: #060816;
    --gg-bg-deep: #0c1732;
    --gg-bg-soft: #0b1833;
    --gg-surface: rgba(10,20,42,.82);
    --gg-surface-strong: rgba(14,26,52,.9);
    --gg-surface-soft: rgba(7,14,30,.7);
    --gg-border: rgba(126,160,223,.18);
    --gg-border-strong: rgba(126,160,223,.28);
    --gg-text: #e7f0ff;
    --gg-text-muted: rgba(174,196,236,.62);
    --gg-heading: #f0f8ff;
    --gg-accent: #76a9ff;
    --gg-accent-strong: #2f6fff;
    --gg-shadow: 0 20px 60px rgba(2,6,23,.32);
    --gg-shadow-soft: 0 12px 36px rgba(2,6,23,.24);
}

html{
    margin: 0;
    padding: 0;
    background-color: #030712 !important;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{
    margin: 0 !important;
    padding: 0;
    color: var(--gg-text) !important;
    background-color: #030712 !important;
    background-image:
      radial-gradient(1100px circle at 12% 8%, rgba(58,130,246,.14), transparent 42%),
      radial-gradient(900px circle at 84% 12%, rgba(14,165,233,.09), transparent 36%),
      linear-gradient(180deg, #030712 0%, #071325 48%, #0b1833 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
    overflow-x: hidden;
}

.card,
.accordion-item,
.modal-content,
.list-group-item,
.dropdown-menu,
.table,
.subscription-plan-card,
.subscription-hero,
.subscription-timeline{
    border: 1px solid var(--gg-border) !important;
    background: var(--gg-surface);
    backdrop-filter: blur(20px);
    box-shadow: var(--gg-shadow);
}

.card-body,
.accordion-body,
.list-group-item,
.table{
    color: var(--gg-text);
}

.text-muted,
.small.text-muted,
.subscription-benefits-list,
.subscription-page .accordion-body{
    color: var(--gg-text-muted) !important;
}

.form-control,
.form-select,
textarea,
input,
select{
    border: 1px solid var(--gg-border);
    background: rgba(255,255,255,.78);
    color: var(--gg-text);
    box-shadow: none;
}

.form-control,
.form-select,
textarea,
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select{
    color: var(--gg-text) !important;
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(126,160,223,.18) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus,
select:focus{
    border-color: rgba(47,111,255,.40);
    background: rgba(255,255,255,.08) !important;
    box-shadow: 0 0 0 4px rgba(47,111,255,.10);
    color: var(--gg-text);
}

.btn-primary,
.btn.btn-primary{
    border: 1px solid rgba(21,50,97,.92);
    background: linear-gradient(135deg, #091225 0%, #18345f 48%, #2f6fff 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(10, 20, 37, .18);
}

.btn-primary:hover,
.btn.btn-primary:hover{
    background: linear-gradient(135deg, #050d1d 0%, #12305e 52%, #215fe7 100%);
    color: #fff;
    transform: translateY(-1px);
}

.btn-outline-primary,
.btn.btn-outline-primary{
    border-color: rgba(96,165,250,.28);
    color: #93c5fd;
    background: rgba(59,130,246,.06);
}

.btn-outline-primary:hover,
.btn.btn-outline-primary:hover{
    background: rgba(47,111,255,.14);
    color: #bfdbfe;
    border-color: rgba(96,165,250,.42);
}

.btn-outline-secondary,
.btn.btn-outline-secondary{
    border-color: rgba(126,160,223,.2);
    color: rgba(174,196,236,.72);
    background: rgba(255,255,255,.04);
}

.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover{
    background: rgba(255,255,255,.08);
    color: #e8f0ff;
}

.badge,
.alert,
.toast{
    backdrop-filter: blur(16px);
}

.table{
    border-radius: 18px;
    overflow: hidden;
}

.table > :not(caption) > * > *{
    background: transparent !important;
    color: var(--gg-text);
    border-bottom-color: rgba(176,204,255,.16);
}

.navbar-toggler{
    border-color: var(--gg-border);
    background: rgba(255,255,255,.38);
    backdrop-filter: blur(14px);
}

#ingredient-list li {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    background-color: rgba(255,255,255,.75);
    border: 1px solid var(--gg-border);
}

#recipes .card {
    margin-top: 20px;
}

.nav-cuisine {
        background-color: yellow; /* Fond jaune pour le bouton */
        position: relative; /* Nécessaire pour positionner correctement le badge */
        padding-right: 30px; /* Espace à droite pour le badge */
        border: 2px solid red; /* Ajout d'une bordure rouge */
        border-radius: 5px; /* Bords légèrement arrondis pour l'esthétique */
}

.nav-new-badge {
    background-color: red; /* Fond rouge pour la mention New */
    color: white; /* Texte blanc pour plus de contraste */
    font-size: smaller;
    padding: 0 5px; /* Petit padding autour du texte */
    border-radius: 50%; /* Bord arrondi pour un look de badge ou d'indice */
    position: absolute;
    top: -5px; /* Position un peu au-dessus de la ligne de base */
    right: 10px; /* Ajustez selon votre design pour positionner correctement le badge */
}

.response-box {
    background-color: rgba(255,255,255,.74);  /* Couleur de fond douce */
    border: 1px solid var(--gg-border);  /* Bordure grise subtile */
    padding: 15px;  /* Ajoute de l'espace intérieur */
    border-radius: 16px;  /* Coins arrondis pour adoucir les bords */
    margin-top: 10px;  /* Espace entre la case et les éléments ci-dessus */
    backdrop-filter: blur(16px);
    box-shadow: var(--gg-shadow);
}

.response-box p {
    font-size: 1.1em;  /* Augmente légèrement la taille du texte */
}

.form-label {
    font-weight: bold;  /* Accentue le libellé du formulaire */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loader {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    animation: spin 2s linear infinite;
    display: inline-block;
}

.list-group-item-success {
    background-color: #d4edda;
}

.list-group-item-warning {
    background-color: #fff3cd;
}

/* Subscription management page */
.subscription-page {
    max-width: 1080px;
}

.subscription-trial-banner {
    border-left: 4px solid var(--gg-accent-strong);
    border-radius: 1rem;
    background: rgba(47,111,255, 0.08);
    padding: 1.25rem 1.5rem;
}

.subscription-trial-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10203e, #2f6fff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.subscription-hero {
    border: none;
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(47,111,255,.12) 0%, rgba(255,255,255,.76) 60%);
}

.subscription-hero-title {
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 700;
}

.subscription-hero-icon {
    font-size: 4rem;
    color: rgba(47,111,255,.24);
}

.subscription-status-badge {
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.subscription-hero-meta > div {
    min-width: 150px;
}

.subscription-timeline {
    border-radius: 1.25rem;
}

.subscription-timeline-items {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .subscription-timeline-items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.timeline-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.timeline-icon {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

.subscription-plan-card {
    border-radius: 1.1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    padding: 1.25rem;
    background: rgba(255,255,255,.76);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.25);
}

.subscription-plan-card-premium {
    border-color: rgba(234, 179, 8, 0.45);
    background: linear-gradient(135deg, rgba(47,111,255,.12) 0%, rgba(255,255,255,.78) 65%);
}

.subscription-plan-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.subscription-benefits-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: #475569;
}

.subscription-benefits-list li {
    display: flex;
    align-items: center;
}

.subscription-page .accordion-button {
    padding: 1rem 1.25rem;
    font-weight: 600;
}

.subscription-page .accordion-item {
    border: none;
    border-radius: 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.subscription-page .accordion-item:last-child {
    margin-bottom: 0;
}

.subscription-page .accordion-body {
    color: #475569;
    line-height: 1.6;
}

.plan-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plan-card:hover {
    transform: translateY(-4px);
}

.pricing-toggle-label {
    font-size: 1.05rem;
}

@media (max-width: 767.98px) {
    .navbar .navbar-brand {
        margin-left: 0 !important;
    }

    .navbar .navbar-nav {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .navbar .nav-item {
        margin-bottom: 0.25rem;
    }

    .navbar .d-flex.align-items-center.gap-2 {
        width: 100%;
        justify-content: flex-start;
        padding: 0.5rem 0;
    }

    .navbar .btn {
        width: auto;
    }

    .subscription-hero {
        text-align: center;
    }

    .subscription-hero-meta {
        justify-content: center;
    }

    .subscription-hero-icon {
        display: none;
    }

    .subscription-page {
        max-width: 100%;
    }

    .plan-card:hover {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .full-bleed {
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .full-page-background {
        min-height: auto;
        padding: 40px 16px;
    }

    .content-container {
        width: 100%;
        padding: 28px 20px;
    }
}