.searchFilterText{
    font-size: 12px;
    color: white;
}

/* ── Reseller level badge popover ───────────────────────────────────────────
   Custom orange-themed hover/tap popover for the "Lvl. N" badge, replacing the
   default black Flowbite tooltip. Holds a mini progress bar showing how far the
   reseller is toward the next level (spent / next-threshold). */
.reseller-level-wrap {
    position: relative;
    display: inline-block;
    /* Theme tokens (text color, gradient stops, dark fill, popover accents).
       Default = orange reseller theme; the header badge's lvl-<role> class
       overrides these so badge AND popover recolor to match the user's role. */
    --lvl-text: #f6881f;
    --lvl-text-dim: rgba(246, 136, 31, 0.55);
    --lvl-grad-a: #ffb347;
    --lvl-grad-b: #f6881f;
    --lvl-grad-c: #b85e12;
    --lvl-fill-a: rgba(40, 26, 6, 0.98);
    --lvl-fill-b: rgba(22, 15, 4, 0.98);
    --lvl-border: rgba(246, 136, 31, 0.55);
    --lvl-track-bg: rgba(246, 136, 31, 0.14);
    --lvl-track-border: rgba(246, 136, 31, 0.3);
}
/* Badge pill — role-badge shape, gradient outline. The dual-background trick
   paints the dark fill onto the padding-box and a bright gradient onto the
   border-box, producing a gradient outline. */
.reseller-level-badge {
    border: 1px solid transparent;
    background:
        linear-gradient(160deg, var(--lvl-fill-a), var(--lvl-fill-b)) padding-box,
        linear-gradient(135deg, var(--lvl-grad-a), var(--lvl-grad-b) 55%, var(--lvl-grad-c)) border-box;
}
.reseller-level-badge,
.reseller-level-badge span,
.reseller-level-badge .icon-crown {
    color: var(--lvl-text);
}
.reseller-level-badge .icon-crown {
    font-size: 1rem;
    line-height: 1;
}
/* Per-role themes set their variables on the wrap (lvl-<role>) and cascade to
   both the badge and popover; user / reseller keep the default orange theme. */
/* Header variant: the badge sits at the very top of the page, so its popover
   must open DOWNWARD (the reseller one opens upward) and sit above the navbar. */
#headerLevelBadgeWrap .reseller-level-popover {
    bottom: auto;
    top: calc(100% + 12px);
    transform: translateY(-6px);
    z-index: 60;
}
#headerLevelBadgeWrap.is-open .reseller-level-popover {
    transform: translateY(0);
}
@media (hover: hover) {
    #headerLevelBadgeWrap:hover .reseller-level-popover {
        transform: translateY(0);
    }
}
/* Arrow pointing UP from the top edge of the downward popover. Same technique
   as the reseller arrow (a 45deg-rotated square showing two 1px borders), just
   flipped: the TOP+LEFT edges carry the role-colored 1px border so the tip's
   outline connects to the popover's 1px border at matching thickness, and the
   fill is the popover's TOP gradient color so the square blends in. One element
   with exactly two borders — no stacked triangles (no doubled corner dots) and
   no leftover base line. */
#headerLevelBadgeWrap .reseller-level-popover-arrow {
    bottom: auto;
    top: -6px;
    width: 12px;
    height: 12px;
    background: var(--lvl-fill-a, rgba(40, 26, 6, 0.98));
    border: none;
    border-top: 1px solid var(--lvl-border, rgba(246, 136, 31, 0.55));
    border-left: 1px solid var(--lvl-border, rgba(246, 136, 31, 0.55));
    transform: rotate(45deg);
}
/* Recolor the header popover to match the badge's role theme. Variables are set
   on the wrap by its lvl-<role> class (below); each falls back to orange. */
#headerLevelBadgeWrap .reseller-level-popover {
    background: linear-gradient(160deg, var(--lvl-fill-a, rgba(40,26,6,.98)), var(--lvl-fill-b, rgba(22,15,4,.98)));
    border-color: var(--lvl-border, rgba(246, 136, 31, 0.55));
    color: var(--lvl-text, #f6881f);
}
#headerLevelBadgeWrap .reseller-level-popover-next {
    color: var(--lvl-text-dim, rgba(246, 136, 31, 0.55));
}
#headerLevelBadgeWrap .reseller-level-popover-track {
    background: var(--lvl-track-bg, rgba(246, 136, 31, 0.14));
    border-color: var(--lvl-track-border, rgba(246, 136, 31, 0.3));
}
#headerLevelBadgeWrap .reseller-level-popover-fill {
    background: linear-gradient(90deg, var(--lvl-grad-b, #f6881f), var(--lvl-grad-a, #ffb347));
}
#headerLevelBadgeWrap .reseller-level-popover-hint b {
    color: var(--lvl-grad-a, #ffb347);
}
/* Wrap-level role themes — set the variables the popover rules read above. */
#headerLevelBadgeWrap.lvl-owner {
    --lvl-text: #f8e71c; --lvl-text-dim: rgba(248,231,28,.55);
    --lvl-grad-a: #fff27a; --lvl-grad-b: #f8e71c; --lvl-grad-c: #a8950a;
    --lvl-fill-a: rgba(40,37,6,.98); --lvl-fill-b: rgba(20,18,3,.98);
    --lvl-border: rgba(248,231,28,.55);
    --lvl-track-bg: rgba(248,231,28,.14); --lvl-track-border: rgba(248,231,28,.3);
}
#headerLevelBadgeWrap.lvl-admin {
    --lvl-text: #22c55e; --lvl-text-dim: rgba(34,197,94,.55);
    --lvl-grad-a: #6ee7a3; --lvl-grad-b: #22c55e; --lvl-grad-c: #0f7a3c;
    --lvl-fill-a: rgba(6,40,22,.98); --lvl-fill-b: rgba(3,20,11,.98);
    --lvl-border: rgba(34,197,94,.55);
    --lvl-track-bg: rgba(34,197,94,.14); --lvl-track-border: rgba(34,197,94,.3);
}
#headerLevelBadgeWrap.lvl-moderator {
    --lvl-text: #7a83d4; --lvl-text-dim: rgba(122,131,212,.55);
    --lvl-grad-a: #b3bafc; --lvl-grad-b: #7a83d4; --lvl-grad-c: #454c95;
    --lvl-fill-a: rgba(18,20,40,.98); --lvl-fill-b: rgba(9,10,22,.98);
    --lvl-border: rgba(122,131,212,.55);
    --lvl-track-bg: rgba(122,131,212,.14); --lvl-track-border: rgba(122,131,212,.3);
}
/* Customer (default 'user' role) — themed identically to owner (yellow/gold). */
#headerLevelBadgeWrap.lvl-customer {
    --lvl-text: #f8e71c; --lvl-text-dim: rgba(248,231,28,.55);
    --lvl-grad-a: #fff27a; --lvl-grad-b: #f8e71c; --lvl-grad-c: #a8950a;
    --lvl-fill-a: rgba(40,37,6,.98); --lvl-fill-b: rgba(20,18,3,.98);
    --lvl-border: rgba(248,231,28,.55);
    --lvl-track-bg: rgba(248,231,28,.14); --lvl-track-border: rgba(248,231,28,.3);
}
.reseller-level-popover {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: 260px;
    max-width: 78vw;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(40, 26, 6, 0.98), rgba(22, 15, 4, 0.98));
    border: 1px solid rgba(246, 136, 31, 0.55);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: #f6881f;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}
