/*
 * ==========================================================
 * DOWNLOAD PAGE
 * Premium Flat / Modern Music Interface
 *
 * Page-specific stylesheet
 * Intended for: Download Page template only
 *
 * Accent: #0b3fd9
 * ==========================================================
 */


/* ==========================================================
   THEME VARIABLES
   ========================================================== */

.page-cdn {

    --download-blue: #0b3fd9;
    --download-blue-dark: #082fa8;
    --download-blue-soft: #eef3ff;

    --download-black: #111318;
    --download-black-soft: #252830;

    --download-text: #17191e;
    --download-muted: #737780;

    --download-surface: #ffffff;
    --download-surface-soft: #f6f7f9;

    --download-border: #e5e7eb;
    --download-border-dark: #d9dce2;

    --download-radius-xl: 26px;
    --download-radius-lg: 18px;
    --download-radius-md: 13px;
    --download-radius-sm: 10px;

    --download-shadow:
        0 14px 40px rgba(17, 19, 24, .06);

    --download-transition:
        180ms ease;
}


/* ==========================================================
   HEADER
   ========================================================== */

/*
 * Keep the existing download-page header behavior.
 */

.header-second,
.header-first .qs-toggle {
    display: none !important;
}

.header-first {
    position: relative;
    z-index: 99;
    background-color: transparent;
}


/* ==========================================================
   PAGE FOUNDATION
   ========================================================== */

.content-5p {

    padding-top: var(--header-h);

    margin-top: calc(var(--header-h) / -1);

    overflow: hidden;

    min-height: 100vh;
}


/* ==========================================================
   MAIN DOWNLOAD SECTION
   ========================================================== */

.page-cdn {

    --wrp-w: 640px;

    --appicon-size: 220px;

    --title-fs: var(--fs-title-file);

    --title-lh: 34px;

    --title-mb: 9px;

    width: 100%;

    padding:
        clamp(28px, 5vw, 70px)
        16px
        clamp(45px, 7vw, 80px);

    text-align: center;

    background: #f7f8fa;
}


/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

.page-cdn > .wrp {

    width: 100%;

    max-width: var(--wrp-w);

    margin: 0 auto;

    padding:
        clamp(22px, 4vw, 34px)
        clamp(17px, 4vw, 34px)
        clamp(22px, 4vw, 34px);

    background: var(--download-surface);

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

    border-radius: var(--download-radius-xl);

    box-shadow: var(--download-shadow);
}


/* ==========================================================
   ADVERTISEMENT
   ========================================================== */

.page-cdn > .wrp > div:first-child {

    width: 100%;

    min-height: 90px;

    margin:
        0
        0
        clamp(22px, 4vw, 30px) !important;

    padding: 10px;

    background: #fafafa;

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

    border-radius: var(--download-radius-md);

    overflow: hidden;
}


/* ==========================================================
   COVER ART
   ========================================================== */

.page-cdn .appicon {

    position: relative;

    z-index: 1;

    width: var(--appicon-size);

    height: var(--appicon-size);

    margin:
        0
        auto
        26px;

    overflow: visible;
}


/*
 * Artwork image
 */

.page-cdn .appicon img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 22px;

    border: 1px solid rgba(0, 0, 0, .06);

    box-shadow:
        0 16px 38px rgba(17, 19, 24, .14);
}


/*
 * Remove old decorative artwork glow.
 *
 * The new design is intentionally flat.
 */

.page-cdn .appicon::after {

    display: none;
}


/*
 * Remove old star-mask decoration.
 */

.page-cdn .appicon .mask,
.page-cdn .appicon .star-mask {

    display: none !important;
}


/* ==========================================================
   ALBUM / CATEGORY LABEL
   ========================================================== */

