/* EdBirds — public design tokens (align with Tailwind theme). */
:root {
    /* Brand: #1E2A38 · #2A9D8F · #E0F2F1 · #EE9C46 (+ neutrals below) */
    --brand-ink: #1e2a38;
    --brand-primary: #2a9d8f;
    --brand-primary-deep: #20766c;
    --brand-mint: #e0f2f1;
    --brand-accent: #ee9c46;
    --brand-charcoal: #1e2a38;
    --brand-slate: #6b7280;
    --surface-base: #f3f4f6;
    --surface-panel: #ffffff;

    /* Main site header / nav (shp-*) */
    --shp-header-h: 4.25rem;
    --shp-ink: var(--brand-ink);
    --shp-primary: var(--brand-primary);
    --shp-primary-dark: var(--brand-primary-deep);
    --shp-muted: var(--brand-slate);
    --shp-border: #e5e7eb;
    --shp-nav-bg: rgba(255, 255, 255, 0.92);
    --shp-z-backdrop: 1000;
    --shp-z-drawer: 1010;
    --shp-z-dropdown: 1020;
}


/**
* @license
*
* Font Family: General Sans
* Designed by: Frode Helland
* URL: https://www.fontshare.com/fonts/general-sans
* © 2026 Indian Type Foundry
*
* General Sans Extralight 
* General Sans ExtralightItalic 
* General Sans Light 
* General Sans LightItalic 
* General Sans Regular 
* General Sans Italic 
* General Sans Medium 
* General Sans MediumItalic 
* General Sans Semibold 
* General Sans SemiboldItalic 
* General Sans Bold 
* General Sans BoldItalic 
* General Sans Variable (Variable font)
* General Sans VariableItalic (Variable font)

*
*/
@font-face {
    font-family: 'GeneralSans-Extralight';
    src: url('../fonts/GeneralSans-Extralight.woff2') format('woff2'),
         url('../fonts/GeneralSans-Extralight.woff') format('woff'),
         url('../fonts/GeneralSans-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'GeneralSans-ExtralightItalic';
    src: url('../fonts/GeneralSans-ExtralightItalic.woff2') format('woff2'),
         url('../fonts/GeneralSans-ExtralightItalic.woff') format('woff'),
         url('../fonts/GeneralSans-ExtralightItalic.ttf') format('truetype');
    font-weight: 200;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: 'GeneralSans-Light';
    src: url('../fonts/GeneralSans-Light.woff2') format('woff2'),
         url('../fonts/GeneralSans-Light.woff') format('woff'),
         url('../fonts/GeneralSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'GeneralSans-LightItalic';
    src: url('../fonts/GeneralSans-LightItalic.woff2') format('woff2'),
         url('../fonts/GeneralSans-LightItalic.woff') format('woff'),
         url('../fonts/GeneralSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: 'GeneralSans-Regular';
    src: url('../fonts/GeneralSans-Regular.woff2') format('woff2'),
         url('../fonts/GeneralSans-Regular.woff') format('woff'),
         url('../fonts/GeneralSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'GeneralSans-Italic';
    src: url('../fonts/GeneralSans-Italic.woff2') format('woff2'),
         url('../fonts/GeneralSans-Italic.woff') format('woff'),
         url('../fonts/GeneralSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: 'GeneralSans-Medium';
    src: url('../fonts/GeneralSans-Medium.woff2') format('woff2'),
         url('../fonts/GeneralSans-Medium.woff') format('woff'),
         url('../fonts/GeneralSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'GeneralSans-MediumItalic';
    src: url('../fonts/GeneralSans-MediumItalic.woff2') format('woff2'),
         url('../fonts/GeneralSans-MediumItalic.woff') format('woff'),
         url('../fonts/GeneralSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: 'GeneralSans-Semibold';
    src: url('../fonts/GeneralSans-Semibold.woff2') format('woff2'),
         url('../fonts/GeneralSans-Semibold.woff') format('woff'),
         url('../fonts/GeneralSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'GeneralSans-SemiboldItalic';
    src: url('../fonts/GeneralSans-SemiboldItalic.woff2') format('woff2'),
         url('../fonts/GeneralSans-SemiboldItalic.woff') format('woff'),
         url('../fonts/GeneralSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
    font-style: italic;
  }
  @font-face {
    font-family: 'GeneralSans-Bold';
    src: url('../fonts/GeneralSans-Bold.woff2') format('woff2'),
         url('../fonts/GeneralSans-Bold.woff') format('woff'),
         url('../fonts/GeneralSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
  }
  @font-face {
    font-family: 'GeneralSans-BoldItalic';
    src: url('../fonts/GeneralSans-BoldItalic.woff2') format('woff2'),
         url('../fonts/GeneralSans-BoldItalic.woff') format('woff'),
         url('../fonts/GeneralSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: italic;
  }
  /**
  * This is a variable font
  * You can control variable axes as shown below:
  * font-variation-settings: wght 700.0;
  *
  * available axes:
  'wght' (range from 200.0 to 700.0
  */
  @font-face {
    font-family: 'GeneralSans-Variable';
    src: url('../fonts/GeneralSans-Variable.woff2') format('woff2'),
         url('../fonts/GeneralSans-Variable.woff') format('woff'),
         url('../fonts/GeneralSans-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
  }
  /**
  * This is a variable font
  * You can control variable axes as shown below:
  * font-variation-settings: wght 700.0;
  *
  * available axes:
  'wght' (range from 200.0 to 700.0
  */
  @font-face {
    font-family: 'GeneralSans-VariableItalic';
    src: url('../fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
         url('../fonts/GeneralSans-VariableItalic.woff') format('woff'),
         url('../fonts/GeneralSans-VariableItalic.ttf') format('truetype');
    font-weight: 200 700;
    font-display: swap;
    font-style: italic;
  }
  
  

body {
    font-family: 'GeneralSans-Variable', 'GeneralSans-Regular', sans-serif;
    background: var(--surface-base);
    color: var(--brand-charcoal);
}

.font-display {
    font-family: 'GeneralSans-Variable', 'GeneralSans-Regular', sans-serif;
}

.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Shared public layout rhythm */
.section-public {
    padding-top: clamp(3.5rem, 6vw, 6rem);
    padding-bottom: clamp(3.5rem, 6vw, 6rem);
}

.section-tight {
    padding-top: clamp(2.25rem, 4vw, 3.5rem);
    padding-bottom: clamp(2.25rem, 4vw, 3.5rem);
}

.hero-surface {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #e5e7eb;
    background:
        radial-gradient(ellipse 120% 90% at 50% -25%, rgba(42, 157, 143, 0.12), transparent 58%),
        radial-gradient(circle at 12% 20%, rgba(238, 156, 70, 0.08), transparent 40%),
        radial-gradient(circle at 88% 18%, rgba(30, 42, 56, 0.06), transparent 38%),
        radial-gradient(circle at 50% 100%, rgba(42, 157, 143, 0.05), transparent 45%),
        var(--surface-panel);
}

.badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(42, 157, 143, 0.28);
    background: rgba(224, 242, 241, 0.9);
    padding: 0.32rem 0.8rem;
    color: var(--brand-primary-deep);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brand-primary);
}

.public-title {
    letter-spacing: -0.03em;
    line-height: 1.08;
    color: var(--brand-charcoal);
}

.public-body {
    color: #6b7280;
    line-height: 1.7;
}

.public-card {
    border-radius: 1.25rem;
    border: 1px solid #e5e7eb;
    background: var(--surface-panel);
    box-shadow: 0 14px 28px -22px rgba(35, 31, 32, 0.18);
}

.public-card-muted {
    border-radius: 1.25rem;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
}

.btn-public-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--brand-primary);
    padding: 0.72rem 1.45rem;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    transition: background 180ms ease, transform 180ms ease;
}

.btn-public-primary:hover {
    background: var(--brand-primary-deep);
}

.btn-public-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 0.72rem 1.45rem;
    color: var(--brand-charcoal);
    font-size: 0.92rem;
    font-weight: 700;
    transition: border-color 180ms ease, background 180ms ease;
}

.btn-public-secondary:hover {
    border-color: #d1d5db;
    background: #f3f4f6;
}

.btn-public-primary:focus-visible,
.btn-public-secondary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.lift-hover {
    transform: translateY(0);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.lift-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 36px -24px rgba(15, 23, 42, 0.45);
}

/* Homepage: property cards & marquee */
.home-property-card {
    border-radius: 1.25rem;
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.home-property-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12);
}

.home-property-card:focus-within {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
}

@keyframes home-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.home-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.home-marquee-track {
    display: flex;
    width: max-content;
    gap: 3.5rem;
    animation: home-marquee 45s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .home-marquee-track {
        animation: none;
    }
}

.home-cta-pattern {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
}

/* Scroll reveal (landing) - respects reduced motion via JS fallback */
.public-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.65s ease,
        transform 0.65s ease;
}

.public-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .public-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Properties index: advanced filters <details> (mobile disclosure, desktop always open via JS) */
.properties-filter-advanced > summary {
    list-style: none;
}

.properties-filter-advanced > summary::-webkit-details-marker {
    display: none;
}

.properties-filter-advanced[open] .properties-filter-advanced__chevron {
    transform: rotate(180deg);
}

.properties-filter-advanced__chevron {
    transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .properties-filter-advanced__chevron {
        transition: none;
    }
}

/* Legacy user marketplace (Bootstrap class names) — map to EdBirds palette */
.text-emerald {
    color: var(--brand-primary) !important;
}

.text-dark-emerald {
    color: var(--brand-ink) !important;
}

.bg-emerald {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.bg-dark-emerald {
    background-color: var(--brand-ink) !important;
    color: #fff !important;
}

.btn-emerald,
.btn-emerald:focus {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
}

.btn-emerald:hover {
    background-color: var(--brand-primary-deep);
    border-color: var(--brand-primary-deep);
    color: #fff;
}

.nav-pills-emerald .nav-link.active,
.nav-pills-emerald .show > .nav-link {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.form-control-emerald:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(42, 157, 143, 0.22);
}

.user-dashboard-wrapper .alert-success {
    background-color: rgba(224, 242, 241, 0.95);
    color: var(--brand-ink);
    border-color: rgba(42, 157, 143, 0.35);
}

.user-dashboard-wrapper .alert-danger {
    background-color: var(--surface-base);
    color: var(--brand-ink);
    border-color: #d1d5db;
}

.bg-accent-subtle {
    background-color: rgba(238, 156, 70, 0.14) !important;
}

.text-accent-edbirds {
    color: var(--brand-accent) !important;
}

/* -------------------------------------------------------------------------- */
/* Main site header — responsive nav (plain CSS; also used with Tailwind)     */
/* -------------------------------------------------------------------------- */

body.shp-nav--noscroll {
    overflow: hidden;
}

.shp-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgba(229, 231, 235, 0.8);
    background: var(--shp-nav-bg);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.shp-site-header__bar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    max-width: 80rem;
    margin: 0 auto;
    min-height: var(--shp-header-h);
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .shp-site-header__bar {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.shp-site-header__brand {
    display: block;
    flex-shrink: 0;
}

.shp-site-header__brand img {
    max-width: 160px;
    height: auto;
    display: block;
    vertical-align: middle;
}

.shp-nav-desktop {
    display: none;
    flex: 1;
    justify-content: center;
    padding: 0 0.5rem;
}

@media (min-width: 768px) {
    .shp-nav-desktop {
        display: flex;
    }
}

.shp-nav-pill {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid rgba(107, 114, 128, 0.15);
    border-radius: 9999px;
    background: rgba(30, 42, 56, 0.06);
}

.shp-nav-pill a {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--shp-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, box-shadow 0.15s;
}

.shp-nav-pill a:hover {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.shp-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

@media (min-width: 640px) {
    .shp-header-actions {
        gap: 0.5rem;
    }
}

.shp-header-actions a {
    text-decoration: none;
}

.shp-link-desktop {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--shp-ink);
    border: 1px solid transparent;
    transition: background 0.15s;
    white-space: nowrap;
}

.shp-link-desktop:hover {
    background: #f3f4f6;
}

.shp-link-desktop--ghost {
    border-color: #e5e7eb;
    background: #fff;
}

.shp-link-desktop--primary {
    background: var(--shp-primary);
    color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shp-link-desktop--primary:hover {
    background: var(--shp-primary-dark);
    color: #fff;
}

.shp-bell {
    position: relative;
    display: none;
    padding: 0.625rem;
    border-radius: 9999px;
    color: var(--shp-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.shp-bell:hover {
    background: #f3f4f6;
    color: var(--shp-primary);
}

@media (min-width: 640px) {
    .shp-bell--show {
        display: inline-flex;
    }
}

.shp-bell__badge {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: #ee9c46;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}

.shp-menu-wrap {
    position: relative;
    flex-shrink: 0;
}

/* Desktop already has center navigation; keep hamburger only for mobile. */
@media (min-width: 768px) {
    .shp-menu-wrap {
        display: none;
    }
}

.shp-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    background: #fff;
    color: var(--shp-ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.shp-menu-btn:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.shp-menu-btn:focus-visible {
    outline: 2px solid var(--shp-primary);
    outline-offset: 2px;
}

.shp-menu-btn i {
    font-size: 1.25rem;
    line-height: 1;
}

.shp-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: var(--shp-z-dropdown);
    margin-top: 0.5rem;
    min-width: 14rem;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0.5rem 0;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    list-style: none;
    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s, transform 0.2s;
}

.shp-dropdown.is-open {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767.98px) {
    .shp-dropdown {
        display: none !important;
        visibility: hidden;
    }
}

.shp-dropdown a {
    display: block;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--shp-ink);
    text-decoration: none;
}

.shp-dropdown a:hover {
    background: #f3f4f6;
}

.shp-m-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--shp-z-backdrop);
    background: rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
}

.shp-m-backdrop.is-open {
    display: block;
}

/* Drawer/backdrop are siblings of <header> so position:fixed is not broken by header backdrop-filter */
.shp-m-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: var(--shp-z-drawer);
    width: min(88vw, 24rem);
    max-width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    padding-right: env(safe-area-inset-right, 0);
    background: #fff;
    border-left: 1px solid #e5e7eb;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    will-change: transform;
    display: flex;
    flex-direction: column;
    visibility: visible;
}

.shp-m-drawer.is-open {
    transform: translateX(0);
}

@media (min-width: 768px) {
    .shp-m-backdrop,
    .shp-m-drawer {
        display: none !important;
    }
}

.shp-m-drawer__head {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.shp-m-drawer__head strong {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--shp-ink);
}

.shp-m-drawer__close {
    display: inline-flex;
    padding: 0.5rem;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--shp-muted);
    cursor: pointer;
}

.shp-m-drawer__close:hover {
    background: #f3f4f6;
}

.shp-m-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0.5rem 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.shp-m-drawer__link {
    display: flex;
    align-items: center;
    padding: 0.75rem 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--shp-ink);
    text-decoration: none;
}

.shp-m-drawer__link:hover {
    background: #f3f4f6;
}

.shp-m-drawer__link--muted {
    font-weight: 500;
    color: var(--shp-muted);
}

.shp-m-drawer__hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 0.75rem 0.5rem;
}

.shp-m-drawer__btn-primary {
    display: flex;
    margin: 0.25rem 0.5rem 0;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    padding: 0.75rem 1rem;
    background: var(--shp-primary);
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.shp-m-drawer__btn-primary:hover {
    background: var(--shp-primary-dark);
}

/* Signed-in user (desktop bar) */
.shp-user-desktop {
    display: none;
    align-items: center;
    gap: 0.5rem;
    max-width: 10.5rem;
    margin-right: 0.125rem;
}

.shp-user-desktop__avatar {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(42, 157, 143, 0.14);
    color: var(--shp-primary);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
}

.shp-user-desktop__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    line-height: 1.2;
}

.shp-user-desktop__name {
    max-width: 100%;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--shp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shp-user-desktop__role {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--shp-muted);
}

/* ----- User dropdown (Profile / Settings / Logout) ----- */
.shp-user-dd {
    position: relative;
    display: none;
}

@media (min-width: 640px) {
    .shp-user-dd {
        display: block;
    }
}

.shp-user-dd__summary {
    list-style: none;
    cursor: pointer;
}

/* Hide native marker on <summary> */
.shp-user-dd__summary::-webkit-details-marker {
    display: none;
}

.shp-user-dd__summary:focus-visible {
    outline: 2px solid var(--shp-primary);
    outline-offset: 2px;
    border-radius: 9999px;
}

.shp-user-dd__chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shp-muted);
    padding-left: 0.125rem;
}

.shp-user-dd__chev i {
    font-size: 1rem;
    line-height: 1;
}

.shp-user-dd__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.5rem);
    z-index: var(--shp-z-dropdown);

    width: 16rem;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    padding: 0.5rem;

    display: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
}

/* details[open] state toggles menu visibility */
.shp-user-dd[open] .shp-user-dd__menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.shp-user-dd__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;

    width: 100%;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;

    text-decoration: none;
    color: var(--shp-ink);
    font-size: 0.875rem;
    font-weight: 600;

    transition: background 0.15s, color 0.15s;
}

.shp-user-dd__item:hover {
    background: #f3f4f6;
}

.shp-user-dd__item--danger:hover {
    background: rgba(42, 157, 143, 0.12);
}

.shp-user-dd__badge {
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 9999px;
    background: #ee9c46;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

/* Signed-in user (mobile drawer) */
.shp-m-drawer__user-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0.5rem 0.75rem;
    padding: 0.75rem 0.75rem;
    border-radius: 0.875rem;
    border: 1px solid rgba(229, 231, 235, 0.95);
    background: rgba(30, 42, 56, 0.04);
}

.shp-m-drawer__user-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgba(42, 157, 143, 0.14);
    color: var(--shp-primary);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
}

.shp-m-drawer__user-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.shp-m-drawer__user-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--shp-ink);
    line-height: 1.25;
    word-break: break-word;
}

.shp-m-drawer__user-role {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--shp-primary-dark);
    background: rgba(42, 157, 143, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
}

.shp-m-drawer__user-email {
    font-size: 0.75rem;
    color: var(--shp-muted);
    word-break: break-all;
    line-height: 1.35;
}

@media (min-width: 640px) {
    .shp-link-desktop {
        display: inline-flex;
    }

    .shp-user-desktop {
        display: flex;
    }
}