/* ==========================================
   FREEVEXA
   JPG TO PDF TOOL
========================================== */


.pdf-tool-page {

    width:
        min(
            1100px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        130px 0 100px;

}


/* ==========================================
   BREADCRUMB
========================================== */

.pdf-breadcrumb {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        55px;

    color:
        #666671;

    font-size:
        12px;

}


.pdf-breadcrumb a {

    color:
        #9b9ba7;

    text-decoration:
        none;

}


.pdf-breadcrumb a:hover {

    color:
        var(--text);

}


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

.pdf-tool-header {

    max-width:
        720px;

    margin:
        0 auto 55px;

    text-align:
        center;

}


.pdf-tool-icon {

    width:
        68px;

    height:
        68px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 22px;

    border:
        1px solid
        rgba(139,92,246,.2);

    border-radius:
        20px;

    background:
        rgba(139,92,246,.1);

    color:
        #c8baff;

    font-size:
        29px;

    box-shadow:
        0 0 50px
        rgba(139,92,246,.1);

}


.pdf-label {

    display:
        inline-block;

    color:
        #807b94;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.pdf-tool-header h1 {

    margin-top:
        12px;

    font-family:
        var(--font-display);

    font-size:
        clamp(
            42px,
            6vw,
            64px
        );

    line-height:
        1;

    letter-spacing:
        -3px;

}


.pdf-tool-header p {

    max-width:
        620px;

    margin:
        22px auto;

    color:
        var(--muted);

    font-size:
        15px;

    line-height:
        1.7;

}


.pdf-privacy {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 14px;

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

    border-radius:
        100px;

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

    color:
        #777782;

    font-size:
        10px;

}


/* ==========================================
   CONVERTER
========================================== */

.pdf-converter-card {

    padding:
        20px;

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

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    box-shadow:
        0 30px 100px
        rgba(0,0,0,.2);

}


/* ==========================================
   UPLOAD
========================================== */

.pdf-upload {

    min-height:
        360px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        35px;

    border:
        1px dashed
        rgba(255,255,255,.18);

    border-radius:
        20px;

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

    cursor:
        pointer;

    transition:
        .3s ease;

}


.pdf-upload:hover,
.pdf-upload.dragging {

    border-color:
        rgba(139,92,246,.7);

    background:
        rgba(139,92,246,.05);

}


.pdf-upload.dragging {

    transform:
        scale(.99);

}


.pdf-upload-icon {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

    margin-bottom:
        22px;

    border-radius:
        20px;

    background:
        rgba(139,92,246,.11);

    border:
        1px solid
        rgba(139,92,246,.15);

    color:
        #c7b9ff;

    font-size:
        30px;

}


.pdf-upload h2 {

    font-family:
        var(--font-display);

    font-size:
        22px;

}


.pdf-upload p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        13px;

}


.pdf-upload > span {

    margin-top:
        20px;

    color:
        #60606b;

    font-size:
        9px;

    letter-spacing:
        1.5px;

}


/* ==========================================
   WORKSPACE
========================================== */

.pdf-workspace {

    padding:
        5px;

}


.pdf-workspace-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    margin-bottom:
        18px;

}


.pdf-small-label {

    display:
        block;

    color:
        #6d6d78;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.7px;

}


.pdf-workspace-top h2 {

    margin-top:
        6px;

    font-family:
        var(--font-display);

    font-size:
        18px;

}


.pdf-add-btn {

    padding:
        10px 14px;

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

    border-radius:
        10px;

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

    color:
        #aaaab4;

    font-family:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;

}


.pdf-add-btn:hover {

    color:
        var(--text);

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

}


/* ==========================================
   IMAGE LIST
========================================== */

.pdf-image-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

}


.pdf-image-item {

    min-height:
        78px;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        10px;

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

    border-radius:
        14px;

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

}


.pdf-image-item > img {

    width:
        58px;

    height:
        58px;

    flex-shrink:
        0;

    object-fit:
        cover;

    border-radius:
        9px;

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

}


.pdf-image-number {

    width:
        28px;

    flex-shrink:
        0;

    color:
        #62626d;

    font-family:
        var(--font-display);

    font-size:
        11px;

}


.pdf-image-info {

    min-width:
        0;

    flex:
        1;

}


.pdf-image-info strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #c2c2ca;

    font-size:
        12px;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.pdf-image-info span {

    display:
        block;

    margin-top:
        5px;

    color:
        #60606a;

    font-size:
        10px;

}


.pdf-image-controls {

    display:
        flex;

    gap:
        5px;

}


.pdf-control-btn {

    width:
        31px;

    height:
        31px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        8px;

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

    color:
        #85858f;

    font-family:
        inherit;

    cursor:
        pointer;

}


.pdf-control-btn:hover:not(:disabled) {

    color:
        var(--text);

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

}


.pdf-control-btn:disabled {

    opacity:
        .2;

    cursor:
        not-allowed;

}


.pdf-control-btn.danger:hover {

    color:
        #ff8d9b;

    border-color:
        rgba(255,80,100,.3);

}


