/*
======================================================
WatchWhere My Playlists
Version 2.1 FINAL
Part 1 - Foundation
======================================================
*/

:root{

    --ww-bg:#0b1120;
    --ww-surface:#111827;
    --ww-surface-2:#1f2937;

    --ww-border:#374151;

    --ww-text:#ffffff;
    --ww-text-soft:#9ca3af;

    --ww-primary:#ff2d7a;
    --ww-primary-hover:#ff0f68;

    --ww-success:#16a34a;
    --ww-danger:#dc2626;

    --ww-radius:16px;

    --ww-speed:.30s;

    --ww-shadow:
        0 12px 30px rgba(0,0,0,.28);

}

/* ===========================
   Page
=========================== */

.ww-mp-wrapper{

    max-width:1450px;

    margin:40px auto;

    padding:0 24px;

}

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

.ww-mp-header{

    margin-bottom:42px;

}

.ww-mp-page-title{

    margin:0;

    color:var(--ww-text);

    font-size:42px;

    font-weight:800;

    letter-spacing:-.5px;

}

.ww-mp-subtitle{

    margin-top:10px;

    color:var(--ww-text-soft);

    font-size:16px;

    line-height:1.6;

}

/* ===========================
   Playlist Card
=========================== */

.ww-mp-playlist-card{

    background:var(--ww-surface);

    border:1px solid var(--ww-border);

    border-radius:var(--ww-radius);

    margin-bottom:36px;

    padding:28px;

    transition:
        transform var(--ww-speed),
        border-color var(--ww-speed),
        box-shadow var(--ww-speed);

}

.ww-mp-playlist-card:hover{

    transform:translateY(-4px);

    border-color:var(--ww-primary);

    box-shadow:var(--ww-shadow);

}

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

.ww-mp-playlist-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:28px;

}

.ww-mp-playlist-name{

    margin:0;

    color:#fff;

    font-size:28px;

    font-weight:700;

}

.ww-mp-playlist-count{

    margin-top:6px;

    color:var(--ww-text-soft);

    font-size:14px;

}
/* ======================================================
   Playlist Actions
====================================================== */

.ww-mp-playlist-actions{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.ww-mp-menu-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:12px;

    background:#263248;

    color:#fff;

    font-size:26px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:all .25s ease;

}

.ww-mp-menu-btn:hover{

    background:var(--ww-primary);

    transform:scale(1.05);

}

.ww-mp-dropdown{

    position:absolute;

    top:58px;

    right:0;

    width:220px;

    background:#111827;

    border:1px solid var(--ww-border);

    border-radius:14px;

    overflow:hidden;

    display:none;

    z-index:1000;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.ww-mp-playlist-actions.open .ww-mp-dropdown{

    display:block;

}

.ww-mp-dropdown button{

    width:100%;

    padding:15px 18px;

    border:none;

    background:none;

    color:#fff;

    text-align:left;

    cursor:pointer;

    font-size:15px;

    transition:.25s;

}

.ww-mp-dropdown button:hover{

    background:var(--ww-primary);

}

/* ======================================================
   Movie Grid
====================================================== */

.ww-mp-movie-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(185px,1fr));

    gap:24px;

}

/* ======================================================
   Movie Card
====================================================== */

.ww-mp-movie-card{

    position:relative;

    border-radius:16px;

    overflow:hidden;

    background:var(--ww-surface-2);

    transition:all .30s ease;

}

.ww-mp-movie-card:hover{

    transform:translateY(-8px);

}

.ww-mp-movie-link{

    position:relative;

    display:block;

    overflow:hidden;

    text-decoration:none;

    color:#fff;

}

.ww-mp-poster{

    display:block;

    width:100%;

    aspect-ratio:2/3;

    object-fit:cover;

    transition:transform .40s ease;

}

.ww-mp-movie-card:hover .ww-mp-poster{

    transform:scale(1.03);

}

.ww-mp-no-poster{

    width:100%;

    aspect-ratio:2/3;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2d3748;

    color:#bbb;

}
/* ======================================================
   Movie Overlay
====================================================== */

