/*
 * theimei2 — "Volt" design layer.
 *
 * Minimal ink/paper base, the logo's electric yellow as the only fill accent and the
 * logo's indigo (brightened) as the "signal" color. Light and dark come from the same
 * tokens: html[data-theme] is set before paint by the inline script in header.tpl.
 *
 * Loaded by header.tpl after theme.css. The color themes (theme18.css / dark.css) are
 * NOT loaded in theimei2, so this file is the whole color layer. Every rule is scoped
 * to body.theimei2 so it can never leak into the default template.
 */

:root,
html[data-theme="light"] {
    color-scheme: light;
    --v-bg: #F4F4F1;
    --v-bg-sunk: #EBEBE6;
    --v-surface: #FFFFFF;
    --v-surface-2: #FAFAF8;
    --v-ink: #0B0B0C;
    --v-ink-2: #2D2D32;
    --v-muted: #67676F;
    --v-faint: #A0A0A7;
    --v-line: rgba(11, 11, 12, 0.09);
    --v-line-2: rgba(11, 11, 12, 0.16);
    --v-volt: #FFFF0A;
    --v-volt-ink: #0B0B0C;
    --v-signal: #3A12E8;
    --v-signal-soft: rgba(58, 18, 232, 0.08);
    --v-focus: rgba(58, 18, 232, 0.20);
    --v-invert-bg: #0B0B0C;
    --v-invert-ink: #F4F4F1;
    --v-hi-bg: #0B0B0C;
    --v-hi-ink: #FFFFFF;
    --v-header-bg: rgba(244, 244, 241, 0.84);
    --v-ok: #0F8A4A;
    --v-ok-soft: rgba(15, 138, 74, 0.10);
    --v-warn: #A26300;
    --v-warn-soft: rgba(196, 128, 0, 0.12);
    --v-bad: #C42339;
    --v-bad-soft: rgba(196, 35, 57, 0.09);
    --v-info: #2459C8;
    --v-info-soft: rgba(36, 89, 200, 0.09);
    --v-shadow: 0 1px 2px rgba(11, 11, 12, 0.04), 0 10px 30px -18px rgba(11, 11, 12, 0.18);
    --v-shadow-lg: 0 30px 70px -30px rgba(11, 11, 12, 0.35);
    --v-dot: rgba(11, 11, 12, 0.10);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --v-bg: #09090A;
    --v-bg-sunk: #050506;
    --v-surface: #111113;
    --v-surface-2: #17171A;
    --v-ink: #F2F2EE;
    --v-ink-2: #CACAC6;
    --v-muted: #8C8C94;
    --v-faint: #55555C;
    --v-line: rgba(255, 255, 255, 0.08);
    --v-line-2: rgba(255, 255, 255, 0.15);
    --v-signal: #FFFF0A;
    --v-signal-soft: rgba(255, 255, 10, 0.08);
    --v-focus: rgba(255, 255, 10, 0.18);
    --v-invert-bg: #F2F2EE;
    --v-invert-ink: #09090A;
    --v-hi-bg: #FFFF0A;
    --v-hi-ink: #0B0B0C;
    --v-header-bg: rgba(9, 9, 10, 0.80);
    --v-ok: #3DDC84;
    --v-ok-soft: rgba(61, 220, 132, 0.10);
    --v-warn: #FFB547;
    --v-warn-soft: rgba(255, 181, 71, 0.10);
    --v-bad: #FF5D70;
    --v-bad-soft: rgba(255, 93, 112, 0.10);
    --v-info: #79A8FF;
    --v-info-soft: rgba(121, 168, 255, 0.10);
    --v-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px -18px rgba(0, 0, 0, 0.8);
    --v-shadow-lg: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
    --v-dot: rgba(255, 255, 255, 0.07);
}

:root {
    --v-font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --v-mono: "Geist Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --v-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --v-radius: 14px;
    --v-radius-sm: 10px;
    --v-radius-lg: 22px;
}

/* Animatable angle for the "current" running around borders */
@property --v-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ------------------------------------------------------------------ base */

body.theimei2 {
    font-family: var(--v-font);
    background: var(--v-bg);
    color: var(--v-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.theimei2 ::selection { background: var(--v-volt); color: var(--v-volt-ink); }

body.theimei2 h1, body.theimei2 h2, body.theimei2 h3, body.theimei2 h4, body.theimei2 h5, body.theimei2 h6,
body.theimei2 .h1, body.theimei2 .h2, body.theimei2 .h3, body.theimei2 .h4, body.theimei2 .h5, body.theimei2 .h6 {
    color: var(--v-ink);
    font-family: var(--v-font);
    letter-spacing: -0.02em;
}
body.theimei2 a { color: var(--v-ink); transition: color .2s ease; }
body.theimei2 a:hover { color: var(--v-signal); }
html[data-theme="light"] body.theimei2 a:hover { color: var(--v-signal); }
body.theimei2 hr { border-color: var(--v-line); }
body.theimei2 code, body.theimei2 kbd, body.theimei2 pre { font-family: var(--v-mono); }

/* one content width for header, pages, home and footer (theme.css allowed 1700px) */
body.theimei2 .container {
    max-width: 1320px;
    padding-left: 24px;
    padding-right: 24px;
}
body.theimei2 footer .page-container { padding-left: 0; padding-right: 0; }
@media (max-width: 575px) {
    body.theimei2 .container { padding-left: 16px; padding-right: 16px; }
}

body.theimei2 .bg-gray { background: var(--v-bg) !important; }
body.theimei2 .bg-white { background: var(--v-surface) !important; }
body.theimei2 .bg-light { background: var(--v-bg-sunk) !important; }
body.theimei2 .bg-primary { background: var(--v-invert-bg) !important; color: var(--v-invert-ink); }
body.theimei2 .text-muted { color: var(--v-muted) !important; opacity: 1; }
body.theimei2 .text-dark,
body.theimei2 .text-black { color: var(--v-ink) !important; }
body.theimei2 .text-primary { color: var(--v-signal) !important; }
body.theimei2 .text-success { color: var(--v-ok) !important; }
body.theimei2 .text-danger { color: var(--v-bad) !important; }
body.theimei2 .text-warning { color: var(--v-warn) !important; }
body.theimei2 .text-info { color: var(--v-info) !important; }
body.theimei2 .border,
body.theimei2 .border-top,
body.theimei2 .border-bottom,
body.theimei2 .border-left,
body.theimei2 .border-right { border-color: var(--v-line) !important; }

/* -------------------------------------------------------------- header */

body.theimei2 header {
    position: relative;
    z-index: 30;
    background: transparent;
    border: 0;
}

/* Stacking: each header row sits above the next one, so a row's hover dropdowns are never
   covered by the row below it (header-middle's backdrop-filter creates its own stacking context). */
body.theimei2 header .header-top { position: relative; z-index: 34; }
body.theimei2 header .header-middle { z-index: 33; }
body.theimei2 header > .header-bottom.themedefault { z-index: 32; }
/* invisible bridge over the gap between a menu link and its dropdown, so hover is not lost */
body.theimei2 header .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

/* top strip: quiet, mono, hairline */
body.theimei2 .header-top {
    background: var(--v-bg) !important;
    border-bottom: 1px solid var(--v-line);
    font-family: var(--v-mono);
    font-size: 12px;
}
body.theimei2 .header-top .nav-link,
body.theimei2 .header-top .text-muted,
body.theimei2 .header-top > .container a:not(.dropdown-item) {
    color: var(--v-muted) !important;
    font-size: 12px;
}
body.theimei2 .header-top .nav-item:hover { background: transparent; }
body.theimei2 .header-top .nav-item:hover .nav-link,
body.theimei2 .header-top > .container a:not(.dropdown-item):hover { color: var(--v-ink) !important; }

body.theimei2 .v-channel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 22px;
    padding: 8px 0;
    font-family: var(--v-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-decoration: none !important;
}
body.theimei2 .v-channel::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--v-channel-dot, currentColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-channel-dot, currentColor) 18%, transparent);
}
body.theimei2 .v-channel-telegram { --v-channel-dot: #229ED9; }
body.theimei2 .v-channel-whatsapp { --v-channel-dot: #25D366; }
body.theimei2 .v-channel i { display: none; }

/* main bar */
body.theimei2 header .header-middle {
    position: relative;
    background: var(--v-header-bg) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--v-line);
}
body.theimei2 .navbar-brand { margin-left: 0; padding-top: 14px; padding-bottom: 14px; }
body.theimei2 .navbar-brand img {
    max-height: 48px;
    border-radius: 9px;
    transition: transform .4s var(--v-ease);
}
body.theimei2 .navbar-brand:hover img { transform: rotate(-3deg) scale(1.04); }

body.theimei2 .navbar-mastermenu .nav-link,
body.theimei2 .header-middle .navbar-toggler {
    color: var(--v-ink-2) !important;
    font-size: 14.5px;
    font-weight: 500;
    background: transparent !important;
}
body.theimei2 .navbar-mastermenu .nav-link:hover,
body.theimei2 .navbar-mastermenu .nav-item:hover .nav-link { color: var(--v-ink) !important; }
body.theimei2 .navbar-mastermenu .nav-item:hover { background: transparent; }

/* hover underline: a short charge that fills left → right */
body.theimei2 .navbar-expand-lg .navbar-nav .nav-item .nav-link:not(.bg-secondary)::before {
    height: 2px;
    width: 100%;
    left: 0;
    opacity: 1;
    background: var(--v-signal);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--v-ease);
}
body.theimei2 .navbar-expand-lg .navbar-nav .nav-item:hover .nav-link:not(.bg-secondary)::before {
    width: 100%;
    transform: scaleX(1);
}

