/* =============================================================================
   MODERN PREMIUM THEME — dark UI overlay for unlock-lock.com
   v11.43 •  2026-05-12 (Pair 3 + Pair 4: Underlines, Gradient borders, Aurora bg, Skeleton loading)
   ----------------------------------------------------------------------------
   Premium dark UI inspired by Linear / Vercel / Stripe / Apple / Notion.
   Loaded AFTER green CSS only when admin sets ClientUITheme = 'modern'.
   This overlay never modifies HTML or JS — only visual properties via
   !important so it can override green inline + hard-coded rules.

   What changed from v10:
     • Refined token system (4 surface levels, 5 text levels, semantic tints)
     • Warmer page background (#0b0c10 vs #07080c) — easier on the eyes
     • Softer accent (#5b8cff vs #3b82f6) — refined, less screaming
     • Borders via rgba (premium effect, not flat gray lines)
     • New components: tooltip, toastr, search bar, empty-state, skeleton
     • Better focus rings (unified 3px ring + outline none everywhere)
     • Better hover states (transform + accent ring + glow)
     • All v10 functional rules carried over 1:1 (mobile menu z-index,
       modal stack, process_loader demotion, body overflow override,
       hero aspect-ratio, brand logos white card, marquee kill, etc.)
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

/* ============================================================================
   1. DESIGN TOKENS
   ============================================================================ */
:root {
    /* ----- SURFACE LADDER (4 уровня глубины) ----- */
    --m-bg:            #0b0c10;
    --m-bg-2:          #0f1117;
    --m-bg-3:          #13151c;

    --m-surface:       #14161e;
    --m-surface-2:     #1a1d27;
    --m-surface-3:     #21242f;
    --m-surface-4:     #292d3a;

    /* ----- BORDERS (полупрозрачные для премиум-эффекта) ----- */
    --m-border:        rgba(255, 255, 255, 0.06);
    --m-border-2:      rgba(255, 255, 255, 0.10);
    --m-border-3:      rgba(255, 255, 255, 0.14);
    --m-border-strong: rgba(255, 255, 255, 0.22);

    /* ----- TEXT (5 уровней) ----- */
    --m-text:           #f3f4f7;
    --m-text-2:         #c9cdd6;
    --m-text-3:         #9ba1ad;
    --m-text-4:         #6b7180;
    --m-text-disabled:  #4a4f5b;

    /* ----- BRAND ----- */
    --m-accent:         #5b8cff;
    --m-accent-hover:   #6f9bff;
    --m-accent-active:  #4577f5;
    --m-accent-soft:    rgba(91, 140, 255, 0.14);
    --m-accent-ring:    rgba(91, 140, 255, 0.32);
    --m-accent-glow:    rgba(91, 140, 255, 0.42);

    /* legacy aliases for compatibility with any v10 reference */
    --m-accent-2:       #4577f5;
    --m-accent-3:       #3b66d8;

    /* ----- STATUS COLORS (semantic, с tinted backgrounds) ----- */
    --m-success:         #34d399;
    --m-success-bg:      rgba(52, 211, 153, 0.10);
    --m-success-border:  rgba(52, 211, 153, 0.28);
    --m-danger:          #f87171;
    --m-danger-bg:       rgba(248, 113, 113, 0.10);
    --m-danger-border:   rgba(248, 113, 113, 0.28);
    --m-warning:         #fbbf24;
    --m-warning-bg:      rgba(251, 191, 36, 0.10);
    --m-warning-border:  rgba(251, 191, 36, 0.28);
    --m-info:            #60a5fa;
    --m-info-bg:         rgba(96, 165, 250, 0.10);
    --m-info-border:     rgba(96, 165, 250, 0.28);

    /* ----- RADIUS ----- */
    --m-radius-xs:    6px;
    --m-radius-sm:    10px;
    --m-radius:       14px;
    --m-radius-lg:    20px;
    --m-radius-xl:    28px;
    --m-radius-full:  999px;

    /* ----- SHADOWS (premium soft, многослойные) ----- */
    --m-shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.40);
    --m-shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20);
    --m-shadow:       0 12px 32px rgba(0, 0, 0, 0.42), 0 4px 12px rgba(0, 0, 0, 0.25);
    --m-shadow-lg:    0 24px 60px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.30);
    --m-shadow-xl:    0 32px 80px rgba(0, 0, 0, 0.65);
    --m-shadow-glow:  0 8px 28px var(--m-accent-glow);
    --m-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

    /* ----- TRANSITIONS ----- */
    --m-tr:        260ms cubic-bezier(0.4, 0, 0.2, 1);
    --m-tr-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --m-tr-slow:   500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ----- TYPOGRAPHY ----- */
    --m-font:         "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", system-ui, sans-serif;
    --m-font-display: "Space Grotesk", "Inter", "SF Pro Display", -apple-system, sans-serif;
    --m-font-mono:    "JetBrains Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

    /* ----- HERO IMAGE (управляется inline в <head> когда админ загрузил) ----- */
    --m-hero-image:   none;
    --m-hero-overlay: linear-gradient(transparent, transparent);  /* v6: no dimming */

    /* ----- v11.6: GOLD ACCENT tokens for premium button frames ----- */
    --m-gold:        #d4af37;       /* primary gold */
    --m-gold-soft:   rgba(212, 175, 55, 0.18);
    --m-gold-ring:   rgba(212, 175, 55, 0.42);
    --m-gold-glow:   rgba(212, 175, 55, 0.28);
    --m-gold-hi:     #f1d271;       /* lighter hover gold */
}

/* ============================================================================
   2. BASE — html, body, typography, scrollbar
   ============================================================================ */
html, body {
    font-family: var(--m-font) !important;
    color: var(--m-text) !important;
    background: var(--m-bg) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.55;
}

body, body.green_temp, body.body {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
}

/* Subtle ambient glow in background (turned off on small screens for GPU) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(620px circle at 8% 12%, rgba(91, 140, 255, 0.08), transparent 50%),
        radial-gradient(720px circle at 92% 88%, rgba(69, 119, 245, 0.06), transparent 55%);
}
body > * { position: relative; z-index: 1; }

/* Reset text color for common containers — secondary text by default */
p, span, li, td, th, label, div, small {
    font-family: var(--m-font);
    color: var(--m-text-2);
}
li, td, th { color: var(--m-text); }

/* ----- HEADINGS — Space Grotesk display ----- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--m-font-display) !important;
    color: var(--m-text) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-top: 0;
    line-height: 1.18;
}
h1, .h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; }
h2, .h2 { font-size: clamp(1.5rem, 3.2vw, 2.4rem); font-weight: 700; }
h3, .h3 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 600; }
h4, .h4 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); font-weight: 600; }
h5, .h5 { font-size: 1rem; font-weight: 600; }
h6, .h6 {
    font-size: 0.875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--m-text-3) !important;
}

/* ----- LINKS ----- */
a { color: var(--m-accent); transition: color var(--m-tr-fast); text-decoration: none; }
a:hover, a:focus { color: var(--m-accent-hover); text-decoration: none; }

/* ----- SELECTION ----- */
::selection { background: var(--m-accent-soft); color: var(--m-text); }

/* ----- HR ----- */
hr { border: 0; border-top: 1px solid var(--m-border); margin: 2rem 0; }

/* ----- SCROLLBAR (sleek dark) ----- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--m-bg); }
::-webkit-scrollbar-thumb {
    background: var(--m-surface-3);
    border-radius: var(--m-radius-full);
    border: 3px solid var(--m-bg);
    transition: background var(--m-tr-fast);
}
::-webkit-scrollbar-thumb:hover { background: var(--m-surface-4); }
::-webkit-scrollbar-corner { background: var(--m-bg); }
* { scrollbar-color: var(--m-surface-3) var(--m-bg); scrollbar-width: thin; }

/* ----- IMAGES ----- */
img { max-width: 100%; height: auto; }

/* ----- CODE / KBD ----- */
code, kbd, pre, samp {
    font-family: var(--m-font-mono);
    font-size: 0.875em;
    background: var(--m-surface-2);
    color: var(--m-text);
    padding: 0.125em 0.35em;
    border-radius: var(--m-radius-xs);
    border: 1px solid var(--m-border);
}
pre { padding: 1rem; overflow-x: auto; }
pre code { background: transparent; border: 0; padding: 0; }

/* ============================================================================
   3. NAVBAR / HEADER (sticky, glass blur)
   ============================================================================ */
header.green_header,
.green_header,
header#header {
    background: rgba(11, 13, 20, 0.78) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-bottom: 1px solid var(--m-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
    position: sticky !important;
    top: 0;
    z-index: 200;
    transition: background var(--m-tr), border-color var(--m-tr);
}
header.green_header.inner_banner, .inner_banner {
    background: rgba(11, 13, 20, 0.78) !important;
}

.navbar { background: transparent !important; padding: 0.85rem 1rem; }
@media (min-width: 992px) {
    .navbar { padding: 0.6rem 1.5rem !important; min-height: 70px; }
}

/* Logo */
.navbar-brand { padding: 0 1rem 0 0 !important; margin: 0 !important; }
.navbar-brand img {
    max-height: 44px; width: auto;
    transition: transform var(--m-tr), filter var(--m-tr);
}
.navbar-brand:hover img { transform: scale(1.04); }

/* Nav links */
.navbar-nav { gap: 4px; }
.navbar-nav .nav-link, .navbar-nav > li > a {
    color: var(--m-text-2) !important;
    font-weight: 500;
    padding: 0.6rem 1rem !important;
    border-radius: var(--m-radius-xs);
    transition: all var(--m-tr-fast);
    font-size: 0.94rem;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.navbar-nav .nav-link:hover, .navbar-nav > li > a:hover {
    color: #fff !important;
    background: var(--m-accent-soft);
}
.navbar-nav .nav-item.active .nav-link, .navbar-nav .active > a {
    color: #fff !important;
    background: var(--m-accent-soft);
    box-shadow: inset 0 0 0 1px var(--m-accent-ring);
}
.navbar-nav .nav-link i, .navbar-nav > li > a i {
    color: currentColor;
    margin-right: 6px;
    transition: transform var(--m-tr-fast);
}

/* Toggler */
.navbar-toggler {
    border: 1px solid var(--m-border-2) !important;
    padding: 0.5rem 0.7rem !important;
    border-radius: var(--m-radius-xs);
    background: var(--m-surface) !important;
    transition: all var(--m-tr-fast);
}
.navbar-toggler:hover { background: var(--m-surface-2) !important; border-color: var(--m-border-3) !important; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px var(--m-accent-ring); outline: none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%235b8cff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* Dropdown menus (Bootstrap) */
.dropdown-menu {
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-lg) !important;
    padding: 0.45rem !important;
    background: var(--m-surface-2) !important;
    min-width: 220px;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    color: var(--m-text-2);
    animation: m-dropdown-in 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes m-dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dropdown-menu .dropdown-item, .dropdown-menu li a {
    border-radius: var(--m-radius-xs);
    padding: 0.55rem 0.85rem !important;
    color: var(--m-text-2) !important;
    font-weight: 500;
    transition: all var(--m-tr-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu li a:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--m-surface-3) !important;
    color: #fff !important;
}
.dropdown-menu .dropdown-divider, .dropdown-menu hr {
    border-top: 1px solid var(--m-border) !important;
    margin: 0.35rem 0;
}
.dropdown-menu .dropdown-header {
    color: var(--m-text-3) !important;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 0.5rem 0.85rem 0.25rem;
}

/* Custom c_menu (sitemap-style dropdown в navbar) */
ul.c_menu, ul.c_menu li {
    background: var(--m-surface-2) !important;
    color: var(--m-text-2) !important;
}
.navbar-nav .c_dropdown:hover > .c_menu,
.navbar-nav li > .c_menu {
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-lg) !important;
    background: var(--m-surface-2) !important;
    padding: 0.45rem !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    min-width: 220px;
}
ul.c_menu li a {
    color: var(--m-text-2) !important;
    border-radius: var(--m-radius-xs);
    padding: 0.55rem 0.85rem !important;
    transition: all var(--m-tr-fast);
    display: block;
}
ul.c_menu li a:hover { color: #fff !important; background: var(--m-surface-3) !important; }

/* ============================================================================
   4. HERO SECTION — preserved from v10 (functional 1:1)
   ============================================================================ */
section.green_banner {
    position: relative;
    background-color: var(--m-bg) !important;
    background-image: var(--m-hero-image) !important;    /* v6: no dimming */
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    border-bottom: 1px solid var(--m-border);
    overflow: hidden;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}
@media (min-width: 1600px) {
    html[data-modern-hero="on"] section.green_banner,
    section.green_banner {
        max-height: 760px !important;
        aspect-ratio: auto !important;
        height: 760px !important;
    }
}
@media (max-width: 1599px) {
    html[data-modern-hero="on"] section.green_banner,
    section.green_banner {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        max-height: none !important;
    }
}
html[data-modern-hero="on"] section.green_banner .green_banner_content,
html[data-modern-hero="on"] section.green_banner .slick-wrapper,
html[data-modern-hero="on"] section.green_banner .slick-wrapper > div,
html[data-modern-hero="on"] section.green_banner .slick-wrapper .slick-list,
html[data-modern-hero="on"] section.green_banner .slick-wrapper .slick-track {
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
html[data-modern-hero="on"] section.green_banner img.img-fluid,
html[data-modern-hero="on"] section.green_banner .slick-wrapper img,
html[data-modern-hero="on"] section.green_banner .slick-slide img {
    display: none !important;
}
section.green_banner h1, section.green_banner h2, section.green_banner h3,
section.green_banner p, section.green_banner span {
    color: #fff !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
html[data-modern-hero="on"] section.green_banner .slick-dots {
    position: absolute;
    bottom: 22px; left: 0; right: 0;
    text-align: center;
    z-index: 5;
    margin: 0; padding: 0;
}
html[data-modern-hero="on"] section.green_banner .slick-dots li { display: inline-block; margin: 0 4px; }
html[data-modern-hero="on"] section.green_banner .slick-dots li button {
    background: rgba(255, 255, 255, 0.30) !important;
    width: 8px; height: 8px; padding: 0; border: 0;
    border-radius: var(--m-radius-full);
    text-indent: -999px; overflow: hidden;
    transition: all var(--m-tr);
}
html[data-modern-hero="on"] section.green_banner .slick-dots li.slick-active button {
    background: var(--m-accent) !important;
    width: 24px;
    box-shadow: 0 0 12px var(--m-accent-glow);
}

/* ============================================================================
   5. BUTTONS — unified system (primary / secondary / ghost / outline / status)
   ============================================================================ */
.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn {
    font-family: var(--m-font);
    font-weight: 600;
    border-radius: var(--m-radius-sm) !important;
    padding: 0.65rem 1.3rem;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    transition: all var(--m-tr-fast);
    box-shadow: var(--m-shadow-xs);
    text-transform: none;
    line-height: 1.4;
    font-size: 0.94rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    user-select: none;
}
.btn:focus, button.btn:focus,
.btn:focus-visible, button.btn:focus-visible {
    box-shadow: 0 0 0 3px var(--m-accent-ring);
    outline: none;
}
.btn:disabled, .btn.disabled,
button.btn:disabled, button.btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}
.btn svg, button.btn svg { fill: currentColor; flex-shrink: 0; }
.btn i, button.btn i { color: currentColor; }

/* Primary */
.btn-primary, .btn-success,
button[type="submit"]:not(.btn-secondary):not(.btn-link):not(.btn-default):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-outline-primary):not(.btn-ghost) {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px var(--m-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover, .btn-success:hover {
    background: linear-gradient(135deg, var(--m-accent-hover), var(--m-accent)) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px var(--m-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.btn-primary:active, .btn-success:active {
    transform: translateY(0);
    background: linear-gradient(135deg, var(--m-accent-active), var(--m-accent-active)) !important;
}

/* Secondary */
.btn-default, .btn-secondary {
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-border-2) !important;
    color: var(--m-text) !important;
    box-shadow: var(--m-shadow-xs) !important;
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--m-surface-3) !important;
    border-color: var(--m-border-3) !important;
    transform: translateY(-1px);
}
.btn-default:active, .btn-secondary:active {
    transform: translateY(0);
    background: var(--m-surface) !important;
}

/* Ghost */
.btn-ghost {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--m-text-2) !important;
    box-shadow: none !important;
}
.btn-ghost:hover { background: var(--m-surface-2) !important; color: var(--m-text) !important; }

/* Danger */
.btn-danger {
    background: linear-gradient(135deg, #f87171, #dc2626) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(248, 113, 113, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.btn-danger:hover {
    background: linear-gradient(135deg, #fca5a5, #f87171) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(248, 113, 113, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

/* Warning */
.btn-warning {
    background: linear-gradient(135deg, #fbbf24, #d97706) !important;
    border: 1px solid transparent !important;
    color: #1a1d27 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 16px rgba(251, 191, 36, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.30) !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #fcd34d, #fbbf24) !important;
    transform: translateY(-1px);
}

/* Info */
.btn-info {
    background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
.btn-info:hover { transform: translateY(-1px); }

/* Link */
.btn-link {
    color: var(--m-accent) !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0.4rem 0.6rem;
    font-weight: 500;
}
.btn-link:hover { color: var(--m-accent-hover) !important; background: var(--m-accent-soft) !important; }

/* Outline primary */
.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid var(--m-accent) !important;
    color: var(--m-accent) !important;
    box-shadow: none !important;
}
.btn-outline-primary:hover {
    background: var(--m-accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 22px var(--m-accent-glow) !important;
    transform: translateY(-1px);
}

/* Sizes */
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; border-radius: var(--m-radius-xs) !important; }
.btn-lg { padding: 0.95rem 1.8rem; font-size: 1.05rem; border-radius: var(--m-radius) !important; }
.btn-xl { padding: 1.1rem 2.2rem; font-size: 1.15rem; border-radius: var(--m-radius) !important; }

/* CTA */
.btn-cta {
    background: linear-gradient(135deg, var(--m-accent-hover), var(--m-accent), var(--m-accent-active)) !important;
    color: #fff !important;
    padding: 1rem 2rem !important;
    font-size: 1.05rem !important;
    border-radius: var(--m-radius) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 40px var(--m-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

/* Icon button */
.btn-icon, .btn.btn-icon {
    width: 40px; height: 40px;
    padding: 0 !important;
    border-radius: var(--m-radius-sm) !important;
}
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon.btn-lg { width: 48px; height: 48px; }

/* ============================================================================
   v11.6: GOLD FRAME + GLOW on ALL buttons — premium accent ring
   ============================================================================
   Wraps every interactive button (Bootstrap .btn-*, native <button>,
   form submits, custom green-theme classes) with a subtle 1px gold border
   and a soft outer gold glow. Doesn't replace the existing colour gradient,
   just adds the gold accent ring around it. */
.btn,
button.btn,
button.form_submit_0,
button.checkout-button,
.green_login .form_submit_0,
.green_login .submit-btn,
.btn-primary, .btn-secondary, .btn-default, .btn-success,
.btn-danger, .btn-warning, .btn-info, .btn-outline-primary,
.btn-cta, .btn-green, .green-btn,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    border-color: var(--m-gold-ring) !important;
    box-shadow:
        0 0 0 1px var(--m-gold-ring),
        0 2px 10px var(--m-gold-glow),
        var(--m-shadow-xs) !important;
    transition:
        border-color var(--m-tr-fast),
        box-shadow var(--m-tr-fast),
        background var(--m-tr-fast),
        transform var(--m-tr-fast),
        color var(--m-tr-fast) !important;
}
.btn:hover,
button.btn:hover,
button.form_submit_0:hover,
button.checkout-button:hover,
.green_login .form_submit_0:hover,
.green_login .submit-btn:hover,
.btn-primary:hover, .btn-secondary:hover, .btn-default:hover, .btn-success:hover,
.btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-outline-primary:hover,
.btn-cta:hover, .btn-green:hover, .green-btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    border-color: var(--m-gold) !important;
    box-shadow:
        0 0 0 1px var(--m-gold),
        0 6px 22px var(--m-gold-glow),
        0 0 30px rgba(212, 175, 55, 0.18) !important;
}
.btn:active,
button.btn:active,
.btn-primary:active, .btn-secondary:active, .btn-success:active,
input[type="submit"]:active {
    box-shadow:
        0 0 0 1px var(--m-gold),
        inset 0 2px 4px rgba(0, 0, 0, 0.18),
        0 2px 8px var(--m-gold-glow) !important;
}
.btn:focus, .btn:focus-visible,
button.btn:focus, button.btn:focus-visible,
input[type="submit"]:focus, input[type="submit"]:focus-visible {
    outline: none !important;
    box-shadow:
        0 0 0 1px var(--m-gold),
        0 0 0 4px rgba(212, 175, 55, 0.22),
        0 6px 22px var(--m-gold-glow) !important;
}

/* Link buttons (.btn-link, .btn-ghost) — minimal gold underline on hover,
   not a full ring, so they stay visually "text-like" */
.btn-link, .btn-ghost {
    box-shadow: none !important;
    border-color: transparent !important;
}
.btn-link:hover, .btn-ghost:hover {
    box-shadow: 0 0 0 1px var(--m-gold-soft) !important;
    border-color: var(--m-gold-soft) !important;
}

/* Disabled buttons — no gold glow */
.btn:disabled, .btn.disabled,
button.btn:disabled, button.btn.disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
    border-color: var(--m-border) !important;
    box-shadow: none !important;
}

/* ============================================================================
   6. FORMS / INPUTS
   ============================================================================ */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="search"], input[type="url"],
input[type="date"], input[type="time"], input[type="datetime-local"],
select, textarea {
    font-family: var(--m-font);
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 0.7rem 0.95rem !important;
    color: var(--m-text) !important;
    font-size: 0.95rem;
    box-shadow: var(--m-shadow-xs);
    transition: border-color var(--m-tr-fast), box-shadow var(--m-tr-fast), background var(--m-tr-fast);
    height: auto !important;
    line-height: 1.5;
    width: 100%;
    box-sizing: border-box;
}
.form-control:hover, input:hover, select:hover, textarea:hover {
    border-color: var(--m-border-3) !important;
}
.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 0 3px var(--m-accent-ring) !important;
    outline: none !important;
    background: var(--m-surface-2) !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--m-text-3);
    opacity: 0.65;
}
.form-control[readonly], .form-control[disabled], .form-control:disabled,
input[disabled], input[readonly], select[disabled], textarea[disabled] {
    background: var(--m-bg-2) !important;
    color: var(--m-text-disabled) !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Validation states */
.form-control.is-invalid, .form-control:invalid:not(:placeholder-shown),
input.is-invalid, input.error {
    border-color: var(--m-danger) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.20) !important;
}
.form-control.is-valid, input.is-valid {
    border-color: var(--m-success) !important;
}
.invalid-feedback, .cs-field-error, .help-block.error {
    color: var(--m-danger) !important;
    font-size: 0.82rem;
    margin-top: 0.35rem;
    display: block;
    font-weight: 500;
}

/* Custom select arrow */
select.form-control, select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ba1ad' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.95rem center !important;
    background-size: 12px 12px !important;
    padding-right: 2.4rem !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select option { background: var(--m-surface-2) !important; color: var(--m-text) !important; }

textarea, textarea.form-control { min-height: 110px; resize: vertical; }

.form-group { margin-bottom: 1.25rem; }
.form-group label, label, .control-label {
    display: inline-block;
    margin-bottom: 0.45rem;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--m-text-3);
    letter-spacing: 0.01em;
}
.form-group label.required::after, label.required::after {
    content: " *";
    color: var(--m-danger);
}
.form-text, .help-block {
    color: var(--m-text-3);
    font-size: 0.82rem;
    margin-top: 0.4rem;
}

/* Checkbox / radio */
input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px;
    margin-right: 0.45rem;
    accent-color: var(--m-accent);
    cursor: pointer;
    vertical-align: middle;
}
.checkbox label, .radio label { font-weight: 500; color: var(--m-text-2); cursor: pointer; }

/* Input group */
.input-group .form-control { box-shadow: none; }
.input-group-addon, .input-group-text {
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-border-2) !important;
    color: var(--m-text-3) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 0.7rem 0.95rem !important;
}

/* File input */
input[type="file"] {
    background: var(--m-surface) !important;
    color: var(--m-text-2) !important;
    border: 1px dashed var(--m-border-2) !important;
    padding: 0.55rem !important;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active));
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--m-radius-xs);
    margin-right: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--m-tr-fast);
}
input[type="file"]::file-selector-button:hover {
    background: linear-gradient(135deg, var(--m-accent-hover), var(--m-accent));
}

/* ============================================================================
   7. CARDS / PANELS — 4-уровневая elevation система
   ============================================================================ */