/* Tapped/focused (mobile) — always available. */
.reseller-level-wrap.is-open .reseller-level-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Hover (desktop) — gated to devices that truly hover so a tap on touch
   screens doesn't leave the popover "stuck" open (mobile fires :hover on tap
   and only clears it on the next tap elsewhere, which broke tap-to-close). */
@media (hover: hover) {
    .reseller-level-wrap:hover .reseller-level-popover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
.reseller-level-popover-arrow {
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: rgba(22, 15, 4, 0.98);
    border-right: 1px solid rgba(246, 136, 31, 0.55);
    border-bottom: 1px solid rgba(246, 136, 31, 0.55);
    transform: rotate(45deg);
}
.reseller-level-popover-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 8px;
}
.reseller-level-popover-next {
    color: rgba(246, 136, 31, 0.55);
}
.reseller-level-popover-track {
    position: relative;
    height: 22px;
    border-radius: 999px;
    background: rgba(246, 136, 31, 0.14);
    border: 1px solid rgba(246, 136, 31, 0.3);
    overflow: hidden;
}
.reseller-level-popover-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f6881f, #ffb347);
    transition: width 0.8s ease-out;
}
.reseller-level-popover-amount {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}
.reseller-level-popover-hint {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 235, 210, 0.85);
    text-align: center;
}
.reseller-level-popover-hint b {
    color: #ffb347;
}

/* ── Role badges ─────────────────────────────────────────────────────────────
   Same design language as the level badge: a gradient-outlined pill with a
   dark themed fill, plus a hover popover listing the role's perks. Each role
   carries its own color via the same --lvl-* theme tokens, set by a role-<name>
   class on the wrap so badge AND popover recolor together. */
.role-badge-wrap {
    position: relative;
    display: inline-block;
    /* default (orange) — overridden per-role below */
    --lvl-text: #f6881f;
    --lvl-text-dim: rgba(246, 136, 31, 0.55);
    --lvl-grad-a: #ffb347;
    --lvl-grad-b: #f6881f;
    --lvl-grad-c: #b85e12;
    --lvl-fill-a: rgba(40, 26, 6, 0.98);
    --lvl-fill-b: rgba(22, 15, 4, 0.98);
    --lvl-border: rgba(246, 136, 31, 0.55);
    --lvl-track-bg: rgba(246, 136, 31, 0.14);
    --lvl-track-border: rgba(246, 136, 31, 0.3);
}
.role-badge {
    border: 1px solid transparent;
    color: var(--lvl-text);
    background:
        linear-gradient(160deg, var(--lvl-fill-a), var(--lvl-fill-b)) padding-box,
        linear-gradient(135deg, var(--lvl-grad-a), var(--lvl-grad-b) 55%, var(--lvl-grad-c)) border-box;
}
/* Keep the role's existing SVG icon as-is, just sized to the pill. */
.role-badge img {
    width: 16px;
    height: 16px;
}
.role-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 250px;
    max-width: 80vw;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--lvl-fill-a), var(--lvl-fill-b));
    border: 1px solid var(--lvl-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color: var(--lvl-text);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}
.role-badge-wrap.is-open .role-popover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
/* Hover (desktop only) — see the note on the level popover above; gating this
   to (hover: hover) stops a tap on mobile from sticking the popover open. */
@media (hover: hover) {
    .role-badge-wrap:hover .role-popover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}