/* master menu: one soft pill glides between items (volt.js adds .v-nav-glider), with a short
   charge line at its base; the current page gets a dot. Replaces the per-link underline. */
body.theimei2 .navbar-mastermenu { position: relative; }
body.theimei2 .navbar-mastermenu > .nav-item > .nav-link,
body.theimei2 .navbar-products > .nav-item > .nav-link { position: relative; z-index: 1; }
/* DHRU gives the master-menu links the .dropdown-item class too: drop its hover/focus panel
   here, or it paints a dark block over the glider (and stays after a click, while focused) */
body.theimei2 header .navbar-mastermenu > .nav-item > .nav-link.dropdown-item,
body.theimei2 header .navbar-mastermenu > .nav-item > .nav-link.dropdown-item:hover,
body.theimei2 header .navbar-mastermenu > .nav-item > .nav-link.dropdown-item:focus,
body.theimei2 header .navbar-mastermenu > .nav-item > .nav-link.dropdown-item:active,
body.theimei2 header .navbar-mastermenu > .nav-item > .nav-link.dropdown-item.active {
    background: transparent !important;
    border-radius: 999px;
    outline: none;
}
body.theimei2 .navbar-mastermenu .nav-item .nav-link:not(.bg-secondary)::before,
body.theimei2 .navbar-products > .nav-item > .nav-link::before { display: none !important; }
body.theimei2 .v-nav-glider {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 36px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--v-ink) 6%, transparent);
    box-shadow: inset 0 0 0 1px var(--v-line);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform .38s var(--v-ease), width .38s var(--v-ease), opacity .2s ease;
}
body.theimei2 .v-nav-glider::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 16px;
    height: 2px;
    margin-left: -8px;
    border-radius: 2px;
    background: var(--v-signal);
    box-shadow: 0 0 10px var(--v-signal);
}
body.theimei2 .v-nav-glider.is-on { opacity: 1; }
body.theimei2 .v-nav-glider.is-snap { transition: opacity .2s ease; }
body.theimei2 .navbar-mastermenu > .nav-item.v-current > .nav-link,
body.theimei2 .navbar-products > .nav-item.v-current > .nav-link { color: var(--v-ink) !important; }
body.theimei2 .navbar-mastermenu > .nav-item.v-current > .nav-link::after,
body.theimei2 .navbar-products > .nav-item.v-current > .nav-link::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--v-signal);
}
body.theimei2 .navbar-mastermenu .nav-link .fa-chevron-down,
body.theimei2 .navbar-products .nav-link .fa-chevron-down {
    display: inline-block;
    margin-left: 2px;
    font-size: 11px;
    transition: transform .3s var(--v-ease);
}
body.theimei2 .navbar-mastermenu .nav-item:hover > .nav-link .fa-chevron-down,
body.theimei2 .navbar-mastermenu .nav-item.show > .nav-link .fa-chevron-down,
body.theimei2 .navbar-products .nav-item:hover > .nav-link .fa-chevron-down,
body.theimei2 .navbar-products .nav-item.show > .nav-link .fa-chevron-down { transform: rotate(180deg); }

/* channel links already shown in the top strip (menu-master.tpl) */
body.theimei2 header .navbar-mastermenu > .nav-item.v-dup-channel { display: none; }

