/*
==========================================================
TOOLXONE IMAGE TO PDF
----------------------------------------------------------
Dedicated UI stylesheet for Image → PDF Converter
Version: 1.0.0
==========================================================
*/


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

.image-pdf-page {

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        70px
        20px
        90px;

    box-sizing: border-box;

}


/* ======================================================
   INTRO
====================================================== */

.image-pdf-intro {

    max-width: 850px;

    margin:
        0 auto 45px;

    text-align: center;

}


.image-pdf-badge {

    display: inline-flex;

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

    padding:
        8px
        16px;

    margin-bottom: 18px;

    border:
        1px solid
        rgba(16,185,129,.25);

    border-radius: 999px;

    background:
        rgba(16,185,129,.08);

    color:
        #047857;

    font-size: .82rem;

    font-weight: 800;

    letter-spacing:
        .12em;

}


.image-pdf-intro h1 {

    margin:
        0 0 18px;

    color:
        #0f172a;

    font-size:
        clamp(
            2.1rem,
            5vw,
            3.6rem
        );

    line-height:
        1.08;

    font-weight:
        850;

}


.image-pdf-intro p {

    max-width: 780px;

    margin:
        0 auto;

    color:
        #475569;

    font-size:
        1.08rem;

    line-height:
        1.75;

}


/* ======================================================
   MAIN TOOL CARD
====================================================== */

.image-pdf-tool-card {

    position: relative;

    background:
        #ffffff;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        28px;

    padding:
        30px;

    box-shadow:
        0 24px 70px
        rgba(15,23,42,.10);

}


/* ======================================================
   DROP ZONE
====================================================== */

.image-pdf-drop-zone {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height:
        330px;

    padding:
        45px
        25px;

    border:
        2px dashed
        #cbd5e1;

    border-radius:
        22px;

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #ffffff
        );

    text-align: center;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;

}


.image-pdf-drop-zone:hover {

    border-color:
        #10b981;

    background:
        #f0fdf4;

}


.image-pdf-drop-zone.is-dragover {

    border-color:
        #059669;

    background:
        #ecfdf5;

    transform:
        scale(1.01);

}


.image-pdf-upload-icon {

    display: flex;

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

    width:
        78px;

    height:
        78px;

    margin-bottom:
        20px;

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            #ecfdf5,
            #d1fae5
        );

    font-size:
        2.4rem;

}


.image-pdf-drop-zone h2 {

    margin:
        0 0 8px;

    color:
        #0f172a;

    font-size:
        1.5rem;

}


.image-pdf-drop-zone p {

    margin:
        5px 0;

    color:
        #64748b;

}


.image-pdf-drop-zone span {

    margin:
        7px 0;

    color:
        #94a3b8;

    font-size:
        .9rem;

}


.image-pdf-supported {

    margin-top:
        18px !important;

    color:
        #94a3b8 !important;

    font-size:
        .82rem;

    font-weight:
        700;

    letter-spacing:
        .04em;

}


/* ======================================================
   BUTTONS
====================================================== */

.image-pdf-primary-btn,
.image-pdf-secondary-btn,
.image-pdf-create-btn,
.image-pdf-clear-btn,
.image-pdf-download-btn {

    border:
        0;

    border-radius:
        12px;

    font-family:
        inherit;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.image-pdf-primary-btn {

    padding:
        13px
        24px;

    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        );

    color:
        #ffffff;

    box-shadow:
        0 8px 20px
        rgba(16,185,129,.22);

}


.image-pdf-primary-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px
        rgba(16,185,129,.30);

}


.image-pdf-secondary-btn {

    padding:
        10px
        17px;

    background:
        #f1f5f9;

    color:
        #334155;

}


.image-pdf-secondary-btn:hover {

    background:
        #e2e8f0;

}


.image-pdf-create-btn {

    padding:
        14px
        28px;

    background:
        linear-gradient(
            135deg,
            #10b981,
            #059669
        );

    color:
        #ffffff;

    font-size:
        1rem;

    box-shadow:
        0 10px 25px
        rgba(16,185,129,.22);

}


.image-pdf-create-btn:hover {

    transform:
        translateY(-2px);

}


.image-pdf-create-btn:disabled {

    opacity:
        .55;

    cursor:
        not-allowed;

    transform:
        none;

}


