/* ---------------------------------------------------------------------------
   Quaker brand faces.

   These are declared against paths inside the plugin rather than against the
   Hub's own asset URLs: the panel renders on WordPress origins, so linking to
   the Laravel host would need CORS on the font files and would break whenever
   Vite rehashes the built filename.

   The three files now ship in assets/fonts/, copied from the Hub repo's
   public/fonts/ (not resources/assets/fonts/, where an earlier version of this
   note sent people looking):

       AvenirLTStd-Book.woff2
       TradeGothicLT.woff2
       TradeGothicLT-Bold.woff2

   They were missing for several releases, and every page load asked for all
   three and got three 404s - harmless to the layout, since the stack falls back
   to system fonts, but it meant the panel never looked like Quaker and it put
   three failed requests in every visitor's console. Keep them with the plugin;
   do not repoint these at the Hub.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'Avenir LT Std 45 Book';
    src: url('../fonts/AvenirLTStd-Book.woff2') format('woff2');
    font-weight: 400 500;
    font-display: swap;
}

@font-face {
    font-family: 'Trade Gothic LT';
    src: url('../fonts/TradeGothicLT.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Trade Gothic LT';
    src: url('../fonts/TradeGothicLT-Bold.woff2') format('woff2');
    font-weight: 600 700;
    font-display: swap;
}

/**
 * Quaker Hub SSO - Complete Styles
 * Matches mockup-dropdown-ui.html exactly
 *
 * @package QuakerHubClientSSO
 */

/* ========================================
   LOGIN MODAL STYLES
   ======================================== */

   .modal.show {
    visibility: visible !important;
    opacity: 1 !important;
}

.px-modal-container .modal-dialog.modal-dialog-centered {
    width: 530px !important;
    max-width: 100%;
}
a.px-link-title {
    padding: 14px 0px !important;
}
.px-mark-all-read:hover {
    color: #000;
    background: lightgray !important;
}
.px-modal-container.modal {
    background: none;
}

.px-modal-container .modal-body {
    max-height: 100% !important;
    width: unset !important;
    padding: 0;
    max-width: 100%;
}

.px-modal-container .modal-content {
    border-radius: 8px;
    overflow: hidden;
    border: none;
}
.mobile-menu-login .elementor-widget-wrap.elementor-element-populated .px-login-button-link {
    margin: 0;
}
.mobile-menu-login .elementor-widget-wrap.elementor-element-populated .px-login-button-link .elementor-button {
    padding: 5px;
    margin-top: 6px;
    font-weight: 500;
}
.mobile-menu-login  .px-login-button-link .elementor-button .elementor-button-icon {
    position: relative;
    top: -2px;
}

.px-modal-container .px-form p {
    margin: 0 0 10px 0;
    padding: 0;
}

.px-modal-container .px-content-box {
    padding: 40px 125px;
}

#pxLoginModal p {
    margin-left: 0 !important;
}

.px-content-box .title_text h4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.px-content-box .px-sub-title {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 0.02em;
    color: rgba(0, 0, 0, 0.6);
}

.px-modal-container .px-form label {
    font-style: normal;
    font-weight: 700 !important;
    font-size: 14px !important;
    line-height: 15px;
    letter-spacing: 0.02em;
}

.px-modal-container .px-form .input {
    border: 1px solid rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 13px;
    letter-spacing: 0.02em;
    padding: 9px 10px;
}

.px-modal-container .px-form .input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.px-modal-container .forgetmenot {
    margin-top: 7px;
    display: flex;
    flex-wrap: wrap;
    /* Only "Forgot Password?" is left in this row, kept on the right where it sat
       beside the removed Remember Me checkbox. */
    justify-content: flex-end;
    font-size: 11px;
    color: #343840;
}

.px-modal-container .px-legal-note {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    color: #343840;
}

.px-modal-container .px-legal-note a,
.px-my-account-box .px-legal-links a {
    color: inherit;
    text-decoration: underline;
}

