/* =============================================================
 * Header pills — Add Your API · Language selector · User menu
 * White pills + subtle border, brand-purple on hover.
 * Palette uses the existing tokens (#693bf5 / black / white).
 * ============================================================= */

:root {
    --hp-brand: #693bf5;
    --hp-brand-soft: #dcd2ff;   /* chip background — more saturated, visible on white */
    --hp-brand-softer: #f1edff; /* hover tint for items */
    --hp-text: #0d0d0d;
    --hp-text-muted: #6b7280;
    --hp-border: #e5e7eb;
    --hp-border-hover: #cdc4ff;
    --hp-bg: #ffffff;
    --hp-online: #22c55e;
    --hp-radius: 999px;
    --hp-shadow: 0 1px 2px rgba(13, 13, 13, 0.04), 0 1px 3px rgba(13, 13, 13, 0.06);
    --hp-shadow-hover: 0 2px 8px rgba(91, 60, 251, 0.18), 0 1px 3px rgba(13, 13, 13, 0.05);
}

/* ---------- Shared pill base ------------------------------- */
.new_nav_items .nav-add-your-api > a.browseApis,
.new_nav_items > li.language-currency-dropdown .lang-curr-trigger,
.new_nav_items .btn-group > button.user-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.95rem !important;
    background: var(--hp-bg) !important;
    border: 1px solid var(--hp-border) !important;
    border-radius: var(--hp-radius) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--hp-text) !important;
    line-height: 1.2 !important;
    box-shadow: var(--hp-shadow) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, color 0.18s ease;
}

/* ---------- "Add Your API" pill ---------------------------- */
.new_nav_items .nav-add-your-api > a.browseApis i.fa-plus {
    color: var(--hp-brand) !important;
    transition: color 0.18s ease;
}

.new_nav_items .nav-add-your-api > a.browseApis:hover {
    background: var(--hp-brand) !important;
    border-color: var(--hp-brand) !important;
    color: #ffffff !important;
    box-shadow: var(--hp-shadow-hover) !important;
}

.new_nav_items .nav-add-your-api > a.browseApis:hover i.fa-plus {
    color: #ffffff !important;
}

/* ---------- Language / currency pill ----------------------- */
.new_nav_items > li.language-currency-dropdown .lang-curr-trigger {
    /* override the original 6px 12px padding so it lines up with the others */
    padding: 0.45rem 0.95rem !important;
}

.new_nav_items > li.language-currency-dropdown .lang-curr-trigger .fa-globe {
    color: var(--hp-brand) !important;
    font-size: 0.95rem;
}

/* Inline-SVG globe: the markup uses .lang-globe-icon (not .fa-globe), and the
   SVG's stroke="currentColor" inherits .world-icon's white default — which
   vanishes on the white hero before the header is "scrolled". Pin it to the
   brand purple so it (a) stays visible on both the white hero and the dark
   scrolled bar, and (b) matches every other header pill icon (the "+" on
   Add Your API and the bolt on Try it for Free) for a unified row. */
.new_nav_items > li.language-currency-dropdown .lang-curr-trigger .lang-globe-icon {
    color: var(--hp-brand) !important;
}

.new_nav_items > li.language-currency-dropdown .lang-curr-trigger .selected-lang-curr {
    color: var(--hp-text) !important;
    font-weight: 500 !important;
}

.new_nav_items > li.language-currency-dropdown:hover .lang-curr-trigger,
.new_nav_items > li.language-currency-dropdown.open .lang-curr-trigger {
    border-color: var(--hp-border-hover) !important;
    box-shadow: var(--hp-shadow-hover) !important;
}

/* ---------- User menu pill (trigger) ----------------------- */
.new_nav_items .btn-group.user-menu > button.user-pill {
    text-transform: none !important;
    max-width: 260px;
}

.new_nav_items .btn-group.user-menu > button.user-pill > label {
    margin: 0;
    color: var(--hp-text) !important;
    font-weight: 500 !important;
    font-size: 0.9rem;
    text-transform: none !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 180px;
    cursor: pointer;
}

.new_nav_items .btn-group.user-menu > button.user-pill::after {
    border-top-color: var(--hp-text-muted);
    margin-left: 0.15rem;
}

.new_nav_items .btn-group.user-menu > button.user-pill:hover,
.new_nav_items .btn-group.user-menu.show > button.user-pill,
.new_nav_items .btn-group.user-menu > button.user-pill[aria-expanded="true"] {
    border-color: var(--hp-border-hover) !important;
    box-shadow: var(--hp-shadow-hover) !important;
}

/* online status dot before the email */
.user-pill-status {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--hp-online);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
    flex-shrink: 0;
}

/* ---------- User dropdown — restyled --------------------- */
.new_nav_items .btn-group.user-menu > .dropdown-menu {
    border: 1px solid var(--hp-border);
    border-radius: 14px;
    padding: 0.4rem !important;
    margin-top: 0.55rem !important;
    box-shadow: 0 14px 32px rgba(13, 13, 13, 0.10),
                0 4px 10px rgba(13, 13, 13, 0.05);
    min-width: 280px;
    background: #ffffff;
}

/* Section headers (FOR CUSTOMERS / FOR PROVIDERS).
   Note the !important on border-radius: new_header.css:424 forces a
   `border-radius: 20px 20px 0 0` on every .dropdown-menu li:first-child,
   which broke the first chip (FOR CUSTOMERS) and left it with a square
   bottom edge. This override keeps every chip uniformly rounded. */
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-section-header,
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-section-header:first-child {
    position: relative;
    background: var(--hp-brand-soft);
    border-radius: 10px !important;
    padding: 0.5rem 0.85rem 0.5rem 1.05rem !important;
    margin: 0.4rem 0.1rem 0.25rem;
    list-style: none;
    overflow: hidden;
}

