/* Navigation Bar CSS */
.montserrat-1 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

.NavBarContainer {
    position: relative;
    text-decoration: none;
    width: 100%;
}

.navbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px; /* Add padding for spacing */
    z-index: 11;
    font-family: Arial, sans-serif;
    position: fixed;
    top: 0;
    height: 80px; /* Ensures padding and border are included in the total width and height */
    width: 100%;
    margin: 0px;
}

.navbar.homepage {
    background-color: transparent; /* Translucent for homepage */
}

.navbar.solid {
    background: linear-gradient(135deg, #0d1526 0%, #1e2f52 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-left {
    display: flex;
    align-items: left;
    
     /* Adjust this value to move closer to the left margin */
}

/* Container for the logo with three lines */
.LogoContainer {
    display: flex;
    align-items: center;
    gap: 0px; /* Remove spacing between lines */
}

.Logo {
    text-decoration: none;
}

.Logo:focus {
    text-decoration: underline lightskyblue;
}

/* Logo image */
.AALLogo {
    height: auto;
    max-height: 55px;
    width: auto;
    max-width: 100%;
    margin-left: 5px;
    margin-top: -4px;
    position: relative;
    z-index: 2; /* logo behind text, in front of flag */
}

.AALLogo:hover {
    transform: translateY(-3px);
}

.AALLogo:active {
    transform: translateY(3px);
}




/* Logo text with updated gradient */
.LogoText {
    font-family: 'Montserrat', sans-serif; /* Correct font-family name */
    font-weight: 900;
    font-size: 30px;
    background: linear-gradient(to right, #ff0000, #ffffff 20%, #1e90ff); /* Gradient: red -> white (limited) -> bright blue */
    background-clip: text; /* Standard property for compatibility */
    -webkit-background-clip: text; /* Webkit-specific property */
    -webkit-text-fill-color: transparent; /* Webkit-specific property to make text transparent */
    color: transparent; /* Fallback for unsupported browsers */
    font-style: italic; /* Italicize the text */
    margin: 0; /* Remove extra margin */
    text-decoration: none;
    margin-left: 5px;
    padding-right: 12px; /* italic overhang of the final "s" paints past the box; without this, background-clip: text leaves it unpainted (looks cut off) */
    position: relative;
    z-index: 3; /* text in front of logo and flag */
}

.LogoText:hover {
    text-decoration: underline lightskyblue;
    transform: translateY(-3px);
    
}

.LogoText:active {
    transform: translateY(3px);
}

/* Adjustments for the American flag */
.AmericanFlag {
    position: relative;
    z-index: 1; /* flag behind logo and text */
}

.AmericanFlagImage {
    height: 32px; /* Adjust to match the navbar height */
    margin-left: 43px; /* 55px gap minus the .LogoText overhang padding */
    margin-right: 10px; /* Space between logo and flag */
    margin-top: 12px;
}

.AmericanFlagImage:hover {
    transform: translateY(-3px);
}

.AmericanFlagImage:active {
    transform: translateY(3px);
}




/* Hamburger menu for mobile view */
.hamburger {
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: space-around;
    width: 25px;
    height: 25px;
    cursor: pointer;
    margin-left: 0px;
}

.hamburger span {
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}



/*nav-right*/
.nav-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Navigation links */
.nav-links {
    display: flex;
    align-items: center; /* Ensure items are centered vertically */
    gap: 0px; /* Spacing between links */
    transition: transform 0.3s ease-in-out;
    margin-left: 10px;
}

.nav-links a {
    margin: 0 2px;
    padding: 10px 10px;
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-family: Arial, sans-serif;
    border-radius: 5px;
}

.nav-links a:hover {
    background-color: #1e40af;
    transform: translateY(-3px);
}

.nav-links a:active {
    background-color: #1e40af;
    transform: translateY(3px);
}

/* Dealer dropdown menu */
.dealer-dropdown,
.admin-dropdown {
    position: relative;
}

.dealer-dropdown-toggle,
.admin-dropdown-toggle {
    cursor: pointer;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: Arial, sans-serif;
    padding: 0 7px;
    text-align: center;
}

.dealer-dropdown-menu,
.admin-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* The navbar's own navy, not black. These panels hang off a navy bar, so
       black read as a separate window sitting on top of it. Deliberately a
       flat colour with NO dark-mode counterpart: the navbar does not change
       between themes, and neither should the menus that drop out of it. */
    background-color: #0d1526;
    border: 1px solid #fff;
    padding: 10px;
    z-index: 1000;
    min-width: 220px;
    flex-direction: column;
    gap: 15px;
    border-radius: 5px;
    /* The navbar is position: fixed, so a menu that runs past the bottom of
       the window is simply cut off: the page scrolls, the menu does not move
       with it. The CEO's Admin menu has eighteen rows, more than a laptop
       window holds under the 80px bar, so its last entries were unreachable
       (owner, 2026-10-27). The menu now stops at the window edge and scrolls
       inside itself. dvh so a collapsing browser toolbar does not hide the
       last row; the vh line covers browsers without dvh. Reset at the 1200px
       breakpoint, where these menus unroll inline inside the .nav-right
       panel, which already scrolls itself. */
    max-height: calc(100vh - 90px);
    max-height: calc(100dvh - 90px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dealer-dropdown-menu a,
.admin-dropdown-menu a {
    display: block;
    padding: 5px 10px;
    color: white;
    text-decoration: none;
    text-align: center;
    align-items: center;
}

.dealer-dropdown:hover .dealer-dropdown-menu,
.admin-dropdown:hover .admin-dropdown-menu,
.admin-dropdown:focus-within .admin-dropdown-menu {
    display: flex;
    align-items: center;
}

/* Esc (or Enter/Space on the Admin toggle) closes the desktop menu even while
   the toggle keeps focus, which the :focus-within rule above would otherwise
   hold open. navbar.js adds the class and lifts it again once the pointer or
   the focus leaves the dropdown. Equal specificity to the rule above, later in
   the file, so it wins. */
.admin-dropdown.is-dismissed > .admin-dropdown-menu {
    display: none;
}

/* The expand/collapse caret. Desktop opens these menus on hover, so it would
   promise a control that isn't there — it only appears at the mobile
   breakpoint, where tapping really does expand. */
.nav-caret {
    display: none;
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Admin dropdown toggle — hamburger icon + label */
.admin-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-radius: 5px;
}

.admin-dropdown-toggle:hover {
    background-color: #1e40af;
}

.admin-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    width: 18px;
    height: 13px;
}

.admin-hamburger span {
    width: 100%;
    height: 2px;
    background-color: white;
    border-radius: 5px;
}

/* ── Admin menu groups (owner, 2026-10-29: "pages grouped together, drop-downs
   within the drop-down, not a mile long") ──
   The Admin dropdown lists six group headings (views/partials/header.ejs); each
   heading is a <button> and its entries sit in the .admin-group-menu after it.
   These base rules hold at every width: the entries stay hidden until the
   group carries .is-open, which navbar.js toggles — by hover, focus, click or
   Enter/Space on desktop, by tap on the phone. The desktop flyout and the
   phone's second-level accordion are below, each inside its own breakpoint.
   Same navy as the rest of the menu, theme-independent for the same reason. */
.admin-dropdown-menu {
    /* Headings carry their own padding; the 15px gap above suits the dealer
       menu's bare links, not six buttons. */
    gap: 2px;
    padding: 8px;
}

.admin-group {
    /* The menu centres its items (align-items above); a group spans the column
       so its heading is a full-width row. */
    width: 100%;
}

.admin-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 5px;
    color: #fff;
    font: 600 15px/1.2 Arial, sans-serif;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.admin-group-toggle:hover,
.admin-group.is-open > .admin-group-toggle {
    background-color: #1e40af;
}

.admin-group-toggle:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 1px;
}

/* A plain text glyph, not an icon: points at the flyout on desktop, turns
   downward on the phone (below). */
.admin-group-caret {
    font-size: 0.8rem;
    line-height: 1;
    opacity: 0.85;
    transition: transform 0.2s ease;
}

.admin-group-menu {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.admin-group.is-open > .admin-group-menu {
    display: flex;
}

/* The page you are on: its entry is lit and its group heading carries a bar,
   so the menu says where you are before a group is even opened. navbar.js
   sets both from location.pathname (the anchors themselves never change —
   tests pin their exact markup). */
.admin-dropdown-menu a[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.14);
    font-weight: 700;
}

.admin-group--current > .admin-group-toggle {
    box-shadow: inset 3px 0 0 #60a5fa;
}

@media (min-width: 1201px) {
    /* Without JavaScript the entries unroll inline under a hovered or focused
       heading, inside the dropdown's own scroll region, so every page stays
       reachable. navbar.js marks the menu --js and takes over below. */
    .admin-dropdown-menu:not(.admin-dropdown-menu--js) .admin-group:hover > .admin-group-menu,
    .admin-dropdown-menu:not(.admin-dropdown-menu--js) .admin-group:focus-within > .admin-group-menu {
        display: flex;
    }

    /* The flyout: a second navy panel beside the heading. position: fixed on
       purpose — the dropdown clips whatever overflows it (it scrolls inside
       itself, Oct 27), and a fixed box is laid out against the window instead,
       so it can hang past the dropdown's right edge. navbar.js writes top/left
       from the heading's position and, when the panel would leave the window,
       swaps the group to --inline (next rule) instead. */
    .admin-group.is-open:not(.admin-group--inline) > .admin-group-menu {
        position: fixed;
        z-index: 1001;
        min-width: 220px;
        padding: 8px;
        background-color: #0d1526;
        border: 1px solid #fff;
        border-radius: 5px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    }

    /* An invisible bridge over the dropdown's right padding and border, so the
       pointer crossing from the heading to the flyout never leaves the group
       (leaving is what closes it). */
    .admin-group.is-open:not(.admin-group--inline) > .admin-group-menu::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -14px;
        width: 14px;
    }

    .admin-group-menu a {
        text-align: left;
        white-space: nowrap;
    }

    /* Inline fallback (no room beside the heading, or no JavaScript): indented
       under its heading like the phone's accordion, scrolling with the
       dropdown. */
    .admin-group--inline > .admin-group-menu,
    .admin-dropdown-menu:not(.admin-dropdown-menu--js) .admin-group-menu {
        margin: 2px 0 6px 10px;
        padding-left: 10px;
        border-left: 1px solid rgba(255, 255, 255, 0.25);
    }

    .admin-group--inline.is-open > .admin-group-toggle .admin-group-caret {
        transform: rotate(90deg);
    }
}

