/* =====================================================
   ئۆلچەملىك ئەسكەرتىش كۆزنىكى (Popup Notice)
   ھەممە بەتتە ئىشلىتىلىدۇ · notice.js بىلەن بىللە
   -----------------------------------------------------
   ئەپچىل قۇرۇلما: بەلگە يان تەرەپتە، تېكىست ئوڭدىن
   باشلىنىدۇ (RTL). ئىلگىرى چوڭ دۈگىلەك بەلگە ئوتتۇرىدا
   تۇرۇپ ئورۇن ئالاتتى ۋە ئوقۇش تەس بولاتتى.
   ===================================================== */
.nx-mask {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 22px;
    background: var(--overlay, rgba(27, 36, 64, .5));
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .22s ease;
}

.nx-mask.show { opacity: 1; }

.nx-box {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e5e9f2);
    border-radius: 16px;
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(27, 36, 64, .18));
    overflow: hidden;
    text-align: start;
    transform: translateY(12px) scale(.96);
    opacity: 0;
    transition: transform .26s cubic-bezier(.2, .9, .3, 1.2), opacity .26s ease;
}

.nx-mask.show .nx-box { transform: none; opacity: 1; }

/* ئۈستىدىكى رەڭلىك سىزىق — تۈرىنى بىلدۈرىدۇ */
.nx-box::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 3px;
    background: var(--nx-c, #5b5bf0);
}

/* =====================================================
   ئۈستى بۆلەك: بەلگە + باش تېما + ئۇچۇر
   ===================================================== */
.nx-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 19px 18px 17px;
}

/* ---------- بەلگە (يان تەرەپتە، ئەپچىل) ---------- */
.nx-ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    animation: nxPop .4s cubic-bezier(.2, .9, .3, 1.5);
}

.nx-ic i { width: 19px; height: 19px; }

@keyframes nxPop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}

/* ---------- تېكىست بۆلىكى ---------- */
.nx-hd {
    flex: 1;
    min-width: 0;
    padding-inline-end: 20px;   /* [×] كۇنۇپكىسىغا ئورۇن */
}

.nx-box h3 {
    margin: 0 0 5px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text, #1b2440);
}

.nx-msg {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-soft, #566080);
    unicode-bidi: plaintext;
}