.page-cdn .md5 {

    display: block;

    width: fit-content;

    max-width: 100%;

    margin:
        0
        auto
        var(--title-mb);

    padding:
        7px
        12px;

    color: var(--download-blue);

    background:
        var(--download-blue-soft);

    border:
        1px solid rgba(11, 63, 217, .08);

    border-radius: 999px;

    opacity: 1;

    overflow-wrap: break-word;

    font-size: 10px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: .07em;

    text-transform: uppercase;
}


/* ==========================================================
   SONG TITLE
   ========================================================== */

.page-cdn .title {

    max-width: 620px;

    margin:
        0
        auto;

    color: var(--download-text);

    text-wrap: balance;

    overflow-wrap: break-word;

    font-size: clamp(
        27px,
        5vw,
        38px
    );

    font-weight: 850;

    line-height: 1.08;

    letter-spacing: -.045em;
}


/* ==========================================================
   MUSIC META
   ========================================================== */

.page-cdn .cdn-meta {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    margin:
        16px
        0
        28px;

    padding: 0;

    list-style: none;

    opacity: 1;

    font-size: 12px;
}


/*
 * Metadata pill
 */

.page-cdn .cdn-meta-item {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 30px;

    padding:
        6px
        11px;

    color: var(--download-muted);

    background: var(--download-surface-soft);

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

    border-radius: 999px;

    font-size: 12px;

    font-weight: 650;

    line-height: 1;
}


/* ==========================================================
   BUTTON GROUP
   ========================================================== */

.page-cdn .btn-group {

    width: 100%;

    max-width: 540px;

    margin:
        var(--sect-gap)
        auto
        0;

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: center;

    gap: 9px;
}


/* ==========================================================
   BUTTON BASE
   ========================================================== */

.page-cdn .btn-group .btn {

    position: relative;

    flex: 1;

    min-width: 240px;

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding:
        13px
        18px;

    border-radius: var(--download-radius-md);

    border:
        1px solid transparent;

    font-size: 14px;

    font-weight: 750;

    line-height: 1.2;

    text-decoration: none;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform var(--download-transition),
        background var(--download-transition),
        border-color var(--download-transition),
        color var(--download-transition),
        box-shadow var(--download-transition);
}


/*
 * Keep button content above countdown progress.
 */

.page-cdn .btn-group .btn-cont {

    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;
}


/* ==========================================================
   TELEGRAM BUTTON
   ========================================================== */

.page-cdn .btn-group .btn-blue {

    flex: 1;

    color: #ffffff;

    background: var(--download-blue);

    border-color: var(--download-blue);

    box-shadow:
        0 6px 18px rgba(11, 63, 217, .14);
}


.page-cdn .btn-group .btn-blue:hover {

    background: var(--download-blue-dark);

    border-color: var(--download-blue-dark);

    transform: translateY(-1px);

    box-shadow:
        0 9px 24px rgba(11, 63, 217, .18);
}


.page-cdn .btn-group .btn-blue:active {

    transform: translateY(0);
}


/* ==========================================================
   SKIP & DOWNLOAD
   ========================================================== */

.page-cdn .btn-group .btn-gold {

    color: #ffffff;

    background: var(--download-black);

    border-color: var(--download-black);
}


.page-cdn .btn-group .btn-gold:hover {

    background: var(--download-black-soft);

    border-color: var(--download-black-soft);

    transform: translateY(-1px);
}


.page-cdn .btn-group .btn-gold:active {

    transform: translateY(0);
}


/* ==========================================================
   ACTUAL DOWNLOAD BUTTON
   ========================================================== */

.page-cdn .btn-group #btn-download-cdn {

    color: #ffffff;

    background: var(--download-blue);

    border-color: var(--download-blue);

    box-shadow:
        0 6px 18px rgba(11, 63, 217, .14);
}


.page-cdn .btn-group #btn-download-cdn:hover {

    background: var(--download-blue-dark);

    border-color: var(--download-blue-dark);

    transform: translateY(-1px);
}


/* ==========================================================
   BACK TO POST
   ========================================================== */