/* Browse listings dropdown menu */
.listings-dropdown {
    position: relative;
}

.listings-dropdown-toggle {
    cursor: pointer;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: Arial, sans-serif;
    padding: 0 7px;
    text-align: center;
}

.listings-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Same navy as the other two — see .dealer-dropdown-menu above. */
    background-color: #0d1526;
    border: 1px solid #fff;
    padding: 10px;
    z-index: 1000;
    min-width: 220px;
    flex-direction: column;
    gap: 15px;
    border-radius: 5px;
}

.listings-dropdown-menu a {
    display: block;
    padding: 5px 10px;
    color: white;
    text-decoration: none;
    text-align: center;
    align-items: center;
}

.listings-dropdown:hover .listings-dropdown-menu {
    display: flex;
    align-items: center;
}

/* Navigation buttons */
.nav-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 30px;
}


.nav-buttons a {
    padding: 10px 20px;
    text-decoration: none;
    font-size: 16px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    height: 17px;
    line-height: 17px;
    box-sizing: content-box; /* Override box-sizing for navbar buttons */
}

.login-button {
    color: #fcf9f9;
    padding: 10px 10px !important;
    align-self: center;
}

.login-button:hover {
    background-color: #28a745;
    transform: translateY(-3px);
}

.login-button:active {
    background-color: #28a746e0;
    transform: translateY(3px);
}

