/* =========================================
   SMARTMYTOOLS - JPG TO PNG
========================================= */


/* =========================================
   RESET
========================================= */

* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Arial,
        sans-serif;

    background:
        #f5f7fb;

    color:
        #2d3e50;
}



/* =========================================
   IMAGE TOOLS NAVIGATION
========================================= */

.tools-navigation {

    background:
        white;

    border-bottom:
        1px solid #d8dee8;
}


.tools-nav-container {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        0 24px;

    min-height:
        60px;

    display:
        flex;

    align-items:
        center;

    gap:
        40px;
}


.tools-nav-container h2 {

    margin:
        0;

    font-size:
        20px;
}


.tools-nav-container nav {

    display:
        flex;

    gap:
        30px;
}


.tools-nav-container nav a {

    color:
        #2d3e50;

    text-decoration:
        none;

    font-weight:
        600;

    padding:
        20px 0;
}


.tools-nav-container nav a.active {

    color:
        #24476b;

}


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

.tool-page {

    max-width:
        1000px;

    margin:
        0 auto;

    padding:
        45px 20px 70px;
}


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

.tool-intro {

    text-align:
        center;

    margin-bottom:
        30px;
}


.tool-intro h1 {

    margin:
        0 0 12px;

    font-size:
        40px;
}


.tool-intro p {

    margin:
        0;

    font-size:
        18px;

    color:
        #5b6775;
}


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

.upload-box {

    min-height:
        250px;

    border:
        2px dashed #c5ced8;

    border-radius:
        10px;

    background:
        white;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.select-file-button {

    border:
        none;

    border-radius:
        10px;

    background:
        #ff3131;

    color:
        white;

    font-size:
        18px;

    font-weight:
        700;

    padding:
        18px 70px;

    cursor:
        pointer;
}


.upload-box p {

    margin:
        18px 0 5px;

    font-size:
        16px;
}


.upload-box span {

    color:
        #6b7683;

    font-size:
        14px;
}


/* =========================================
   SELECTED FILE
========================================= */

.selected-file-section {

    margin-top:
        25px;
}


.selected-file-card {

    background:
        white;

    border:
        1px solid #d8dee8;

    border-radius:
        10px;

    padding:
        18px 22px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.selected-file-card p {

    margin:
        6px 0 0;

    color:
        #5b6775;
}


.remove-file-button {

    border:
        none;

    background:
        transparent;

    font-size:
        28px;

    color:
        #d94a4a;

    cursor:
        pointer;
}


/* =========================================
   CONVERT BUTTON
========================================= */

.convert-section {

    margin-top:
        25px;
}


.convert-button {

    width:
        100%;

    border:
        none;

    border-radius:
        8px;

    background:
        #ff3131;

    color:
        white;

    padding:
        17px;

    font-size:
        17px;

    font-weight:
        700;

    cursor:
        pointer;
}


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

.result-section {

    margin-top:
        30px;

    padding:
        30px;

    text-align:
        center;

    background:
        #f1faf4;

    border:
        1px solid #c9e3d0;

    border-radius:
        10px;
}


.result-section h2 {

    margin:
        0 0 8px;

    color:
        #2d5a42;

    font-size:
        24px;
}


.result-section p {

    margin:
        0 0 25px;

    color:
        #5b6775;
}


.result-actions {

    display:
        flex;

    justify-content:
        center;

    gap:
        15px;
}


.download-button {

    border:
        none;

    border-radius:
        7px;

    background:
        #24476b;

    color:
        white;

    padding:
        14px 30px;

    font-size:
        15px;

    font-weight:
        700;

    cursor:
        pointer;
}


.start-over-button {

    border:
        1px solid #c8d0da;

    border-radius:
        7px;

    background:
        white;

    color:
        #2d3e50;

    padding:
        14px 30px;

    font-size:
        15px;

    font-weight:
        700;

    cursor:
        pointer;
}


/* =========================================
   HIDDEN
========================================= */

.hidden {

    display:
        none;
}


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

@media (
    max-width: 768px
) {

    .header-container {

        flex-direction:
            column;

        padding:
            15px;
    }


    .main-navigation {

        margin-top:
            15px;

        gap:
            15px;

        flex-wrap:
            wrap;

        justify-content:
            center;
    }


    .tools-nav-container {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            5px;

        padding:
            15px 20px;
    }


    .tools-nav-container nav {

        gap:
            18px;

        flex-wrap:
            wrap;
    }


    .tool-intro h1 {

        font-size:
            32px;
    }


    .result-actions {

        flex-direction:
            column;
    }

}

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

.breadcrumb {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        18px 24px;

    font-size:
        14px;

    color:
        #4b5563;
}


.breadcrumb a {

    color:
        #24476b;

    text-decoration:
        none;
}


.breadcrumb span {

    margin:
        0 6px;
}


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

.top-ad-placeholder {

    max-width:
        1100px;

    height:
        100px;

    margin:
        0 auto 35px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #64748b;

    background:
        #f8fafc;
}


/* =========================================
   PAGE LAYOUT WITH ADS
========================================= */

.page-layout {

    max-width:
        1200px;

    margin:
        0 auto;

    padding:
        0 24px 50px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) 300px;

    gap:
        32px;

    align-items:
        start;
}


.page-main-content {

    min-width:
        0;
}


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

.ad-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        32px;
}


.ad-placeholder {

    min-height:
        280px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        8px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #64748b;

    background:
        #f8fafc;
}


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

@media (max-width: 1100px) {

    .page-layout {

        grid-template-columns:
            1fr;
    }


    .ad-sidebar {

        flex-direction:
            row;

        gap:
            24px;
    }


    .ad-placeholder {

        flex:
            1;

        min-height:
            180px;
    }

}


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

@media (max-width: 600px) {

    .breadcrumb {

        padding:
            14px 16px;
    }


    .top-ad-placeholder {

        margin:
            0 16px 25px;

        height:
            90px;
    }


    .page-layout {

        padding:
            0 16px 35px;
    }


    .ad-sidebar {

        flex-direction:
            column;

        gap:
            20px;
    }


    .ad-placeholder {

        width:
            100%;

        min-height:
            120px;
    }

}

/* =========================================
   JPG TO PNG - MOVING SIDEBAR AD
========================================= */

.page-layout {
    overflow: visible !important;
}

.ad-sidebar {
    width: 300px;

    height: 250px;

    position: sticky !important;

    top: 20px;

    align-self: start;

    box-sizing: border-box;
}

.ad-sidebar .ad-placeholder {
    position: absolute;

    top: 0;
    left: 0;

    width: 300px;
    height: 250px;

    box-sizing: border-box;
}
/* =========================================
   JPG TO PNG - MOBILE FIX
========================================= */

@media (max-width: 600px) {

    /* Hide sidebar advertisements */
    .ad-sidebar {
        display: none !important;
    }


    /* Stack How-To cards vertically */
    .steps-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        gap: 18px;
    }


    .step-card {
        width: 100% !important;

        min-width: 0;

        box-sizing: border-box;
    }

}