.card, .panel, .box, .well, .tile, .widget {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-sm) !important;
    overflow: hidden;
    transition: all var(--m-tr);
    color: var(--m-text-2);
}
.card:hover, .panel:hover, .tile:hover {
    box-shadow: var(--m-shadow);
    border-color: var(--m-border-2);
    transform: translateY(-2px);
}
.card .card, .panel .panel, .card .box, .panel .box {
    background: var(--m-surface-2) !important;
    border-color: var(--m-border) !important;
    box-shadow: var(--m-shadow-xs) !important;
}
.card-header, .panel-heading {
    background: var(--m-surface-2) !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 1rem 1.3rem !important;
    font-weight: 600;
    color: var(--m-text);
    border-radius: 0 !important;
}
.card-body, .panel-body { padding: 1.3rem !important; color: var(--m-text-2); }
.card-footer, .panel-footer {
    background: var(--m-surface-2) !important;
    border-top: 1px solid var(--m-border) !important;
    padding: 0.9rem 1.3rem !important;
    color: var(--m-text-3);
}
.card-title, .panel-title {
    color: var(--m-text);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
    font-family: var(--m-font-display);
}

/* Product / service cards */
.shop-product-area .item, .product-card, .service-card {
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    background: var(--m-surface) !important;
    box-shadow: var(--m-shadow-xs);
    overflow: hidden;
    transition: all var(--m-tr);
    position: relative;
}
.shop-product-area .item:hover, .product-card:hover, .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow), 0 0 0 1px var(--m-accent-soft);
    border-color: var(--m-accent-soft);
}
.shop-product-area .item img, .product-card img {
    border-radius: var(--m-radius-sm);
    background: var(--m-surface-2);
}
.shop-product-area .item .item-title,
.shop-product-area .item h3,
.shop-product-area .item h4 {
    color: var(--m-text) !important;
    font-weight: 600;
}
.vprod_head img {
    border-radius: var(--m-radius-sm) var(--m-radius-sm) 0 0;
    background: var(--m-surface-2);
}

/* ============================================================================
   8. TABLES
   ============================================================================ */
.table, table.table, table {
    background: var(--m-surface) !important;
    border-radius: var(--m-radius) !important;
    overflow: hidden;
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100%;
    color: var(--m-text-2);
}
.table thead, table thead {
    background: var(--m-surface-2) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}
.table thead th, table thead th {
    background: var(--m-surface-2) !important;
    color: var(--m-text-3) !important;
    font-weight: 600 !important;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--m-border-2) !important;
    border-top: 0 !important;
    padding: 0.95rem 1rem !important;
    text-align: left;
}
.table tbody td, .table td, table td {
    padding: 0.9rem 1rem !important;
    border-top: 1px solid var(--m-border) !important;
    color: var(--m-text-2);
    vertical-align: middle !important;
}
.table tbody tr, table tbody tr { transition: background var(--m-tr-fast); }
.table tbody tr:hover, table tbody tr:hover { background: var(--m-surface-2) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, 0.02) !important; }
.table-bordered, .table-bordered td, .table-bordered th {
    border-color: var(--m-border) !important;
}

/* DataTables */
.dataTables_wrapper { padding: 0; color: var(--m-text-2); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select { margin-left: 0.5rem; }
.dataTables_wrapper .dataTables_info {
    color: var(--m-text-3);
    padding-top: 0.85rem;
    font-size: 0.85rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-xs) !important;
    margin: 0 2px;
    padding: 0.4rem 0.75rem !important;
    color: var(--m-text-2) !important;
    background: var(--m-surface) !important;
    transition: all var(--m-tr-fast);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--m-accent) !important;
    color: #fff !important;
    border-color: var(--m-accent) !important;
    box-shadow: 0 4px 12px var(--m-accent-glow);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--m-surface-3) !important;
    color: #fff !important;
    border-color: var(--m-border-3) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--m-text-disabled) !important;
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   9. SIDEBAR / CLIENT PANEL
   ============================================================================ */
#sidebar, .sidebar, .left-sidebar, .leftbar {
    background: var(--m-bg-3) !important;
    border-right: 1px solid var(--m-border);
}
#sidebar a, .sidebar a {
    color: var(--m-text-2) !important;
    border-radius: var(--m-radius-xs);
    margin: 2px 8px;
    padding: 0.65rem 0.95rem !important;
    font-weight: 500;
    transition: all var(--m-tr-fast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}
#sidebar a:hover, .sidebar a:hover {
    background: var(--m-surface-2) !important;
    color: #fff !important;
}
#sidebar li.active > a, .sidebar li.active > a {
    background: var(--m-accent-soft) !important;
    color: #fff !important;
}
/* Accent stripe on active sidebar item */
#sidebar li.active > a::before, .sidebar li.active > a::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background: var(--m-accent);
    border-radius: var(--m-radius-full);
    box-shadow: 0 0 12px var(--m-accent-glow);
}
#sidebar .nav-icon, .sidebar i {
    color: var(--m-text-3);
    margin-right: 0.45rem;
    transition: color var(--m-tr-fast);
}
#sidebar a:hover .nav-icon, .sidebar a:hover i,
#sidebar li.active i, .sidebar li.active i {
    color: var(--m-accent) !important;
}

.dashboard .info-box, .info-tile, .stat-card {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-sm);
    padding: 1.3rem;
    transition: all var(--m-tr);
}
.dashboard .info-box:hover, .info-tile:hover, .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow);
    border-color: var(--m-border-2);
}

/* ============================================================================
   10. MODALS / POPUPS
   ============================================================================ */
.modal-content {
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow-lg) !important;
    overflow: hidden;
    background: var(--m-surface) !important;
    color: var(--m-text);
}
.modal-header {
    background: var(--m-surface-2) !important;
    border-bottom: 1px solid var(--m-border) !important;
    padding: 1.15rem 1.5rem !important;
}
.modal-header .close {
    color: var(--m-text-3);
    opacity: 1;
    font-size: 1.6rem;
    transition: color var(--m-tr-fast), transform var(--m-tr-fast);
    text-shadow: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0 0.5rem;
}
.modal-header .close:hover { color: #fff; transform: rotate(90deg); }
.modal-title { font-weight: 700; color: var(--m-text); font-family: var(--m-font-display); }
.modal-body { padding: 1.5rem !important; color: var(--m-text-2); }
.modal-footer {
    background: var(--m-surface-2) !important;
    border-top: 1px solid var(--m-border) !important;
    padding: 1rem 1.5rem !important;
    gap: 0.5rem;
}
.modal-backdrop, .modal-backdrop.show, .modal-backdrop.in {
    background: rgba(0, 0, 0, 0.75) !important;
    opacity: 1 !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* SweetAlert */
.swal2-popup, .sweet-alert {
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow-lg) !important;
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border-2) !important;
}
.swal2-title, .sweet-alert h2 {
    color: var(--m-text) !important;
    font-family: var(--m-font-display);
}
.swal2-html-container, .sweet-alert p { color: var(--m-text-2) !important; }

/* ============================================================================
   11. ALERTS / BADGES
   ============================================================================ */
.alert {
    border-radius: var(--m-radius) !important;
    border: 1px solid transparent;
    padding: 0.95rem 1.15rem !important;
    font-weight: 500;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.alert-success {
    background: var(--m-success-bg) !important;
    color: #6ee7b7 !important;
    border-color: var(--m-success-border) !important;
}
.alert-danger, .alert-error {
    background: var(--m-danger-bg) !important;
    color: #fca5a5 !important;
    border-color: var(--m-danger-border) !important;
}
.alert-warning {
    background: var(--m-warning-bg) !important;
    color: #fcd34d !important;
    border-color: var(--m-warning-border) !important;
}
.alert-info {
    background: var(--m-info-bg) !important;
    color: #93c5fd !important;
    border-color: var(--m-info-border) !important;
}

/* Badges (pill style) */
.label, .badge, .tag {
    border-radius: var(--m-radius-full) !important;
    font-weight: 600;
    padding: 0.3rem 0.75rem !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.label-success, .badge-success, .badge.bg-success { background: var(--m-success) !important; color: #04231a !important; }
.label-danger, .badge-danger, .badge.bg-danger     { background: var(--m-danger) !important;  color: #2a0808 !important; }
.label-warning, .badge-warning, .badge.bg-warning   { background: var(--m-warning) !important; color: #2a1c00 !important; }
.label-info, .badge-info, .badge.bg-info            { background: var(--m-info) !important;    color: #0a1a3c !important; }
.label-default, .badge-default                      { background: var(--m-surface-3) !important; color: var(--m-text) !important; }

/* ============================================================================
   12. CHAT / MESSAGES
   ============================================================================ */
.chat-list, .chat-window, .chat-container {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-sm);
}
.chat-message, .chat-msg, .chat-item {
    padding: 0.8rem 1.1rem;
    border-radius: var(--m-radius);
    margin: 0.4rem 0;
    background: var(--m-surface-2);
    color: var(--m-text);
    max-width: 80%;
    display: inline-block;
    line-height: 1.5;
    word-wrap: break-word;
}
.chat-message.me, .chat-msg.me,
.chat-message.outgoing, .chat-message.right, .chat-msg.right {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active));
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 14px var(--m-accent-glow);
}
.chat-message.them, .chat-msg.them,
.chat-message.incoming, .chat-message.left, .chat-msg.left {
    background: var(--m-surface-2);
    color: var(--m-text);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--m-border);
}
.chat-input-bar {
    border-top: 1px solid var(--m-border);
    padding: 0.8rem;
    background: var(--m-surface-2);
}

/* ============================================================================
   13. BREADCRUMBS / PAGINATION
   ============================================================================ */
.breadcrumb {
    background: transparent !important;
    padding: 0.7rem 0 !important;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.breadcrumb > li + li::before {
    color: var(--m-text-3);
    padding: 0 0.65rem;
    content: "›";
    font-size: 1.1em;
    line-height: 1;
}
.breadcrumb > li > a { color: var(--m-text-3); transition: color var(--m-tr-fast); }
.breadcrumb > li > a:hover { color: var(--m-accent); }
.breadcrumb > .active { color: var(--m-text); font-weight: 600; }

/* Green theme breadcrumbs override (inline header.php uses #28a745) */
.breadcrumbs .breadcrumb li a,
.breadcrumbs .breadcrumb li a:focus,
.breadcrumbs .breadcrumb li a:active {
    color: var(--m-text-3) !important;
    text-decoration: none;
}
.breadcrumbs .breadcrumb li a:hover { color: var(--m-accent) !important; }

/* Pagination */
.pagination {
    display: inline-flex;
    gap: 4px;
    padding: 0;
}
.pagination li > a, .pagination li > span {
    border: 1px solid var(--m-border-2) !important;
    color: var(--m-text-2) !important;
    padding: 0.5rem 0.95rem !important;
    margin: 0 !important;
    border-radius: var(--m-radius-xs) !important;
    background: var(--m-surface) !important;
    transition: all var(--m-tr-fast);
    font-weight: 500;
}
.pagination li > a:hover {
    background: var(--m-surface-2) !important;
    color: #fff !important;
    border-color: var(--m-border-3) !important;
}
.pagination li.active > a, .pagination li.active > span {
    background: var(--m-accent) !important;
    color: #fff !important;
    border-color: var(--m-accent) !important;
    box-shadow: 0 4px 14px var(--m-accent-glow);
}
.pagination li.disabled > a, .pagination li.disabled > span {
    color: var(--m-text-disabled) !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* ============================================================================
   14. PROGRESS / TABS
   ============================================================================ */
.progress {
    background: var(--m-surface-2) !important;
    border-radius: var(--m-radius-full) !important;
    height: 8px !important;
    overflow: hidden;
    border: 1px solid var(--m-border);
}
.progress-bar {
    background: linear-gradient(90deg, var(--m-accent), var(--m-accent-active)) !important;
    border-radius: var(--m-radius-full) !important;
    box-shadow: 0 0 12px var(--m-accent-glow);
    transition: width var(--m-tr-slow);
}

.nav-tabs {
    border-bottom: 1px solid var(--m-border) !important;
    gap: 4px;
}
.nav-tabs > li > a, .nav-tabs .nav-link {
    border: none !important;
    color: var(--m-text-3) !important;
    padding: 0.75rem 1.1rem !important;
    margin-bottom: -1px;
    border-radius: 0 !important;
    border-bottom: 2px solid transparent !important;
    font-weight: 600;
    background: transparent !important;
    transition: all var(--m-tr-fast);
    position: relative;
}
.nav-tabs > li > a:hover, .nav-tabs .nav-link:hover {
    color: var(--m-text) !important;
    background: transparent !important;
    border-bottom-color: var(--m-border-3) !important;
}
.nav-tabs > li.active > a, .nav-tabs .nav-link.active,
.nav-tabs > li.active > a:focus, .nav-tabs .nav-link.active:focus {
    color: var(--m-accent) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--m-accent) !important;
}

.nav-pills .nav-link {
    border-radius: var(--m-radius-xs) !important;
    color: var(--m-text-2) !important;
    padding: 0.5rem 1rem !important;
    transition: all var(--m-tr-fast);
}
.nav-pills .nav-link:hover {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
}
.nav-pills .nav-link.active {
    background: var(--m-accent) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--m-accent-glow);
}

/* ============================================================================
   15. FOOTER
   ============================================================================ */
footer, .footer, #footer,
footer.green_footer, .green_footer {
    background: linear-gradient(180deg, var(--m-bg-2) 0%, #04050a 100%) !important;
    border-top: 1px solid var(--m-border);
    color: var(--m-text-2) !important;
    padding: 70px 0 24px !important;
}
footer a, .footer a, #footer a {
    color: var(--m-text-3);
    transition: color var(--m-tr-fast);
}
footer a:hover, .footer a:hover, #footer a:hover { color: var(--m-accent); }
footer h1, footer h2, footer h3, footer h4, footer h5,
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5 {
    color: #fff !important;
    font-family: var(--m-font-display);
    font-weight: 700;
    margin-bottom: 18px;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
}

.foot_widgets, .foot_widgets.lnks_foot { padding: 0 1rem; }
.foot_links li, .foot_info_list li { margin-bottom: 10px; list-style: none; }
.foot_links li a, .foot_info_list li a {
    color: var(--m-text-3) !important;
    transition: color var(--m-tr-fast);
    font-size: 0.92rem;
}
.foot_links li a:hover, .foot_info_list li a:hover { color: var(--m-accent) !important; }
.last_social a {
    color: var(--m-text-3) !important;
    transition: color var(--m-tr-fast);
}
.last_social a:hover { color: var(--m-accent) !important; }

footer .footer_form input { background: var(--m-surface-2) !important; }

/* ============================================================================
   16. SLIDER (rs-plugin / revolution slider / owl carousel)
   ============================================================================ */
.tp-bullets .bullet,
.swiper-pagination-bullet,
.owl-dots .owl-dot span {
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--m-radius-full) !important;
    transition: all var(--m-tr);
}
.tp-bullets .bullet.selected,
.swiper-pagination-bullet-active,
.owl-dots .owl-dot.active span {
    background: var(--m-accent) !important;
    box-shadow: 0 0 14px var(--m-accent-glow);
}

.owl-prev, .owl-next {
    background: var(--m-surface-3) !important;
    color: var(--m-text-2) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-full) !important;
    width: 40px; height: 40px;
    line-height: 40px !important;
    transition: all var(--m-tr-fast);
}
.owl-prev:hover, .owl-next:hover {
    background: var(--m-accent) !important;
    color: #fff !important;
    border-color: var(--m-accent) !important;
    box-shadow: 0 6px 18px var(--m-accent-glow);
}

/* ============================================================================
   17. UTILITY HELPERS
   ============================================================================ */
.text-success, .text-green { color: var(--m-success) !important; }
.text-danger, .text-red    { color: var(--m-danger)  !important; }
.text-warning, .text-yellow{ color: var(--m-warning) !important; }
.text-info, .text-blue     { color: var(--m-info)    !important; }
.text-muted, .text-secondary { color: var(--m-text-3) !important; }
.text-light                { color: var(--m-text) !important; }
.text-white                { color: #fff !important; }

.bg-success { background: var(--m-success) !important; color: #fff !important; }
.bg-danger  { background: var(--m-danger)  !important; color: #fff !important; }
.bg-warning { background: var(--m-warning) !important; color: #1a1d27 !important; }
.bg-info    { background: var(--m-info)    !important; color: #fff !important; }
.bg-light   { background: var(--m-surface) !important; color: var(--m-text) !important; }
.bg-dark    { background: var(--m-bg) !important; color: var(--m-text) !important; }
.bg-white   { background: var(--m-surface) !important; color: var(--m-text) !important; }

.shadow-sm { box-shadow: var(--m-shadow-sm) !important; }
.shadow    { box-shadow: var(--m-shadow)    !important; }
.shadow-lg { box-shadow: var(--m-shadow-lg) !important; }

.rounded      { border-radius: var(--m-radius)      !important; }
.rounded-sm   { border-radius: var(--m-radius-sm)   !important; }
.rounded-lg   { border-radius: var(--m-radius-lg)   !important; }
.rounded-xl   { border-radius: var(--m-radius-xl)   !important; }
.rounded-pill { border-radius: var(--m-radius-full) !important; }

/* ============================================================================
   18. AUTH PAGES (login, register) — premium glass card
   ============================================================================
   IMPORTANT v11.11: .green_login is NOT a page — it's a Bootstrap MODAL
   wrapper (see application/views/template/layouts/footer.php line 20+).
   Styling it as a 460px-wide centered card constrains the modal-dialog
   inside it and shifts the modal off-center. Instead:
     • .green_login wrapper — stays a fully transparent pass-through.
     • .green_login .modal-content — carries the glass-card visuals.
     • .green_login .modal-dialog — keeps Bootstrap auto-centering. */
.login-box, .register-box, .auth-card, .login-page-wrap {
    max-width: 460px;
    margin: 4rem auto;
    background: rgba(20, 22, 30, 0.7) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow-lg) !important;
    padding: 2.4rem 2.2rem !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}
/* RESET the green_login wrapper — no width/margin/padding/bg so the
   modal-dialog inside centers correctly against the viewport. */
.green_login,
.green_login.green_register_fm {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* The actual modal frame inside the wrapper gets the glass-card styling */
.green_login .modal-content,
.bootbox .modal-content,
.modal .modal-content {
    background: rgba(20, 22, 30, 0.85) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow-lg) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    color: var(--m-text) !important;
    overflow: hidden;
}
/* v11.14: Bootbox dynamic modals — same glass styling, light text */
.bootbox .modal-header {
    background: rgba(15, 17, 24, 0.6) !important;
    border-bottom: 1px solid var(--m-border) !important;
    color: var(--m-text) !important;
    padding: 1rem 1.4rem !important;
}
.bootbox .modal-title {
    color: var(--m-text) !important;
    font-weight: 700 !important;
    font-family: var(--m-font-display);
}
.bootbox .modal-body {
    color: var(--m-text-1) !important;
    background: transparent !important;
    padding: 1.4rem !important;
    font-size: 0.97rem;
    line-height: 1.6;
}
.bootbox .modal-body b,
.bootbox .modal-body strong {
    color: var(--m-accent-hover) !important;
}
.bootbox .modal-footer {
    background: rgba(15, 17, 24, 0.5) !important;
    border-top: 1px solid var(--m-border) !important;
    padding: 0.9rem 1.4rem !important;
}
.bootbox .close,
.bootbox .modal-header .close {
    color: var(--m-text-2) !important;
    opacity: 0.9 !important;
    text-shadow: none !important;
    font-size: 1.6rem !important;
}
.bootbox .close:hover {
    color: var(--m-text) !important;
    opacity: 1 !important;
}

/* v11.14: Pairing Code box (Telegram.php line 67 injects inline
   <div style="background: #ddd; ..."><h3>514769</h3>Pairing Code</div>).
   The light-grey background renders unreadable on dark theme. Force it
   to a dark surface with light text + gold accent on the code itself. */
.bootbox .modal-body div[style*="#ddd"],
.bootbox .modal-body div[style*="background: #ddd"],
.modal-body div[style*="background: #ddd"],
.modal-body div[style*="#dadada"] {
    background: rgba(20, 22, 30, 0.85) !important;
    border: 1px solid var(--m-gold-ring) !important;
    border-radius: var(--m-radius) !important;
    box-shadow:
        0 0 0 1px var(--m-gold-ring),
        0 4px 14px var(--m-gold-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: var(--m-text) !important;
    padding: 1.1rem 1.4rem !important;
    margin: 1rem auto !important;
    max-width: 360px !important;
    width: auto !important;
}
.bootbox .modal-body div[style*="#ddd"] h3,
.modal-body div[style*="background: #ddd"] h3 {
    color: var(--m-gold-hi) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    font-family: var(--m-font-display);
    margin: 0 0 0.35rem 0 !important;
    font-size: 1.9rem !important;
}
/* v11.14: UNIVERSAL HARD modal centering via absolute positioning.
   Applies to ALL Bootstrap modals — login, register, bootbox dynamic
   alerts (Connect Telegram), and any other .modal we render. The plain
   `margin: 0 auto` approach kept failing because of body padding-right
   that Bootstrap adds on .modal-open. Forcing the modal container to
   fill the viewport (left:0/right:0/width:100%) and the modal-dialog to
   left:50% + translateX(-50%) guarantees horizontal centering against
   the viewport center, independent of any parent padding/transform. */
.modal,
.modal.fade,
.modal.show,
.modal.in,
.green_login .modal,
#login_form.modal,
#register-form.modal,
.bootbox.modal {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
.modal-dialog,
.modal.fade .modal-dialog,
.modal.show .modal-dialog,
.modal.in .modal-dialog,
.green_login .modal-dialog,
#login_form .modal-dialog,
#register-form .modal-dialog,
.bootbox .modal-dialog {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    max-width: 500px !important;
    width: calc(100% - 2rem) !important;
    margin: 1.75rem 0 !important;
    float: none !important;
}
/* Kill any padding-right Bootstrap adds to <body> when modal is open —
   it shifts everything left and breaks our centering */
body.modal-open,
body.modal-open[style] {
    padding-right: 0 !important;
    padding-left: 0 !important;
    overflow: visible !important;
}
@media (min-width: 576px) {
    .green_login .modal-dialog,
    #login_form .modal-dialog,
    #register-form .modal-dialog {
        max-width: 500px !important;
    }
}
@media (min-width: 768px) {
    .green_login .modal-dialog,
    #login_form .modal-dialog,
    #register-form .modal-dialog {
        max-width: 540px !important;
    }
}
@media (min-width: 992px) {
    .green_login .modal-dialog,
    #login_form .modal-dialog,
    #register-form .modal-dialog {
        max-width: 600px !important;
    }
    /* Register form is wider (more fields) */
    .green_login.green_register_fm .modal-dialog,
    #register-form .modal-dialog {
        max-width: 720px !important;
    }
}
.login-box .login-logo, .login-logo {
    text-align: center;
    margin-bottom: 1.4rem;
    font-weight: 700;
    color: var(--m-text);
    font-family: var(--m-font-display);
}
.login-box .form-group,
.auth-card .form-group,
.green_login .form-group { margin-bottom: 1rem; }
.green_login .form-control, .green_login input { background: var(--m-surface) !important; }

/* v11.10: LOGIN FORM icons — the green theme renders icons as <img class="field_icn">
   ABSOLUTELY positioned over the input (left:20px in green main.css L1281), but
   it does NOT pad the input, so placeholder text overlaps the icon.
   Solution: pad inputs by 52px (room for icon) and shrink the icon to ~22px.
   We use `body` prefix to win over ALL green theme rules without resorting to
   nuclear options. Applies to BOTH the modal login and any inline login form. */
body .green_login .input-field,
body .login-box .input-field,
body #login_form .input-field,
body #login_form .form-group {
    position: relative !important;
}
body .green_login .input-field input,
body .green_login .input-field .form-control,
body .green_login .form-group.input-field input,
body .green_login .form-group.input-field .form-control,
body #login_form .input-field input,
body #login_form .input-field .form-control,
body #login_form input.form-control[type="text"],
body #login_form input.form-control[type="password"],
body #login_form input.form-control[type="email"] {
    padding-left: 56px !important;       /* room for icon + breathing space */
    padding-right: 16px !important;
    height: 52px !important;
    line-height: 1.4 !important;
    font-size: 0.95rem !important;
}
body .green_login .input-field .field_icn,
body .green_login .form-group .field_icn,
body #login_form .field_icn,
body #login_form img.field_icn {
    position: absolute !important;
    top: 50% !important;
    left: 18px !important;
    right: auto !important;              /* override any green rule */
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    filter: brightness(1.3) saturate(0.6) !important;   /* slightly desaturate the green */
    z-index: 3 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Font-Awesome icons (some login layouts use <i> instead of <img>) */
