/*
 * Misi Anak Frontend V3
 * CSS khusus frontend. Tidak menggantikan assets/style.css.
 */

/* Tombol misi */
.mission-button{
    display:flex !important;
    width:100% !important;
    position:relative;
    z-index:20;
    border:2px solid #edf3f7 !important;
    margin:0;
    padding:11px !important;
    text-align:left;
    align-items:center;
    gap:10px;
    color:inherit;
    font:inherit;
    background:#fff;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    touch-action:manipulation;
    pointer-events:auto !important;
}

.mission-button *,
.mission-button::before,
.mission-button::after{
    pointer-events:none;
}

.mission-button:hover{
    transform:translateY(-1px);
}

.mission-button:active{
    transform:scale(.985);
}

.mission-button:focus-visible{
    outline:3px solid rgba(37,99,235,.28);
    outline-offset:2px;
}

.mission-arrow{
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#edf8ff;
    color:#2377b7;
    font-size:27px;
    line-height:1;
}

.mission-empty-today{
    display:none;
    margin-top:15px;
    padding:24px 16px;
    text-align:center;
    background:#fff8d9;
    border:2px solid #ffe06a;
    border-radius:22px;
}

.mission-empty-today.show{
    display:block;
    animation:missionPop .3s ease;
}

.mission-empty-today strong{
    display:block;
    margin-top:4px;
    color:#19834a;
    font-size:18px;
}

.mission-empty-today p{
    margin:4px 0 0;
    color:#806d49;
    font-size:13px;
}

@keyframes missionPop{
    from{opacity:0;transform:scale(.96)}
    to{opacity:1;transform:scale(1)}
}

/* Modal upload */
body.modal-open{
    overflow:hidden;
}

.proof-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    align-items:flex-end;
    justify-content:center;
    padding:0;
    background:rgba(15,45,70,.48);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.proof-overlay.show{
    display:flex !important;
}

.proof-modal{
    position:relative;
    width:100%;
    max-width:600px;
    max-height:92vh;
    overflow-y:auto;
    padding:24px 18px 20px;
    background:#fff;
    border-radius:28px 28px 0 0;
    box-shadow:0 -15px 50px rgba(20,65,95,.2);
    animation:proofUp .25s ease;
}

@keyframes proofUp{
    from{transform:translateY(30px);opacity:0}
    to{transform:translateY(0);opacity:1}
}

.proof-close{
    position:absolute;
    top:13px;
    right:13px;
    z-index:3;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#eef4f7;
    color:#38556b;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.proof-illustration{
    width:70px;
    height:70px;
    display:grid;
    place-items:center;
    margin:0 auto 9px;
    border-radius:22px;
    background:#e8f7ff;
    font-size:40px;
}

.proof-label{
    display:block;
    color:#1681c7;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
    text-align:center;
}

.proof-modal h2{
    margin:3px 35px 4px;
    color:#123f71;
    font-size:23px;
    line-height:1.2;
    text-align:center;
}

.proof-description{
    max-width:390px;
    margin:0 auto 16px;
    color:#6b7d92;
    font-size:13px;
    text-align:center;
}

.proof-upload{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:150px;
    padding:18px;
    border:2px dashed #83cce9;
    border-radius:20px;
    background:#f1fbff;
    text-align:center;
    cursor:pointer;
}

.proof-upload input{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
}

.upload-icon{
    font-size:39px;
    line-height:1;
}

.proof-upload strong{
    margin-top:7px;
    color:#176ba7;
    font-size:16px;
}

.proof-upload small{
    margin-top:3px;
    color:#71869a;
    font-size:11px;
}

.proof-preview{
    display:none;
    margin-top:12px;
    text-align:center;
}

.proof-preview:not(:empty){
    display:block;
}

.proof-preview img{
    display:block;
    width:100%;
    max-height:260px;
    object-fit:contain;
    border-radius:17px;
    border:2px solid #dbeaf1;
    background:#f7fbfd;
}

.proof-submit{
    width:100%;
    min-height:52px;
    margin-top:13px;
    border:0;
    border-radius:17px;
    background:#35b965;
    color:#fff;
    font-size:16px;
    font-weight:800;
    box-shadow:0 7px 16px rgba(53,185,101,.22);
    cursor:pointer;
}

.proof-cancel{
    display:block;
    width:100%;
    margin-top:8px;
    padding:9px;
    border:0;
    background:transparent;
    color:#6c8092;
    font-size:13px;
    cursor:pointer;
}

/* Modal lihat bukti */
.proof-viewer-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,45,70,.62);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
}

.proof-viewer-overlay.show{
    display:flex !important;
}

.proof-viewer-modal{
    position:relative;
    width:100%;
    max-width:700px;
    max-height:92vh;
    overflow:auto;
    padding:24px 20px 20px;
    background:#fff;
    border-radius:28px;
    box-shadow:0 20px 70px rgba(20,65,95,.28);
    text-align:center;
    animation:proofViewerIn .25s ease;
}

@keyframes proofViewerIn{
    from{transform:scale(.97);opacity:0}
    to{transform:scale(1);opacity:1}
}

.proof-viewer-close{
    position:absolute;
    top:12px;
    right:12px;
    z-index:3;
    width:40px;
    height:40px;
    border:0;
    border-radius:50%;
    background:#eef4f7;
    color:#38556b;
    font-size:27px;
    line-height:1;
    cursor:pointer;
}

.proof-viewer-label{
    display:block;
    margin:0 45px 5px;
    color:#1681c7;
    font-size:11px;
    font-weight:900;
    letter-spacing:1px;
}

.proof-viewer-modal h2{
    margin:4px 45px 14px;
    color:#123f71;
    font-size:22px;
    line-height:1.2;
}

.proof-viewer-modal img{
    display:block;
    width:100%;
    max-height:65vh;
    object-fit:contain;
    margin:0 auto;
    border-radius:18px;
    background:#f7fbfd;
}

.proof-viewer-info{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin-top:12px;
    color:#6b7d92;
    font-size:13px;
}

.proof-viewer-info strong{
    color:#176ba7;
}

/* Desktop */
@media(min-width:601px){
    .proof-overlay{
        align-items:center;
        padding:20px;
    }

    .proof-modal{
        border-radius:28px;
        box-shadow:0 20px 70px rgba(20,65,95,.25);
    }
}

/* Mobile */
@media(max-width:600px){
    .proof-viewer-overlay{
        padding:10px;
    }

    .proof-viewer-modal{
        max-height:94vh;
        padding:22px 12px 15px;
        border-radius:24px;
    }

    .proof-viewer-modal img{
        max-height:70vh;
    }
}