/* ==========================================================
   HostConverter - Client Side Encryption Tool
   style.css
========================================================== */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root{

    --primary:#0d6efd;
    --success:#198754;
    --danger:#dc3545;
    --light:#f8f9fa;
    --dark:#212529;
    --border:#e5e7eb;

    --radius:14px;

    --shadow:
        0 10px 35px rgba(0,0,0,.08);

}

/* ========================================================== */

body{

    font-family:'Inter',sans-serif;

    background:#f3f7fb;

    color:#222;

}

/* ========================================================== */

h1{

    font-weight:700;

    letter-spacing:-.5px;

}

/* ========================================================== */

.card{

    border:none;

    border-radius:18px;

    box-shadow:var(--shadow);

}

/* ========================================================== */

.card-header{

    background:white;

    border-bottom:1px solid #eee;

}

/* ========================================================== */

.nav-tabs .nav-link{

    border:none;

    color:#555;

    font-weight:600;

    padding:15px 25px;

}

.nav-tabs .nav-link.active{

    color:var(--primary);

    border-bottom:3px solid var(--primary);

}

/* ========================================================== */

#dropZone{

    border:3px dashed #cbd5e1;

    border-radius:18px;

    background:#fafcff;

    transition:.25s;

    cursor:pointer;

}

#dropZone:hover{

    background:#f2f8ff;

    border-color:var(--primary);

}

#dropZone.dragover{

    border-color:var(--primary);

    background:#eaf4ff;

    transform:scale(1.01);

}

/* ========================================================== */

#dropZone i{

    color:var(--primary);

}

/* ========================================================== */

.btn{

    border-radius:10px;

    font-weight:600;

    transition:.25s;

}

.btn-lg{

    padding:14px;

}

/* ========================================================== */

.btn-primary:hover{

    transform:translateY(-2px);

}

.btn-success:hover{

    transform:translateY(-2px);

}

.btn-danger:hover{

    transform:translateY(-2px);

}

/* ========================================================== */

.form-control{

    border-radius:10px;

    padding:12px;

    border:1px solid #ced4da;

}

.form-control:focus{

    box-shadow:0 0 0 .2rem rgba(13,110,253,.15);

}

/* ========================================================== */

.progress{

    border-radius:50px;

    background:#ececec;

}

.progress-bar{

    transition:.3s;

}

/* ========================================================== */

#selectedFile{

    font-weight:600;

    color:var(--success);

    word-break:break-word;

}

/* ========================================================== */

#downloadSection{

    animation:fadeIn .5s ease;

}

#decryptDownload{

    animation:fadeIn .5s ease;

}

/* ========================================================== */

small{

    color:#6c757d;

}

/* ========================================================== */

footer{

    margin-top:40px;

}

/* ========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(15px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ========================================================== */

.spinner{

    width:25px;

    height:25px;

    border:3px solid #ddd;

    border-top:3px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ========================================================== */

.badge-security{

    background:#ecfdf3;

    color:#198754;

    border:1px solid #ccebd8;

    padding:8px 15px;

    border-radius:50px;

    font-size:13px;

    font-weight:600;

}

/* ========================================================== */

.info-box{

    background:white;

    border-radius:12px;

    padding:15px;

    border:1px solid #ececec;

    margin-top:20px;

}

.info-box strong{

    display:block;

    margin-bottom:4px;

}

/* ========================================================== */

.file-details{

    display:none;

    margin-top:20px;

    background:#f8f9fa;

    border-radius:12px;

    padding:18px;

    border:1px solid #e5e5e5;

}

.file-details p{

    margin:6px 0;

}

/* ========================================================== */

.password-match{

    color:var(--success);

    font-size:14px;

}

.password-error{

    color:var(--danger);

    font-size:14px;

}

/* ========================================================== */

.security-icons{

    display:flex;

    justify-content:center;

    gap:25px;

    margin-top:30px;

    flex-wrap:wrap;

}

.security-icons div{

    text-align:center;

}

.security-icons i{

    font-size:34px;

    color:var(--primary);

    margin-bottom:10px;

}

/* ========================================================== */

@media(max-width:768px){

    h1{

        font-size:30px;

    }

    #dropZone{

        padding:35px 15px;

    }

    .btn-lg{

        padding:12px;

    }

}

/* ========================================================== */

@media(max-width:576px){

    .card{

        border-radius:12px;

    }

    .nav-tabs .nav-link{

        padding:12px;

        font-size:15px;

    }

    h1{

        font-size:26px;

    }

}

/* ========================================================== */