/* live status dot (replaces a ✅ in a menu name) */
body.theimei2 .v-live-dot {
    position: relative;
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 4px;
    vertical-align: 2px;
    border-radius: 50%;
    background: #22C55E;
}
body.theimei2 .v-live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: vLiveDot 2s ease-out infinite;
}
@keyframes vLiveDot {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* "charge" button: ink pill that fills with volt on hover */
body.theimei2 header .nav-link.btn.bg-secondary,
body.theimei2 .btn-primary,
body.theimei2 button.btn.btn-primary,
body.theimei2 .wizard .actions li a,
body.theimei2 .v-btn-charge {
    background-color: var(--v-invert-bg) !important;
    background-image: linear-gradient(var(--v-volt), var(--v-volt)) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0% 100% !important;
    /* the fill must also cover the 1px border box, or a hairline of the old color shows around it */
    background-origin: border-box !important;
    background-clip: border-box !important;
    color: var(--v-invert-ink) !important;
    border: 1px solid transparent !important;
    transition: background-size .5s var(--v-ease), color .25s ease, transform .25s var(--v-ease), background-color 0s !important;
}
body.theimei2 header .nav-link.btn.bg-secondary:hover,
body.theimei2 .btn-primary:hover,
body.theimei2 button.btn.btn-primary:hover,
body.theimei2 .wizard .actions li a:hover,
body.theimei2 .v-btn-charge:hover {
    background-size: 100% 100% !important;
    color: var(--v-volt-ink) !important;
    /* once the sweep ends, the base color turns volt too: no anti-aliased edge of the old
       color can peek out at the rounded corners */
    background-color: var(--v-volt) !important;
    transition: background-size .5s var(--v-ease), color .25s ease, transform .25s var(--v-ease), background-color 0s linear .45s !important;
}
body.theimei2 .btn-primary:disabled,
body.theimei2 .btn-primary.disabled { opacity: .45; background-size: 0% 100% !important; }
body.theimei2 header .nav-link.btn.bg-secondary {
    border-radius: 999px;
    padding: .5rem 1.05rem !important;
    font-size: 14px;
    font-weight: 500;
}
body.theimei2 header .nav-link.btn.bg-secondary .lg-icon i { font-size: 12px; margin-right: 2px; }

/* theme toggle (header.tpl) */
body.theimei2 .v-theme-toggle {
    position: relative;
    width: 38px;
    height: 38px;
    margin: 0 4px 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--v-line-2);
    background: transparent;
    color: var(--v-ink);
    cursor: pointer;
    transition: border-color .2s ease, transform .4s var(--v-ease);
}
body.theimei2 .v-theme-toggle:hover { border-color: var(--v-ink); }
body.theimei2 .v-theme-toggle:active { transform: scale(.92); }
body.theimei2 .v-theme-toggle:focus-visible { outline: 2px solid var(--v-signal); outline-offset: 2px; }
body.theimei2 .v-theme-toggle svg { width: 18px; height: 18px; overflow: visible; }
body.theimei2 .v-theme-toggle .v-sun-rays {
    transform-origin: 12px 12px;
    transition: transform .6s var(--v-ease), opacity .3s ease;
}
body.theimei2 .v-theme-toggle .v-sun-core { transition: r .5s var(--v-ease); }
body.theimei2 .v-theme-toggle .v-moon-cut {
    transition: cx .5s var(--v-ease), cy .5s var(--v-ease);
}
html[data-theme="dark"] body.theimei2 .v-theme-toggle .v-sun-rays { transform: rotate(90deg) scale(.4); opacity: 0; }
html[data-theme="dark"] body.theimei2 .v-theme-toggle .v-sun-core { r: 8px; }
html[data-theme="dark"] body.theimei2 .v-theme-toggle .v-moon-cut { cx: 17px; cy: 7px; }

/* smooth color hand-off while switching themes (class set for ~400ms by volt.js) */
html.v-theme-anim body.theimei2,
html.v-theme-anim body.theimei2 * {
    transition: background-color .35s ease, border-color .35s ease, color .25s ease !important;
}

/* ------------------------------------------------------- services bar */

body.theimei2 .header-bottom.themedefault,
body.theimei2 .themedefault {
    background: var(--v-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--v-line);
}
body.theimei2 header > .header-bottom { position: relative; }
/* the signature: a spark of current running along the header's bottom edge */
body.theimei2 header > .header-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--v-signal) 45%, var(--v-signal) 55%, transparent) no-repeat;
    background-size: 240px 1px;
    background-position: -240px 0;
    animation: vSpark 9s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes vSpark {
    0% { background-position: -240px 0; }
    45%, 100% { background-position: calc(100% + 240px) 0; }
}

body.theimei2 .navbar-products .nav-link {
    color: var(--v-ink-2) !important;
    font-size: 13.5px;
    font-weight: 500;
    padding: 1rem 1.05rem;
}
body.theimei2 .navbar-products .nav-item:hover { background: transparent; }
body.theimei2 .navbar-products .nav-item:hover .nav-link { color: var(--v-ink) !important; }
/* theme.css draws a 1px separator here; reuse it as the same charge underline as the main menu */
body.theimei2 .navbar-products .nav-item .nav-link::before {
    border: 0;
    top: auto;
    bottom: -1px;
    left: 1.05rem;
    right: 1.05rem;
    width: auto;
    height: 2px;
    background: var(--v-signal) !important;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--v-ease);
}
body.theimei2 .navbar-products .nav-item:hover .nav-link::before { transform: scaleX(1); }
/* theme.css vertical separators between menu items */
body.theimei2 .navbar-expand-lg .navbar-nav .nav-item::after { display: none; }
body.theimei2 .navbar-products .nav-link .fa-chevron-down { font-size: 10px; opacity: .6; }
body.theimei2 .nav-link-search { color: var(--v-ink) !important; }

body.theimei2 .navbar-products .dropdown-menu {
    background: var(--v-surface);
    border: 0;
    border-top: 1px solid var(--v-line);
    border-bottom: 1px solid var(--v-line);
    border-radius: 0;
    box-shadow: var(--v-shadow-lg);
}
body.theimei2 header .position-static .dropdown-menu { max-height: min(72vh, 640px); }
body.theimei2 .navbar-products .menu-column,
body.theimei2 .navbar-products .submenu-column { border-color: var(--v-line) !important; }

/* header search dropdown */
body.theimei2 .search-bar .dropdown-menu {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line);
    border-radius: 0 0 var(--v-radius) var(--v-radius) !important;
    box-shadow: var(--v-shadow-lg);
}
body.theimei2 .search-bar .search-products {
    background: var(--v-bg-sunk) !important;
    color: var(--v-ink) !important;
    border-radius: var(--v-radius-sm) !important;
    font-size: 16px;
    padding: 14px 16px !important;
    height: auto;
}
body.theimei2 #searchresult,
body.theimei2 #searchresult a,
body.theimei2 .serchcontent,
body.theimei2 .serchcontent li.dropdown-item a { color: var(--v-ink) !important; background: transparent !important; }

/* phones: theme.css keeps the header search always open — make it a flat strip, not a floating card */
@media (max-width: 991px) {
    body.theimei2 .search-bar .dropdown-menu {
        box-shadow: none !important;
        border: 0 !important;
        border-bottom: 1px solid var(--v-line) !important;
        border-radius: 0 !important;
        background: var(--v-bg) !important;
        padding: 10px 0 12px !important;
    }
    body.theimei2 .search-bar .dropdown-menu::before { display: none; }
    body.theimei2 .search-bar .search-products {
        background: var(--v-surface) !important;
        border: 1px solid var(--v-line-2) !important;
        padding: 11px 14px !important;
        font-size: 15px;
    }
    body.theimei2 .search-bar .search-products:focus { border-color: var(--v-signal) !important; box-shadow: 0 0 0 3px var(--v-focus) !important; }
    body.theimei2 header > .header-bottom.themedefault { border-bottom: 0; }
    body.theimei2 header > .header-bottom::after { display: none; }
}

/* ----------------------------------------------------------- dropdowns */

body.theimei2 .dropdown-menu {
    background: var(--v-surface);
    color: var(--v-ink);
    border: 1px solid var(--v-line);
    border-radius: 12px;
    box-shadow: var(--v-shadow-lg);
}
body.theimei2 .dropdown-item { color: var(--v-ink-2); }
body.theimei2 .dropdown-item:hover,
body.theimei2 .dropdown-item:focus,
body.theimei2 .dropdown-item.active,
body.theimei2 .dropdown-item:active {
    background: var(--v-bg-sunk) !important;
    color: var(--v-ink) !important;
}
body.theimei2 .dropdown-divider { border-color: var(--v-line); }
body.theimei2 .thememode.active,
body.theimei2 .ordertheme.active { border-color: var(--v-signal) !important; box-shadow: 0 0 0 2px var(--v-focus); }

