/* =============================================================================
   BonTrip — Menu styles (top, footer, mobile)
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Header layout — logo + nav + right
   ----------------------------------------------------------------------------- */
.site-header {
    position: relative;      /* ancorează mega-menu-ul aici, nu pe li părinte */
    z-index: 100;
}
.site-header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 64px;
}
.site-header .site-logo { flex-shrink: 0; }
.site-header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }

.mobile-burger {
    display: none;
    background: transparent;
    border: 0;
    color: currentColor;
    font-size: 22px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
}
.mobile-burger:hover { background: rgba(0,0,0,0.05); }

/* -----------------------------------------------------------------------------
   TOP MENU — orizontal desktop
   ----------------------------------------------------------------------------- */
.site-nav--top {
    flex: 1;
    display: block;
}
.nav-menu.menu--top {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.nav-menu.menu--top > li { position: relative; }
.nav-menu.menu--top > li > .menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 18px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    background: transparent;
    border: 0;
}
.nav-menu.menu--top > li > .menu-link:hover,
.nav-menu.menu--top > li.is-active > .menu-link {
    background: rgba(0,0,0,0.05);
}
.nav-menu.menu--top .menu-caret { font-size: 10px; opacity: 0.6; }
.nav-menu.menu--top .menu-icon { font-size: 14px; }

/* Primul nivel ramane doar text; iconitele se pastreaza in submeniuri, unde
   sunt definite separat (.menu-submenu--depth-1/2 .menu-icon). */
.nav-menu.menu--top > li > .menu-link > .menu-icon { display: none; }

