/* =========================================================
   TRIGGER BUTTON
   ========================================================= */

.spmb-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #0f766e, #16a34a);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(22, 163, 74, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.spmb-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(22, 163, 74, 0.35);
}

.spmb-trigger:active {
    transform: translateY(-1px);
}


/* =========================================================
   MODAL OVERLAY
   ========================================================= */

.spmb-modal {
    position: fixed;
    inset: 0;

    /* WAJIB UNTUK POSISI TENGAH */
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;

    padding: 20px;
    box-sizing: border-box;

    z-index: 99999;

    background: rgba(15, 23, 42, 0.65);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


/* MODAL AKTIF */

.spmb-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================================
   MODAL CONTENT
   ========================================================= */

.spmb-modal-content {
    position: relative;

    /* POSISI TENGAH */
    margin: auto;

    width: min(500px, 100%);

    max-height: calc(100vh - 40px);

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 24px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.30);

    transform: translateY(25px) scale(0.96);

    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ANIMASI SAAT AKTIF */

.spmb-modal.active .spmb-modal-content {
    transform: translateY(0) scale(1);
}


/* =========================================================
   HEADER
   ========================================================= */

.spmb-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-shrink: 0;

    padding: 18px 20px;

    background: linear-gradient(
        135deg,
        #0f766e,
        #16a34a
    );

    color: #ffffff;
}

.spmb-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
}

.spmb-modal-subtitle {
    margin: 3px 0 0;
    font-size: 12px;
    opacity: 0.85;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.spmb-close {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.15);

    color: #ffffff;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.spmb-close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: rotate(90deg);
}


/* =========================================================
   FLYER
   ========================================================= */

.spmb-flyer-wrapper {
    width: 100%;

    padding: 16px;

    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #f8fafc;

    overflow-y: auto;

    max-height: 60vh;

    scrollbar-width: thin;
}

