/*

 * PDR Love v0.2.0 – HEAD CSS

 * Automatikusan kinyerve a működő V020 modulból.

 * Cél: FOUC megszüntetése.

 */

.pl20-love,

.pl20-requests{

    max-width:980px;

    margin:12px auto;

    padding:12px;

    color:#fff;

    background:

        linear-gradient(

            145deg,

            #16090e,

            #09090c 62%,

            #170905

        );

    border:1px solid #432b35;

    border-radius:16px;

    box-shadow:0 16px 45px #0008

}



.pl20-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-bottom:4px

}



.pl20-heading>div{

    font-size:24px;

    font-weight:950

}



.pl20-heading small{

    opacity:.72;

    font-size:11px

}



.pl20-intro{

    margin:4px 0 11px;

    font-size:12px;

    opacity:.84

}



.pl20-grid{

    display:grid;

    grid-template-columns:

        repeat(

            auto-fill,

            minmax(140px,1fr)

        );

    gap:9px;

    align-items:start

}



.pl20-card{

    width:100%;

    max-width:175px;

    overflow:hidden;

    background:#111116;

    border:1px solid #382d34;

    border-radius:13px;

    box-shadow:0 10px 28px #0008

}



.pl20-photo{

    display:block;

    width:100%;

    padding:0;

    border:0;

    background:#151519;

    cursor:pointer

}



.pl20-photo img{

    display:block;

    width:100%;

    height:185px;

    object-fit:cover

}



.pl20-card-body{

    padding:7px

}



.pl20-name{

    display:block;

    width:100%;

    padding:0;

    margin:0 0 3px;

    border:0;

    background:none;

    color:#fff;

    text-align:left;

    font-size:13px;

    font-weight:950;

    cursor:pointer

}



.pl20-city{

    font-size:9px;

    opacity:.75;

    margin:2px 0

}



.pl20-mode{

    display:inline-block;

    margin:3px 0;

    padding:4px 6px;

    border-radius:999px;

    background:#451522;

    color:#ff8ea5;

    font-size:8px;

    font-weight:900

}



.pl20-bio{

    margin:5px 0;

    font-size:9px;

    line-height:1.35;

    opacity:.85

}



.pl20-actions{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin-top:6px

}



.pl20-action,

.pl20-message,

.pl20-more,

.pl20-profile-go{

    border:0;

    border-radius:8px;

    padding:7px 7px;

    color:#fff;

    font-size:9px;

    font-weight:900;

    cursor:pointer

}



.pl20-action.friend{

    background:

        linear-gradient(

            #35353d,

            #202026

        )

}



.pl20-action.date{

    background:

        linear-gradient(

            #ff5474,

            #d91d48

        )

}



.pl20-action.pending{

    background:#4b371f;

    color:#ffd58a;

    cursor:default

}



.pl20-action.accepted{

    background:#173e24;

    color:#9bf0b3;

    cursor:default

}



.pl20-message{

    background:

        linear-gradient(

            #ff6c30,

            #df4015

        )

}



.pl20-load-zone{

    padding-top:11px;

    text-align:center

}



.pl20-more{

    background:#292830;

    font-size:11px

}



.pl20-sentinel{

    height:2px

}



.pl20-end,

.pl20-empty{

    padding:9px 11px;

    border:1px solid #286238;

    border-radius:10px;

    background:#142a1b;

    font-size:11px

}



.pl20-strip{

    max-width:980px;

    margin:12px auto;

    padding:8px 9px;

    color:#fff;

    overflow:hidden;

    background:#101014;

    border:1px solid #382a32;

    border-radius:14px

}



.pl20-strip-title{

    margin-bottom:7px;

    font-size:11px;

    font-weight:950

}



.pl20-marquee{

    overflow:hidden

}



.pl20-track{

    display:flex;

    width:max-content;

    gap:7px;

    will-change:transform;

    animation:

        pl20marquee

        var(--pl20-duration)

        linear

        infinite

}



.pl20-marquee:hover .pl20-track{

    animation-play-state:paused

}



.pl20-mini{

    flex:0 0 84px;

    padding:5px;

    border:1px solid #352b32;

    border-radius:11px;

    background:#151419;

    color:#fff;

    text-align:center;

    cursor:pointer

}



.pl20-mini img{

    width:44px;

    height:44px;

    border:2px solid #ff5b20;

    border-radius:50%;

    object-fit:cover

}



.pl20-mini strong{

    display:block;

    margin-top:2px;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;

    font-size:8px

}



.pl20-mini small{

    display:block;

    margin-top:2px;

    color:#ff8ba2;

    font-size:6.5px

}



@keyframes pl20marquee{



    from{

        transform:translateX(0)

    }



    to{

        transform:translateX(

            calc(-50% - 3.5px)

        )

    }

}



.pl20-modal{

    position:fixed;

    inset:0;

    z-index:1000010;

    display:none;

    align-items:center;

    justify-content:center;

    padding:18px;

    background:#000d;

    backdrop-filter:blur(7px)

}



.pl20-modal.on{

    display:flex

}



.pl20-modal-card{

    position:relative;

    width:min(760px,96vw);

    max-height:92vh;

    overflow:auto;

    padding:15px;

    color:#fff;

    background:

        linear-gradient(

            145deg,

            #1e0d14,

            #09090d

        );

    border:1px solid #713347;

    border-radius:20px;

    box-shadow:0 26px 90px #000

}