.role-popover-arrow {
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: var(--lvl-fill-a);
    border-top: 1px solid var(--lvl-border);
    border-left: 1px solid var(--lvl-border);
    transform: rotate(45deg);
}
.role-popover-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--lvl-track-border);
}
.role-popover-head .role-popover-title { color: var(--lvl-text); }
.role-popover-tagline {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 10px;
    line-height: 1.4;
}
/* Perk rows — a tiny "table" of icon + benefit, themed per role. */
.role-popover-perks {
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.role-popover-perk {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.35;
}
.role-popover-perk i {
    flex: 0 0 auto;
    margin-top: 1px;
    font-size: 13px;
    color: var(--lvl-text);
}
.role-popover-foot {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--lvl-track-border);
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    color: var(--lvl-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Per-role color themes (mirror the level badge palette). */
.role-badge-wrap.role-owner {
    --lvl-text: #f8e71c; --lvl-text-dim: rgba(248,231,28,.6);
    --lvl-grad-a: #fff27a; --lvl-grad-b: #f8e71c; --lvl-grad-c: #a8950a;
    --lvl-fill-a: rgba(40,37,6,.98); --lvl-fill-b: rgba(20,18,3,.98);
    --lvl-border: rgba(248,231,28,.55);
    --lvl-track-bg: rgba(248,231,28,.14); --lvl-track-border: rgba(248,231,28,.28);
}
.role-badge-wrap.role-admin {
    --lvl-text: #22c55e; --lvl-text-dim: rgba(34,197,94,.6);
    --lvl-grad-a: #6ee7a3; --lvl-grad-b: #22c55e; --lvl-grad-c: #0f7a3c;
    --lvl-fill-a: rgba(6,40,22,.98); --lvl-fill-b: rgba(3,20,11,.98);
    --lvl-border: rgba(34,197,94,.55);
    --lvl-track-bg: rgba(34,197,94,.14); --lvl-track-border: rgba(34,197,94,.28);
}
.role-badge-wrap.role-moderator {
    --lvl-text: #7a83d4; --lvl-text-dim: rgba(122,131,212,.6);
    --lvl-grad-a: #b3bafc; --lvl-grad-b: #7a83d4; --lvl-grad-c: #454c95;
    --lvl-fill-a: rgba(18,20,40,.98); --lvl-fill-b: rgba(9,10,22,.98);
    --lvl-border: rgba(122,131,212,.55);
    --lvl-track-bg: rgba(122,131,212,.14); --lvl-track-border: rgba(122,131,212,.28);
}
.role-badge-wrap.role-reseller {
    /* keeps the default orange theme */
}
/* Customer badge — themed identically to owner (yellow/gold), per request. */
.role-badge-wrap.role-customer {
    --lvl-text: #f8e71c; --lvl-text-dim: rgba(248,231,28,.6);
    --lvl-grad-a: #fff27a; --lvl-grad-b: #f8e71c; --lvl-grad-c: #a8950a;
    --lvl-fill-a: rgba(40,37,6,.98); --lvl-fill-b: rgba(20,18,3,.98);
    --lvl-border: rgba(248,231,28,.55);
    --lvl-track-bg: rgba(248,231,28,.14); --lvl-track-border: rgba(248,231,28,.28);
}
/* Customer badge uses a coded icon (no SVG), so color it to the theme. */
.role-badge .role-badge-icon { font-size: 1rem; line-height: 1; color: var(--lvl-text); }

/* ── Mobile popover placement ────────────────────────────────────────────────
   On phones the badges live in a wrapping flex row, so a popover anchored to
   `right: 0` of its badge could run off the left edge (half the text off-screen)
   and the neighbouring header buttons (settings gear, cart, logout) painted on
   top of it. On narrow / non-hover screens we therefore pin BOTH popovers to a
   fixed, horizontally-centered position just under the navbar and lift them
   above everything else in the header. */
@media (max-width: 1023px) {
    .role-popover,
    #headerLevelBadgeWrap .reseller-level-popover {
        position: fixed;
        top: 92px;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(-6px);
        width: min(320px, calc(100vw - 24px));
        max-width: none;
        z-index: 1000;
    }
    .role-badge-wrap.is-open .role-popover,
    #headerLevelBadgeWrap.is-open .reseller-level-popover {
        transform: translateX(-50%) translateY(0);
    }
    /* Centered popover -> the little pointer arrow no longer lines up with the
       badge, so hide it on mobile rather than leave it floating. */
    .role-popover .role-popover-arrow,
    #headerLevelBadgeWrap .reseller-level-popover .reseller-level-popover-arrow {
        display: none;
    }
    /* Make sure the open badge's wrapper stacks above its sibling buttons. */
    .role-badge-wrap.is-open,
    #headerLevelBadgeWrap.is-open {
        z-index: 1000;
    }
}

/* ── Balance badge ───────────────────────────────────────────────────────────
   The header credit balance, restyled into the same gradient-outlined pill as
   the role/level badges, in green. The leading "$" is set in the theme color
   and the amount in white so the number stays the focal point. */
.balance-badge-wrap {
    display: inline-block;
    /* green theme tokens (mirrors the admin green family) */
    --lvl-text: #22c55e;
    --lvl-grad-a: #6ee7a3;
    --lvl-grad-b: #22c55e;
    --lvl-grad-c: #0f7a3c;
    --lvl-fill-a: rgba(6, 40, 22, 0.98);
    --lvl-fill-b: rgba(3, 20, 11, 0.98);
}
.balance-badge {
    border: 1px solid transparent;
    background:
        linear-gradient(160deg, var(--lvl-fill-a), var(--lvl-fill-b)) padding-box,
        linear-gradient(135deg, var(--lvl-grad-a), var(--lvl-grad-b) 55%, var(--lvl-grad-c)) border-box;
}
.balance-badge .balance-badge-cur {
    color: var(--lvl-text);
    font-weight: 800;
}
.balance-badge .balance-badge-amount {
    color: #fff;
    font-weight: 600;
}


/* DataTable dark-theme overrides — defaults from datatables CSS use #333 text
   on a transparent background, which renders as a white-on-white box on our
   dark UI. Match the rest of the panel's form-control look. */
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
    color: rgb(156 163 175) !important; /* tailwind text-gray-400 */
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: #151515;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border-radius: 6px;
    padding: 6px 12px;
    margin-left: 8px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: rgba(228, 186, 28, 0.5);
    box-shadow: 0 0 0 2px rgba(228, 186, 28, 0.15);
}
.dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgb(107 114 128); /* tailwind text-gray-500 */
}
.dataTables_wrapper .dataTables_length select option {
    background-color: #151515;
    color: #e5e7eb;
}
/* Reseller panel — the in-table top controls row holds the "Show N entries"
   length dropdown and the search filter. Swap their sides (search on the left,
   length on the right), let the search fill the row up to the dropdown, and add
   breathing room on both edges of the row.
   The wrapper lays length + filter out via floats by default; override to flex
   so we control order and let the search box grow. */
#reseller-licenses-table_wrapper > .dataTables_length,
#reseller-licenses-table_wrapper > .dataTables_filter {
    float: none;
}
#reseller-licenses-table_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
}
/* search box first (left), fills remaining width */
#reseller-licenses-table_wrapper .dataTables_filter {
    order: 1;
    flex: 1 1 auto;
    text-align: left;
    padding-right: 0;
}
#reseller-licenses-table_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    width: 100%;
}
#reseller-licenses-table_wrapper .dataTables_filter input {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
}
/* "Show N entries" dropdown second (right) */
#reseller-licenses-table_wrapper .dataTables_length {
    order: 2;
    flex: 0 0 auto;
}
/* DataTables wraps "Show [select] entries" in a plain inline <label>, so the
   text aligns to the select by baseline and rides slightly higher than the
   flex-centered search box. Make it a centered flex row to match. */
#reseller-licenses-table_wrapper .dataTables_length label {
    display: flex;
    align-items: center;
}
/* the table spans the full row width below the controls (forces a wrap) */
#reseller-licenses-table_wrapper > .datatable-scroll,
#reseller-licenses-table_wrapper > .dataTables_scroll,
#reseller-licenses-table_wrapper > table {
    order: 3;
    flex: 1 1 100%;
}
/* keep info (left) + pagination (right) sharing one row below the table */
#reseller-licenses-table_wrapper > .dataTables_info {
    order: 4;
    float: none;
    flex: 1 1 auto;
}
#reseller-licenses-table_wrapper > .dataTables_paginate {
    order: 5;
    float: none;
    flex: 0 0 auto;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: rgb(156 163 175) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: rgb(75 85 99) !important;
    background-color: transparent !important;
    cursor: not-allowed;
}
.supportMessageInput{
    color: white;
}

.bg-moderator{
    background-color: rgba(122, 131, 212, 0.5);
}