/* ------------------------------------------------- page title band */

body.theimei2 .page-hero,
body.theimei2 .page-hero.bg-white {
    background: transparent !important;
    border-bottom: 1px solid var(--v-line) !important;
    padding-top: 36px !important;
    padding-bottom: 22px !important;
    margin-bottom: 28px !important;
}
/* catalog pages hide the band title (theme.css) and print their own: keep only a slim crumb bar */
body.theimei2.tpl-cart .page-hero,
body.theimei2.tpl-client_retail_group .page-hero,
body.theimei2.tpl-cart_item_config .page-hero {
    padding-top: 16px !important;
    padding-bottom: 12px !important;
}
/* on these pages theme.css hides the title, and below md the breadcrumb is hidden too: the
   band would be empty on phones */
@media (max-width: 767.98px) {
    body.theimei2.tpl-cart .page-hero,
    body.theimei2.tpl-client_retail_group .page-hero,
    body.theimei2.tpl-cart_item_config .page-hero { display: none; }
}
body.theimei2.tpl-cart .page-hero .breadcrumb,
body.theimei2.tpl-client_retail_group .page-hero .breadcrumb,
body.theimei2.tpl-cart_item_config .page-hero .breadcrumb { margin-top: 0; }
body.theimei2 .page-title {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--v-ink);
    padding: 0;
}
body.theimei2 .page-hero .page-title::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 14px;
    vertical-align: 0.18em;
    background: var(--v-volt);
    box-shadow: 0 0 0 1px var(--v-line-2);
}
body.theimei2 .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 10px 0 0;
    font-family: var(--v-mono);
    font-size: 12px;
    letter-spacing: 0.02em;
    color: var(--v-muted);
}
body.theimei2 .breadcrumb a { color: var(--v-muted); }
body.theimei2 .breadcrumb a:hover { color: var(--v-ink); }
body.theimei2 .breadcrumb .fa-home { margin-right: 8px; }

/* --------------------------------------------------------------- cards */

body.theimei2 .card {
    background: var(--v-surface);
    color: var(--v-ink);
    border: 1px solid var(--v-line);
    border-radius: var(--v-radius);
    box-shadow: none;
}
body.theimei2 .card-header,
body.theimei2 .card-footer {
    background: transparent;
    border-color: var(--v-line);
}
body.theimei2 .card-header:first-child { border-radius: var(--v-radius) var(--v-radius) 0 0; }
body.theimei2 .list-group-item {
    background: var(--v-surface) !important;
    color: var(--v-ink);
    border-color: var(--v-line);
}
body.theimei2 .list-group-item-action:hover { background: var(--v-bg-sunk) !important; }

/* product cards: lift + a current running around the border */
body.theimei2 .card-product {
    position: relative;
    overflow: hidden;
    transition: transform .35s var(--v-ease), border-color .25s ease;
}
body.theimei2 .card-product::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--v-angle), transparent 0 70%, var(--v-signal) 86%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
body.theimei2 .card-product:hover {
    transform: translateY(-3px);
    border-color: var(--v-line-2) !important;
}
body.theimei2 .card-product:hover::after {
    opacity: 1;
    animation: vOrbit 2.2s linear infinite;
}
@keyframes vOrbit { to { --v-angle: 360deg; } }

body.theimei2 .card-product .image-not-found { background: transparent; color: var(--v-ink); }
body.theimei2 .card-product .v-initials {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    background: transparent !important;
}
body.theimei2 .card-product .v-initials span {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--v-hi-bg);
    color: var(--v-volt);
    font-family: var(--v-mono);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: transform .5s var(--v-ease);
}
html[data-theme="dark"] body.theimei2 .card-product .v-initials span {
    background: var(--v-surface-2);
    box-shadow: inset 0 0 0 1px var(--v-line-2);
}
body.theimei2 .card-product:hover .v-initials span { transform: rotate(-6deg) scale(1.06); }
body.theimei2 .card-product .truncate-text,
body.theimei2 .card-product .service-name { font-weight: 500; color: var(--v-ink); }
body.theimei2 .card-product:hover .service-name { color: var(--v-ink); }

/* phones: two compact cards per row (one per row made a 55-service group ~13,000px tall) */
@media (max-width: 767.98px) {
    body.theimei2 .page-container > .row > .col-product,
    body.theimei2 .row > .col-product {
        flex: 0 0 50% !important;   /* theme.css forces 100% !important on phones */
        max-width: 50% !important;
        padding-left: 6px;
        padding-right: 6px;
        margin-top: 0;
        margin-bottom: 12px !important;
    }
    body.theimei2 .row:has(> .col-product) { margin-left: -6px; margin-right: -6px; }
    body.theimei2 .card-product .card-product-img { flex: 0 0 auto; height: auto !important; }
    body.theimei2 .card-product .v-initials { min-height: 96px; padding: 12px !important; }
    body.theimei2 .card-product .v-initials span { width: 52px; height: 52px; border-radius: 14px; font-size: 18px; }
    body.theimei2 .card-product .card-img-top { max-height: 84px; width: auto; }
    body.theimei2 .card-product .card-body { padding: 0 10px 12px !important; }
    body.theimei2 .card-product .truncate-text,
    body.theimei2 .card-product .service-name { font-size: 13px; line-height: 1.35; }
    body.theimei2 .page-title.inner-page-title { margin-top: 20px; margin-bottom: 14px; font-size: 26px; }
}

/* ------------------------------------------------------------- buttons */

