/*=====================================================
TOOL.CSS
Shared by all Converter Pages
Part 1
======================================================*/

/*==============================
Converter Section
==============================*/

.converter-section{

    padding:70px 0;

    position:relative;

}

.converter-card{

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

    backdrop-filter:blur(20px);

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

    border-radius:28px;

    padding:45px;

    box-shadow:0 20px 60px rgba(15,23,42,.08);

    overflow:hidden;

    position:relative;

}

.converter-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

    background:rgba(37,99,235,.08);

    top:-100px;

    right:-100px;

}

/*==============================
Drop Area
==============================*/

.drop-area{

    position:relative;

    border:3px dashed #cbd5e1;

    border-radius:26px;

    padding:70px 30px;

    text-align:center;

    transition:.35s;

    cursor:pointer;

    background:#fff;

}

.drop-area:hover{

    border-color:var(--primary);

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(37,99,235,.10);

}

.drop-area.dragover{

    border-color:var(--primary);

    background:#eff6ff;

    transform:scale(1.02);

    box-shadow:0 20px 50px rgba(37,99,235,.18);

}

.upload-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:34px;

    box-shadow:0 20px 45px rgba(37,99,235,.25);

    transition:.35s;

}

.drop-area:hover .upload-icon{

    transform:translateY(-8px) rotate(8deg);

}

.drop-area h2{

    margin-bottom:12px;

    font-size:2rem;

}

.drop-area p{

    color:#64748b;

    margin-bottom:28px;

}

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

.action-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

.primary-btn,

.secondary-btn{

    min-width:220px;

    height:58px;

    border:none;

    border-radius:999px;

    cursor:pointer;

    font-size:1rem;

    font-weight:600;

    transition:.35s;

}

.primary-btn{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    box-shadow:0 18px 40px rgba(37,99,235,.25);

}

.primary-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 25px 50px rgba(37,99,235,.32);

}

.secondary-btn{

    background:#fff;

    color:var(--primary);

    border:2px solid var(--primary);

}

.secondary-btn:hover{

    background:var(--primary);

    color:#fff;

}

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

.progress-wrapper{

    margin-top:40px;

    display:none;

}

.progress-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:12px;

    font-weight:600;

}

.progress-bar{

    width:100%;

    height:14px;

    border-radius:999px;

    background:#e2e8f0;

    overflow:hidden;

}

.progress-fill{

    width:0;

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--secondary)
    );

    transition:width .35s ease;

}

/*==============================
Section Titles
==============================*/

.results-section{

    padding:80px 0;

}

.section-title{

    text-align:center;

    margin-bottom:55px;

}

.section-title h2{

    margin-bottom:15px;

}

.section-title p{

    max-width:720px;

    margin:auto;

    color:#64748b;

}
/*=====================================================
TOOL.CSS
Part 2
Preview Cards & Result Cards
======================================================*/

/*==============================
Preview Grid
==============================*/

.preview-grid{

    display:grid;

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

    gap:25px;

    margin-top:45px;

}

/*==============================
Preview Card
==============================*/

.preview-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(15,23,42,.08);

    transition:.35s;

    position:relative;

    border:1px solid rgba(226,232,240,.8);

}

.preview-card:hover{

    transform:translateY(-8px);

    box-shadow:0 24px 50px rgba(37,99,235,.15);

}

.preview-image{

    width:100%;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8fafc;

    overflow:hidden;

}

.preview-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.35s;

}

.preview-card:hover .preview-image img{

    transform:scale(1.06);

}

.preview-content{

    padding:22px;

}

.preview-content h3{

    font-size:1rem;

    font-weight:600;

    margin-bottom:12px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.file-meta{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:15px;

    font-size:.88rem;

    color:#64748b;

}

.file-type{

    padding:6px 12px;

    border-radius:999px;

    background:#dbeafe;

    color:#2563eb;

    font-weight:600;

    font-size:.8rem;

}

.file-size{

    font-weight:500;

}

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

.results-grid{

    display:grid;

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

    gap:30px;

}

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

.result-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

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

    transition:.35s;

    position:relative;

    border:1px solid rgba(226,232,240,.8);

}