body .green_login .input-field i.fa-user,
body .green_login .input-field i.fa-lock,
body .green_login .input-field i.fa-envelope,
body .green_login .input-field > i:first-child,
body #login_form i.fa-user,
body #login_form i.fa-lock {
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    color: var(--m-accent) !important;
    font-size: 16px !important;
    pointer-events: none !important;
    z-index: 3 !important;
}
.green_login .submit-btn {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 0.85rem 1.4rem !important;
    border-radius: var(--m-radius-sm) !important;
    font-weight: 600;
    box-shadow: 0 6px 20px var(--m-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    width: 100%;
    transition: all var(--m-tr-fast);
}
.green_login .submit-btn:hover {
    background: linear-gradient(135deg, var(--m-accent-hover), var(--m-accent)) !important;
    transform: translateY(-1px);
}

/* ============================================================================
   19. ECOMMERCE (cart, search, products, checkout)
   ============================================================================ */
.cart_buttons.dropdown:hover .dropdown-menu,
.cart_buttons .dropdown-menu,
.search_button.dropdown:hover .dropdown-menu,
.search_button .dropdown-menu {
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-lg) !important;
    padding: 0.5rem !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 4px solid var(--m-accent) !important;
}
.cart_buttons.dropdown:hover .dropdown-menu li,
.search_button.dropdown:hover .dropdown-menu li {
    border-bottom: 1px solid var(--m-border) !important;
    padding-bottom: 0.6rem !important;
    margin-bottom: 0.6rem !important;
}
.cart_buttons.dropdown:hover .dropdown-menu li:last-of-type,
.search_button.dropdown:hover .dropdown-menu li:last-of-type {
    border-bottom: 0 !important;
}
.cart_buttons.dropdown:hover .dropdown-menu li a,
.search_button.dropdown:hover .dropdown-menu li a {
    color: var(--m-text-2) !important;
    transition: color var(--m-tr-fast);
}
.cart_buttons.dropdown:hover .dropdown-menu li a:hover,
.search_button.dropdown:hover .dropdown-menu li a:hover {
    color: var(--m-accent) !important;
}
.cart_buttons .price_box h5,
.search_button .price_box h5 {
    color: var(--m-accent) !important;
    font-weight: 700;
}

/* Cart icon button in navbar */
.add-cart-btn {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    color: #fff !important;
    padding: 8px 12px !important;
    border-radius: var(--m-radius-full);
    position: relative;
    box-shadow: 0 4px 14px var(--m-accent-glow);
    transition: all var(--m-tr-fast);
}
.add-cart-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px var(--m-accent-glow);
}
.cart-add {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.7rem !important;
    background: var(--m-danger) !important;
    color: #fff !important;
    padding: 2px 7px !important;
    border-radius: var(--m-radius-full);
    border: 2px solid var(--m-bg);
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
}

.cart-item, .basket-item {
    border-bottom: 1px solid var(--m-border);
    padding: 0.85rem;
}
.cart-item:last-child, .basket-item:last-child { border-bottom: 0; }

.product-price, .price { color: var(--m-accent); font-weight: 700; }
.product-price-old, .price-old {
    color: var(--m-text-4);
    text-decoration: line-through;
    font-weight: 500;
}

/* ============================================================================
   20. MOBILE OVERLAY MENU — #green_mobile_nav  [CRITICAL — preserved from v10]
   ============================================================================
   The mobile fullscreen menu must:
     - sit above EVERYTHING (sliders, chat widgets, sticky elements)
     - have opaque background (never see-through)
     - cover entire viewport height incl. mobile browser chrome (100dvh)
     - lock page scroll when open (.modern-menu-open on html)
     - allow pointer events on its content
   See v10 sections 25.2, 28.1, 28.2 for the original rules. */

#green_mobile_nav,
#green_mobile_nav.overlay {
    /* CRITICAL: do NOT set width here — green theme JS uses inline
       style.width="0%"|"100%" to open/close the overlay. If we !important
       width:100%, the menu would be permanently stuck open. Default width
       from green CSS is "width: 0;" (closed). */
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    position: fixed !important;
    z-index: 2147483600 !important;
    background-color: rgba(7, 8, 12, 0.985) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    overflow-y: auto;
    transition: width var(--m-tr);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #green_mobile_nav,
    #green_mobile_nav.overlay {
        background-color: rgba(7, 8, 12, 1) !important;
    }
}

/* Generic .overlay (sweetalert, lightbox) — stay below modal layer */
.overlay:not(#green_mobile_nav) { z-index: 1050 !important; }

/* Pointer events */
#green_mobile_nav,
#green_mobile_nav * { pointer-events: auto !important; }
#green_mobile_nav .overlay-content {
    pointer-events: auto !important;
    position: relative;
    padding-top: 18vh;
    z-index: 2147483601 !important;
}
#green_mobile_nav a,
#green_mobile_nav .closebtn {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Menu links */
#green_mobile_nav a,
.overlay a {
    color: #fff !important;
    font-size: 22px !important;
    padding: 14px !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    display: block;
    text-align: center;
    transition: all var(--m-tr-fast);
    border-radius: var(--m-radius-sm);
    margin: 4px 16px;
}
#green_mobile_nav a:hover,
#green_mobile_nav a:focus,
.overlay a:hover,
.overlay a:focus {
    color: var(--m-accent-hover) !important;
    background: rgba(255, 255, 255, 0.05);
    text-shadow: 0 0 14px var(--m-accent-glow);
}

/* Close button */
#green_mobile_nav .closebtn,
.overlay .closebtn {
    position: fixed !important;
    top: 18px !important;
    right: 22px !important;
    color: #fff !important;
    font-size: 36px !important;
    z-index: 2147483602 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    width: 48px;
    height: 48px;
    line-height: 44px !important;
    text-align: center;
    border-radius: var(--m-radius-full);
    transition: all var(--m-tr-fast);
    margin: 0 !important;
    padding: 0 !important;
}
#green_mobile_nav .closebtn:hover,
.overlay .closebtn:hover {
    background: var(--m-accent-soft) !important;
    color: var(--m-accent-hover) !important;
    transform: rotate(90deg);
}

/* Lock page scroll while mobile menu is open */
html.modern-menu-open,
body.modern-menu-open,
html.modern-menu-open body {
    overflow: hidden !important;
}

/* v11.12: Mobile hamburger icon + FAR-RIGHT alignment.
   HTML structure in @application/views/template/layouts/header.php:690-740 is:
     <div class="mobile_nav">
       <div class="mobile_head">
         <div class="mobile_logo"><img></div>      ← LEFT
         <div class="float-right">                  ← RIGHT (hamburger + dropdowns)
           <span class="float-left" onclick="openNav()"><i class="fa fa-bars"></i></span>
           <!-- + multi-currency dropdown -->
         </div>
       </div>
       <div id="green_mobile_nav" class="overlay">...</div>
     </div>
   The green CSS already sets `.mobile_head { display: flex; justify-content:
   space-between }` but only on certain breakpoints. We force it always so
   the hamburger stays glued to the far right, regardless of viewport. */
.mobile_nav,
.green_header .mobile_nav {
    width: 100% !important;
}
.mobile_nav .mobile_head,
.green_header .mobile_nav .mobile_head {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 16px !important;
}
.mobile_nav .mobile_head .mobile_logo {
    flex: 0 0 auto !important;
    margin-right: auto !important;     /* push EVERYTHING else to the right */
}
.mobile_nav .mobile_head > .float-right,
.mobile_nav .mobile_head .float-right {
    float: none !important;
    margin-left: auto !important;      /* anchor to far right */
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
}
.mobile_nav .mobile_head .float-right > span,
.mobile_nav .mobile_head .float-right > span.float-left {
    float: none !important;
    display: inline-flex !important;
    align-items: center !important;
}
.mobile_nav i.fas.fa-bars,
.mobile_nav i.fa-bars,
span.float-left i.fa-bars {
    color: #fff !important;
    font-size: 28px !important;
}

/* ============================================================================
   21. RESPONSIVE — mobile-first tweaks
   ============================================================================ */
@media (max-width: 1199px) {
    .navbar-nav .nav-link,
    .navbar-nav > li > a { padding: 0.6rem 0.8rem !important; }
}

@media (max-width: 991px) {
    h1, .h1 { font-size: 1.85rem; line-height: 1.22; }
    h2, .h2 { font-size: 1.45rem; }
    h3, .h3 { font-size: 1.2rem; }

    .modal-body { padding: 1.2rem !important; }
    .card-body, .panel-body { padding: 1.1rem !important; }
    .btn-cta { padding: 0.85rem 1.5rem !important; font-size: 1rem !important; }

    #sidebar, .sidebar { width: 280px; }

    .table thead th, .table tbody td,
    table thead th, table tbody td {
        padding: 0.7rem 0.8rem !important;
        font-size: 0.88rem;
    }

    html[data-modern-hero="on"] section.green_banner,
    section.green_banner {
        background-size: cover !important;
        background-position: center center !important;
    }
}

@media (max-width: 767px) {
    body { font-size: 15px; }
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.25rem; }
    .navbar { padding: 0.6rem 0.85rem; }
    .navbar-brand img { max-height: 38px; }

    /* No iOS zoom — font-size 16px on inputs */
    .form-control,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], select, textarea {
        padding: 0.65rem 0.85rem !important;
        font-size: 16px !important;
    }

    .btn { padding: 0.55rem 1.05rem; font-size: 0.92rem; }
    .btn-lg { padding: 0.8rem 1.4rem; font-size: 1rem; }

    .login-box, .auth-card {
        margin: 1.5rem 0.85rem;
        padding: 1.7rem 1.3rem !important;
    }
    /* v11.12: For modals on small screens — keep absolute centering pattern */
    .green_login .modal-dialog,
    #login_form .modal-dialog,
    #register-form .modal-dialog {
        max-width: calc(100% - 1.5rem) !important;
        width: calc(100% - 1.5rem) !important;
        margin: 1rem 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    .modal-content { border-radius: var(--m-radius) !important; }
    .modal-body { padding: 1.05rem !important; }
    .modal-dialog { margin: 0.5rem; }

    /* Hero on phones — contain so it fits whole */
    html[data-modern-hero="on"] section.green_banner,
    section.green_banner {
        background-image: var(--m-hero-image) !important;
        background-size: contain !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: var(--m-bg) !important;
        min-height: 56vh !important;
        max-height: none !important;
        padding: 24px 12px !important;
    }

    .table-responsive { -webkit-overflow-scrolling: touch; }

    .shop-product-area .item, .product-card, .service-card { margin-bottom: 1rem; }

    .chat-message, .chat-msg, .chat-item { max-width: 92%; }

    footer, .footer, #footer {
        padding: 40px 0 16px !important;
        text-align: center;
    }
    .foot_widgets { margin-bottom: 24px; }

    .dropdown-menu { min-width: 180px; }

    body::before { display: none; }
}

@media (max-width: 575px) {
    h1, .h1 { font-size: 1.45rem; }
    .container, .container-fluid { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 480px) {
    .card-header, .panel-heading { padding: 0.85rem 1rem !important; font-size: 0.95rem; }
    .card-body, .panel-body { padding: 0.95rem !important; }
    .btn { padding: 0.55rem 1rem; }
    .navbar-toggler { padding: 0.4rem 0.55rem !important; }

    html[data-modern-hero="on"] section.green_banner,
    section.green_banner {
        min-height: 48vh !important;
        padding: 16px 10px !important;
    }
}

@supports (padding: max(0px)) {
    .overlay, .modal-content {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* ============================================================================
   22. ANIMATIONS
   ============================================================================ */
@keyframes m-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card, .panel, .alert, .modal-content { animation: m-fade-in 320ms ease-out; }

@keyframes m-spin { to { transform: rotate(360deg); } }
.m-spin, .loading-spinner { animation: m-spin 0.85s linear infinite; }

@keyframes m-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--m-accent-glow); }
    50%      { box-shadow: 0 0 0 8px rgba(91, 140, 255, 0); }
}
.btn-cta:focus { animation: m-pulse-glow 1.4s ease-in-out infinite; }

@keyframes m-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

@keyframes m-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes m-slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   23. AGGRESSIVE GREEN OVERRIDES — kill every green pixel
   ============================================================================ */
body.green_temp, body.body {
    background: var(--m-bg) !important;
    color: var(--m-text) !important;
}

/* All green classes — neutralise to dark */
.green_header,
.green_banner_content,
.green_section,
.green_block,
.green_card,
.green_box,
[class*="green_"] {
    background-color: transparent !important;
    color: var(--m-text-2) !important;
}
section.green_banner * { color: var(--m-text) !important; }

/* Generic green hex / inline overrides */
[style*="#5cb65c"], [style*="#28a745"], [style*="#92d050"],
[style*="#7cb342"], [style*="#4caf50"], [style*="#388e3c"],
[style*="#66bb6a"], [style*="#43a047"] {
    color: inherit !important;
}

/* "ORDER NOW" / accent navbar item — was green text */
.nav-link.order_now,
.navbar-nav .order_now > a,
.nav-item.order_now > a,
li.order_now > a, a.order_now {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    color: #fff !important;
    padding: 0.5rem 1.1rem !important;
    border-radius: var(--m-radius-sm) !important;
    font-weight: 600;
    box-shadow: 0 4px 14px var(--m-accent-glow);
}

/* CTA / "Order Now" green button class */
.btn.green, .btn-green, .green-btn,
button.green, a.green, a.btn.green {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 22px var(--m-accent-glow) !important;
    border-radius: var(--m-radius-sm) !important;
    padding: 0.7rem 1.4rem !important;
}
.btn.green:hover, .btn-green:hover, .green-btn:hover,
button.green:hover, a.green:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 30px var(--m-accent-glow) !important;
}

/* "We Unlock All Major Brands" / general sections background */
section, .section, .content-section { background: transparent !important; }
section h1, section h2, section h3,
.section h1, .section h2, .section h3 { color: var(--m-text) !important; }

/* Service cards on home */
.service-block, .service-tile, .service_card, .vprod_head,
.brand-card, .item-block {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow-sm);
    padding: 24px;
    transition: all var(--m-tr);
}
.service-block:hover, .service-tile:hover, .service_card:hover, .vprod_head:hover,
.brand-card:hover, .item-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--m-shadow), 0 0 0 1px var(--m-accent-soft);
    border-color: var(--m-accent-soft);
}

/* Page sections with white inline backgrounds — neutralise to surface */
.bg-light, .light-bg, .bg-gray, .bg-grey,
[style*="background:#fff"], [style*="background: #fff"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background:#f"], [style*="background-color:#f"] {
    background: var(--m-surface) !important;
    color: var(--m-text) !important;
}

/* Order page tabs */
.tabs-nav li, .tab-pane, .tabs li {
    background: var(--m-surface) !important;
    color: var(--m-text-2) !important;
}
.tabs-nav li.active, .tabs li.active {
    background: var(--m-accent) !important;
    color: #fff !important;
}

/* Countdown / promo strip */
.countdown, .timer, .promo-strip {
    background: var(--m-surface-2) !important;
    color: var(--m-text) !important;
    border: 1px solid var(--m-border);
    border-radius: var(--m-radius);
}

/* Trust badges row */
.trust-badges, .feature-badges, .badge-row {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius-lg) !important;
    padding: 16px 20px;
    margin: 24px 0;
}
.trust-badges *, .feature-badges *, .badge-row * { color: var(--m-text-2) !important; }

/* Universal class-based green overrides */
*[class*="green-text"], *[class*="text-green"] { color: var(--m-accent) !important; }
*[class*="green-bg"], *[class*="bg-green"] {
    background: var(--m-accent) !important;
    color: #fff !important;
}
[bgcolor="#5cb65c"], [bgcolor="#28a745"], [color="#5cb65c"], [color="#28a745"] {
    background-color: var(--m-accent) !important;
    color: #fff !important;
}

/* Logo tagline / "WORLDWIDE" strip — was green */
.unlock-lock-tagline, .worldwide-text, .green_banner .tagline {
    color: var(--m-accent) !important;
    font-weight: 600;
    letter-spacing: 0.08em;
}

/* Currency strip / c_menu list */
ul.c_menu li a { color: var(--m-text-2) !important; }
ul.c_menu li a:hover { color: var(--m-accent) !important; }

/* Register/Login navbar buttons */
.navbar-nav .btn-register, .navbar-nav .btn-login,
a[href*="register"].btn, a[href*="login"].btn { margin-left: 4px; }
a[href*="register"].btn-primary, a[href*="login"].btn-primary {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
}

/* ============================================================================
   24. BRAND LOGOS SECTION (white cards, natural colors)  [v10 §25.4 — 1:1]
   ============================================================================ */
section.brands {
    background: linear-gradient(180deg, var(--m-bg) 0%, var(--m-bg-2) 100%) !important;
    border-top: 1px solid var(--m-border);
    border-bottom: 1px solid var(--m-border);
    padding: 80px 0;
}
@media (max-width: 991px) { section.brands { padding: 56px 0; } }
@media (max-width: 767px) { section.brands { padding: 40px 0 !important; } }

section.brands h1, section.brands h2, section.brands .Big {
    font-family: var(--m-font-display) !important;
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    color: var(--m-text) !important;
    text-align: center;
    margin: 0 0 50px !important;
    letter-spacing: -0.025em;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 0%, var(--m-accent-hover) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
@media (max-width: 991px) {
    section.brands h1, section.brands h2 {
        font-size: 1.6rem !important;
        margin-bottom: 30px !important;
    }
}

/* White card backdrop for brand logos */
section.brands .owl-carousel .owl-item,
section.brands .owl-carousel .owl-item > div,
section.brands .owl-carousel .owl-item .item {
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    padding: 16px 20px !important;
    height: auto !important;
    min-height: 88px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all var(--m-tr);
    box-shadow: var(--m-shadow-sm);
}
section.brands .owl-carousel .owl-item > div:hover,
section.brands .owl-carousel .owl-item:hover > div {
    background: #ffffff !important;
    border-color: var(--m-accent-soft) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--m-accent);
    transform: translateY(-3px);
}

/* Brand images — natural colors (no monochrome filter from v3) */
section.brands .owl-carousel img,
section.brands img.img-responsive,
section.brands .owl-item img {
    filter: none !important;
    -webkit-filter: none !important;
    max-height: 56px !important;
    max-width: 100%;
    width: auto !important;
    height: auto;
    margin: 0 auto !important;
    object-fit: contain;
    display: block;
    opacity: 1 !important;
}
@media (max-width: 767px) {
    section.brands .owl-carousel .owl-item > div { padding: 12px 14px !important; min-height: 70px; }
    section.brands .owl-carousel img,
    section.brands img.img-responsive { max-height: 44px !important; }
}

/* Owl dots inside brands section */
section.brands .owl-dots { margin-top: 22px !important; text-align: center; }
section.brands .owl-dots .owl-dot { display: inline-block; margin: 0 4px; }
section.brands .owl-dots .owl-dot span {
    width: 8px; height: 8px;
    background: rgba(255, 255, 255, 0.20) !important;
    border-radius: var(--m-radius-full);
    display: block;
    transition: all var(--m-tr);
}
section.brands .owl-dots .owl-dot.active span,
section.brands .owl-dots .owl-dot:hover span {
    background: var(--m-accent) !important;
    width: 24px;
    box-shadow: 0 0 12px var(--m-accent-glow);
}

/* ============================================================================
   25. FLOAT BUTTONS (Telegram + Facebook side dock)  [v10 §24.6 — 1:1]
   ============================================================================ */
.float_btns {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.float_btns ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.float_btns li { list-style: none; }
.float_btns a,
.float_btns a.soundcloud,
.float_btns a.c-facebook {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 12px !important;
    background: rgba(11, 13, 20, 0.78) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-full);
    color: #fff !important;
    box-shadow: var(--m-shadow), 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: all var(--m-tr);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 500;
    width: 44px;
    overflow: hidden;
    white-space: nowrap;
}
.float_btns a span {
    color: #fff !important;
    opacity: 0;
    transition: opacity var(--m-tr-fast);
    font-weight: 600;
}
.float_btns a:hover {
    width: auto;
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    border-color: var(--m-accent) !important;
    box-shadow: 0 14px 32px var(--m-accent-glow);
    padding-right: 16px !important;
    transform: translateX(2px);
}
.float_btns a:hover span { opacity: 1; }
.float_btns a img {
    width: 22px; height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
@media (max-width: 767px) {
    .float_btns { left: 10px; gap: 8px; }
    .float_btns a,
    .float_btns a.soundcloud,
    .float_btns a.c-facebook {
        width: 40px;
        padding: 8px 12px 8px 10px !important;
    }
    .float_btns a img { width: 20px; height: 20px; }
}
@media (max-width: 480px) {
    .float_btns { display: none; }   /* hide on tiny phones */
}

/* Side floating social buttons (alternate selectors) */
a.soundcloud, a.c-facebook,
.social-side a,
.floating-social a,
.floating-social .soundcloud,
.floating-social .c-facebook {
    background: linear-gradient(135deg, var(--m-surface-2), var(--m-surface)) !important;
    border: 1px solid var(--m-border-2) !important;
    color: var(--m-text) !important;
    box-shadow: var(--m-shadow);
    transition: all var(--m-tr);
}
a.soundcloud:hover, a.c-facebook:hover,
.social-side a:hover, .floating-social a:hover {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    border-color: var(--m-accent) !important;
    box-shadow: var(--m-shadow-glow);
    transform: translateX(2px);
}
a.soundcloud span, a.c-facebook span { color: #fff !important; }

/* ============================================================================
   26. MARQUEE KILL (announcement bar removed from modern)  [v10 §25.1]
   ============================================================================ */
#marqueeText,
.marqueewrap,
marquee,
.top-marquee,
.scrolling-text,
[id*="marquee"],
[class*="marquee"] {
    display: none !important;
}

/* ============================================================================
   27. FLOATING CHAT WIDGET (GetButton bottom-right)  [v10 §24.7]
   ============================================================================ */
[id*="getbutton"], #ymDivChatRow, .lhn-button-wrapper {
    z-index: 80 !important;
}
.chat-bubble, .floating-chat-button, [id*="getbutton"] {
    box-shadow: 0 12px 30px var(--m-accent-glow) !important;
}

/* Search button / cart button color in navbar */
.search_button > a, .cart_buttons > a { color: var(--m-text-2) !important; }
.search_button > a:hover, .cart_buttons > a:hover { color: var(--m-accent) !important; }

/* ============================================================================
   28. BODY OVERFLOW + POINTER EVENTS  [CRITICAL — preserved from v10 §28.3/28.4]
   ============================================================================
   The green template puts inline `style="overflow: hidden"` on <body>, which
   kills page scrolling. Force-override at every selector specificity. */
html, body, body[style], body.green_temp[style] {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}
/* When mobile menu is closed — body scrolls; when open — body locks */
html:not(.modern-menu-open) body {
    overflow: auto !important;
    overflow-x: hidden !important;
}
html.modern-menu-open,
html.modern-menu-open body {
    overflow: hidden !important;
}

/* iOS bounce scroll smoothness */
html, body { -webkit-overflow-scrolling: touch; }

/* Pointer events — ensure clickable */
.body, .green_temp, body.green_temp { pointer-events: auto !important; }
body::before, body::after { pointer-events: none !important; }

/* Unified cursor on interactive elements */
a, button, [role="button"], .btn,
input[type="submit"], input[type="button"],
.nav-link, .navbar-nav li > a {
    cursor: pointer !important;
}

/* ============================================================================
   29. MODAL STACK Z-INDEX  [CRITICAL — preserved from v10 §29]
   ============================================================================
   Mobile overlay sits at 2147483600. Backdrop must be > overlay but < modal,
   modal must be highest. Both stay < MAX_INT (2147483647) to avoid clamping.
   Bootstrap appends backdrop AFTER modal in DOM, so equal z-index would put
   backdrop above modal — we keep them strictly different. */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.in {
    z-index: 2147483601 !important;
}
.modal,
.modal.show,
.modal.in {
    z-index: 2147483602 !important;
}
/* When a Bootstrap modal is open — hide mobile overlay (defensive) */
body.modal-open #green_mobile_nav {
    display: none !important;
}

/* ============================================================================
   29.5. GOOGLE reCAPTCHA Z-INDEX FORCE  [v11.11]
   ============================================================================
   When user clicks the captcha checkbox inside a register/login modal, Google
   injects the challenge popup as <div style="z-index: 2000000000"> directly
   under <body>. Our .modal-backdrop has backdrop-filter blur which creates a
   new stacking context, and the modal stack (z-index 99999999 set in
   header.php) sits above that backdrop. The captcha popup, despite its huge
   inline z-index, gets visually trapped beneath the modal because of how the
   stacking contexts compose. Force the captcha wrapper + iframe to the
   maximum signed 32-bit z-index so it always floats above all overlays. */
body > div[style*="z-index: 2000000000"],
body > div[style*="z-index:2000000000"],
body > div[style*="z-index: 2147483647"],
body > div[style*="z-index:2147483647"] {
    z-index: 2147483647 !important;
}
iframe[src*="google.com/recaptcha"],
iframe[src*="recaptcha/api2/bframe"],
iframe[title="recaptcha challenge expires in two minutes"],
iframe[title*="recaptcha challenge"] {
    z-index: 2147483647 !important;
}
/* The challenge popup's nearest div ancestor (Google wraps the iframe in
   one or two parent divs). Ensure they all stay on top. */
.grecaptcha-badge,
.g-recaptcha-bubble-arrow {
    z-index: 2147483647 !important;
}

/* ============================================================================
   30. PROCESS LOADER DEMOTION  [CRITICAL — preserved from v10 §30]
   ============================================================================
   site_assets/css/cust_style.css uses z-index: 999999999 for .process_loader.
   If it hangs visible after a stalled AJAX request, it sits ABOVE everything
   including modals. Force it below modal stack. */
.process_loader,
#processs_loader,
#page_loader {
    z-index: 2147483600 !important;
}

