/* EVENT Presensi -> Sertifikat -> Email v6 */

.event-public-shell,
.participant-status-shell{
    width:min(1180px,calc(100% - 32px));
    margin:36px auto 56px;
}

.event-public-hero{
    overflow:hidden;
    border:1px solid #e9e0cd;
    border-radius:22px;
    background:#fff;
    box-shadow:0 16px 38px rgba(66,52,22,.08);
}

.event-public-banner{
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#eee;
}

.event-public-banner img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.event-public-copy{
    padding:28px 32px 30px;
}

.event-public-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:14px;
}

.event-status-badge,
.event-type-badge,
.home-event-status{
    display:inline-flex;
    align-items:center;
    padding:7px 11px;
    border-radius:999px;
    font-size:10px;
    font-weight:800;
    letter-spacing:.05em;
}

.event-status-badge.is-upcoming,
.home-event-status.is-upcoming{
    background:#fff4d8;
    color:#946b14;
}

.event-status-badge.is-ongoing,
.home-event-status.is-ongoing{
    background:#e2f7eb;
    color:#18794e;
}

.event-status-badge.is-finished,
.home-event-status.is-finished{
    background:#eef1f5;
    color:#657083;
}

.event-type-badge{
    background:#f4ecda;
    color:#9b762b;
}

.event-public-copy h1{
    margin:0;
    color:#17253a;
    font-size:clamp(28px,4vw,48px);
    line-height:1.12;
    letter-spacing:-.03em;
}

.event-public-description{
    max-width:840px;
    margin:14px 0 0;
    color:#637083;
    font-size:14px;
    line-height:1.7;
}

.event-public-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px 22px;
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid #eee7da;
}

.event-public-meta>div{
    display:flex;
    align-items:center;
    gap:7px;
    color:#374151;
    font-size:12px;
    font-weight:600;
}

.presence-panel{
    margin-top:22px;
    padding:28px 30px 32px;
    border:1px solid #e5dfd2;
    border-radius:20px;
    background:#fff;
    box-shadow:0 13px 32px rgba(41,50,65,.06);
}

.presence-panel__heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:28px;
    margin-bottom:22px;
}

.presence-kicker{
    color:#b28734;
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}

.presence-panel__heading h2,
.certificate-popup__header h2{
    margin:5px 0 6px;
    color:#17253a;
}

.presence-panel__heading p,
.certificate-popup__header p{
    margin:0;
    color:#718096;
    font-size:12px;
    line-height:1.55;
}

.presence-flow{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    padding:10px 13px;
    border-radius:12px;
    background:#faf6ed;
    color:#80652e;
    font-size:10px;
    font-weight:700;
}

.presence-flow i{font-style:normal;color:#c3aa74}

.presence-locked{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:280px;
    padding:34px;
    text-align:center;
    border:1px dashed #d9c69e;
    border-radius:16px;
    background:#fcfaf5;
}

.presence-locked__icon{
    width:56px;
    height:56px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f5ead0;
    font-size:24px;
}

.presence-locked h3{
    margin:14px 0 6px;
    color:#263246;
}

.presence-locked p{
    max-width:520px;
    margin:0;
    color:#718096;
    font-size:12px;
    line-height:1.6;
}

.presence-submit-note{
    display:block;
    margin-top:10px;
    color:#7b8797;
    font-size:10px;
}

.public-upload-field input[type=file]{
    width:100%;
    padding:12px;
    border:1px dashed #a9bfd8;
    border-radius:10px;
    background:#f8fbff;
}

.event-card__media{
    position:relative;
}

.home-event-status{
    position:absolute;
    left:12px;
    top:12px;
    z-index:2;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.event-card__schedule{
    display:flex;
    flex-wrap:wrap;
    gap:7px 14px;
    margin-bottom:9px;
    color:#9b762b;
    font-size:10px;
    font-weight:700;
}

.event-card__location{
    margin:10px 0 16px;
    color:#687386;
    font-size:11px;
}

.event-register.is-muted{
    background:#edeff2!important;
    color:#697384!important;
}

/* Participant success */
.participant-success-card,
.status-card{
    padding:24px;
    border:1px solid #e5dfd2;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 27px rgba(41,50,65,.06);
}

.participant-success-card h1{
    margin:7px 0 4px;
    color:#17253a;
}

.participant-success-card>p{
    margin:0 0 14px;
    color:#718096;
}

.participant-status-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin:18px 0;
}

.status-card__title{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
    padding-bottom:12px;
    border-bottom:1px solid #edf0f3;
    color:#263246;
    font-size:13px;
    font-weight:800;
}

.status-card__title small{
    color:#8a95a4;
    font-size:9px;
    font-weight:500;
}

.status-details{
    display:grid;
    grid-template-columns:150px 1fr;
    gap:10px 18px;
    margin:0;
}

.status-details dt{
    color:#7b8797;
    font-size:10px;
}

.status-details dd{
    margin:0;
    color:#263246;
    font-size:11px;
    font-weight:600;
}

.certificate-ready,
.certificate-pending{
    min-height:170px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.certificate-ready__icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin-bottom:10px;
    border-radius:50%;
    background:#e5f8ed;
    color:#18834f;
    font-size:20px;
    font-weight:900;
}

.certificate-ready strong,
.certificate-pending strong{
    color:#233147;
}

.certificate-ready>span,
.certificate-pending>span{
    margin:5px 0 14px;
    color:#7b8797;
    font-size:10px;
}

.certificate-ready__actions{
    display:flex;
    gap:8px;
}

.certificate-secondary-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 14px;
    border:1px solid #d4dce6;
    border-radius:10px;
    background:#fff;
    color:#45566d;
    text-decoration:none;
    font-size:10px;
    font-weight:700;
    cursor:pointer;
}

