/*
 * competition_fj26.css
 * Image modal (lightbox) used by the Lomba Qasidah "Daftar Sekarang"
 * button on competition.html. Built by competition_fj26.js; dark glass
 * backdrop + cyan-bordered frame to match the FJ26 tone.
 */

.fj26-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(3,7,20,0.86);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease, visibility 0s linear .3s;
}
.fj26-modal.is-open{
    opacity:1;
    visibility:visible;
    transition:opacity .3s ease;
}

.fj26-modal-dialog{
    position:relative;
    max-width:min(92vw, 720px);
    max-height:92vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    transform:translateY(18px) scale(.96);
    transition:transform .35s cubic-bezier(.34,1.3,.64,1);
}
.fj26-modal.is-open .fj26-modal-dialog{
    transform:translateY(0) scale(1);
}

.fj26-modal-img{
    display:block;
    max-width:100%;
    max-height:calc(92vh - 8px);
    width:auto;
    height:auto;
    border-radius:16px;
    border:1px solid rgba(53,225,255,0.4);
    box-shadow:0 30px 80px rgba(0,0,0,0.65), 0 0 40px rgba(53,225,255,0.18);
    background:#0A1442;
}

.fj26-modal-close{
    position:absolute;
    top:-14px;
    right:-14px;
    width:38px;
    height:38px;
    padding:0;
    border:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    color:var(--fj26-white,#F3F7FF);
    background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994));
    box-shadow:0 8px 22px rgba(0,0,0,0.5);
    transition:transform .25s ease, box-shadow .25s ease;
    z-index:2;
}
.fj26-modal-close:hover,
.fj26-modal-close:focus-visible{
    transform:rotate(90deg) scale(1.08);
    box-shadow:0 8px 26px rgba(53,225,255,0.55);
    outline:none;
}

body.fj26-modal-open{ overflow:hidden; }

@media (max-width:767px){
    .fj26-modal{ padding:14px; }
    .fj26-modal-close{ top:-10px; right:-6px; }
}

@media (prefers-reduced-motion: reduce){
    .fj26-modal, .fj26-modal-dialog, .fj26-modal-close{ transition:none !important; }
}