.nx-msg b { color: var(--text, #1b2440); font-weight: 700; }

/* ئۇلانما — رامكىلىق كۇنۇپكا شەكلىدە، ئايرىم قۇردا */
.nx-msg a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, var(--nx-c, #5b5bf0) 32%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--nx-c, #5b5bf0) 9%, transparent);
    color: var(--nx-c, #5b5bf0);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}

.nx-msg a:hover {
    background: var(--nx-c, #5b5bf0);
    border-color: var(--nx-c, #5b5bf0);
    color: #fff;
}

.nx-msg code {
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--surface-2, #f6f8fc);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11.5px;
    direction: ltr;
    display: inline-block;
}

/* سانلار — RTL دا يۆنىلىش توغرا بولۇشى ئۈچۈن */
.nx-msg bdi {
    unicode-bidi: isolate;
    direction: ltr;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------- تاقاش كۇنۇپكىسى ---------- */
.nx-x {
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 12px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 7px;
    background: none;
    color: var(--muted, #8a93ac);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.nx-x:hover {
    border-color: var(--line, #e5e9f2);
    background: var(--surface-2, #f6f8fc);
    color: var(--bad, #dc2626);
}

/* =====================================================
   ئاستىدىكى كۇنۇپكىلار
   ===================================================== */
.nx-foot {
    display: flex;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--line, #e5e9f2);
    background: var(--surface-2, #f6f8fc);
}

.nx-foot .btn,
.nx-foot .nx-btn { flex: 1; justify-content: center; }

/* كىرىش بېتىدە style.css يوق — كۇنۇپكىنى ئۆزىمىز ئۇسلۇبلايمىز */
.nx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border: 1px solid var(--line, #e5e9f2);
    border-radius: 10px;
    background: var(--surface, #fff);
    color: var(--text, #1b2440);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.nx-btn:hover {
    border-color: var(--nx-c, #5b5bf0);
    color: var(--nx-c, #5b5bf0);
}

.nx-btn.nx-main {
    background: var(--nx-c, #5b5bf0);
    border-color: transparent;
    color: #fff;
}

.nx-btn.nx-main:hover { filter: brightness(1.07); color: #fff; }

.nx-btn i { width: 14px; height: 14px; }

.nx-btn:focus-visible {
    outline: 2px solid var(--nx-c, #5b5bf0);
    outline-offset: 2px;
}

/* =====================================================
   ۋاقىت لېنتىسى (ئاپتوماتىك تاقىلىدىغانلىرى)
   ===================================================== */
.nx-bar {
    height: 3px;
    background: var(--line, #e5e9f2);
}

.nx-bar span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--nx-c, #5b5bf0);
    transform-origin: right;
    animation: nxBar linear forwards;
}

@keyframes nxBar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* =====================================================
   تۈر بويىچە رەڭلەر
   ===================================================== */
.nx-ok   { --nx-c: #16a34a; }
.nx-bad  { --nx-c: #dc2626; }
.nx-warn { --nx-c: #d97706; }
.nx-info { --nx-c: #5b5bf0; }

.nx-ok   .nx-ic { background: linear-gradient(140deg, #34d399, #16a34a); }
.nx-bad  .nx-ic { background: linear-gradient(140deg, #f87171, #dc2626); }
.nx-warn .nx-ic { background: linear-gradient(140deg, #fbbf24, #d97706); }
.nx-info .nx-ic { background: linear-gradient(140deg, #7c6cf6, #5b5bf0); }

html[data-theme="dark"] .nx-ok   { --nx-c: #22c55e; }
html[data-theme="dark"] .nx-bad  { --nx-c: #ef4444; }
html[data-theme="dark"] .nx-warn { --nx-c: #f59e0b; }
html[data-theme="dark"] .nx-info { --nx-c: #7c7cf8; }

/* =====================================================
   كىچىك ئېكران
   ===================================================== */
@media (max-width: 480px) {
    .nx-mask { padding: 14px; }
    .nx-box  { max-width: 100%; border-radius: 14px; }
    .nx-top  { padding: 16px 14px 14px; gap: 11px; }
    .nx-ic   { width: 36px; height: 36px; border-radius: 11px; }
    .nx-ic i { width: 17px; height: 17px; }
    .nx-box h3 { font-size: 14px; }
    .nx-msg  { font-size: 12.5px; }
    .nx-foot { padding: 11px 14px; flex-direction: column-reverse; }
}

/* بېسىپ چىقارغاندا كۆزنەك چىقمايدۇ */
@media print {
    .nx-mask { display: none !important; }
}

/* =====================================================
   بەت ئىچىدىكى ئۇچۇر رامكىسى (.nx-inline)
   -----------------------------------------------------
   مۇۋەپپەقىيەت ئۇچۇرلىرى كۆزنەك بولۇپ چىقمايدۇ —
   بەتنىڭ ئۆزىدە نەپىس رامكا بولۇپ كۆرۈنىدۇ ۋە
   4 سېكۇنتتا ئۆزلۈكىدىن ئۆچىدۇ (ok بولسا).
   ===================================================== */
.alert.nx-inline {
    animation: nxSlide .3s cubic-bezier(.2, .9, .3, 1.1);
    transition: opacity .3s ease, transform .3s ease,
                margin .3s ease, max-height .3s ease;
    overflow: hidden;
}

@keyframes nxSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ئۆچۈش ھالىتى */
.alert.nx-inline.nx-gone {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    margin-block: 0;
    padding-block: 0;
    border-width: 0;
}