.image-pdf-clear-btn {

    padding:
        14px
        22px;

    background:
        #fef2f2;

    color:
        #b91c1c;

}


.image-pdf-clear-btn:hover {

    background:
        #fee2e2;

}


.image-pdf-download-btn {

    padding:
        14px
        28px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:
        #ffffff;

    box-shadow:
        0 10px 25px
        rgba(15,23,42,.18);

}


.image-pdf-download-btn:hover {

    transform:
        translateY(-2px);

}


/* ======================================================
   FILE STATUS
====================================================== */

.image-pdf-file-status {

    min-height:
        22px;

    margin:
        15px 0;

    text-align:
        center;

    color:
        #64748b;

    font-size:
        .92rem;

}


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

.image-pdf-workspace {

    margin-top:
        30px;

}


.image-pdf-workspace-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        24px;

}


.image-pdf-workspace-header h2 {

    margin:
        0 0 6px;

    color:
        #0f172a;

}


.image-pdf-workspace-header p {

    margin:
        0;

    color:
        #64748b;

}


/* ======================================================
   PREVIEW GRID
====================================================== */

.image-pdf-preview-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(
                190px,
                1fr
            )
        );

    gap:
        18px;

}


.image-pdf-preview-item {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        18px;

    background:
        #f8fafc;

    box-shadow:
        0 8px 25px
        rgba(15,23,42,.06);

}


.image-pdf-preview-image-wrap {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        180px;

    padding:
        10px;

    background:
        #f8fafc;

}


.image-pdf-preview-item img {

    max-width:
        100%;

    max-height:
        160px;

    object-fit:
        contain;

    border-radius:
        8px;

}


.image-pdf-preview-info {

    padding:
        12px;

    background:
        #ffffff;

}


.image-pdf-preview-name {

    overflow:
        hidden;

    margin:
        0 0 4px;

    color:
        #334155;

    font-size:
        .82rem;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.image-pdf-preview-size {

    margin:
        0;

    color:
        #94a3b8;

    font-size:
        .75rem;

}


.image-pdf-remove-btn {

    position:
        absolute;

    top:
        9px;

    right:
        9px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(15,23,42,.82);

    color:
        #ffffff;

    font-size:
        1rem;

    cursor:
        pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.image-pdf-remove-btn:hover {

    background:
        #dc2626;

    transform:
        scale(1.08);

}


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

.image-pdf-settings {

    margin-top:
        35px;

    padding:
        25px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        20px;

    background:
        #f8fafc;

}


.image-pdf-settings-heading {

    margin-bottom:
        20px;

}


.image-pdf-settings-heading h2 {

    margin:
        0 0 6px;

    color:
        #0f172a;

}


.image-pdf-settings-heading p {

    margin:
        0;

    color:
        #64748b;

}


.image-pdf-settings-grid {

    display:
        grid;

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

    gap:
        18px;

}


.image-pdf-setting {

    display:
        flex;

    flex-direction:
        column;

    gap:
        8px;

}


.image-pdf-setting label {

    color:
        #334155;

    font-size:
        .85rem;

    font-weight:
        750;

}


.image-pdf-setting select {

    width:
        100%;

    padding:
        12px
        13px;

    border:
        1px solid
        #cbd5e1;

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #334155;

    font-family:
        inherit;

    outline:
        none;

}


.image-pdf-setting select:focus {

    border-color:
        #10b981;

    box-shadow:
        0 0 0 3px
        rgba(16,185,129,.12);

}


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

.image-pdf-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    margin-top:
        28px;

    flex-wrap:
        wrap;

}


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

.image-pdf-progress {

    margin-top:
        25px;

    text-align:
        center;

}


.image-pdf-progress-track {

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #e2e8f0;

}


.image-pdf-progress-bar {

    width:
        0%;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #10b981,
            #059669
        );

    transition:
        width .2s ease;

}


.image-pdf-progress p {

    margin:
        10px 0 0;

    color:
        #64748b;

    font-size:
        .85rem;

}


/* ======================================================
   RESULT
====================================================== */

