/* ==========================================================
   PRYLFYNDA HUB
========================================================== */

.pfl-hub{
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    justify-content:flex-end;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.pfl-hub.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* ==========================================================
   Overlay
========================================================== */

.pfl-hub__overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(4px);
}

/* ==========================================================
   Panel
========================================================== */

.pfl-hub__panel{

    position:relative;

    width:100%;
    max-width:420px;

    height:100%;

    background:#ffffff;

    display:flex;
    flex-direction:column;

    transform:translateX(100%);

    transition:transform .28s ease;

    box-shadow:
        -12px 0 40px rgba(0,0,0,.15);

}

.pfl-hub.is-open
.pfl-hub__panel{

    transform:translateX(0);

}

/* ==========================================================
   Header
========================================================== */

.pfl-hub-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px;

    border-bottom:1px solid #ececec;

}

.pfl-hub-header__user{

    display:flex;

    gap:14px;

    align-items:center;

}

.pfl-hub-header__avatar img{

    width:56px;

    height:56px;

    border-radius:50%;

    object-fit:cover;

}

.pfl-hub-header__title{

    margin:0;

    font-size:22px;

    font-weight:700;

}

.pfl-hub-header__subtitle{

    margin-top:4px;

    color:#777;

    font-size:14px;

}

.pfl-hub-close{

    border:none;

    background:none;

    cursor:pointer;

    width:42px;

    height:42px;

    border-radius:50%;

}

.pfl-hub-close:hover{

    background:#f5f5f5;

}

/* ==========================================================
   Menu
========================================================== */

.pfl-hub-menu{

    padding:18px;

}

.pfl-hub-menu__list{

    list-style:none;

    margin:0;

    padding:0;

}

.pfl-hub-menu__button{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    padding:16px;

    background:none;

    border:none;

    text-decoration:none;

    color:#222;

    border-radius:14px;

    cursor:pointer;

    transition:.18s;

}

.pfl-hub-menu__button:hover{

    background:#f6f6f6;

}

.pfl-hub-menu__arrow{

    margin-left:auto;

    opacity:.5;

}

.pfl-hub-menu__divider{

    height:1px;

    margin:12px 0;

    background:#ececec;

}

/* ==========================================================
   Dashboard
========================================================== */

.pfl-hub__content{

    flex:1;

    overflow:auto;

    padding:20px;

}

.pfl-hub-cards{

    display:grid;

    gap:16px;

    margin-top:24px;

}

.pfl-hub-card{

    display:flex;

    align-items:center;

    gap:16px;

    width:100%;

    padding:18px;

    border:none;

    background:#fafafa;

    border-radius:18px;

    cursor:pointer;

    transition:.18s;

}

.pfl-hub-card:hover{

    background:#f2f2f2;

}

.pfl-hub-card__icon{

    font-size:28px;

}

.pfl-hub-card__title{

    font-weight:600;

}

.pfl-hub-card__count{

    margin-left:auto;

    background:#111;

    color:#fff;

    padding:4px 10px;

    border-radius:999px;

    font-size:13px;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .pfl-hub{

        align-items:flex-end;

    }

    .pfl-hub__panel{

        width:100%;
        max-width:none;

        height:88vh;

        border-radius:24px 24px 0 0;

        transform:translateY(100%);
    }

    .pfl-hub.is-open
    .pfl-hub__panel{

        transform:translateY(0);

    }

}
/* ==========================================================
   Hub Pages
========================================================== */

.pfl-hub-page{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.pfl-hub-page__header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
}

.pfl-hub-page__heading{
    flex:1;
}

.pfl-hub-page__title{
    margin:0;
    font-size:24px;
    font-weight:700;
    line-height:1.2;
}

.pfl-hub-page__subtitle{
    margin:6px 0 0;
    color:#777;
    font-size:14px;
}

.pfl-hub-page__content{
    display:flex;
    flex-direction:column;
    gap:18px;
}

/* ==========================================================
   Buttons
========================================================== */

.pfl-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 18px;

    border:1px solid #d8d8d8;
    border-radius:12px;

    background:#ffffff;
    color:#222;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:.18s;
}

.pfl-button:hover{
    background:#f5f5f5;
}

.pfl-button--primary{
    border-color:#111;
    background:#111;
    color:#fff;
}

.pfl-button--primary:hover{
    background:#222;
}

.pfl-button--danger{
    border-color:#dc2626;
    color:#dc2626;
}

.pfl-button--danger:hover{
    background:#fff5f5;
}

/* ==========================================================
   Ad List
========================================================== */

.pfl-ad-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.pfl-ad-card{

    display:flex;

    gap:18px;

    padding:18px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    transition:.18s;

}

.pfl-ad-card:hover{

    border-color:#d9d9d9;

    box-shadow:0 10px 24px rgba(0,0,0,.05);

}

.pfl-ad-card__image{

    flex:0 0 120px;

}

.pfl-ad-card__image img{

    display:block;

    width:120px;

    height:120px;

    border-radius:14px;

    object-fit:cover;

    background:#f3f3f3;

}

.pfl-ad-card__body{

    flex:1;

    display:flex;

    flex-direction:column;

    gap:14px;

}

.pfl-ad-card__title{

    margin:0;

    font-size:18px;

    font-weight:700;

}

.pfl-ad-card__meta{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.pfl-ad-card__price{

    font-size:18px;

    font-weight:700;

}

.pfl-ad-card__status{

    display:inline-flex;

    align-items:center;

    padding:4px 10px;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    background:#ececec;

}

.pfl-ad-card__status.is-active{

    background:#dcfce7;

    color:#166534;

}

.pfl-ad-card__actions{

    display:flex;

    gap:10px;

    margin-top:auto;

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px){

    .pfl-hub-page__header{

        flex-direction:column;

        align-items:stretch;

    }

    .pfl-ad-card{

        flex-direction:column;

    }

    .pfl-ad-card__image{

        flex:0;

    }

    .pfl-ad-card__image img{

        width:100%;

        height:220px;

    }

    .pfl-ad-card__actions{

        flex-direction:column;

    }

    .pfl-button{

        width:100%;

    }

}