/* ======================================
   Smart Modal Popup — Frontend Styles v1.1
   ====================================== */

/* Overlay — hidden by default, ไม่มีใน DOM จนกว่า JS จะสร้าง */
.smp-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 10, 30, 0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.35s ease;
    box-sizing: border-box;
}

.smp-overlay.smp-visible {
    opacity: 1;
}

/* Modal box */
.smp-modal {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

/* ── Animations ── */
.smp-anim-fade {
    opacity: 0;
    transition: opacity 0.35s ease;
}
.smp-overlay.smp-visible .smp-anim-fade {
    opacity: 1;
}

.smp-anim-slide {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.smp-overlay.smp-visible .smp-anim-slide {
    opacity: 1;
    transform: translateY(0);
}

.smp-anim-zoom {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.smp-overlay.smp-visible .smp-anim-zoom {
    opacity: 1;
    transform: scale(1);
}

.smp-anim-none {
    opacity: 1;
    transform: none;
}

/* Close button */
.smp-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.07);
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    transition: background 0.15s, transform 0.15s;
    line-height: 1;
}
.smp-close-btn:hover {
    background: rgba(0,0,0,0.14);
    transform: rotate(90deg);
}

/* Body */
.smp-body {
    padding: 40px;
}

/* HTML content */
.smp-html-content {
    line-height: 1.7;
    color: #1a1a2e;
}
.smp-html-content img {
    max-width: 100%;
    height: auto;
}
.smp-html-content p:last-child {
    margin-bottom: 0;
}

/* iFrame */
.smp-iframe-wrapper {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    line-height: 0;
}
.smp-iframe-wrapper iframe {
    display: block;
    width: 100%;
    border: none;
}

/* Responsive */
@media (max-width: 600px) {
    .smp-modal  { border-radius: 12px; }
    .smp-body   { padding: 24px 18px; }
}