.px-my-account-box .px-save-full {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 6px 12px 0;
    font-size: 11px;
    line-height: 1.4;
    color: #343840;
}

.px-my-account-box .px-legal-links {
    padding: 8px 12px;
    font-size: 11px;
    text-align: center;
    color: #343840;
}

.px-modal-container .forgetmenot a {
    color: #343840;
    font-weight: 700;
}

.px-modal-container .submit #wp-submit {
    width: 100%;
    background: #000000 !important;
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 15px;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    margin: 0;
    border: none;
}

.px-modal-container .submit #otp-submit {
    width: 100%;
    background: #000000 !important;
    border-radius: 4px;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: .02em;
    color: #FFF;
    margin: 0;
    border: none;
}

.px-modal-container .px-form label.error {
    font-size: 11px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #dc2626;
    font-weight: 500;
}

.px-modal-container .signup-section {
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
    color: rgba(0, 0, 0, 0.7);
}

.px-modal-container .signup-section .text-info {
    font-weight: 400;
    color: #000 !important;
    font-size: 14px;
}

.api-error {
    font-weight: 400;
    color: #dc2626 !important;
    font-size: 14px;
    display: none;
    margin: 0;
}

.api-success {
    font-weight: 400;
    color: #00a000 !important;
    font-size: 14px;
    display: none;
    margin: 0;
}

.resend-otp-link {
    font-size: 11px;
    color: #343840;
    text-decoration: underline;
    cursor: pointer;
}

.resend-otp-link:hover {
    color: #000;
}

/* While sending and during the countdown the link does nothing; look like it. */
.resend-otp-link.px-resend-waiting,
.resend-otp-link.px-resend-waiting:hover {
    color: rgba(0, 0, 0, 0.5);
    text-decoration: none;
    cursor: default;
}

/* The resend result, under the resend link rather than above the input. */
.px-resend-status {
    display: none;
    margin: -8px 0 12px;
    font-size: 12px;
    text-align: center;
}

.px-resend-status.px-resend-sent {
    color: #00a000;
}

.px-resend-status.px-resend-failed {
    color: #dc2626;
}

.resend-otp-link:disabled {
    color: #5c677c;
    cursor: not-allowed;
    text-decoration: none;
}

/* ========================================
   USER BUTTON & DROPDOWN CONTAINER
   ======================================== */

.px-login-btn-box {
    position: relative;
    z-index: 100;
}

.px-login-btn-box .px-login-button-link,
.px-login-btn-box .px-user-button-link {
    background: transparent !important;
    font-weight: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
}

.px-user-button-link {
    position: relative;
    display: flex;
    gap: 5px;
    cursor: pointer;
}

.px-user-button-link:hover {
    background: none !important;
}

a.px-login-button-link,
a.px-user-button-link {
    display: flex;
    gap: 5px;
    text-decoration: none;
}

.px-login-button-link svg path,
.px-user-button-link svg path {
    fill: #fff;
}

.unread-badge {
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 2px;
    right: -12px;
    padding: 0 4px;
    box-sizing: border-box;
    line-height: 1;
    pointer-events: none;
}

/* Mobile: overlay the badge on the user-icon SVG. The button itself has
   position:relative so we anchor to its top-left corner and nudge onto the
   13px icon. Desktop overrides below place the badge at the top-right of
   the whole trigger (past the username text). */
.px-user-button-link .px-notification-badge {
    top: -6px;
    right: auto;
    left: 8px;
}

