@layer base, components, utilities;

@layer base {
    @font-face {
        font-family: 'Voltaire';
        src: url('font/Voltaire-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    html {
        font-size: 16px;
    }

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

    body {
        font-family: Voltaire, Arial, sans-serif;
        background: #000;
        color: #fff;
    }

     h2 {
        font-size: 2.2rem;
        margin-bottom: 20px;
        font-weight: normal;
        padding-top: 20px;
    }

    a {
        color: #71deff;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

@layer components {
    header {
        position: sticky;
        top: -178px;
        z-index: 10;

        & .logo {
            text-align: center;
            padding: 50px 20px;
            background: url('../img/top.webp') no-repeat center center;
            background-size: cover;
            height: 178px;
            display: flex;
            justify-content: center;
            align-items: center;

            & img {
                width: 100%;
                max-width: 616px;
                height: auto;
            }
        }

        & nav {
            background: #313131;
            height: 57px;
            display: flex;
            align-items: center;
            border-bottom: outset;
            border-width: medium;
            border-color: black;

            & .btn-mobile {
                background: transparent;
                border: none;
                padding-inline: 10px;
                cursor: pointer;
                display: none;
            }

            & ul {
                list-style: none;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 0 20px;
                width: 100%;

                & li {
                    margin-right: 20px;

                    & a {
                        color: #fff;
                        text-decoration: none;
                        font-size: 1.5rem;
                        text-transform: uppercase;
                        display: block;
                        transition: color 0.3s ease;

                        &:hover {
                            color: #ff805a;
                        }

                        &.active {
                            color: #ff805a;
                            transition: color 0.3s ease;
                        }
                                            }

                    &:not(.login) a {
                        transition: color 0.3s ease, transform 0.3s ease-in-out;
                    }

                    &:not(.login) a:hover {
                        animation: pulse 0.3s ease-in-out;
                    }

                    &.login {
                        margin-left: auto;

                        & a {
                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
                            display: flex;
                            align-items: center;
                            text-transform: none;
                            font-size: 1.1rem;

                            &::before {
                                content: url('../img/ico-login.svg');
                                margin-right: 5px;
                            }
                        }
                    }
                }
            }
        }
    }

    #adult-warning {
        position: fixed;
        inset: 0;
        background: black;
        background-image: url('../img/adult-screen.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        z-index: 11;

        & .logo {
            height: auto;
        }

        & .warning {
            font-size: 1.2rem;
            text-align: justify;
        }

        & .logo, .warning {
            width: 90%;
            max-width: 960px;
        }

        & .buttons {
            display: flex;
            flex-wrap: wrap;
            gap: inherit;
            justify-content: center;
        }
    }
            
    .banner {
        width: 100%;
        overflow: hidden;
        position: relative;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    .content {
        max-width: 1200px;
        margin: 0 auto;
        padding-inline: 20px;
        padding-bottom: 30px;
        text-align: center;
        background: #111111;
    }

    .title {
        font-size: 3.4rem;
        text-transform: uppercase;
        position: relative;
        padding: 30px 0;
        display: flex;
        align-items: center;
        justify-content: center;

        &::before,
        &::after {
            content: '';
            width: 100px;
            height: 1px;
            background: #fff;
            margin-inline: 10px;
        }
    }

    .textOnly {
        font-family: sans-serif;
        font-size: 1.2rem;
        text-align: left;

        p, table, li {
            margin-bottom: 1rem;
        }

        ul, ol {
            margin-top: 1rem;
            list-style-position: inside;
            padding-left: 1rem;
            text-indent: -1rem;
        }

        li {
            padding-left: 0.5rem;
        }
    }

    /*Subscription call to action*/
    .subsCall {
        background: #404040;
        padding: 20px;
        margin-left: -20px;
        margin-right: -20px;

        & p {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }

        p:last-of-type {
            font-size: 3rem;
            color: #ffb097;
            padding: 10px;
        }

        & .btn-sub {
            background: #ff7043;
            border: none;
            border-radius: 10px;
            padding: 5px 28px;
            color: #1a1a1a;
            font-family: 'Voltaire';
            font-size: 1.7rem;
            cursor: pointer;
            outline-style: solid;
            outline-color: #ffae94;
            outline-width: 0px;
            transition: background 0.3s ease;

            &:hover {
                background: #ff825b;
                outline-width: 2px;
            }
        }
    }

    .recent {
        margin-top: 20px;
    }

    .video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(248px, 30vw, 348px), 1fr));
        gap: 30px;
        margin-bottom: 40px;
        justify-content: center;

        & .video-item {
            position: relative;
            overflow: hidden;

            & a {
                display: block;
                text-decoration: none;
                color: inherit;
            }

            & img {
                cursor: pointer;
                width: 100%;
                height: auto;
                display: block;
                filter: brightness(1) sepia(0);
                transition: filter 0.3s;

                &:hover {
                    filter: brightness(1.4) sepia(0.5);
                }
            }

            & .video-title {
                display: flex;
                justify-content: space-between;
                background: black;

                & p {
                    font-size: 1.4em;
                    margin: 6px 8px;
                }
            }

            & .btn-buy {
                font-family: 'Voltaire';
                font-size: 1.4rem;
                border: none;
                padding: 5px 10px;
                color: #fff;
                cursor: pointer;
                background: red;
                transition: background 0.3s ease;

                &:hover {
                    background: #5c0000;
                }
            }
        }
    }

    .btn-red {
        font-family: 'Voltaire', sans-serif;
        font-size: 1.3rem;
        text-shadow: 0px 2px 4px #000000;
        color: #fff;
        background: linear-gradient(0deg, #490000, #c50000);
        padding: 5px 30px;
        border-radius: 10px;
        border: thin solid #494747;
        cursor: pointer;

        &:hover {
            background: linear-gradient(0deg, #8f0000, #ff1b1b);
        }
    }

    footer {
        font-family: sans-serif;
        background-color: #0c0c0c;
        color: #fff;
        text-align: center;

        & .footer-links {
            background-color: #1c1c1c;
            color: #71deff;
            padding: 10px 0;
            line-height: 30px;
        }

        & a {
                margin: 0 15px;
            }

        & .copyright {
            margin-top: 10px;
            font-size: 0.8rem;

            & p {
                padding: 5px 0;
            }

            p:last-of-type {
                padding-bottom: 15px;
            }

            & .separator {
                border-top: 1px solid #595959;
                margin: 10px 0;
            }
        }
    }

    .profile-banner {
        position: relative;
        margin-inline: -20px;
        aspect-ratio: 2 / 1;
        overflow: hidden;

        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        & .banner-label {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 10px 20px;
            font-size: 5rem;
            font-family: 'Voltaire', sans-serif;
            text-align: center;
        }
    }

    .contact {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        gap: 20px;

        & img {
            max-width: 100%;
            max-height: 510px;
            outline-style: solid;
            outline-width: thin;
            outline-color: #454545;
        }

        & div {
            font-family: sans-serif;
            font-size: 1.2rem;
            text-align: left;
            line-height: 35px;
            color: #f3f3f3;

            & p {
                margin: 40px 0;
            }
        }
    }

.faq-item {
    margin-bottom: 0.75rem;
    border: 1px solid #616161;
    border-radius: 0.5rem;
    background-color: #212121;
    transition: all 0.2s ease;

        &:hover {
            border-color: #616161;
        }

        & summary {
            padding: 1.25rem 1.5rem;
            cursor: pointer;
            list-style: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.4rem;
            transition: background-color 0.2s ease;

            &:hover {
            background-color: #000000;
            }

            &::-webkit-details-marker {
            display: none;
            }

            & .toggle-icon {
            font-size: 1.2rem;
            transition: transform 0.3s ease;
            margin-left: 1rem;
            flex-shrink: 0;
            }
        }

        &[open] {
            background-color: #0c0c0c;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            & summary {
            background-color: #393939;

            & .toggle-icon {
                transform: rotate(45deg);
            }
            }
        }

        & .faq-answer {
            font-family: sans-serif;
            text-align: left;
            max-height: 0;
            overflow: hidden;
            transition: 
                max-height 0.4s ease-out,
                padding 0.3s ease;
                padding: 0 1.5rem;
                line-height: 1.6;
        }

        &[open] .faq-answer {
            max-height: 100vh; /* Dynamic height solution */
            padding: 1.25rem 1.5rem;
            overflow: visible;
            animation: fadeIn 0.3s ease;
        }

        @media (max-width: 600px) {
            & summary {
            padding: 1rem;
            font-size: 1rem;
            }

            & .faq-answer {
            padding: 0 1rem;
            }

            &[open] .faq-answer {
            padding: 1rem;
            }
        }
    }

    @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
    }

    .video-description {
        font-family: sans-serif;
        font-size: 1.4rem;
        text-align: justify;
        line-height: 1.4;
        background-color: black;
        padding: 30px;
        margin-inline: -20px;
    }

    .purchase {
        font-size: 1.6rem;
        padding: 20px;

        & .buttons {
            text-align: left;
            display: inline-block;

            & div {
                margin: 20px;
            }

            & .btn-call {
            margin-top: 5px;
        }
        }
    }

    .video-gallery {
        font-size: 1.5rem;
        margin: 20px 0;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(clamp(248px, 29vw, 348px), 1fr));
        gap: 30px;
        margin-bottom: 20px;
        justify-items: center;

        & img {
            cursor: pointer;
            width: 100%;
            max-width: 350px;
            height: auto;
            filter: brightness(1) sepia(0);
            transition: filter 0.3s;

            &:hover {
                filter: brightness(1.4) sepia(0.5);
            }
        }          
    }  

    .video-player {
        position: relative;

        & video {
            width: -webkit-fill-available;
        }

        & .btn-play_custom {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            z-index: 9;
            transition: opacity 0.3s;
            opacity: 0.9;
        }

        & .btn-play_custom:hover {
            opacity: 1;
        }

        &.plyr--playing .btn-play_custom {
            display: none;
        }

        & img {
            width: 100%;
            max-width: 800px;
        }

        & h3 {
            font-size: 2rem;
            color: #ff4a21;
            margin-bottom: 10px;
        }
    }

    .lightbox {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 15;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease;

        &.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .lightbox-img {
            max-width: 90%;
            max-height: 80%;
            transition: opacity 0.3s ease;
            
            &.fade-out {
                opacity: 0;
            }
            
            &.fade-in {
                opacity: 0;
                animation: fadeIn 0.3s ease forwards;
            }
        }

        .close,
        .prev,
        .next {
            color: white;
            font-size: 2rem;
            position: absolute;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 1;
        }

        .close {
            top: 20px;
            right: 30px;
            font-size: 4rem;
        }

        .prev {
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .next {
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}

@layer utilities {

     @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
    }
}



/* =============================== */
/* ======== MOBILE QUERIES ====== */
/* =============================== */

@media (max-width: 705px) {

    h2 {
        font-size: 2rem;
    }

     .title {
        font-size: 2.4rem;
    }

    .subsCall {
        & p {
            font-size: 1.6rem;
        }

        p:last-of-type {
            font-size: 2.5rem;
        }

        & .btn-sub {
            font-size: 1.5rem;
        }
    }

    .contact {
        grid-template-columns: 1fr;

        & div {
            text-align: center;
        }
    }

    .video-description {
        font-size: 1.1rem;
    }
}

@media (max-width: 600px) {

    .faq-item {

        & summary {
            padding: 1rem;
            font-size: 1rem;
        }

            & .faq-answer {
            padding: 0 1rem;
        }

            &[open] .faq-answer {
            padding: 1rem;
        }
    }

    .purchase {
        & .buttons {
            div {
                display: flex;
                flex-direction: column;
            }
        }
    }
}

@media (max-width: 462px) {

 header {
        & nav {
            & .btn-mobile {
                display: flex;
            }

            & ul {
                display: none;
            }

            & ul.show {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                background: #313131;
                padding: 10px 0;
                height: 100vh;

                li {
                    margin: 10px 0;
                    text-align: center;
                }
            }
        }
    }
}

@media (max-width: 450px) {
    header {
        top: -110px;
            & .logo {
                height: 110px;
        }
    }

     .title {
        font-size: 2rem;

        &::before,
        &::after {
            width: 30px;
        }
    }

    .subsCall {
        & p {
            font-size: 1.3rem;
        }

        p:last-of-type {
            font-size: 2.2rem;
        }

        & .btn-sub {
            font-size: 1.3rem;
        }
    }
}

@media (max-width: 392px) {
    .btn-call {
        font-size: 1.3rem;
        margin-top: 5px;
    }

    .video-player {
        & h3 {
            font-size: 1.5rem;
        }
    }
}