.pl20-modal-x{

    position:absolute;

    right:9px;

    top:9px;

    z-index:2;

    width:34px;

    height:34px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#29252a;

    color:#fff;

    font-size:22px;

    cursor:pointer

}



.pl20-profile-layout{

    display:grid;

    grid-template-columns:minmax(240px,330px) 1fr;

    gap:16px

}



.pl20-profile-main{

    display:block;

    width:100%;

    max-height:500px;

    object-fit:cover;

    border-radius:15px

}



.pl20-thumbs{

    display:flex;

    gap:7px;

    margin-top:7px;

    overflow-x:auto

}



.pl20-thumbs button{

    padding:0;

    border:0;

    background:none;

    cursor:pointer

}



.pl20-thumbs img{

    width:56px;

    height:56px;

    border-radius:9px;

    object-fit:cover

}



.pl20-profile-love{

    color:#ff5f7f;

    font-weight:900

}



.pl20-profile-info h2{

    margin:4px 0 6px;

    color:#fff

}



.pl20-profile-mode{

    display:inline-block;

    padding:5px 8px;

    border-radius:999px;

    background:#451522;

    color:#ff95aa;

    font-size:11px;

    font-weight:900

}



.pl20-profile-bio{

    margin:12px 0;

    padding:10px;

    border:1px solid #3d3037;

    border-radius:11px;

    background:#111116;

    line-height:1.5

}



.pl20-modal-message{

    font-size:11px

}



.pl20-events{

    position:fixed;

    left:16px;

    bottom:16px;

    z-index:1000008;

    display:flex;

    flex-direction:column;

    gap:9px;

    width:min(

        390px,

        calc(100vw - 28px)

    )

}



.pl20-event{

    position:relative;

    padding:13px;

    color:#fff;

    background:

        linear-gradient(

            145deg,

            #1e0d14,

            #09090d

        );

    border:1px solid #713247;

    border-radius:16px;

    box-shadow:0 20px 70px #000

}



.pl20-event.accepted-event{

    border-color:#2b7543

}



.pl20-event-head{

    display:flex;

    align-items:center;

    gap:9px;

    padding-right:24px;

    font-size:12px

}



.pl20-event-avatar{

    flex:0 0 auto;

    padding:0;

    border:0;

    background:none;

    cursor:pointer

}



.pl20-event-avatar img{

    width:52px;

    height:52px;

    border:2px solid #ff4269;

    border-radius:50%;

    object-fit:cover

}



.pl20-event-head strong{

    display:block;

    margin-bottom:2px

}



.pl20-event-actions{

    display:flex;

    gap:6px;

    margin-top:9px

}



.pl20-event-ok,

.pl20-event-no{

    border:0;

    border-radius:8px;

    padding:7px 9px;

    color:#fff;

    font-size:10px;

    font-weight:900;

    cursor:pointer

}



.pl20-event-ok{

    background:#206333

}



.pl20-event-no{

    background:#7b263c

}



.pl20-event-x{

    position:absolute;

    right:7px;

    top:7px;

    width:28px;

    height:28px;

    padding:0;

    border:0;

    border-radius:50%;

    background:#29252a;

    color:#fff;

    font-size:18px;

    cursor:pointer

}



.pl20-profile-go{

    margin-top:10px;

    background:#246036

}



.pl20-requests h2{

    margin:3px 0 10px

}



.pl20-request-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin:7px 0;

    padding:8px;

    background:#131318;

    border:1px solid #382e34;

    border-radius:11px

}



.pl20-request-user{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:0;

    border:0;

    background:none;

    color:#fff;

    text-align:left;

    cursor:pointer

}



.pl20-request-user img{

    width:44px;

    height:44px;

    border-radius:50%;

    object-fit:cover

}



.pl20-request-user span{

    min-width:0

}



.pl20-request-user b,

.pl20-request-user small{

    display:block

}



.pl20-request-user small{

    opacity:.72;

    font-size:9px

}



.pl20-toast{

    position:fixed;

    left:50%;

    bottom:19px;

    transform:translateX(-50%);

    z-index:1000015;

    max-width:90vw;

    padding:8px 12px;

    border:1px solid #4d3942;

    border-radius:999px;

    background:#111116;

    color:#fff;

    font-size:11px;

    box-shadow:0 12px 40px #000

}



@media(max-width:700px){



    .pl20-love,

    .pl20-strip,

    .pl20-requests{

        width:100%;

        max-width:none;

        margin:7px 0;

        padding:9px

    }



    .pl20-heading>div{

        font-size:20px

    }



    .pl20-grid{

        display:flex;

        gap:8px;

        overflow-x:auto;

        padding:2px 2px 8px;

        scroll-snap-type:x mandatory;

        -webkit-overflow-scrolling:touch

    }



    .pl20-card{

        flex:

            0 0

            min(

                67vw,

                215px

            );

        max-width:215px;

        scroll-snap-align:center

    }



    .pl20-photo img{

        height:225px

    }



    .pl20-profile-layout{

        grid-template-columns:1fr

    }



    .pl20-profile-main{

        max-height:52vh

    }



    .pl20-events{

        left:7px;

        bottom:7px;

        width:calc(100vw - 14px)

    }



    .pl20-request-row{

        align-items:flex-start;

        flex-direction:column

    }

}