.SignUp-button {
    background-color: #1e40af;
    color: #fff;
    padding: 2px 10px; /* Adjust padding for a smaller button */
    border-radius: 5px; /* Slightly rounded corners */
    height: 17px; /* Remove fixed height */
    line-height: 1.2; /* Set line-height for consistent text height */
    display: inline-flex; /* Use inline-flex to avoid block-level behavior */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    font-size: 1rem; /* Ensure consistent font size */
    font-weight: normal; /* Ensure consistent font weight */
    text-decoration: none; /* Remove underline */
}

.SignUp-button:hover {
    transform: translateY(-3px);
}

.SignUp-button:active {
    transform: translateY(3px);
}

/* Account Button */
.account-button {
    background-color: #28a745;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 5px;
    height: 17px;
    line-height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px !important;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    box-sizing: content-box;
}

.account-button:hover {
    transform: translateY(-3px);
}

.account-button:active {
    transform: translateY(3px);
}

.logout-form {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: transparent;
    padding: 0;
    border-radius: 5px;
    
}

.logout-form:hover {
    transform: translateY(-3px);
}

.logout-form:active {
    transform: translateY(3px);
}

/* Logout Button */
.logout-button {
    background-color: red;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    height: 17px;
    line-height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    border: none;
    box-sizing: content-box;
    
}



