/* ===========================
   Global Reset
=========================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #ff385c;
    --secondary: #6c63ff;
    --dark: #111827;
    --light: #f9fafb;
    --gray: #6b7280;
    --white: #ffffff;
    --shadow: 0 15px 35px rgba(0,0,0,0.15);
}

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, #111827, #1f2937);
    color: var(--white);
    min-height: 100vh;
    overflow-x: hidden;
}


/* ===========================
   Screens
=========================== */

.screen {
    display: none;
    min-height: 100vh;
    width: 100%;
}

.screen.active {
    display: flex;
    flex-direction: column;
}


/* ===========================
   Loading Screen
=========================== */

#loading-screen {

    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.loader {

    width: 60px;
    height: 60px;

    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.2);
    border-top-color: var(--primary);

    animation: spin 1s linear infinite;

}

#loading-screen h2 {

    margin-top: 20px;
    font-weight: 500;

}


@keyframes spin {

    to {
        transform: rotate(360deg);
    }

}


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

.top-bar,
.page-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px;

}


.top-bar h1 {

    font-size: 1.7rem;

}


button {

    cursor: pointer;
    border: none;
    font-family: inherit;

}


/* ===========================
   Swipe Screen
=========================== */


.card-container {

    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

}


.show-card {

    width: min(95%, 400px);

    height: 70vh;

    background: var(--white);

    color: var(--dark);

    border-radius: 25px;

    overflow: hidden;

    position: relative;

    box-shadow: var(--shadow);

    touch-action: none;

    transition: transform .3s ease;

}


.show-card img {

    width: 100%;
    height: 48%;

    object-fit: cover;

}


.card-content {

    padding: 20px;

}


.card-content h2 {

    font-size: 1.6rem;

    margin-bottom: 10px;

}


.genres {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin: 10px 0;

}


.genres span {

    background: var(--secondary);

    color: white;

    padding: 5px 12px;

    border-radius: 20px;

    font-size: .8rem;

}


.card-content p {

    color: var(--gray);

    font-size: .9rem;

    line-height: 1.5;

}


.details-btn {

    margin-top: 15px;

    padding: 10px 20px;

    background: var(--dark);

    color: white;

    border-radius: 20px;

}


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


.swipe-buttons {

    display: flex;

    justify-content: center;

    gap: 30px;

    padding: 20px;

}


.action-btn {

    width: 130px;

    height: 55px;

    border-radius: 30px;

    font-size: 1rem;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}


.skip {

    background:#ef4444;

}


.like {

    background:#22c55e;

}


.swipe-counter {

    text-align:center;

    padding-bottom:20px;

}



/* ===========================
   Recommendation Screen
=========================== */


.liked-info {

    text-align:center;

    padding:10px 25px;

}


.liked-info h3 {

    font-size:1rem;

}


.liked-info p {

    margin-top:8px;

    color:#facc15;

}


.recommendation-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(160px,1fr));

    gap:20px;

    padding:20px;

}


.recommendation-card {

    background:white;

    color:#111827;

    border-radius:18px;

    overflow:hidden;

    box-shadow:var(--shadow);

}


.recommendation-card img {

    width:100%;

    height:230px;

    object-fit:cover;

}


.recommendation-card .info {

    padding:15px;

}


.recommendation-card h3 {

    font-size:1rem;

}


.recommendation-card button {

    margin-top:10px;

    width:100%;

    padding:8px;

    border-radius:20px;

    background:var(--secondary);

    color:white;

}



/* ===========================
   Details Screen
=========================== */


.details-container {

    display:flex;

    flex-direction:column;

    gap:20px;

    padding:20px;

}


.details-container img {

    width:100%;

    max-width:350px;

    margin:auto;

    border-radius:25px;

}


.details-content {

    background:white;

    color:var(--dark);

    padding:25px;

    border-radius:25px;

}


.details-content h1 {

    margin-bottom:15px;

}


.detail-row {

    display:flex;

    justify-content:space-between;

    margin:10px 0;

}


.save-btn {

    margin-top:20px;

    width:100%;

    padding:15px;

    border-radius:30px;

    background:var(--primary);

    color:white;

    font-size:1rem;

}



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


.back-btn {

    background:white;

    color:black;

    width:45px;

    height:45px;

    border-radius:50%;

}



/* ===========================
   Modal
=========================== */


.modal {

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

}


.modal.active {

    display:flex;

}


.modal-content {

    width:90%;

    max-width:600px;

    background:white;

    color:black;

    border-radius:25px;

    padding:20px;

}


.modal-header {

    display:flex;

    justify-content:space-between;

}


.saved-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));

    gap:15px;

    margin-top:20px;

}


/* ===========================
   Desktop Improvements
=========================== */


@media(min-width:768px){


    .details-container {

        flex-direction:row;

        align-items:center;

        justify-content:center;

    }


    .details-content {

        max-width:600px;

    }


    .show-card {

        height:75vh;

    }

}


/* ===========================
   Swipe Animations
=========================== */


.swipe-right {

    animation: swipeRight .5s forwards;

}


.swipe-left {

    animation: swipeLeft .5s forwards;

}


@keyframes swipeRight {

    to {

        transform:translateX(120vw) rotate(25deg);

        opacity:0;

    }

}


@keyframes swipeLeft {

    to {

        transform:translateX(-120vw) rotate(-25deg);

        opacity:0;

    }

}