/* =====================================================
   PinClipper Downloader Tool
===================================================== */

.pc-downloader{
    width:100%;
    max-width:920px;
    margin:0 auto;
}

.pc-downloader__form{
    width:100%;
}

.pc-downloader__bar{

    display:flex;
    align-items:center;

    background:#fff;

    border-radius:999px;

    padding:8px;

    min-height:78px;

    border:1px solid #f1f1f1;

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

    transition:all .30s ease;

}

.pc-downloader__bar:hover{

    box-shadow:
        0 22px 55px rgba(0,0,0,.11);

}

.pc-downloader__bar:focus-within{

    border-color:#ff6565;

    box-shadow:
        0 0 0 4px rgba(255,79,87,.10),
        0 20px 55px rgba(0,0,0,.10);

}

.pc-downloader__link-icon{

    width:62px;

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

    color:#a0a0a0;

    flex-shrink:0;

}

.pc-downloader__link-icon svg{

    width:21px;
    height:21px;

}

.pc-downloader__input{

    flex:1;

    border:none !important;
    outline:none !important;
    background:transparent !important;
    box-shadow:none !important;

    padding:22px 6px;

    font-size:18px;

    font-weight:500;

    color:#222;

}

.pc-downloader__input::placeholder{

    color:#b0b0b0;

}

.pc-downloader__button{

    border:none;

    cursor:pointer;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #ff7070 0%,
        #ff4f5c 100%
    );

    color:#fff;

    min-width:185px;

    height:62px;

    padding:0 34px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

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

    transition:all .25s ease;

}

.pc-downloader__button:hover{

    transform:translateY(-1px) scale(1.01);

    box-shadow:
        0 15px 30px rgba(255,79,92,.38);

}

.pc-downloader__button:active{

    transform:scale(.98);

}

.pc-downloader__button svg{

    width:19px;
    height:19px;

}

.pc-downloader__message{

    min-height:22px;

    margin-top:14px;

    font-size:14px;

    font-weight:500;

    color:#ef4444;

}

/* Mobile */

@media(max-width:768px){

    .pc-downloader__bar{

        min-height:68px;

    }

    .pc-downloader__button{

        min-width:150px;
        height:54px;

        font-size:16px;

    }

    .pc-downloader__input{

        font-size:16px;

    }

}

@media(max-width:560px){

    .pc-downloader__bar{

        padding:6px;

    }

    .pc-downloader__button{

        min-width:58px;

        width:58px;

        padding:0;

    }

    .pc-downloader__button-text{

        display:none;

    }

}

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

:root{

    --pc-primary:#ff4f57;

    --pc-overlay:rgba(17,17,17,.66);

    --pc-radius:20px;

    --pc-shadow:0 30px 70px rgba(0,0,0,.28);

}

.pc-download-modal{

    position:fixed;

    inset:0;

    z-index:99999;

}

.pc-download-modal[hidden]{

    display:none;

}

.pc-download-modal__overlay{

    position:absolute;

    inset:0;

    background:var(--pc-overlay);

    backdrop-filter:blur(3px);

    opacity:0;

    animation:pcFade .28s forwards;

}

.pc-download-modal__dialog{

    position:relative;

    width:min(1140px,92vw);

    margin:90px auto;

    background:#fff;

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

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

    overflow:hidden;

    transform:translateY(20px) scale(.97);

    opacity:0;

    animation:pcModal .30s ease forwards;

}

.pc-download-modal__header{

    height:76px;

    padding:0 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #efefef;
    
    background:#fff;

}

.pc-download-modal__header h2{

    margin:0;

    font-size:28px;

    font-weight:700;

}

.pc-download-modal__header-actions{

    display:flex;

    align-items:center;

    gap:24px;

}

.pc-download-modal__download-all{

    border:none;

    background:none;

    color:var(--pc-primary);

    font-weight:600;

    cursor:pointer;

}

.pc-download-modal__close{

    position:relative;

    top:0;

    left:0;

    width:48px;

    height:48px;

    padding:0;

    margin:0;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border:none;

    border-radius:50%;

    background:#fafafa;

    border:1px solid #ececec;

    color:#6b7280;

    font-size:28px;

    line-height:1;

    cursor:pointer;

    box-shadow:0 3px 12px rgba(0,0,0,.05);

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .20s ease;

}

.pc-download-modal__close:hover{

    background:#ff4f57;

    border-color:#ff4f57;

    color:#fff;

    transform:scale(1.08);

    box-shadow:0 10px 24px rgba(255,79,87,.28);

}