.ww-mp-overlay{

    position:absolute;

    inset:0;

    background:transparent;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:all .30s ease;

}

.ww-mp-movie-card:hover .ww-mp-overlay{

    opacity:1;

    visibility:visible;

}

.ww-mp-play-circle{

    width:74px;

    height:74px;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    -webkit-backdrop-filter:blur(8px);

    border:2px solid rgba(255,255,255,.9);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    cursor:pointer;

    transition:all .25s ease;

}

.ww-mp-play-circle:hover{

    transform:scale(1.08);

    background:var(--ww-primary);

    border-color:var(--ww-primary);

}

.ww-mp-overlay .ww-mp-remove{

    margin-top:24px;

    width:150px;

    padding:12px;

    border:none;

    border-radius:12px;

    background:var(--ww-danger);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:all .25s ease;

}

.ww-mp-overlay .ww-mp-remove:hover{

    background:#991b1b;

    transform:translateY(-2px);

}

/* ======================================================
   Movie Title
====================================================== */

.ww-mp-movie-title{

    padding:14px 10px 18px;

    text-align:center;

    font-size:15px;

    font-weight:600;

    color:#fff;

    line-height:1.5;

    min-height:60px;

    background:var(--ww-surface-2);

}
/*======================================================
PART 4
Buttons
Empty State
Toast
Responsive
======================================================*/

/*------------------------------------------------------
Remove Button
------------------------------------------------------*/

.ww-mp-remove{

display:inline-flex;

align-items:center;

justify-content:center;

width:160px;

height:46px;

margin-top:18px;

border:none;

border-radius:12px;

background:#dc2626;

color:#fff;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:.25s;

box-shadow:0 8px 20px rgba(0,0,0,.25);

}

.ww-mp-remove:hover{

background:#b91c1c;

transform:translateY(-2px);

}

/*------------------------------------------------------
Empty Playlist
------------------------------------------------------*/

.ww-mp-empty{

padding:90px 30px;

text-align:center;

background:#111827;

border-radius:20px;

border:1px solid #293548;

}

.ww-mp-empty-icon{

font-size:70px;

margin-bottom:20px;

}

.ww-mp-empty h2{

margin:0;

color:#fff;

font-size:34px;

}

.ww-mp-empty p{

margin-top:14px;

color:#9ca3af;

font-size:16px;

}

/*------------------------------------------------------
Error
------------------------------------------------------*/

.ww-mp-error{

padding:18px 20px;

background:#7f1d1d;

border-radius:14px;

color:#fff;

font-weight:600;

}

/*------------------------------------------------------
Toast
------------------------------------------------------*/

#ww-mp-toast{

position:fixed;

right:25px;

bottom:25px;

padding:14px 22px;

border-radius:12px;

display:none;

font-size:14px;

font-weight:600;

color:#fff;

z-index:999999;

box-shadow:0 12px 30px rgba(0,0,0,.35);

}

#ww-mp-toast.success{

background:#16a34a;

}

#ww-mp-toast.error{

background:#dc2626;

}

/*------------------------------------------------------
Responsive
------------------------------------------------------*/

