body{

    margin:0;

    background:
    linear-gradient(
        180deg,
        #eaf8ff 0%,
        #ffffff 100%
    );

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

    min-height:100vh;
}

.container{

    max-width:720px;
}

/* ================= LANGUAGE SWITCHER ================= */

.lang-switcher{
    text-align:center;
    padding:15px 0 0;
    font-size:14px;
    font-weight:700;
    direction:ltr;
}

.lang-switcher a{
    color:#009fe3;
    text-decoration:none;
    padding:4px 10px;
    border-radius:8px;
    transition:.2s;
}

.lang-switcher a:hover{
    background:rgba(0,159,227,.10);
}

.lang-switcher a.active{
    background:#009fe3;
    color:#fff;
}

.lang-sep{
    color:#ccc;
    margin:0 2px;
}

/* RTL support */
body.lang-ar{
    direction:rtl;
    font-family:'Cairo','Tahoma',sans-serif;
}

body.lang-en{
    direction:ltr;
    font-family:'Cairo',sans-serif;
}

/* TOP */

.top-area{

    text-align:center;

    padding-top:30px;

    padding-bottom:20px;
}

.top-area img{

    width:140px;
}

.top-title{

    color:#009fe3;

    font-size:34px;

    font-weight:900;

    margin-top:12px;
}

.top-sub{

    color:#666;

    margin-top:8px;
}

/* CARD */

.card{

    border:none !important;

    border-radius:35px !important;

    padding:30px !important;

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

    overflow:hidden;

    position:relative;
}

.card::before{

    content:"";

    position:absolute;

    width:240px;
    height:240px;

    background:
    rgba(255,193,7,.10);

    border-radius:50%;

    top:-120px;
    right:-120px;
}

.card::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    background:
    rgba(3,169,244,.08);

    border-radius:50%;

    bottom:-130px;
    left:-130px;
}

/* INPUT */

.form-control{

    min-height:58px;

    border-radius:18px !important;

    border:
    2px solid #d8efff !important;

    box-shadow:none !important;

    padding:12px 18px;
}

.form-control:focus{

    border-color:#03a9f4 !important;

    box-shadow:
    0 0 0 5px rgba(3,169,244,.12)
    !important;
}

/* BUTTONS */

.btn{

    min-height:58px;

    border:none !important;

    border-radius:18px !important;

    font-weight:800;
}

.btn-warning{

    background:
    linear-gradient(
        135deg,
        #ffe082,
        #ffca28
    ) !important;

    color:#222 !important;
}

.btn-dark{

    background:
    linear-gradient(
        135deg,
        #29b6f6,
        #0288d1
    ) !important;
}

/* FILES */

.file-grid{

    display:grid;

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

    gap:20px;

    margin-top:20px;
}

.file-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);
}

.file-card video{

    width:100%;

    height:180px;

    object-fit:cover;
}

.file-name{

    text-align:center;

    padding:14px 12px;

    font-weight:700;

    font-size:14px;
}

/* PROGRESS */

.progress{

    height:10px;

    margin:0 12px 12px;

    border-radius:20px;

    overflow:hidden;
}

.progress-bar{

    background:
    linear-gradient(
        90deg,
        #00c6ff,
        #0072ff
    ) !important;
}

/* REMOVE */

.remove-btn{

    position:absolute;

    top:10px;
    right:10px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:#ff5252;

    color:#fff;

    font-size:18px;

    font-weight:bold;
}

/* SMALL */

small.text-muted{

    display:block;

    color:#78909c !important;

    margin-bottom:10px;
}

small.text-danger{

    display:block;

    margin-bottom:5px;

    font-weight:700;
}

/* MOBILE */

/* ================= AFTER SUBMIT DIALOG ================= */

.after-submit-overlay{
    position:fixed;
    inset:0;
    background:rgba(24,32,72,.55);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:20000;
    padding:18px;
    direction:rtl;
    font-family:"Tahoma","Segoe UI",sans-serif;
}

.after-submit-box{
    background:linear-gradient(180deg,#ffffff 0%,#fdf8ff 100%);
    max-width:min(420px,calc(100vw - 28px));
    width:100%;
    border-radius:32px;
    overflow:hidden;
    position:relative;
    box-shadow:
        0 20px 60px rgba(108,99,255,.25),
        0 8px 20px rgba(0,0,0,.08);
    animation:afterSubmitIn .35s ease;
    border:5px solid #fff;
}

.after-submit-box::before,
.after-submit-box::after{
    content:"";
    position:absolute;
    border-radius:50%;
    z-index:0;
}

.after-submit-box::before{
    width:180px;
    height:180px;
    background:rgba(108,99,255,.10);
    top:-60px;
    left:-50px;
}

.after-submit-box::after{
    width:140px;
    height:140px;
    background:rgba(79,195,247,.12);
    bottom:-45px;
    right:-40px;
}

.after-submit-header{
    position:relative;
    z-index:2;
    background:linear-gradient(135deg,#6C63FF,#FF6FB5);
    padding:22px 20px 28px;
    text-align:center;
    color:#fff;
}

.after-submit-stars{
    font-size:22px;
    margin-bottom:8px;
    letter-spacing:4px;
}

.after-submit-header h3{
    margin:0;
    font-size:1.35rem;
    font-weight:800;
}

.after-submit-header p{
    margin:8px 0 0;
    font-size:.9rem;
    opacity:.95;
}

.after-submit-body{
    position:relative;
    z-index:2;
    padding:24px 22px 10px;
    text-align:center;
}

.after-submit-body p{
    color:#444;
    font-size:1.05rem;
    font-weight:600;
    margin:0;
}

.after-submit-footer{
    position:relative;
    z-index:5;
    padding:16px 20px 22px;
    background:#fff;
    flex-shrink:0;
    border-top:1px solid #f1f1f1;
}

.after-submit-footer .btn{
    min-height:52px;
    font-size:15px;
}

.after-submit-footer .btn-primary{
    background:linear-gradient(135deg,#6C63FF,#4FC3F7) !important;
    box-shadow:0 10px 24px rgba(108,99,255,.28);
}

.after-submit-footer .btn-secondary{
    background:linear-gradient(135deg,#a8a8a8,#888) !important;
    box-shadow:0 6px 16px rgba(0,0,0,.12);
}

@keyframes afterSubmitIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.92);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media(max-width:768px){

    .container{

        padding-left:14px;
        padding-right:14px;
    }

    .card{

        padding:22px !important;

        border-radius:28px !important;
    }

    .top-title{

        font-size:28px;
    }

    .file-grid{

        grid-template-columns:1fr;
    }

    .file-card video{

        height:220px;
    }

    #saveBtn{

        position:sticky;

        bottom:10px;

        z-index:100;
    }
}