body.theimei2 .btn {
    border-radius: var(--v-radius-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
}
body.theimei2 .btn:focus,
body.theimei2 .btn.focus { box-shadow: 0 0 0 3px var(--v-focus); }
body.theimei2 .btn:hover { color: inherit; }
body.theimei2 .btn-secondary,
body.theimei2 .btn-light,
body.theimei2 .btn-default,
body.theimei2 .btn-outline-primary,
body.theimei2 .btn-outline-secondary,
body.theimei2 .btn-outline-dark,
body.theimei2 .btn-v-outline {
    background: var(--v-surface) !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-line-2) !important;
}
body.theimei2 .btn-secondary:hover,
body.theimei2 .btn-light:hover,
body.theimei2 .btn-default:hover,
body.theimei2 .btn-outline-primary:hover,
body.theimei2 .btn-outline-secondary:hover,
body.theimei2 .btn-outline-dark:hover,
body.theimei2 .btn-v-outline:hover { border-color: var(--v-ink) !important; color: var(--v-ink) !important; }
body.theimei2 .btn-success { background: var(--v-ok) !important; border-color: var(--v-ok) !important; color: #FFFFFF !important; }
body.theimei2 .btn-danger { background: var(--v-bad) !important; border-color: var(--v-bad) !important; color: #FFFFFF !important; }
body.theimei2 .btn-link { color: var(--v-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- forms */

body.theimei2 .form-control,
body.theimei2 .custom-select,
body.theimei2 .chosen-container-single .chosen-single,
body.theimei2 .chosen-container-multi .chosen-choices {
    background-color: var(--v-surface) !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-line-2) !important;
    border-radius: var(--v-radius-sm);
    box-shadow: none;
    background-image: none;
}
body.theimei2 .custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23888' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 8px 10px !important;
}
body.theimei2 .form-control::placeholder { color: var(--v-faint); }
body.theimei2 .form-control:focus,
body.theimei2 .custom-select:focus,
body.theimei2 .chosen-container-active .chosen-single {
    border-color: var(--v-signal) !important;
    box-shadow: 0 0 0 3px var(--v-focus) !important;
}
body.theimei2 .form-control:disabled,
body.theimei2 .form-control[readonly] { background-color: var(--v-bg-sunk) !important; }
body.theimei2 .input-group-text {
    background: var(--v-bg-sunk);
    color: var(--v-muted);
    border-color: var(--v-line-2);
}
body.theimei2 label { color: var(--v-ink-2); }

/* icon + field read as one control (login, register, settings…) */
body.theimei2 .input-group > .input-group-prepend > .input-group-text {
    background: var(--v-surface) !important;
    border: 1px solid var(--v-line-2) !important;
    border-right: 0 !important;
    color: var(--v-muted);
    padding-right: 4px;
    transition: border-color .2s ease, color .2s ease;
}
body.theimei2 .input-group > .input-group-prepend + .form-control { border-left: 0 !important; }
body.theimei2 .input-group:focus-within > .input-group-prepend > .input-group-text {
    border-color: var(--v-signal) !important;
    color: var(--v-signal);
}
body.theimei2 .input-group:focus-within > .input-group-prepend + .form-control { box-shadow: none !important; }
body.theimei2 .input-group:focus-within { border-radius: var(--v-radius-sm); box-shadow: 0 0 0 3px var(--v-focus); }

/* full-page login (protected routes without a session) */
body.theimei2.tpl-login .body-container {
    position: relative;
    padding: 40px 0 96px;
    isolation: isolate;
}
body.theimei2.tpl-login .body-container::before {
    content: "";
    position: absolute;
    inset: -28px 0 0;
    z-index: -1;
    background-image: radial-gradient(var(--v-dot) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(50% 60% at 50% 40%, #000, transparent);
    mask-image: radial-gradient(50% 60% at 50% 40%, #000, transparent);
}
body.theimei2 .page-login { max-width: 420px !important; }
body.theimei2.tpl-login .page-login .card.fieldoflogin {
    padding: 30px 28px 26px !important;
    border-radius: 22px;
    box-shadow: var(--v-shadow-lg);
}
body.theimei2 .page-login .page-title {
    font-size: 26px;
    margin-bottom: 22px !important;
}
body.theimei2 .page-login .page-title::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin-top: 14px;
    background: var(--v-volt);
    box-shadow: 0 0 0 1px var(--v-line-2);
}
/* inside the login modal the form's own card is redundant: its border ran along the fields */
body.theimei2 .modal .page-login .card,
body.theimei2 .modal .page-login .fieldoflogin {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
body.theimei2 .page-login .custom-checkbox { margin-left: 0 !important; }
/* the captcha iframe follows the field radius */
body.theimei2 .cf-turnstile iframe { border-radius: var(--v-radius-sm); }
body.theimei2 .page-login .loginbuttons { padding: .8rem 1rem; border-radius: 12px; }
body.theimei2 .custom-control-input:checked ~ .custom-control-label::before,
body.theimei2 .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3A12E8 !important;
    border-color: #3A12E8 !important;
}
body.theimei2 .custom-control-label::before { background-color: var(--v-surface); border: 1.5px solid var(--v-faint); }

body.theimei2 .chosen-container .chosen-drop {
    background: var(--v-surface);
    border-color: var(--v-line-2);
    border-radius: 0 0 var(--v-radius-sm) var(--v-radius-sm);
    box-shadow: var(--v-shadow-lg);
}
body.theimei2 .chosen-container .chosen-results li { color: var(--v-ink); border-color: var(--v-line) !important; }
body.theimei2 .chosen-container .chosen-results li.group-result { color: var(--v-muted) !important; font-family: var(--v-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
body.theimei2 .chosen-container .chosen-results li.highlighted {
    background: var(--v-hi-bg) !important;
    background-image: none !important;
    color: var(--v-hi-ink) !important;
}
body.theimei2 .chosen-container .chosen-search input[type="text"] {
    background-color: var(--v-bg-sunk);
    color: var(--v-ink);
    border-color: var(--v-line-2);
}
body.theimei2 .chosen-container-single .chosen-single span { color: var(--v-ink); }

/* -------------------------------------------------------- nav & tables */

body.theimei2 .nav-pills .nav-link { color: var(--v-ink-2); border-radius: 999px; }
body.theimei2 .nav-pills .nav-link.active,
body.theimei2 .nav-pills .show > .nav-link,
body.theimei2 ul.nav-pills.flex-nowrap .nav-link.active {
    background: var(--v-invert-bg) !important;
    color: var(--v-invert-ink) !important;
    border-color: transparent !important;
}
/* settings tabs (Edit Profile / Master Pin…): a rounded segmented control.
   theme.css squares the active tab (border-radius:0 + black underline). */
body.theimei2 ul.nav-pills.flex-nowrap {
    display: inline-flex;
    max-width: 100%;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--v-line);
    border-radius: 999px;
    background: var(--v-bg-sunk);
}
body.theimei2 ul.nav-pills.flex-nowrap .nav-link {
    padding: .5rem 1.05rem;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--v-muted);
    font-weight: 500;
    white-space: nowrap;
    transition: background-color .25s ease, color .2s ease;
}
body.theimei2 ul.nav-pills.flex-nowrap .nav-link:hover { color: var(--v-ink); background: var(--v-line); }
body.theimei2 ul.nav-pills.flex-nowrap .nav-link.active {
    background: var(--v-invert-bg) !important;
    color: var(--v-invert-ink) !important;
    border-bottom: 0 !important;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
}
body.theimei2 .homepagegroups ul.nav-pills.flex-nowrap {
    display: flex;
    padding: 0;
    border: 0;
    background: transparent;
}
body.theimei2 .nav-tabs { border-color: var(--v-line); }
body.theimei2 .nav-tabs .nav-link { color: var(--v-muted); border: 0; border-bottom: 2px solid transparent; }
body.theimei2 .nav-tabs .nav-link:hover { color: var(--v-ink); }
body.theimei2 .nav-tabs .nav-link.active,
body.theimei2 .nav-tabs .nav-item.show .nav-link {
    background: transparent;
    color: var(--v-ink);
    border-bottom-color: var(--v-signal);
}

body.theimei2 .table { color: var(--v-ink); }
body.theimei2 .table th,
body.theimei2 .table td,
body.theimei2 .table thead th { border-color: var(--v-line); }
body.theimei2 .table thead th {
    font-family: var(--v-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--v-muted);
    border-bottom-width: 1px;
}
body.theimei2 .table-striped tbody tr:nth-of-type(odd) { background: color-mix(in srgb, var(--v-bg-sunk) 55%, transparent); }
body.theimei2 .table-hover tbody tr:hover { background: var(--v-bg-sunk); color: var(--v-ink); }

body.theimei2 .page-link {
    background: var(--v-surface);
    color: var(--v-ink);
    border-color: var(--v-line);
    font-family: var(--v-mono);
    font-size: 13px;
}
body.theimei2 .page-link:hover { background: var(--v-bg-sunk); color: var(--v-ink); }
body.theimei2 .page-item.active .page-link {
    background: var(--v-invert-bg);
    border-color: var(--v-invert-bg);
    color: var(--v-invert-ink);
}
body.theimei2 .page-item.disabled .page-link { background: var(--v-surface); color: var(--v-faint); }

body.theimei2 .progress { background: var(--v-bg-sunk); border-radius: 999px; }
body.theimei2 .progress-bar { background: var(--v-signal); }
html[data-theme="dark"] body.theimei2 .progress-bar { color: var(--v-volt-ink); }

body.theimei2 .badge { font-family: var(--v-mono); font-weight: 500; letter-spacing: .02em; border-radius: 6px; }
body.theimei2 .badge-success { background: var(--v-ok-soft) !important; color: var(--v-ok) !important; }
body.theimei2 .badge-danger { background: var(--v-bad-soft) !important; color: var(--v-bad) !important; }
body.theimei2 .badge-warning { background: var(--v-warn-soft) !important; color: var(--v-warn) !important; }
body.theimei2 .badge-info,
body.theimei2 .badge-primary { background: var(--v-info-soft) !important; color: var(--v-info) !important; }
body.theimei2 .cartminiview .badge-success { background: var(--v-volt) !important; color: var(--v-volt-ink) !important; }

/* order statuses printed by PHP: <span class='textgreen|textred|textyellow|textblue'> */
/* theme.css paints them as solid pills with white text: recolor the fill too, or the text
   would sit on the same color (e.g. the "New" service tag) */
body.theimei2 .textgreen,
body.theimei2 .textred,
body.theimei2 .textyellow,
body.theimei2 .textblue {
    padding: 1px 7px;
    border-radius: 6px;
    font-family: var(--v-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.6;
    vertical-align: 1px;
}
body.theimei2 .textgreen { color: var(--v-ok) !important; background: var(--v-ok-soft) !important; }
body.theimei2 .textred { color: var(--v-bad) !important; background: var(--v-bad-soft) !important; }
body.theimei2 .textyellow { color: var(--v-warn) !important; background: var(--v-warn-soft) !important; }
body.theimei2 .textblue { color: var(--v-info) !important; background: var(--v-info-soft) !important; }

/* ---------------------------------------------------------- alerts */

body.theimei2 .alert { border-radius: 12px; border: 1px solid transparent; }
body.theimei2 .alert-info { background: var(--v-info-soft); border-color: color-mix(in srgb, var(--v-info) 22%, transparent); color: var(--v-info); }
body.theimei2 .alert-success { background: var(--v-ok-soft); border-color: color-mix(in srgb, var(--v-ok) 22%, transparent); color: var(--v-ok); }
body.theimei2 .alert-warning { background: var(--v-warn-soft); border-color: color-mix(in srgb, var(--v-warn) 22%, transparent); color: var(--v-warn); }
body.theimei2 .alert-danger { background: var(--v-bad-soft); border-color: color-mix(in srgb, var(--v-bad) 22%, transparent); color: var(--v-bad); }

/* ----------------------------------------------------------- modals */

body.theimei2 .modal-backdrop.show { opacity: .55; }
body.theimei2 .modal-backdrop { background: #000; }
body.theimei2 .modal-content:not(.hp-modal) {
    background: var(--v-surface);
    color: var(--v-ink);
    border: 1px solid var(--v-line);
    border-radius: 20px;
    box-shadow: var(--v-shadow-lg);
    overflow: hidden;
}
body.theimei2 .modal-content:not(.hp-modal) .modal-header {
    background: transparent !important;
    color: var(--v-ink);
    border-bottom: 1px solid var(--v-line);
    padding: 18px 22px;
}
body.theimei2 .modal-content:not(.hp-modal) .modal-title { color: var(--v-ink); font-weight: 600; letter-spacing: -0.02em; }
/* theme.css paints every modal close button white !important — invisible on light surfaces */
body.theimei2 .modal-content:not(.hp-modal) .close,
body.theimei2 .modal-content:not(.hp-modal) .close span {
    color: var(--v-ink) !important;
    text-shadow: none;
    opacity: .65;
}
body.theimei2 .modal-content:not(.hp-modal) .close:hover,
body.theimei2 .modal-content:not(.hp-modal) .close:hover span { opacity: 1; }
body.theimei2 .close { color: var(--v-ink); text-shadow: none; }
body.theimei2 .modal-body { background: transparent; color: var(--v-ink); }
body.theimei2 .modal-footer { border-color: var(--v-line); }

/* mobile menu (toggle-menu.tpl) */
body.theimei2 .modal-menu .modal-content { border-radius: 0 !important; border: 0 !important; }
body.theimei2 .modal-menu .modal-content .modal-header { color: var(--v-ink) !important; padding: 12px 14px !important; }
body.theimei2 .modal-menu .modal-header a,
body.theimei2 .modal-menu .modal-header h3,
body.theimei2 .modal-menu .modal-header h5,
body.theimei2 .modal-menu .modal-header span { color: var(--v-ink) !important; }
/* signed-in header: avatar never shrinks, long names/emails truncate instead of overlapping */
body.theimei2 .modal-menu .modal-header img { width: 40px; height: 40px; flex: none; display: block; }
body.theimei2 .modal-menu .modal-header .d-flex > div:not(.w-100):not(.ml-2) { flex: none; }
body.theimei2 .modal-menu .modal-header .ml-2 { min-width: 0; flex: 1; }
body.theimei2 .modal-menu .modal-header .ml-2 > * {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.theimei2 .modal-menu .modal-header .ml-2 > span { font-size: 12px; color: var(--v-muted) !important; }
body.theimei2 .modal-menu .modal-header .ml-2 > a { font-size: 12px; color: var(--v-signal) !important; }
body.theimei2 .modal-menu .modal-header .d-flex > a[data-dismiss] { flex: none; color: var(--v-ink) !important; }
body.theimei2 .modal-menu .modal-header .btn:not(.bg-primary) {
    background: transparent !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-line-2) !important;
}
body.theimei2 .modal-menu .modal-body .nav-link,
body.theimei2 .modal-menu .modal-body .dropdown-item { border-color: var(--v-line) !important; }
body.theimei2 .modal-menu .modal-body .nav-link,
body.theimei2 .modal-menu .modal-body a { color: var(--v-ink) !important; }
body.theimei2 .modal-menu .modal-header .btn { border-radius: 999px; }
body.theimei2 .modal-menu .modal-header .btn.bg-primary { background: var(--v-volt) !important; color: var(--v-volt-ink) !important; }

/* ------------------------------------------------------- dashboard */

body.theimei2 .v-dash-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    margin: 0 0 18px;
}
body.theimei2 .v-dash-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .62rem 1.15rem !important;
    font-size: 14px;
    line-height: 1.2;
    border-radius: 999px;
}

/* balance card: always the dark "console" surface, volt figure */
body.theimei2 .client-area .col-left > .card {
    position: relative;
    overflow: hidden;
    padding: 26px !important;
    background: #0B0B0C;
    color: #F2F2EE;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.theimei2 .client-area .col-left > .card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--v-volt), transparent) no-repeat;
    background-size: 200px 1px;
    animation: vSpark 7s cubic-bezier(.6, 0, .4, 1) infinite;
}
body.theimei2 .client-area .col-left > .card::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000);
    mask-image: linear-gradient(135deg, transparent 35%, #000);
    pointer-events: none;
}
body.theimei2 .client-area .col-left > .card > * { position: relative; z-index: 1; }
body.theimei2 .client-area .col-left > .card,
body.theimei2 .client-area .col-left > .card h1,
body.theimei2 .client-area .col-left > .card h2,
body.theimei2 .client-area .col-left > .card h3,
body.theimei2 .client-area .col-left > .card h4,
body.theimei2 .client-area .col-left > .card h5,
body.theimei2 .client-area .col-left > .card a:not(.btn) { color: #F2F2EE; }
body.theimei2 .client-area .col-left > .card .text-muted { color: rgba(242, 242, 238, 0.55) !important; }
body.theimei2 .client-area .col-left > .card .big-font {
    color: var(--v-volt);
    font-weight: 600;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}
body.theimei2 .client-area .col-left > .card .btn-primary {
    background-color: #F2F2EE !important;
    color: #0B0B0C !important;
}
body.theimei2 .client-area .card-unpaid-balance,
body.theimei2 .client-area .card-othercredit { padding: 22px; }

body.theimei2 .card-area-status { padding: 18px 20px; }
body.theimei2 .card-area-status .bg-light { background: var(--v-bg-sunk) !important; }
body.theimei2 .card-area-status .progressbar { height: 4px !important; min-width: 4px; border-radius: 4px; }
body.theimei2 .card-order-success .progressbar { background: var(--v-ok) !important; }
body.theimei2 .card-order-process .progressbar { background: var(--v-info) !important; }
body.theimei2 .card-order-fail .progressbar { background: var(--v-bad) !important; }
body.theimei2 .card-area-status .h2 { font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

body.theimei2 .v-quick {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--v-surface) !important;
    color: var(--v-ink) !important;
    border: 1px solid var(--v-line-2) !important;
    border-radius: 999px;
    padding: .55rem 1rem;
}
body.theimei2 .v-quick:hover { border-color: var(--v-ink) !important; }
body.theimei2 .v-quick-telegram i { color: #229ED9; }
body.theimei2 .v-quick-app i { color: #3DDC84; }
body.theimei2 .card-announcement { padding: 20px; }

/* -------------------------------------------------------------- footer */

body.theimei2 footer { --v-foot: #0B0B0C; }
html[data-theme="dark"] body.theimei2 footer { --v-foot: #050506; }
body.theimei2 .footer-top {
    position: relative;
    background: var(--v-foot) !important;
    color: rgba(242, 242, 238, 0.6);
    border-top: 1px solid var(--v-line) !important;
    padding-top: 56px !important;
    padding-bottom: 40px !important;
}
body.theimei2 .footer-top .link-heading {
    color: #F2F2EE !important;
    font-family: var(--v-mono);
    font-size: 12px !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .08em;
}
body.theimei2 .footer-top h4.link-heading { font-size: 13px !important; }
body.theimei2 .footer-top .link-heading:after {
    width: 18px;
    height: 2px;
    background: var(--v-volt) !important;
}
body.theimei2 .footer-top a,
body.theimei2 .footer-top .nav-link,
body.theimei2 .footer-top .footer-navbar .nav .nav-item a.nav-link { color: rgba(242, 242, 238, 0.66) !important; }
body.theimei2 .footer-top a:hover,
body.theimei2 .footer-top .footer-navbar .nav .nav-item a.nav-link:hover { color: var(--v-volt) !important; }
body.theimei2 .footer-top .btn,
body.theimei2 .footer-top .btn-light {
    background: transparent !important;
    color: #F2F2EE !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
}
body.theimei2 .footer-bottom {
    background: var(--v-foot) !important;
    color: rgba(242, 242, 238, 0.45);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-family: var(--v-mono);
    font-size: 12px;
}
body.theimei2 .footer-bottom img { opacity: .85; filter: grayscale(.2); }

/* invoice header logo: the uploaded image is ~800px wide and was shown at full column width */
body.theimei2 .app-content-header > img {
    width: auto;
    max-width: 100%;
    max-height: 72px;
    border-radius: 12px;
}

/* The Binance C2C / on-chain payment sheet (vp-*) is styled by includes/binance_common.fun.php,
   which reads the --v-* tokens above. */

/* admin popup (chunks/footer-modals.tpl, #advertisement): self-contained, since the .va-*
   announcement styles in volt-home.css are only loaded on the home page */
body.theimei2 #advertisement .modal-content.va-admin-popup {
    position: relative;
    padding: 44px 32px 30px;
    border: 1px solid var(--v-line-2);
    border-radius: 24px;
    background: var(--v-surface);
    color: var(--v-ink);
    text-align: center;
    overflow: hidden;
}
body.theimei2 #advertisement .va-admin-popup .va-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--v-line-2);
    border-radius: 50%;
    background: var(--v-bg-sunk);
    color: var(--v-ink);
    cursor: pointer;
}
body.theimei2 #advertisement .va-admin-popup img { max-width: 100%; height: auto; }

/* order modals (#modal-order, #modal-order2) are opened with jQuery .show(), not Bootstrap's
   modal(), so body never gets .modal-open: the dialog could not scroll and the wheel moved the
   page behind it. Scroll the modal itself and lock the page while one is open. */
body.theimei2 .modal.modal-ajax {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
body.theimei2:has(.modal.modal-ajax[style*="display: block"]) { overflow: hidden; }
/* clip instead of hidden/auto: they would become scroll containers and break the sticky form */
body.theimei2 .modal.modal-ajax .modal-content,
body.theimei2 .modal.modal-ajax .modal-body { overflow: clip; max-height: none; }
/* theme.css gives the phone sheet a fixed viewport height: let it grow with the content,
   the .modal scrolls instead (clip would otherwise cut the description off) */
body.theimei2 .modal.modal-ajax .modal-content { height: auto !important; }
body.theimei2 .modal.modal-ajax .modal-body { height: auto !important; flex: 1 0 auto; }
@media (max-width: 991.98px) {
    body.theimei2 .modal.modal-ajax .modal-content { min-height: 100%; }
}

/* phones: full-screen sheet with the title + close pinned while the details scroll */
@media (max-width: 991.98px) {
    body.theimei2 .modal.modal-ajax .modal-header {
        position: sticky;
        top: 0;
        z-index: 30;
        align-items: center;
        padding: 12px 12px 12px 16px;
        background: var(--v-surface) !important;
        border-bottom: 1px solid var(--v-line);
    }
    body.theimei2 .modal.modal-ajax .modal-title { font-size: 16px; line-height: 1.35; }
    body.theimei2 .modal.modal-ajax .modal-header .close {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: 0 0 0 8px;
        padding: 0;
        border-radius: 50%;
        background: var(--v-bg-sunk);
        font-size: 22px;
        opacity: 1;
    }
    body.theimei2 .modal.modal-ajax .modal-body { padding: 12px; }
    body.theimei2 .modal.modal-ajax .card-place-retail-order { padding: 16px !important; }
    body.theimei2 .modal.modal-ajax .placeorder-details { margin-top: 12px; }
}

/* ------------------------------ service details (client_order_*_getservicedetails.tpl) */

body.theimei2 .card-place-retail-order {
    padding: 22px !important;
    border-radius: var(--v-radius) !important;
}
/* the order form keeps its natural height (it used to stretch to the description's) and
   stays in view while the description scrolls */
body.theimei2 .placeorder-field { height: auto !important; }
body.theimei2 .placeorder-field > .card-min-height { height: auto; }
@media (min-width: 992px) {
    body.theimei2 .placeorder-field { position: sticky; top: 96px; align-self: flex-start; }
    body.theimei2 .modal .placeorder-field { top: 16px; }
}
body.theimei2 .placeorder-field .form-group > label {
    display: block;
    margin-bottom: 8px;
    font-family: var(--v-mono);
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v-muted);
}
body.theimei2 .card-place-retail-order textarea.form-control {
    width: 100% !important;       /* some fields carry width:200px inline */
    min-height: 150px;
    font-family: var(--v-mono);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
}
body.theimei2 .placeorder-field .text-muted { margin-top: 8px; font-size: 12.5px; }
body.theimei2 .card-place-retail-order input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
    color: var(--v-muted);
}
body.theimei2 .card-place-retail-order input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 9px 14px;
    border: 1px solid var(--v-line-2);
    border-radius: 10px;
    background: var(--v-bg-sunk);
    color: var(--v-ink);
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .2s ease;
}
body.theimei2 .card-place-retail-order input[type="file"]::file-selector-button:hover { border-color: var(--v-ink); }
body.theimei2 .placeorder-field .d-actionbar-mobile { margin-top: 18px; }

body.theimei2 .v-sd-price { display: flex; align-items: baseline; gap: 4px; line-height: 1; }
body.theimei2 .v-sd-price .order-total {
    font-size: 46px;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--v-ink);
    font-variant-numeric: tabular-nums;
}
body.theimei2 .v-sd-cur,
body.theimei2 .v-sd-unit { font-size: 18px; font-weight: 500; color: var(--v-muted); }
body.theimei2 .v-sd-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
body.theimei2 .v-sd-fact {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid var(--v-line);
    border-radius: 10px;
    background: var(--v-bg-sunk);
}
body.theimei2 .v-sd-fact small {
    font-family: var(--v-mono);
    font-size: 10.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v-muted);
}
body.theimei2 .v-sd-fact b { font-size: 14px; font-weight: 600; color: var(--v-ink); }
body.theimei2 .v-sd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
body.theimei2 .v-sd-tags:empty { display: none; }

/* order total vs. balance line */
body.theimei2 .placeorder-details .progress#progress {
    height: 3px !important;
    margin: 18px 0 0;
    border-radius: 3px;
    background: var(--v-line);
}
body.theimei2 .placeorder-details .progress#progress .progress-bar {
    background: var(--v-signal) !important;
    border-radius: 3px;
}
body.theimei2 .placeorder-details .form-group.mt-3 { margin: 18px 0 0 !important; }
body.theimei2 .placeorder-details .v-frequent .custom-control-label { white-space: nowrap; }