@media (min-width:1500px) {
    .px-user-button-link .px-notification-badge {
        top: -8px;
        right: -10px;
        left: auto;
    }
	
}
@media (min-width: 768px) {
    .px-user-button-link .px-notification-badge {
        top: 4px;
        right: -4px;
        left: auto;
    }
}
/* DROPDOWN CONTAINER */
.px-my-account-box {
    position: absolute;
    top: 28px;
    right: 0px;
    width: 420px;
    background: #fff !important;
    box-shadow: 0px 10px 14px rgba(0, 0, 0, 0.25);
    z-index: 100;
    display: none !important;
    border-radius: 8px;
    /* Quaker's own faces, with the previous system stack kept as the fallback
       so the panel degrades to exactly its old rendering if the woff2 files
       are not present alongside the plugin. */
    font-family: 'Trade Gothic LT', 'Avenir LT Std 45 Book', -apple-system,
                 BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1f2328 !important;
}

/* Arrow */
.px-my-account-box::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 22px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.06);
    z-index: -1;
}

/* Class-driven open state. This is the opener that works for keyboard, for
   Android touch, and for assistive tech - none of which can produce :hover.
   Before this, the CSS rule below was the ONLY way to open the panel, so the
   whole menu was unreachable without a mouse. */
.px-my-account-box.is-open {
    display: block !important;
}

/* Hover is kept, but only as a pointer enhancement. Gating it means a touch
   device's synthetic hover can no longer pin the panel open after a
   back-navigation, which is what happened on iPad. */
@media (hover: hover) and (pointer: fine) {
    .px-user-button-link:hover + .px-my-account-box,
    .px-my-account-box:hover {
        display: block !important;
    }
}

/* The trigger is focusable but had no focus style of its own. */
.px-user-button-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 43, 102, 0.35);
    border-radius: 4px;
}

.px-my-account-box.disable {
    display: none !important;
}

/* ========================================
   TABS NAVIGATION
   ======================================== */

.px-dropdown-tabs {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa !important;
    border-radius: 4px 4px 0 0;
}

.px-tab-nav {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.px-dropdown-tab {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: none !important;
    font-size: 14px;
    font-weight: 600;
    /* Sentence case: caps are reserved for badges and section eyebrows. */
    text-transform: none;
    letter-spacing: 0.5px;
    color: #5c677c !important;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
    text-decoration: none !important;
    text-align: center;
    font-family: inherit;
    outline: none;
}

.px-dropdown-tab:hover {
    color: #343840 !important;
    background: none !important;
    text-decoration: none !important;
}

/* Focus is shown by the colour shift alone; the inset ring was dropped. */
.px-dropdown-tab:focus-visible {
    outline: none;
    color: #042b66 !important;
    box-shadow: none;
}

.px-dropdown-tab.active {
    color: #042b66 !important;
    background: none !important;
}

.px-dropdown-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background: #042b66;
    border-radius: 4px 4px 0 0;
}

.px-tab-badge {
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
}

/* ========================================
   TAB PANELS
   ======================================== */

/* Override any theme styles on tab content divs */
.elementor-nav-menu--main .px-tab-content,
.elementor-nav-menu .px-tab-content,
.px-tab-content {
    display: none !important;
    position: static !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.elementor-nav-menu--main .px-tab-content.active,
.elementor-nav-menu .px-tab-content.active,
.px-tab-content.active {
    display: block !important;
}

/* ========================================
   SITES TAB (Welcome Section)
   ======================================== */

/* Override any theme styles on welcome section */
.elementor-nav-menu--main .px-welcome-section,
.elementor-nav-menu .px-welcome-section,
.px-welcome-section {
    text-align: center !important;
    padding: 20px 20px 15px !important;
    background: #fff !important;
    border-bottom: 1px solid #eee !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
}

.px-welcome-section h4 {
    font-family: 'Avenir LT Std 45 Book', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #1a1a2e !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-family: inherit;
}

.px-welcome-section p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.55) !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
}

.px-welcome-section h5 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #343840 !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* Site Grid */
/* Override theme's .elementor-nav-menu ul display:none and other conflicting styles */
.elementor-nav-menu--main .elementor-nav-menu .px-site-grid,
.elementor-nav-menu .px-site-grid,
.px-site-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

