/* ROII APP — ติดตั้งเป็นแอพ + แจ้งเตือนบนหน้าจอ · ใช้ทั้งหน้าเว็บและหลังบ้าน (prefix rpa-)
 * ธีมมืด + แดงแบรนด์ (#CC2229) ให้เข้ากับ style.css · 🇹🇭 ข้อความส่วนใหญ่เป็นไทย → Prompt + letter-spacing 0
 * ⚠️ ไฟล์นี้ต้องโหลดใน <head> (Pwa::headHtml) — ปุ่ม SVG ทุกตัวมี width/height ในตัว กัน CSS มาช้าแล้วไอคอนขยายเต็มจอ */
.rpa-modal, .rpa-install-card, .rpa-install-link, .rpa-footer-app, .rpa-banner, .rpa-sheet, .rpa-toast, .rpa-push, .rpa-page {
    font-family: 'Prompt', 'Noto Sans Thai', system-ui, sans-serif;
    letter-spacing: 0;
    box-sizing: border-box;
}
.rpa-modal *, .rpa-banner *, .rpa-sheet *, .rpa-push *, .rpa-install-card *, .rpa-page * { box-sizing: border-box; letter-spacing: 0; }

/* ---- ปุ่ม ---- */
.rpa-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 14px 18px; border: 0; border-radius: 999px;
    background: var(--red, #CC2229); color: #fff;
    font: 600 15px/1.2 'Prompt', sans-serif; cursor: pointer; transition: transform .12s ease, opacity .12s ease, filter .12s ease;
    box-shadow: 0 6px 22px rgba(204, 34, 41, .35);
}
.rpa-btn:hover { filter: brightness(1.08); }
.rpa-btn:active { transform: scale(.98); }
.rpa-btn:disabled { opacity: .5; cursor: default; }
.rpa-btn.is-ghost { background: transparent; color: var(--tx, #f0eee9); border: 1px solid var(--bd2, #2a2a2a); box-shadow: none; }
.rpa-btn.is-sm { width: auto; padding: 9px 18px; font-size: 13px; }

/* ---- การ์ดติดตั้ง ---- */
.rpa-install-card {
    display: flex; align-items: center; gap: 14px; width: 100%; margin: 18px 0 0; padding: 14px 14px 14px 14px;
    border: 1px solid var(--bd2, #2a2a2a); border-radius: 20px; text-align: left; cursor: pointer; color: var(--tx, #f0eee9);
    background: radial-gradient(120% 140% at 0% 0%, rgba(204, 34, 41, .28) 0%, #0f0f0f 58%, #060606 100%);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.rpa-install-card[hidden] { display: none; }
.rpa-install-card:hover { transform: translateY(-1px); border-color: var(--red, #CC2229); }
.rpa-install-card:active { transform: scale(.985); }
.rpa-install-card__icon { flex: none; width: 48px; height: 48px; border-radius: 12px; display: block; }
.rpa-install-card__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rpa-install-card__text strong { font-size: 16px; font-weight: 700; }
.rpa-install-card__text small { font-size: 12.5px; color: var(--mu, #888); line-height: 1.4; }
.rpa-install-card__go { flex: none; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--red, #CC2229); color: #fff; }
.rpa-install-card__go svg { width: 18px; height: 18px; }
.rpa-install-link {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit;
    font: 500 13px/1.4 'Prompt', sans-serif; text-decoration: underline; cursor: pointer;
}
.rpa-install-link[hidden] { display: none; }
.rpa-install-link svg { width: 16px; height: 16px; }

/* ---- popup วิธีติดตั้ง ---- */
.rpa-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; }
.rpa-modal[hidden] { display: none; }
.rpa-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .66); opacity: 0; transition: opacity .18s ease; backdrop-filter: blur(4px); }
.rpa-modal__card {
    position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto; background: #0f0f0f; color: var(--tx, #f0eee9);
    border: 1px solid var(--bd2, #2a2a2a);
    padding: 26px 22px calc(22px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
    transform: translateY(24px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.rpa-modal.is-open .rpa-modal__backdrop { opacity: 1; }
.rpa-modal.is-open .rpa-modal__card { transform: none; opacity: 1; }
.rpa-modal__x {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%;
    background: #1c1c1c; color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.rpa-modal__head { display: flex; align-items: center; gap: 14px; margin: 0 40px 16px 0; }
.rpa-modal__head img { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 20px rgba(204, 34, 41, .35); flex: none; }
.rpa-modal__head strong { display: block; font-size: 18px; font-weight: 700; }
.rpa-modal__head span { display: block; font-size: 13px; color: var(--mu, #888); margin-top: 2px; }
.rpa-perks { list-style: none; margin: 0 0 18px; padding: 12px 14px; background: #151515; border: 1px solid var(--bd, #222); border-radius: 12px; display: grid; gap: 6px; font-size: 13.5px; }
.rpa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rpa-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.rpa-steps li[hidden] { display: none; }
.rpa-steps b {
    flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--red, #CC2229); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px;
}
.rpa-ico { display: inline-flex; vertical-align: -4px; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 6px; background: rgba(59, 130, 246, .16); color: #6aa8ff; }
.rpa-ico svg { width: 16px; height: 16px; }
.rpa-note { margin: 14px 0 0; font-size: 12.5px; color: var(--mu, #888); line-height: 1.55; }
.rpa-note.is-warn { margin: 0 0 14px; padding: 12px 14px; background: rgba(250, 204, 21, .1); border: 1px solid rgba(250, 204, 21, .3); border-radius: 12px; color: #facc15; font-size: 13.5px; }
@media (min-width: 640px) {
    .rpa-modal { align-items: center; }
    .rpa-modal__card { border-radius: 24px; padding-bottom: 24px; }
}

/* ---- แถบแนะนำติดตั้ง (มือถือ) ---- */
.rpa-banner {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 8000;
    display: flex; flex-direction: column; gap: 12px; padding: 14px 14px 14px 14px; background: #111; color: #fff;
    border: 1px solid var(--bd2, #2a2a2a); border-radius: 20px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
    transform: translateY(140%); transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.rpa-banner.is-on { transform: none; }
.rpa-banner__row { display: flex; align-items: center; gap: 12px; }
.rpa-banner__actions { display: flex; gap: 8px; }
.rpa-banner img { width: 46px; height: 46px; border-radius: 12px; flex: none; }
.rpa-banner__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rpa-banner__text strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.rpa-banner__text span { font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .62); }
.rpa-banner__go { flex: 1; border: 0; border-radius: 12px; background: var(--red, #CC2229); color: #fff; padding: 11px 16px; font: 700 14px/1 'Prompt', sans-serif; cursor: pointer; }
.rpa-banner__later { flex: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; background: transparent; color: rgba(255, 255, 255, .75); padding: 11px 18px; font: 500 13.5px/1 'Prompt', sans-serif; cursor: pointer; }
.rpa-banner__later:hover { color: #fff; }
.rpa-banner__go:focus-visible, .rpa-banner__later:focus-visible, .rpa-banner__x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* คอม: ไม่ยืดเต็มจอ — การ์ดมุมขวาล่าง */
@media (min-width: 769px) { .rpa-banner { left: auto; right: 24px; bottom: 24px; width: 380px; } }
/* ปุ่มติดตั้งท้ายเว็บบนมือถือ: เต็มความกว้าง ไม่ลอยเป็นก้อนเล็ก */
@media (max-width: 768px) { .mftr .rpa-footer-app { display: flex; width: 100%; padding: 10px 12px 10px 10px; } .mftr .rpa-footer-app__text { flex: 1; } }
.rpa-banner__x { flex: none; align-self: flex-start; width: 32px; height: 32px; margin: -4px -4px 0 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .6); font-size: 22px; line-height: 1; cursor: pointer; }
/* หน้าที่มีแถบเมนูล่างมือถือ — ยกแถบขึ้นไม่ให้ทับ */
/* หน้าที่มีแถบเมนูล่างมือถือ (.bn) — ค่าสำรองก่อน JS วัดความสูงจริง (placeBanner) ไม่ให้ทับเมนู */
@media (max-width: 768px) { body:has(.view-mobile .bn) .rpa-banner { bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* ---- ชวนเปิดแจ้งเตือน ---- */
.rpa-sheet { position: fixed; inset: 0; z-index: 8500; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0); transition: background .25s ease; }
.rpa-sheet.is-on { background: rgba(0, 0, 0, .6); }
.rpa-sheet__card {
    width: 100%; max-width: 440px; background: #0f0f0f; color: var(--tx, #f0eee9); border: 1px solid var(--bd2, #2a2a2a); text-align: center; display: grid; gap: 10px;
    padding: 26px 22px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
    transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.rpa-sheet.is-on .rpa-sheet__card { transform: none; }
.rpa-sheet__bell { font-size: 40px; line-height: 1; color: var(--red, #CC2229); }
.rpa-sheet__card strong { font-size: 19px; }
.rpa-sheet__card p { margin: 0 0 8px; color: var(--mu, #888); font-size: 14px; line-height: 1.55; }

/* ---- toast ---- */
.rpa-toast {
    position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 9500; max-width: calc(100vw - 32px);
    transform: translate(-50%, 14px); opacity: 0; pointer-events: none; padding: 11px 18px; border-radius: 999px;
    background: #1c1c1c; border: 1px solid var(--bd2, #2a2a2a); color: #fff; font-size: 14px; transition: opacity .2s ease, transform .2s ease;
}
.rpa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.rpa-toast.is-error { background: #7f1d1d; border-color: #b91c1c; }

/* ---- การ์ดตั้งค่าแจ้งเตือน ---- */
.rpa-push { border: 1px solid var(--bd, #222); border-radius: 16px; background: var(--c1, #0f0f0f); color: var(--tx, #f0eee9); padding: 18px; display: grid; gap: 12px; }
.rpa-push.is-busy { opacity: .7; }
.rpa-push__head { display: flex; align-items: center; gap: 12px; }
.rpa-push__icon { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--red, #CC2229); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.rpa-push__title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rpa-push__title strong { font-size: 15px; }
.rpa-push__title small { font-size: 12.5px; color: var(--mu, #888); line-height: 1.45; }
.rpa-push__state { margin: 0; font-size: 13px; line-height: 1.5; }
.rpa-push__state.is-ok { color: #22c55e; }
.rpa-push__state.is-muted { color: var(--mu, #888); }
.rpa-push__state.is-warn { color: #facc15; }
.rpa-push__state.is-danger { color: #f87171; }
.rpa-push__ios { margin: 0; padding: 10px 12px; background: var(--c2, #151515); border-radius: 10px; font-size: 13px; line-height: 1.55; }
.rpa-push__ios[hidden] { display: none; }
.rpa-push__cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.rpa-push__cats[hidden] { display: none; }
.rpa-cat { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--bd, #222); border-radius: 12px; font-size: 13px; cursor: pointer; min-width: 0; background: var(--c2, #151515); }
.rpa-cat.is-admin { border-style: dashed; }
.rpa-cat input { width: 16px; height: 16px; flex: none; accent-color: var(--red, #CC2229); margin-top: 2px; }
.rpa-cat i { font-size: 16px; flex: none; margin-top: 1px; color: var(--red, #CC2229); }
.rpa-cat span { min-width: 0; }
.rpa-cat span small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mu, #888); line-height: 1.45; }
.rpa-push [data-rpa-push-test] { justify-self: start; }
.rpa-push [data-rpa-push-test][hidden] { display: none; }
@media (max-width: 560px) { .rpa-push__cats { grid-template-columns: 1fr; } }

/* สวิตช์ */
.rpa-switch { position: relative; flex: none; width: 48px; height: 28px; cursor: pointer; }
.rpa-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rpa-switch span { position: absolute; inset: 0; border-radius: 999px; background: #3a3a3a; transition: background .15s ease; pointer-events: none; }
.rpa-switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.rpa-switch input:checked + span { background: var(--red, #CC2229); }
.rpa-switch input:checked + span::after { transform: translateX(20px); }
.rpa-switch input:disabled + span { opacity: .5; }
.rpa-switch input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .rpa-modal__card, .rpa-modal__backdrop, .rpa-banner, .rpa-sheet, .rpa-sheet__card, .rpa-toast, .rpa-install-card { transition: none; }
}

/* ---- ปุ่มติดตั้งท้ายเว็บ ---- */
.rpa-footer-app {
    display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border: 1px solid var(--bd2, #2a2a2a); border-radius: 16px;
    background: #111; color: #fff; cursor: pointer; text-align: left; transition: transform .15s ease, border-color .15s ease;
}
.rpa-footer-app[hidden] { display: none; }
.rpa-footer-app:hover { transform: translateY(-1px); border-color: var(--red, #CC2229); }
.rpa-footer-app:active { transform: scale(.98); }
.rpa-footer-app img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.rpa-footer-app__text { display: grid; gap: 1px; }
.rpa-footer-app__text strong { font-size: 14px; font-weight: 600; }
.rpa-footer-app__text small { font-size: 11.5px; color: var(--mu, #888); }
.rpa-footer-app__go { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--red, #CC2229); flex: none; }
.rpa-footer-app__go svg { width: 16px; height: 16px; }

/* ---- ปุ่มติดตามแร็ปเปอร์ / แจ้งเมื่อมีบัตรคืน ---- */
.rpa-follow-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: 999px;
    border: 1px solid var(--red, #CC2229); background: transparent; color: var(--red, #CC2229);
    font: 700 13px/1 'Prompt', sans-serif; cursor: pointer; transition: all .15s ease; letter-spacing: 0;
}
.rpa-follow-btn:hover { background: rgba(204, 34, 41, .12); }
.rpa-follow-btn.is-on { background: var(--red, #CC2229); color: #fff; }
.rpa-follow-btn:disabled { opacity: .55; cursor: default; }
.rpa-follow-btn.is-wait { border-color: #facc15; color: #facc15; }
.rpa-follow-btn.is-wait:hover { background: rgba(250, 204, 21, .12); }
.rpa-follow-btn.is-wait.is-on { background: #facc15; color: #111; }

/* ---- หน้า /roii-app ---- */
.rpa-page { max-width: 640px; margin: 0 auto; padding: 36px 20px 60px; color: var(--tx, #f0eee9); }
.rpa-page__hero { text-align: center; margin-bottom: 18px; }
.rpa-page__hero img { width: 92px; height: 92px; border-radius: 22px; box-shadow: 0 14px 40px rgba(204, 34, 41, .4); }
.rpa-page__hero h1 { font: 400 40px/1.1 'Bebas Neue', 'Prompt', sans-serif; letter-spacing: 4px; margin: 16px 0 6px; color: var(--red, #CC2229); }
.rpa-page__hero p { margin: 0; color: var(--mu, #888); font-size: 14px; line-height: 1.7; }
.rpa-page__block { margin-top: 18px; display: grid; gap: 12px; }
.rpa-page__block > h2 { margin: 14px 0 0; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.rpa-page__block > h2 i { color: var(--red, #CC2229); }
.rpa-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rpa-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--c2, #151515); border: 1px solid var(--bd, #222); font-size: 13px; }
.rpa-chip a { color: var(--tx, #f0eee9); text-decoration: none; }
.rpa-chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: #222; color: #bbb; font-size: 16px; line-height: 1; cursor: pointer; }
.rpa-chip button:hover { background: var(--red, #CC2229); color: #fff; }
.rpa-empty { margin: 0; color: var(--mu, #888); font-size: 12.5px; line-height: 1.6; }
.rpa-perk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rpa-perk { padding: 14px; background: var(--c1, #0f0f0f); border: 1px solid var(--bd, #222); border-radius: 14px; font-size: 13px; line-height: 1.5; }
.rpa-perk i { font-size: 20px; color: var(--red, #CC2229); display: block; margin-bottom: 6px; }
.rpa-perk b { display: block; margin-bottom: 2px; }
.rpa-perk span { color: var(--mu, #888); font-size: 12px; }
.rpa-links { display: flex; gap: 8px; flex-wrap: wrap; }
.rpa-links a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--c1, #0f0f0f); border: 1px solid var(--bd, #222); color: var(--tx, #f0eee9); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.rpa-links a:hover { border-color: var(--red, #CC2229); color: var(--red, #CC2229); }
@media (max-width: 480px) { .rpa-perk-grid { grid-template-columns: 1fr; } }