.text-moderator{
    color: #7a83d4 !important;
}

.mt-12{
    margin-top: 12px;
}

.mr-8{
    margin-right: 8px;
}

.cursor-pointer{
    cursor: pointer;
}

.card {
    background-color: #151515;
    transition: all 0.3s ease;
    position: relative;
}


.card:hover {
    background-color: #191919;

}

#gameFilterDropdown,
#filterDropdown {
    position:static;
    z-index: 99999 !important;
}

#productList {
    z-index: -1 !important;
}


.popupsdfsd {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
    visibility: hidden;
  }

  .popupsdfsd.start-animation {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }

  .cursor2 {
    position: absolute;
    z-index: 9;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: translate(200px, 530px);
  }

  @keyframes cursor-move21 {
    from {
      transform: translate(200px, 530px);
      opacity: 0;
    }
    to {
      transform: translate(240px, 480px);
      opacity: 1;
    }
  }

  @keyframes cursor-move22 {
    from {
      transform: translate(240px, 480px);
    }
    to {
      transform: translate(475px, 480px);
    }
  }

  @keyframes cursor-move23 {
    from {
      transform: translate(475px, 480px);
    }
    to {
      transform: translate(240px, 480px);
    }
  }

  @keyframes cursor-move24 {
    from {
      transform: translate(240px, 480px);
    }
    to {
      transform: translate(475px, 480px);
    }
  }

  .cursor2.start-animation {
    animation: cursor-move21 0.5s ease-in-out 0s forwards,
               cursor-move22 1s ease-in-out 4.6s forwards,
               cursor-move23 1s ease-in-out 10.6s forwards,
               cursor-move24 1s ease-in-out 13.6s forwards;
  }

  .cursor2.start-animation img {
    animation: cursor-click 0.6s ease-in-out 0.5s forwards,
               cursor-click 0.6s ease-in-out 5.5s forwards,
               cursor-click 0.6s ease-in-out 11.3s forwards,
               cursor-click 0.6s ease-in-out 14.3s forwards;
  }

  @keyframes cursor-click {
    0% {
      scale: 1.2;
    }
    50% {
      scale: 0.9;
    }
    100% {
      scale: 1.1;
    }
  }

  .cursor2 img {
    scale: 1.2;
  }

  .cursor2 h3 {
    background-image: linear-gradient(to left, #212121 100%, #101010 0%);
    color: white;
    border-radius: 6px;
    padding: 5px 10px 3px;
    scale: 1.2;
    margin-top: 50px;
  }

  .space-y-2.popupsdfsd {
    animation: movelive 0.6s ease-in-out 6.1s forwards;
    opacity: 0;
  }

  .popupsdfsd:not(.start-animation) {
    animation: none !important;
  }

  @keyframes movelive {
    from {
      transform: translateX(-500px);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .icon-tick-2.animation {
    opacity: 0;
    animation: tickanimationc 0.6s ease-in-out 7.3s forwards;
  }

  .icon-tick-2.animation:not(.start-animation) {
    animation: none !important;
  }

  @keyframes tickanimationc {
    from {
      color: rgb(92 92 92 / var(--tw-text-opacity));
      opacity: 0;
    }
    to {
      color: rgb(11 183 131 / var(--tw-text-opacity));
      opacity: 1;
    }
  }

  /* Cards animation improvements */
  .card.keys {
    transition: transform 0.3s ease;
  }

  .card.keys:hover {
    transform: translateY(-5px);
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .cursor2 {
      display: none !important;
    }
    
    .card.keys {
      transform: none !important;
    }
    
    .card.keys:nth-child(n+4) {
      display: none;
    }
  }

  /* Note: .priceng.animate, .succs.animate, .colorbg.animate animations 
     are defined in style.css - do not override them here */

  .success-animation {
    animation: successPulse 0.6s ease-in-out;
  }

  @keyframes successPulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Note: .colorbg.animate animation is defined in style.css - do not override here */

  /* Radio button styling for pricing section */
  input[name="day"]:checked + label {
    background-color: #e4ba1c !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(228, 186, 28, 0.5);
  }

  input[name="day"] + label {
    transition: all 0.3s ease;
  }

  input[name="day"] + label:hover {
    background-color: rgba(228, 186, 28, 0.1);
  }

  /* Special styling for lifetime option */


  input[value="day1x"]:checked + label.colorbg {
    background: linear-gradient(45deg, #e4ba1c, #ffd700) !important;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(228, 186, 28, 0.8);
  }

  /* Note: .priceng and .succs opacity and animation are defined in style.css */

  /* Product card styling — center within its grid cell on every breakpoint. */
  .card.product {
    max-width: 300px;
    min-height: 400px;
    margin-left: auto;
    margin-right: auto;
  }



  /* Fix for mobile responsiveness in buying keys section */
  @media (max-width: 768px) {
    .flex.gap-6.items-start {
      flex-direction: column !important;
      align-items: center !important;
      gap: 2rem !important;
    }
    
    .w-\[360px\], .w-\[320px\] {
      width: 100% !important;
      max-width: 350px !important;
    }
    
    .card.product {
      max-width: 280px !important;
    }
  }

  @media (max-width: 1024px) {
    .flex.gap-6.items-start {
      flex-direction: column !important;
      align-items: center !important;
      gap: 2rem !important;
    }
    
    .w-\[360px\], .w-\[320px\] {
      width: 100% !important;
      max-width: 400px !important;
    }
  }

/* ── Customer → Reseller conversion popup ─────────────────────────────────────
   Full-screen animated dialog reusing the role-badge gradient/theme tokens.
   The .role-badge-wrap.role-reseller on the modal supplies the orange --lvl-*
   palette so the card, border and accents match the reseller badge. */
.convert-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3, 4, 8, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.convert-overlay.is-open {
    opacity: 1;
    visibility: visible;
}
.convert-modal {
    position: relative;
    display: block;
    width: min(560px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 18px 26px 22px;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--lvl-fill-a), var(--lvl-fill-b));
    border: 1px solid var(--lvl-border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.convert-overlay.is-open .convert-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.convert-close {
    position: absolute;
    top: 16px;
    right: 14px;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 22px;
    color: var(--lvl-text);
    background: transparent;
    border: 1px solid var(--lvl-track-border);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
}
.convert-close:hover {
    background: var(--lvl-track-bg);
}
/* Header — the title row is height-matched to the close (X) button so the title
   sits on the SAME line as the X, and the whole block starts higher up. The
   title gets right padding so long strings never slide under the X. */
.convert-head {
    text-align: center;
    margin-bottom: 18px;
    padding-right: 44px;
    padding-left: 44px;
}
.convert-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--lvl-text);
}
.convert-sub {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.72);
}
/* Badge transition row: customer  →  reseller.
   Columns are top-aligned (badge on the first row, caption below) and the arrow
   is height-matched to a badge so it sits on the SAME row as the badges, not
   dragged down to the middle of the badge+caption column. */
.convert-badges {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}
.convert-badge-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.convert-badge-cap {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}
/* "YOU UNLOCK" — bright gold to draw the eye to the target. */
.convert-badge-cap-target {
    color: var(--lvl-text);
}
.convert-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;            /* ≈ badge (.btn) height → aligns with the badge row */
    font-size: 26px;
    color: var(--lvl-text);
    animation: convertArrowPulse 1.4s ease-in-out infinite;
}
@keyframes convertArrowPulse {
    0%, 100% { transform: translateX(0); opacity: 0.7; }
    50%      { transform: translateX(4px); opacity: 1; }
}
/* What converting unlocks */
.convert-unlocks {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.convert-unlock {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--lvl-track-bg);
    border: 1px solid var(--lvl-track-border);
}
.convert-unlock img {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    margin-top: 2px;
    /* The SVGs ship grey; tint them to the gold theme color (#f8e71c) so they
       match the yellow popup. brightness(0) flattens to solid black first, then
       the chain maps it onto the gold hue. */
    filter: brightness(0) saturate(100%) invert(85%) sepia(65%) saturate(900%) hue-rotate(358deg) brightness(102%) contrast(96%);
}
.convert-unlock-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--lvl-text);
}
.convert-unlock-desc {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}
/* Step 2 — fields. Mirrors /account/sign-up.php: real .form-control inputs in a
   responsive 2-column grid that fills left→right. Column gap separates Website
   from Discord Server; the larger ROW gap gives the full-width Discord ID row
   clear breathing room from the Website/Server row above it. */