.px-site-item {
    width: calc(50% - 5px) !important;
    height: 72px;
    border: 1px solid #cfd8e3 !important;
    border-radius: 8px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
    padding: 12px !important;
    background: #fff !important;
    box-sizing: border-box;
}

.px-site-item:hover,
.px-site-item:focus-within {
    border-color: #042b66 !important;
    background: #f8f9fc !important;
}

.px-site-item.px-active-site {
    border-color: #042b66 !important;
    background: #f8f9fc !important;
    cursor: default;
}

/* The current site is not a link, so it must not hover like one. */
.px-site-item.px-active-site:hover,
.px-site-item.px-active-site:focus-within {
    border-color: #042b66 !important;
    background: #f8f9fc !important;
}

/* The arrow now marks the tiles that actually navigate, not the dead one. */
.px-site-item:not(.px-active-site)::after {
    content: '\2192';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #042b66;
    opacity: 0;
    transition: opacity 0.2s;
}

.px-site-item:not(.px-active-site):hover::after,
.px-site-item:not(.px-active-site):focus-within::after {
    opacity: 1;
}

/* Says "this one is you are here" in words rather than by dimming everything else. */
.px-site-current-label {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: #5c677c;
}


.px-site-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    gap: 3px;
    overflow: hidden;
}

.px-current-site {
    cursor: default;
}

/* These rules were written when the logo was the tile's only content and were
   never exercised. The tile is 72px tall with 12px padding, so the logo now has
   to share ~48px with the site name and the "You're here" label. */
.px-site-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
}

.px-site-logo {
    max-width: 120px;
    max-height: 22px;
    object-fit: contain;
    display: block;
}

.px-site-logo-placeholder {
    font-size: 11px;
    font-weight: 700;
    color: #343840 !important;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

.px-site-logo-placeholder span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #5c677c !important;
    margin-top: 2px;
}

.px-site-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* height: 100% was fine when the name was the tile's only child; with a
       logo above it, it has to size to its content instead. */
    height: auto;
    font-size: 11px;
    font-weight: 700;
    color: #343840 !important;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.5px;
    /* Casing belongs here rather than baked into the DOM by toUpperCase(),
       which makes screen readers spell the name out letter by letter. */
    text-transform: uppercase;
}

/* ========================================
   NOTIFICATIONS TAB
   ======================================== */

/* Override any theme styles on wrapper divs */
.elementor-nav-menu--main .px-notifications-wrapper,
.elementor-nav-menu .px-notifications-wrapper,
.px-notifications-wrapper {
    max-height: 340px !important;
    overflow-y: auto !important;
    position: static !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override theme's .elementor-nav-menu ul display:none and other conflicting styles */
.elementor-nav-menu--main .elementor-nav-menu .px-notifications-list,
.elementor-nav-menu .px-notifications-list,
.px-notifications-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: 100% !important;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

.px-notification-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
    border-left: none;
}

.px-notification-item:hover {
    background: #f8f9fc;
}

/* The 3px navy left rule was removed from this design system in August 2026 as
   a generic-AI tell, and DESIGN.md bans it by name. The markup already renders
   a .px-notif-dot per unread row, so the tint plus the dot carry the state and
   read/unread rows now align on the same left edge. */
.px-notification-item.unread {
    background: #f2f7ff;
}

.px-notification-item.unread:hover {
    background: #e8eefb;
}

.px-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #042b66;
    margin-top: 5px;
    flex-shrink: 0;
}

.px-notif-dot.read {
    background: transparent;
}

.px-notif-content {
    flex: 1;
}

.px-notif-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2328;
    margin: 0 0 3px 0;
    line-height: 1.3;
}

.px-notif-message {
    font-size: 11px !important;
    color: #474749 !important;
    line-height: 1.4 !important;
    margin: 0 0 4px 0 !important;
    /* 2-line truncation with ellipsis */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-word !important;
}

/* Wrapper so the toggle can overlay the last line of the clamped message */
.px-notif-msg-wrap {
    position: relative;
    margin: 0 0 4px 0;
}