.participant-session-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.participant-session{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:13px 14px;
    border:1px solid #edf0f3;
    border-radius:12px;
}

.participant-session>div:first-child{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.participant-session strong{
    color:#263246;
    font-size:11px;
}

.participant-session span{
    color:#8090a2;
    font-size:9px;
}

.session-status{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    background:#eef1f5;
    color:#687386!important;
    font-size:9px!important;
    font-weight:700;
}

.session-status.is-present{
    background:#e5f8ed;
    color:#18834f!important;
}

.certificate-email-status{
    margin-top:12px;
    padding:10px 12px;
    border-radius:10px;
    font-size:10px;
}

.certificate-email-status.is-sent{
    background:#e8f8ef;
    color:#20734a;
}

.certificate-email-status.is-warning{
    background:#fff6dc;
    color:#8e6c20;
}

/* Certificate popup */
.certificate-popup{
    position:fixed;
    inset:0;
    z-index:5000;
    display:grid;
    place-items:center;
    padding:20px;
}

.certificate-popup[aria-hidden=true]{display:none}

.certificate-popup__backdrop{
    position:absolute;
    inset:0;
    background:rgba(13,22,36,.72);
    backdrop-filter:blur(3px);
}

.certificate-popup__dialog{
    position:relative;
    z-index:1;
    width:min(1120px,100%);
    height:min(88vh,850px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 28px 90px rgba(0,0,0,.28);
}

.certificate-popup__header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:18px 22px 14px;
    border-bottom:1px solid #e8edf3;
}

.certificate-popup__close{
    width:36px;
    height:36px;
    border:1px solid #dce3ec;
    border-radius:9px;
    background:#fff;
    color:#66758a;
    font-size:24px;
    cursor:pointer;
}

.certificate-popup__viewer{
    flex:1;
    min-height:0;
    background:#262626;
}

.certificate-popup__viewer iframe{
    width:100%;
    height:100%;
    border:0;
}

.certificate-popup__footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px 20px;
    border-top:1px solid #e8edf3;
    background:#fbfcfd;
}

.certificate-popup__footer>div{
    display:flex;
    gap:8px;
}

.certificate-popup__mail{
    color:#3c7a59;
    font-size:10px;
}

@media(max-width:760px){
    .event-public-shell,
    .participant-status-shell{
        width:min(100% - 20px,1180px);
        margin-top:18px;
    }

    .event-public-copy,
    .presence-panel{
        padding:20px 18px;
    }

    .presence-panel__heading{
        flex-direction:column;
    }

    .participant-status-grid{
        grid-template-columns:1fr;
    }

    .status-details{
        grid-template-columns:1fr;
        gap:4px;
    }

    .status-details dd{
        margin-bottom:8px;
    }

    .participant-session{
        align-items:flex-start;
        flex-direction:column;
    }

    .certificate-popup{
        padding:8px;
    }

    .certificate-popup__dialog{
        height:94vh;
        border-radius:13px;
    }

    .certificate-popup__footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .certificate-popup__footer>div{
        width:100%;
    }

    .certificate-popup__footer a,
    .certificate-popup__footer button{
        flex:1;
    }
}


/* EVENT v6.1 - attendance window */
.presence-window-note{
    display:block;
    margin-top:12px;
    color:#8a6e31;
    font-size:10px;
    font-weight:600;
}

.event-card__presence-window{
    margin:-8px 0 14px;
    color:#9b762b;
    font-size:9px;
    font-weight:700;
}