.image-pdf-result {

    margin-top:
        30px;

    padding:
        35px 25px;

    border:
        1px solid
        #bbf7d0;

    border-radius:
        20px;

    background:
        linear-gradient(
            180deg,
            #f0fdf4,
            #ffffff
        );

    text-align:
        center;

}


.image-pdf-result-icon {

    margin-bottom:
        10px;

    font-size:
        2.2rem;

}


.image-pdf-result h2 {

    margin:
        0 0 8px;

    color:
        #166534;

}


.image-pdf-result p {

    max-width:
        620px;

    margin:
        0 auto 22px;

    color:
        #64748b;

    line-height:
        1.6;

}


/* ======================================================
   PRIVACY
====================================================== */

.image-pdf-privacy {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    margin:
        35px auto 0;

    max-width:
        900px;

    padding:
        25px;

    border:
        1px solid
        #dbeafe;

    border-radius:
        20px;

    background:
        #f8fafc;

}


.image-pdf-privacy-icon {

    flex:
        0 0 auto;

    font-size:
        1.8rem;

}


.image-pdf-privacy h2 {

    margin:
        0 0 7px;

    color:
        #0f172a;

    font-size:
        1.15rem;

}


.image-pdf-privacy p {

    margin:
        0;

    color:
        #64748b;

    line-height:
        1.65;

}


/* ======================================================
   EMPTY STATE
====================================================== */

.image-pdf-empty {

    grid-column:
        1 / -1;

    padding:
        35px;

    border:
        1px dashed
        #cbd5e1;

    border-radius:
        16px;

    color:
        #64748b;

    text-align:
        center;

}


/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 900px) {

    .image-pdf-settings-grid {

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

    }

}


@media (max-width: 700px) {

    .image-pdf-page {

        padding:
            45px
            14px
            65px;

    }


    .image-pdf-tool-card {

        padding:
            18px;

        border-radius:
            20px;

    }


    .image-pdf-drop-zone {

        min-height:
            290px;

        padding:
            30px
            15px;

    }


    .image-pdf-workspace-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .image-pdf-settings {

        padding:
            18px;

    }


    .image-pdf-settings-grid {

        grid-template-columns:
            1fr;

    }


    .image-pdf-preview-grid {

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

        gap:
            12px;

    }


    .image-pdf-preview-image-wrap {

        height:
            145px;

    }


    .image-pdf-preview-item img {

        max-height:
            125px;

    }


    .image-pdf-privacy {

        padding:
            20px;

    }

}


@media (max-width: 430px) {

    .image-pdf-preview-grid {

        grid-template-columns:
            1fr;

    }


    .image-pdf-actions {

        flex-direction:
            column;

    }


    .image-pdf-create-btn,
    .image-pdf-clear-btn {

        width:
            100%;

    }

}


/* ======================================================
   DARK THEME SUPPORT
====================================================== */

body.dark-theme .image-pdf-intro h1,
body.dark-theme .image-pdf-workspace-header h2,
body.dark-theme .image-pdf-settings-heading h2,
body.dark-theme .image-pdf-privacy h2 {

    color:
        #f8fafc;

}


body.dark-theme .image-pdf-intro p,
body.dark-theme .image-pdf-workspace-header p,
body.dark-theme .image-pdf-settings-heading p,
body.dark-theme .image-pdf-privacy p {

    color:
        #cbd5e1;

}


body.dark-theme .image-pdf-tool-card {

    background:
        #0f172a;

    border-color:
        #334155;

}


body.dark-theme .image-pdf-drop-zone {

    background:
        #111827;

    border-color:
        #475569;

}


body.dark-theme .image-pdf-settings {

    background:
        #111827;

    border-color:
        #334155;

}


body.dark-theme .image-pdf-setting label {

    color:
        #e2e8f0;

}


body.dark-theme .image-pdf-setting select {

    background:
        #0f172a;

    color:
        #e2e8f0;

    border-color:
        #475569;

}


body.dark-theme .image-pdf-preview-item {

    background:
        #111827;

    border-color:
        #334155;

}


body.dark-theme .image-pdf-preview-info {

    background:
        #0f172a;

}


body.dark-theme .image-pdf-preview-name {

    color:
        #e2e8f0;

}


body.dark-theme .image-pdf-privacy {

    background:
        #111827;

    border-color:
        #334155;

}