.px-notif-msg-wrap .px-notif-message {
    margin: 0 !important;
}

/* Expand toggle — hidden unless the row has more content (.has-more) */
.px-notif-msg-wrap .px-notif-toggle {
    /* Aggressive theme reset — WP themes style generic <button> */
    all: unset;
    display: none !important;
    box-sizing: border-box;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: #042b66 !important;
    cursor: pointer;
    background: transparent !important;
    border: none;
}

/* Collapsed + truncated: overlay button at bottom-right of the 2-line box
   with a white fade behind it so it sits inline on line 2 instead of adding a 3rd line */
.px-notification-item.has-more:not(.expanded) .px-notif-toggle {
    display: inline-flex !important;
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 28px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 20%);
}

/* Unread rows have a blueish tint — match the fade color */
.px-notification-item.px-unread.has-more:not(.expanded) .px-notif-toggle,
.px-notification-item.unread.has-more:not(.expanded) .px-notif-toggle {
    background: linear-gradient(90deg, rgba(249, 251, 255, 0) 0%, #f9fbff 20%);
}

/* Reserve a gutter at the right of the clamped preview so line 2 wraps
   before the absolutely-positioned Show more button. Without this, a
   preview that happens to fill the full line will render text behind
   the button label. */
.px-notification-item.has-more:not(.expanded) .px-notif-message {
    padding-right: 90px;
}

/* Expanded: button flows below the full message */
.px-notification-item.has-more.expanded .px-notif-toggle {
    display: inline-flex !important;
    position: static;
    margin-top: 4px;
}

.px-notif-toggle:hover,
.px-notif-toggle:focus {
    color: #031a4d;
    text-decoration: none;
    outline: none;
}

.px-notif-toggle:hover .px-notif-toggle-label,
.px-notif-toggle:focus .px-notif-toggle-label {
    text-decoration: underline;
}

.px-notif-toggle:focus-visible {
    outline: 2px solid #042b66;
    outline-offset: 2px;
    border-radius: 4px;
}

.px-notif-toggle-icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.15s ease;
    text-decoration: none !important;
}

.px-notification-item.expanded .px-notif-toggle-icon {
    transform: rotate(180deg);
}