/* ============================================================================
   31. TEXT CONTRAST ON DARK SURFACES  [extended from v10 §31]
   ============================================================================
   Force light fill on near-black text rendered inline by chart libs or
   inherited from green theme defaults. */

/* Bootstrap muted helpers — slightly lighter on dark */
.text-muted,
.text-secondary,
small.text-muted,
.form-text.text-muted {
    color: var(--m-text-3) !important;
}

/* Chart container contents — light fill defensively */
.chart-container,
.dashboard-chart-container,
.chart {
    color: var(--m-text) !important;
}
.chart-container *,
.dashboard-chart-container *,
.chart * {
    color: inherit;
}

/* v11.5: UNIVERSAL chart text fix.
   ECharts renders donut labels as <text fill="rgb(14,14,14)" ...> OR
   <text style="fill: rgb(14, 14, 14); ...">.  The v11.4 attribute-substring
   selector only matched HEX/rgb(0,0,0) variants and missed rgb(14,14,14).
   Solution: force ALL <text> inside chart containers to light fill, AND
   also override fill attribute via [fill] selector. Category-color arcs
   (the colored ring segments) are <path>, not <text>, so they keep colors. */
.chart-container svg text,
.chart-container text,
.dashboard-chart-container svg text,
.dashboard-chart-container text,
.chart svg text,
.chart text {
    fill: #e6eaf2 !important;
}
.chart-container svg text[fill],
.chart-container text[fill],
.dashboard-chart-container svg text[fill],
.dashboard-chart-container text[fill] {
    fill: #e6eaf2 !important;
}
/* Keep category-color arcs intact (paths/circles render the green/orange/red
   ring; we only force TEXT to light). Tooltip text on chart also stays light. */
.echarts-tooltip, .ec-tooltip { color: var(--m-text-1) !important; }

/* Stat numbers in cards */
.card h1, .card h2, .card h3, .card h4, .card h5,
.card .h1, .card .h2, .card .h3, .card .h4, .card .h5,
.dashboard-chart-container h1,
.dashboard-chart-container h2,
.dashboard-chart-container h3,
.dashboard-chart-container h4,
.dashboard-chart-container h5,
.dashboard-chart-container h6 {
    color: var(--m-text) !important;
}

/* Inline dark color anti-pattern (set near-black text) */
[style*="color:#000"], [style*="color: #000"],
[style*="color:#111"], [style*="color: #111"],
[style*="color:#0e0e0e"], [style*="color: #0e0e0e"],
[style*="color:#0B0B0B"], [style*="color: #0B0B0B"],
[style*="color:rgb(0, 0, 0)"], [style*="color: rgb(0, 0, 0)"] {
    color: #e6eaf2 !important;
}

/* Inline white-on-white text anti-pattern */
[style*="color:#fff"]:not(button):not(a),
[style*="color: #fff"]:not(button):not(a) {
    color: var(--m-text) !important;
}

/* Dropdown items on dark cards stay readable */
.dropdown-menu .dropdown-item { color: var(--m-text-2) !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    color: #fff !important;
    background: var(--m-surface-3) !important;
}

/* ============================================================================
   32. TOOLTIPS (Bootstrap .tooltip)  [NEW in v11 — premium override]
   ============================================================================ */
.tooltip {
    font-family: var(--m-font);
    font-size: 0.82rem;
    pointer-events: none;
    z-index: 2147483599;
}
.tooltip .tooltip-inner,
.tooltip-inner {
    background: var(--m-surface-4) !important;
    color: var(--m-text) !important;
    padding: 0.5rem 0.85rem !important;
    border-radius: var(--m-radius-xs) !important;
    box-shadow: var(--m-shadow-lg) !important;
    max-width: 260px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    border: 1px solid var(--m-border-2);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--m-surface-4) !important;
}
.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--m-surface-4) !important;
}
.tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--m-surface-4) !important;
}
.tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--m-surface-4) !important;
}

/* Popover */
.popover {
    background: var(--m-surface-3) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-lg) !important;
    color: var(--m-text-2) !important;
    font-family: var(--m-font);
}
.popover-header,
.popover-title {
    background: var(--m-surface-4) !important;
    color: var(--m-text) !important;
    border-bottom: 1px solid var(--m-border) !important;
    font-weight: 600;
}
.popover-body, .popover-content { color: var(--m-text-2) !important; }

/* ============================================================================
   33. TOASTR NOTIFICATIONS  [NEW in v11 — premium tint]
   ============================================================================ */
#toast-container > div,
.toast {
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-lg) !important;
    padding: 1rem 1.2rem !important;
    opacity: 1 !important;
    background-image: none !important;
    border: 1px solid transparent !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    font-family: var(--m-font) !important;
    font-size: 0.92rem !important;
    line-height: 1.45 !important;
    animation: m-slide-up 280ms cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 320px;
}
#toast-container > .toast-success,
.toast.toast-success {
    background: rgba(20, 22, 30, 0.92) !important;
    color: #6ee7b7 !important;
    border-color: var(--m-success-border) !important;
    border-left: 4px solid var(--m-success) !important;
}
#toast-container > .toast-error,
.toast.toast-error {
    background: rgba(20, 22, 30, 0.92) !important;
    color: #fca5a5 !important;
    border-color: var(--m-danger-border) !important;
    border-left: 4px solid var(--m-danger) !important;
}
#toast-container > .toast-warning,
.toast.toast-warning {
    background: rgba(20, 22, 30, 0.92) !important;
    color: #fcd34d !important;
    border-color: var(--m-warning-border) !important;
    border-left: 4px solid var(--m-warning) !important;
}
#toast-container > .toast-info,
.toast.toast-info {
    background: rgba(20, 22, 30, 0.92) !important;
    color: #93c5fd !important;
    border-color: var(--m-info-border) !important;
    border-left: 4px solid var(--m-info) !important;
}
#toast-container .toast-title {
    font-weight: 700 !important;
    color: inherit !important;
    margin-bottom: 0.2rem;
}
#toast-container .toast-message {
    color: var(--m-text-2) !important;
}
#toast-container .toast-close-button {
    color: var(--m-text-3) !important;
    text-shadow: none !important;
    opacity: 0.7;
    font-weight: 400 !important;
    font-size: 1.2rem !important;
    transition: opacity var(--m-tr-fast);
}
#toast-container .toast-close-button:hover { opacity: 1; color: #fff !important; }

/* ============================================================================
   34. SEARCH BAR (.searchBox / generic search inputs)  [NEW in v11]
   ============================================================================ */
.searchBox {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 199;
    max-width: 640px;
    width: 90%;
    background: rgba(20, 22, 30, 0.85) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    padding: 0.5rem 0.6rem 0.5rem 1rem !important;
    box-shadow: var(--m-shadow-lg) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}
.searchBox .form-group {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.searchBox .form-control {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--m-text) !important;
    padding: 0.5rem !important;
    font-size: 1rem;
}
.searchBox .form-control::placeholder {
    color: var(--m-text-3);
    opacity: 0.7;
}
.searchBox .crosIcon {
    color: var(--m-text-3);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--m-radius-xs);
    transition: all var(--m-tr-fast);
}
.searchBox .crosIcon:hover {
    color: var(--m-text);
    background: var(--m-surface-2);
}

/* ============================================================================
   35. EMPTY STATE / NO DATA  [NEW in v11]
   ============================================================================ */
.empty-state, .no-data, .no-results {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--m-text-3);
}
.empty-state h1, .empty-state h2, .empty-state h3,
.no-data h1, .no-data h2, .no-data h3 {
    color: var(--m-text-2) !important;
    font-weight: 600;
    margin-bottom: 0.7rem;
}
.empty-state p, .no-data p { color: var(--m-text-3); font-size: 0.95rem; }
.empty-state .icon, .empty-state i,
.no-data .icon, .no-data i {
    font-size: 3rem;
    color: var(--m-text-4);
    margin-bottom: 1rem;
    display: block;
    opacity: 0.7;
}

/* ============================================================================
   36. SKELETON LOADER  [NEW in v11 — для loading-состояний]
   ============================================================================ */
.skeleton,
.skeleton-line,
.skeleton-box,
.skeleton-circle {
    background: linear-gradient(90deg,
        var(--m-surface) 0%,
        var(--m-surface-2) 50%,
        var(--m-surface) 100%);
    background-size: 200% 100%;
    animation: m-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--m-radius-xs);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}
.skeleton-line { height: 1em; margin: 0.5em 0; }
.skeleton-box { height: 120px; }
.skeleton-circle {
    border-radius: var(--m-radius-full);
    width: 40px;
    height: 40px;
}

/* ============================================================================
   37. SVG INHERIT COLOR  [NEW in v11 — для иконок]
   ============================================================================
   Force SVG inside buttons/links/nav to inherit text color, preventing
   black-on-dark glitches when SVG has no explicit fill. */
.btn svg, button svg, a svg,
.nav-link svg, .navbar-nav svg,
.dropdown-menu svg, .card-header svg,
.modal-header svg, .alert svg,
.sidebar svg {
    fill: currentColor;
    stroke: currentColor;
    transition: fill var(--m-tr-fast), stroke var(--m-tr-fast);
}
/* But preserve images and explicit SVG fills */
svg[fill]:not([fill="currentColor"]):not([fill="none"]) { fill: revert; }
svg [fill]:not([fill="currentColor"]):not([fill="none"]) { fill: revert; }

/* Icons (FontAwesome / Material Icons) inherit text color */
.btn i, button i, a i,
.nav-link i, .navbar-nav i,
.dropdown-menu i, .card-header i,
.modal-header i, .alert i,
.sidebar i {
    color: currentColor;
    transition: color var(--m-tr-fast);
}

/* ============================================================================
   38. ACCESSIBILITY — :focus-visible keyboard navigation  [NEW in v11]
   ============================================================================ */
:focus { outline: none; }   /* mouse focus — no outline */
:focus-visible {
    outline: 2px solid var(--m-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px var(--m-accent-soft);
}
/* Buttons already have their own focus ring; don't double-outline */
.btn:focus-visible,
button:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--m-accent-ring);
}

/* Skip-to-content link for screen readers */
.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    background: var(--m-accent);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--m-radius-xs);
    z-index: 2147483599;
    text-decoration: none;
    font-weight: 600;
}
.skip-link:focus {
    top: 1rem;
}

/* Reduced motion — disable transitions/animations */
@media (prefers-reduced-motion: reduce) {
    .float_btns a, .btn, .card, .panel,
    .navbar-nav .nav-link, .dropdown-menu,
    .modal-content, .alert {
        transition: none !important;
        animation: none !important;
    }
}

/* High contrast mode (Windows / forced-colors) */
@media (forced-colors: active) {
    .btn, .card, .panel, .form-control, .modal-content {
        border: 1px solid CanvasText !important;
    }
}

/* ============================================================================
   39. HOTFIX v11.1 — READABILITY PATCHES  (2026-05-11)
   ============================================================================
   Issues addressed:
   1) ECharts donut numbers (4857, 11, 567, 0) rendered as
      style="fill: rgb(14, 14, 14)" — my v11 fallback only matched HEX (#0...)
      so the rgb-form was not overridden → numbers stayed dark on dark.
   2) <h4 class="category_head"> on Place Order pages (imei_services /
      file_services / server_services) inherited light bg #efefef from green
      CSS, but text was forced white by another v11 rule → white-on-light. */

/* --- 1) ECharts SVG text rendered in rgb() form (covers #000, #0B0B0B, #0e0e0e) --- */
.chart-container svg text[style*="rgb(0, 0, 0)"],
.chart-container svg text[style*="rgb(0,0,0)"],
.chart-container svg text[style*="rgb(11, 11, 11)"],
.chart-container svg text[style*="rgb(11,11,11)"],
.chart-container svg text[style*="rgb(14, 14, 14)"],
.chart-container svg text[style*="rgb(14,14,14)"],
.chart-container svg text[style*="rgb(43,"],
.dashboard-chart-container svg text[style*="rgb(0, 0, 0)"],
.dashboard-chart-container svg text[style*="rgb(11, 11, 11)"],
.dashboard-chart-container svg text[style*="rgb(14, 14, 14)"],
.chart svg text[style*="rgb(0, 0, 0)"],
.chart svg text[style*="rgb(11, 11, 11)"],
.chart svg text[style*="rgb(14, 14, 14)"],
.chart svg text[style*="rgb(11,"],
.chart svg text[style*="rgb(14,"] {
    fill: #e6eaf2 !important;
}

/* Belt-and-braces: any tspan inside chart with rgb low-luminance */
.chart-container svg tspan[style*="rgb(0,"],
.chart-container svg tspan[style*="rgb(11,"],
.chart-container svg tspan[style*="rgb(14,"],
.chart svg tspan[style*="rgb(0,"],
.chart svg tspan[style*="rgb(11,"],
.chart svg tspan[style*="rgb(14,"] {
    fill: #e6eaf2 !important;
}

/* --- 2) Place Order / Service listing — category section headers --- */
h4.category_head,
.accordion-group > h4.category_head {
    background: var(--m-surface-2) !important;
    color: var(--m-text-1) !important;
    border: 1px solid var(--m-border) !important;
    border-left: 4px solid var(--m-accent) !important;
    border-radius: var(--m-radius) !important;
    padding: 14px 20px !important;
    margin: 32px 0 20px 0 !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px !important;
    box-shadow: var(--m-shadow-sm) !important;
}
h4.category_head:first-child,
.accordion-group:first-of-type > h4.category_head {
    margin-top: 0 !important;
}

/* --- 3) Place Order parent section — make sure it has dark surface --- */
section.gre_knowledge,
section.un_inst,
.gre_knowledge {
    background: transparent !important;
    color: var(--m-text-1) !important;
}
section.gre_knowledge .container,
section.un_inst .container {
    background: transparent !important;
}

/* --- 4) Defensive — any inline color="..." or bgcolor="..." on table cells
       inside service listings (legacy markup) should not blow up contrast --- */
section.gre_knowledge td[bgcolor],
section.gre_knowledge th[bgcolor],
section.gre_knowledge [bgcolor="#efefef"],
section.gre_knowledge [bgcolor="#fff"],
section.gre_knowledge [bgcolor="white"],
section.gre_knowledge [bgcolor="#ffffff"] {
    background-color: var(--m-surface) !important;
    color: var(--m-text-1) !important;
}
section.gre_knowledge [style*="background:#efefef"],
section.gre_knowledge [style*="background:#fff"],
section.gre_knowledge [style*="background-color:#efefef"],
section.gre_knowledge [style*="background-color:#fff"],
section.gre_knowledge [style*="background-color: #fff"],
section.gre_knowledge [style*="background-color: white"] {
    background-color: var(--m-surface) !important;
    color: var(--m-text-1) !important;
}

/* --- 5) v11.5: VIRTUAL_PROD service cards — Place IMEI/File/Server Order pages.
       Green CSS (inner_pages.css L1034) sets .virtual_prod { background:#FFF;
       border:rgba(0,0,0,0.1) } and .vprod_body p/a { color:#71737a } — both
       give light text on light background once we host them on our dark theme.
       Override to dark surface + readable text. ---  */
.virtual_prod {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius) !important;
    box-shadow: var(--m-shadow-sm) !important;
    color: var(--m-text-1) !important;
    overflow: hidden;
    transition: transform var(--m-tr), box-shadow var(--m-tr), border-color var(--m-tr);
}
.virtual_prod:hover {
    transform: translateY(-3px);
    box-shadow: var(--m-shadow), 0 0 0 1px var(--m-accent-ring);
    border-color: var(--m-accent-ring) !important;
}
.virtual_prod .vprod_head {
    background: var(--m-surface-2) !important;
    padding: 14px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--m-border) !important;
}
.virtual_prod .vprod_head img {
    background: transparent !important;
    border-radius: var(--m-radius-xs) !important;
}
.virtual_prod .vprod_body { color: var(--m-text-1) !important; }
.virtual_prod .vprod_body p,
.virtual_prod .vprod_body p a,
.virtual_prod .vprod_body a {
    color: var(--m-text-1) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color var(--m-tr-fast);
}
.virtual_prod .vprod_body p a:hover,
.virtual_prod .vprod_body a:hover { color: var(--m-accent) !important; }
.virtual_prod .vprod_price { background: transparent !important; color: var(--m-text-1) !important; }
.virtual_prod .vprod_price h3 { color: var(--m-text-3) !important; font-size: 0.78rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-weight: 600 !important; }
.virtual_prod .vprod_price h4 { color: var(--m-accent) !important; font-weight: 700 !important; }
.virtual_prod .vprod_footer {
    background: var(--m-surface-2) !important;
    color: var(--m-text-2) !important;
    border-top: 1px solid var(--m-border) !important;
    padding: 10px 14px !important;
}
.virtual_prod .vprod_footer h3 { color: var(--m-text-3) !important; font-size: 0.78rem !important; }
.virtual_prod .vprod_footer h4 { color: var(--m-text-1) !important; }
.virtual_prod .vprod_footer span { color: var(--m-text-3) !important; }
/* Modal opened from a service card (legacy uses #313131 dark grey) */
.virtual_prod .modal-header,
.virtual_prod .modal-content {
    background: var(--m-surface-2) !important;
    color: var(--m-text-1) !important;
    border-color: var(--m-border-2) !important;
}
.virtual_prod .modal-title,
.virtual_prod .modal-body,
.virtual_prod .modal-body * { color: var(--m-text-1) !important; }
.virtual_prod .modal .close { color: var(--m-text-1) !important; opacity: 0.8; }
.virtual_prod .modal .close:hover { opacity: 1; color: var(--m-accent) !important; }

/* --- 5) Inner heading on Place Order ("Server Services" / "IMEI Services") --- */
.inner-heading h1,
.inner-heading h2,
.inner-heading h3 {
    color: var(--m-text-1) !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
}
.inner-heading {
    border-bottom: 1px solid var(--m-border) !important;
    padding-bottom: 14px !important;
    margin-bottom: 28px !important;
    background: transparent !important;
}

/* ============================================================================
   40. HOTFIX v11.2 — NAVBAR ALIGN + FULL MOBILE AUDIT  (2026-05-11)
   ============================================================================
   Issues addressed:
   1) CRITICAL — mobile menu was auto-opening on page load because my v11
      had "width: 100% !important" on #green_mobile_nav default state.
      Green theme JS controls open/close via inline style.width="0%"|"100%",
      so my !important was permanently overriding closed state. FIXED in
      section 20 by removing width declaration from default.
   2) Navbar items rendered crooked on desktop: green CSS adds a small
      coloured underline (::after / border-bottom) on .active items which
      pushed adjacent items out of vertical alignment.
   3) Insufficient letter-spacing on UPPERCASE nav-links → crammed text.
   4) Mobile UX audit (touch targets, tap highlight, momentum scrolling). */

/* --- 1) NAVBAR — kill green theme's active underline/indicator pseudos --- */
.navbar-nav .nav-link::before,
.navbar-nav .nav-link::after,
.navbar-nav > li > a::before,
.navbar-nav > li > a::after,
.navbar-nav .nav-item.active .nav-link::before,
.navbar-nav .nav-item.active .nav-link::after,
.navbar-nav .active > a::before,
.navbar-nav .active > a::after,
.navbar-nav li.active::before,
.navbar-nav li.active::after,
.navbar .navbar-nav > .active > a::after,
.green_header .navbar-nav .active > a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* --- 2) NAVBAR — defensive: kill any green border-bottom on active item --- */
.navbar-nav .nav-link,
.navbar-nav > li > a,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .active > a {
    border-bottom: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

/* --- 3) NAVBAR — unified vertical alignment + readable uppercase spacing --- */
.navbar-nav {
    align-items: center !important;
}
.navbar-nav > li,
.navbar-nav .nav-item {
    display: flex !important;
    align-items: center !important;
}
.navbar-nav .nav-link,
.navbar-nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 40px !important;
    letter-spacing: 0.04em !important;     /* nicer for uppercase */
    white-space: nowrap !important;
    text-shadow: none !important;
}

/* --- 4) NAVBAR — active state styling (replaces green underline) --- */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .active > a,
.navbar-nav .nav-link.active {
    background: var(--m-accent-soft) !important;
    color: #fff !important;
    box-shadow: inset 0 0 0 1px var(--m-accent-ring) !important;
    border: 0 !important;
}

/* --- 5) MOBILE AUDIT: touch targets — minimum 44x44 (Apple HIG / WCAG) --- */
@media (max-width: 767px) {
    .btn,
    a.btn,
    button,
    .nav-link,
    .navbar-nav > li > a,
    .dropdown-item,
    .pagination > li > a,
    .pagination > li > span,
    .form-control,
    .input-group .btn {
        min-height: 44px;
    }
    .btn-sm, .btn-xs {
        min-height: 36px;
    }
    /* Mobile menu links — comfortable touch */
    #green_mobile_nav a {
        min-height: 44px !important;
        padding: 14px 16px !important;
    }
}

/* --- 6) MOBILE AUDIT: tap highlight (kill blue iOS flash on tap) --- */
a, button, [role="button"], .btn,
.nav-link, .navbar-nav li > a,
.dropdown-item, .card, .panel {
    -webkit-tap-highlight-color: rgba(91, 140, 255, 0.18);
}

/* --- 7) MOBILE AUDIT: smooth momentum scrolling on iOS --- */
html, body,
.modal-body,
.sidebar,
.card-body,
.table-responsive,
.dropdown-menu,
#green_mobile_nav {
    -webkit-overflow-scrolling: touch;
}

/* --- 8) MOBILE AUDIT: prevent text size adjustment on iOS rotation --- */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* --- 9) MOBILE AUDIT: long URLs / words break properly --- */
.card, .panel, .modal-body,
.alert, .breadcrumb,
table td, table th {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* --- 10) MOBILE AUDIT: form usability on mobile --- */
@media (max-width: 575px) {
    .form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;   /* prevents iOS auto-zoom */
        min-height: 44px;
    }
    textarea.form-control {
        min-height: 88px;
    }
    /* Stacked buttons on small screens */
    .btn-group-vertical-sm > .btn,
    .form-actions .btn + .btn {
        margin-top: 8px;
    }
}

/* --- 11) MOBILE AUDIT: tables overflow visibility hint --- */
@media (max-width: 767px) {
    .table-responsive {
        border: 1px solid var(--m-border);
        border-radius: var(--m-radius);
        margin-bottom: 1rem;
    }
    .table-responsive table {
        margin-bottom: 0;
    }
}

/* --- 12) MOBILE AUDIT: modal usability on phones --- */
@media (max-width: 575px) {
    .modal-dialog {
        margin: 8px !important;
        max-width: calc(100vw - 16px) !important;
    }
    .modal-content {
        border-radius: var(--m-radius) !important;
    }
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 14px 16px !important;
    }
}

/* --- 13) MOBILE AUDIT: floating buttons don't cover content --- */
@media (max-width: 480px) {
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* When floating chat is open, ensure footer space */
    .float_btns {
        display: none !important;
    }
}