/* Solid brand-purple accent bar on the left of each section chip */
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-section-header::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 6px;
    width: 3px;
    border-radius: 2px;
    background: var(--hp-brand);
}

.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-section-header > a,
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-section-header > span {
    /* Matches dashboard sidebar .ds-sidenav__group-label: 10px / 600 / 0.12em */
    color: var(--hp-brand) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    cursor: default;
    margin: 0;
    padding: 0 !important;
    background: transparent !important;
    text-decoration: none;
}

/* Item rows — icon + label layout.
   Matches dashboard sidebar .ds-sidenav__item: 14px font / 500 / 12px gap. */
.new_nav_items .btn-group.user-menu > .dropdown-menu .dropdown-item,
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-row > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    color: var(--hp-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background: transparent !important;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

/* Icon column inside an item — muted by default, brand on hover.
   Matches dashboard sidebar: 16px box / 14px glyph. */
.new_nav_items .btn-group.user-menu > .dropdown-menu .menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--hp-text-muted);
    font-size: 14px;
    text-align: center;
    transition: color 0.15s ease;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .dropdown-item:hover,
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-row > a:hover {
    background: var(--hp-brand-softer) !important;
    color: var(--hp-brand) !important;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .dropdown-item:hover .menu-item-icon,
.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-row > a:hover .menu-item-icon {
    color: var(--hp-brand);
}

.new_nav_items .btn-group.user-menu > .dropdown-menu li.menu-row {
    padding: 0 !important;
    list-style: none;
}

/* Divider */
.new_nav_items .btn-group.user-menu > .dropdown-menu hr.menu-divider {
    height: 1px;
    background: var(--hp-border);
    border: 0;
    margin: 0.4rem 0.3rem;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu li > .border {
    display: none; /* hide the legacy w-100 border separators */
}

/* Account-manager card (Martin Pultrone) */
.new_nav_items .btn-group.user-menu > .dropdown-menu .am-card {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.85rem !important;
    margin-top: 0.3rem;
    border-radius: 12px;
    background: #fafafa;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-card:hover {
    background: var(--hp-brand-softer);
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-avatar {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-avatar::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hp-online);
    border: 2px solid #ffffff;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-info {
    flex: 1;
    text-align: left;
    min-width: 0;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hp-text);
    margin: 0;
    line-height: 1.2;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-info h6 {
    font-size: 0.72rem;
    color: var(--hp-text-muted);
    margin: 0;
    line-height: 1.3;
}

.new_nav_items .btn-group.user-menu > .dropdown-menu .am-icon {
    width: 16px;
    height: 16px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ---------- Mobile language selector --------------------- */
.new_navbar-responsive .language-currency-dropdown {
    display: flex;
    justify-content: center;
    width: 100%;
}

.new_navbar-responsive .language-currency-dropdown .lang-curr-trigger {
    background: var(--hp-bg) !important;
    border: 1px solid var(--hp-border) !important;
    border-radius: var(--hp-radius) !important;
    padding: 0.55rem 1.1rem !important;
    box-shadow: var(--hp-shadow);
    font-size: 0.9rem;
    color: var(--hp-text) !important;
    gap: 0.5rem;
}

.new_navbar-responsive .language-currency-dropdown .lang-curr-trigger .fa-globe {
    color: var(--hp-brand) !important;
}

/* Inline-SVG globe (mobile) — same brand purple as desktop so the icon set
   stays unified inside the burger menu too. */
.new_navbar-responsive .language-currency-dropdown .lang-curr-trigger .lang-globe-icon {
    color: var(--hp-brand) !important;
}

.new_navbar-responsive .language-currency-dropdown .lang-curr-trigger .selected-lang-curr {
    color: var(--hp-text) !important;
    font-weight: 500 !important;
}

/* Mobile "Add Your API" — match pill radius */
.new_navbar-responsive .nav-add-your-api-mobile > a.login-button {
    border-radius: var(--hp-radius) !important;
}

/* ---------- Defensive overrides ------------------------- */
/* Some parent rules force the Add-Your-API link to black on certain
   landing pages via inline style. The hover/idle colors are already
   handled above; this just prevents the link from inheriting an
   underline or being washed out by global anchor styles. */
.new_nav_items .nav-add-your-api > a.browseApis,
.new_nav_items .nav-add-your-api > a.browseApis:visited {
    text-decoration: none !important;
}

/* =============================================================
 * Auth pills — LOG IN + TRY FOR FREE
 * Match the SIZE / TYPOGRAPHY / SHADOW of the other header pills
 * (Add Your API · language selector · user pill) so the whole
 * navbar reads as one consistent row.
 * Visual identity is preserved on purpose:
 *   · login-button keeps its outlined look
 *   · register-btn keeps the solid black CTA
 * Only padding / font-size / weight / line-height / shadow are
 * unified here — colors / borders / backgrounds stay in
 * new_header.css.
 * ============================================================= */
.new_nav_items > li > a.login-button,
.new_nav_items > li > a.register-btn {
    padding: 0.45rem 0.95rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    box-shadow: var(--hp-shadow) !important;
}

.new_nav_items > li > a.login-button:hover,
.new_nav_items > li > a.register-btn:hover {
    box-shadow: var(--hp-shadow-hover) !important;
}

/* Unify the remaining pill icons to brand purple — both desktop and the mobile
   burger menu. Covers the "Log in" arrow and the mobile "Add Your API" plus
   (which reuses .login-button styling). The fa-search on the mobile "Browse
   APIs" pill is intentionally excluded so only the targeted icons change. */
.login-button i.fa-sign-in-alt,
.login-button i.fa-plus {
    color: var(--hp-brand) !important;
}