/*
 * MK STORE popup announcements (ประกาศป๊อปอัป).
 * Every colour comes from the theme tokens (--mk-accent ...) set in the backend theme page.
 */
.mkp { position: fixed; inset: 0; z-index: 2147481000; display: flex; align-items: center; justify-content: center; padding: 16px; letter-spacing: 0; }
.mkp[hidden] { display: none; }
.mkp-backdrop { position: absolute; inset: 0; background: rgba(2, 3, 8, 0.74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.25s ease; }
.mkp.is-open .mkp-backdrop { opacity: 1; }

.mkp-card {
    position: relative; width: min(440px, 100%); max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
    background: linear-gradient(180deg, rgba(16, 18, 28, 0.98), rgba(8, 9, 14, 0.99));
    border: 1px solid rgba(var(--mk-accent-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--mk-accent-rgb), 0.1), 0 0 42px rgba(var(--mk-accent-rgb), 0.3), 0 30px 70px rgba(0, 0, 0, 0.7);
    color: #ffffff; opacity: 0; transform: scale(0.6) translateY(40px);
}
/* pop up with a small bounce */
.mkp.is-open .mkp-card { animation: mkpPop 0.55s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.mkp.is-closing .mkp-card { animation: mkpOut 0.2s ease forwards; }
.mkp.is-closing .mkp-backdrop { opacity: 0; }
@keyframes mkpPop { 0% { opacity: 0; transform: scale(0.6) translateY(40px); } 55% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes mkpOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.92) translateY(14px); } }
.mkp-slide.is-swap { animation: mkpSwap 0.36s cubic-bezier(.2, .8, .2, 1); }
@keyframes mkpSwap { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* running light around the frame (same effect as the product cards) */
.mkp-card.mk-fx-beam > .mk-beam { z-index: 7; }

.mkp-x {
    position: absolute; top: 10px; right: 10px; z-index: 8; width: 34px; height: 34px; padding: 0; margin: 0;
    display: grid; place-items: center; border-radius: 50%; cursor: pointer;
    background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.22); color: #ffffff !important;
    font-size: 1.05rem; line-height: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.mkp-x svg { display: block; pointer-events: none; }
.mkp-x:hover, .mkp-x:focus-visible { transform: rotate(90deg); border-color: rgba(var(--mk-accent-hi-rgb), 0.8); }

.mkp-slide { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mkp-media { display: block; flex: 0 0 auto; background: #05060a; }
.mkp-media[hidden] { display: none; }
.mkp-media img { display: block; width: 100%; height: auto; max-height: min(60dvh, 560px); object-fit: contain; }
a.mkp-media { cursor: pointer; }
.mkp-body { padding: 16px 18px 2px; }
.mkp-body[hidden] { display: none; }
.mkp-card.no-media .mkp-body { padding-top: 22px; padding-right: 52px; }
.mkp-title { margin: 0 0 6px; font-size: 1.08rem; font-weight: 800; line-height: 1.45; color: #ffffff !important; overflow-wrap: break-word; }
.mkp-title:empty { display: none; }
.mkp-text { margin: 0; font-size: 0.86rem; line-height: 1.7; color: #cbd5e1 !important; white-space: pre-line; overflow-wrap: break-word; }
.mkp-text:empty { display: none; }

.mkp-foot { flex: 0 0 auto; display: grid; gap: 10px; padding: 12px 18px 16px; }
.mkp-dots { display: flex; justify-content: center; gap: 6px; }
.mkp-dots[hidden] { display: none; }
.mkp-dot { width: 8px; height: 8px; padding: 0; margin: 0; border: 0; border-radius: 99px; cursor: pointer; background: rgba(255, 255, 255, 0.25); transition: width 0.2s ease, background 0.2s ease; }
.mkp-dot.is-on { width: 22px; background: var(--mk-accent); box-shadow: 0 0 8px rgba(var(--mk-accent-rgb), 0.6); }
.mkp-actions { display: flex; gap: 8px; }
.mkp-btn {
    flex: 1 1 0; min-width: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 12px; padding: 10px 12px; font-size: 0.88rem; font-weight: 700; line-height: 1.3;
    white-space: nowrap; text-align: center; text-decoration: none !important; cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.mkp-btn[hidden] { display: none; }
.mkp-primary { background: linear-gradient(135deg, var(--mk-accent-lo), var(--mk-accent)); color: var(--mk-on-accent) !important; border: 1px solid transparent; box-shadow: 0 6px 18px rgba(var(--mk-accent-rgb), 0.35); }
.mkp-primary:hover { transform: translateY(-1px); box-shadow: 0 9px 22px rgba(var(--mk-accent-rgb), 0.5); }
.mkp-ghost { background: rgba(255, 255, 255, 0.05); color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.16); }
.mkp-ghost:hover { border-color: rgba(var(--mk-accent-rgb), 0.6); }
.mkp-btn i { color: inherit !important; }
.mkp-today { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; cursor: pointer; font-size: 0.78rem; line-height: 1.4; }
.mkp-today[hidden] { display: none; }
.mkp-today input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; accent-color: var(--mk-accent); cursor: pointer; }
.mkp-today span { color: #94a3b8 !important; }

html.mkp-open, html.mkp-open body { overflow: hidden !important; }

@media (max-width: 575.98px) {
    .mkp { padding: 12px; }
    .mkp-card { border-radius: 18px; max-height: calc(100dvh - 24px); }
    .mkp-media img { max-height: 56dvh; }
    .mkp-body { padding: 14px 14px 2px; }
    .mkp-foot { padding: 10px 14px 14px; }
    .mkp-title { font-size: 1rem; }
    .mkp-text { font-size: 0.82rem; line-height: 1.65; }
}

@media (prefers-reduced-motion: reduce) {
    .mkp.is-open .mkp-card { animation: none; opacity: 1; transform: none; }
    .mkp.is-closing .mkp-card, .mkp-slide.is-swap { animation: none; }
    .mkp-backdrop { transition: none; }
}