/* --- 14) MOBILE AUDIT: hamburger button — easier to tap --- */
@media (max-width: 991px) {
    .mobile_nav,
    span.float-left {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .mobile_nav i.fa-bars,
    span.float-left i.fa-bars {
        font-size: 24px !important;
        padding: 4px;
    }
}

/* --- 15) MOBILE AUDIT: prevent horizontal scroll from rogue elements --- */
@media (max-width: 991px) {
    body, html {
        max-width: 100vw;
        overflow-x: hidden !important;
    }
    .container, .container-fluid {
        max-width: 100% !important;
    }
    img, video, iframe {
        max-width: 100%;
        height: auto;
    }
}

/* --- 16) MOBILE AUDIT: anchor scroll offset (don't hide under sticky header) --- */
:target,
h1[id], h2[id], h3[id], h4[id],
section[id], article[id] {
    scroll-margin-top: 80px;
}

/* ============================================================================
   41. HOTFIX v11.5 — MOBILE HEADER: LOGO LEFT, HAMBURGER RIGHT with "MENU →"
   ============================================================================
   HTML structure (frontend/header.php):
     <div class="mobile_nav">
       <div class="mobile_head">
         <div class="mobile_logo"><a><img></a></div>     ← natural LEFT
         <div class="float-right">                       ← natural RIGHT
           <span onclick="openNav();"><i class="fa fa-bars"></i></span>
           <span><ul class="acc_ul">…currency…</ul></span>
         </div>
       </div>
     </div>
   Goal: keep DOM order (logo first, then float-right group). mobile_head is
   a flex row with justify-content: space-between, so logo sits LEFT and the
   .float-right group (hamburger + currency) sits RIGHT. The hamburger SPAN
   itself is a pill button with "MENU" text + animated "→" arrow + bars icon,
   reading left-to-right as: [ MENU → ☰ ] — the arrow points AT the icon. */

@media (max-width: 991px) {

    /* mobile_head: simple flex row, logo natural-left, .float-right natural-right */
    .mobile_nav .mobile_head {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 12px !important;
        min-height: 60px !important;
        gap: 8px;
    }

    /* Logo on the LEFT */
    .mobile_nav .mobile_logo {
        flex: 0 1 auto;
        text-align: left;
        margin-right: auto;     /* pin to left edge */
    }
    .mobile_nav .mobile_logo img {
        max-width: 140px !important;
        max-height: 44px !important;
        height: auto !important;
        width: auto !important;
    }

    /* .float-right wrapper on the RIGHT (its children: hamburger, currency) */
    .mobile_nav .float-right {
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: 0 !important;
    }

    /* Hamburger pill button — sits inside .float-right on the RIGHT */
    .mobile_nav .float-right span.float-left[onclick*="openNav"],
    .mobile_nav span.float-left[onclick*="openNav"],
    .mobile_nav span[onclick*="openNav"] {
        position: static !important;
        float: none !important;
        margin: 0 !important;
        padding: 8px 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-height: 44px;
        cursor: pointer;
        border-radius: var(--m-radius-sm);
        background: rgba(91, 140, 255, 0.10);
        border: 1px solid var(--m-accent-ring);
        transition: all var(--m-tr-fast);
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }
    .mobile_nav .float-right span.float-left[onclick*="openNav"]:hover,
    .mobile_nav span.float-left[onclick*="openNav"]:hover,
    .mobile_nav span[onclick*="openNav"]:hover {
        background: rgba(91, 140, 255, 0.18);
        border-color: var(--m-accent);
        box-shadow: 0 0 0 3px var(--m-accent-ring);
    }
    .mobile_nav .float-right span.float-left[onclick*="openNav"]:active,
    .mobile_nav span.float-left[onclick*="openNav"]:active,
    .mobile_nav span[onclick*="openNav"]:active {
        transform: scale(0.96) !important;
    }

    /* "MENU" text via ::before — appears FIRST (order 1, leftmost in pill) */
    .mobile_nav .float-right span.float-left[onclick*="openNav"]::before,
    .mobile_nav span.float-left[onclick*="openNav"]::before,
    .mobile_nav span[onclick*="openNav"]::before {
        content: "MENU";
        font-family: "Space Grotesk", "Inter", sans-serif !important;
        font-weight: 700;
        font-size: 0.82rem;
        letter-spacing: 0.14em;
        color: var(--m-text-1);
        line-height: 1;
        order: 1;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
        display: inline-block;
    }

    /* "→" arrow via ::after — appears SECOND (order 2, between MENU and ☰),
       gently bounces RIGHT toward the bars icon */
    .mobile_nav .float-right span.float-left[onclick*="openNav"]::after,
    .mobile_nav span.float-left[onclick*="openNav"]::after,
    .mobile_nav span[onclick*="openNav"]::after {
        content: "\2192";    /* → */
        color: var(--m-accent);
        font-size: 18px;
        line-height: 1;
        font-weight: 700;
        order: 2;
        margin: 0 2px;
        animation: m-menu-arrow-bounce 1.4s ease-in-out infinite;
        display: inline-block;
    }

    /* Hamburger ICON — appears LAST (order 3, rightmost in pill) */
    .mobile_nav .float-right span.float-left[onclick*="openNav"] i.fa-bars,
    .mobile_nav .float-right span.float-left[onclick*="openNav"] i.fas.fa-bars,
    .mobile_nav span.float-left[onclick*="openNav"] i.fa-bars,
    .mobile_nav span[onclick*="openNav"] i.fa-bars,
    .mobile_nav span[onclick*="openNav"] i.fas.fa-bars {
        color: var(--m-accent) !important;
        font-size: 22px !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 3 !important;
        flex: 0 0 auto;
    }

    /* Currency strip (second span in .float-right) keeps its own layout */
    .mobile_nav .float-right > span:not([onclick*="openNav"]) {
        display: inline-flex;
        align-items: center;
    }
}

/* Gentle arrow bounce — defined OUTSIDE @media so it's globally usable.
   v11.5: arrow now points RIGHT so animation translates positive X. */
@keyframes m-menu-arrow-bounce {
    0%, 100% { transform: translateX(0); opacity: 0.85; }
    50%      { transform: translateX(4px); opacity: 1; }
}

/* Respect prefers-reduced-motion (defined OUTSIDE nested @media for old browsers) */
@media (prefers-reduced-motion: reduce) {
    .mobile_nav span[onclick*="openNav"]::after {
        animation: none !important;
    }
}

/* On very narrow phones, hide "MENU" text + arrow (just keep bars)
   so the header doesn't overflow when logo is wide */
@media (max-width: 360px) {
    .mobile_nav span[onclick*="openNav"] {
        padding: 8px !important;
    }
    .mobile_nav span[onclick*="openNav"]::before,
    .mobile_nav span[onclick*="openNav"]::after {
        display: none !important;
    }
}

/* On desktop (>= 992px) the green theme hides .mobile_nav entirely — no rule
   here needed. But ensure our styles never leak above 991px. */
@media (min-width: 992px) {
    .mobile_nav {
        display: none !important;
    }
}

/* ============================================================================
   42. HOTFIX v11.4 — CHART NUMBERS + TICKET CARDS + MOBILE MENU UI  (2026-05-11)
   ============================================================================
   Three readability/UX problems reported by user:

   1) DONUT CHART NUMBERS (4857, 11, 567, 0) STILL DARK after v11.1 fix.
      Root cause: v11.1 used attribute selector style*="rgb(14, 14, 14)"
      which only matches that exact rgb form. eCharts may render numbers as
      <text fill="#000"> attribute, or rgb(0,0,0), or computed via JS. The
      bullet-proof solution is to target ALL <text>/<tspan> inside any chart
      container regardless of how the colour is declared. Colours that should
      stay coloured (Completed green, Rejected red, etc.) are HTML labels,
      NOT inside SVG, so this is safe.

   2) TICKET CATEGORY CARDS (page/ticket) — light text on light grey card.
      Root cause: views/ticket_categories.php has its own inline <style>
      block setting .bg-primary { background-color: #dadada } and
      .text-white { color: #324148 }. My v11 overrode the colour but not the
      background, producing white-on-grey. Fix: target the exact compound
      selector .card.bg-primary.text-white with all 3 classes (specificity
      0,3,0) which beats 0,1,0 of inline <style> block.

   3) MOBILE MENU OVERLAY — too small text, no card-like borders, items
      overlapping (Order Now / IMEI Services on same line). Make it premium:
      large readable type, translucent rounded frames per item, comfortable
      vertical spacing, no overlapping, dropdown sublist as inline block. */

/* --- 1) CHART NUMBERS — universal SVG text override (no attribute filter) -- */
.chart-container svg text,
.chart-container svg tspan,
.dashboard-chart-container svg text,
.dashboard-chart-container svg tspan,
.chart svg text,
.chart svg tspan,
div[_echarts_instance_] svg text,
div[_echarts_instance_] svg tspan,
.echarts svg text,
.echarts svg tspan,
canvas + svg text,
canvas + svg tspan {
    fill: #e6eaf2 !important;
    color: #e6eaf2 !important;
}

/* Belt-and-braces: defensive override against direct fill="#000" attribute */
.chart-container svg text[fill="#000"],
.chart-container svg text[fill="#000000"],
.chart-container svg text[fill="black"],
.chart-container svg tspan[fill="#000"],
.chart svg text[fill="#000"],
.chart svg tspan[fill="#000"],
div[_echarts_instance_] svg text[fill="#000"],
div[_echarts_instance_] svg tspan[fill="#000"] {
    fill: #e6eaf2 !important;
}

/* Donut chart container itself — make sure card background is dark */
.dashboard-chart-container,
.chart-container,
.card .chart,
.card .echarts {
    background: transparent !important;
}

/* v11.15: GOLD RIM around dashboard Order Summary pie charts (eCharts).
   Containers are <div id="pie_multiples1..4" class="chart" style="height:150px">.
   Without an explicit width they stretch to 100% of the <td>, and a
   border-radius:50% on a non-square box renders as an ellipse. Force a
   square 150x150 footprint + aspect-ratio:1/1 so the rim is a PERFECT
   CIRCLE that hugs the pie chart exactly. */
#pie_multiples1,
#pie_multiples2,
#pie_multiples3,
#pie_multiples4 {
    width: 150px !important;
    height: 150px !important;
    aspect-ratio: 1 / 1 !important;
    max-width: 150px !important;
    min-width: 150px !important;
    flex: 0 0 150px !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 50% !important;
    background: radial-gradient(
        circle at center,
        rgba(20, 22, 30, 0.0) 0%,
        rgba(20, 22, 30, 0.35) 70%,
        rgba(20, 22, 30, 0.55) 100%
    ) !important;
    box-shadow:
        0 0 0 1.5px var(--m-gold-ring),
        0 0 22px var(--m-gold-glow),
        inset 0 0 0 1px rgba(255, 215, 130, 0.15) !important;
    transition:
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}
/* Hover state — slightly stronger glow, gentle lift */
.dropdown-toggle:hover #pie_multiples1,
.dropdown-toggle:hover #pie_multiples2,
.dropdown-toggle:hover #pie_multiples3,
.dropdown-toggle:hover #pie_multiples4,
#pie_multiples1:hover,
#pie_multiples2:hover,
#pie_multiples3:hover,
#pie_multiples4:hover {
    box-shadow:
        0 0 0 2px var(--m-gold-ring),
        0 0 32px var(--m-gold-glow),
        inset 0 0 0 1px rgba(255, 215, 130, 0.30) !important;
    transform: translateY(-1px);
}
/* Force ECharts SVG to stay transparent and fill the rounded container */
#pie_multiples1 svg,
#pie_multiples2 svg,
#pie_multiples3 svg,
#pie_multiples4 svg {
    background: transparent !important;
    border-radius: 50% !important;
}
/* v11.15: NUCLEAR text fill override for ECharts donut numbers.
   ECharts renders the bottom label as SVG <text> with inline
   `style="fill: rgb(14, 14, 14); ..."` baked in (from __mPieLabelColor in
   pie_multiple.js). Even if the JS file on disk has the theme-aware fix,
   a cached old version of the script will still inject dark fills.
   Force EVERY text node inside these specific donut containers to light
   regardless of any inline style. The colored pie ARCS are <path>, not
   <text>, so they remain green/orange/red/grey — only labels switch. */
#pie_multiples1 text,
#pie_multiples1 tspan,
#pie_multiples1 svg text,
#pie_multiples1 svg tspan,
#pie_multiples2 text,
#pie_multiples2 tspan,
#pie_multiples2 svg text,
#pie_multiples2 svg tspan,
#pie_multiples3 text,
#pie_multiples3 tspan,
#pie_multiples3 svg text,
#pie_multiples3 svg tspan,
#pie_multiples4 text,
#pie_multiples4 tspan,
#pie_multiples4 svg text,
#pie_multiples4 svg tspan {
    fill: #e6eaf2 !important;
    color: #e6eaf2 !important;
}
/* Same but with attribute selectors to win against inline style. The CSS
   `fill` property already wins over the SVG `fill` attribute, but with
   inline `style="fill: ..."` we need !important AND high specificity. */
#pie_multiples1 svg text[style], #pie_multiples1 svg tspan[style],
#pie_multiples2 svg text[style], #pie_multiples2 svg tspan[style],
#pie_multiples3 svg text[style], #pie_multiples3 svg tspan[style],
#pie_multiples4 svg text[style], #pie_multiples4 svg tspan[style] {
    fill: #e6eaf2 !important;
}
/* Top label (Completed / In Process / Rejected / Pending) — ECharts auto-
   colors it the same as the arc. We let that through (no fill override on
   the label itself; ECharts paints it with the series color). Only numbers
   get forced light. To distinguish: the bottom label has the larger
   line-height; in practice both can be light — we keep all forced light
   here because the green/orange/red names also work fine in light. */

/* --- 2) TICKET CATEGORY CARDS — fix light-on-light from inline <style> --- */
/* views/ticket_categories.php inline style does:
     .bg-primary { background-color: #dadada !important; }
     .text-white { color: #324148 !important; }
   We override BOTH with higher specificity (.card.bg-primary.text-white) */

.card.bg-primary.text-white,
.card.bg-primary.text-white.NewBoxStyling,
a > .card.bg-primary.text-white {
    background: linear-gradient(135deg, var(--m-surface-2), var(--m-surface)) !important;
    background-color: var(--m-surface-2) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    color: var(--m-text-1) !important;
    box-shadow: var(--m-shadow) !important;
    transition: all var(--m-tr);
    overflow: hidden;
    position: relative;
}
.card.bg-primary.text-white::before,
.card.bg-primary.text-white.NewBoxStyling::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--m-accent), var(--m-accent-active));
    opacity: 0.85;
}
a:hover > .card.bg-primary.text-white,
.card.bg-primary.text-white:hover {
    transform: translateY(-3px);
    border-color: var(--m-accent-ring) !important;
    box-shadow: 0 16px 40px rgba(91, 140, 255, 0.18) !important;
    background-color: var(--m-surface-3) !important;
}

/* Card body inside — text colours */
.card.bg-primary.text-white .card-body,
.card.bg-primary.text-white .card-body * {
    color: var(--m-text-1) !important;
}
.card.bg-primary.text-white .card-body h2,
.card.bg-primary.text-white .card-body h3,
.card.bg-primary.text-white .card-body h4 {
    color: var(--m-text-1) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    margin: 0 !important;
    font-size: 1.05rem;
}

/* Card images (the 01.png / 02.png icons) — make them visible on dark */
.card.bg-primary.text-white .card-body img,
.NewBoxStyling .card-body img {
    filter: brightness(0) invert(1) opacity(0.85) !important;
    transition: filter var(--m-tr-fast), transform var(--m-tr-fast);
}
a:hover .card.bg-primary.text-white .card-body img,
.card.bg-primary.text-white:hover .card-body img {
    filter: brightness(0) invert(1) opacity(1) !important;
    transform: scale(1.08);
}

/* Ensure parent link doesn't underline / colour-shift */
a:has(.card.bg-primary.text-white),
a:has(.NewBoxStyling) {
    text-decoration: none !important;
    display: block;
}

/* --- 3) MOBILE MENU OVERLAY — premium card-style items with frames --- */
@media (max-width: 991px) {

    /* Overlay content container — generous spacing, column layout */
    #green_mobile_nav .overlay-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        max-width: 460px !important;
        margin: 0 auto !important;
        padding: 14vh 20px 80px !important;
        align-items: stretch !important;
    }

    /* v11.7: ALL top-level menu items — unified GOLD pill button.
       Targets BOTH direct <a> children AND <a> wrapped in classless <div>
       (e.g. Track Order: <div><a>Track Order</a></div>). The visual
       container for <div>-wrapped links is the inner <a>, so we transparent
       the outer <div> and pillify the <a>. */
    #green_mobile_nav .overlay-content > a,
    #green_mobile_nav .overlay-content > .cm_dropdown,
    #green_mobile_nav .overlay-content > div > a {
        display: block !important;
        width: 100% !important;
        position: static !important;
        transform: none !important;
        float: none !important;
        margin: 0 !important;
        padding: 16px 20px !important;
        font-size: 1.05rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.01em !important;
        text-align: center !important;
        color: var(--m-text-1) !important;
        background: rgba(20, 22, 30, 0.55) !important;
        border: 1px solid var(--m-gold-ring) !important;
        border-radius: var(--m-radius) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transition: all var(--m-tr-fast);
        text-decoration: none !important;
        min-height: 56px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        box-shadow:
            0 0 0 1px var(--m-gold-ring),
            0 2px 10px var(--m-gold-glow) !important;
    }
    /* Outer <div> wrapper for some links (Track Order, etc.) — strip styling
       so only the inner <a> is the pill */
    #green_mobile_nav .overlay-content > div:not(.float-right):not(.acc_ul) {
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
        border-radius: 0 !important;
    }
    /* But the submenu wrapper (the one AFTER slideToggle parent) keeps its
       nested styling — handled separately below via adjacent-sibling selector */

    #green_mobile_nav .overlay-content > a:hover,
    #green_mobile_nav .overlay-content > a:focus,
    #green_mobile_nav .overlay-content > a:active,
    #green_mobile_nav .overlay-content > div > a:hover,
    #green_mobile_nav .overlay-content > div > a:focus,
    #green_mobile_nav .overlay-content > div > a:active {
        background: rgba(212, 175, 55, 0.10) !important;
        border-color: var(--m-gold) !important;
        color: #fff !important;
        transform: translateY(-1px) !important;
        box-shadow:
            0 0 0 1px var(--m-gold),
            0 6px 22px var(--m-gold-glow),
            0 0 30px rgba(212, 175, 55, 0.18) !important;
    }

    /* Highlight specifically the "Order Now" accent link — slightly stronger
       gold tint so the primary CTA stands out a bit */
    #green_mobile_nav .overlay-content > a.order_now,
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] {
        background: linear-gradient(135deg,
            rgba(212, 175, 55, 0.20),
            rgba(212, 175, 55, 0.08)) !important;
        border-color: var(--m-gold) !important;
        color: #fff !important;
        font-weight: 700 !important;
        box-shadow:
            0 0 0 1px var(--m-gold),
            0 4px 18px var(--m-gold-glow) !important;
    }

    /* Close button — top-right, big, hover effect */
    #green_mobile_nav .closebtn {
        position: absolute !important;
        top: 16px !important;
        right: 20px !important;
        font-size: 38px !important;
        line-height: 1 !important;
        color: var(--m-text-2) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 50% !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        text-decoration: none !important;
        transition: all var(--m-tr-fast);
        z-index: 10;
    }
    #green_mobile_nav .closebtn:hover {
        background: rgba(255, 91, 91, 0.18) !important;
        border-color: rgba(255, 91, 91, 0.5) !important;
        color: #fff !important;
        transform: rotate(90deg);
    }

    /* v11.8: SUBMENU container — ONLY the <div> IMMEDIATELY AFTER a slideToggle
       parent <a>. Using adjacent-sibling selector (+) ensures we don't catch
       other classless wrapper divs (Track Order, Money Back Guarantee, etc).
       Container is now invisible — the SMALL GOLD PILL submenu items inside
       carry the visual frame themselves, so no left-border accent here. */
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div,
    #green_mobile_nav .overlay-content .cm_menu_h {
        position: static !important;
        display: block;       /* JS toggles inline style; we don't force here */
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 24px 4px 24px !important;   /* horizontal indent so pills sit slightly inset */
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        transform: none !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }

    /* The <ul> inside the submenu div — flex column with small gap */
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul,
    #green_mobile_nav .overlay-content .cm_menu_h ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        background: transparent !important;
    }
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div li,
    #green_mobile_nav .overlay-content .cm_menu_h li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
        position: static !important;
        width: 100% !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        min-height: 0 !important;
    }

    /* v11.10: Submenu links — SMALL GOLD-FRAMED PILLS at 50% width, centered.
       Body prefix forces our rule to win over the v11.7 generic > div > a
       pill rule which uses width: 100%. Also wrapped <li> in flex/center to
       guarantee centering regardless of li's default block behaviour. */
    body #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul,
    body #green_mobile_nav .overlay-content .cm_menu_h ul {
        align-items: center !important;       /* center children horizontally */
    }
    body #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul li,
    body #green_mobile_nav .overlay-content .cm_menu_h li {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    body #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul li a,
    body #green_mobile_nav .overlay-content .cm_menu_h li a {
        display: block !important;
        width: 50% !important;                /* HALF-WIDTH */
        min-width: 180px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        position: static !important;
        transform: none !important;
        float: none !important;
        padding: 12px 18px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        letter-spacing: 0.02em !important;
        color: var(--m-text-1) !important;
        text-align: center !important;
        background: rgba(20, 22, 30, 0.55) !important;
        border: 1px solid var(--m-gold-ring) !important;
        border-radius: var(--m-radius) !important;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        text-decoration: none !important;
        transition: all var(--m-tr-fast);
        min-height: 48px !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        box-shadow:
            0 0 0 1px var(--m-gold-ring),
            0 2px 8px var(--m-gold-glow) !important;
    }
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul li a:hover,
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul li a:focus,
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"] + div ul li a:active,
    #green_mobile_nav .overlay-content .cm_menu_h li a:hover,
    #green_mobile_nav .overlay-content .cm_menu_h li a:active {
        background: rgba(212, 175, 55, 0.12) !important;
        border-color: var(--m-gold) !important;
        color: #fff !important;
        transform: translateY(-1px) !important;
        box-shadow:
            0 0 0 1px var(--m-gold),
            0 6px 20px var(--m-gold-glow),
            0 0 24px rgba(212, 175, 55, 0.16) !important;
    }

    /* CHEVRON indicator on parent <a> that has slideToggle onclick.
       Adds a visual hint that the link expands a submenu below. */
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"]::after {
        content: "\25BE";          /* ▾ down triangle */
        display: inline-block;
        margin-left: 10px;
        color: var(--m-accent);
        font-size: 0.85rem;
        line-height: 1;
        transition: transform var(--m-tr-fast);
        vertical-align: middle;
    }
    /* Rotate the chevron when submenu is open (jQuery sets display:block on next div) */
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"]:hover::after,
    #green_mobile_nav .overlay-content > a[onclick*="slideToggle"]:focus::after {
        transform: rotate(180deg);
    }

    /* Caret icon inside cm_dropdown — accent colour, smooth rotation */
    #green_mobile_nav .overlay-content .cm_dropdown i.fa-caret-down,
    #green_mobile_nav .overlay-content a i.fa-caret-down {
        color: var(--m-accent) !important;
        margin-left: 8px;
        transition: transform var(--m-tr-fast);
        font-size: 0.9rem;
    }
}

/* On phones (≤576px) overlay gets slightly more breathing room and the body
   padding doesn't push content below the fold */
@media (max-width: 576px) {
    #green_mobile_nav .overlay-content {
        padding: 12vh 16px 80px !important;
        gap: 8px !important;
    }
    #green_mobile_nav .overlay-content > a,
    #green_mobile_nav .overlay-content > .cm_dropdown {
        padding: 14px 18px !important;
        font-size: 1rem !important;
        min-height: 52px !important;
    }
}

/* ============================================================================
   42. v11.17 — CLIENT TOP BAR LAYOUT POLISH + PRICES CAROUSEL PREMIUM
   ============================================================================
   Addresses two dashboard regressions:

   A) Top bar (.navbar.navbar-dark.navbar-static in layouts/header.php) had
      cluttered horizontal layout: huge hamburger between logo and content,
      no spacing between top-right icons, telegram badge overlapping balance.
      We turn the navbar into a clean 3-region flex row:
        [ logo ]  ……spacer……  [ collapsed nav + top_icons_  +  hamburger ]
      On desktop the hamburger is hidden, navbar-nav is inline. On mobile
      logo is left, hamburger moves to the FAR RIGHT, and a horizontal
      icon strip stays compact and aligned.

   B) "Prices & Services Updates" carousel (#carouselContent in dashboard_new.php)
      rendered as a flat grey block with grey text — unreadable. We turn
      it into a premium dark-glass card with gold-accented header, big
      readable price text, animated rotating items, and prev/next arrows
      styled as circular gold buttons.                                        */

/* ---- A) Top bar layout ---- */
.navbar.navbar-expand-xl.navbar-dark.navbar-static {
    display: flex !important;
    /* v11.18: WRAP on mobile so collapse menu and top-icons cluster end up on
       their own rows; nowrap (v11.17) crushed all top icons into one tile. */
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.6rem !important;
    padding: 0.7rem 1.2rem !important;
    min-height: 64px;
}
@media (min-width: 1200px) {
    /* Desktop — keep it single row */
    .navbar.navbar-expand-xl.navbar-dark.navbar-static {
        flex-wrap: nowrap !important;
    }
}

/* The wrapper <div class="div"> that holds <ul class="top_icons__"> —
   make it a flex container so its child <ul> can spread horizontally
   instead of collapsing to zero width and stacking icons on top of
   each other. */
.navbar > .div,
.navbar > div:has(> .top_icons__) {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
/* Logo sits at the very left, never shrinks */
.navbar.navbar-expand-xl > .navbar-brand {
    flex: 0 0 auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}
.navbar.navbar-expand-xl > .navbar-brand img {
    max-height: 44px !important;
    width: auto !important;
    object-fit: contain;
    transition: transform var(--m-tr-fast);
}
.navbar.navbar-expand-xl > .navbar-brand:hover img {
    transform: scale(1.04);
}

/* Hamburger — square but reasonably sized (44x44), pushed to the FAR RIGHT
   on mobile by ordering it last; hidden on desktop (xl+) where the nav is
   already expanded. */
.navbar.navbar-expand-xl .navbar-toggler,
.navbar.navbar-expand-xl > .d-xl-none {
    order: 99 !important;
    flex: 0 0 auto !important;
    margin-left: 0.5rem !important;
}
.navbar.navbar-expand-xl .navbar-toggler {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--m-border-2) !important;
    background: var(--m-surface) !important;
    border-radius: var(--m-radius) !important;
    color: var(--m-text-1) !important;
    font-size: 1.15rem !important;
    transition: all var(--m-tr-fast);
}
.navbar.navbar-expand-xl .navbar-toggler:hover {
    background: var(--m-surface-2) !important;
    border-color: var(--m-accent-ring) !important;
    color: var(--m-text) !important;
    transform: translateY(-1px);
}
.navbar.navbar-expand-xl .navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--m-accent-ring) !important;
    outline: none !important;
}
.navbar.navbar-expand-xl .navbar-toggler i {
    line-height: 1 !important;
}