.px-notification-item.expanded .px-notif-message {
    display: block !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.px-notif-time {
    font-size: 11px;
    color: #5c677c;
    margin: 0;
}

.px-notif-link {
    margin-top: 8px;
}

/* Hide the View button when the notification is truncated but not expanded.
   Non-truncated items and expanded-truncated items keep showing it. Pairs
   with the `.expanded` toggled by the Show more/Show less handler. */
.px-notification-item.has-more:not(.expanded) .px-notif-link {
    display: none;
}

.px-notif-button,
a.px-notif-button {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1 !important;
    color: #ffffff !important;
    background-color: #042b66;
    border: 1px solid #042b66;
    border-radius: 4px;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.px-notif-button:hover,
a.px-notif-button:hover,
.px-notif-button:focus,
a.px-notif-button:focus {
    background-color: #031a4d !important;
    border-color: #031a4d !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.px-notif-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.px-footer-link {
    font-size: 11px;
    color: #042b66;
    text-decoration: none;
    font-weight: 600;
}

.px-footer-link:hover {
    text-decoration: underline;
}

.px-mark-all-read {
    font-size: 11px;
    color: #042b66 !important;
    cursor: pointer !important;
    border: none;
    background: none !important;
    font-weight: 500;
    font-family: inherit;
}

/* ========================================
   MY LINKS TAB
   ======================================== */

/* Override any theme styles on wrapper divs */
.elementor-nav-menu--main .px-saved-links-wrapper,
.elementor-nav-menu .px-saved-links-wrapper,
.px-saved-links-wrapper {
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: static !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override theme's .elementor-nav-menu ul display:none and other conflicting styles */
.elementor-nav-menu--main .elementor-nav-menu .px-saved-links-list,
.elementor-nav-menu .px-saved-links-list,
.px-saved-links-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    width: 100% !important;
    border: none !important;
    border-style: none !important;
    border-width: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

.px-saved-link-item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: grab;
    transition: background 0.15s;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.px-saved-link-item:hover {
    background: #f8f9fc;
}

.px-drag-handle {
    color: #6b7280;
    font-size: 14px;
    cursor: grab;
    flex-shrink: 0;
}

.px-link-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.px-link-title {
    font-size: 14px;
    font-weight: 500;
    color: #1f2328;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-decoration: none;
    max-width: 100%;
    display: block;
}

.px-link-title:hover {
    text-decoration: underline;
}

.px-link-site-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    background: #042b66;
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}
.px-link-site-badge.px-badge-hub { background: #042b66; }
/* These four were Material Design's Green 800, Blue 800, Purple 800 and
   Orange 900, lifted as a set - four unrelated hues doing decorative work in a
   system whose only accent is Quaker Navy. The badge already carries the
   division name, so the word is the differentiator and the colour does not
   need to be. Navy on Tint Plate, one voice. */
.px-link-site-badge.px-badge-residential,
.px-link-site-badge.px-badge-commercial,
.px-link-site-badge.px-badge-quartz,
.px-link-site-badge.px-badge-corporate {
    background: #f2f7ff;
    color: #042b66;
    border: 1px solid #cfd8e3;
}

    .px-link-delete {
        opacity: 0;
        color: #dc2626 !important;
        cursor: pointer !important;
        font-size: 18px;
        line-height: 1;
        transition: opacity 0.15s;
        border: none !important;
        background: none !important;
        padding: 4px !important;
        flex-shrink: 0;
    }
.px-link-delete:hover {
    background-color: transparent!important;
    color: #dc2626 !important;
}
/* Was `opacity: 0` until row-hover, which made it permanently invisible on
   touch - saved links simply could not be removed on a phone or tablet. It now
   rests visible but quiet, and strengthens on hover/focus. */
.px-link-delete {
    opacity: 0.55 !important;
}

.px-link-delete:hover,
.px-link-delete:focus-visible {
    opacity: 1 !important;
}

.px-link-delete:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(4, 43, 102, 0.15);
    border-radius: 4px;
}

.px-saved-link-item:focus-within .px-link-delete,
.px-saved-link-item:hover .px-link-delete {
    opacity: 1;
}

.px-links-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid #eee;
    background: #fafafa;
}

.px-link-count {
    font-size: 11px;
    color: #5c677c;
}

/* ========================================
   ACTION BAR
   ======================================== */

.px-action-bar {
    display: flex;
    border-top: 1px solid #e5e5e5;
    background: #fafafa !important;
    border-radius: 0 0 4px 4px;
}

.px-action-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 12px 8px;
    border: none;
    background: none !important;
    cursor: pointer;
    color: #343840 !important;
    font-size: 11px;
    font-weight: 600;
    /* Sentence case, per the Uppercase Restraint Rule. */
    text-transform: none;
    letter-spacing: 0;
    transition: color 0.15s, background 0.15s;
    border-right: 1px solid #eee;
    font-family: inherit;
    outline: none;
    text-decoration: none;
}

/* Logout is the only irreversible cell in this row and used to be visually
   identical to its three neighbours, 105px from Save Page.
   The separation is carried by a little air before the cell, NOT by a second
   border: every .px-action-btn already draws its own border-right, so adding a
   border-left here painted two lines with a gap between them - which read as a
   stray blue rule and made the cell look detached. One line, one gap, and the
   four cells keep equal widths. */
/* .px-action-btn.px-logout {
    margin-left: 6px;
} */

/* The divider that matters is the one before Logout; it is simply the border
   Save Page already owns, so nothing extra is drawn. */
.px-action-btn.px-save-this-page {
    border-right: 1px solid #cfd8e3;
}

