/* ==========================================================================
   MultiEarnBD — Login Popup (user side)
   ==========================================================================
   কেন এখানে `--me-*` টোকেন: css/theme-dark.css-ই লাইট/ডার্কের একক সূত্র।
   তাই পপআপ দুই থিমেই আপনি থেকে আপনি ম্যাচ করে — আলাদা রঙ লিখতে হয় না।

   ক্লাস গুলো `.me-popup` দিয়ে স্কোপড, যাতে সাইটের অন্য Bootstrap মোডাল
   (payment-proof ইত্যাদি) না বদলায়।
   ========================================================================== */

.me-popup .me-popup-dialog {
    transform: translateY(16px) scale(.96);
    opacity: 0;
    transition: transform .34s cubic-bezier(.34, 1.36, .5, 1), opacity .28s ease-out;
}

.me-popup.show .me-popup-dialog {
    transform: none;
    opacity: 1;
}

.me-popup .me-popup-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--me-border);
    border-radius: 20px;
    background-color: var(--me-surface);
    color: var(--me-text);
    box-shadow: var(--me-shadow-lg);
}

/* উপরের রঙিন স্ট্রিপ — tone অনুযায়ী (ইনলাইন ভেরিয়েবল partial থেকে আসে) */
.me-popup .me-popup-strip {
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--me-pop-accent), var(--me-pop-accent-soft));
}

/* পেছনের নরম আলো — "effective" ফিল-এর জন্য (ক্লিক ব্লক করে না) */
.me-popup .me-popup-glow {
    position: absolute;
    top: -120px;
    right: -80px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: var(--me-pop-accent-soft);
    filter: blur(60px);
    pointer-events: none;
}

.me-popup .me-popup-x {
    position: absolute;
    top: .9rem;
    right: .9rem;
    z-index: 4;
    opacity: .6;
}

.me-popup .me-popup-x:hover { opacity: 1; }

.me-popup .me-popup-body {
    position: relative;
    z-index: 2;
    padding: 2rem 1.75rem 1.6rem;
}

/* ---------- head + আইকন ---------- */

.me-popup .me-popup-head {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.me-popup .me-popup-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--me-pop-accent-soft);
    color: var(--me-pop-accent);
    font-size: 1.5rem;
    box-shadow: 0 0 0 0 var(--me-pop-accent-soft);
    animation: mePopPulse 2.6s ease-out 3;
}

@keyframes mePopPulse {
    0%   { box-shadow: 0 0 0 0 var(--me-pop-accent-soft); }
    70%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}

.me-popup .me-popup-title {
    margin: 0;
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--me-heading);
}

/* ---------- কনটেন্ট ---------- */

.me-popup .me-popup-image {
    display: block;
    width: 100%;
    margin-top: 1rem;
    border-radius: 14px;
}

.me-popup .me-popup-text {
    margin-top: .9rem;
    font-size: .95rem;
    line-height: 1.75;
}

.me-popup .me-popup-text > :last-child { margin-bottom: 0; }
.me-popup .me-popup-text img { max-width: 100%; height: auto; border-radius: 10px; }
.me-popup .me-popup-text a { color: var(--me-link); }

/* ---------- অ্যাকশন ---------- */

.me-popup .me-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.4rem;
}

.me-popup .me-popup-btn {
    --me-pop-btn-bg: transparent;
    --me-pop-btn-fg: var(--me-text);

    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem 1.35rem;
    border: 1px solid var(--me-border);
    border-radius: 999px;
    background: var(--me-pop-btn-bg);
    color: var(--me-pop-btn-fg);
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.me-popup .me-popup-btn:hover { transform: translateY(-1px); }
.me-popup .me-popup-btn:active { transform: translateY(0); }

.me-popup .me-popup-btn.is-primary {
    --me-pop-btn-bg: var(--me-pop-accent);
    --me-pop-btn-fg: #fff;
    border-color: transparent;
    box-shadow: 0 10px 24px -12px var(--me-pop-accent);
}

.me-popup .me-popup-btn.is-ghost {
    background: var(--me-surface-2);
    color: var(--me-muted);
}

.me-popup .me-popup-never {
    display: inline-block;
    margin-top: .9rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--me-muted);
    font-size: .8rem;
    text-decoration: underline dotted;
    cursor: pointer;
}

.me-popup .me-popup-never:hover { color: var(--me-text); }

/* ---------- queue (serial) অনুযায়ী প্রগ্রেস ---------- */

.me-popup .me-popup-progress {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .8rem;
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--me-pop-accent-soft);
    color: var(--me-pop-accent);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-transform: uppercase;
}

/* পরের পপআপের অপেক্ষার টোস্ট (মোডালের বাইরে — তাই --me-primary ব্যবহৃত) */
.me-popup-next {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 1090;
    display: flex;
    align-items: center;
    gap: .7rem;
    max-width: calc(100vw - 24px);
    padding: .5rem .5rem .5rem .95rem;
    border: 1px solid var(--me-border);
    border-radius: 999px;
    background: var(--me-surface);
    color: var(--me-text);
    box-shadow: var(--me-shadow-lg);
    font-size: .84rem;
    transform: translateX(-50%);
    animation: meToastIn .28s ease-out;
}

.me-popup-next b { color: var(--me-primary); }

.me-popup-next-btn {
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    padding: .3rem .8rem;
    background: var(--me-primary);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.me-popup-next-btn:hover { filter: brightness(1.08); }

@keyframes meToastIn {
    from { opacity: 0; transform: translate(-50%, 14px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.me-popup .me-popup-note {
    margin: .9rem 0 0;
    font-size: .76rem;
    color: var(--me-muted);
    word-break: break-all;
}

.me-popup .me-popup-note.is-warn { color: var(--me-pop-accent); font-weight: 600; }

/* ---------- backdrop + মোবাইল ---------- */

/* JS `.me-popup-open` বসায় ⇒ শুধু আমাদের পপআপের সময়ই ব্যাকড্রপে ব্লার */
body.me-popup-open .modal-backdrop {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

@media (max-width: 575.98px) {
    .me-popup .me-popup-body { padding: 1.6rem 1.15rem 1.3rem; }
    .me-popup .me-popup-title { font-size: 1.08rem; }
    .me-popup .me-popup-ico { width: 46px; height: 46px; font-size: 1.3rem; }
    .me-popup .me-popup-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .me-popup .me-popup-dialog { transform: none; opacity: 1; transition: none; }
    .me-popup .me-popup-ico { animation: none; }
    .me-popup .me-popup-btn:hover { transform: none; }
}

[data-bs-theme="dark"] .me-popup .me-popup-card {
    box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .95);
}