/* Collapsed main menu (mobile dropdown panel) */
.navbar.navbar-expand-xl .navbar-collapse {
    flex-basis: 100%;
}
@media (min-width: 1200px) {
    .navbar.navbar-expand-xl .navbar-collapse {
        flex-basis: auto !important;
        flex-grow: 1 !important;
        margin: 0 1rem !important;
    }
    .navbar.navbar-expand-xl > .d-xl-none {
        display: none !important;
    }
}

/* ============================================================================
   v11.19 NUCLEAR TOP-ICONS REWRITE
   Root cause of overlap: bootstrap_limitless.css applies
     .navbar-expand-xl .navbar-nav-link { margin-right: -1.25rem; ... }
   This negative margin pulls every adjacent tile -20px sideways, so 3 tiles
   physically overlap into a single ~40x40 spot.
   Plus <div class="dropdown h-100"> wrapper has height: 100% relative to a
   zero-height parent → wrapper collapses, icons stack at 0,0.
   Fix: hard-reset margins/dimensions and force inline-flex on every level. */
.navbar .top_icons__ {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.45rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: auto !important;
}
/* Each <li> in the strip — reset to clean flex child */
.navbar .top_icons__ > li,
.navbar .top_icons__ > li.nav-item {
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    transform: none !important;
    list-style: none !important;
}
/* The inner .dropdown wrapper (which has h-100 — useless when parent
   has no fixed height). Reset to inline-block, auto sized. */
.navbar .top_icons__ > li > .dropdown,
.navbar .top_icons__ > li > .dropdown.h-100 {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}
/* The actual trigger <a> — the tile button. The CRITICAL line below is
   `margin: 0 !important;` which neutralizes bootstrap_limitless's
   negative side margins that caused the overlap. */
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link,
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link.dropdown-toggle,
.navbar .top_icons__ > li > a.navbar-nav-link,
.navbar .top_icons__ > li > a.navbar-nav-link.dropdown-toggle {
    margin: 0 !important;
    padding: 0 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    line-height: 1 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.04),
        rgba(255, 255, 255, 0.015)) !important;
    border: 1px solid var(--m-border-2) !important;
    color: var(--m-text-1) !important;
    transition:
        transform var(--m-tr-fast),
        background var(--m-tr-fast),
        border-color var(--m-tr-fast),
        box-shadow var(--m-tr-fast) !important;
    text-decoration: none !important;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
    gap: 0.45rem !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.2) !important;
    white-space: nowrap !important;
}
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link:hover,
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link.dropdown-toggle:hover,
.navbar .top_icons__ > li > a.navbar-nav-link:hover,
.navbar .top_icons__ > li > a.navbar-nav-link.dropdown-toggle:hover {
    background: linear-gradient(180deg,
        rgba(91, 140, 255, 0.10),
        rgba(91, 140, 255, 0.02)) !important;
    border-color: var(--m-accent-ring) !important;
    color: var(--m-text) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 18px rgba(91, 140, 255, 0.20),
        0 0 0 1px var(--m-accent-ring) !important;
}
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link:focus,
.navbar .top_icons__ > li > a.navbar-nav-link:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--m-accent-ring) !important;
}
.navbar .top_icons__ > li img {
    max-width: 18px !important;
    width: 18px !important;
    height: 18px !important;
    object-fit: contain !important;
    flex: 0 0 auto !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.navbar .top_icons__ > li .fa-bell,
.navbar .top_icons__ > li i {
    font-size: 1rem !important;
    color: var(--m-text-1) !important;
    line-height: 1 !important;
}
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link:hover img,
.navbar .top_icons__ > li > a.navbar-nav-link:hover img,
.navbar .top_icons__ > li > .dropdown > a.navbar-nav-link:hover i,
.navbar .top_icons__ > li > a.navbar-nav-link:hover i {
    color: #fff !important;
}
/* Telegram badge — pill with accent */
.navbar .top_icons__ .tele-count,
.navbar .top_icons__ .badge.bg-info {
    background: var(--m-accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.15rem 0.5rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    min-width: 20px !important;
    text-align: center;
    line-height: 1.2 !important;
    box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.15);
    margin-left: 0.35rem !important;
}
.navbar .top_icons__ a.dropdown-toggle::after {
    display: none !important;
}

/* User balance & name pill (dropdown-user) — premium gold-tinted.
   Higher specificity wins over the generic tile rules above. */
.navbar .top_icons__ > li.dropdown-user,
.navbar .top_icons__ > li.nav-item.dropdown-user {
    margin-left: 0.25rem !important;
}
.navbar .top_icons__ > li.dropdown-user > a.navbar-nav-link,
.navbar .top_icons__ > li.dropdown-user > a.navbar-nav-link.dropdown-toggle {
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.14),
        rgba(212, 175, 55, 0.03)) !important;
    border: 1px solid var(--m-gold-ring) !important;
    color: var(--m-gold-hi) !important;
    font-weight: 600 !important;
    padding: 0 1.05rem !important;
    height: 42px !important;
    border-radius: 12px !important;
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.20),
        0 0 0 1px rgba(212, 175, 55, 0.10),
        0 4px 14px var(--m-gold-glow) !important;
    letter-spacing: 0.01em;
    margin: 0 !important;
}
.navbar .top_icons__ > li.dropdown-user > a.navbar-nav-link:hover,
.navbar .top_icons__ > li.dropdown-user > a.navbar-nav-link.dropdown-toggle:hover {
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.22),
        rgba(212, 175, 55, 0.06)) !important;
    border-color: var(--m-gold) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.25),
        0 0 0 1px var(--m-gold),
        0 8px 24px var(--m-gold-glow) !important;
}
.navbar .top_icons__ > li.dropdown-user > a.navbar-nav-link::after {
    margin-left: 0.5rem !important;
    color: var(--m-gold-hi) !important;
    opacity: 0.85;
    border-top-color: var(--m-gold-hi) !important;
}

/* ============================================================================
   v11.20 MOBILE MAIN MENU — premium animated submenu + center alignment
   ============================================================================
   At < 1200px the .navbar-expand-xl is collapsed and the .navbar-nav is a
   vertical stack inside .navbar-collapse. We need:
     (a) ALL nav items (dropdown and non-dropdown) to align identically —
         center, full row, consistent padding.
     (b) Submenus to drop INLINE under their parent with smooth animation,
         NOT floating sideways. Bootstrap 4.x uses Popper.js which writes
         inline styles like:
            style="position: absolute; transform: translate3d(0,32px,0);
                   top: 0; left: 0; will-change: transform;"
         We must override every single one of these properties with
         !important to win, since the inline styles will keep being
         re-applied when the user clicks the toggle.                          */
@media (max-width: 1199.98px) {
    /* Main menu list — full width column */
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.15rem !important;
        padding: 0.5rem 0 !important;
    }
    /* Every <li> in main nav — full row */
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li.nav-item,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li.nav-item.dropdown {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        display: block !important;
    }
    /* Every menu link — pill-style card, CENTER aligned content */
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li > a.navbar-nav-link,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li > a.navbar-nav-link.dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.85rem 1.25rem !important;
        font-size: 0.98rem !important;
        font-weight: 500 !important;
        color: var(--m-text-1) !important;
        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: var(--m-radius) !important;
        position: relative !important;
        transition: all var(--m-tr-fast) !important;
        text-decoration: none !important;
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li > a.navbar-nav-link:hover,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li > a.navbar-nav-link.dropdown-toggle:hover,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li.show > a.navbar-nav-link.dropdown-toggle {
        background: linear-gradient(180deg,
            rgba(91, 140, 255, 0.10),
            rgba(91, 140, 255, 0.02)) !important;
        border-color: var(--m-accent-ring) !important;
        color: #fff !important;
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li > a.navbar-nav-link i,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li > a.navbar-nav-link .fa {
        margin-right: 0.6rem !important;
        font-size: 1.05rem !important;
        color: var(--m-gold-hi) !important;
        flex: 0 0 auto !important;
    }
    /* Dropdown arrow — caret on right side, animates on open */
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li.dropdown > a.dropdown-toggle::after {
        margin-left: 0.6rem !important;
        border-top-color: var(--m-text-2) !important;
        transition: transform 0.3s ease !important;
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav > li.dropdown.show > a.dropdown-toggle::after {
        transform: rotate(180deg) !important;
        border-top-color: var(--m-gold-hi) !important;
    }

    /* === SUBMENU === inline push-down, kill Popper completely === */
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu {
        /* Position: kill every Popper-set property */
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        inset: auto !important;
        transform: none !important;
        -webkit-transform: none !important;
        will-change: auto !important;
        float: none !important;

        /* Sizing */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        /* Box */
        margin: 0.25rem 0 0.5rem 0 !important;
        padding: 0.4rem 0 !important;
        background: linear-gradient(180deg,
            rgba(20, 22, 30, 0.75),
            rgba(16, 18, 26, 0.55)) !important;
        border: 1px solid var(--m-border-2) !important;
        border-radius: var(--m-radius) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.025),
            0 4px 18px rgba(0, 0, 0, 0.35) !important;

        /* Smooth open/close animation via Bootstrap .show toggle */
        display: none;
        opacity: 0;
        transform-origin: top center !important;
        transition: opacity 0.25s ease !important;
        animation: none !important;
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        animation: mPushDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    @keyframes mPushDown {
        0% {
            opacity: 0;
            max-height: 0;
            transform: translateY(-6px) !important;
        }
        100% {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0) !important;
        }
    }

    /* Submenu items */
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item,
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu .nav-link.dropdown-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0.65rem 2.5rem 0.65rem 2.75rem !important;
        background: transparent !important;
        color: var(--m-text-1) !important;
        font-size: 0.92rem !important;
        font-weight: 500 !important;
        border: 0 !important;
        border-radius: 0 !important;
        position: relative !important;
        text-decoration: none !important;
        transition: all var(--m-tr-fast) !important;
        white-space: normal !important;
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item::before {
        content: '';
        position: absolute !important;
        left: 1.5rem !important;
        top: 50% !important;
        width: 5px !important;
        height: 5px !important;
        margin-top: -2.5px !important;
        border-radius: 50% !important;
        background: var(--m-gold-hi) !important;
        opacity: 0.55;
        transition: all var(--m-tr-fast);
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item:hover {
        background: rgba(212, 175, 55, 0.10) !important;
        color: #fff !important;
    }
    .navbar.navbar-expand-xl .navbar-collapse .navbar-nav .dropdown-menu .dropdown-item:hover::before {
        background: var(--m-gold) !important;
        opacity: 1;
        box-shadow: 0 0 10px var(--m-gold-glow);
        transform: scale(1.4);
    }
}

/* Mobile: keep strip compact, icons stay visible */
@media (max-width: 1199.98px) {
    .navbar.navbar-expand-xl.navbar-dark.navbar-static {
        padding: 0.5rem 0.75rem !important;
        gap: 0.35rem !important;
    }
    .navbar.navbar-expand-xl > .navbar-brand img {
        max-height: 36px !important;
    }
    .navbar .top_icons__ {
        gap: 0.25rem !important;
    }
    .navbar .top_icons__ > li > .dropdown > a.navbar-nav-link.dropdown-toggle,
    .navbar .top_icons__ > li > a.navbar-nav-link {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 0.55rem !important;
        font-size: 0.82rem !important;
    }
    .navbar .top_icons__ .dropdown-user > a.navbar-nav-link {
        padding: 0 0.7rem !important;
        height: 36px !important;
        font-size: 0.82rem !important;
    }
    /* Hide TELEGRAM label text on small screens — keep just icon + badge */
    .navbar .top_icons__ .d-xl-none {
        display: none !important;
    }
}
@media (max-width: 575.98px) {
    /* Phones — balance shows currency + amount, hide username + plan */
    .navbar .top_icons__ .dropdown-user > a.navbar-nav-link {
        padding: 0 0.6rem !important;
        font-size: 0.78rem !important;
    }
}

/* ---- B) Prices & Services Updates carousel ---- */
/* The outer card (.card containing #carouselContent) */
.card:has(#carouselContent),
.card:has(.news_slider) {
    background: linear-gradient(135deg,
        var(--m-surface-2),
        var(--m-surface)) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow) !important;
    overflow: hidden;
    position: relative;
}
.card:has(#carouselContent)::before,
.card:has(.news_slider)::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--m-gold), var(--m-accent), var(--m-gold));
    opacity: 0.8;
}

/* Section header inside the carousel card */
.card .card-body h3,
.card .card-body > .row > div > h3 {
    color: var(--m-text) !important;
    font-family: var(--m-font-display) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    margin: 0 0 1rem 0 !important;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--m-border);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.card .card-body h3::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 22px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--m-gold-hi), var(--m-gold));
    box-shadow: 0 0 12px var(--m-gold-glow);
}

/* The carousel container */
#carouselContent.carousel,
.carousel.slide.pb-3 {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}
#carouselContent .carousel-inner,
.news_slider {
    background: rgba(20, 22, 30, 0.55) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    padding: 0.8rem 1.1rem !important;
    min-height: 68px;
    position: relative;
    overflow: hidden;
}
#carouselContent .carousel-inner::before,
.news_slider::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, var(--m-gold), var(--m-accent));
    border-radius: 3px 0 0 3px;
}

/* Carousel items — each price update */
#carouselContent .carousel-item,
.news_slider .carousel-item {
    padding: 0.4rem 0 0.4rem 0.6rem !important;
    color: var(--m-text-1) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}
#carouselContent .carousel-item h6,
.news_slider .carousel-item h6,
#carouselContent .carousel-item p,
.news_slider .carousel-item p {
    color: var(--m-text-1) !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
    letter-spacing: 0.005em;
}
#carouselContent .carousel-item .icon-megaphone,
.news_slider .carousel-item .icon-megaphone,
#carouselContent .carousel-item [class*="icon-megaphone"] {
    color: var(--m-gold-hi) !important;
    font-size: 1.05rem !important;
    margin-right: 0.55rem !important;
    text-shadow: 0 0 12px var(--m-gold-glow);
}

/* Prev/Next controls — circular gold buttons */
.carousel-control-prev,
.carousel-control-next,
#carouselContent .carousel-control-prev,
#carouselContent .carousel-control-next {
    position: relative !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-gold-ring) !important;
    color: var(--m-gold-hi) !important;
    opacity: 1 !important;
    margin: 0 0.25rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--m-tr-fast) !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    box-shadow: 0 0 0 1px var(--m-gold-ring), 0 2px 8px var(--m-gold-glow);
}
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: linear-gradient(135deg, var(--m-gold), var(--m-gold-hi)) !important;
    border-color: var(--m-gold) !important;
    color: #0b0c10 !important;
    transform: translateY(-1px) scale(1.05);
    box-shadow:
        0 0 0 1px var(--m-gold),
        0 8px 22px var(--m-gold-glow) !important;
}
/* v11.26: brighter, larger gold chevrons. Specificity raised to #carouselContent
   because dashboard_new.php has an inline <style> (loaded AFTER main.css) that
   forces background-image: url(icon_left.png/icon_right.png) !important and
   width/height: 15/28 px. Prefixing every selector with #carouselContent makes
   our specificity 0,1,1,0 vs the inline 0,0,1,0 — we win regardless of order. */
#carouselContent .carousel-control-prev-icon,
#carouselContent .carousel-control-next-icon,
.news_slider .carousel-control-prev-icon,
.news_slider .carousel-control-next-icon {
    width: 20px !important;
    height: 20px !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    filter: drop-shadow(0 0 5px var(--m-gold-glow)) !important;
}
#carouselContent .carousel-control-prev-icon,
.news_slider .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffd700' stroke='%23ffd700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") !important;
}
#carouselContent .carousel-control-next-icon,
.news_slider .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffd700' stroke='%23ffd700' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
}
/* On hover swap icon to dark for contrast on gold-filled button */
#carouselContent .carousel-control-prev:hover .carousel-control-prev-icon,
#carouselContent .carousel-control-next:hover .carousel-control-next-icon {
    filter: brightness(0) saturate(100%) !important;
}

/* "All Price Changes" button — match other CTAs */
.btn.ThemeColorButton.rounded-round {
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    border: 1px solid var(--m-accent) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.55rem 1.4rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(91, 140, 255, 0.25) !important;
    transition: all var(--m-tr-fast);
}
.btn.ThemeColorButton.rounded-round:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(91, 140, 255, 0.35) !important;
}

/* myicons row holding the prev/next arrows — center them, give vertical room */
.myicons {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-top: 0.5rem;
}

/* On phones — stack prices header above the slider and arrows row */
@media (max-width: 575.98px) {
    .card .card-body h3 { font-size: 1.05rem !important; }
    #carouselContent .carousel-inner,
    .news_slider {
        padding: 0.75rem 0.9rem !important;
        min-height: 60px;
    }
    #carouselContent .carousel-item h6,
    .news_slider .carousel-item h6 {
        font-size: 0.88rem !important;
    }
    #carouselContent .carousel-control-prev,
    #carouselContent .carousel-control-next { width: 32px !important; height: 32px !important; }
    #carouselContent .carousel-control-prev-icon,
    #carouselContent .carousel-control-next-icon { width: 16px !important; height: 16px !important; }
}

/* ============================================================================
   43. v11.21 — /page/add_credits PAGE — DARK PAYMENT DETAILS + PREMIUM FORM
   ============================================================================
   The add_credits view (application/views/add_credits.php) has multiple
   inline styles forcing light backgrounds and hardcoded colors:
     • <div class="card-body" style="background-color:#F5F5F5;">  (PAYMENT DETAILS)
     • <input style="font-size:24px; color:#E81516;">             (red Credits input)
     • Calculation table cells with style="color:#44519E" / #E81516 / green
     • Payment method radio labels with style="border:1px solid #CCCCCC"
   We use attribute selectors [style*="..."] to win over the inline rules
   with !important + high specificity, converting everything to the dark
   theme palette while preserving semantic colors (gold/accent/danger).      */

/* --- Page header / back button on Buy Credits --- */
.page-header.border-bottom-0 .page-title h4 {
    color: var(--m-text) !important;
    font-family: var(--m-font-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-header .BackButton-Link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-border-2);
    color: var(--m-accent) !important;
    transition: all var(--m-tr-fast);
    text-decoration: none !important;
    flex: 0 0 auto;
}
.page-header .BackButton-Link:hover {
    background: var(--m-accent) !important;
    color: #fff !important;
    transform: translateX(-2px);
}
.page-header .BackButton-Link i { margin: 0 !important; }

/* --- Credits input label --- */
.content .control-label,
.content label.control-label {
    color: var(--m-text-1) !important;
    font-weight: 600 !important;
    font-size: 0.92rem !important;
    margin-bottom: 0.6rem !important;
    display: block !important;
    letter-spacing: 0.01em;
}
.required_field {
    color: var(--m-danger) !important;
    margin-left: 0.25rem !important;
    font-weight: 700 !important;
}

/* --- Credits input field (txtCredits) — override inline red color + small font --- */
input#txtCredits,
input#txtCredits[style] {
    color: var(--m-gold-hi) !important;
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius) !important;
    padding: 0.85rem 1.1rem !important;
    height: auto !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    transition: all var(--m-tr-fast);
    width: 100% !important;
}
input#txtCredits:focus {
    border-color: var(--m-accent) !important;
    box-shadow:
        0 0 0 3px var(--m-accent-ring),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    outline: none !important;
    background: var(--m-surface) !important;
}

/* --- Payment method radio tiles (USDT card etc.) --- */
.col-lg-6 label.d-block[style*="background:url"],
.content label.d-block[style*="background:url"] {
    background-color: var(--m-surface-2) !important;
    background-blend-mode: normal !important;
    border: 1px solid var(--m-border-2) !important;
    color: var(--m-text-1) !important;
    border-radius: var(--m-radius) !important;
    transition: all var(--m-tr-fast) !important;
    cursor: pointer;
}
.col-lg-6 label.d-block[style*="background:url"]:hover {
    border-color: var(--m-accent-ring) !important;
    box-shadow: 0 6px 18px rgba(91,140,255,0.15) !important;
    transform: translateY(-1px);
}
.col-lg-6 label.d-block[style*="background:url"] > div[style*="rgba(0,0,0,0.1)"],
.col-lg-6 label.d-block[style*="background:url"] > div[style*="background:rgba"] {
    background: linear-gradient(180deg,
        rgba(11,13,20,0.0),
        rgba(11,13,20,0.85)) !important;
    color: var(--m-text) !important;
    font-weight: 600 !important;
    border-radius: 0 0 var(--m-radius) var(--m-radius) !important;
    padding: 8px 12px !important;
    letter-spacing: 0.03em;
}
.gateways {
    accent-color: var(--m-accent) !important;
}

/* --- PAYMENT DETAILS block (#dvInfo) — kill light bg, gold header --- */
#dvInfo,
#dvInfo .card,
#dvInfo .card.card-info,
#dvInfo .card-body,
#dvInfo .card-body[style*="background-color:#F5F5F5"],
#dvInfo .card-body[style*="#F5F5F5"] {
    background: var(--m-surface-2) !important;
    color: var(--m-text-1) !important;
    border: 0 !important;
}
#dvInfo .card,
#dvInfo .card.card-info {
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--m-shadow) !important;
    margin-bottom: 1.5rem !important;
}
#dvInfo .card-body {
    padding: 1.5rem !important;
}
#dvInfo blockquote,
#dvInfo blockquote.card-bodyquote,
#dvInfo .card-bodyquote {
    background: transparent !important;
    border: 0 !important;
    color: var(--m-text-1) !important;
    margin: 0 !important;
    padding: 0 !important;
    quotes: none !important;
}
#dvInfo blockquote::before,
#dvInfo blockquote::after { content: none !important; }
#dvInfo blockquote footer,
#dvInfo blockquote > footer,
#dvInfo blockquote footer strong {
    background: linear-gradient(135deg,
        rgba(212,175,55,0.16),
        rgba(212,175,55,0.04)) !important;
    color: var(--m-gold-hi) !important;
    border: 1px solid var(--m-gold-ring) !important;
    border-radius: var(--m-radius) !important;
    padding: 0.85rem 1rem !important;
    display: block !important;
    margin: 0 0 1.25rem 0 !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    box-shadow:
        inset 0 1px 0 rgba(212,175,55,0.2),
        0 2px 10px var(--m-gold-glow) !important;
    text-shadow: 0 0 12px var(--m-gold-glow);
}
#dvInfo blockquote footer strong {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    box-shadow: none !important;
}
/* Body text — v11.26 broadens scope to #dvInfo .card-body because the empty
   <p id="dvPDtls"></p> auto-closes when block-level admin HTML lands inside.
   Excludes the heading <blockquote> which has its own gold callout style. */
#dvInfo .card-body p,
#dvInfo .card-body span,
#dvInfo .card-body font,
#dvInfo .card-body div:not(.row):not([class*="col-"]):not(.col),
#dvInfo .card-body li,
#dvInfo .card-body label {
    color: var(--m-text-1) !important;
    font-size: 0.95rem !important;
    line-height: 1.85 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    background: transparent !important;
}
#dvInfo .card-body strong,
#dvInfo .card-body b {
    color: var(--m-gold-hi) !important;
    font-weight: 700 !important;
}
/* Ordinary anchors (not Telegram pills — those are styled below) */
#dvInfo .card-body a:not([href*="t.me"]):not([href*="telegram"]):not([href*="://t."]) {
    color: var(--m-accent) !important;
    text-decoration: underline;
    overflow-wrap: anywhere;
    word-break: normal;
}
#dvInfo .card-body a:not([href*="t.me"]):not([href*="telegram"]):not([href*="://t."]):hover {
    color: var(--m-accent-hover) !important;
}

/* ============================================================================
   v11.26: PAYMENT DETAILS — full sweep (decoration kill + grid → callout)
   ============================================================================
   Admin's saved Description (rendered into #dvInfo .card-body) typically is:

     <p style="border-left:5px solid gold">…spacer with yellow bar…</p>
     <p>Pay via Bitcoin to: bc1q…</p>
     <div class="row">                              ← Bootstrap grid
       <div class="col"><strong><i>After payment contact admin</i></strong></div>
       <div class="col"><a href="https://t.me/unllock">…</a></div>
       <div class="col">or</div>
       <div class="col"><a href="https://t.me/AlexUnlocker">…</a></div>
     </div>

   Important parser quirk:
     The PHP view places <p id="dvPDtls"><?= $message ?></p>. When $message
     contains block-level tags (.row / <div>), the HTML parser auto-closes
     <p id="dvPDtls"></p> at the first block child, so the .row, the body
     <p>, and the t.me links wind up as SIBLINGS of #dvPDtls (not children).
     Therefore every rule must be scoped to #dvInfo .card-body, not #dvPDtls.

   Sweep order:
     Step 1: hide decorative empties + injected $ images and gold <hr> bars.
     Step 2: universal sweep — strip borders / backgrounds / shadows /
             min-width inflicted by inline admin styles, scoped to blockquote
             (the PAYMENT DETAILS heading wrapper) so the rest stays clean.
     Step 3: turn the Bootstrap .row into a flex-wrap callout box. The first
             .col claims a full row and is styled as a gold heading, the
             rest (pills + "or") flow inline horizontally below.
     Step 4: normalize inline italic/bold inside <strong>/<b>/<i>/<em>.
     Step 5: stack non-grid content (paragraphs, divs) as readable lines.
   ============================================================================ */