/* No line down the panel's right edge. */
.px-action-btn:last-child {
    border-right: none;
}

/* Armed state for the two destructive controls. Amber is the system's
   attention colour and is reserved for exactly this. */
.px-action-btn.is-armed,
.px-link-delete.is-armed {
    color: #b54708 !important;
    background: #fffaeb !important;
}

.px-link-delete.is-armed {
    opacity: 1;
}

/* Pairs with the `outline: none` above. */
.px-action-btn:focus-visible {
    outline: none;
    color: #042b66 !important;
    box-shadow: inset 0 0 0 3px rgba(4, 43, 102, 0.15);
}

.px-action-btn span {
    color: inherit;
}

.px-action-btn:last-child {
    border-right: none;
}

.px-action-btn:hover {
    background: #f0f0f0 !important;
    color: #042b66 !important;
}

.px-action-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Prevent pseudo-element duplication from theme/plugin conflicts */
.px-action-btn::before,
.px-action-btn::after,
.px-action-btn span::before,
.px-action-btn span::after {
    content: none !important;
    display: none !important;
}

.px-action-btn.px-save-active {
    color: #042b66 !important;
}

/* ========================================
   LOADING & EMPTY STATES
   ======================================== */

.px-notifications-loading,
.px-saved-links-loading,
.px-site-loading {
    text-align: center;
    padding: 20px;
    color: #5c677c;
    font-size: 11px;
    width: 100%;
    flex: 0 0 100%;
}

.px-notifications-loading:after,
.px-saved-links-loading:after,
.px-site-loading:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #042b66;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

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

.px-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #5c677c;
}

.px-empty-state p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.px-no-items,
.px-no-sites,
.px-error {
    text-align: center;
    padding: 20px;
    color: #5c677c;
    font-size: 11px;
    width: 100%;
    flex: 0 0 100%;
}

.px-error {
    color: #dc2626 !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */

.px-notifications-wrapper::-webkit-scrollbar,
.px-saved-links-wrapper::-webkit-scrollbar {
    width: 4px;
}

.px-notifications-wrapper::-webkit-scrollbar-thumb,
.px-saved-links-wrapper::-webkit-scrollbar-thumb {
    background: #cfd8e3;
    border-radius: 4px;
}

/* ========================================
   MOBILE RESPONSIVE
   ======================================== */

.px-my-account-mobile-link {
    display: none;
}

@media only screen and (max-width: 767px) {
    .px-modal-container .px-content-box {
        padding: 40px 35px;
    }

    .px-modal-container .modal-dialog.modal-dialog-centered {
        width: auto !important;
    }

    .px-my-account-box {
        width: calc(100vw - 40px);
        right: 20px;
    }

    .px-welcome-section {
        padding: 15px;
    }

    .px-my-account-mobile-link.active {
        display: block;
    }

    .px-site-grid {
        gap: 8px;
    }

    .px-site-item {
        height: 60px;
        padding: 8px !important;
    }

    .px-action-btn {
        font-size: 11px;
        padding: 10px 6px;
    }

    .px-action-btn svg {
        width: 14px;
        height: 14px;
    }
}
@media(max-width:1024px){
    .px-my-account-box {
            position: absolute;
            top: 42px;
                right: -40px;
        }
     .px-my-account-box::before {
            top: -6px;
            right: 42px;
        }
    .px-link-site-badge {
            line-height: normal !important;
        }
     .px-user-button-link {
                font-size: 0 !important;
            }
     .px-user-button-link svg {
                font-size: initial!important;
            }
    .mobile-menu-login .px-menu-item-login,.mobile-menu-login  .px-login-button-link {
        position: absolute;
        right: 60px;
        z-index:1;
    }
    }

/* ========================================
   DARK MODE - DISABLED FOR DROPDOWN
   ========================================

   The dropdown always uses light mode colors to match the mockup,
   regardless of the page's dark mode setting.
   All dark mode styles have been removed to ensure consistency.

   ======================================== */