/* Optional: slightly larger nav on desktop */
@media (min-width: 992px) {
    .nav-underline .nav-link

{
    font-size: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.navbar-brand {
    font-size: 1.15rem;
}

}

.header-actions {
    gap: .5rem;
}

@media (min-width: 768px) {
    .header-actions {
        gap: .75rem;
    }
}


@media (max-width: 767.98px) {
    .btn-group > .btn {
        padding: .5rem .75rem;
    }
}

/* Make the mobile category bar sticky under the header (optional) */
@media (max-width: 767.98px) {
    .border-top.bg-white.d-block.d-md-none {
        position: sticky;
        top: 0;
        z-index: 1029;
    }
}


/* Keep mobile category bar below dropdowns */
@media (max-width: 767.98px) {
    .mobile-catbar {
        position: sticky;
        top: 0;
        z-index: 1020; /* below header dropdowns */
    }
}

/* Make header dropdowns float above everything in header/nav */
#header .dropdown-menu {
    z-index: 2000; /* above .mobile-catbar */
}

/* === HEADER BUTTON STYLES === */
.header-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

    /* Fix spacing between small icon buttons (heart/compare) */
    .header-buttons .btn-header {
        width: 42px;
        height: 38px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #12223b;
        color: #fff;
        border: 1px solid #1f2d48;
    }

        .header-buttons .btn-header:hover {
            background-color: #1e3a8a;
            color: #fff;
        }

/* Badge alignment tweaks */
#favoritesCountBadge,
#compareCountBadge {
    transform: translate(40%, -40%);
}


/* Make the text buttons (login/register/profile/logout) wider and rectangular */
.header-btn {
    height: 40px;
    min-width: 132px; /* <-- width that reads well in RO */
    padding: 0 20px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* keep two-line labels on one line */
}

/* Keep tight pills for heart/compare, but add breathing space before text buttons */
.header-actions .btn-header {
    margin-right: 6px; /* tiny spacing between the two icon pills */
}

.header-actions .header-btn {
    margin-left: 25px; /* clear separation pill → button */
}

/* Optional: outline variant looks better on dark header */
.btn-outline-secondary.header-btn {
    color: var(--ae-primary-700) !important;
    border-color: var(--ae-primary-700) !important;
    background: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(34,76,154,.08);
    opacity: 1 !important;
}

    .btn-outline-secondary.header-btn:hover {
        background: var(--ae-primary-700) !important;
        color: #fff !important;
        border-color: var(--ae-primary-700) !important;
        opacity: 1 !important;
    }

/* Header scale-up */
#header .navbar-brand {
    font-size: 1.25rem;
    letter-spacing: .2px;
}

#header .input-group .form-control {
    height: 46px; /* taller search */
    font-size: .98rem;
}

#header .btn-header { /* heart / compare */
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.header-btn { /* Loghează-te / Creare cont */
    height: 44px;
    padding: 0 20px;
    font-size: .95rem;
    border-radius: 10px;
}


/* ====================== HEADER (dark band with search) ==================== */
#header {
    background: #f5f6fa;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    #header .container {
        max-width: 1240px;
    }

    /* --- SEARCH BAR AS ONE PILL (wrapper has radius + shadow) --- */
    #header .header-search {
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 10px 30px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
        overflow: hidden; /* clip children to pill shape */
    }

        /* input: flat, no own border-radius or shadow */
        #header .header-search .form-control {
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }

            /* simple focus state */
            #header .header-search .form-control:focus {
                border: 0;
                box-shadow: none;
            }

        /* button: flat, white, just the icon */
        #header .header-search .btn {
            border: 0;
            border-radius: 0;
            background: #ffffff;
            width: 3rem;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
        }

            #header .header-search .btn:hover {
                background: #ffffff; /* keep it clean */
            }

            /* icon styling */
            #header .header-search .btn i {
                font-size: 1.15rem;
                color: var(--ae-primary-700);
            }

    /* header icon buttons on light gray (unchanged) */
    #header .btn.btn-light.btn-header {
        background: #ffffff;
        border: 1px solid rgba(15,23,42,.08);
        color: #475569;
        border-radius: 999px;
        box-shadow: 0 4px 12px rgba(15,23,42,.06);
    }

        #header .btn.btn-light.btn-header:hover {
            background: #f9fafb;
        }