.pc-download-modal__close:active{

    transform:scale(.96);

}

.pc-download-modal__body{

    min-height:500px;

    max-height:72vh;

    overflow:auto;

    padding:36px;

    background:#fcfcfc;

}

.pc-download-modal__loading{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:420px;

    gap:18px;

}

.pc-download-modal__spinner{

    width:58px;

    height:58px;

    border-radius:50%;

    border:5px solid #ffe3e5;

    border-top-color:var(--pc-primary);

    animation:pcSpin .8s linear infinite;

}

.pc-download-modal__loading p{

    margin:0;

    font-size:18px;

    font-weight:600;

    color:#555;

}

@keyframes pcSpin{

    to{

        transform:rotate(360deg);

    }

}

@keyframes pcFade{

    to{

        opacity:1;

    }

}

@keyframes pcModal{

    to{

        opacity:1;

        transform:translateY(0) scale(1);

    }

}

@media(max-width:768px){

    .pc-download-modal__header{

        height:70px;

        padding:0 20px;

    }

    .pc-download-modal__header h2{

        font-size:22px;

    }

    .pc-download-modal__body{

        min-height:400px;

        padding:20px;

    }

}

/* ===========================================
   Button Processing State
=========================================== */

.pc-downloader__button{

    position:relative;

}

.pc-downloader__button-spinner{

    width:18px;

    height:18px;

    border-radius:50%;

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

    border-top-color:#fff;

    animation:pcSpin .7s linear infinite;

}

/* =====================================================
   Result Card
===================================================== */

.pc-download-modal__results{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,320px));

    justify-content:flex-start;

    gap:24px;

}

.pc-result-card{

background:#fff;

border-radius:18px;

overflow:hidden;

border:1px solid #ececec;

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

transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease;

}

.pc-result-card:hover{

transform:translateY(-4px);

box-shadow:0 24px 55px rgba(0,0,0,.12);

border-color:#ffd7db;

}

.pc-result-card img,
.pc-result-card video{
    display:block;

    width:auto;
    max-width:100%;

    height:auto;
    max-height:350px;

    margin:0 auto;

    object-fit:contain;

    background:#fafafa;

    border-bottom:1px solid #f3f4f6;

    box-shadow:inset 0 -20px 30px rgba(0,0,0,.02);

    transition:.3s;
}

.pc-result-card:hover img,
.pc-result-card:hover video {
    transform: scale(1.02);
}

.pc-result-card__body{

    padding:20px;

}

.pc-result-card__badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 16px;

border-radius:999px;

background:#fff3f4;

color:#ff4f57;

font-size:12px;

font-weight:700;

letter-spacing:.6px;

text-transform:uppercase;

}

.pc-result-card__badge svg{

    width:16px;

    height:16px;

}

.pc-result-card__meta{

margin-top:15px;

font-size:14px;

font-weight:500;

color:#6b7280;

}

.pc-result-card__dimension{

margin-top:8px;

font-size:14px;

font-weight:500;

color:#6b7280;

}

.pc-result-card__download{

margin-top:22px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

width:100%;

border-radius:999px;

padding:15px;

font-size:16px;

font-weight:700;

text-decoration:none;

color:#fff;

background:linear-gradient(
135deg,
#ff7070,
#ff4f57
);

transition:.25s;

}

.pc-result-card__download:hover{

transform:translateY(-2px);

box-shadow:0 16px 35px rgba(255,79,87,.35);

}

.pc-result-card__filename{

margin:14px 0 18px;

font-size:15px;

font-weight:600;

color:#1f2937;

line-height:1.45;

word-break:break-word;

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

}

.pc-result-card__type{

    font-size:15px;

    font-weight:700;

    margin-bottom:14px;

}

.pc-result-card__download{

    width:100%;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        #ff7070,
        #ff4f57
    );

    color:#fff;

    padding:15px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

}

/* ===========================================
   Result Information
=========================================== */

.pc-result-card__info{

display:grid;

grid-template-columns:95px 1fr;

row-gap:12px;

column-gap:16px;

margin:20px 0;

}

.pc-result-card__label{

font-size:14px;

font-weight:600;

color:#9ca3af;

}

.pc-result-card__value{

font-size:14px;

font-weight:700;

color:#1f2937;

text-align:right;

}

.pc-result-card__filename{

margin-top:18px;

padding-top:18px;

border-top:1px solid #ececec;

font-size:15px;

font-weight:700;

line-height:1.45;

color:#1f2937;

word-break:break-word;

overflow:hidden;

text-overflow:ellipsis;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

}