.page-cdn .btn-group .btn-line {

    flex:
        0 0 100% !important;

    color: var(--download-text);

    background: transparent;

    border-color: var(--download-border);
}


.page-cdn .btn-group .btn-line:hover {

    color: var(--download-blue);

    background: var(--download-surface-soft);

    border-color: var(--download-border-dark);

    transform: translateY(-1px);
}


/* ==========================================================
   COUNTDOWN STATE
   ========================================================== */

/*
 * While counter-active:
 *
 * Telegram = full width
 * Counter = full width
 * Skip button = visible
 * Download = hidden
 * Back = hidden
 */

.page-cdn .counter-active .btn-blue {

    flex:
        0 0 100% !important;
}


/* ==========================================================
   DOWNLOAD COUNTER
   ========================================================== */

.page-cdn .download-counter {

    position: relative;

    display: none;

    flex:
        1
        1
        100%;

    min-width: 240px;

    min-height: 54px;

    align-items: center;

    justify-content: center;

    color: var(--download-text);

    background:
        #f1f3f6;

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

    border-radius: var(--download-radius-md);

    cursor: default;

    user-select: none;

    pointer-events: none;

    overflow: hidden;

    isolation: isolate;
}


/*
 * Counter becomes visible when JS adds:
 *
 * .counter-active
 */

.page-cdn .counter-active .download-counter {

    display: flex;
}


/* ==========================================================
   COUNTER PROGRESS
   ========================================================== */

.page-cdn .download-counter::before {

    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    right: auto;

    width: 100%;

    margin-left: -100%;

    transform:
        translateX(var(--counter-progress, 0%));

    background:
        var(--download-blue);

    opacity: .10;

    transition:
        transform .25s linear;

    animation:
        download-counter-pulse
        1s
        infinite
        linear;
}


/* ==========================================================
   COUNTER NUMBER
   ========================================================== */

.page-cdn .download-counter-num {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 28px;

    height: 28px;

    margin:
        0
        2px;

    padding:
        0
        7px;

    color: #ffffff;

    background:
        var(--download-blue);

    border-radius: 8px;

    font-size: 12px;

    font-weight: 850;

    line-height: 1;

    box-shadow:
        0 3px 10px rgba(11, 63, 217, .16);
}


/* ==========================================================
   DOWNLOADING STATE
   ========================================================== */

/*
 * IMPORTANT:
 *
 * Your JS adds .downloading to the actual download button.
 *
 * We preserve the original behavior:
 *
 * - button cannot be clicked again
 * - opacity changes
 * - normal .btn-cont disappears
 * - data-title is displayed
 */

.page-cdn .btn-group .btn.downloading {

    pointer-events: none;

    user-select: none;

    opacity: .6;

    animation:
        download-button-pulse
        1s
        infinite
        linear;
}


.page-cdn .btn-group .btn.downloading .btn-cont {

    display: none;
}


.page-cdn .btn-group .btn.downloading::before {

    content:
        attr(data-title);

    display: block;

    padding:
        0
        6px;

    position: relative;

    z-index: 2;
}


/* ==========================================================
   COUNTER ACTIVE VISIBILITY
   ========================================================== */

/*
 * This is intentionally left compatible
 * with the existing JavaScript.
 */

.page-cdn .counter-active .offcounter {

    display: none !important;
}


/* ==========================================================
   FAQ
   ========================================================== */

.page-cdn .faq-list {

    margin-top: var(--group-gap);

    text-align: left;
}


/* ==========================================================
   RECOMMENDED SECTION
   ========================================================== */

.sect-more {

    width: 100%;

    padding:
        45px
        16px
        70px;

    background:
        #f7f8fa;
}


.sect-more > .wrp {

    width: 100%;

    max-width: 1100px;

    margin: 0 auto;
}


/* ==========================================================
   RECOMMENDED HEADING
   ========================================================== */