@media(max-width:991px){

.ww-mp-playlist-header{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.ww-mp-movie-grid{

grid-template-columns:repeat(auto-fill,minmax(170px,1fr));

}

}

@media(max-width:768px){

.ww-mp-wrapper{

padding:0 15px;

}

.ww-mp-page-title{

font-size:34px;

}

.ww-mp-playlist-card{

padding:20px;

}

.ww-mp-movie-grid{

grid-template-columns:repeat(2,1fr);

gap:18px;

}

}

@media(max-width:480px){

.ww-mp-playlist-name{

font-size:18px;

}

.ww-mp-movie-grid{

grid-template-columns:repeat(2,1fr);

gap:14px;

}

.ww-mp-remove{

width:140px;

}

}
/*======================================================
PART 5
Final Polish
Animations
Accessibility
======================================================*/

/*----------------------------------
Smooth Animations
-----------------------------------*/

*,
*::before,
*::after{

box-sizing:border-box;

}

.ww-mp-playlist-card,
.ww-mp-movie-card,
.ww-mp-menu-btn,
.ww-mp-dropdown,
.ww-mp-remove,
.ww-mp-play-circle,
.ww-mp-overlay{

transition:all .30s ease;

}

/*----------------------------------
Movie Card Shadow
-----------------------------------*/

.ww-mp-movie-card{

box-shadow:

0 12px 28px rgba(0,0,0,.18);

}

.ww-mp-movie-card:hover{

box-shadow:

0 22px 48px rgba(0,0,0,.40);

}

/*----------------------------------
Poster Quality
-----------------------------------*/

.ww-mp-poster{

background:#111827;

user-select:none;

-webkit-user-drag:none;

}

/*----------------------------------
Overlay Blur
-----------------------------------*/

.ww-mp-overlay{



}

/*----------------------------------
Movie Title
-----------------------------------*/

.ww-mp-movie-title{

overflow:hidden;

display:-webkit-box;

-webkit-box-orient:vertical;

-webkit-line-clamp:2;

text-overflow:ellipsis;

letter-spacing:.2px;

}

/*----------------------------------
Dropdown Animation
-----------------------------------*/

.ww-mp-dropdown{

transform:translateY(10px);

opacity:0;

pointer-events:none;

}

.ww-mp-playlist-actions.open .ww-mp-dropdown{

transform:translateY(0);

opacity:1;

pointer-events:auto;

}

/*----------------------------------
Keyboard Accessibility
-----------------------------------*/

.ww-mp-menu-btn:focus,

.ww-mp-remove:focus,

.ww-mp-dropdown button:focus{

outline:2px solid #ff2d7a;

outline-offset:2px;

}

/*----------------------------------
Selection
-----------------------------------*/

.ww-mp-wrapper ::selection{

background:#ff2d7a;

color:#fff;

}

/*----------------------------------
Scrollbar
-----------------------------------*/

.ww-mp-wrapper ::-webkit-scrollbar{

width:10px;

height:10px;

}

.ww-mp-wrapper ::-webkit-scrollbar-thumb{

background:#39465c;

border-radius:20px;

}

.ww-mp-wrapper ::-webkit-scrollbar-thumb:hover{

background:#56657f;

}

/*----------------------------------
Future Utility Classes
-----------------------------------*/

.ww-hidden{

display:none !important;

}

.ww-flex{

display:flex;

}

.ww-center{

display:flex;

align-items:center;

justify-content:center;

}

.ww-text-center{

text-align:center;

}
/*====================================================
Movie Menu
====================================================*/

.ww-mp-movie-card{

    position:relative;

}

.ww-mp-movie-actions{

    position:absolute;

    top:8px;

    right:8px;

    z-index:50;

}

.ww-mp-movie-menu-btn{

    width:36px;

    height:36px;

    border:none;

    border-radius:10px;

    background:#263248;

    color:#fff;

    font-size:22px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

}

.ww-mp-movie-menu-btn:hover{

    background:#ff2d7a;

}

.ww-mp-movie-dropdown{

    position:absolute;

    top:50px;

    right:0;

    width:170px;

    background:#111827;

    border:1px solid #374151;

    border-radius:12px;

    overflow:hidden;

    display:none;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.ww-mp-movie-dropdown button{

    width:100%;

    padding:12px 14px;

    border:none;

    background:none;

    color:#fff;

    text-align:left;

    cursor:pointer;

}

.ww-mp-movie-dropdown button:hover{

    background:#ff2d7a;

}

.ww-mp-movie-actions.open .ww-mp-movie-dropdown{

    display:block;

}
/*======================================================
  PUBLIC PLAYLIST
  WatchWhere Shared Playlist Design
======================================================*/

.ww-mp-public-playlist{

    max-width:1450px;
    margin:40px auto;
    padding:0 24px;

}

/* Public Playlist Header */

.ww-mp-public-playlist .ww-mp-header{

    position:relative;
    margin-bottom:38px;
    padding:30px 32px;

    background:
        linear-gradient(
            135deg,
            #151d30 0%,
            #111827 55%,
            #0b1120 100%
        );

    border:1px solid #374151;
    border-radius:20px;

    box-shadow:
        0 18px 45px rgba(0,0,0,.28);

    overflow:hidden;

}

/* Pink accent */

.ww-mp-public-playlist .ww-mp-header::before{

    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:5px;

    background:#ff2d7a;

}

/* Playlist title */

.ww-mp-public-playlist .ww-mp-page-title{

    position:relative;

    margin:0;

    font-size:38px;
    font-weight:800;

    color:#fff;

}

/* Public badge */

.ww-mp-public-playlist .ww-mp-subtitle{

    display:inline-flex;

    align-items:center;

    margin-top:14px;
    padding:7px 13px;

    border-radius:999px;

    background:rgba(255,45,122,.12);

    border:1px solid rgba(255,45,122,.35);

    color:#ff5c99;

    font-size:13px;
    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

}

/* Public movie grid */

.ww-mp-public-playlist .ww-mp-movie-grid{

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(185px,1fr)
        );

    gap:26px;

}

/* Public movie cards */

.ww-mp-public-playlist .ww-mp-movie-card{

    background:#111827;

    border:1px solid #263248;

    border-radius:16px;

    overflow:hidden;

    box-shadow:
        0 12px 28px rgba(0,0,0,.22);

}

/* Hover */

.ww-mp-public-playlist .ww-mp-movie-card:hover{

    transform:translateY(-8px);

    border-color:#ff2d7a;

    box-shadow:
        0 22px 48px rgba(0,0,0,.42);

}

/* Public poster */

.ww-mp-public-playlist .ww-mp-poster{

    width:100%;
    aspect-ratio:2/3;

    object-fit:cover;

}

/* Movie title */

.ww-mp-public-playlist .ww-mp-movie-title{

    padding:14px 12px 17px;

    background:#111827;

    color:#fff;

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

    text-align:center;

}

/* Empty public playlist */

.ww-mp-public-playlist .ww-mp-no-movies{

    grid-column:1 / -1;

    padding:70px 25px;

    text-align:center;

    background:#111827;

    border:1px solid #374151;

    border-radius:18px;

    color:#9ca3af;

    font-size:16px;

}

/* Mobile */

@media(max-width:768px){

    .ww-mp-public-playlist{

        margin:25px auto;
        padding:0 15px;

    }

    .ww-mp-public-playlist .ww-mp-header{

        padding:24px 22px;

        margin-bottom:28px;

    }

    .ww-mp-public-playlist .ww-mp-page-title{

        font-size:30px;

    }

    .ww-mp-public-playlist .ww-mp-movie-grid{

        grid-template-columns:
            repeat(2,1fr);

        gap:16px;

    }

}

/* Small phones */

@media(max-width:480px){

    .ww-mp-public-playlist .ww-mp-page-title{

        font-size:25px;

    }

    .ww-mp-public-playlist .ww-mp-header{

        padding:20px 18px;

    }

    .ww-mp-public-playlist .ww-mp-movie-grid{

        gap:12px;

    }

}
/*======================================================
  PUBLIC PLAYLIST — COMPACT HEADER
======================================================*/

.ww-mp-public-playlist .ww-mp-header{

    padding:22px 32px;
    margin-bottom:30px;

}

.ww-mp-public-playlist .ww-mp-page-title{

    font-size:34px;
    line-height:1.2;

}

.ww-mp-public-playlist .ww-mp-subtitle{

    margin-top:10px;

}
/* PUBLIC PLAYLIST - FORCE COMPACT HEADER */

.ww-mp-public-playlist .ww-mp-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 30px !important;
    margin-bottom: 28px !important;
    box-sizing: border-box !important;
}

.ww-mp-public-playlist .ww-mp-page-title {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

.ww-mp-public-playlist .ww-mp-subtitle {
    margin: 10px 0 0 !important;
}
/*======================================================
  PUBLIC PLAYLIST — CENTER MOVIE GRID
======================================================*/

.ww-mp-public-playlist .ww-mp-movie-grid {

    justify-content: center;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(185px, 210px)
        );

    gap: 26px;

}