.convert-form {
    margin-top: 4px;
    column-gap: 20px;
    row-gap: 22px;
}
.convert-form .form-label {
    margin-bottom: 6px;
}
/* Theme inputs: dark-grey fill with a light-grey outline (the usual panel
   style), overriding the transparent default .form-control. */
.convert-form .form-control {
    background-color: rgba(18, 19, 24, 0.9);
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.convert-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.38);
}
.convert-form .form-control:focus {
    outline: none;
    border-color: var(--lvl-border);
    box-shadow: 0 0 0 1px var(--lvl-border);
}
.convert-req {
    color: var(--lvl-text);
    font-weight: 800;
}
/* Gold "?" help bubble next to the Discord ID label (opens the how-to tooltip). */
.convert-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: var(--lvl-text);
    background: var(--lvl-track-bg);
    border: 1px solid var(--lvl-border);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.convert-help:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 4px var(--lvl-border));
}
/* The Discord-ID how-to tooltip must float above the z-2000 conversion overlay. */
#convert-discord-id-tooltip,
.convert-tooltip {
    z-index: 2100 !important;
}
.convert-invalid {
    border-color: #ff4b4b !important;
    box-shadow: 0 0 0 1px rgba(255, 75, 75, 0.5) !important;
}
.convert-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}
.convert-actions .btn { min-width: 110px; justify-content: center; }
/* slide-in for the step swap */
.convert-step-in {
    animation: convertStepIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes convertStepIn {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 480px) {
    .convert-badges { gap: 8px; }
    .convert-modal { padding: 22px 16px 18px; }
    .convert-actions { flex-direction: column-reverse; }
    .convert-actions .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NOWAX POPUP SYSTEM (.np-*)
   The shared alert / success / confirm popups, restyled to the same premium
   language as the "Convert to Reseller" dialog above: a centered card on a
   blurred overlay, a themed gradient fill, an accent rail, an icon medallion,
   a bold title + muted body, and a pop-in animation.

   Tone is data-driven: the card carries `data-tone="error|warning|success|info"`
   and every accent (gradient, border, icon, rail, glow) is derived from a small
   set of per-tone CSS variables — so showAlert()/showSuccess() only have to flip
   one attribute to recolor the whole popup. No call sites change.
   ════════════════════════════════════════════════════════════════════════════ */
.np-pop {
    /* default tone = error (red); overridden per data-tone below */
    --np-accent: #ff5468;
    --np-accent-soft: rgba(255, 84, 104, 0.16);
    --np-accent-line: rgba(255, 84, 104, 0.55);
    --np-fill-a: rgba(40, 10, 14, 0.98);
    --np-fill-b: rgba(20, 6, 9, 0.98);
    --np-glow: rgba(255, 84, 104, 0.35);
}
.np-pop[data-tone="warning"] {
    --np-accent: #ffd60a;
    --np-accent-soft: rgba(255, 214, 10, 0.16);
    --np-accent-line: rgba(255, 214, 10, 0.55);
    --np-fill-a: rgba(40, 34, 4, 0.98);
    --np-fill-b: rgba(20, 17, 2, 0.98);
    --np-glow: rgba(255, 214, 10, 0.35);
}
.np-pop[data-tone="success"] {
    --np-accent: #2fd17a;
    --np-accent-soft: rgba(47, 209, 122, 0.16);
    --np-accent-line: rgba(47, 209, 122, 0.55);
    --np-fill-a: rgba(6, 40, 24, 0.98);
    --np-fill-b: rgba(3, 20, 12, 0.98);
    --np-glow: rgba(47, 209, 122, 0.35);
}
/* Info shares the warning tone (true yellow) — same accent, fill and glow as
   data-tone="warning" so info popups read as warm yellow, never a cold blue. */
.np-pop[data-tone="info"] {
    --np-accent: #ffd60a;
    --np-accent-soft: rgba(255, 214, 10, 0.16);
    --np-accent-line: rgba(255, 214, 10, 0.55);
    --np-fill-a: rgba(40, 34, 4, 0.98);
    --np-fill-b: rgba(20, 17, 2, 0.98);
    --np-glow: rgba(255, 214, 10, 0.35);
}

/* Overlay — matches the convert dialog: dimmed, blurred, fade-in. */
.np-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(3, 4, 8, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.np-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* Card — themed gradient fill, accent border, soft drop shadow, pop-in. */
.np-pop {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding: 30px 26px 24px;
    border-radius: 18px;
    background: linear-gradient(160deg, var(--np-fill-a), var(--np-fill-b));
    border: 1px solid var(--np-accent-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 36px -16px var(--np-glow);
    color: #fff;
    text-align: center;
    transform: translateY(14px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}
.np-overlay.is-open .np-pop {
    transform: translateY(0) scale(1);
    opacity: 1;
}
/* Glowing accent rail across the very top of the card. */
.np-pop::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(90deg, transparent, var(--np-accent), transparent);
    opacity: 0.9;
}

/* Close button — themed, top-right, same shape as the convert close. The "x"
   always carries the popup's tone accent so it matches the card's color theme
   (red / yellow / green …), brightening to a full-tint fill on hover. */
.np-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 16px;
    color: var(--np-accent);
    background: transparent;
    border: 1px solid var(--np-accent-line);
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    z-index: 2;
}
.np-close:hover {
    color: #fff;
    background: var(--np-accent-soft);
    border-color: var(--np-accent-line);
}

/* Icon medallion — soft tinted disc with the tone icon, gentle pulsing glow. */
.np-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 30px;
    color: var(--np-accent);
    background: var(--np-accent-soft);
    border: 1px solid var(--np-accent-line);
    box-shadow: 0 0 0 6px var(--np-accent-soft);
    animation: npIconIn 0.45s cubic-bezier(0.22, 1.4, 0.4, 1) both;
}
@keyframes npIconIn {
    from { transform: scale(0.4); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.np-title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: #fff;
    padding: 0 8px;
}
.np-divider {
    width: 46px;
    height: 2px;
    margin: 12px auto;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--np-accent), transparent);
    opacity: 0.7;
}
.np-message {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.72);
    padding: 0 4px;
    word-break: break-word;
}
.np-message b { color: #fff; font-weight: 700; }

/* Action row — single dismiss button by default, themed to the tone. */
.np-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.np-actions .np-btn {
    min-width: 130px;
    justify-content: center;
}
.np-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease;
}
.np-btn:active { transform: translateY(1px); }
/* Primary = filled accent; the contrast text auto-darkens on light tones. */
.np-btn-primary {
    color: #0c0d12;
    background: var(--np-accent);
    box-shadow: 0 6px 18px -8px var(--np-glow);
}
.np-btn-primary:hover { filter: brightness(1.08); }
/* Ghost = subtle outline, used for secondary "cancel"/"back" actions. */
.np-btn-ghost {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}
.np-btn-ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