.result-card:hover{

    transform:translateY(-8px);

    box-shadow:0 28px 60px rgba(37,99,235,.15);

}

.result-image{

    height:230px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8fafc;

}

.result-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.35s;

}

.result-card:hover .result-image img{

    transform:scale(1.05);

}

.result-content{

    padding:24px;

}

.result-content h3{

    font-size:1rem;

    margin-bottom:14px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.result-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

    color:#64748b;

    font-size:.9rem;

}

/*==============================
Download Button
==============================*/

.download-btn{

    width:100%;

    height:52px;

    border:none;

    border-radius:999px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

}

.download-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(37,99,235,.28);

}

.download-btn i{

    font-size:16px;

}

/*==============================
Status Badge
==============================*/

.status-badge{

    position:absolute;

    top:16px;

    right:16px;

    background:#10b981;

    color:#fff;

    padding:7px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.4px;

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

}

/*==============================
Image Placeholder
==============================*/

.image-placeholder{

    width:100%;

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    color:#94a3b8;

    background:#f8fafc;

}

.image-placeholder i{

    font-size:54px;

    margin-bottom:14px;

}

.image-placeholder span{

    font-size:.9rem;

}
/*=====================================================
TOOL.CSS
Part 3
Animations • Toast • Loader • Responsive
======================================================*/

/*==============================
Loader
==============================*/

.loader{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(10px);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.loader.active{

    display:flex;

}

.loader-spinner{

    width:70px;

    height:70px;

    border:6px solid rgba(37,99,235,.15);

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

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==============================
Toast Notification
==============================*/

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 22px;

    background:#0f172a;

    color:#fff;

    border-radius:16px;

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

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.toast i{

    color:#22c55e;

    font-size:20px;

}

/*==============================
Back To Top
==============================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    color:#fff;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 18px 35px rgba(37,99,235,.25);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    transform:translateY(-6px);

}

/*==============================
Fade Animation
==============================*/

.fade-up{

    animation:fadeUp .6s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==============================
Scale Animation
==============================*/

.scale-in{

    animation:scaleIn .45s ease;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==============================
Drop Area Pulse
==============================*/

.drop-area.dragover{

    animation:pulseDrop .8s infinite;

}

@keyframes pulseDrop{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.02);

    }

    100%{

        transform:scale(1);

    }

}

/*==============================
Empty State
==============================*/

.empty-state{

    padding:80px 20px;

    text-align:center;

    color:#64748b;

}

.empty-state i{

    font-size:70px;

    margin-bottom:20px;

    color:#cbd5e1;

}

.empty-state h3{

    margin-bottom:10px;

}

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

@media(max-width:992px){

    .converter-card{

        padding:35px;

    }

    .preview-grid,

    .results-grid{

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

    }

}

@media(max-width:768px){

    .converter-card{

        padding:25px;

    }

    .drop-area{

        padding:45px 20px;

    }

    .drop-area h2{

        font-size:1.6rem;

    }

    .action-buttons{

        flex-direction:column;

    }

    .primary-btn,

    .secondary-btn{

        width:100%;

    }

    .preview-grid,

    .results-grid{

        grid-template-columns:1fr;

    }

    .preview-image,

    .result-image{

        height:200px;

    }

}

@media(max-width:480px){

    .converter-section{

        padding:45px 0;

    }

    .converter-card{

        border-radius:20px;

    }

    .drop-area{

        border-radius:18px;

    }

    .upload-icon{

        width:70px;

        height:70px;

        font-size:28px;

    }

    .drop-area h2{

        font-size:1.35rem;

    }

    .drop-area p{

        font-size:.95rem;

    }

    .preview-content,

    .result-content{

        padding:18px;

    }

    .toast{

        left:15px;

        right:15px;

        bottom:20px;

    }

    .back-to-top{

        right:18px;

        bottom:85px;

        width:48px;

        height:48px;

    }

}

/*==============================
Utilities
==============================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.w-100{

    width:100%;

}
/* FAQ ANSWER FIX */