/* CTA buttons */
.nav-menu .menu-item.menu-cta > .menu-link {
    background: var(--category-color, #0ea5e9);
    color: #fff !important;
    font-weight: 600;
}
.nav-menu .menu-item.menu-cta > .menu-link:hover {
    filter: brightness(1.1);
}
.nav-menu .menu-item.menu-cta-alt > .menu-link {
    border: 2px solid var(--category-color, #0ea5e9);
    color: var(--category-color, #0ea5e9) !important;
    font-weight: 600;
}
.nav-menu .menu-item.menu-cta-alt > .menu-link:hover {
    background: var(--category-color, #0ea5e9);
    color: #fff !important;
}

/* Submenu — dropdown / mega-menu (controlat 100% prin JS via .is-open) */
.nav-menu.menu--top .menu-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 100;
}
.nav-menu.menu--top > .menu-item.is-open > .menu-submenu,
.nav-menu.menu--top .menu-item--has-children.is-open > .menu-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =============================================================================
   „Vezi toate" — randul adaugat de MenuRenderer la finalul fiecarui submeniu.

   In meniu intra doar cateva subcategorii din fiecare categorie. Pe numele
   categoriei nu se poate apasa ca sa ajungi la pagina ei: pe desktop el doar
   deschide submeniul, pe telefon deschide panoul urmator. Randul asta e calea
   catre pagina care le aduna pe toate, si de aceea arata altfel decat vecinii
   lui — altfel s-ar pierde printre subcategorii.
   ========================================================================== */

.menu-item--see-all > .menu-link--see-all {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #0f766e;
}
.menu-item--see-all > .menu-link--see-all:hover { color: #0b5b56; }

.menu-see-all-arrow {
    /* Impinsa la capatul randului, ca sa se citeasca drept „mergi mai departe" */
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    transition: transform .15s ease;
}
.menu-item--see-all > .menu-link--see-all:hover .menu-see-all-arrow {
    transform: translateX(3px);
}

/* Pe desktop, o linie subtire il desparte de subcategoriile de deasupra */
.nav-menu.menu--top .menu-item--see-all {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(15, 23, 42, .08);
}
/* Intr-un mega-meniu pe coloane, randul trebuie sa treaca peste toate */
.nav-menu.menu--top .has-mega-menu > .menu-submenu > .menu-item--see-all {
    grid-column: 1 / -1;
    column-span: all;
}

/* Mega-menu — parent li devine static ca submeniul sa fie ancorat pe .site-header.
   Cheia `.has-mega-menu` este adaugata via JS pt items cu >=6 subitems. */
.nav-menu.menu--top > .menu-item.has-mega-menu {
    position: static;
}

/* Mega-menu — Experiențe (multe coloane, centrat pe viewport).
   IMPORTANT: overflow: visible pentru ca bridge-ul ::before (top negativ) sa nu fie taiat */
.nav-menu.menu--top .menu-submenu.is-mega-menu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 4px 16px;
    padding: 20px;
    width: min(1200px, calc(100vw - 32px));
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(6px);
    box-sizing: border-box;
    overflow: visible;
}
/* Mega-menu cu putine grupuri (ex. "Exploreaza" — 2 coloane): panoul pastreaza
   latimea continutului, dar coloanele nu se mai intind la ~600px fiecare; stau
   aliniate la stanga, la o latime lizibila. */
.nav-menu.menu--top .menu-submenu.is-mega-menu.is-mega-compact {
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: start;
    gap: 4px 48px;
}

/* Bridge invizibil larg — asigura hover-ul continuu intre trigger si mega-menu */
.nav-menu.menu--top .menu-submenu.is-mega-menu::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    background: transparent;
}
.nav-menu.menu--top > .menu-item.is-open > .menu-submenu.is-mega-menu {
    transform: translateX(-50%) translateY(0);
}

/* Column header (L1 category linked) */
.nav-menu.menu--top .menu-submenu .menu-item > .menu-link {
    display: block;
    padding: 6px 10px;
    color: #0f172a;
    text-decoration: none;
    font-size: 14px;
    border-radius: 6px;
    line-height: 1.4;
    transition: background .12s ease;
}
.nav-menu.menu--top .menu-submenu .menu-item.menu-item--has-children > .menu-link {
    font-weight: 700;
    color: var(--category-color, #0ea5e9);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}
.nav-menu.menu--top .menu-submenu .menu-item > .menu-link:hover {
    background: #f1f5f9;
    color: var(--category-color, #0ea5e9);
}
/* Nested submenus in mega-menu — static in layout, dar ascunse pana cand
   outer mega-menu se deschide (via .is-open pe top-level li).
   IMPORTANT: fara `visibility: visible` explicit — altfel raman hoverable
   chiar cand parintele e ascuns, si accidental deschid mega-menu-ul. */
.nav-menu.menu--top .menu-submenu .menu-submenu {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
    min-width: unset;
    transform: none;
    background: transparent;
    border-radius: 0;
    /* visibility si opacity ramin mostenite de la .menu-submenu de baza (hidden/0) */
}
.nav-menu.menu--top > .menu-item.is-open > .menu-submenu .menu-submenu {
    opacity: 1;
    visibility: visible;
}
.nav-menu.menu--top .menu-submenu .menu-caret { display: none; }

/* -----------------------------------------------------------------------------
   FOOTER MENU — 4 coloane
   ----------------------------------------------------------------------------- */
.site-footer { padding: 48px 0 24px; background: #0f172a; color: #cbd5e1; }
.site-footer a { color: inherit; }

.nav-menu.menu--footer {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 32px;
    margin-bottom: 32px;
}
.nav-menu.menu--footer > .menu-item > .menu-link {
    display: block;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 13px;
    margin-bottom: 16px;
    text-decoration: none;
    cursor: default;
    padding: 0;
}
.nav-menu.menu--footer > .menu-item > .menu-link .menu-caret { display: none; }

.nav-menu.menu--footer .menu-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nav-menu.menu--footer .menu-submenu .menu-link {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 14px;
    padding: 4px 0;
    transition: color .12s ease;
    display: inline-block;
}
.nav-menu.menu--footer .menu-submenu .menu-link:hover {
    color: #fff;
}

.site-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
    gap: 16px;
    flex-wrap: wrap;
}
.site-footer-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #fff;
}
.site-footer-brand .site-logo-icon {
    font-size: 24px;
    color: var(--category-color, #0ea5e9);
}
.site-footer-brand p { margin: 0; font-size: 13px; color: #94a3b8; }
.site-footer-copy { font-size: 13px; color: #94a3b8; margin: 0; }

/* -----------------------------------------------------------------------------
   MOBILE DRAWER
   ----------------------------------------------------------------------------- */
.mobile-drawer {
    position: fixed;
    top: 0; right: 0;
    width: min(360px, 90vw);
    height: 100vh;
    background: #fff;
    z-index: 1000;
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    visibility: hidden;
}
.mobile-drawer.is-open {
    transform: translateX(0);
    visibility: visible;
}

.mobile-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity .25s ease;
    visibility: hidden;
}
.mobile-drawer-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}
.mobile-drawer-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    cursor: pointer;
    padding: 8px;
    color: #64748b;
    border-radius: 8px;
}
.mobile-drawer-close:hover { background: #f1f5f9; }

/* Cautarea: la 70-80 de categorii ajunge mai repede unde vrea decat rasfoitul */
.mobile-drawer-search {
    position: relative;
    padding: 12px 16px 0;
}
.mobile-drawer-search i {
    position: absolute;
    left: 30px; top: 50%; transform: translateY(-25%);
    color: #94a3b8; font-size: 14px; pointer-events: none;
}
.mobile-drawer-search input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid #e2e8f0; border-radius: 10px;
    font: inherit; font-size: 14px; color: #0f172a;
    background: #f8fafc;
}
.mobile-drawer-search input:focus {
    outline: none;
    border-color: #94a3b8; background: #fff;
}

/* Randul de intoarcere — apare doar din al doilea nivel in jos */
.mobile-drawer-nav {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #e2e8f0;
}
.mobile-drawer-nav[hidden] { display: none; }
/* Butonul sta in dreapta, titlul ia restul randului */
.mobile-drawer-back {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; flex-shrink: 0;
    background: transparent; border: 0; padding: 6px 8px;
    border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 600; color: #0f172a;
}
.mobile-drawer-back:hover { background: #f1f5f9; }
.mobile-drawer-back i { font-size: 12px; color: #64748b; }
.mobile-drawer-level {
    flex: 1; min-width: 0;
    font-size: 13px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Scena panourilor. Nivelurile aluneca peste ea, deci taie ce iese in lateral
   si nu deruleaza ea insasi — deruleaza fiecare panou. */
.mobile-drawer-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 0;
    min-height: 0;
}

/* Toate nivelurile arata la fel, deci se scriu o singura data.
   Scopul e `.mobile-drawer-body`, nu `.menu--mobile`: JS scoate panourile din
   lista si le muta in scena, asa ca un selector legat de lista ar fi stilat doar
   primul nivel, iar de la al doilea in jos randurile ar ramane goale. */
.mobile-drawer-body .nav-menu.menu--mobile,
.mobile-drawer-body .menu-submenu {
    list-style: none;
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mobile-drawer-body .nav-menu.menu--mobile { height: 100%; }

.mobile-drawer-body .menu-item { list-style: none; }

.mobile-drawer-body .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #0f172a;
    text-decoration: none;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.35;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.mobile-drawer-body .menu-icon { color: #64748b; flex-shrink: 0; }
.mobile-drawer-body .menu-link:hover { background: #f1f5f9; }
.mobile-drawer-body .menu-text { flex: 1; min-width: 0; }

.mobile-drawer-body .menu-item.menu-cta > .menu-link {
    background: var(--category-color, #0ea5e9);
    color: #fff;
    justify-content: center;
    font-weight: 600;
    margin: 8px 0;
}
.mobile-drawer-body .menu-item.menu-cta .menu-icon { color: #fff; }

/* Sageata arata spre dreapta: randul duce mai departe, nu desface pe loc.
   Randarea da un chevron in jos, acelasi ca pe desktop — il rotim. */
.mobile-drawer-body .menu-item--has-children > .menu-link .menu-caret {
    margin-left: auto;
    flex-shrink: 0;
    transform: rotate(-90deg);
    color: #94a3b8;
    font-size: 12px;
}

/* Panourile stau peste scena pana la inchidere. `visibility` opreste focusul in
   cele inchise — `transform` singur le-ar lasa accesibile din tastatura. */
.mobile-drawer-body .menu-submenu {
    position: absolute;
    inset: 0;
    background: #fff;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s ease, visibility .25s ease;
}
.mobile-drawer-body .menu-submenu.is-panel {
    transform: translateX(0);
    visibility: visible;
}

/* Randul catre pagina grupului, desprins de lista lui.
   In panou e mutat in fata de JS: la finalul a 80 de intrari ar fi la o
   derulare intreaga distanta. */
.mobile-drawer-body .menu-item--see-all {
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 6px;
    padding-bottom: 6px;
}

/* Subsolul sertarului — actiunea principala, mutata aici din header pe mobil.
   Sta in afara scenei, deci panourile nu-l acopera si ramane la indemana pe
   orice nivel. */
.mobile-drawer-footer {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e2e8f0;
    background: #fff;
}
.mobile-drawer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 18px;
    border-radius: 12px;
    background: var(--category-color, #0ea5e9);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.mobile-drawer-cta:hover { filter: brightness(.95); }
.mobile-drawer-cta i { font-size: 14px; }

/* Grupurile fara pagina proprie raman titluri, nu par apasabile.
   Cele cu copii primesc `data-panel` din JS, deci sunt randuri adevarate. */
.mobile-drawer-body .menu-link--label:not([data-panel]) {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 14px 14px 4px;
    cursor: default;
}
.mobile-drawer-body .menu-link--label:not([data-panel]):hover { background: transparent; }

/* =============================================================================
   HEADER USER CHIP (dropdown Nume + Dashboard + Logout pentru logged-in)
   ============================================================================= */
.header-user-chip {
    position: relative;
}
.header-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #0f172a;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: border-color .15s ease, background .15s ease;
}
.header-user-btn:hover { border-color: #cbd5e1; background: #f8fafc; }

.header-user-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    flex-shrink: 0;
}
.header-user-chip--provider .header-user-avatar {
    background: linear-gradient(135deg, #2563eb, #06b6d4);
}
.header-user-chip--member .header-user-avatar {
    background: linear-gradient(135deg, #f97316, #ec4899);
}
.header-user-name {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header-user-caret {
    font-size: 10px;
    opacity: 0.5;
    transition: transform .15s ease;
}
.header-user-chip.is-open .header-user-caret {
    transform: rotate(180deg);
}

.header-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease;
    z-index: 200;
}
.header-user-chip.is-open .header-user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.header-user-dropdown li { margin: 0; }
.header-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #0f172a;
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: background .12s ease;
}
.header-user-dropdown a:hover { background: #f1f5f9; }
.header-user-dropdown a i { color: #64748b; width: 16px; text-align: center; }
.header-user-dropdown .header-user-logout:hover { background: #fee2e2; color: #b91c1c; }
.header-user-dropdown .header-user-logout:hover i { color: #b91c1c; }

.header-user-meta {
    padding: 12px 14px 10px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.header-user-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.header-user-chip--provider .header-user-label { color: #1e40af; }
.header-user-chip--member .header-user-label { color: #c2410c; }
.header-user-email {
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================================================
   DASHBOARD LAYOUT (sidebar + main content)
   ============================================================================= */
.dashboard-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    max-width: 1400px;
    margin: 0 auto;
    padding: 24px 16px;
    gap: 24px;
    align-items: flex-start;
}

.dashboard-sidebar {
    position: sticky;
    top: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    padding: 12px 0;
    overflow: hidden;
}

.dashboard-main {
    min-width: 0;
}

/* Sidebar menu — nested, always-visible (nu dropdown) */
.nav-menu.menu--sidebar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}
.nav-menu.menu--sidebar > .menu-item { display: block; }
.nav-menu.menu--sidebar .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
    cursor: pointer;
    background: transparent;
    border-top: 0; border-right: 0; border-bottom: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-weight: 500;
}
.nav-menu.menu--sidebar .menu-link:hover {
    background: #f8fafc;
    color: #0f172a;
}
.nav-menu.menu--sidebar .menu-item.is-active > .menu-link {
    background: #eff6ff;
    color: #1d4ed8;
    border-left-color: #2563eb;
    font-weight: 600;
}
.nav-menu.menu--sidebar .menu-icon {
    width: 18px;
    text-align: center;
    color: #64748b;
    font-size: 14px;
}
.nav-menu.menu--sidebar .menu-item.is-active .menu-icon { color: #2563eb; }
.nav-menu.menu--sidebar .menu-caret { display: none; }

/* Label items (section headers precum "Ofertele mele") */
.nav-menu.menu--sidebar .menu-item--label > .menu-link,
.nav-menu.menu--sidebar .menu-item--has-children > .menu-link.menu-link--label {
    padding-top: 16px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: default;
    background: transparent;
    border-left: 0;
}
.nav-menu.menu--sidebar .menu-item--label > .menu-link:hover,
.nav-menu.menu--sidebar .menu-item--has-children > .menu-link.menu-link--label:hover {
    background: transparent;
    color: #94a3b8;
}

/* Submenu inline (nested, always visible) */
.nav-menu.menu--sidebar .menu-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    position: static;
    box-shadow: none;
    border: 0;
    background: transparent;
    display: block;
}
.nav-menu.menu--sidebar .menu-submenu .menu-link {
    padding-left: 44px;
    font-size: 13px;
    color: #475569;
}
.nav-menu.menu--sidebar .menu-submenu .menu-icon { display: none; }

/* Dashboard card (continut principal) */
.dashboard-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    padding: 32px;
}
.dashboard-header { margin-bottom: 24px; }
.dashboard-header h1 { margin: 8px 0 4px; font-size: 24px; font-weight: 700; color: #0f172a; }
.dashboard-subtitle { color: #64748b; margin: 0; font-size: 14px; }
.dashboard-placeholder {
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    color: #475569;
    font-size: 14px;
}
.dashboard-placeholder p { margin: 0 0 12px; }
.dashboard-placeholder dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; font-size: 13px; }
.dashboard-placeholder dt { color: #64748b; font-weight: 600; }
.dashboard-placeholder dd { margin: 0; color: #0f172a; }

/* Alerts in dashboard content */
.dashboard-main .alert {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dashboard-main .alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.dashboard-main .alert-danger  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* Responsive dashboard */
@media (max-width: 900px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
    }
    .dashboard-sidebar {
        position: static;
        margin-bottom: 16px;
    }
    .header-user-name { display: none; }
    .dashboard-card { padding: 20px; }
}

/* =============================================================================
   ORIGINAL RESPONSIVE — hide top nav pe mobil, arata burger
   ============================================================================= */
@media (max-width: 900px) {
    .site-nav--top { display: none; }
    .mobile-burger { display: inline-flex; align-items: center; }
    .nav-menu.menu--footer { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 500px) {
    .nav-menu.menu--footer { grid-template-columns: 1fr; }
    .site-footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}


/* =============================================================================
   HEADER v2 — doua randuri (bara de sus inchisa + randul cu logo si meniu)
   ============================================================================= */

/* Randul cu logo si meniu ramane lipit sus la scroll; bara inchisa de deasupra
   pleaca odata cu pagina.

   Sticky se pune pe `.site-header`, nu pe `.site-header-main`: un element sticky
   nu poate iesi din cutia parintelui, iar randul principal e deja la baza
   headerului — n-ar avea unde sa alunece. Cu `top` negativ cat inaltimea barei
   de sus, headerul se lipeste exact cand bara a iesit din ecran.

   `position: sticky` pastreaza si rolul de ancora pentru mega-menu (care e
   absolut si se raporteaza la `.site-header`). */
.site-header {
    background: #fff;
    box-shadow: 0 2px 14px rgba(15,23,42,.07);
    position: sticky;
    top: -54px; /* = inaltimea .site-topbar-inner */
    z-index: 100;
}

/* Cu header lipit, o ancora #sectiune ar ateriza sub el. */
html { scroll-padding-top: 92px; } /* = min-height .site-header-inner */

/* ---------- Starea lipita: rand mai jos, 64px ----------
   Clasa `is-stuck` e pusa din menu.js — CSS nu are inca un selector pentru
   "sticky ajuns la limita". Logo-ul se micsoreaza odata cu randul, altfel cei
   62px ai lui ar umple singuri toata inaltimea. */
.site-header.is-stuck .site-header-inner { min-height: 64px; }
.site-header.is-stuck .site-logo-img { height: 44px; }
.site-header.is-stuck .header-quote-btn { padding: 10px 18px; font-size: 14px; }

.site-header-inner,
.site-logo-img,
.header-quote-btn {
    transition: min-height .18s ease, height .18s ease, padding .18s ease, font-size .18s ease;
}

/* ---------- Bara de sus ---------- */
.site-topbar { background: #0d2818; color: #e2e8f0; }
/* Inaltime FIXA — nu min-height, ca sa nu o poata umfla continutul
   (butonul de limba mosteneste padding 8px 14px + border din public.css,
   iar chip-ul are avatar de 34px). Copiii sunt strunjiti mai jos ca sa incapa. */
.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 54px;
}
.site-topbar-right { display: flex; align-items: center; gap: 14px; }
.topbar-sep { width: 1px; height: 26px; background: rgba(255,255,255,.18); }

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 6px 4px;
    transition: color .15s ease;
}
.topbar-link:hover { color: #4ade80; }
.topbar-link i { opacity: .75; font-size: 13px; }

/* Selectorul de limba pe fundal inchis.
   Resetam si padding-ul/line-height-ul pill-ului din public.css (8px 14px + border 1px). */
.site-topbar .lang-switcher-btn {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-weight: 600;
    padding: 4px 6px;
    line-height: 1.2;
}
.site-topbar .lang-switcher-btn:hover { color: #4ade80; }

/* public.css ancoreaza meniul cu `right: 0`, deci se deschide spre STANGA.
   In topbar selectorul e primul element din stanga, asa ca meniul iesea in
   afara containerului. Il ancoram la stanga butonului. */
.site-topbar .lang-switcher-menu {
    left: 0;
    right: auto;
}

/* ---------- Chip-uri persona ---------- */
.site-topbar .header-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: #e2e8f0;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 4px;
}
.site-topbar .header-user-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}
.header-user-chip--member   .header-user-avatar { background: linear-gradient(135deg,#f97316,#fb7185); }
.header-user-chip--provider .header-user-avatar { background: linear-gradient(135deg,#2563eb,#06b6d4); }

/* Badge de notificari */
.header-user-badge {
    position: absolute;
    top: -5px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #0d2818;
    box-sizing: content-box;
}

.header-user-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.header-user-name { font-size: 14px; font-weight: 700; color: #fff; }
.header-user-role { font-size: 12px; color: #94a3b8; }
.site-topbar .header-user-caret { font-size: 11px; opacity: .7; margin-left: 2px; }

/* ---------- Randul principal ---------- */
.site-header-main { background: #fff; }
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 92px;
}

.site-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.site-logo-img { height: 62px; width: auto; display: block; }

.site-header-right { display: flex; align-items: center; gap: 14px; }

/* Butonul fix "Cere o oferta" */
.header-quote-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 14px 26px;
    border-radius: 10px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(22,163,74,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.header-quote-btn:hover {
    color: #fff;
    box-shadow: 0 10px 24px rgba(22,163,74,.36);
}

/* =============================================================================
   MENIUL PRINCIPAL — stil din design
   ============================================================================= */
.site-nav--top .menu-root { gap: 4px; }

.site-nav--top > .menu-root > .menu-item > .menu-link {
    padding: 34px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 3px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.site-nav--top > .menu-root > .menu-item > .menu-link:hover,
.site-nav--top > .menu-root > .menu-item.is-open > .menu-link {
    color: #16a34a;
    border-bottom-color: #16a34a;
}
.site-nav--top > .menu-root > .menu-item > .menu-link .menu-icon { display: none; }

/* ---------- Mega-menu pe coloane ---------- */
.site-nav--top .menu-item--depth-0.menu-item--has-children > .menu-submenu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    width: min(1400px, calc(100vw - 48px));
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    display: none;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 10px 26px;
    padding: 30px 34px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 22px 60px rgba(15,23,42,.16);
    border: 1px solid #eef2f6;
}
.site-nav--top .menu-item--depth-0.menu-item--has-children.is-open > .menu-submenu { display: grid; }

/* Coloana = grup de nivel 1 */
.site-nav--top .menu-submenu--depth-1 > .menu-item {
    break-inside: avoid;
    margin-bottom: 18px;
}
.site-nav--top .menu-submenu--depth-1 > .menu-item > .menu-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 9px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #0369a1;
    border-bottom: 1px solid #e5eaf0;
}
.site-nav--top .menu-submenu--depth-1 > .menu-item > .menu-link .menu-icon {
    display: inline-block;
    font-size: 16px;
    color: #16a34a;
}
.site-nav--top .menu-submenu--depth-1 > .menu-item > .menu-link .menu-caret { display: none; }

/* Sub-submeniul devine lista simpla in coloana */
.site-nav--top .menu-submenu--depth-2 {
    position: static;
    display: block;
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
    min-width: 0;
}
.site-nav--top .menu-submenu--depth-2 > .menu-item > .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 14.5px;
    font-weight: 400;
    color: #334155;
    border: none;
}
.site-nav--top .menu-submenu--depth-2 > .menu-item > .menu-link:hover { color: #16a34a; }
.site-nav--top .menu-submenu--depth-2 .menu-icon {
    display: inline-block;
    width: 20px;
    font-size: 15px;
    color: #64748b;
    text-align: center;
}
.site-nav--top .menu-submenu--depth-2 > .menu-item > .menu-link:hover .menu-icon { color: #16a34a; }

/* ---------- Grup lung (ex. lista de zone turistice) ----------
   Clasele .has-long-group / .menu-group--long sunt puse din menu.js pentru
   grupurile cu >= 12 linkuri (vezi LONG_GROUP acolo). */

/* Coloanele fixe de 300px din .is-mega-compact sunt gandite pentru 2-3 grupuri
   scurte; cu o lista de zeci de linkuri panoul trebuie sa-si foloseasca toata
   latimea. Selectorul repeta .is-mega-compact ca sa aiba aceeasi specificitate
   ca regula de acolo (0,5,0) si sa castige prin pozitia mai jos in fisier. */
.site-nav--top .menu-submenu.is-mega-menu.is-mega-compact.has-long-group {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 26px;
    /* Fara asta, coloana scurta (regiunile) s-ar intinde cat cea lunga */
    align-items: start;
}

/* Grupul lung sta pe acelasi rand cu grupul scurt dinaintea lui: acela ia prima
   coloana, lista lunga se imparte in restul. Asa panoul e mult mai putin inalt
   decat cu lista pe un rand propriu dedesubt. */
.site-nav--top .menu-submenu--depth-1 > .menu-item.menu-group--long {
    grid-column: 2 / -1;
}

/* Daca e chiar primul grup, n-are langa ce sta: ia tot randul, ca inainte. */
.site-nav--top .menu-submenu--depth-1 > .menu-item.menu-group--long:first-child {
    grid-column: 1 / -1;
}

/* Lista lui curge pe cate coloane incap. Umplerea e pe verticala, deci ordinea
   alfabetica se citeste corect: coloana 1 de sus in jos, apoi coloana 2. */
.site-nav--top .menu-group--long > .menu-submenu--depth-2 {
    columns: 180px;
    column-gap: 26px;
}
.site-nav--top .menu-group--long > .menu-submenu--depth-2 > .menu-item {
    break-inside: avoid;
}

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    .site-nav--top > .menu-root > .menu-item > .menu-link { padding: 30px 11px; font-size: 15px; }
    .site-logo-img { height: 52px; }
    .header-quote-btn { padding: 12px 18px; font-size: 14px; }
}
@media (max-width: 992px) {
    .site-nav--top { display: none; }
    .site-header-inner { min-height: 74px; }

    /* Burgerul apare de unde dispare meniul, nu mai jos: intre 901 si 992px
       headerul ramanea fara nicio cale de navigare. */
    .mobile-burger { display: inline-flex; align-items: center; }

    /* „Cere o oferta" se muta in sertar (vezi .mobile-drawer-footer): in header
       se bate cu logo-ul si cu burgerul pe latimea unui telefon. */
    .header-quote-btn { display: none; }

    .header-user-info { display: none; }
    .site-topbar-inner { height: 48px; }
    .site-header { top: -48px; } /* bara de sus e mai joasa aici */
    html { scroll-padding-top: 74px; }
}
@media (max-width: 600px) {
    .topbar-link { font-size: 13px; }
    .topbar-link i { display: none; }
    .site-logo-img { height: 44px; }
}

/* =============================================================================
   Sidebarul de panou, pliat pe mobil
   -----------------------------------------------------------------------------
   Pe ecran mic sidebarul nu mai sta in lateral, ci deasupra continutului. Cu
   toate intrarile desfasurate ocupa un ecran intreg si impinge pagina in jos,
   asa ca il pliem si lasam un buton care il deschide.
   ========================================================================== */
.dashboard-sidebar-toggle { display: none; }

@media (max-width: 900px) {
    .dashboard-sidebar-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 14px 16px;
        border: 0;
        background: none;
        color: #17252b;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: color .15s ease, background .15s ease;
    }
    .dashboard-sidebar-toggle:hover { background: #f8fafc; color: #2563eb; }

    .dashboard-sidebar-caret {
        margin-left: auto;
        font-size: 12px;
        color: #94a3b8;
        transition: transform .15s ease;
    }
    .dashboard-sidebar.is-open .dashboard-sidebar-caret { transform: rotate(180deg); }

    /* Meniul propriu-zis, indiferent de persona (provider / user) */
    .dashboard-sidebar > .nav-menu,
    .dashboard-sidebar > nav { display: none; }
    .dashboard-sidebar.is-open > .nav-menu,
    .dashboard-sidebar.is-open > nav { display: block; }

    /* Inchis, cardul e doar butonul: fara padding vertical in plus */
    .dashboard-sidebar { padding: 0; }
    .dashboard-sidebar.is-open { padding-bottom: 12px; }
}

/* =============================================================================
   Clopotelul din header si buleturile din meniul de panou
   -----------------------------------------------------------------------------
   Ambele sunt umplute de notifications.js din raspunsul sondarii. Clopotelul
   sta ascuns cat timp nu e nimic nou — un clopotel gol permanent devine mobila
   si nu-l mai vede nimeni.
   ========================================================================== */
/* Clopotelul sta in bara de sus, pe fundal inchis (#0d2818) */
.header-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
    font-size: 19px;
    transition: background .15s ease, color .15s ease;
}
.header-bell[hidden] { display: none; }
.header-bell:hover { background: rgba(255,255,255,0.12); color: #fff; }

.header-bell-count {
    position: absolute;
    top: 0;
    right: -1px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
    /* Inel in culoarea barei, ca cifra sa se desprinda de iconita */
    box-shadow: 0 0 0 2px #0d2818;
}

/* Buletul de pe o intrare din meniul lateral */
.menu--sidebar .menu-badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    flex: 0 0 auto;
}

/* Buletul de pe chip se randeaza mereu, ca sondarea sa-l poata actualiza;
   cand nu e nimic nou, `hidden` il scoate din pagina. Regula e explicita:
   unele reset-uri pun `display` pe span si ar invinge stilul implicit al
   atributului. */
.header-user-badge[hidden] { display: none; }