/*
Theme Name: Classima Child
Template: classima
Version: 2.4.0
*/
/* ════════════════════════════════════════════════════════════════════════════
* WrsTrend — Atomic Header Overhaul
* Architecture: Child Theme CSS | Zero hardcoded values | Full RTL parity
*
* SPECIFICITY MAP (prevents silent overrides):
* Classima parent `.main-header .main-navigation-area` → 0,2,0
* Classima parent media `display: block !important` → 0,2,0 + !
* Our container fix `.site-header .main-header .X` → 0,3,0 + ! ← wins
* Classima `a.header-login-icon` (element+class) → 0,1,1
* Our icon fix `.wrs-icon-cluster a.header-login-icon` → 0,2,1 ← wins
* Classima `.header-btn` (class) → 0,1,0
* Our btn fix `.header-btn-area .header-btn` → 0,2,0 ← wins
* Classima `.header-btn` color `!important` → needs our own !important
* ════════════════════════════════════════════════════════════════════════════ */
/* ── §0 Blog image fix (pre-existing, untouched) ─────────────────────── */
.post-each-main .post-thumbnail img.wp-post-image {
width: 100%;
height: auto;
display: block;
object-fit: cover;
object-position: center center;
}
/* ── §1 DESIGN TOKEN LAYER (:root) ───────────────────────────────────────
* Single source of truth. Every pixel, color, and duration lives here.
* Editing one variable cascades everywhere automatically.
* ─────────────────────────────────────────────────────────────────────── */
:root {
/* — Spacing — */
--h-gap-desktop: 20px; /* between icon cluster children on desktop */
--h-gap-tablet: 14px; /* 768–1024px */
--h-gap-mobile: 10px; /* ≤767px */
/* — Icon geometry — */
--h-icon-font: 20px; /* matches Classima's native font-size:20px */
--h-icon-touch: 42px; /* clickable area (WCAG: 44px min) */
--h-icon-radius: 50%; /* circular hover surface */
/* — Icon colours (neutral, not gold — that's the pill's territory) — */
--h-icon-idle: inherit; /* inherits theme fg colour */
--h-icon-hover-bg: rgba(0, 0, 0, 0.06); /* subtle well on hover */
--h-icon-hover-bg-light: rgba(255,255,255,0.12); /* transparent header */
/* — Motion — */
--h-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
--h-dur: 0.25s;
--h-dur-shimmer: 0.55s;
/* — WRS Pill — */
--pill-gold-1: #f59e0b;
--pill-gold-2: #fbbf24;
--pill-gold-3: #d97706;
--pill-h: 36px;
--pill-px: 15px;
--pill-gap: 8px;
--pill-fs: 14px;
--pill-icon: 17px;
--pill-shadow: 0 2px 10px rgba(245, 158, 11, 0.32);
--pill-shadow-h: 0 6px 22px rgba(245, 158, 11, 0.52);
/* — CTA Button — */
--btn-from: #e53e4e;
--btn-mid: #d63547;
--btn-to: #c42f3f;
--btn-shadow: 0 4px 14px rgba(229, 62, 78, 0.30);
--btn-shadow-h: 0 8px 24px rgba(229, 62, 78, 0.42);
}
/* ── §2 CONTAINER ARCHITECTURE ──────────────────────────────────────────
*
* PROBLEM (proved in forensic audit):
* Classima line 1247: `.main-header .main-navigation-area { display:block !important }`
* Specificity = 0,2,0 + !important → kills any gap we write on a lower selector.
*
* SOLUTION:
* Use `.site-header .main-header .main-navigation-area` → 0,3,0 + !important
* This beats Classima at all viewports without touching parent files.
*
* BADGE SAFETY RULE (proved in forensic audit):
* `.rtcl-unread-badge` uses `position:absolute; right:-12px; top:-10px`
* → Any ancestor with `overflow:hidden` will clip it.
* → ALL containers below MUST use `overflow:visible` (default — never set hidden).
* ─────────────────────────────────────────────────────────────────────── */
/* Desktop — main-navigation-area (part-1, part-4, part-5, part-6) */
.site-header .main-header .main-navigation-area {
display: flex !important; /* beats Classima 0,2,0+! with 0,3,0+! */
flex-direction: row-reverse;
align-items: center;
flex-wrap: nowrap;
gap: var(--h-gap-desktop);
min-height: 90px; /* preserve Classima's original height */
padding: 0;
margin: 0;
/* overflow intentionally NOT set — badge safety */
}
/* header-icon-area (part-2, part-3) */
.main-header-inner .header-icon-area {
display: flex;
align-items: center;
gap: var(--h-gap-desktop);
/* overflow intentionally NOT set — badge safety */
}
/* header-mobile-icons (hamburger strip — all parts) */
.header-mobile-icons {
display: flex;
align-items: center;
gap: var(--h-gap-mobile);
/* overflow intentionally NOT set — badge safety */
}
/* Tablet */
@media (max-width: 1024px) {
.site-header .main-header .main-navigation-area,
.main-header-inner .header-icon-area {
gap: var(--h-gap-tablet);
}
}
/* Mobile */
@media (max-width: 767px) {
.site-header .main-header .main-navigation-area {
gap: var(--h-gap-mobile);
justify-content: flex-end;
flex-wrap: wrap;
min-height: auto;
}
.main-header-inner .header-icon-area {
gap: var(--h-gap-mobile);
}
}
/* ── §3 ICON MARGIN STERILIZATION ────────────────────────────────────────
*
* PROBLEM (proved in forensic audit):
* Classima line 1582: `a.header-login-icon { margin-left: 17px }` — specificity 0,1,1
* Classima line 1590: `a.header-chat-icon { margin-left: 15px }` — specificity 0,1,1
* Classima line 1475: `.header-btn-area { margin-left: 17px }` — specificity 0,1,0
* Three different values → asymmetric gaps → visual drift.
*
* SOLUTION:
* Zero-out all individual margins. Gap on the container handles spacing.
* Use specificity 0,2,1 for icon anchors and 0,2,0 for btn-area to win cleanly.
* ─────────────────────────────────────────────────────────────────────── */
/* Win over Classima's 0,1,1 specificity on icon anchors */
.main-navigation-area a.header-login-icon,
.main-navigation-area a.header-chat-icon,
.header-icon-area a.header-login-icon,
.header-icon-area a.header-chat-icon,
.header-mobile-icons a.header-login-icon,
.header-mobile-icons a.header-chat-icon {
margin: 0;
}
/* Win over Classima's 0,1,0 on btn-area */
.main-navigation-area .header-btn-area,
.header-icon-area .header-btn-area {
margin: 0;
}
/* Mobile btn-area margin fix (Classima adds margin-top:15px on mobile) */
@media (max-width: 767px) {
.main-navigation-area .header-btn-area,
.header-icon-area .header-btn-area {
margin-top: 0;
}
}
/* ── §4 ICON VISUAL WEIGHT NORMALIZATION ─────────────────────────────────
*
* PROBLEM: chat/account are flat `display:inline-block` anchors (FontAwesome).
* Next to a glowing gold pill they look "orphaned" — no visual container.
*
* SOLUTION: Give each a 42×42px circular hit-area with a subtle hover surface.
* `overflow:visible` is MANDATORY to preserve the unread badge.
* `position:relative` is MANDATORY — badge uses position:absolute relative to this.
* ─────────────────────────────────────────────────────────────────────── */
.main-navigation-area a.header-login-icon,
.main-navigation-area a.header-chat-icon,
.header-icon-area a.header-login-icon,
.header-icon-area a.header-chat-icon,
.header-mobile-icons a.header-login-icon,
.header-mobile-icons a.header-chat-icon {
position: relative; /* badge anchor — DO NOT REMOVE */
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--h-icon-touch);
height: var(--h-icon-touch);
border-radius: var(--h-icon-radius);
font-size: var(--h-icon-font);
line-height: 1;
flex-shrink: 0;
overflow: visible; /* badge safety — DO NOT CHANGE TO hidden */
text-decoration: none;
transition: background-color var(--h-dur) ease,
transform var(--h-dur) var(--h-ease),
color var(--h-dur) ease;
}
.main-navigation-area a.header-login-icon:hover,
.main-navigation-area a.header-chat-icon:hover,
.header-icon-area a.header-login-icon:hover,
.header-icon-area a.header-chat-icon:hover {
background-color: var(--h-icon-hover-bg);
transform: translateY(-1px);
text-decoration: none;
}
/* Transparent-header variant: white icons on dark bg */
.trheader:not(.elementor-editor-active) .site-header a.header-login-icon,
.trheader:not(.elementor-editor-active) .site-header a.header-chat-icon {
color: #fff; /* Classima already sets this — we reinforce without !important */
}
.trheader:not(.elementor-editor-active) .site-header a.header-login-icon:hover,
.trheader:not(.elementor-editor-active) .site-header a.header-chat-icon:hover {
background-color: var(--h-icon-hover-bg-light);
}
/* ── §4a BADGE SAFETY — SURGICAL POSITION FIX ────────────────────────────
*
* PROBLEM (proved in forensic audit):
* Classima sets `right:-12px; top:-10px` on `.rtcl-unread-badge`.
* Our new 42px container is bigger than Classima's original icon area.
* Badge needs repositioning to sit correctly at the icon's top-right.
*
* Classima uses `a.header-chat-icon .rtcl-unread-badge` → specificity 0,1,2.
* We use the same selector path at higher specificity: 0,2,2.
* ─────────────────────────────────────────────────────────────────────── */
.main-navigation-area a.header-chat-icon .rtcl-unread-badge,
.header-icon-area a.header-chat-icon .rtcl-unread-badge,
.header-mobile-icons a.header-chat-icon .rtcl-unread-badge {
position: absolute;
right: 2px; /* adjusted for 42px container: badge sits top-right */
top: 2px;
bottom: auto;
left: auto;
z-index: 5;
/* No overflow:hidden here — badge clips its own text, not the icon */
}
/* Mobile badge — smaller container on .header-mobile-icons */
.header-mobile-icons a.header-chat-icon .rtcl-unread-badge {
right: -2px;
top: -2px;
}
/* ── §5 CTA BUTTON UPGRADE ───────────────────────────────────────────────
*
* PROBLEM (proved in forensic audit):
* Classima line 1500: `.header-btn { transition: none }` — kills ALL animation.
* Classima line 1487: `.header-btn { color: #fff !important }` — needs matching !
* Classima hover: flat `background: #e43d40` — no gradient, no shimmer.
*
* SOLUTION: Use `.header-btn-area .header-btn` (specificity 0,2,0) to beat
* Classima's `.header-btn` (0,1,0) on most properties.
* Only `color` needs `!important` to match Classima's own `!important`.
* ─────────────────────────────────────────────────────────────────────── */
.header-btn-area .header-btn {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--btn-from) 0%, var(--btn-mid) 50%, var(--btn-to) 100%);
box-shadow: var(--btn-shadow);
color: #fff !important; /* matches parent's !important — necessary */
/* Override Classima's `transition: none` — this is the key fix */
transition: transform var(--h-dur) var(--h-ease),
box-shadow var(--h-dur) ease,
filter var(--h-dur) ease !important;
/* ^ !important on transition only — needed to kill `transition:none` above */
will-change: transform;
}
/* Shimmer sweep — plays on hover */
.header-btn-area .header-btn::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(108deg,
transparent 30%,
rgba(255, 255, 255, 0.20) 50%,
transparent 70%
);
transform: translateX(-110%);
transition: transform var(--h-dur-shimmer) ease;
pointer-events: none;
border-radius: inherit;
}
.header-btn-area .header-btn:hover {
background: linear-gradient(135deg, var(--btn-from) 0%, var(--btn-mid) 50%, var(--btn-to) 100%);
transform: translateY(-2px) scale(1.02);
box-shadow: var(--btn-shadow-h);
filter: brightness(1.07);
}
.header-btn-area .header-btn:hover::before {
transform: translateX(110%);
}
.header-btn-area .header-btn:active {
transform: translateY(0) scale(0.98);
box-shadow: var(--btn-shadow);
transition-duration: 0.08s !important;
}
/* ── §6 WRS ECONOMIC ENGINE PILL ─────────────────────────────────────────
* Self-contained token scope.
* `overflow:hidden` is safe here — the badge is on `.header-chat-icon`, NOT
* inside the pill. The pill's own shimmer needs overflow:hidden to clip.
* ─────────────────────────────────────────────────────────────────────── */
.header-wrs-pill {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--pill-gap);
padding: 0 var(--pill-px);
height: var(--pill-h);
border-radius: 50px;
background: linear-gradient(135deg,
var(--pill-gold-1) 0%,
var(--pill-gold-2) 45%,
var(--pill-gold-3) 100%
);
color: #fff;
font-size: var(--pill-fs);
font-weight: 800;
font-feature-settings: "tnum" 1;
letter-spacing: -0.01em;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
overflow: hidden; /* safe — shimmer must be clipped; badge NOT here */
border: 1px solid rgba(255, 255, 255, 0.30);
box-shadow: var(--pill-shadow),
inset 0 1px 0 rgba(255, 255, 255, 0.18);
transition: transform var(--h-dur) var(--h-ease),
box-shadow var(--h-dur) ease;
cursor: pointer;
-webkit-font-smoothing: antialiased;
will-change: transform;
}
/* Top-gloss micro-layer */
.header-wrs-pill::after {
content: '';
position: absolute;
inset: 0 0 55% 0;
background: linear-gradient(180deg, rgba(255,255,255,0.13) 0%, transparent 100%);
border-radius: 50px 50px 0 0;
pointer-events: none;
}
/* Shimmer sweep */
.header-wrs-pill::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(108deg,
transparent 30%,
rgba(255, 255, 255, 0.32) 50%,
transparent 70%
);
transform: translateX(-110%);
transition: transform var(--h-dur-shimmer) ease;
pointer-events: none;
z-index: 1;
}
.header-wrs-pill:hover {
transform: translateY(-2px) scale(1.04);
box-shadow: var(--pill-shadow-h),
inset 0 1px 0 rgba(255, 255, 255, 0.24);
color: #fff;
text-decoration: none;
}
.header-wrs-pill:hover::before {
transform: translateX(110%);
}
.header-wrs-pill:active {
transform: translateY(0) scale(0.97);
transition-duration: 0.08s;
}
.header-wrs-pill:focus-visible {
outline: 2px solid var(--pill-gold-1);
outline-offset: 3px;
}
/* Icon */
.header-wrs-pill .wrs-pill-icon {
width: var(--pill-icon);
height: var(--pill-icon);
flex-shrink: 0;
display: block;
position: relative;
z-index: 2; /* above shimmer layers */
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
transition: transform var(--h-dur) var(--h-ease);
}
.header-wrs-pill:hover .wrs-pill-icon {
transform: rotate(-12deg) scale(1.12);
}
/* Balance value */
.header-wrs-pill .wrs-pill-value {
display: inline-block;
min-width: 3.2ch;
position: relative;
z-index: 2;
}
/* Balance updated flash (green → gold) */
@keyframes wrs-flash {
0% { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 4px 16px rgba(16,185,129,0.45); }
100% { background: linear-gradient(135deg, var(--pill-gold-1), var(--pill-gold-3)); box-shadow: var(--pill-shadow); }
}
.header-wrs-pill.wrs-updated {
animation: wrs-flash 0.95s ease-out forwards;
}
/* Tablet */
@media (max-width: 1024px) {
:root {
--pill-h: 33px;
--pill-px: 12px;
--pill-fs: 13px;
--pill-icon: 15px;
}
}
/* Mobile */
@media (max-width: 767px) {
:root {
--pill-h: 30px;
--pill-px: 10px;
--pill-fs: 12px;
--pill-gap: 5px;
--pill-icon: 14px;
}
}
/* XS — compact value, never hide the financial number. */
@media (max-width: 400px) {
:root {
--pill-px: 5px;
--pill-gap: 2px;
--pill-fs: 8.8px;
--pill-icon: 12px;
}
#meanmenu .header-wrs-pill .wrs-pill-value,
.header-wrs-pill .wrs-pill-value {
display: inline-flex;
align-items: center;
min-width: 0;
max-width: 7ch;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
}
/* ── §7 RTL MIRROR PARITY ─────────────────────────────────────────────────
* PROBLEM (proved in forensic audit):
* Classima RTL file mirrors `margin-left` → `margin-right`.
* Our gap-based system is direction-agnostic (gap works in both directions).
* BUT: flex `row-reverse` in RTL context must be verified.
* Classima RTL sets `a.header-chat-icon { margin-right: 15px }` (line 1592).
* We zero that out with our margin sterilization above (§3).
* ─────────────────────────────────────────────────────────────────────── */
/* RTL: row-reverse on a flex already-reversed container = LTR visual order */
[dir="rtl"] .site-header .main-header .main-navigation-area {
flex-direction: row; /* RTL + row = natural RTL visual flow */
}
[dir="rtl"] .main-header-inner .header-icon-area {
flex-direction: row-reverse;
}
/* RTL pill: icon stays on the right, number on the left */
[dir="rtl"] .header-wrs-pill {
flex-direction: row-reverse;
}
/* RTL badge repositioning */
[dir="rtl"] .main-navigation-area a.header-chat-icon .rtcl-unread-badge,
[dir="rtl"] .header-icon-area a.header-chat-icon .rtcl-unread-badge {
right: auto;
left: 2px;
top: 2px;
}
/* ── §8 TWITTER/X ICON FIX (pre-existing — untouched) ───────────────── */
.rtin-socials .fa-x-twitter::before,
i.fa-x-twitter::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/* WRS route-owned Classima mobile header stack.
Keep Classima's mobile header fixed, then reserve real viewport space for WRS app shells. */
@media (max-width: 768px) {
body.wrst-wrs-account-shell {
--wrst-mobile-header-h: 56px;
}
body.wrst-wrs-account-shell #meanmenu,
body.wrst-wrs-account-shell.rdthemeSticky .mean-container,
body.wrst-wrs-account-shell.mean-stick #meanmenu {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
z-index: 100080 !important;
width: 100% !important;
transform: translateZ(0);
}
body.wrst-wrs-account-shell #meanmenu .mean-bar,
body.wrst-wrs-account-shell.rdthemeSticky .mean-container .mean-bar,
body.wrst-wrs-account-shell.mean-stick #meanmenu .mean-bar {
position: relative !important;
z-index: 100081 !important;
background: #fff !important;
border-bottom-color: #0b57ff !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, .12) !important;
isolation: isolate;
}
body.wrst-wrs-account-shell .rtcl-MyAccount-wrap {
padding-top: var(--wrst-mobile-header-h) !important;
}
body.wrst-wrs-account-shell .rtcl-MyAccount-content {
scroll-margin-top: var(--wrst-mobile-header-h);
}
}
/* WRS Mobile/Tablet Header Single Owner v43 - Centerline Contract
* Header owns one measurable centerline from compact phones through tablet meanmenu.
* Every action control is 32px/34px high, and the hamburger bars are drawn around center.
*/
@media (max-width: 900px) {
#meanmenu.rt-header-menu {
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
}
#meanmenu .mean-bar {
--wrst-logo-w: clamp(62px, 19vw, 82px);
--wrst-menu-w: clamp(30px, 7.4vw, 34px);
--wrst-head-gap: clamp(4px, 1.35vw, 7px);
display: grid !important;
grid-template-columns: var(--wrst-logo-w) minmax(0, 1fr) var(--wrst-menu-w) !important;
align-items: center !important;
column-gap: var(--wrst-head-gap) !important;
min-height: 54px !important;
height: 54px !important;
padding: 6px clamp(7px, 2vw, 10px) !important;
box-sizing: border-box !important;
background: #ffffff !important;
border-bottom: 2px solid #0b57ff !important;
box-shadow: 0 4px 18px rgba(15, 23, 42, 0.07) !important;
overflow: visible !important;
}
#meanmenu .mean-logo-area {
grid-column: 1 !important;
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: var(--wrst-logo-w) !important;
max-width: var(--wrst-logo-w) !important;
min-width: 0 !important;
height: 38px !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
#meanmenu .mean-logo-area img,
#meanmenu .mean-logo-area svg {
display: block !important;
width: auto !important;
max-width: 100% !important;
max-height: clamp(22px, 6vw, 28px) !important;
height: auto !important;
}
#meanmenu .header-mobile-icons {
grid-column: 2 !important;
position: static !important;
inset: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: clamp(4px, 1.3vw, 7px) !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 36px !important;
padding: 0 !important;
margin: 0 !important;
transform: none !important;
overflow: visible !important;
white-space: nowrap !important;
}
#meanmenu .header-mobile-icons > a {
flex: 0 0 auto !important;
margin: 0 !important;
align-self: center !important;
box-sizing: border-box !important;
}
#meanmenu .header-mobile-icons a.header-btn {
width: clamp(64px, 17vw, 74px) !important;
min-width: clamp(64px, 17vw, 74px) !important;
max-width: 74px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 4px !important;
border-radius: 999px !important;
font-size: clamp(9.5px, 2.65vw, 11px) !important;
font-weight: 800 !important;
line-height: 1 !important;
color: #ffffff !important;
background: linear-gradient(135deg, #0b57ff, #0038e0) !important;
box-shadow: 0 4px 12px rgba(11, 87, 255, 0.22) !important;
border: none !important;
overflow: hidden !important;
}
#meanmenu .header-mobile-icons a.header-btn i,
#meanmenu .header-mobile-icons a.header-login-icon i,
#meanmenu .header-mobile-icons a.header-chat-icon i {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: clamp(14px, 4vw, 17px) !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
#meanmenu .header-mobile-icons a.header-btn i {
font-size: clamp(9.5px, 2.7vw, 11px) !important;
width: auto !important;
height: auto !important;
flex: 0 0 auto !important;
}
#meanmenu .header-mobile-icons a.header-btn span {
display: inline-block !important;
min-width: 0 !important;
overflow: visible !important;
white-space: nowrap !important;
letter-spacing: 0 !important;
}
#meanmenu .header-mobile-icons a.header-login-icon,
#meanmenu .header-mobile-icons a.header-chat-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
width: clamp(28px, 7vw, 32px) !important;
min-width: clamp(28px, 7vw, 32px) !important;
max-width: 32px !important;
height: 32px !important;
padding: 0 !important;
color: #0b57ff !important;
background-color: rgba(11, 87, 255, 0.06) !important;
border-radius: 50% !important;
position: relative !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
#meanmenu .header-wrs-pill {
width: clamp(68px, 19vw, 82px) !important;
min-width: clamp(68px, 19vw, 82px) !important;
max-width: 82px !important;
height: 32px !important;
min-height: 32px !important;
padding: 0 5px !important;
gap: 3px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
color: #07111f !important;
background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.22) !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 999px !important;
}
#meanmenu .header-wrs-pill .wrs-pill-icon {
width: clamp(12px, 3.6vw, 15px) !important;
height: clamp(12px, 3.6vw, 15px) !important;
min-width: clamp(12px, 3.6vw, 15px) !important;
flex: 0 0 clamp(12px, 3.6vw, 15px) !important;
}
#meanmenu .header-wrs-pill .wrs-pill-value {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
min-width: 0 !important;
max-width: 7ch !important;
overflow: hidden !important;
white-space: nowrap !important;
color: #07111f !important;
font-size: clamp(9px, 2.7vw, 10.5px) !important;
font-weight: 900 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
font-variant-numeric: tabular-nums !important;
}
#meanmenu .sidebarBtn {
grid-column: 3 !important;
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: var(--wrst-menu-w) !important;
min-width: var(--wrst-menu-w) !important;
max-width: var(--wrst-menu-w) !important;
height: 32px !important;
padding: 0 !important;
margin: 0 !important;
text-indent: 0 !important;
transform: none !important;
color: #0b57ff !important;
background-color: rgba(11, 87, 255, 0.06) !important;
border-radius: 50% !important;
box-sizing: border-box !important;
}
#meanmenu .sidebarBtn > span,
#meanmenu .sidebarBtn > span::before,
#meanmenu .sidebarBtn > span::after {
width: 18px !important;
max-width: 18px !important;
min-width: 18px !important;
height: 2px !important;
border-radius: 999px !important;
background: #0b57ff !important;
box-shadow: none !important;
}
#meanmenu .sidebarBtn > span {
display: block !important;
position: relative !important;
margin: 0 !important;
}
#meanmenu .sidebarBtn > span::before,
#meanmenu .sidebarBtn > span::after {
content: '' !important;
position: absolute !important;
left: 0 !important;
}
#meanmenu .sidebarBtn > span::before { top: -6px !important; }
#meanmenu .sidebarBtn > span::after { top: 6px !important; }
#meanmenu .header-mobile-icons a.header-chat-icon .rtcl-unread-badge {
position: absolute !important;
right: -2px !important;
top: -2px !important;
left: auto !important;
bottom: auto !important;
z-index: 10 !important;
background-color: #ff3b30 !important;
color: #ffffff !important;
font-size: 9px !important;
font-weight: 700 !important;
height: 16px !important;
min-width: 16px !important;
padding: 0 4px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #ffffff !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
}
}
@media (max-width: 380px) {
#meanmenu .mean-bar {
--wrst-logo-w: 66px;
--wrst-menu-w: 30px;
--wrst-head-gap: 4px;
padding-left: 6px !important;
padding-right: 6px !important;
}
#meanmenu .header-mobile-icons { gap: 4px !important; height: 34px !important; }
#meanmenu .header-mobile-icons a.header-btn { width: 66px !important; min-width: 66px !important; max-width: 66px !important; padding: 0 4px !important; font-size: 9.5px !important; height: 30px !important; min-height: 30px !important; }
#meanmenu .header-mobile-icons a.header-login-icon,
#meanmenu .header-mobile-icons a.header-chat-icon { width: 28px !important; min-width: 28px !important; height: 30px !important; }
#meanmenu .header-wrs-pill { width: 64px !important; min-width: 64px !important; max-width: 64px !important; padding: 0 4px !important; height: 30px !important; min-height: 30px !important; }
#meanmenu .sidebarBtn { width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 30px !important; }
}