/* Optional content slot (key boxes, amounts) sits between message and actions. */
.np-slot { margin-top: 18px; text-align: left; }

/* Themed input inside a popup slot (e.g. the Discord-ID prompt). */
.np-input.form-control {
    background-color: rgba(10, 12, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
    border-radius: 0.6rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-input.form-control::placeholder { color: rgba(255, 255, 255, 0.38); }
.np-input.form-control:focus {
    outline: none;
    border-color: var(--np-accent-line);
    box-shadow: 0 0 0 1px var(--np-accent-line);
}

/* ── One-time-code (OTP) boxes ─────────────────────────────────────────────
   Six single-character boxes that auto-advance. The wrapper carries the
   wrong/correct state classes so a single conic-gradient ring can "flow"
   around the whole group (not per-box). */
.np-otp {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    border-radius: 14px;
}
/* Animated ring lives on a ::before that wraps the whole group. Hidden until a
   state class (.is-wrong / .is-correct) switches it on. */
.np-otp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 2px;
    background: conic-gradient(
        from var(--np-otp-angle, 0deg),
        transparent 0deg,
        var(--np-otp-ring, transparent) 60deg,
        transparent 140deg,
        transparent 360deg
    );
    /* Mask trick: show only the 2px border band, punch out the middle. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.np-otp.is-wrong::before {
    --np-otp-ring: #ff5468;
    opacity: 1;
    animation: npOtpSpin 0.9s linear infinite;
}
.np-otp.is-correct::before {
    --np-otp-ring: #2fd17a;
    opacity: 1;
    animation: npOtpSpin 0.9s linear infinite;
}
/* The angle is a registered-less custom prop; animate via @property where
   supported, fall back to a keyframe that drives the conic start angle. */
@property --np-otp-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}
@keyframes npOtpSpin {
    to { --np-otp-angle: 360deg; }
}

.np-otp-box {
    width: 46px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    background-color: rgba(10, 12, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.7rem;
    caret-color: var(--np-accent);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.12s ease;
}
.np-otp-box:focus {
    outline: none;
    border-color: var(--np-accent-line);
    box-shadow: 0 0 0 1px var(--np-accent-line);
}
.np-otp-box.filled {
    border-color: rgba(255, 255, 255, 0.32);
}
/* Brief per-box flash so the state reads even on touch where the ring is subtle. */
.np-otp.is-wrong .np-otp-box {
    border-color: rgba(255, 84, 104, 0.7);
    animation: npOtpShake 0.4s ease;
}
.np-otp.is-correct .np-otp-box {
    border-color: rgba(47, 209, 122, 0.7);
    background-color: rgba(47, 209, 122, 0.12);
}
@keyframes npOtpShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
@media (max-width: 480px) {
    .np-otp { gap: 6px; }
    .np-otp-box { width: 40px; height: 50px; font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
    .np-otp.is-wrong::before,
    .np-otp.is-correct::before { animation: none; }
    .np-otp.is-wrong .np-otp-box { animation: none; }
}

/* When a .np-pop is hosted inside a legacy Flowbite `.modal` shell (the shared
   Discord prompt) it can't rely on .np-overlay.is-open to drive its pop-in, so
   give it the resting (visible) state and animate when the modal shows. */
.np-modal-shell .np-pop {
    transform: none;
    opacity: 1;
    margin: auto;
}
.np-modal-shell.flex .np-pop {
    animation: npPopIn 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes npPopIn {
    from { transform: translateY(14px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Wide, left-aligned variant for content-heavy popups (manual-payment guides). */
.np-pop-wide {
    width: min(480px, 100%);
    text-align: left;
    padding: 26px 26px 24px;
}
.np-pay-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    padding-right: 40px;
}
.np-pay-head img { height: 26px; width: auto; }
.np-pay-body {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
}
.np-pay-body strong { color: #fff; }
.np-pay-body code {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--np-accent);
    font-weight: 700;
}
.np-pay-qr {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    margin: 4px 0;
}
.np-pay-body a {
    color: var(--np-accent);
    text-decoration: underline;
    font-weight: 700;
}
.np-pay-foot {
    margin-top: 4px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 480px) {
    .np-pop { padding: 28px 18px 20px; }
    .np-actions { flex-direction: column-reverse; }
    .np-actions .np-btn { width: 100%; }
}

/* ── Upgrade / Extend license popup (.np-pop-upgrade) ─────────────────────────
   The keys.php "Upgrade Your License" dialog, hosted inside the shared .np-*
   warning (gold) popup. This block styles the content slot: the current-license
   card, the section labels, and the two kinds of selectable option cards (tier
   rows + duration grid) — all themed off the popup's gold --np-accent tokens so
   they match the Convert-to-Reseller language. Selection state is driven by the
   shared .upgrade-option / .selected classes (keys.js), kept for compatibility. */
.np-pop-upgrade { width: min(460px, 100%); }
.np-pop-upgrade .upgrade-slot { margin-top: 16px; }
.np-up-section + .np-up-section { margin-top: 16px; }
.np-up-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--np-accent);
    margin-bottom: 8px;
}
/* Current license summary card. */
.np-up-current {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--np-accent-soft);
    border: 1px solid var(--np-accent-line);
}
.np-up-current-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-up-current-left > i { font-size: 20px; color: var(--np-accent); flex: 0 0 auto; }
.np-up-current-text { min-width: 0; }
.np-up-current-name {
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-up-current-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.55); }
.np-up-current-badge {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--np-accent);
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--np-accent-soft);
    border: 1px solid var(--np-accent-line);
}
/* Shared option-card chrome — overrides the legacy grey .upgrade-option look
   (style.css) so the cards match the gold popup. !important beats the older
   rule's specificity without editing the original. */