/* --- Step 1: hide decorative elements --- */
#dvInfo .card-body img,
#dvInfo .card-body hr,
#dvInfo .card-body br + br,
#dvInfo .card-body *:empty:not(a):not(input):not(.icon),
#dvInfo .card-body p:has(br:only-child),
#dvInfo .card-body div:has(br:only-child) {
    display: none !important;
}

/* --- Step 2: universal decoration strip (scoped to #dvInfo content) --- */
#dvInfo .card-body blockquote,
#dvInfo .card-body blockquote *,
#dvInfo .card-body blockquote *::before,
#dvInfo .card-body blockquote *::after {
    border: 0 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
}

/* --- Step 3 (v11.26): turn admin's .row/.col grid into a centered callout --- */
/* The .row becomes the callout wrapper: flex-wrap so the first .col can claim
   a full row (heading), and the remaining cells (pills + "or") flow inline. */
#dvInfo .card-body .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.4rem 0.55rem !important;
    margin: 1.5rem 0 0.5rem 0 !important;
    padding: 1.25rem 1.5rem !important;
    background: linear-gradient(180deg,
        rgba(91, 140, 255, 0.08),
        rgba(91, 140, 255, 0.02)) !important;
    border: 1px solid rgba(91, 140, 255, 0.22) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: inset 0 1px 0 rgba(91, 140, 255, 0.06) !important;
    text-align: center !important;
}
/* All cells: shrink to content, no Bootstrap padding, inline-flex so pill child
   keeps natural pill size and "or" plain-text col stays small. */
#dvInfo .card-body .row > [class*="col-"],
#dvInfo .card-body .row > .col,
#dvInfo .card-body .row > .col-auto {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
}
/* The first cell holds the "After payment contact admin" label — promote it to
   a full-width centered heading above the pills. */
#dvInfo .card-body .row > [class*="col-"]:first-child,
#dvInfo .card-body .row > .col:first-child {
    flex: 1 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 0.6rem 0 !important;
    color: var(--m-gold-hi) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    line-height: 1.4 !important;
    text-shadow: 0 0 12px var(--m-gold-glow);
}
/* Make <strong>/<i> inside that heading inherit the heading look (kill italic) */
#dvInfo .card-body .row > [class*="col-"]:first-child strong,
#dvInfo .card-body .row > [class*="col-"]:first-child b,
#dvInfo .card-body .row > [class*="col-"]:first-child i,
#dvInfo .card-body .row > [class*="col-"]:first-child em,
#dvInfo .card-body .row > .col:first-child strong,
#dvInfo .card-body .row > .col:first-child b,
#dvInfo .card-body .row > .col:first-child i,
#dvInfo .card-body .row > .col:first-child em {
    color: inherit !important;
    font-style: normal !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    display: inline !important;
}
/* "or" cell — plain text between pills */
#dvInfo .card-body .row > [class*="col-"]:not(:first-child):not(:has(a)),
#dvInfo .card-body .row > .col:not(:first-child):not(:has(a)) {
    color: var(--m-text-2) !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
    opacity: 0.85 !important;
    padding: 0 0.35rem !important;
    text-transform: lowercase !important;
}
/* Tables coming from DB — flatten to block lines */
#dvInfo .card-body table,
#dvInfo .card-body tbody,
#dvInfo .card-body thead,
#dvInfo .card-body tr,
#dvInfo .card-body td,
#dvInfo .card-body th {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: center !important;
    border-collapse: separate !important;
    background: transparent !important;
}

/* --- Step 4: force inline italic/bold to behave normally + readable --- */
#dvInfo .card-body i,
#dvInfo .card-body em,
#dvInfo .card-body strong,
#dvInfo .card-body b,
#dvInfo .card-body strong *,
#dvInfo .card-body b *,
#dvInfo .card-body i *,
#dvInfo .card-body em *,
#dvInfo .card-body a * {
    font-style: normal !important;
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    float: none !important;
}

/* --- Step 5: stack non-pill content in #dvPDtls as readable lines --- */
#dvInfo .card-body #dvPDtls,
#dvInfo .card-body #dvPDtls > *:not(.row):not([class*="col-"]) {
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 0 0.55rem 0 !important;
}
#dvInfo .card-body p {
    display: block !important;
    margin: 0 0 0.55rem 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    background: transparent !important;
}

/* ---- Premium Telegram contact pills ----
   v11.26: Scope changed from #dvPDtls to .card-body. The empty <p id="dvPDtls">
   auto-closes when admin's block-level HTML (.row / <div>) is injected,
   leaving the t.me links as siblings, not descendants of #dvPDtls. */
#dvInfo .card-body a[href*="t.me"],
#dvInfo .card-body a[href*="telegram.me"],
#dvInfo .card-body a[href*="://t."] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 1rem !important;
    background: linear-gradient(135deg,
        rgba(91, 140, 255, 0.18),
        rgba(91, 140, 255, 0.06)) !important;
    border: 1px solid var(--m-accent-ring) !important;
    border-radius: 999px !important;
    color: var(--m-accent) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    text-decoration: none !important;
    margin: 0.25rem 0.4rem !important;
    transition: all var(--m-tr-fast) !important;
    word-break: normal !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    vertical-align: middle;
}
#dvInfo .card-body a[href*="t.me"]::before,
#dvInfo .card-body a[href*="telegram.me"]::before {
    content: '\2708';   /* paper-plane */
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.9;
}
/* Kill italic on <i>/<em> wrappers inside the link (admin loves <a><strong><i>...) */
#dvInfo .card-body a[href*="t.me"] *,
#dvInfo .card-body a[href*="telegram.me"] * {
    font-style: normal !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    color: inherit !important;
    text-shadow: none !important;
    background: transparent !important;
    display: inline !important;
}
#dvInfo .card-body a[href*="t.me"]:hover,
#dvInfo .card-body a[href*="telegram.me"]:hover {
    background: linear-gradient(135deg,
        rgba(91, 140, 255, 0.30),
        rgba(91, 140, 255, 0.12)) !important;
    border-color: var(--m-accent) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(91, 140, 255, 0.30) !important;
    text-decoration: none !important;
}

/* ===== v11.24: "After payment contact admin" callout =====
   Layout we want, regardless of how admin saved HTML:
     +-----------------------------------------------+
     |       AFTER PAYMENT CONTACT ADMIN             |  <- centered heading
     |                                               |
     |    [✈ t.me/unllock]  or  [✈ t.me/AlexUnl..]   |  <- pills horizontal
     +-----------------------------------------------+
   Strategy:
     - Wrap the whole <p> as a centered callout box (block, text-align center)
     - First <strong>/<b> child becomes a full-row heading above pills
     - Plain text "or" stays inline between pills (natural inline flow)        */
#dvInfo #dvPDtls p:has(a[href*="t.me"]),
#dvInfo #dvPDtls p:has(a[href*="telegram"]) {
    display: block !important;
    padding: 1.25rem 1.5rem !important;
    margin: 1.5rem 0 0.5rem 0 !important;
    background: linear-gradient(180deg,
        rgba(91, 140, 255, 0.08),
        rgba(91, 140, 255, 0.02)) !important;
    border: 1px solid rgba(91, 140, 255, 0.22) !important;
    border-radius: var(--m-radius-lg) !important;
    color: var(--m-text-1) !important;
    line-height: 2.4 !important;
    text-align: center !important;
    word-break: normal !important;
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    font-size: 0.95rem !important;
    box-shadow: inset 0 1px 0 rgba(91, 140, 255, 0.06) !important;
}
/* First <strong>/<b> in the pills paragraph — full-row centered HEADING */
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > strong:first-child,
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > b:first-child,
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > strong,
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > b {
    display: block !important;
    width: 100% !important;
    margin: 0 0 1rem 0 !important;
    text-align: center !important;
    color: var(--m-gold-hi) !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}
/* Same when admin wrapped "After payment" in <strong><i>...</i></strong> */
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > strong > i,
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > b > i,
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > strong > em,
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > b > em {
    font-style: normal !important;
    display: inline !important;
    color: inherit !important;
}
/* Pills inside callout — ensure horizontal flow with breathing room */
#dvInfo #dvPDtls p:has(a[href*="t.me"]) > a[href*="t.me"] {
    margin: 0.25rem 0.45rem !important;
    vertical-align: middle !important;
}
/* The "or" text node between two pills — styled by virtue of parent text-align center */

/* Edge case (v11.26): when "After payment..." sits in a SEPARATE <p> whose
   ONLY child is a <strong>/<b> (i.e. nothing else in the paragraph), promote
   it to a centered gold heading. The :only-child guard prevents legitimate
   inline emphasis (e.g. "<strong>Bitcoin:</strong> bc1q…") from being
   transformed into an uppercase callout. */
#dvInfo #dvPDtls p:has(> strong:only-child),
#dvInfo #dvPDtls p:has(> b:only-child) {
    text-align: center !important;
    margin: 1.25rem 0 0.5rem 0 !important;
    padding: 0 !important;
    color: var(--m-gold-hi) !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
}

/* --- Calculations card (#dvCalculations) --- */
#dvCalculations,
#dvCalculations .card,
#dvCalculations .card-body {
    background: var(--m-surface-2) !important;
    color: var(--m-text-1) !important;
    border: 0 !important;
}
#dvCalculations .card {
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    overflow: hidden;
    box-shadow: var(--m-shadow) !important;
}
#dvCalculations .card-body {
    padding: 1.5rem !important;
}
#dvCalculations table.clsBuyCredits,
#dvCalculations table.clsBuyCredits.table {
    color: var(--m-text-1) !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
}
#dvCalculations table.clsBuyCredits td,
#dvCalculations table.clsBuyCredits th {
    border-color: var(--m-border) !important;
    color: var(--m-text-1) !important;
    background: transparent !important;
    padding: 0.65rem 0.5rem !important;
    vertical-align: middle !important;
}
/* Override inline hardcoded colors on calculation rows */
#dvCalculations table.clsBuyCredits h5,
#dvCalculations table.clsBuyCredits h5[style*="color:#44519E"] {
    color: var(--m-text) !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}
#dvCalculations table.clsBuyCredits h5[style*="color:#E81516"] {
    color: var(--m-danger) !important;
    margin: 0 !important;
}
#dvCalculations table.clsBuyCredits h4[style*="color:green"] {
    color: var(--m-success) !important;
    margin: 0 !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    letter-spacing: -0.01em;
}
#dvCalculations table.clsBuyCredits .total-paynow {
    color: var(--m-success) !important;
    font-weight: 800 !important;
    font-size: 1.4rem !important;
    text-shadow: 0 0 14px rgba(34,197,94,0.35);
    letter-spacing: -0.01em;
}

/* --- Submit button (btnBuyCredits) — premium primary --- */
#btnBuyCredits,
button#btnBuyCredits,
.clsBigBtn {
    width: 100% !important;
    background: linear-gradient(135deg, var(--m-accent), var(--m-accent-active)) !important;
    border: 1px solid var(--m-accent) !important;
    color: #fff !important;
    border-radius: var(--m-radius) !important;
    padding: 0.95rem 1.5rem !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    box-shadow:
        0 6px 20px rgba(91,140,255,0.28),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: all var(--m-tr) !important;
    margin-top: 0.5rem !important;
    height: auto !important;
}
#btnBuyCredits:hover,
.clsBigBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 10px 28px rgba(91,140,255,0.40),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
#btnBuyCredits:active {
    transform: translateY(0) !important;
}

/* --- Page-level card wrapping the form --- */
.content > .card {
    background: linear-gradient(135deg,
        var(--m-surface-2),
        var(--m-surface)) !important;
    border: 1px solid var(--m-border-2) !important;
    border-radius: var(--m-radius-lg) !important;
    box-shadow: var(--m-shadow) !important;
    overflow: hidden;
    position: relative;
}
.content > .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--m-gold), var(--m-accent), var(--m-gold));
    opacity: 0.85;
    z-index: 1;
}
.content > .card > .row > [class*="col-"] > .card-body {
    padding: 1.5rem !important;
}

/* --- Error / hidden alert messages --- */
.content .alert.alert-success {
    background: rgba(34,197,94,0.10) !important;
    border: 1px solid rgba(34,197,94,0.30) !important;
    color: var(--m-success) !important;
    border-radius: var(--m-radius) !important;
}
.content .clsError {
    color: var(--m-danger) !important;
    background: rgba(239,68,68,0.10) !important;
    border: 1px solid rgba(239,68,68,0.30) !important;
    border-radius: var(--m-radius) !important;
    padding: 1rem 1.25rem !important;
    font-weight: 600 !important;
}

/* ============================================================================
   44. v11.27 / v11.28 — PLACE ORDER PAGES (IMEI / FILE / SERVER SERVICES)
   ============================================================================
   Pages: /page/imei_services, /page/file_services, /page/server_services
   View files: application/views/template/7/client_panel/{imei,file,server}_services_new.php

   v11.27: dark category heading + custom scrollbar + gold prices.
   v11.28: fix uniform row styling (PHP only wraps the FIRST row of each
           category in .test/.test1 — subsequent rows are raw siblings, so
           we use `.pkg_section .row[style*="…"]` to catch them all).

   The PHP renders each category divider via a hardcoded inline-style heading:
       <div class="test1">
         <h4 style="padding: 10px 10px;background: #efefef;">{Category}</h4>
       </div>
   Result on dark theme: light-grey rectangle with our forced light text →
   text completely unreadable (light-on-light).

   Plus the surrounding <style> tag in the view sets:
       .pkg_section { overflow-y: scroll; border: 1px solid #e6e5e7; }
       .GrayColor   { color: #b5b5b5 !important; }
       .left_package h5 { font-size: 15px !important; }
   Some of these clash with our dark surface — polishing them too.
   ============================================================================ */

/* ---- Outer scroll container — replace light grey border with theme border --- */
#pkg_section,
.pkg_section {
    background: var(--m-surface) !important;
    border: 1px solid var(--m-border) !important;
    border-radius: var(--m-radius) !important;
    padding: 0.5rem 0.75rem !important;
    box-shadow: var(--m-shadow-sm) !important;
}

/* ---- Custom scrollbar (WebKit / Chromium / Edge) ---- */
#pkg_section::-webkit-scrollbar,
.pkg_section::-webkit-scrollbar {
    width: 10px;
}
#pkg_section::-webkit-scrollbar-track,
.pkg_section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}
#pkg_section::-webkit-scrollbar-thumb,
.pkg_section::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--m-gold), var(--m-gold-hi));
    border-radius: 8px;
    border: 2px solid var(--m-surface);
}
#pkg_section::-webkit-scrollbar-thumb:hover,
.pkg_section::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--m-gold-hi), var(--m-gold));
}

/* ---- Firefox scrollbar (limited customization) ---- */
#pkg_section,
.pkg_section {
    scrollbar-width: thin;
    scrollbar-color: var(--m-gold) var(--m-surface);
}

/* ---- Category heading — kill inline #efefef + paint as gold-bordered divider ---- */
/* The h4 lives directly inside .test or .test1 wrappers (PHP-generated).
   Selector specificity 0,0,2,1 with !important beats inline style. */
#pkg_section .test > h4,
#pkg_section .test1 > h4,
.pkg_section .test > h4,
.pkg_section .test1 > h4,
#pkg_section .test h4[style*="efefef"],
#pkg_section .test1 h4[style*="efefef"],
.pkg_section .test h4[style*="efefef"],
.pkg_section .test1 h4[style*="efefef"] {
    background: linear-gradient(135deg,
        var(--m-surface-2),
        var(--m-surface-3)) !important;
    color: var(--m-gold-hi) !important;
    border: 1px solid var(--m-gold-ring) !important;
    border-left: 4px solid var(--m-gold) !important;
    border-radius: var(--m-radius) !important;
    padding: 0.85rem 1.1rem !important;
    margin: 1.1rem 0 0.6rem 0 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 14px var(--m-gold-glow) !important;
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.15),
        0 4px 14px rgba(0, 0, 0, 0.25) !important;
    line-height: 1.35 !important;
}
/* First category gets no extra top margin to hug the search bar */
#pkg_section .test1:first-child > h4,
.pkg_section .test1:first-child > h4 {
    margin-top: 0.25rem !important;
}

/* ---- Service rows — UNIFORM styling for ALL rows -------------------------
   v11.28 fix: PHP only wraps the FIRST row of each category in .test/.test1;
   subsequent rows are raw siblings of those wrappers. Using descendant
   combinator (`.pkg_section .row`) instead of `>` so EVERY service row gets
   the same separator + hover, not just the first row.
   The [style*="border-bottom"] qualifier prevents this from accidentally
   matching any other .row that may live elsewhere inside #pkg_section.
--------------------------------------------------------------------------- */
#pkg_section .row[style*="border-bottom"],
.pkg_section .row[style*="border-bottom"],
#pkg_section .row[style*="cursor: pointer"],
.pkg_section .row[style*="cursor: pointer"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
    padding: 0.95rem 0.5rem !important;
    margin: 0 !important;
    transition: background var(--m-tr-fast),
                border-color var(--m-tr-fast),
                transform var(--m-tr-fast) !important;
    border-radius: 6px;
    cursor: pointer;
}
/* Last row in the entire scroll container: no bottom border */
#pkg_section .row[style*="border-bottom"]:last-of-type,
.pkg_section .row[style*="border-bottom"]:last-of-type {
    border-bottom: 0 !important;
}
/* Row hover — subtle accent tint + gold underline (same for ALL rows) */
#pkg_section .row[style*="border-bottom"]:hover,
.pkg_section .row[style*="border-bottom"]:hover,
#pkg_section .row[style*="cursor: pointer"]:hover,
.pkg_section .row[style*="cursor: pointer"]:hover {
    background: linear-gradient(135deg,
        rgba(91, 140, 255, 0.07),
        rgba(212, 175, 55, 0.05)) !important;
    border-bottom-color: var(--m-gold) !important;
}

/* ---- Title column — kill inline border-right #ebe6e6 ---- */
#pkg_section .left_package,
.pkg_section .left_package,
#pkg_section .left_package[style*="border-right"],
.pkg_section .left_package[style*="border-right"] {
    border-right: 1px solid var(--m-border) !important;
    padding-right: 1rem !important;
}

/* ---- Title text (h5 .my_pack.tbl_title) — readable light, no break-all ugly ---- */
#pkg_section .my_pack.tbl_title,
#pkg_section h5.my_pack,
.pkg_section .my_pack.tbl_title,
.pkg_section h5.my_pack {
    color: var(--m-text-1) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    line-height: 1.45 !important;
    margin: 0 0 0.25rem 0 !important;
    overflow-wrap: anywhere !important;
}

/* ---- Subtitle (1-3 Working Days) — green CSS sets #b5b5b5; bump to muted-2 ---- */
#pkg_section .GrayColor,
.pkg_section .GrayColor {
    color: var(--m-text-3) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em;
    opacity: 0.88;
}

/* ---- Price column (h2 .my_pack) — bold gold price ---- */
#pkg_section .right_pack_price h2,
#pkg_section h2.my_pack,
.pkg_section .right_pack_price h2,
.pkg_section h2.my_pack {
    color: var(--m-gold-hi) !important;
    font-weight: 800 !important;
    font-size: 1.7rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 0 12px var(--m-gold-glow);
    overflow-wrap: anywhere !important;
}
#pkg_section .right_pack_price,
.pkg_section .right_pack_price {
    width: 100%;
    text-align: right;
    padding-right: 0.5rem;
}

/* ---- Discount price highlight (server-side adds class="discount_text") ---- */
#pkg_section .discount_text h2,
#pkg_section .discount_text .my_pack,
.pkg_section .discount_text h2,
.pkg_section .discount_text .my_pack {
    color: var(--m-success) !important;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.35) !important;
}

/* ---- Search input + ALL GROUP select on these pages — ensure dark theme ---- */
.client-panel-main-box input.form-control[placeholder="Search"],
.client-panel-main-box select.form-control.select-clear {
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text-1) !important;
    border-radius: var(--m-radius) !important;
}
.client-panel-main-box input.form-control[placeholder="Search"]:focus,
.client-panel-main-box select.form-control.select-clear:focus {
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 0 3px var(--m-accent-ring) !important;
    outline: 0 !important;
}
.client-panel-main-box .form-control-feedback i {
    color: var(--m-text-3) !important;
}

/* ---- "client-panel-main-box bg-white" outer wrapper — kill the bg-white ---- */
.content.client-panel-main-box,
.content.client-panel-main-box.bg-white {
    background: transparent !important;
}

/* ---- Empty state when no service is selected ---- */
.empty_section_heading {
    position: static !important;
    left: auto !important;
    top: auto !important;
    text-align: center !important;
    color: var(--m-text-3) !important;
    margin: 3rem 0 !important;
    padding: 2rem 1rem !important;
    border: 1px dashed var(--m-border) !important;
    border-radius: var(--m-radius-lg) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}
.empty_section_heading .icon {
    font-size: 2.5rem !important;
    color: var(--m-gold) !important;
    opacity: 0.5;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 18px var(--m-gold-glow);
}
.empty_section_heading h3 {
    color: var(--m-text-2) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* ---- Mobile (≤767px) tweaks ---- */
@media (max-width: 767.98px) {
    #pkg_section .test > .row,
    #pkg_section .test1 > .row,
    .pkg_section .test > .row,
    .pkg_section .test1 > .row {
        padding: 0.7rem 0.4rem !important;
    }
    #pkg_section .left_package,
    .pkg_section .left_package {
        border-right: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0.4rem !important;
    }
    #pkg_section h2.my_pack,
    .pkg_section h2.my_pack {
        font-size: 1.4rem !important;
    }
    #pkg_section .test > h4,
    #pkg_section .test1 > h4,
    .pkg_section .test > h4,
    .pkg_section .test1 > h4 {
        font-size: 0.85rem !important;
        padding: 0.7rem 0.9rem !important;
    }
}

/* ============================================================================
   v11.30 — FORM-GROUP-FEEDBACK ICON OVERLAP FIX
   ============================================================================
   Limitless template uses a feedback-icon layout:
       <div class="form-group form-group-feedback form-group-feedback-left">
         <input class="form-control form-control-lg" placeholder="Search">
         <div class="form-control-feedback form-control-feedback-lg">
           <i class="fa fa-search"></i>
         </div>
       </div>
   Limitless's base CSS gives the input padding-left: 3.0625rem so the
   icon (positioned absolutely at left:0 width:~3rem) doesn't overlap text.

   Our v11 overlay (Section 6, ~line 711) sets:
       .form-control { padding: 0.7rem 0.95rem !important; }
   The shorthand 'padding' wipes Limitless's 'padding-left: 3rem' even
   though Limitless also has !important — same specificity, but our rule
   loads later. Result: icon overlaps the placeholder "Search" text.

   Fix: restore the missing left/right padding when the input is inside
   a feedback-left or feedback-right wrapper, plus pin the icon container
   absolutely so it stays in the gutter.
   ============================================================================ */

/* Parent wrapper must be position:relative for the absolute icon child */
.form-group-feedback,
.form-group.form-group-feedback {
    position: relative !important;
}

/* Icon container — pin to its gutter, give it width matching the padding */
.form-group-feedback-left > .form-control-feedback,
.form-group-feedback-left > .form-control-feedback-lg,
.form-group-feedback-right > .form-control-feedback,
.form-group-feedback-right > .form-control-feedback-lg {
    position: absolute !important;
    top: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 4 !important;
    color: var(--m-gold) !important;
    font-size: 1.05rem !important;
}
.form-group-feedback-left > .form-control-feedback,
.form-group-feedback-left > .form-control-feedback-lg {
    left: 0 !important;
    right: auto !important;
    width: 3rem !important;
}
.form-group-feedback-right > .form-control-feedback,
.form-group-feedback-right > .form-control-feedback-lg {
    right: 0 !important;
    left: auto !important;
    width: 3rem !important;
}
.form-group-feedback-left > .form-control-feedback i,
.form-group-feedback-left > .form-control-feedback-lg i,
.form-group-feedback-right > .form-control-feedback i,
.form-group-feedback-right > .form-control-feedback-lg i {
    color: var(--m-gold) !important;
    text-shadow: 0 0 10px var(--m-gold-glow);
}

/* Input — restore the left / right padding so placeholder doesn't sit on icon */
.form-group-feedback-left > .form-control,
.form-group-feedback-left > input.form-control,
.form-group-feedback-left > .form-control-lg,
.form-group-feedback-left > input.form-control-lg {
    padding-left: 3rem !important;
}
.form-group-feedback-right > .form-control,
.form-group-feedback-right > input.form-control,
.form-group-feedback-right > .form-control-lg,
.form-group-feedback-right > input.form-control-lg {
    padding-right: 3rem !important;
}

/* ============================================================================
   45. v11.29 — SELECT2 DROPDOWN PREMIUM DARK THEME
   ============================================================================
   Select2 (jQuery plugin) replaces native <select> elements. It hides the
   original control and injects its own DOM:

       <span class="select2-container select2-container--default">
         <span class="select2-selection select2-selection--single">
           <span class="select2-selection__rendered">{Selected value}</span>
           <span class="select2-selection__arrow"><b/></span>
         </span>
       </span>
       <!-- Dropdown panel is appended to <body>, NOT to the parent: -->
       <span class="select2-container select2-container--open">
         <span class="select2-dropdown">
           <span class="select2-search select2-search--dropdown">
             <input class="select2-search__field" />
           </span>
           <ul class="select2-results__options" role="listbox">
             <li class="select2-results__option">ALL GROUP</li>
             <li class="select2-results__option select2-results__option--highlighted">…</li>
           </ul>
         </span>
       </span>

   Default Select2 CSS gives the dropdown a white background and dark text —
   on our dark theme this becomes white-on-light, completely unreadable.
   Below: full dark theme override + gold highlight for hovered option.
   Used on /page/imei_services, /page/file_services, /page/server_services
   and any other page that initializes Select2.
   ============================================================================ */

/* ---- Closed select control (the visible "ALL GROUP" pill) — GOLD theme ---
   v11.30: was dark surface-2 + grey border. User asked the closed control
   to be gold so it reads as a premium pill on the dark page.
--------------------------------------------------------------------------- */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: linear-gradient(135deg,
        rgba(212, 175, 55, 0.08),
        rgba(91, 140, 255, 0.04)) !important;
    border: 1.5px solid var(--m-gold) !important;
    border-radius: var(--m-radius) !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0.25rem 0.5rem !important;
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.20),
        0 4px 14px rgba(0, 0, 0, 0.25) !important;
    transition: border-color var(--m-tr-fast),
                box-shadow var(--m-tr-fast),
                background var(--m-tr-fast) !important;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
    border-color: var(--m-gold-hi) !important;
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.25),
        0 6px 18px rgba(212, 175, 55, 0.20) !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--m-gold-hi) !important;
    box-shadow:
        inset 0 1px 0 rgba(212, 175, 55, 0.30),
        0 0 0 3px rgba(212, 175, 55, 0.20) !important;
    outline: 0 !important;
}