/* ==========================================
   SETTINGS
========================================== */

.pdf-settings {

    margin-top:
        18px;

    padding:
        20px;

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

    border-radius:
        17px;

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

}


.pdf-settings-heading {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        17px;

}


.pdf-settings-heading > span:last-child {

    color:
        #5f5f69;

    font-size:
        10px;

}


.pdf-settings-grid {

    display:
        grid;

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

    gap:
        10px;

}


.pdf-setting label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #7c7c86;

    font-size:
        10px;

}


.pdf-setting select {

    width:
        100%;

    height:
        42px;

    padding:
        0 11px;

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

    border-radius:
        9px;

    outline:
        none;

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

    color:
        #aaaab3;

    font-family:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;

}


.pdf-setting select:focus {

    border-color:
        rgba(139,92,246,.5);

}


.pdf-setting option {

    background:
        #101014;

    color:
        #eee;

}


/* ==========================================
   ACTIONS
========================================== */

.pdf-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-top:
        18px;

}


.pdf-clear-btn {

    height:
        52px;

    padding:
        0 18px;

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

    border-radius:
        12px;

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

    color:
        #777781;

    font-family:
        inherit;

    font-size:
        11px;

    cursor:
        pointer;

}


.pdf-clear-btn:hover {

    color:
        #ff9ca8;

    border-color:
        rgba(255,80,100,.25);

}


.pdf-generate-btn {

    flex:
        1;

    height:
        52px;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        10px;

    border:
        none;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--accent),
            #7048d8
        );

    color:
        white;

    font-family:
        inherit;

    font-size:
        12px;

    font-weight:
        700;

    cursor:
        pointer;

    box-shadow:
        0 12px 35px
        rgba(139,92,246,.2);

    transition:
        .25s ease;

}


.pdf-generate-btn:hover:not(:disabled) {

    transform:
        translateY(-2px);

    box-shadow:
        0 16px 45px
        rgba(139,92,246,.3);

}


.pdf-generate-btn:disabled {

    opacity:
        .5;

    cursor:
        not-allowed;

}


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

.pdf-progress {

    margin-top:
        16px;

    padding:
        13px;

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

    border-radius:
        11px;

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

}


.pdf-progress-bar {

    height:
        4px;

    overflow:
        hidden;

    border-radius:
        100px;

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

}


.pdf-progress-bar span {

    display:
        block;

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            var(--accent),
            var(--accent-two)
        );

    transition:
        width .25s ease;

}


.pdf-progress p {

    margin-top:
        8px;

    color:
        #777781;

    font-size:
        10px;

}


/* ==========================================
   INFO CARDS
========================================== */

.pdf-info-grid {

    display:
        grid;

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

    gap:
        14px;

    margin-top:
        70px;

}


.pdf-info-card {

    padding:
        25px;

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

    border-radius:
        18px;

    background:
        var(--surface);

}


.pdf-info-icon {

    margin-bottom:
        30px;

    font-size:
        22px;

}


.pdf-info-card h3 {

    font-family:
        var(--font-display);

    font-size:
        17px;

}


.pdf-info-card p {

    margin-top:
        8px;

    color:
        var(--muted);

    font-size:
        12px;

    line-height:
        1.65;

}


/* ==========================================
   LIGHT MODE
========================================== */

body.light-mode .pdf-upload {

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

}


body.light-mode .pdf-converter-card {

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.07);

}


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

@media (max-width: 850px) {

    .pdf-settings-grid {

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

    }


    .pdf-info-grid {

        grid-template-columns:
            1fr;

    }

}


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

@media (max-width: 600px) {

    .pdf-tool-page {

        width:
            calc(100% - 28px);

        padding-top:
            115px;

    }


    .pdf-breadcrumb {

        margin-bottom:
            35px;

    }


    .pdf-tool-header {

        margin-bottom:
            35px;

    }


    .pdf-tool-header h1 {

        font-size:
            42px;

        letter-spacing:
            -2px;

    }


    .pdf-converter-card {

        padding:
            10px;

        border-radius:
            20px;

    }


    .pdf-upload {

        min-height:
            320px;

        padding:
            25px;

    }


    .pdf-workspace-top {

        align-items:
            flex-start;

    }


    .pdf-workspace-top h2 {

        font-size:
            16px;

    }


    .pdf-image-item {

        gap:
            8px;

    }


    .pdf-image-number {

        display:
            none;

    }


    .pdf-image-item > img {

        width:
            48px;

        height:
            48px;

    }


    .pdf-image-controls {

        flex-direction:
            column;

    }


    .pdf-control-btn {

        width:
            27px;

        height:
            27px;

    }


    .pdf-settings {

        padding:
            15px;

    }


    .pdf-settings-heading {

        align-items:
            flex-start;

        gap:
            5px;

        flex-direction:
            column;

    }


    .pdf-settings-grid {

        grid-template-columns:
            1fr;

    }


    .pdf-actions {

        flex-direction:
            column-reverse;

    }


    .pdf-generate-btn,
    .pdf-clear-btn {

        width:
            100%;

    }

}