.sect-more .sect-head {

    margin:
        0
        0
        20px;

    color:
        var(--download-text);

    font-size:
        clamp(21px, 3vw, 25px);

    font-weight:
        850;

    line-height:
        1.15;

    letter-spacing:
        -.035em;

    text-align:
        left;
}


/* ==========================================================
   RECOMMENDED GRID
   ========================================================== */

.sect-more .glist {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


/* ==========================================================
   RECOMMENDED CARD
   ========================================================== */

.sect-more .card {

    position: relative;

    min-width: 0;

    display: flex;

    flex-direction: column;

    background:
        #ffffff;

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

    border-radius:
        var(--download-radius-lg);

    overflow:
        hidden;

    transition:
        transform var(--download-transition),
        border-color var(--download-transition),
        box-shadow var(--download-transition);
}


.sect-more .card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--download-border-dark);

    box-shadow:
        0 10px 28px rgba(17, 19, 24, .07);
}


/* ==========================================================
   CARD TOP CONTENT
   ========================================================== */

.sect-more .card-first-cont {

    min-width: 0;

    padding: 14px;
}


/* ==========================================================
   CARD ARTWORK
   ========================================================== */

.sect-more .card .appicon {

    position: relative;

    width: 100%;

    height: auto;

    aspect-ratio: 1 / 1;

    margin: 0 0 13px;

    overflow: hidden;

    border-radius: 13px;

    background:
        #eceef2;

    box-shadow: none;
}


.sect-more .card .appicon img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border: 0;

    border-radius: inherit;

    box-shadow: none;
}


/*
 * Remove legacy decorative mask
 */

.sect-more .card .appicon::after,
.sect-more .card .appicon .mask,
.sect-more .card .appicon .star-mask {

    display: none !important;
}


/* ==========================================================
   CARD TITLE
   ========================================================== */

.sect-more .card .item-link {

    display: -webkit-box;

    overflow: hidden;

    color:
        var(--download-text);

    font-size:
        14px;

    font-weight:
        750;

    line-height:
        1.3;

    text-decoration:
        none;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    transition:
        color var(--download-transition);
}


.sect-more .card .item-link:hover {

    color:
        var(--download-blue);
}


/* ==========================================================
   CARD DESCRIPTION
   ========================================================== */

.sect-more .card .desc {

    margin-top:
        7px;

    color:
        var(--download-muted);

    font-size:
        12px;

    line-height:
        1.5;
}


.sect-more .card .desc p {

    margin:
        0;
}


/* ==========================================================
   CARD FOOTER
   ========================================================== */

.sect-more .card-sec-cont {

    margin-top:
        auto;

    padding:
        0
        14px
        14px;
}


/* ==========================================================
   CARD BUTTON
   ========================================================== */

.sect-more .card-sec-cont .btn {

    width:
        100%;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        9px
        12px;

    color:
        var(--download-blue);

    background:
        #ffffff;

    border:
        1px solid
        #d8e0f8;

    border-radius:
        var(--download-radius-sm);

    font-size:
        12px;

    font-weight:
        750;

    text-decoration:
        none;

    transition:
        background var(--download-transition),
        color var(--download-transition),
        border-color var(--download-transition);
}