/* ── Notification Bell ── */
.nav-notif {
    position: relative;
    display: flex;
    align-items: center;
}

.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.notif-bell:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.notif-bell--active {
    color: #fff;
}

.notif-badge {
    position: absolute;
    top: 0px;
    right: 22px;
    background: #ef4444;
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
    box-shadow: 0 0 0 2px #000;
}

.notif-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 8px;
    background: transparent;
    width: 400px;
    z-index: 1100;
}

.notif-dropdown-inner {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 520px;
}

.notif-dropdown-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.nav-notif:hover .notif-dropdown,
.nav-notif.open .notif-dropdown {
    display: block;
}

.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 700;
    font-size: 0.88rem;
    color: #111827;
}

.notif-mark-all {
    background: none;
    border: none;
    color: #1e40af;
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.notif-mark-all:hover { text-decoration: underline; }

.notif-item {
    display: block;
    overflow: hidden;
    padding: 10px 20px 45px 40px !important;
    border-bottom: 1px solid #e5e7eb;
    border-left: 3px solid transparent;
    text-decoration: none;
    color: #374151;
    transition: background 0.15s, border-color 0.15s;
}

.notif-item:hover { background: #f9fafb; }

.notif-unread {
    background: #eef5ff;
    border-left-color: #3b82f6;
}
.notif-unread:hover { background: #e3efff; }

.notif-item-icon {
    float: left;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    background: #e5e7eb;
    color: #374151;
    flex-shrink: 0;
}

.notif-icon--message_new       { background: #bfdbfe; color: #1e3a8a; }
.notif-icon--listing_favorited { background: #fde68a; color: #92400e; }
.notif-icon--support_new       { background: #fed7aa; color: #9a3412; }
.notif-icon--support_created   { background: #a7f3d0; color: #064e3b; }
.notif-icon--support_closed    { background: #dcfce7; color: #14532d; }
.notif-icon--support_reopened  { background: #fde68a; color: #92400e; }
.notif-icon--support_message   { background: #ddd6fe; color: #4c1d95; }

.notif-item-text {
    overflow: hidden;
}

.notif-item-title {
    font-weight: 600;
    font-size: 0.83rem;
    color: #111827;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notif-item-body {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

.notif-empty {
    padding: 20px 16px;
    text-align: center;
    font-size: 0.83rem;
    color: #9ca3af;
}

.notif-view-all {
    display: block;
    padding: 10px 16px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e40af;
    text-decoration: none;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}






/* End of Navigation Bar CSS */










@media (max-width: 1200px) {

    .navbar {
        width: 100%;
    }
    
    .AmericanFlagImage {
        align-self: flex-end;
        margin-left: 10px;
    }

    .LogoText {
        font-size: 1.5rem;
    }

    .nav-left {
        margin-left: 5px; /* Adjust margin for smaller screens */
        margin-right: 10px;
        width: 100%;
        justify-content: center;
        padding: 20px 0; 
    }
    
    .nav-links {
        display: flex; /* Ensure links show when nav-right is visible */
        flex-direction: column;
        gap: 15px; /* Add spacing between links */
        justify-content: center;
        align-content: center;
        margin-left: 0;
        padding-top: 10px;
        /* Full width so a collapsible section's row spans the panel and its
           caret lands at the right edge, not next to the text. */
        width: 100%;
        padding-left: 14px;
        padding-right: 14px;
        box-sizing: border-box;
    }

    .nav-links a {
        display: block;
        padding: 10px 5px;
        color: white;
        text-decoration: none;
    }

    /* Submenus COLLAPSE on mobile instead of unrolling inline. Expanded by
       default, a dealer's eight-item menu plus the admin menu pushed the theme
       toggle, notifications and account buttons off the bottom of the phone —
       the end of the menu was unreachable. Now each is a section you open.
       These beat the desktop :hover / :focus-within rules by sitting later in
       the file at equal specificity, which also stops a tap on iOS (where tap
       counts as hover) from expanding a menu the accordion just closed. */
    .navbar .dealer-dropdown > .dealer-dropdown-menu,
    .navbar .admin-dropdown > .admin-dropdown-menu {
        display: none;
        position: static;
        border: none;
        padding: 0;
        gap: 12px;
        /* Indented and rule-lined so the sub-items read as belonging to the
           section above them rather than as more top-level links. */
        margin: 4px 0 4px 14px;
        padding-left: 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.25);
        /* Inline inside the panel, which scrolls as a whole: no inner scroll
           region of its own (the desktop max-height above would make one). */
        max-height: none;
        overflow: visible;
    }

    .navbar .dealer-dropdown.is-open > .dealer-dropdown-menu,
    .navbar .admin-dropdown.is-open > .admin-dropdown-menu {
        display: flex;
    }

    /* Pinned to the right edge rather than pushed there by margin: as a flex
       item the caret took up width, so centring the row centred "label +
       caret" and left-shifted the label out of line with the other links. */
    .nav-caret {
        display: inline-block;
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
    }

    .is-open > .dealer-dropdown-toggle .nav-caret,
    .is-open > .admin-dropdown-toggle .nav-caret {
        transform: translateY(-50%) rotate(180deg);
    }

    /* The three-bar glyph says "this opens a menu", which is already what the
       panel it lives in is. On the phone it only pulled "Admin" off centre. */
    .admin-hamburger {
        display: none;
    }

    /* Full-width tap targets: the caret sits hard right of the row rather than
       floating next to the text. */
    .dealer-dropdown,
    .admin-dropdown {
        width: 100%;
    }

    /* Scoped to .nav-links so it outranks `.nav-links a { display: block }`
       above — the dealer toggle is an anchor, and as a block the caret had
       nothing to push against and sat next to the text. */
    .nav-links .dealer-dropdown-toggle,
    .nav-links .admin-dropdown-toggle {
        display: flex;
        align-items: center;
        /* Centred like every other row in the panel; the caret is taken out of
           flow (above) so it cannot shift the label. */
        justify-content: center;
        text-align: center;
        gap: 8px;
        width: 100%;
        padding: 10px 5px;
        position: relative;
    }

    /* Second level of the accordion: the Admin section opens to its six group
       rows, and a tapped group unrolls its entries inline beneath it
       (navbar.js toggles .is-open, one group at a time; nothing opens on
       hover). Everything stays in flow, so the .nav-right panel scrolls as a
       whole; the desktop flyout rules live in the min-width block and never
       apply here. */
    .navbar .admin-dropdown > .admin-dropdown-menu {
        gap: 2px;
    }

    .navbar .admin-group-toggle {
        justify-content: center;
        text-align: center;
        position: relative;
        padding: 10px 24px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0;
    }

    /* Hard right like the section caret above it; turned to point down, and
       up once the group is open. */
    .navbar .admin-group-caret {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
    }

    .navbar .admin-group.is-open > .admin-group-toggle .admin-group-caret {
        transform: translateY(-50%) rotate(270deg);
    }

    .navbar .admin-group > .admin-group-menu {
        position: static;
        margin: 2px 0 4px 10px;
        padding-left: 10px;
        border-left: 1px solid rgba(255, 255, 255, 0.25);
        gap: 10px;
    }

    .listings-dropdown-menu {
        display: flex;
        position: static;
        border: none;
        padding: 0;
    }

    .nav-right {
        display: none; /* Hide by default */
        flex-direction: column; /* Stack items vertically */
        align-items: center;
        justify-content: center;
        width: 300px;
        /* The mobile panel is the same surface as the desktop dropdowns, so it
           takes the same navy — a black panel under a navy bar looked like a
           different element. Theme-independent for the same reason. */
        background-color: #0d1526;
        padding: 0;
        position: absolute;
        align-self: center;
        top: 70px; /* Ensure it aligns under the navbar */
        border: #fff solid 1px;
        /* Last-resort backstop: however many links an account has, the panel
           stops at the bottom of the screen and scrolls inside itself instead
           of running past it. dvh so Safari's collapsing toolbar doesn't hide
           the last row; the vh line above it covers browsers without dvh. */
        max-height: calc(100vh - 90px);
        max-height: calc(100dvh - 90px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-right.show {
        display: flex; /* Show when toggled */
        margin: auto;
        border-radius: 15px;
        
        
    }


    .hamburger {
        display: flex; /* Show hamburger on small screens */
    }


    .nav-buttons {
        display: flex; /* Ensure buttons show when nav-right is visible */
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 10px; /* Add spacing between links and buttons */
        justify-items: center;
        margin: auto;
        padding-top: 10px;
        margin-bottom: 20px;
    }


    .nav-buttons a {
        display: block;
        padding: 10px 20px;
        text-align: center;
        color: white;
        text-decoration: none;
        border-radius: 5px;
    }

    .login-button {
        color: #fcf9f9;
        margin-bottom: 6px;
    }
    
    .SignUp-button {
        
         /* Set line-height for consistent text height */
        display: inline-flex; /* Use inline-flex to avoid block-level behavior */
        align-items: center; /* Center text vertically */
        justify-content: center; /* Center text horizontally */
    }

    
}

.notif-view-all:hover { background: #f0f7ff; }

@media (max-width: 1200px) {
    .notif-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
    }
    .nav-notif {
        margin: 8px auto 0;
    }
}



@media (max-width: 550px) {

    .LogoText {
        font-size: 1.5rem;
    }

}

@media (max-width: 500px) {
    .LogoText {
        font-size: 1rem;
    }
}

@media (max-width: 404px) {

    .AmericanFlagImage {
        display: none;
    }
}


@media (max-width: 370px) {

    .LogoText {
        font-size: .9rem;
    }

    .nav-left {
        justify-content: center;
    }


}

/* Boxed page above 1920px (sitewide.css): the navbar band stays full width,
   but its content lines up with the centred body column. 20px is the normal
   side padding above. */
@media (min-width: 1921px) {
    .navbar {
        /* The base rule sets `position: fixed; top: 0` with no `left`, so the
           bar used its static position, which was 0 while the body filled the
           window and becomes the column's left edge once the body is boxed
           (the bar then started 540px in and ran off the right edge at 3000px).
           Pin it to the window and pad its content in to the column. */
        left: 0;
        padding-left: calc((100% - var(--site-max-width, 1920px)) / 2 + 20px);
        padding-right: calc((100% - var(--site-max-width, 1920px)) / 2 + 20px);
    }
}