/* ---- Selected text rendered inside the closed control — GOLD ---- */
.select2-container--default .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: var(--m-gold-hi) !important;
    line-height: 32px !important;
    padding: 0 0.5rem !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 12px var(--m-gold-glow) !important;
}
.select2-container--default .select2-selection__placeholder {
    color: var(--m-text-3) !important;
    opacity: 0.85;
}

/* ---- Caret arrow — gold accent ---- */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 8px !important;
    width: 22px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--m-gold) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-top: -3px !important;
    margin-left: -5px !important;
}
.select2-container--default.select2-container--open
    .select2-selection--single
    .select2-selection__arrow b {
    border-color: transparent transparent var(--m-gold-hi) transparent !important;
    border-width: 0 5px 6px 5px !important;
}

/* ---- Multi-select tags (when select2 is in multiple mode) ---- */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: linear-gradient(135deg,
        rgba(91, 140, 255, 0.20),
        rgba(212, 175, 55, 0.15)) !important;
    border: 1px solid var(--m-gold-ring) !important;
    color: var(--m-text-1) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    margin: 3px 4px 0 0 !important;
    font-size: 0.85rem !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--m-gold-hi) !important;
    margin-right: 4px !important;
    font-weight: 700 !important;
}

/* ---- Dropdown panel (the popup body) ---- */
.select2-container--default .select2-dropdown,
.select2-dropdown,
.select2-dropdown--below,
.select2-dropdown--above {
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-gold-ring) !important;
    border-radius: var(--m-radius) !important;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(212, 175, 55, 0.08) !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}

/* ---- Search input inside dropdown ---- */
.select2-container--default .select2-search--dropdown {
    padding: 0.55rem 0.6rem !important;
    background: var(--m-surface-3) !important;
    border-bottom: 1px solid var(--m-border) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--m-surface-1) !important;
    border: 1px solid var(--m-border) !important;
    color: var(--m-text-1) !important;
    border-radius: 8px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.92rem !important;
    transition: border-color var(--m-tr-fast),
                box-shadow var(--m-tr-fast) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--m-accent) !important;
    box-shadow: 0 0 0 3px var(--m-accent-ring) !important;
    outline: 0 !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder {
    color: var(--m-text-3) !important;
}

/* ---- Options list ---- */
.select2-container--default .select2-results__options {
    background: var(--m-surface-2) !important;
    max-height: 320px !important;
    padding: 0.3rem 0 !important;
}
.select2-container--default .select2-results__option {
    color: var(--m-text-1) !important;
    background: transparent !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    transition: background var(--m-tr-fast),
                color var(--m-tr-fast),
                padding-left var(--m-tr-fast) !important;
    border-left: 2px solid transparent !important;
}

/* Highlighted option (keyboard arrow / mouse hover) — gold accent */
.select2-container--default .select2-results__option--highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: linear-gradient(135deg,
        rgba(91, 140, 255, 0.10),
        rgba(212, 175, 55, 0.10)) !important;
    color: var(--m-gold-hi) !important;
    border-left-color: var(--m-gold) !important;
    padding-left: 1.25rem !important;
    font-weight: 600 !important;
}

/* Currently-selected option (the value the form already holds) */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: rgba(212, 175, 55, 0.06) !important;
    color: var(--m-gold-hi) !important;
    font-weight: 600 !important;
}

/* "No results found" placeholder */
.select2-container--default .select2-results__option.select2-results__message {
    color: var(--m-text-3) !important;
    font-style: italic !important;
    background: transparent !important;
}

/* Group headings inside Select2 results (when <optgroup> is used) */
.select2-container--default .select2-results__group {
    color: var(--m-gold-hi) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    padding: 0.6rem 1rem 0.4rem 1rem !important;
    background: var(--m-surface-3) !important;
    border-top: 1px solid var(--m-border) !important;
    border-bottom: 1px solid var(--m-border) !important;
}

/* ---- Custom scrollbar inside Select2 dropdown options ---- */
.select2-container--default .select2-results__options::-webkit-scrollbar {
    width: 8px;
}
.select2-container--default .select2-results__options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}
.select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--m-gold), var(--m-gold-hi));
    border-radius: 6px;
    border: 2px solid var(--m-surface-2);
}
.select2-container--default .select2-results__options {
    scrollbar-width: thin;
    scrollbar-color: var(--m-gold) var(--m-surface-2);
}

/* ---- Disabled state ---- */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background: var(--m-surface) !important;
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

/* ============================================================================
   46. v11.31 — PUBLIC HOMEPAGE MENU REORDER
   ============================================================================
   Source order in application/views/template/layouts/header.php for the
   desktop nav (<ul id="mainNav">) and mobile overlay (<div id="green_mobile_nav">):
       Home, Order Now ▾, $strHeaderLnks (Money Back filtered upstream),
       RETAIL ▾ (if enabled), Track Order, Register, Login
   Admin requested order:
       Login → Register → Home → Order Now → Track Order
   Implementation: CSS flex `order` property on each item, identified by
   attribute selectors on the inner <a>. Source markup is untouched.
   Money Back Guarantee removal is done upstream in MY_Home_Controller.php
   so $strHeaderLnks no longer contains it.
   ============================================================================ */

/* ---------- DESKTOP nav <ul id="mainNav"> (Bootstrap navbar-nav, flex row) -- */
#mainNav,
ul.navbar-nav#mainNav {
    display: flex !important;
    flex-wrap: wrap !important;
}
/* Default: everything else gets a high order so it falls AFTER the 5 items */
#mainNav > li {
    order: 50;
}
/* 1. Login */
#mainNav > li:has(> a[data-target="#login_form"]),
#mainNav > li:has(> a[href*="dashboard/logout"]) {
    order: 1 !important;
}
/* 2. Register / Dashboard (Dashboard for logged-in is the parallel item) */
#mainNav > li:has(> a[data-target="#register-form"]),
#mainNav > li:has(> a[href$="/dashboard"]),
#mainNav > li:has(> a[href$="/dashboard/"]) {
    order: 2 !important;
}
/* 3. Home */
#mainNav > li:has(> a[href$="/home"]),
#mainNav > li:has(> a[href$="/home/"]) {
    order: 3 !important;
}
/* 4. Order Now ▾ (the dropdown that has c_dropdown class + javascript:void(0) href) */
#mainNav > li.c_dropdown:has(> a[href="javascript:void(0);"]) {
    order: 4 !important;
}
/* 5. Track Order */
#mainNav > li:has(> a[href*="home/trackOrder"]),
#mainNav > li:has(> a[href*="/trackOrder"]) {
    order: 5 !important;
}

/* ---------- MOBILE overlay <#green_mobile_nav> .overlay-content -------------- */
/* Make it a flex column so children respect `order` */
#green_mobile_nav .overlay-content {
    display: flex !important;
    flex-direction: column !important;
}
/* Default: anything not specifically ordered goes after the 5 (RETAIL, ecomm, etc.) */
#green_mobile_nav .overlay-content > * {
    order: 50;
}
/* 1. Login */
#green_mobile_nav .overlay-content > a[data-target="#login_form"],
#green_mobile_nav .overlay-content > a[href*="dashboard/logout"] {
    order: 1 !important;
}
/* 2. Register / Dashboard */
#green_mobile_nav .overlay-content > a[data-target="#register-form"],
#green_mobile_nav .overlay-content > a[href$="/dashboard"],
#green_mobile_nav .overlay-content > a[href$="/dashboard/"] {
    order: 2 !important;
}
/* 3. Home */
#green_mobile_nav .overlay-content > a[href$="/home"],
#green_mobile_nav .overlay-content > a[href$="/home/"] {
    order: 3 !important;
}
/* 4a. Order Now toggle <a onclick="slideToggle"> */
#green_mobile_nav .overlay-content > a[onclick*="slideToggle"]:not([onclick*="RETAIL"]) {
    order: 4 !important;
}
/* 4b. Order Now sub-menu <div style="display:none"> — must stick to the toggle */
#green_mobile_nav .overlay-content > a[onclick*="slideToggle"]:not([onclick*="RETAIL"]) + div {
    order: 4 !important;
}
/* 5. Track Order (wrapped in <div>) */
#green_mobile_nav .overlay-content > div:has(> a[href*="trackOrder"]),
#green_mobile_nav .overlay-content > div:has(> a[href*="/trackOrder"]) {
    order: 5 !important;
}

/* ---------- Fallback for browsers without :has() (Firefox <121, Safari <15.4)
    Use source-index nth-child + the fact that Money Back is filtered.
    Desktop source after filter: 1=Home, 2=Order Now, 3=Track Order|RETAIL,
    4=Register, 5=Login (when logged out). Mobile is analogous.
----------------------------------------------------------------------------- */
@supports not selector(:has(*)) {
    #mainNav > li:nth-child(1) { order: 3; }      /* Home */
    #mainNav > li:nth-child(2) { order: 4; }      /* Order Now */
    #mainNav > li:nth-child(3) { order: 5; }      /* Track Order */
    #mainNav > li:nth-child(4) { order: 2; }      /* Register */
    #mainNav > li:nth-child(5) { order: 1; }      /* Login */
}

/* ============================================================================
   v11.33 — PAIR 1: SPOTLIGHT CURSOR FOLLOW + NUMBER COUNT-UP
   ----------------------------------------------------------------------------
   JS files: assets/template_modern/js/spotlight.js, countup.js
   These rules are inert without those JS files (graceful no-op).
   ============================================================================ */

/* ---------- SPOTLIGHT CURSOR FOLLOW ---------- */
/* Variables `--mx` / `--my` are written by spotlight.js (in %).
   Default values keep the gradient centered when the element is hovered
   for the first time before the first mousemove fires. */
.has-spotlight {
    position: relative;
    isolation: isolate;
}
.has-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            520px circle at var(--mx, 50%) var(--my, 50%),
            rgba(212, 175, 55, 0.14),
            rgba(212, 175, 55, 0.06) 25%,
            transparent 55%
        );
    opacity: 0;
    transition: opacity 0.35s ease;
    mix-blend-mode: screen;
}
/* Ensure direct children paint above the spotlight overlay. */
.has-spotlight > * {
    position: relative;
    z-index: 1;
}
/* Reveal on hover only — touch devices never trigger this. */
@media (hover: hover) {
    .has-spotlight:hover::before {
        opacity: 1;
    }
}
/* Disable for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .has-spotlight::before {
        display: none !important;
    }
}

/* ---------- NUMBER COUNT-UP ---------- */
/* Tabular figures so digits keep equal width during animation
   (prevents "jumping" widths as values change from e.g. "1" → "123"). */
.js-countup {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------- v11.35 SAFETY OVERRIDES ---------- */
/* If `.has-spotlight` ever ends up on an element that contains a
   Bootstrap dropdown or our custom `.c_menu`, force the child back to
   position:absolute so its layout stays correct.  This is belt-and-braces
   on top of the JS-side guards. */
.has-spotlight .dropdown-menu,
.has-spotlight .c_menu {
    position: absolute !important;
}

/* ============================================================================
   v11.35 — ORDER NOW SUBMENU (.c_menu) HARD-ANCHOR
   ----------------------------------------------------------------------------
   Green CSS leaves the dropdown at `top: auto; left: auto;`, which used to
   work because the navbar was a plain block layout.  Once we switched
   `#mainNav` to flexbox in v11.31 the auto values rendered the dropdown
   away from its parent button (it appeared on the far left of the navbar
   and overlapped Login/Register).  Forcing explicit anchoring removes the
   ambiguity entirely.
   ============================================================================ */
#mainNav > li.c_dropdown,
.navbar-nav > li.c_dropdown {
    position: relative !important;
}
#mainNav > li.c_dropdown > .c_menu,
.navbar-nav > li.c_dropdown > .c_menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 6px !important;
    /* Width: shrink to content but stay within sane bounds */
    width: auto !important;
    min-width: 220px !important;
    max-width: 320px !important;
    /* Stay above sibling navbar items */
    z-index: 1050 !important;
}
/* The whole submenu block (when it's a <ul>) should be a column, not flex row */
#mainNav > li.c_dropdown > .c_menu {
    display: none;
}
#mainNav > li.c_dropdown:hover > .c_menu,
#mainNav > li.c_dropdown.show > .c_menu {
    display: block !important;
}

/* v11.37 — Hover-bridge: invisible 12px hit-area above the submenu so the
   cursor never leaves the hover zone while travelling from the button to
   the dropdown. Without this, the 6px margin-top creates a "dead zone"
   where hover is lost and the submenu instantly disappears. */
#mainNav > li.c_dropdown > .c_menu::before,
.navbar-nav > li.c_dropdown > .c_menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
    background: transparent;
    /* Make sure pointer events go through this invisible bridge */
    pointer-events: auto;
}

/* ============================================================================
   v11.36 — PAIR 2: SCROLL-TRIGGERED REVEALS + MAGNETIC BUTTONS
   ----------------------------------------------------------------------------
   Two complementary "premium-feel" interactions:

   • Reveals  — fade-up cards as they enter the viewport (60ms stagger).
                Driven by reveals.js: it adds `.js-reveal` to off-screen
                cards on load and `.is-visible` once they intersect the
                viewport.  Already-visible cards are NEVER given the
                hidden state, so there's no flash on page load.

   • Magnetic — large CTAs (Order Now, Pay Now, hero buttons) drift toward
                the cursor when nearby.  Driven by magnetic.js, which
                writes inline `transform: translate(...)`.  This CSS only
                handles the smooth easing of that transform.
   ============================================================================ */

/* ---------- REVEALS ---------- */
.js-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform;
}
.js-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- MAGNETIC ---------- */
.js-magnetic-bound {
    transition: transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
    will-change: transform;
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
    .js-reveal,
    .js-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .js-magnetic-bound {
        transition: none !important;
        transform: none !important;
    }
}

/* Touch / no-hover devices: magnetic JS already skips, but belt-and-braces
   in case a transform got cached from a prior session. */
@media (hover: none) {
    .js-magnetic-bound {
        transform: none !important;
    }
}

/* ============================================================================
   v11.42 — PAIR 3: ANIMATED UNDERLINES + GRADIENT BORDER ON CTAs
   ----------------------------------------------------------------------------
   Pure CSS, zero JS. Two complementary "premium-feel" details:

   • Underlines — a thin gold line draws left→right under nav links and
                  footer links on hover (280ms ease).  Uses ::after with
                  width 0 → 100%.

   • Gradient border — large CTAs (Submit Order, Pay Now, etc.) get a slow
                       rotating gold conic-gradient halo around the edge
                       via ::before + @property animation.  Falls back to
                       a transform-rotate animation on browsers that lack
                       @property.

   Both honour prefers-reduced-motion: reduce.
   ============================================================================ */

/* ---------- ANIMATED UNDERLINES ---------- */
/* Apply only to "real" nav links and footer links.  Skip:
   - .c_dropdown anchors (they have their own dropdown UI)
   - .btn / .btn-* (pill-style Login/Register buttons)
   - submenu items inside .c_menu (those have their own hover style)        */
#mainNav > li:not(.c_dropdown) > a.nav-link,
.footer a:not(.btn):not([class*="social"]),
footer a:not(.btn):not([class*="social"]) {
    position: relative;
    display: inline-block;
}
#mainNav > li:not(.c_dropdown) > a.nav-link::after,
.footer a:not(.btn):not([class*="social"])::after,
footer a:not(.btn):not([class*="social"])::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--m-accent-gold, #d4af37) 30%,
        var(--m-accent-gold, #d4af37) 70%,
        transparent 100%);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
    transition: width 280ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    border-radius: 2px;
}
#mainNav > li:not(.c_dropdown) > a.nav-link:hover::after,
#mainNav > li:not(.c_dropdown) > a.nav-link:focus-visible::after,
.footer a:not(.btn):not([class*="social"]):hover::after,
footer a:not(.btn):not([class*="social"]):hover::after {
    width: 100%;
}

/* ---------- GRADIENT BORDER (ROTATING HALO) ---------- */
/* Modern browsers: smooth angle interpolation via @property */
@property --m-cta-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes m-cta-spin {
    to { --m-cta-ang: 360deg; }
}
@keyframes m-cta-spin-fallback {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Auto-applied to large CTAs that the user actually clicks. Opt-out with
   .no-cta-glow if a particular button shouldn't have it. */
.btn.btn-lg.btn-primary:not(.no-cta-glow),
.btn.btn-lg.btn-success:not(.no-cta-glow),
.green_banner .btn-success:not(.no-cta-glow),
.green_banner .btn-primary:not(.no-cta-glow),
#payNowBtn,
.pay-now-btn,
.btn-cta-glow,
[data-cta-glow] {
    position: relative;
    z-index: 1;
    isolation: isolate;
    overflow: visible;
}
.btn.btn-lg.btn-primary:not(.no-cta-glow)::before,
.btn.btn-lg.btn-success:not(.no-cta-glow)::before,
.green_banner .btn-success:not(.no-cta-glow)::before,
.green_banner .btn-primary:not(.no-cta-glow)::before,
#payNowBtn::before,
.pay-now-btn::before,
.btn-cta-glow::before,
[data-cta-glow]::before {
    content: '';
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(
        from var(--m-cta-ang, 0deg),
        transparent 0deg,
        var(--m-accent-gold, #d4af37) 80deg,
        transparent 160deg,
        var(--m-accent-gold, #d4af37) 240deg,
        transparent 320deg,
        transparent 360deg);
    animation: m-cta-spin 5s linear infinite;
    filter: blur(0.5px);
    opacity: 0.85;
    pointer-events: none;
}
/* Fallback for browsers without @property (Safari < 16.4 / older FF) */
@supports not (background: paint(angle)) {
    .btn.btn-lg.btn-primary:not(.no-cta-glow)::before,
    .btn.btn-lg.btn-success:not(.no-cta-glow)::before,
    .green_banner .btn-success:not(.no-cta-glow)::before,
    .green_banner .btn-primary:not(.no-cta-glow)::before,
    #payNowBtn::before,
    .pay-now-btn::before,
    .btn-cta-glow::before,
    [data-cta-glow]::before {
        background: conic-gradient(from 45deg,
            transparent, var(--m-accent-gold, #d4af37),
            transparent, var(--m-accent-gold, #d4af37),
            transparent);
        animation: m-cta-spin-fallback 5s linear infinite;
    }
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
    #mainNav > li > a.nav-link::after,
    .footer a::after,
    footer a::after {
        transition: none !important;
    }
    .btn.btn-lg.btn-primary::before,
    .btn.btn-lg.btn-success::before,
    .green_banner .btn::before,
    #payNowBtn::before,
    .pay-now-btn::before,
    .btn-cta-glow::before,
    [data-cta-glow]::before {
        animation: none !important;
        opacity: 0.4;
    }
}

/* ============================================================================
   v11.43 — PAIR 4: AURORA BACKGROUND + SKELETON LOADING (gold shimmer)
   ----------------------------------------------------------------------------
   Pure CSS, zero JS.

   • Aurora    — a very subtle, slowly-rotating conic gradient sits behind
                 ALL content via body::before (position: fixed, z-index: -10).
                 Uses warm gold + cool blue + soft purple, blurred 80px.
                 60-second rotation, opacity ~0.35.  Disabled on
                 prefers-reduced-motion.

   • Skeleton  — `.skeleton`, `.skeleton-text`, `.skeleton-line`,
                 `.skeleton-block`, `.skeleton-circle`, `.skeleton-avatar`,
                 plus `[data-skeleton]` opt-in.  Gold linear-gradient
                 shimmer 1.5s loop.  Apply via PHP/JS during AJAX loads
                 of orders history, dashboard charts, etc. — no automatic
                 application that could collide with existing markup.
   ============================================================================ */

/* ---------- AURORA BACKGROUND ---------- */
@property --m-aurora-ang {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes m-aurora-spin {
    to { --m-aurora-ang: 360deg; }
}
@keyframes m-aurora-fallback {
    from { transform: rotate(0deg) scale(1.05); }
    to   { transform: rotate(360deg) scale(1.05); }
}

body::before {
    content: '';
    position: fixed;
    top: -25%;
    left: -15%;
    width: 130%;
    height: 90%;
    z-index: -10;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 30% 30%,
            rgba(212, 175, 55, 0.18) 0%,
            transparent 60%),
        radial-gradient(ellipse 45% 50% at 70% 60%,
            rgba(91, 140, 255, 0.14) 0%,
            transparent 65%),
        radial-gradient(ellipse 35% 35% at 50% 70%,
            rgba(155, 81, 224, 0.12) 0%,
            transparent 60%);
    filter: blur(80px) saturate(140%);
    transform: rotate(var(--m-aurora-ang, 0deg));
    animation: m-aurora-spin 60s linear infinite;
    will-change: transform;
    opacity: 0.7;
}
/* Older browsers (no @property): use the fallback rotate keyframes */
@supports not (background: paint(angle)) {
    body::before {
        animation: m-aurora-fallback 60s linear infinite;
    }
}

/* ---------- SKELETON LOADING (gold shimmer) ---------- */
@keyframes m-skel-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Apply via class names on whatever is loading. */
.skeleton,
[data-skeleton],
.skeleton-text,
.skeleton-line,
.skeleton-block,
.skeleton-circle,
.skeleton-avatar {
    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.05) 0%,
            rgba(212, 175, 55, 0.20) 50%,
            rgba(212, 175, 55, 0.05) 100%) !important;
    background-size: 200% 100% !important;
    animation: m-skel-shimmer 1.5s ease-in-out infinite !important;
    color: transparent !important;
    text-shadow: none !important;
    user-select: none;
    pointer-events: none;
    border: 1px solid rgba(212, 175, 55, 0.08);
}

.skeleton-text {
    display: inline-block;
    height: 1em;
    min-width: 60px;
    border-radius: 4px;
    vertical-align: middle;
}
.skeleton-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    margin: 8px 0;
}
.skeleton-block {
    display: block;
    min-height: 100px;
    border-radius: 12px;
}
.skeleton-circle,
.skeleton-avatar {
    display: inline-block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

/* Convenience: containers with `data-loading="true"` get auto-skeleton
   on direct child cells/rows (works for AJAX-driven order tables). */
[data-loading="true"] tbody tr td,
[data-loading="true"] .skeleton-target {
    background:
        linear-gradient(
            90deg,
            rgba(212, 175, 55, 0.05) 0%,
            rgba(212, 175, 55, 0.20) 50%,
            rgba(212, 175, 55, 0.05) 100%) !important;
    background-size: 200% 100% !important;
    animation: m-skel-shimmer 1.5s ease-in-out infinite !important;
    color: transparent !important;
}

/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion: reduce) {
    body::before {
        animation: none !important;
        opacity: 0.4;
    }
    .skeleton,
    [data-skeleton],
    .skeleton-text,
    .skeleton-line,
    .skeleton-block,
    .skeleton-circle,
    .skeleton-avatar,
    [data-loading="true"] tbody tr td {
        animation: none !important;
    }
}

/* ============================================================================
   END OF MODERN PREMIUM v11
   ============================================================================ */