.sect-more .card-sec-cont .btn:hover {

    color:
        #ffffff;

    background:
        var(--download-blue);

    border-color:
        var(--download-blue);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (min-width: 576px) {

    .page-cdn {

        --appicon-size: 220px;
    }


    .page-cdn .btn-group {

        gap: 12px;
    }
}


@media (max-width: 991px) {

    .sect-more .glist {

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


/* ==========================================================
   DESKTOP
   ========================================================== */

@media (min-width: 992px) {

    .page-cdn {

        --title-lh: 40px;

        --title-mb: 12px;

        padding:
            70px
            16px
            90px;
    }


    .page-cdn > .wrp {

        padding:
            36px
            36px
            34px;
    }


    .page-cdn .appicon {

        margin-bottom:
            30px;
    }
}


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

@media (max-width: 575px) {

    .page-cdn {

        padding:
            14px
            10px
            42px;
    }


    .page-cdn > .wrp {

        padding:
            22px
            15px
            20px;

        border-radius:
            20px;

        box-shadow:
            0 7px 25px rgba(17, 19, 24, .045);
    }


    .page-cdn > .wrp > div:first-child {

        margin-bottom:
            21px !important;
    }


    .page-cdn .appicon {

        width:
            175px;

        height:
            175px;

        margin-bottom:
            21px;
    }


    .page-cdn .appicon img {

        border-radius:
            18px;
    }


    .page-cdn .title {

        font-size:
            27px;

        line-height:
            1.08;
    }


    .page-cdn .cdn-meta {

        margin:
            15px
            0
            23px;
    }


    .page-cdn .btn-group {

        margin-top:
            22px;

        gap:
            9px;
    }


    .page-cdn .btn-group .btn {

        min-width:
            100%;

        min-height:
            51px;

        flex:
            0 0 100%;
    }


    /*
     * Preserve countdown layout.
     */

    .page-cdn .counter-active .btn-blue {

        flex:
            0 0 100% !important;
    }


    .page-cdn .download-counter {

        flex:
            0 0 100%;
    }


    .sect-more {

        padding:
            34px
            10px
            50px;
    }


    /*
     * Streaming-style horizontal recommendations.
     */

    .sect-more .glist {

        display:
            flex;

        gap:
            12px;

        overflow-x:
            auto;

        padding:
            2px
            2px
            13px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width:
            none;
    }


    .sect-more .glist::-webkit-scrollbar {

        display:
            none;
    }


    .sect-more .card {

        flex:
            0 0 174px;

        scroll-snap-align:
            start;

        border-radius:
            15px;
    }


    .sect-more .card-first-cont {

        padding:
            12px;
    }


    .sect-more .card .appicon {

        margin-bottom:
            11px;

        border-radius:
            11px;
    }


    .sect-more .card .item-link {

        font-size:
            13px;
    }


    .sect-more .card .desc {

        font-size:
            11px;
    }


    .sect-more .card-sec-cont {

        padding:
            0
            12px
            12px;
    }


    .sect-more .card-sec-cont .btn {

        min-height:
            38px;

        font-size:
            11px;
    }
}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media (max-width: 390px) {

    .page-cdn {

        padding-left:
            8px;

        padding-right:
            8px;
    }


    .page-cdn > .wrp {

        padding:
            20px
            13px
            19px;
    }


    .page-cdn .appicon {

        width:
            155px;

        height:
            155px;
    }


    .page-cdn .title {

        font-size:
            24px;
    }


    .page-cdn .cdn-meta-item {

        padding:
            6px
            10px;

        font-size:
            11px;
    }


    .page-cdn .btn-group .btn {

        min-height:
            49px;

        font-size:
            13px;
    }


    .sect-more .card {

        flex-basis:
            160px;
    }
}


/* ==========================================================
   KEYBOARD ACCESSIBILITY
   ========================================================== */

.page-cdn .btn:focus-visible,
.sect-more .btn:focus-visible,
.sect-more .item-link:focus-visible {

    outline:
        3px solid
        rgba(11, 63, 217, .20);

    outline-offset:
        3px;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

    .page-cdn .btn-group .btn,
    .sect-more .card,
    .sect-more .item-link,
    .sect-more .card-sec-cont .btn,
    .page-cdn .download-counter::before {

        transition:
            none !important;

        animation:
            none !important;
    }
}


/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes download-counter-pulse {

    0% {
        opacity: .08;
    }

    50% {
        opacity: .14;
    }

    100% {
        opacity: .08;
    }
}


@keyframes download-button-pulse {

    0% {
        opacity: .6;
    }

    50% {
        opacity: .8;
    }

    100% {
        opacity: .6;
    }
}