/*
==========================================================
HEIC Converter
Custom Stylesheet

Minimal blue/white design
==========================================================
*/


:root {

    --primary: #3B82F6;

    --primary-dark: #2563EB;

    --border: #E2E8F0;

    --text: #1E293B;

    --muted: #64748B;

    --background: #FFFFFF;

    --transition: 180ms ease;

}



/* ========================================================
   Base
======================================================== */


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    background: var(--background);

    color: var(--text);

    font-family:

        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;

}



/* ========================================================
   Links
======================================================== */


a {

    transition: color var(--transition);

}


a:hover {

    color: var(--primary);

}



/* ========================================================
   Logo
======================================================== */


.logo-box {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: var(--primary);

    color: white;

    display:flex;

    align-items:center;

    justify-content:center;

}



.logo-box svg {

    width: 24px;

    height: 24px;

}





/* ========================================================
   Buttons
======================================================== */


.primary-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    min-height:48px;

    padding:

        0.85rem
        1.5rem;


    background: var(--primary);

    color:white;

    border:none;

    border-radius:12px;


    font-weight:600;


    cursor:pointer;


    transition:

        background var(--transition),

        transform var(--transition),

        box-shadow var(--transition);

}



.primary-btn:hover {

    background:var(--primary-dark);

    transform:translateY(-2px);

    box-shadow:

        0 10px 20px rgba(59,130,246,.2);

}



.primary-btn:disabled {

    opacity:.5;

    cursor:not-allowed;

    transform:none;

}





.secondary-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;


    min-height:44px;


    padding:

        .7rem
        1.2rem;


    background:white;

    border:

        1px solid var(--border);


    border-radius:12px;


    font-weight:600;


    cursor:pointer;


    transition:all var(--transition);

}



.secondary-btn:hover {

    border-color:var(--primary);

    color:var(--primary);

}





/* ========================================================
   Upload Area
======================================================== */


.drop-zone {

    border:

        2px dashed #CBD5E1;


    border-radius:18px;


    padding:

        4rem
        2rem;


    text-align:center;


    background:#F8FAFC;


    cursor:pointer;


    transition:

        border-color var(--transition),

        background var(--transition),

        transform var(--transition);

}



.drop-zone:hover {

    border-color:var(--primary);

    background:#EFF6FF;

}



.drop-zone.drag-over {

    background:#DBEAFE;

    border-color:var(--primary);

    transform:scale(1.01);

}



.upload-icon {

    width:56px;

    height:56px;

    margin:

        0 auto
        1rem;


    color:var(--primary);

}





/* ========================================================
   File Items
======================================================== */


.file-item {

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:1rem;


    padding:1rem;


    margin-bottom:.75rem;


    background:white;


    border:

        1px solid var(--border);


    border-radius:12px;

}



.file-name {

    font-weight:600;

    word-break:break-word;

}



.file-size {

    color:var(--muted);

    font-size:.875rem;

}





/* ========================================================
   Progress
======================================================== */


.progress-bar {

    height:12px;

    width:100%;


    background:#E2E8F0;


    border-radius:999px;


    overflow:hidden;

}



.progress-fill {

    height:100%;

    width:0;


    background:var(--primary);


    transition:

        width .3s ease;

}





/* ========================================================
   Results
======================================================== */


.result-card {

    display:flex;


    justify-content:space-between;


    align-items:center;


    gap:1rem;


    padding:1rem;


    border:

        1px solid var(--border);


    border-radius:14px;


    background:white;

}



.result-name {

    font-weight:600;

    word-break:break-word;

}



.result-format {

    color:var(--muted);

    font-size:.875rem;

}





/* ========================================================
   Security Section
======================================================== */


.lock-icon {

    width:56px;

    height:56px;


    border-radius:50%;


    background:var(--primary);


    color:white;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:1.5rem;


    flex-shrink:1;

}





/* ========================================================
   Hidden Utility
======================================================== */


.hidden {

    display:none !important;

}





/* ========================================================
   Focus States
======================================================== */


button:focus-visible,
select:focus-visible {

    outline:none;


    box-shadow:

        0 0 0 4px rgba(59,130,246,.25);

}





/* ========================================================
   Responsive
======================================================== */


@media(max-width:768px){


    .file-item {

        flex-direction:column;

        align-items:flex-start;

    }


    .result-card {

        flex-direction:column;

        align-items:flex-start;

    }


    .primary-btn,
    .secondary-btn {

        width:100%;

    }


}



@media(max-width:480px){


    .drop-zone {

        padding:

            2.5rem
            1rem;

    }


}