.spmb-flyer {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    max-height: 55vh;

    object-fit: contain;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   FOOTER
   ========================================================= */

.spmb-modal-footer {
    flex-shrink: 0;

    padding: 16px 20px 20px;

    background: #ffffff;

    border-top: 1px solid #f1f5f9;
}

.spmb-info {
    margin-bottom: 14px;

    text-align: center;

    color: #64748b;

    font-size: 13px;
    line-height: 1.5;
}


/* =========================================================
   BUTTON CONTAINER
   ========================================================= */

.spmb-buttons {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    align-items: center;
}


/* =========================================================
   BUTTON
   ========================================================= */

.spmb-btn {
    flex: 1;

    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding: 13px 16px;

    box-sizing: border-box;

    border-radius: 12px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.spmb-btn:hover {
    transform: translateY(-2px);
}


/* =========================================================
   BUTTON DAFTAR
   ========================================================= */

.spmb-btn-daftar {
    border: none;

    background: linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    color: #ffffff;

    box-shadow:
        0 7px 18px rgba(22, 163, 74, 0.25);
}

.spmb-btn-daftar:hover {
    box-shadow:
        0 10px 24px rgba(22, 163, 74, 0.35);

    color: #ffffff;
}


/* =========================================================
   BUTTON HUBUNGI ADMIN
   ========================================================= */

.spmb-btn-admin {
    background: #198754;

    color: #ffffff;

    border: 1px solid #198754;

    text-decoration: none;
}

.spmb-btn-admin:hover {
    background: #157347;

    border-color: #146c43;

    color: #ffffff;

    text-decoration: none;
}

.spmb-btn-admin i {
    margin-right: 6px;
}


/* =========================================================
   BUTTON TUTUP
   ========================================================= */

.spmb-btn-tutup {
    border: 1px solid #e2e8f0;

    background: #ffffff;

    color: #475569;
}

.spmb-btn-tutup:hover {
    background: #f8fafc;

    color: #475569;
}




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


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .spmb-modal {
        padding: 12px;
    }

  
/* =========================================================
   MODAL CONTENT - RESPONSIVE
   ========================================================= */

.spmb-modal-content {
    width: min(94vw, 1100px);

    max-width: 1100px;

    /* tinggi mengikuti layar */
    height: min(92vh, 900px);

    max-height: calc(100vh - 24px);

    margin: auto;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border-radius: 20px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   DESKTOP BESAR
   ========================================================= */

@media (min-width: 1200px) {

    .spmb-modal-content {
        width: min(92vw, 1200px);

        max-width: 1200px;

        height: min(92vh, 900px);
    }
}


/* =========================================================
   LAPTOP / DESKTOP
   ========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {

    .spmb-modal-content {
        width: 94vw;

        height: 92vh;

        max-height: calc(100vh - 30px);

        border-radius: 18px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 601px) and (max-width: 768px) {

    .spmb-modal-content {
        width: 95vw;

        height: 94vh;

        max-height: calc(100vh - 20px);

        border-radius: 16px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .spmb-modal-content {
        width: calc(100vw - 16px);

        height: calc(100vh - 16px);

        max-width: none;

        max-height: calc(100vh - 16px);

        margin: 8px;

        border-radius: 16px;
    }
}


/* =========================================================
   MOBILE KECIL
   ========================================================= */

@media (max-width: 380px) {

    .spmb-modal-content {
        width: calc(100vw - 12px);

        height: calc(100vh - 12px);

        max-height: calc(100vh - 12px);

        margin: 6px;

        border-radius: 14px;
    }
}


/* =========================================================
   MOBILE LANDSCAPE
   ========================================================= */

@media (max-width: 900px) and (orientation: landscape) {

    .spmb-modal-content {
        width: 96vw;

        height: 96vh;

        max-height: calc(100vh - 12px);

        border-radius: 14px;
    }
}


    .spmb-modal-header {
        padding: 15px 16px;
    }

    .spmb-modal-title {
        font-size: 16px;
    }

    .spmb-modal-subtitle {
        font-size: 11px;
    }

    .spmb-close {
        width: 34px;
        height: 34px;

        font-size: 21px;
    }

    .spmb-flyer-wrapper {
        padding: 10px;

        max-height: 100%;
    }

    .spmb-flyer {
        max-height: 50vh;

        border-radius: 10px;
    }
   

    .spmb-modal-footer {
        padding: 12px;
    }

    .spmb-buttons {
        flex-direction: column;
    }

    .spmb-btn {
        width: 100%;

        flex: none;

        min-height: 46px;
    }

    .spmb-trigger {
        width: 100%;
    }
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.spmb-close:focus-visible,
.spmb-btn:focus-visible,
.spmb-trigger:focus-visible {

    outline: 3px solid rgba(22, 163, 74, 0.35);

    outline-offset: 3px;
}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .spmb-modal,
    .spmb-modal-content,
    .spmb-trigger,
    .spmb-btn,
    .spmb-close {

        transition: none;
    }
}

.spmb-modal {
    position: fixed;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 100vh;
}
.spmb-modal-content {
    margin: auto;
    max-height: calc(100vh - 40px);
}



/* =========================================================
   FLYER CURSOR
   ========================================================= */

.spmb-flyer {
    cursor: zoom-in;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.spmb-flyer:hover {
    transform: scale(1.01);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.20);
}


/* =========================================================
   IMAGE PREVIEW OVERLAY
   ========================================================= */

.spmb-image-preview {
    position: fixed;

    inset: 0;

    z-index: 100000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 30px;

    background: rgba(0, 0, 0, 0.94);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;

    overflow: auto;
}


/* AKTIF */

.spmb-image-preview.show {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   PREVIEW IMAGE
   ========================================================= */

.spmb-image-preview-img {
    display: block;

    width: auto;
    height: auto;

    max-width: 95vw;
    max-height: 92vh;

    object-fit: contain;

    border-radius: 8px;

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

    cursor: zoom-out;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.spmb-image-preview-close {
    position: fixed;

    top: 20px;
    right: 25px;

    z-index: 100001;

    width: 46px;
    height: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.95);

    color: #111827;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.spmb-image-preview-close:hover {

    background: #ffffff;

    transform: rotate(90deg);
}


/* =========================================================
   HINT
   ========================================================= */

.spmb-image-preview-hint {

    position: fixed;

    bottom: 18px;
    left: 50%;

    transform: translateX(-50%);

    padding: 8px 15px;

    border-radius: 20px;

    background: rgba(0, 0, 0, 0.65);

    color: #ffffff;

    font-size: 12px;

    white-space: nowrap;

    pointer-events: none;
}


/* =========================================================
   BODY PREVIEW OPEN
   ========================================================= */

body.spmb-preview-open {
    overflow: hidden;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .spmb-image-preview {

        padding: 15px;

    }


    .spmb-image-preview-img {

        max-width: 96vw;

        max-height: 94vh;

        border-radius: 5px;

    }


    .spmb-image-preview-close {

        top: 12px;

        right: 12px;

        width: 40px;

        height: 40px;

        font-size: 26px;

    }


    .spmb-image-preview-hint {

        bottom: 10px;

        font-size: 10px;

        padding: 7px 12px;

    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .spmb-image-preview {

        padding: 8px;

        align-items: center;

    }


    .spmb-image-preview-img {

        max-width: 98vw;

        max-height: 94vh;

        border-radius: 4px;

    }


    .spmb-image-preview-close {

        top: 10px;

        right: 10px;

        width: 38px;

        height: 38px;

        font-size: 25px;

    }


    .spmb-image-preview-hint {

        max-width: 90vw;

        overflow: hidden;

        text-overflow: ellipsis;

    }

}