/* the admin's description */
body.theimei2 .placeorder-details .service-information {
    margin-top: 20px;
    padding-top: 18px !important;   /* the File details carry .p-0 */
    border-top: 1px solid var(--v-line);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--v-ink-2);
}
body.theimei2 .placeorder-details .service-information:empty { display: none; }
body.theimei2 .placeorder-details .service-information p { margin: 0 0 .55em; }
body.theimei2 .placeorder-details .service-information img { max-width: 100%; height: auto; }

/* "Want to use frequently" toggle on the service details (was an inline #ffc107 box) */
body.theimei2 .v-frequent {
    display: inline-flex;
    align-items: center;
    padding: 9px 14px 9px 12px;
    border: 1px solid var(--v-line-2);
    border-radius: 12px;
    background: var(--v-bg-sunk);
}
body.theimei2 .v-frequent .custom-control-label { color: var(--v-ink); font-weight: 500; }
body.theimei2 .v-frequent .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--v-volt) !important;
    border-color: var(--v-volt) !important;
}
body.theimei2 .v-frequent .custom-control-input:checked ~ .custom-control-label::after {
    filter: invert(1);
}

/* ------------------------------------- theme.css hard-coded light surfaces */

body.theimei2 .table,
body.theimei2 .carousel.slide-products,
body.theimei2 .index-items-homepagegroup,
body.theimei2 tr.updateorder-Replied td,
body.theimei2 tr.updateorder-Cancelled td,
body.theimei2 .pagination .active,
body.theimei2 .alert a { background: transparent; }
body.theimei2 .card-product .product-info,
body.theimei2 .imagemode .card-group .card-info,
body.theimei2 .nav-login,
body.theimei2 .d-actionbar-mobile,
body.theimei2 .chosen-container-single.chosen-with-drop:after { background: var(--v-surface); }
body.theimei2 .imagemode .card-product .product-info { background: color-mix(in srgb, var(--v-surface) 92%, transparent); }
body.theimei2 .btn-addtocart { background: var(--v-surface); color: var(--v-ink); border-color: var(--v-line-2); }
body.theimei2 .card-product .quick-view,
body.theimei2 .card-product:hover .quick-view,
body.theimei2 .big-chosen .chosen-container-single .chosen-search input[type=text] { background: var(--v-bg-sunk); }
body.theimei2 header .dropdown-menu.dropdown-menu-inline .dropdown-item:nth-child(2n+1),
body.theimei2 header .dropdown-menu.dropdown-menu-inline .dropdown-item:nth-child(2n+3) { background: var(--v-bg-sunk); }
body.theimei2 h3.h3 span:before,
body.theimei2 h3.h3 span.text-muted:before,
body.theimei2 h3.h3.box-white span:before { background: var(--v-surface); }
body.theimei2 h3.h3.or.gray span.text-muted:before { background: var(--v-bg); }
body.theimei2 .order-tracking::before,
body.theimei2 .order-tracking .is-complete { background-color: var(--v-line-2); }
body.theimei2 .steps ul li a { background: var(--v-bg-sunk); color: var(--v-muted); }
body.theimei2 .steps ul li.first a,
body.theimei2 .steps ul li.checked a { background: var(--v-surface) !important; color: var(--v-ink); }
body.theimei2 .steps ul li.current a { background: var(--v-invert-bg) !important; color: var(--v-invert-ink); }
body.theimei2 .overflow::-webkit-scrollbar-track,
body.theimei2 .chosen-container .chosen-results::-webkit-scrollbar-track { background: var(--v-bg-sunk); }
body.theimei2 .news-list { border-color: var(--v-line); }

/* ------------------------------------------------------- scroll reveal */

/* html.v-reveal is added by volt.js itself, so nothing stays hidden if the script fails */
.v-reveal body.theimei2 [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .9s var(--v-ease), transform .9s var(--v-ease);
    transition-delay: var(--d, 0s);
}
.v-reveal body.theimei2 [data-reveal].is-in {
    opacity: 1;
    transform: none;
}
/* above-the-fold entrance: pure CSS, staggered with --d (same curve as mantenimiento.php) */
body.theimei2 .vh-in { animation: vUp 1s var(--v-ease) var(--d, 0s) both; }
@keyframes vUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.theimei2 *,
    body.theimei2 *::before,
    body.theimei2 *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .v-reveal body.theimei2 [data-reveal] { opacity: 1; transform: none; }
}