/* Clasa '.nav-item': Stilizează elementele de navigație.
   - 'display: flex' permite un layout flexibil cu aliniere pe orizontală.
   - 'align-items: center' și 'justify-content: center' centrează conținutul pe ambele axe.
   - 'padding' și 'margin-right' controlează spațiul din interiorul și în jurul elementului.
   - 'font-size', 'font-family', 'text-decoration', și 'color' definesc aspectul textului. */

.nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    font-size: 1rem;
    text-decoration: none;
    color: #333;
}

    /* '.nav-item:last-child': Anulează margin-right pentru ultimul element '.nav-item'.
       - 'margin-right: 0' elimină spațiul din dreapta ultimului element. */

    .nav-item:last-child {
        margin-right: 0;
    }

/* Clasa '.nav-link': Stilizează linkurile din navigație.
   - Păstrează același stil de aliniere și culoare ca și '.nav-item'. */

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #495057;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Nav pill buttons – Home, Plans, Contact */
.nav-link.rounded-pill {
    color: #495057;
    background-color: transparent;
    border: 1.5px solid transparent;
}

.nav-link.rounded-pill:hover {
    background-color: #f0f4ff;
    color: #3b6fd4;
    border-color: #c5d5f7;
    box-shadow: 0 2px 8px rgba(59, 111, 212, 0.12);
}

.nav-link.rounded-pill.active {
    background: linear-gradient(135deg, #3b6fd4 0%, #6c4fd4 100%);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow: 0 3px 10px rgba(59, 111, 212, 0.35);
}

.nav-link.rounded-pill.active i,
.nav-link.rounded-pill.active span {
    color: #ffffff !important;
}

/* Clasa '.oi': Adaugă spațiu suplimentar înaintea iconițelor sau a elementelor vizuale.
   - 'margin-right' controlează spațiul dintre iconiță și text. */

.oi {
    margin-right: 0.5rem;
}

/* ':hover' pe '.nav-item': Modifică background-ul la hover.
   - 'background-color' schimbă culoarea de fundal când elementul este survolat. */

.nav-item:hover {
    background-color: #ddd;
}

/* ':active' pe '.nav-item': Modifică background-ul când este activat (click).
   - 'background-color' schimbă culoarea de fundal în timpul activării. */

.nav-item:active {
    background-color: #bbb;
}


    /* '.d-flex a': Stilizează linkurile din '.d-flex' din navbar.
       - Scopat sub .navbar ca să nu afecteze restul aplicației. */

    .navbar .d-flex a {
        color: #333;
        font-size: 1.1rem;
        text-decoration: none;
        margin-right: 1rem;
    }

    /* '.d-flex form': Controlează stilul formularelor din navbar. */

    .navbar .d-flex form {
        margin-right: 0.5rem;
    }

    /* ':hover' pe 'button' în '.d-flex' din navbar.
       - Scopat sub .navbar ca să nu mai afecteze butoane din restul paginii. */

    .navbar .d-flex button:hover {
        color: #fff;
        background-color: #333;
    }