.np-pop-upgrade .upgrade-option {
    position: relative;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    cursor: pointer;
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.np-pop-upgrade .upgrade-option:hover {
    border-color: var(--np-accent-line) !important;
    background: var(--np-accent-soft) !important;
    transform: translateY(-2px);
}
.np-pop-upgrade .upgrade-option.selected {
    border-color: var(--np-accent) !important;
    background: var(--np-accent-soft) !important;
    box-shadow: 0 0 0 1px var(--np-accent), 0 8px 22px -12px var(--np-glow);
}
/* Tier rows (full width). */
.np-up-list { display: flex; flex-direction: column; gap: 10px; }
.np-up-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}
.np-up-tier-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-up-tier-icon { font-size: 18px; color: var(--np-accent); flex: 0 0 auto; }
.np-up-tier-text { min-width: 0; }
.np-up-tier-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.np-up-tier-meta { font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.np-up-tier-price { font-size: 15px; font-weight: 800; color: var(--np-accent); white-space: nowrap; }
/* Duration cards (2-col grid). */
.np-up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.np-up-dur { display: flex; flex-direction: column; gap: 4px; padding: 12px 13px; }
.np-up-dur-top { display: flex; align-items: center; gap: 8px; }
.np-up-dur-icon { font-size: 15px; color: var(--np-accent); }
.np-up-dur-name { font-size: 13px; font-weight: 700; color: #fff; }
.np-up-dur-price { font-size: 17px; font-weight: 800; color: var(--np-accent); }
.np-up-dur-meta { font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }
/* Empty state. */
.np-up-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 14px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}
.np-up-empty i { font-size: 26px; color: var(--np-accent-line); }
.np-up-empty span { font-size: 12.5px; font-weight: 600; }
/* Disabled confirm button inside the gold popup. */
.np-pop-upgrade #upgrade-confirm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
@media (max-width: 380px) {
    .np-up-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HEADER ICON BUTTONS (.hx-*)
   The four square header chrome buttons — settings (gear), announcements (bell),
   cart (bag) and sign-out (logout) — restyled into the SAME gradient-outlined
   pill language as the role / level / balance badges. Each carries its own
   --lvl-* theme via a tone class so the outline, icon glow and hover lift all
   recolor together:  settings = neutral grey,  bell + cart = gold,
   sign-out = red. Applied alongside the existing .btn .btn-secondary .btn-ihover
   markup, so the Lottie hover animations keep working untouched.
   ════════════════════════════════════════════════════════════════════════════ */
.btn-secondary.hx-btn {
    position: relative;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    /* neutral default theme — recolored by .hx-gold / .hx-red below */
    --hx-text: #9aa0ad;
    --hx-grad-a: rgba(150, 158, 173, 0.55);
    --hx-grad-b: rgba(110, 117, 132, 0.5);
    --hx-grad-c: rgba(70, 75, 88, 0.45);
    --hx-fill-a: rgba(26, 27, 33, 0.98);
    --hx-fill-b: rgba(16, 16, 20, 0.98);
    --hx-glow: rgba(150, 158, 173, 0.35);
    background:
        linear-gradient(160deg, var(--hx-fill-a), var(--hx-fill-b)) padding-box,
        linear-gradient(135deg, var(--hx-grad-a), var(--hx-grad-b) 55%, var(--hx-grad-c)) border-box;
    color: var(--hx-text);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-secondary.hx-btn:hover {
    border-color: transparent;       /* keep the gradient border on hover */
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px var(--hx-glow), 0 0 0 1px var(--hx-glow);
}
.btn-secondary.hx-btn:active { transform: translateY(0); }
/* The Lottie icon container sits dead-center and inherits the theme tint. */
.btn-secondary.hx-btn > div[id] {
    position: relative;
    z-index: 1;
}
/* Gold tone — bell + cart (matches the owner/customer yellow family). */
.btn-secondary.hx-btn.hx-gold {
    --hx-text: #f8e71c;
    --hx-grad-a: #fff27a;
    --hx-grad-b: #f8e71c;
    --hx-grad-c: #a8950a;
    --hx-fill-a: rgba(40, 37, 6, 0.98);
    --hx-fill-b: rgba(20, 18, 3, 0.98);
    --hx-glow: rgba(248, 231, 28, 0.45);
}
/* Red tone — sign-out (matches the danger / error family). */
.btn-secondary.hx-btn.hx-red {
    --hx-text: #ff5468;
    --hx-grad-a: #ff8a98;
    --hx-grad-b: #ff5468;
    --hx-grad-c: #b01f30;
    --hx-fill-a: rgba(40, 10, 14, 0.98);
    --hx-fill-b: rgba(20, 6, 9, 0.98);
    --hx-glow: rgba(255, 84, 104, 0.45);
}
/* Count pills (cart / bell) — themed to the host button instead of flat yellow,
   with a subtle ring so they read as "attached" to the gradient outline.
   Guarded with :not(.hidden) — backend.css loads after Tailwind, so an
   unconditional `display:flex` would override the JS-toggled `.hidden`. */
.hx-btn .hx-count:not(.hidden) {
    display: flex;
}
.hx-btn .hx-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    color: #14151a;
    border-radius: 999px;
    /* Bright light-grey pill so the count reads on the dark neutral button. */
    background: linear-gradient(135deg, #e2e6ee, #b9c0cd);
    box-shadow: 0 0 0 2px var(--hx-fill-b), 0 2px 6px -1px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Language flag button — same neutral .hx-btn chrome; just size the flag SVG so
   it sits centered like the gear/bell/cart icons. */
.hx-btn.hx-flag img {
    width: 22px;
    height: auto;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

/* ── Bell announcements dropdown (#dropdown) ─────────────────────────────────
   Restyled from a flat grey box into a gradient-outlined NEUTRAL GREY panel that
   matches the (grey) settings/bell button chrome: dark grey gradient fill, a
   light-grey 1px outline, soft shadow, themed header rule and scrollbar. */
#dropdown.hx-announce {
    --hx-grey: #c5cbd6;
    --hx-grey-dim: #9aa0ad;
    --hx-grey-soft: rgba(150, 158, 173, 0.14);
    --hx-grey-line: rgba(150, 158, 173, 0.4);
    padding: 0;
    border: 1px solid var(--hx-grey-line);
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(26, 27, 33, 0.99), rgba(15, 15, 18, 0.99));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 36px -16px rgba(150, 158, 173, 0.35);
    overflow: hidden;
}
/* Sticky header rail with the bell glyph + "Announcements" title. */
.hx-announce-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 12px;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: var(--hx-grey);
    border-bottom: 1px solid var(--hx-grey-line);
    background: linear-gradient(180deg, rgba(150, 158, 173, 0.06), transparent);
}
.hx-announce-head .hx-announce-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    font-size: 16px;
    color: var(--hx-grey);
    background: var(--hx-grey-soft);
    border: 1px solid var(--hx-grey-line);
}
/* Scroll region holding the rendered announcement rows. */
.hx-announce-body {
    max-height: 470px;
    overflow-y: auto;
    padding: 6px 14px 14px;
}
.hx-announce-body::-webkit-scrollbar { width: 8px; }
.hx-announce-body::-webkit-scrollbar-thumb {
    background: var(--hx-grey-line);
    border-radius: 999px;
}
.hx-announce-body::-webkit-scrollbar-track { background: transparent; }
/* Empty state shown when there are no announcements yet. */
.hx-announce-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 30px 16px 26px;
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}
.hx-announce-empty i {
    font-size: 30px;
    color: var(--hx-grey-line);
}
.hx-announce-empty span { font-size: 12.5px; font-weight: 600; }

