/* ******************************* PC ***************************** */
    @media (min-width: 981px) {
        .openbtn {
            display: none;
        }

        .sidepanel {
            display: none;
        }

    }

    /* ******************************* TABLETA ***************************** */
    @media (min-width: 641px) and (max-width: 980px) {
        /* --------------------------MENIU--------------------------- */

        .sidepanel {
            width: min(80vw, 420px);
        }

        /* ========== Buton deschidere ========== */
        .openbtn {
            display: block;
            margin: 0px 29px;
            cursor: pointer;
            background: var(--brand);
            color: #fff;
            padding: .5rem .8rem;
            border: none;
            border-radius: .75rem;
            box-shadow: 0 4px 10px rgba(26, 115, 232, .25);
            transition: transform .15s ease, box-shadow .15s ease, background .2s;

        }

        .openbtn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(26, 115, 232, .35);
        }

        .openbtn:active {
            transform: translateY(0);
            box-shadow: 0 3px 8px rgba(26, 115, 232, .25);
        }

        /* ========== Overlay ========== */
        .panel-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            z-index: 9998;
        }

        .panel-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        /* ========== Sidepanel ========== */
        .sidepanel {
            height: 100vh;
            width: min(90vw, 380px);
            max-width: 420px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            background: var(--panel-bg);
            border-right: 1px solid var(--line);
            box-shadow: 8px 0 24px rgba(0, 0, 0, .08);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            transform: translateX(-100%);
            transition: transform .35s ease;
            padding-top: 0;
        }

        .sidepanel.open {
            transform: translateX(0);
        }

        body.no-scroll {
            overflow: hidden;
        }

        /* ========== Header panou (zona cu X) ========== */
        .sidepanel .closebtn {
            position: sticky;
            top: 0;
            right: auto;
            left: auto;
            display: block;
            text-align: right;
            padding: .75rem 1rem;
            font-size: 2rem;
            line-height: 1;
            color: var(--muted);
            background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
            backdrop-filter: saturate(120%) blur(2px);
            border-bottom: 1px solid var(--line);
            z-index: 1;
        }

        .sidepanel .closebtn:hover {
            color: var(--brand);
        }

        /* ========== Titluri/ sectiuni ========== */
        .sidepanel h2 {
            margin: .5rem 0;
            padding: .5rem 1rem;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--ink);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        .titlu_mobil {
            margin: .25rem 0;
            padding: .4rem 1rem;
            text-align: left;
            text-indent: 0;
            font-size: .98rem;
            font-weight: 600;
            color: var(--ink);
        }

        /* linkurile simple din liste */
        .sidepanel a {
            display: block;
            padding: .5rem 1.25rem;
            font-size: .95rem;
            color: var(--brand);
            text-decoration: none;
            transition: background .2s ease, color .2s ease, padding-left .2s;
            border-radius: .5rem;
        }

        .sidepanel a:hover {
            background: rgba(26, 115, 232, .08);
            color: var(--ink);
            padding-left: 1.35rem;
        }

        /* ========== Dropdown (accordion pe click) ========== */
        .dropdown {
            margin: .15rem 0;
        }

        .dropdown .dropbtn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            background: none;
            border: none;
            color: var(--ink);
            font-size: .98rem;
            font-weight: 600;
            padding: .55rem 1rem;
            cursor: pointer;
            border-radius: .6rem;
            transition: background .2s ease;
        }

        .dropdown .dropbtn:hover {
            background: rgba(26, 115, 232, .07);
        }

        .dropdown .dropbtn::after {
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            transition: transform .25s ease;
        }

        .dropdown.open .dropbtn::after {
            transform: rotate(180deg);
        }

        /* continutul ascuns/aratat */
        .dropdown-content {
            display: none;
            padding: .25rem 0 .5rem 0;
            border-left: 2px solid var(--brand);
            margin: .15rem 0 .35rem .5rem;
        }

        .dropdown.open .dropdown-content {
            display: block;
        }

        /* listari */
        ul {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        /* ascunde listele simple din dropdown in panoul mobil */
        .sidepanel .dropdown>ul {
            display: none;
            margin: .25rem 0 .5rem .75rem;
            border-left: 2px solid var(--brand);
            padding-left: .5rem;
        }

        .sidepanel .dropdown.open>ul {
            display: block;
        }
    }

    /* ******************************* MOBIL ***************************** */
    @media (max-width: 640px) {
        /**************************************MENIU*********************************************/
        /* ========== Buton deschidere ========== */

        .openbtn {
            margin: 15px 30px;
            cursor: pointer;
            background: var(--brand);
            color: #fff;
            padding: .5rem .8rem;
            border: none;
            border-radius: .75rem;
            box-shadow: 0 4px 10px rgba(26, 115, 232, .25);
            transition: transform .15s ease, box-shadow .15s ease, background .2s;
        }


        .openbtn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(26, 115, 232, .35);
        }

        .openbtn:active {
            transform: translateY(0);
            box-shadow: 0 3px 8px rgba(26, 115, 232, .25);
        }

        /* ========== Overlay ========== */
        .panel-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .35);
            opacity: 0;
            visibility: hidden;
            transition: opacity .35s ease, visibility .35s ease;
            z-index: 9998;
        }

        .panel-overlay.open {
            opacity: 1;
            visibility: visible;
        }

        /* ========== Sidepanel ========== */
        .sidepanel {
            height: 100vh;
            width: min(80vw, 380px);
            max-width: 420px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            background: var(--panel-bg);
            border-right: 1px solid var(--line);
            box-shadow: 8px 0 24px rgba(0, 0, 0, .08);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            transform: translateX(-100%);
            transition: transform .35s ease;
            padding-top: 0;
        }

        .sidepanel.open {
            transform: translateX(0);
        }

        body.no-scroll {
            overflow: hidden;
        }

        /* ========== Header panou (zona cu X) ========== */
        .sidepanel .closebtn {
            position: sticky;
            top: 0;
            right: auto;
            left: auto;
            display: block;
            text-align: right;
            padding: .75rem 1rem;
            font-size: 2rem;
            line-height: 1;
            color: var(--muted);
            background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6));
            backdrop-filter: saturate(120%) blur(2px);
            border-bottom: 1px solid var(--line);
            z-index: 1;
        }

        .sidepanel .closebtn:hover {
            color: var(--brand);
        }

        /* ========== Titluri de sectiune ========== */
        .sidepanel h2 {
            margin: .5rem 0;
            padding: .5rem 1rem;
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--ink);
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
        }

        /* ========== Subtitluri / linkuri ========== */
        .titlu_mobil {
            margin: .25rem 0;
            padding: .4rem 1rem;
            text-align: left;
            text-indent: 0;
            font-size: .98rem;
            font-weight: 600;
            color: var(--ink);
        }

        /* linkurile simple din liste */
        .sidepanel a {
            display: block;
            padding: .5rem 1.25rem;
            font-size: .95rem;
            color: var(--brand);
            text-decoration: none;
            transition: background .2s ease, color .2s ease, padding-left .2s;
            border-radius: .5rem;
        }

        .sidepanel a:hover {
            background: rgba(26, 115, 232, .08);
            color: var(--ink);
            padding-left: 1.35rem;
        }

        /* ========== Dropdown (accordion pe click) ========== */
        .dropdown {
            margin: .15rem 0;
        }

        .dropdown .dropbtn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .5rem;
            background: none;
            border: none;
            color: var(--ink);
            font-size: .98rem;
            font-weight: 600;
            padding: .55rem 1rem;
            cursor: pointer;
            border-radius: .6rem;
            transition: background .2s ease;
        }

        .dropdown .dropbtn:hover {
            background: rgba(26, 115, 232, .07);
        }

        .dropdown .dropbtn::after {
            content: "\f107";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            transition: transform .25s ease;
        }

        .dropdown.open .dropbtn::after {
            transform: rotate(180deg);
        }

        /* continutul ascuns/aratat */
        .dropdown-content {
            display: none;
            padding: .25rem 0 .5rem 0;
            border-left: 2px solid var(--brand);
            margin: .15rem 0 .35rem .5rem;
        }

        .dropdown.open .dropdown-content {
            display: block;
        }

        /* listari */
        ul {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        /* ascunde listele simple din dropdown in panoul mobil */
        .sidepanel .dropdown>ul {
            display: none;
            margin: .25rem 0 .5rem .75rem;
            border-left: 2px solid var(--brand);
            padding-left: .5rem;
        }

        .sidepanel .dropdown.open>ul {
            display: block;
        }
    }