/* Each announcement row — a mini card. Unseen rows carry a brighter grey
   outline + "New" chip; seen rows fade back. */
.hx-note {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.hx-note:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.16); }
.hx-note.is-unseen {
    border-color: var(--hx-grey-line);
    background: linear-gradient(160deg, rgba(150, 158, 173, 0.1), rgba(150, 158, 173, 0.03));
    box-shadow: 0 0 24px -14px rgba(150, 158, 173, 0.6);
}
.hx-note.is-seen { opacity: 0.55; }
.hx-note-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
}
.hx-note-new {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px 2px 6px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #14151a;
    background: linear-gradient(135deg, #e2e6ee, #b9c0cd);
}
.hx-note-new .notification { display: inline-block; height: 13px; width: 13px; pointer-events: none; }
.hx-note-date {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.45);
}
.hx-note.is-unseen .hx-note-date { color: var(--hx-grey); }
.hx-note-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 3px;
    overflow-wrap: break-word;
}
.hx-note-body {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    overflow-wrap: break-word;
}

/* ── Cart items (cart.php #cart-items) ───────────────────────────────────────
   Each cart line restyled into a gradient-outlined gold card matching the badge
   language: avatar medallion, themed quantity select, gold price, and a red
   remove pill that lifts on hover. */
.hx-cart-card {
    position: relative;
    padding: 16px 20px;
    border-radius: 16px;
    border: 1px solid rgba(248, 231, 28, 0.28);
    background: linear-gradient(160deg, rgba(22, 21, 6, 0.6), rgba(14, 14, 16, 0.6));
    box-shadow: 0 14px 36px -22px rgba(0, 0, 0, 0.9);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.hx-cart-card:hover {
    transform: translateY(-2px);
    border-color: rgba(248, 231, 28, 0.5);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9), 0 0 30px -18px rgba(248, 231, 28, 0.55);
}
/* Gradient accent rail down the left edge. */
.hx-cart-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff27a, #f8e71c, #a8950a);
    opacity: 0.85;
}
.hx-cart-avatar {
    position: relative;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hx-cart-avatar .hx-cart-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: linear-gradient(135deg, #fff27a, #f8e71c 55%, #a8950a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}
.hx-cart-avatar img {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
}
.hx-cart-qty.form-select {
    background-color: rgba(248, 231, 28, 0.08);
    border-color: rgba(248, 231, 28, 0.3);
    color: #f8e71c;
    font-weight: 700;
    border-radius: 9px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hx-cart-qty.form-select:focus {
    outline: none;
    border-color: rgba(248, 231, 28, 0.6);
    box-shadow: 0 0 0 1px rgba(248, 231, 28, 0.5);
}
.hx-cart-product { font-size: 1.05rem; font-weight: 700; color: #fff; }
.hx-cart-meta { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-top: 2px; }
.hx-cart-price-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
}
.hx-cart-price {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f8e71c;
    line-height: 1.1;
}
/* Remove pill — gradient-outlined red, lifts + glows on hover. */
.btn.hx-cart-remove {
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 11px;
    background:
        linear-gradient(160deg, rgba(40, 10, 14, 0.98), rgba(20, 6, 9, 0.98)) padding-box,
        linear-gradient(135deg, #ff8a98, #ff5468 55%, #b01f30) border-box;
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.btn.hx-cart-remove:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(255, 84, 104, 0.6), 0 0 0 1px rgba(255, 84, 104, 0.4);
}
.btn.hx-cart-remove .delete { color: #ff5468 !important; }
/* Empty-cart state card. */
.hx-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 20px;
    border-radius: 16px;
    border: 1px dashed rgba(248, 231, 28, 0.3);
    background: linear-gradient(160deg, rgba(22, 21, 6, 0.45), rgba(14, 14, 16, 0.45));
    text-align: center;
    color: rgba(255, 255, 255, 0.55);
}
.hx-cart-empty i { font-size: 34px; color: rgba(248, 231, 28, 0.55); }
.hx-cart-empty span { font-size: 13px; font-weight: 600; }
@media (max-width: 640px) {
    .hx-cart-card { padding: 14px 16px; }
}