/* cm-header-gap-cart-profile-safe-css */ @media (min-width:1400px){ html body header.top-head .account-actions .mpp-user-panel{ display:inline-flex!important; align-items:center!important; gap:4px!important; position:relative!important; flex:0 0 auto!important; } html body header.top-head .account-actions .mpp-user-panel > .mpp-user-dropdown{ right:0!important; left:auto!important; top:calc(100% + 8px)!important; z-index:99999!important; transform:none!important; } html body header.top-head .top-row .logo{ margin-right:38px!important; flex:0 0 auto!important; position:relative!important; z-index:3!important; } html body header.top-head .top-row{column-gap:30px!important} html body header.top-head .mpp-header-cart-wrap{ position:relative!important; display:inline-flex!important; align-items:center!important; overflow:visible!important; } html body header.top-head .mpp-header-cart-panel[hidden]{display:none!important} html body header.top-head .mpp-header-cart-panel.is-open, html body header.top-head .mpp-header-cart-panel:not([hidden]){ display:block!important; position:absolute!important; top:calc(100% + 12px)!important; right:0!important; left:auto!important; width:360px!important; max-width:calc(100vw - 28px)!important; max-height:72vh!important; overflow:auto!important; padding:14px!important; border-radius:16px!important; background:#fff!important; color:#172033!important; border:1px solid #d8e5f7!important; box-shadow:0 18px 46px rgba(15,23,42,.22)!important; z-index:1000000!important; transform:none!important; } html body:not(.light-surface) header.top-head .mpp-header-cart-panel.is-open, html body:not(.light-surface) header.top-head .mpp-header-cart-panel:not([hidden]){ background:#0f1724!important; color:#eaf1fb!important; border-color:#263a59!important; box-shadow:0 20px 56px rgba(0,0,0,.55)!important; } html body header.top-head .mpp-header-cart-panel a{color:inherit!important} } @media (max-width:1399px){ html body header.top-head #mppUserDropdown.cm-mobile-profile-open{ display:block!important; visibility:visible!important; opacity:1!important; position:fixed!important; top:76px!important; right:8px!important; left:auto!important; width:min(315px,calc(100vw - 16px))!important; max-height:calc(100dvh - 92px)!important; overflow:auto!important; padding:8px!important; border-radius:18px!important; background:#fff!important; color:#111827!important; border:1px solid rgba(148,163,184,.45)!important; box-shadow:0 18px 48px rgba(15,23,42,.28)!important; z-index:1000000!important; pointer-events:auto!important; } html body:not(.light-surface) header.top-head #mppUserDropdown.cm-mobile-profile-open{ background:#111827!important; color:#f8fafc!important; border-color:#334155!important; } html body header.top-head #mppUserDropdown.cm-mobile-profile-open .mpp-user-dropdown__nav{ display:flex!important; flex-direction:column!important; gap:4px!important; height:auto!important; max-height:none!important; overflow:visible!important; visibility:visible!important; opacity:1!important; } html body header.top-head #mppUserDropdown.cm-mobile-profile-open .mpp-user-dropdown__item{ display:flex!important; align-items:center!important; gap:10px!important; width:100%!important; min-height:42px!important; padding:10px 12px!important; border-radius:12px!important; color:inherit!important; font-size:15px!important; font-weight:900!important; text-decoration:none!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; } } /* cm-desktop-account-button-size-fix-css */ @media (min-width:1400px){ html body header.top-head .account-actions{ gap:12px!important; align-items:center!important; overflow:visible!important; } html body header.top-head #mppMsgTrigger, html body header.top-head #mppNotifTrigger, html body header.top-head #mppHeaderCartBtn, html body header.top-head .mpp-header-cart__link, html body header.top-head .mpp-header-cart-btn, html body header.top-head #modeToggle{ width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; border-radius:999px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:0!important; box-sizing:border-box!important; } html body header.top-head .mpp-header-cart-wrap{ width:52px!important; height:52px!important; min-width:52px!important; min-height:52px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; position:relative!important; } html body header.top-head #mppUserMenuTrigger, html body header.top-head .mpp-user-menu__trigger, html body header.top-head .mpp-user-panel__trigger, html body header.top-head [aria-controls="mppUserDropdown"]{ height:52px!important; min-height:52px!important; min-width:150px!important; padding:0 15px!important; border-radius:14px!important; display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; gap:10px!important; box-sizing:border-box!important; } html body header.top-head .account-actions svg, html body header.top-head .account-actions i{ width:20px!important; height:20px!important; font-size:19px!important; } html body header.top-head .account-actions .badge, html body header.top-head .account-actions .count, html body header.top-head .account-actions [class*="badge"], html body header.top-head .account-actions [class*="count"]{ top:-7px!important; right:-5px!important; min-width:19px!important; height:19px!important; font-size:11px!important; } } /* cm-btn-sm-primary-contrast */ a.btn--sm.btn--primary, button.btn--sm.btn--primary, .btn--sm.btn--primary{ background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%)!important; background-color:#2563eb!important; } /* cm-dark-filter-caret */ body:not(.light-surface) .mpp-filter-panel--modern select, body:not(.light-surface) .mpp-archive-mod-form select, body:not(.light-surface) #mpp-game-filter-form select, body:not(.light-surface) .adv-search--premium select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:calc(100% - 12px) 50%!important; padding-right:34px!important; } /* cm-edit-profile-polish-css */ /* --- Hero band: lighter, friendlier in LIGHT mode (was dark navy). --- */ body.light-surface .mpp-profile-settings .mpp-profile-hero{ background:linear-gradient(135deg,#eef4ff 0%,#dbe8ff 55%,#cfe1ff 100%)!important; border-bottom:1px solid #d4e1f5!important; box-shadow:none!important; } body.light-surface .mpp-profile-settings .mpp-profile-hero__title{ color:#0f1d33!important;-webkit-text-fill-color:#0f1d33!important; } body.light-surface .mpp-profile-settings .mpp-profile-hero .btn--ghost{ color:#1f3a63!important;border-color:#9fc0ee!important;background:rgba(255,255,255,.65)!important; } /* --- Position picker box --- */ .mpp-profile-settings .mpp-profile-focal{ background:#f6f9ff!important;border:1px solid #dde8f8!important;border-radius:14px!important; padding:12px 14px!important; } body:not(.light-surface) .mpp-profile-settings .mpp-profile-focal{ background:rgba(22,32,44,.55)!important;border-color:rgba(100,150,255,.22)!important; } .mpp-profile-settings .mpp-profile-focal__lbl{display:block!important;margin:6px 0!important;} .mpp-profile-settings .mpp-profile-focal__lbl > span{ display:block!important;font-size:.78rem!important;font-weight:700!important; color:#5b6b85!important;margin-bottom:2px!important; } body:not(.light-surface) .mpp-profile-settings .mpp-profile-focal__lbl > span{color:#9fb2cd!important;} /* --- Modern range sliders (were thin red bars) --- */ .mpp-profile-settings .mpp-profile-focal__range{ -webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px; background:linear-gradient(90deg,#3b82f6 0%,#60a5fa 100%)!important; outline:none;margin:6px 0 2px!important;cursor:pointer; } .mpp-profile-settings .mpp-profile-focal__range::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%; background:#fff;border:3px solid #2563eb;box-shadow:0 2px 6px rgba(0,0,0,.28);cursor:pointer; transition:transform .08s ease; } .mpp-profile-settings .mpp-profile-focal__range::-webkit-slider-thumb:active{transform:scale(1.12);} .mpp-profile-settings .mpp-profile-focal__range::-moz-range-thumb{ width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #2563eb; box-shadow:0 2px 6px rgba(0,0,0,.28);cursor:pointer; } .mpp-profile-settings .mpp-profile-focal__range::-moz-range-track{background:transparent;} .mpp-profile-settings .mpp-profile-focal__range:focus-visible{box-shadow:0 0 0 3px rgba(37,99,235,.30);} /* --- Preview: small zoom so BOTH sliders can pan the image. The picture already fills one axis under object-fit:cover, so without a little overflow on the other axis that slider has nothing to move. --- */ .mpp-profile-settings .mpp-profile-media__preview{overflow:hidden!important;} .mpp-profile-settings .mpp-profile-media__preview img{transform:scale(1.2);} /* cm-header-nav-icons */ .top-head #siteNav .menu .cm-nav-ico{ display:inline-flex; align-items:center; justify-content:center; margin-right:6px; flex:0 0 auto; line-height:0; } .top-head #siteNav .menu .cm-nav-ico svg{ width:16px; height:16px; display:block; opacity:.9; } .top-head #siteNav .menu > li > a:hover .cm-nav-ico svg, .top-head #siteNav .menu > li.current-menu-item > a .cm-nav-ico svg, .top-head #siteNav .menu > li > a[aria-current="page"] .cm-nav-ico svg, .top-head #siteNav .menu > li > a.menu-cta .cm-nav-ico svg{ opacity:1; } /* More visual separation between the wide-desktop menu items (felt cramped after the icons were added). The nav slot is genuinely FULL: at the old icon-margin 6px / gap 14px there were only ~5px before the account/cart cluster, so simply widening the gap overflows and the last item ("Kapcsolat") collides with the profile panel. Instead we REDISTRIBUTE width: tighten the icon->label gap (6px -> 3px) and spend the freed width on a larger gap BETWEEN items (14px -> 17px). The inter-item gap is what actually read as "cramped". Net menu width ends up ~3px NARROWER than before (gap +3px*7 = +21px, icon margin -3px*8 = -24px), so this fits everywhere the old layout fit, with MORE clearance (~8px vs the old ~5px), verified in-browser. NOTE on specificity: several older header plugins set the same selector `html body header.top-head #siteNav.main-nav .menu` to different gaps (22/18/14px), all !important + equal specificity, so the LAST in source order won. We add `nav#siteNav` / `ul.menu` (one extra id-qualified element each) so this rule wins regardless of plugin load order. Scoped >=1500px; the 1400-1499px compact tier (tightest desktop) is left untouched. */ @media (min-width:1500px){ html body header.top-head nav#siteNav.main-nav ul.menu{ gap:17px!important; } .top-head #siteNav .menu .cm-nav-ico{ margin-right:3px!important; } } /* Long usernames must not widen the account cluster into the nav. The header row is a CENTERED grid at capacity, and .account-actions is min-width:max-content (it grows with the name), so a long username pushed the last menu item ("Kapcsolat") under the profile panel. Fix: cap the cluster width and let the username truncate INSIDE it (it already has text-overflow:ellipsis) rather than expanding the cluster. Normal-length names are unaffected (their cluster is below the cap); only long ones truncate, so the menu keeps its clearance regardless of username length. Desktop master header only — the <1400px header has a different (hamburger) layout with no inline menu to collide. */ @media (min-width:1400px){ /* A long username must not widen the account cluster into the nav (the header row is a centered grid at capacity). NOTE: capping .account-actions width does NOT work well — it forces an INTERNAL overlap (the profile button slides onto the 🌐 language switcher) when the fixed-width cluster can't shrink cleanly. Cleaner & robust: cap just the USERNAME span. The cluster then sizes naturally (so the language switcher / dark toggle keep their spacing — no internal overlap), but it stays bounded, so the last menu item keeps its clearance. Normal names (~<=11 chars, e.g. "Tabornok3") show in full; longer ones truncate via the span's existing text-overflow:ellipsis. The body.logged-in class out-specifies the theme's base max-width:151px and scopes this to logged-in users. */ html body.logged-in header.top-head .mpp-user-panel__name{ max-width:100px!important; } } /* Staff-only "Edit" button on the public mod cards (shown only to ranks with the edit_any_mod permission; markup is gated in content-mod.php). Match the side "View mod" button width and sit just below it. */ .cm-staff-edit-btn{ display:block; width:100%; margin-top:8px; text-align:center; box-sizing:border-box; } .cm-staff-edit-inline{ display:inline-flex; align-items:center; gap:4px; margin-top:8px; } /* Footer "Explore" column reuses the primary nav (fallback), which now carries the icons. The user wants the footer list text-only, so hide the icons there. */ .site-footer .cm-nav-ico{ display:none !important; } /* cm-home-light-contrast-css */ body.light-surface .cm-featured__dl-lbl, body.light-surface .cm-featured__dl-num, body.light-surface .cm-featured__row small, body.light-surface .cm-featured__rating--empty, body.light-surface .cm-side-card--topdl small, body.light-surface .cm-side-card--topdl [data-cm-top-dl], body.light-surface .cm-side-topdl__name, body.light-surface .cm-side-topdl__game, body.light-surface .cm-side-topdl__dl{ color:#475569 !important; } /* cm-mod-card-v2-css */ /* --- Side column inner elements (styling only; these elements exist only on v2 cards) --- */ .mod-card-row__side{display:flex;flex-direction:column;gap:12px;min-width:0} .mod-card-row__side .mod-card-row__side-btn{width:100%;order:3} .mod-card-row__statgrid{order:1;display:grid;grid-template-columns:1fr 1fr;gap:13px 8px;min-width:0} .mod-card-row__statcell{display:flex;align-items:center;gap:8px;min-width:0} .mod-card-row__statcell-ico{display:inline-flex;flex:0 0 auto;color:#64748b} .mod-card-row__statcell-ico svg{width:16px;height:16px;display:block} .mod-card-row__statcell-text{display:flex;flex-direction:column;line-height:1.2;min-width:0} .mod-card-row__statcell-label{font-size:.7rem;color:#8a98ab;font-weight:500} .mod-card-row__statcell-value{font-size:.82rem;font-weight:700;color:#1f2a3a} .mod-card-row__side-foot{order:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px} /* File Size row: "File Size: 94,4 MB" inline on one line, Verified pill pushed to the right. The file-scanner injects the pill INSIDE __file-size-value, so we collapse that value box with display:contents and let the size text + pill flow as direct flex items of the file-size span (pill = margin-left:auto). */ .mod-card-row--v2 .mod-card-row__side-foot .mod-card-row__stat-pair-text--file-size{display:flex;align-items:center;flex-wrap:wrap;gap:5px 6px;width:100%;white-space:nowrap;color:#0a0a0a} .mod-card-row--v2 .mod-card-row__side-foot .mod-card-row__file-size-label{display:inline;flex:0 0 auto;margin:0} .mod-card-row--v2 .mod-card-row__side-foot .mod-card-row__file-size-value{display:contents} .mod-card-row--v2 .mod-card-row__side-foot .cmfs-card-pill-wrap{margin-left:auto;flex:0 0 auto} body:not(.light-surface) .mod-card-row--v2 .mod-card-row__side-foot .mod-card-row__stat-pair-text--file-size{color:#f1f5f9} /* Dark mode tints */ body:not(.light-surface) .mod-card-row__statcell-label{color:#8aa0bd} body:not(.light-surface) .mod-card-row__statcell-value{color:#eaf1fb} body:not(.light-surface) .mod-card-row__statcell-ico, body:not(.light-surface) .mod-card-row__statcell-ico .mpp-meta-ico{color:#7e93ad} /* --- Desktop only (>1100px): turn the side wrapper into a real right column. --- */ @media (min-width:1101px){ .mod-card-row--v2.mod-card-row--modland{ grid-template-columns: minmax(0, min(calc(300px * 0.9 * 1.14 * 1.15 * 1.1), calc(38vw * 0.9 * 1.14 * 1.15 * 1.1))) minmax(0,1fr) 320px; } /* Title only over the middle column (was spanning into the right column). */ .mod-card-row--v2.mod-card-row--modland .mod-card-row__title-row{grid-column:2;} /* Side spans both rows on the right, full height, with a subtle divider. */ .mod-card-row--v2.mod-card-row--modland .mod-card-row__actions.mod-card-row__side{ grid-column:3;grid-row:1 / span 2;align-self:stretch;justify-self:stretch; padding-left:16px;border-left:1px solid #e6edf6; } .mod-card-row--v2 .mod-card-row__side .mod-card-row__side-btn{order:0} .mod-card-row--v2 .mod-card-row__side-foot{margin-top:auto} body:not(.light-surface) .mod-card-row--v2.mod-card-row--modland .mod-card-row__actions.mod-card-row__side{border-left-color:rgba(148,163,184,.18)} } /* Game-archive lists (.mod-list--game-wide) sit between two side rails, so the middle column is far narrower than on the full-width /mods/ catalog. Below 1500px there isn't room for the 320px right column without crushing the middle — so keep the game-archive card STACKED (thumb → content → stats → button) up to 1500px. The wide right-column layout only kicks in on roomy /mods/ (from 1101px) and on wide game-archive views (from 1500px). */ @media (min-width:1101px) and (max-width:1499px){ .mod-list--game-wide .mod-card-row--v2.mod-card-row--modland{grid-template-columns:1fr !important;grid-template-rows:auto !important} .mod-list--game-wide .mod-card-row--v2 .mod-card-row__thumb-wrap, .mod-list--game-wide .mod-card-row--v2 .mod-card-row__title-row, .mod-list--game-wide .mod-card-row--v2 .mod-card-row__body, .mod-list--game-wide .mod-card-row--v2 .mod-card-row__actions.mod-card-row__side{grid-column:1 !important;grid-row:auto !important;align-self:stretch !important} .mod-list--game-wide .mod-card-row--v2 .mod-card-row__actions.mod-card-row__side{border-left:0 !important;padding-left:0 !important} } /* cm-mod-feature-pills-css */ .mod-card-row__pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px;padding:0} .mod-card-row__pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#eef2f7;border:1px solid #dbe3ec;color:#33415c;font-size:.8rem;font-weight:600;line-height:1} .mod-card-row__pill-ico{display:inline-flex;color:#2563eb} .mod-card-row__pill-ico svg{display:block} /* Dark mode: match the dark card surfaces. */ body:not(.light-surface) .mod-card-row__pill{background:rgba(40,54,74,.6);border-color:rgba(100,150,255,.22);color:#dce6f5} body:not(.light-surface) .mod-card-row__pill-ico{color:#6ea0ff} /* Submit-form feature-pill picker (click-to-select chips, max 7). */ .cm-fp-picker{margin:2px 0} .cm-fp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px} .cm-fp-chip{cursor:pointer;padding:7px 13px;border-radius:999px;border:1px solid #dbe3ec;background:#f3f6fb;color:#33415c;font-size:.85rem;font-weight:600;line-height:1} .cm-fp-chip:hover{border-color:#9db4d0} .cm-fp-chip.is-on{background:linear-gradient(135deg,#2f7df6,#1d4ed8);border-color:transparent;color:#fff} .cm-fp-chip:disabled{opacity:.4;cursor:not-allowed} .cm-fp-help{font-size:.8rem;opacity:.75;margin:.35rem 0 0} .cm-fp-count{font-weight:800;opacity:.9} body:not(.light-surface) .cm-fp-chip{background:rgba(40,54,74,.6);border-color:rgba(100,150,255,.22);color:#dce6f5} body:not(.light-surface) .cm-fp-chip.is-on{background:linear-gradient(135deg,#2f7df6,#1d4ed8);color:#fff} /* cm-hide-privacy-menu */ @media (max-width: 768px) { nav ul.menu li:has(a[href*="/privacy/"]), nav ul.menu li:has(a[href*="/adatvedelem/"]), nav ul.menu li:has(a[href*="/about/"]), nav ul.menu li:has(a[href*="/terms/"]) { display: none !important; } } /* cm-breadcrumb-hero-fix */ .mpp-breadcrumbs--hero-lg, .mpp-breadcrumbs--hero-lg a, .mpp-breadcrumbs--hero-lg span { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important; opacity: 1 !important; } /* cm-dark-hero-overflow-fix */ /* DESKTOP/TABLET cover fix: the dark-mode design system (020-cm-dark-mode-design-system) lumps .mpp-game-hero in with the card system, giving it a SOLID dark gradient background + border + 18px radius + shadow. That opaque background paints OVER the .mpp-game-topband::before cover image in the hero region, so the top of the game cover gets cut off in dark mode (light mode keeps the hero transparent, so the cover shows). Mobile already worked because the 768px block below sets the hero transparent. Apply the same at ALL widths so the cover shows through like light mode. Class-repetition + html body prefix beats the design-system selector. */ html body:not(.light-surface) .mpp-game-topband .mpp-game-hero, html body:not(.light-surface) .mpp-game-hero.mpp-game-hero{ background:transparent !important; background-color:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Game-archive FILTER BAR (#mpp-game-filter-form / .mpp-gfc) — the Sort/Order/Time + "Refine Mod Filters" panel keeps its light theme background (white @ 70%) in dark mode, showing as a grey block. Give it the same dark surface + subtle blue border the sidebar glass-panels use, so it blends with the rest of the dark UI. */ html body:not(.light-surface) #mpp-game-filter-form, html body:not(.light-surface) .mpp-gfc.mpp-game-filter-sheet__form{ background:rgba(22,32,44,.72) !important; background-color:rgba(22,32,44,.72) !important; background-image:none !important; border:1px solid rgba(100,150,255,.22) !important; } @media (max-width: 768px) { html body:not(.light-surface) .mpp-game-hero { overflow: visible !important; height: auto !important; min-height: unset !important; max-height: unset !important; background: transparent !important; } html body:not(.light-surface) .mpp-game-hero__bg { overflow: hidden !important; border-radius: 0 !important; } html body:not(.light-surface) .mpp-game-topband .section-block, html body:not(.light-surface) .mpp-game-topband .section-block--game-trending, html body:not(.light-surface) .mpp-game-topband .section-block--game-trending--modland-strip, html body:not(.light-surface) .mpp-game-topband .section-block--game-trending--modland-strip > .container, html body:not(.light-surface) .mpp-game-topband .mpp-trending-marquee, html body:not(.light-surface) .mpp-game-topband .mpp-trending-marquee__track, html body:not(.light-surface) .mpp-game-topband .mpp-trending-marquee__lane{ background: transparent !important; background-color: transparent !important; background-image: none !important; } html body:not(.light-surface) .mpp-trending-kicker { color: #f8fbff !important; -webkit-text-fill-color: #f8fbff !important; } html body:not(.light-surface) .mpp-trending-marquee { overflow-x: hidden !important; overflow-y: hidden !important; overscroll-behavior-x: none !important; touch-action: pan-y !important; scrollbar-width: none !important; visibility: visible !important; opacity: 1 !important; clip: unset !important; clip-path: unset !important; } } /* cm-cta-fix */ .main-nav .menu a.menu-cta,.top-head #siteNav .menu a.menu-cta{color:#fff!important}.main-nav .menu a.menu-cta .cm-nav-label,.main-nav .menu a.menu-cta .cm-nav-ico,.top-head #siteNav .menu a.menu-cta .cm-nav-label,.top-head #siteNav .menu a.menu-cta .cm-nav-ico{color:#fff!important;transition:none!important} /* cm-desktop-header-master-only-css */ @media (min-width:1400px){ html body header.top-head{ background:#f8fbff!important; border-bottom:1px solid rgba(15,23,42,.08)!important; box-shadow:0 1px 0 rgba(15,23,42,.03)!important; position:relative!important; z-index:90!important; } html body header.top-head .mini-nav{display:none!important} html body header.top-head .container.top-row{ width:100%!important; max-width:1620px!important; height:86px!important; min-height:86px!important; margin:0 auto!important; padding:0 34px!important; display:grid!important; grid-template-columns:220px minmax(0,1fr) auto!important; align-items:center!important; column-gap:26px!important; overflow:visible!important; box-sizing:border-box!important; } html body header.top-head .logo, html body header.top-head .logo img, html body header.top-head img.custom-logo{ width:220px!important; max-width:220px!important; height:auto!important; } html body header.top-head #siteNav.main-nav{ width:100%!important; min-width:0!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:flex-start!important; overflow:visible!important; } html body header.top-head #siteNav.main-nav .menu{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; gap:22px!important; margin:0!important; padding:0!important; list-style:none!important; overflow:visible!important; } html body header.top-head #siteNav.main-nav .menu > li{ flex:0 0 auto!important; margin:0!important; padding:0!important; } html body header.top-head #siteNav.main-nav .menu > li > a{ height:46px!important; min-height:46px!important; padding:0 3px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#111827!important; font-size:15px!important; font-weight:800!important; line-height:1!important; white-space:nowrap!important; text-decoration:none!important; opacity:1!important; } html body header.top-head #siteNav.main-nav .menu > li > a:hover, html body header.top-head #siteNav.main-nav .menu > li.current-menu-item > a, html body header.top-head #siteNav.main-nav .menu > li.current_page_item > a, html body header.top-head #siteNav.main-nav .menu > li > a[aria-current="page"]{ color:#1d4ed8!important; box-shadow:inset 0 -3px 0 #2f7df6!important; } html body header.top-head #siteNav.main-nav .menu > li > a.menu-cta{ min-width:146px!important; height:50px!important; padding:0 24px!important; border-radius:11px!important; background:#2876f0!important; color:#fff!important; box-shadow:0 12px 28px rgba(37,99,235,.32)!important; } html body header.top-head .account-actions{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:10px!important; margin:0!important; padding:0!important; min-width:max-content!important; overflow:visible!important; } html body:not(.logged-in) header.top-head #mppMsgTrigger, html body:not(.logged-in) header.top-head #mppNotifTrigger, html body:not(.logged-in) header.top-head #mppHeaderCartBtn, html body:not(.logged-in) header.top-head .mpp-header-cart-wrap, html body:not(.logged-in) header.top-head .mpp-header-cart__link, html body:not(.logged-in) header.top-head .account-actions [class*="cart"], html body:not(.logged-in) header.top-head .account-actions [class*="notif"], html body:not(.logged-in) header.top-head .account-actions [class*="message"], html body:not(.logged-in) header.top-head .account-actions [class*="msg"]{ display:none!important; } html body header.top-head .account-actions .account-actions__link[data-mpp-open-login]{ order:1!important; position:static!important; transform:none!important; height:44px!important; min-width:112px!important; padding:0 16px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; border-radius:11px!important; background:#2876f0!important; color:#fff!important; border:1px solid rgba(37,99,235,.20)!important; box-shadow:0 10px 24px rgba(37,99,235,.30)!important; font-size:14px!important; font-weight:800!important; white-space:nowrap!important; } html body header.top-head #mppLangSwitcher{ order:2!important; position:relative!important; overflow:visible!important; width:auto!important; min-width:58px!important; height:42px!important; min-height:42px!important; padding:0 12px!important; border-radius:999px!important; background:#fff!important; color:#0f172a!important; border:1px solid rgba(15,23,42,.10)!important; box-shadow:0 8px 22px rgba(15,23,42,.06)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; z-index:200!important; } html body header.top-head #modeToggle{ order:3!important; width:42px!important; height:42px!important; min-width:42px!important; min-height:42px!important; border-radius:50%!important; background:#fff!important; color:#0f172a!important; border:1px solid rgba(15,23,42,.10)!important; box-shadow:0 8px 22px rgba(15,23,42,.06)!important; } html body header.top-head #mppLangSwitcher:not(.cm-lang-open) > *:not(:first-child), html body header.top-head #mppLangSwitcher:not(.cm-lang-open) ul, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) ol, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .dropdown-menu, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .sub-menu, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .wpml-ls-sub-menu, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .trp-language-switcher-container, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .trp-ls-shortcode-language, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .gt_options, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .language-options, html body header.top-head #mppLangSwitcher:not(.cm-lang-open) .lang-options{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } html body header.top-head #mppLangSwitcher.cm-lang-open ul, html body header.top-head #mppLangSwitcher.cm-lang-open ol, html body header.top-head #mppLangSwitcher.cm-lang-open .dropdown-menu, html body header.top-head #mppLangSwitcher.cm-lang-open .sub-menu, html body header.top-head #mppLangSwitcher.cm-lang-open .wpml-ls-sub-menu, html body header.top-head #mppLangSwitcher.cm-lang-open .trp-language-switcher-container, html body header.top-head #mppLangSwitcher.cm-lang-open .trp-ls-shortcode-language, html body header.top-head #mppLangSwitcher.cm-lang-open .gt_options, html body header.top-head #mppLangSwitcher.cm-lang-open .language-options, html body header.top-head #mppLangSwitcher.cm-lang-open .lang-options{ display:block!important; position:absolute!important; top:calc(100% + 10px)!important; right:0!important; left:auto!important; min-width:150px!important; height:auto!important; max-height:260px!important; padding:8px!important; overflow:auto!important; visibility:visible!important; opacity:1!important; pointer-events:auto!important; background:#fff!important; color:#0f172a!important; border:1px solid rgba(15,23,42,.12)!important; border-radius:13px!important; box-shadow:0 18px 42px rgba(15,23,42,.18)!important; z-index:9999!important; } html body header.top-head .promo-bar{ height:32px!important; min-height:32px!important; background:#2f7df6!important; color:#fff!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:14px!important; font-weight:800!important; } } @media (min-width:1400px) and (max-width:1500px){ html body header.top-head .container.top-row{ max-width:1240px!important; grid-template-columns:180px minmax(0,1fr) auto!important; column-gap:14px!important; padding:0 18px!important; } html body header.top-head .logo, html body header.top-head .logo img, html body header.top-head img.custom-logo{ width:180px!important; max-width:180px!important; } html body header.top-head #siteNav.main-nav .menu{ gap:12px!important; } html body header.top-head #siteNav.main-nav .menu > li > a{ font-size:12.6px!important; } } /* No blue focus-ring BOX on the top-nav links. Chrome draws a 2px solid #3b82f6 outline on :focus / :focus-visible; on a mouse click the link is briefly focused right before the page navigates, so that blue box flashed ("kéken villog a menügomb kattintás után"). Remove the box for both mouse and keyboard; keyboard users still get a clear, non-flashy cue via the blue :focus-visible text (same color as hover / the active item). */ html body header.top-head .main-nav a:focus, html body header.top-head .main-nav a:focus-visible, html body header.top-head .main-nav .menu > li > a:focus, html body header.top-head .main-nav .menu > li > a:focus-visible, html body header.top-head .main-nav ul > li > a:focus, html body header.top-head .main-nav ul > li > a:focus-visible, html body header.top-head .account-actions a:focus, html body header.top-head .account-actions a:focus-visible, html body header.top-head .icon-link:focus, html body header.top-head .icon-link:focus-visible, html body header.top-head #modeToggle:focus, html body header.top-head #mppLangToggle:focus{ outline:none!important; box-shadow:none!important; } /* No blue "fade-in flash" on menu text. The links have transition:color/background .15s, so when a clicked button becomes the active page its text FADED dark→blue (0.15s) → looked like a blue blink ("kéken villog a szöveg kattintás után"). Make every menu state change instant so the active/hover blue just appears, no fade. (Underline/active indicator unchanged.) */ html body header.top-head .main-nav .menu > li > a, html body header.top-head .main-nav ul > li > a, html body header.top-head .main-nav .menu > li > a:hover, html body header.top-head .main-nav ul > li > a:hover{ transition:none!important; } /* Active (current page) menu item must show BLUE TEXT, not just a blue underline. The link text lives in an inner that carries its own dark -webkit-text-fill-color (#111827), which overrode the 's blue, so the text looked black while the underline was blue. Force the blue onto the link AND every descendant, including on hover, so the page you're on stays blue. */ html body header.top-head .main-nav .menu > li.current-menu-item > a, html body header.top-head .main-nav .menu > li.current-menu-item > a *, html body header.top-head .main-nav .menu > li.current-menu-item > a:hover, html body header.top-head .main-nav .menu > li.current-menu-item > a:hover *, html body header.top-head .main-nav .menu > li.current_page_item > a, html body header.top-head .main-nav .menu > li.current_page_item > a *, html body header.top-head .main-nav .menu > li.is-active > a, html body header.top-head .main-nav .menu > li.is-active > a *, html body header.top-head .main-nav .menu > li.is-active > a:hover, html body header.top-head .main-nav .menu > li.is-active > a:hover *, html body header.top-head .main-nav ul > li.current-menu-item > a, html body header.top-head .main-nav ul > li.current-menu-item > a *, html body header.top-head .main-nav ul > li.is-active > a, html body header.top-head .main-nav ul > li.is-active > a *, html body header.top-head .main-nav .menu > li > a[aria-current="page"], html body header.top-head .main-nav .menu > li > a[aria-current="page"] *{ color:#1d4ed8!important; -webkit-text-fill-color:#1d4ed8!important; } /* cm-language-css-flags */ #mppLangDropdown .mpp-lang-option .mpp-lang-flag{ display:inline-block!important; width:22px!important; height:15px!important; min-width:22px!important; margin-right:8px!important; border-radius:3px!important; font-size:0!important; line-height:0!important; color:transparent!important; overflow:hidden!important; vertical-align:-2px!important; box-shadow:inset 0 0 0 1px rgba(15,23,42,.18)!important; } #mppLangDropdown .mpp-lang-option[data-lang="hu"] .mpp-lang-flag{ background:linear-gradient(to bottom,#ce2939 0 33.333%,#fff 33.333% 66.666%,#477050 66.666% 100%)!important; } #mppLangDropdown .mpp-lang-option[data-lang="en"] .mpp-lang-flag{ background: linear-gradient(146deg,transparent 0 42%,#fff 42% 48%,#c8102e 48% 53%,#fff 53% 59%,transparent 59%), linear-gradient(34deg,transparent 0 42%,#fff 42% 48%,#c8102e 48% 53%,#fff 53% 59%,transparent 59%), linear-gradient(to bottom,transparent 0 38%,#fff 38% 44%,#c8102e 44% 56%,#fff 56% 62%,transparent 62%), linear-gradient(to right,transparent 0 38%,#fff 38% 44%,#c8102e 44% 56%,#fff 56% 62%,transparent 62%), #012169!important; } /* cm-desktop-header-width-fit-css */ @media (min-width:1400px){ html body header.top-head .container.top-row{ max-width:1880px!important; width:100%!important; padding-left:28px!important; padding-right:28px!important; column-gap:18px!important; gap:18px!important; grid-template-columns:230px minmax(0,1fr) auto!important; } html body header.top-head #siteNav.main-nav .menu{ gap:18px!important; } html body header.top-head #siteNav.main-nav{ min-width:0!important; overflow:visible!important; } html body header.top-head #siteNav.main-nav .menu > li > a{ padding-left:4px!important; padding-right:4px!important; } html body header.top-head .account-actions{ flex-shrink:0!important; margin-left:10px!important; } } /* cm-social-buttons-strong-text */ @media (min-width:1400px){ /* DISCORD GOMB — feher szoveg, vastag, mindkét módban */ html body .mpp-social-btn--discord, html body a.mpp-social-btn.mpp-social-btn--discord, html body [class*="mpp-social-btn--discord"]{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; font-weight:850 !important; letter-spacing:.01em !important; text-shadow:0 1px 1px rgba(0,0,0,.18) !important; } html body .mpp-social-btn--discord *, html body a.mpp-social-btn--discord *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important; } html body .mpp-social-btn--discord span, html body .mpp-social-btn--discord strong, html body .mpp-social-btn--discord .mpp-social-btn__label{ font-weight:850 !important; } /* GOOGLE GOMB — fekete szoveg, vastag, mindket modban */ html body .mpp-social-btn--google, html body a.mpp-social-btn.mpp-social-btn--google, html body [class*="mpp-social-btn--google"]{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; font-weight:850 !important; letter-spacing:.01em !important; text-shadow:none !important; } html body .mpp-social-btn--google *, html body a.mpp-social-btn--google *{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; } html body .mpp-social-btn--google span, html body .mpp-social-btn--google strong, html body .mpp-social-btn--google .mpp-social-btn__label{ font-weight:850 !important; } /* G logo szineit hagyjuk eredetileg */ html body .mpp-social-btn--google svg, html body .mpp-social-btn--google img{ filter:none !important; } } /* cm-discord-card-final */ @media (min-width:1400px){ /* Online + Tag badge-ek */ html body:not(.light-surface) .cm-side-card--discord .cm-side-discord__online, html body:not(.light-surface) .cm-side-card--discord .cm-side-discord__total{ background:rgba(255,255,255,.20) !important; background-color:rgba(255,255,255,.20) !important; color:#ffffff !important; } html body:not(.light-surface) .cm-side-card--discord .cm-side-discord__online *, html body:not(.light-surface) .cm-side-card--discord .cm-side-discord__total *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html body:not(.light-surface) .cm-side-card--discord .cm-side-discord__online-dot{ background:#22c55e !important; background-color:#22c55e !important; box-shadow:0 0 0 3px rgba(34,197,94,.30) !important; } /* Discord ikon doboz felul */ html body:not(.light-surface) .cm-side-card--discord .cm-side-discord__ico{ background:rgba(255,255,255,.18) !important; color:#ffffff !important; } } /* cm-pricing-white-css */ @media (min-width:1400px){ /* Pricing card gombok szovegei feherek dark modban */ html body:not(.light-surface) .cm-pricing__btn, html body:not(.light-surface) .cm-pricing__btn *, html body:not(.light-surface) .cm-pricing-card__btn, html body:not(.light-surface) .cm-pricing-card__btn *, html body:not(.light-surface) .cm-pricing__cta, html body:not(.light-surface) .cm-pricing__cta *, html body:not(.light-surface) .pricing-card__btn, html body:not(.light-surface) .pricing-card__btn *, html body:not(.light-surface) .plan-card__btn, html body:not(.light-surface) .plan-card__btn *, html body:not(.light-surface) [class*="pricing"][class*="btn"], html body:not(.light-surface) [class*="pricing"][class*="btn"] *, html body:not(.light-surface) [class*="pricing"][class*="cta"], html body:not(.light-surface) [class*="pricing"][class*="cta"] *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* LITE / PRO / ELITE rang badge-ek — feherre */ html body:not(.light-surface) .mpp-rank-badge, html body:not(.light-surface) .mpp-rank-badge *, html body:not(.light-surface) .mpp-rank, html body:not(.light-surface) .mpp-rank *, html body:not(.light-surface) .cm-rank-badge, html body:not(.light-surface) .cm-rank-badge *, html body:not(.light-surface) [class*="rank-badge"], html body:not(.light-surface) [class*="rank-badge"] *, html body:not(.light-surface) [class*="rank"][class*="lite"], html body:not(.light-surface) [class*="rank"][class*="lite"] *, html body:not(.light-surface) [data-rank], html body:not(.light-surface) [data-rank] *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } } /* cm-contact-buttons-tip */ @media (min-width:1400px){ /* OSSZES gomb a kapcsolat oldali kartyakban — kek bg + feher szoveg, MINDKET MODBAN */ html body .cm-contact-card .cm-contact-card__btn, html body .cm-contact-card .cm-contact-card__btn:link, html body .cm-contact-card .cm-contact-card__btn:visited, html body .cm-contact-card a[class*="btn"], html body .cm-contact-card a.button, html body .cm-contact-card a.btn, html body .cm-contact-cards a.button, html body .cm-contact-cards a.btn, html body .cm-contact-cards [class*="btn"]{ background:#3b82f6 !important; background-color:#3b82f6 !important; background-image:linear-gradient(180deg,#3b82f6,#2563eb) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:0 !important; box-shadow:0 4px 12px rgba(37,99,235,.32) !important; } html body .cm-contact-card a[class*="btn"]:hover, html body .cm-contact-card .cm-contact-card__btn:hover{ background:#2563eb !important; background-color:#2563eb !important; background-image:linear-gradient(180deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; } html body .cm-contact-card .cm-contact-card__btn *, html body .cm-contact-card a[class*="btn"] *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; fill:#ffffff !important; } /* Tipp sor — feher szoveg dark modban; light modban marad eredeti */ html body:not(.light-surface) .cm-contact-note, html body:not(.light-surface) .cm-contact-note *, html body:not(.light-surface) .cm-contact-tip, html body:not(.light-surface) .cm-contact-tip *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html body:not(.light-surface) .cm-contact-note strong, html body:not(.light-surface) .cm-contact-tip strong{ color:#ffffff !important; } } /* cm-header-auth-buttons-dark */ @media (min-width:1400px){ /* ===== REGISZTRACIO (kek bg + feher szoveg + feher ikon) — dark mode ===== */ html body:not(.light-surface) header.top-head .account-actions__link[href*="register"], html body:not(.light-surface) header.top-head [data-mpp-open-register], html body:not(.light-surface) header.top-head a.account-actions__link--register, html body:not(.light-surface) header.top-head a[href*="regisztr"], html body:not(.light-surface) header .menu-cta[href*="register"]{ background:#3b82f6 !important; background-color:#3b82f6 !important; background-image:linear-gradient(180deg,#3b82f6,#2563eb) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:0 !important; box-shadow:0 4px 12px rgba(37,99,235,.40) !important; } html body:not(.light-surface) header.top-head .account-actions__link[href*="register"]:hover, html body:not(.light-surface) header.top-head [data-mpp-open-register]:hover, html body:not(.light-surface) header.top-head a[href*="regisztr"]:hover{ background:#2563eb !important; background-color:#2563eb !important; background-image:linear-gradient(180deg,#2563eb,#1d4ed8) !important; color:#ffffff !important; } html body:not(.light-surface) header.top-head .account-actions__link[href*="register"] *, html body:not(.light-surface) header.top-head [data-mpp-open-register] *, html body:not(.light-surface) header.top-head a[href*="regisztr"] *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important; } /* ===== BELEPES (feher bg + fekete szoveg + fekete ikon) — dark mode ===== */ html body:not(.light-surface) header.top-head .account-actions__link[href*="login"], html body:not(.light-surface) header.top-head [data-mpp-open-login], html body:not(.light-surface) header.top-head a.account-actions__link--login, html body:not(.light-surface) header.top-head a[href*="bel.p.s"], html body:not(.light-surface) header .menu-cta[href*="login"]{ background:#ffffff !important; background-color:#ffffff !important; background-image:none !important; color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; border:0 !important; box-shadow:0 4px 12px rgba(0,0,0,.20) !important; } html body:not(.light-surface) header.top-head .account-actions__link[href*="login"]:hover, html body:not(.light-surface) header.top-head [data-mpp-open-login]:hover, html body:not(.light-surface) header.top-head a[href*="bel.p.s"]:hover{ background:#f3f4f6 !important; background-color:#f3f4f6 !important; color:#0f172a !important; } html body:not(.light-surface) header.top-head .account-actions__link[href*="login"] *, html body:not(.light-surface) header.top-head [data-mpp-open-login] *, html body:not(.light-surface) header.top-head a[href*="bel.p.s"] *{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; fill:#0f172a !important; stroke:#0f172a !important; } } /* cm-register-page-dark */ @media (min-width:1400px){ /* ===== DISCORD GOMB — kek bg + feher szoveg + feher ikon ===== */ html body:not(.light-surface) a.mpp-social-btn--discord, html body:not(.light-surface) button.mpp-social-btn--discord, html body:not(.light-surface) .mpp-social-btn--discord{ background:#5865f2 !important; background-color:#5865f2 !important; background-image:linear-gradient(180deg,#5865f2,#4752c4) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:0 !important; box-shadow:0 4px 12px rgba(88,101,242,.40) !important; } html body:not(.light-surface) .mpp-social-btn--discord:hover{ background:#4752c4 !important; background-color:#4752c4 !important; background-image:linear-gradient(180deg,#4752c4,#3941ad) !important; } html body:not(.light-surface) .mpp-social-btn--discord *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; fill:#ffffff !important; stroke:#ffffff !important; } /* ===== GOOGLE GOMB — feher bg + fekete szoveg + szines G logo ===== */ html body:not(.light-surface) a.mpp-social-btn--google, html body:not(.light-surface) button.mpp-social-btn--google, html body:not(.light-surface) .mpp-social-btn--google{ background:#ffffff !important; background-color:#ffffff !important; background-image:none !important; color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; border:1px solid #d1d5db !important; box-shadow:0 2px 8px rgba(0,0,0,.18) !important; } html body:not(.light-surface) .mpp-social-btn--google:hover{ background:#f3f4f6 !important; background-color:#f3f4f6 !important; } html body:not(.light-surface) .mpp-social-btn--google span, html body:not(.light-surface) .mpp-social-btn--google strong, html body:not(.light-surface) .mpp-social-btn--google .mpp-social-btn__label{ color:#0f172a !important; -webkit-text-fill-color:#0f172a !important; } /* A G logo: ha SVG, hagyjuk az eredeti szineket; ha img, novelhetjuk a kontrasztot */ html body:not(.light-surface) .mpp-social-btn--google svg{ filter:none !important; } html body:not(.light-surface) .mpp-social-btn--google img{ filter:none !important; } /* Erosebb Google brand szinu G — ha CSS pseudo elemmel van rajzolva, itt biztositjuk az eros teltessegot */ html body:not(.light-surface) .mpp-social-btn--google::before, html body:not(.light-surface) .mpp-social-btn--google .google-icon{ filter:saturate(1.4) contrast(1.1) !important; } /* ===== FORM LABEL-EK feherek ===== */ html body:not(.light-surface) .um-field-label, html body:not(.light-surface) .um-field-label label, html body:not(.light-surface) .um label, html body:not(.light-surface) .um-form label, html body:not(.light-surface) form.mpp-um-form label, html body:not(.light-surface) .mpp-um-form .um-field-label, html body:not(.light-surface) .mpp-um-form label{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* "Elfogadom a … és az …" checkbox-mellett szoveg */ html body:not(.light-surface) .um-field-checkbox-option, html body:not(.light-surface) .um-field-checkbox span, html body:not(.light-surface) .um-field-checkbox label, html body:not(.light-surface) .um-field-checkbox-option *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* ===== FIOK LETREHOZASA gomb (submit) — feher szoveg ===== */ html body:not(.light-surface) .um-button, html body:not(.light-surface) input[type="submit"].um-button, html body:not(.light-surface) button.um-button, html body:not(.light-surface) .mpp-um-form .um-button, html body:not(.light-surface) .mpp-um-action{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } html body:not(.light-surface) .um-button *, html body:not(.light-surface) .mpp-um-action *{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } } /* cm-active-nav-white-dark */ @media (min-width:1400px){ /* Kek alahuzas / csik eltavolitas dark modban */ html body:not(.light-surface) header.top-head .current-menu-item > a::before, html body:not(.light-surface) header.top-head .current-menu-item > a::after, html body:not(.light-surface) header.top-head .current_page_item > a::before, html body:not(.light-surface) header.top-head .current_page_item > a::after, html body:not(.light-surface) header.top-head [class*="current-"] > a::before, html body:not(.light-surface) header.top-head [class*="current-"] > a::after, html body:not(.light-surface) header.top-head [aria-current="page"]::before, html body:not(.light-surface) header.top-head [aria-current="page"]::after, html body:not(.light-surface) header.top-head .menu-item.active > a::before, html body:not(.light-surface) header.top-head .menu-item.active > a::after, html body:not(.light-surface) header.top-head .nav-link.active::after{ background:transparent !important; background-color:transparent !important; border:0 !important; height:0 !important; width:0 !important; display:none !important; content:none !important; opacity:0 !important; } } /* cm-login-modal-dark */ @media (min-width:1400px){ /* OVERLAY — backdrop blur — minden retegre */ html body:not(.light-surface) #mppLoginModal, html body:not(.light-surface) .mpp-modal[data-mpp-login-modal], html body:not(.light-surface) .mpp-modal{ background:transparent !important; background-color:transparent !important; } html body:not(.light-surface) #mppLoginModal .mpp-modal__backdrop, html body:not(.light-surface) .mpp-modal .mpp-modal__backdrop{ background:rgba(15,23,42,.45) !important; background-color:rgba(15,23,42,.45) !important; backdrop-filter:blur(10px) saturate(1.2) !important; -webkit-backdrop-filter:blur(10px) saturate(1.2) !important; } /* MODAL DIALOG (a kozepi kartya) */ html body:not(.light-surface) #mppLoginModal .mpp-modal__dialog, html body:not(.light-surface) .mpp-modal .mpp-modal__dialog, html body:not(.light-surface) .mpp-modal .mpp-modal__dialog.glass-panel, html body:not(.light-surface) .glass-panel.mpp-modal__dialog{ background:#334163 !important; background-color:#334163 !important; background-image:none !important; color:#e2e8f0 !important; border:1px solid rgba(148,163,184,.30) !important; box-shadow:0 24px 48px rgba(0,0,0,.55) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Cim */ html body:not(.light-surface) #mppLoginModal h2, html body:not(.light-surface) #mppLoginModal h3, html body:not(.light-surface) #mppLoginModal .mpp-modal__title, html body:not(.light-surface) #mppLoginTitle{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* Field labelek */ html body:not(.light-surface) #mppLoginModal .mpp-field__label, html body:not(.light-surface) #mppLoginModal label, html body:not(.light-surface) .mpp-modal .mpp-field__label{ color:#e2e8f0 !important; -webkit-text-fill-color:#e2e8f0 !important; font-weight:600 !important; } /* INPUT MEZOK — .mpp-input class precize */ html body:not(.light-surface) #mppLoginModal .mpp-input, html body:not(.light-surface) .mpp-modal .mpp-input, html body:not(.light-surface) input.mpp-input{ background:#0f1729 !important; background-color:#0f1729 !important; background-image:none !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; border:1px solid rgba(148,163,184,.40) !important; box-shadow:none !important; } html body:not(.light-surface) input.mpp-input::placeholder, html body:not(.light-surface) #mppLoginModal .mpp-input::placeholder{ color:#94a3b8 !important; opacity:1 !important; -webkit-text-fill-color:#94a3b8 !important; } html body:not(.light-surface) input.mpp-input:focus, html body:not(.light-surface) #mppLoginModal .mpp-input:focus{ border-color:#3b82f6 !important; box-shadow:0 0 0 3px rgba(59,130,246,.25) !important; outline:0 !important; } html body:not(.light-surface) input.mpp-input:-webkit-autofill, html body:not(.light-surface) #mppLoginModal .mpp-input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px #0f1729 inset !important; -webkit-text-fill-color:#ffffff !important; caret-color:#ffffff !important; } /* Show password toggle */ html body:not(.light-surface) #mppLoginModal .mpp-password-toggle{ color:#94a3b8 !important; background:transparent !important; } html body:not(.light-surface) #mppLoginModal .mpp-password-toggle:hover{ color:#e2e8f0 !important; } /* Checkbox + szoveg */ html body:not(.light-surface) #mppLoginModal .mpp-checkbox, html body:not(.light-surface) #mppLoginModal .mpp-field--checkbox, html body:not(.light-surface) #mppLoginModal .mpp-field--checkbox label, html body:not(.light-surface) #mppLoginModal label[for*="remember"]{ color:#e2e8f0 !important; -webkit-text-fill-color:#e2e8f0 !important; } /* Linkek (Elfelejtett jelszo? / Regisztracio) */ html body:not(.light-surface) #mppLoginModal a:not(.mpp-social-btn--discord):not(.mpp-social-btn--google):not(.mpp-btn--primary):not(.um-button):not(.mpp-um-action){ color:#60a5fa !important; -webkit-text-fill-color:#60a5fa !important; } /* "vagy" elvalaszto */ html body:not(.light-surface) #mppLoginModal .mpp-divider, html body:not(.light-surface) #mppLoginModal .mpp-or, html body:not(.light-surface) #mppLoginModal [class*="divider"]{ color:#94a3b8 !important; } /* X bezar */ html body:not(.light-surface) #mppLoginModal .mpp-modal__close, html body:not(.light-surface) #mppLoginModal [data-mpp-close-login]:not(.mpp-modal__backdrop){ color:#cbd5e1 !important; background:transparent !important; } html body:not(.light-surface) #mppLoginModal .mpp-modal__close:hover{ color:#ffffff !important; background:rgba(148,163,184,.10) !important; } } /* cm-header-light-bg */ @media (min-width:1400px){ html body.light-surface header.top-head{ background:linear-gradient(180deg,#ECF3FE 0%,#D4E3FB 100%) !important; background-color:#E0EAFB !important; background-image:linear-gradient(180deg,#ECF3FE 0%,#D4E3FB 100%) !important; } html body.light-surface header.top-head .top-head__inner, html body.light-surface header.top-head .top-head__bar{ background:transparent !important; background-color:transparent !important; background-image:none !important; } } /* cm-home-stats-putty-css */ body.home .cm-home-stats{background:#f8fbff!important;border-top:1px solid rgba(15,23,42,.06)!important;border-bottom:1px solid rgba(15,23,42,.08)!important} body.home .cm-home-stats__inner{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0!important;padding:12px 16px!important} body.home .cm-home-stat{position:relative!important;display:grid!important;grid-template-columns:46px auto!important;grid-template-rows:auto auto!important;justify-content:center!important;align-items:center!important;column-gap:12px!important;row-gap:2px!important} body.home .cm-home-stat:not(:last-child)::after{content:""!important;position:absolute!important;right:0!important;top:18%!important;bottom:18%!important;width:1px!important;background:rgba(15,23,42,.08)!important} body.home .cm-home-stat__icon{grid-column:1!important;grid-row:1/3!important;width:42px!important;height:42px!important;border-radius:999px!important;background:#e7f0ff!important;color:#2876f0!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:20px!important;margin:0!important} body.home .cm-home-stat strong{grid-column:2!important;grid-row:1!important;display:block!important;font-size:22px!important;line-height:1!important;font-weight:900!important;color:#111827!important;margin:0!important} body.home .cm-home-stat span:last-child{grid-column:2!important;grid-row:2!important;display:block!important;font-size:13px!important;line-height:1.25!important;font-weight:500!important;color:#1f2937!important;margin:0!important} @media(max-width:1399px){body.home .cm-home-stats__inner{grid-template-columns:repeat(2,1fr)!important;row-gap:14px!important}body.home .cm-home-stat:nth-child(2)::after{display:none!important}} /* cm-hide-hero-filter-button-css */ @media (max-width:1399px){ body[class*="game"] .mpp-game-hero a[href*="filter"], body[class*="game"] .mpp-game-hero button, body[class*="game"] .mpp-game-hero .btn, body[class*="game"] .mpp-game-hero [data-mpp-open-game-filter], body[class*="game"] .mpp-game-hero #mpp-open-game-filters{ display:none!important; } .mpp-game-hero a.btn, .mpp-game-hero button.btn, .mpp-game-hero .mpp-game-hero__actions, .mpp-game-hero .mpp-hero-actions{ display:none!important; } } /* cm-mobile-top-stats-final-css */ @media (max-width:1399px){ .cm-modern-stat-box .cm-modern-stat:nth-child(2) > *, .cm-modern-stat-box .cm-modern-stat:nth-child(3) > *{ display:none!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(2), .cm-modern-stat-box .cm-modern-stat:nth-child(3){ display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(2)::before, .cm-modern-stat-box .cm-modern-stat:nth-child(3)::before{ content:""!important; width:18px!important; height:18px!important; flex:0 0 18px!important; display:block!important; background:#334155!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(2)::before{ -webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat!important; mask:url('data:image/svg+xml;utf8,') center/contain no-repeat!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(3)::before{ -webkit-mask:url('data:image/svg+xml;utf8,') center/contain no-repeat!important; mask:url('data:image/svg+xml;utf8,') center/contain no-repeat!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(2)::after, .cm-modern-stat-box .cm-modern-stat:nth-child(3)::after{ content:attr(data-cm-label) "\A" attr(data-cm-value)!important; white-space:pre!important; display:block!important; font-size:10px!important; line-height:1.12!important; font-weight:800!important; color:#0f172a!important; text-align:left!important; } } /* cm-mobile-top-stats-final-css */ @media (max-width:1399px){ .cm-modern-stat-box .cm-modern-stat:nth-child(2) .cm-modern-stat-label, .cm-modern-stat-box .cm-modern-stat:nth-child(3) .cm-modern-stat-label{ font-size:0!important; line-height:0!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(2) .cm-modern-stat-label::after{ content:"Like"!important; display:block!important; font-size:10px!important; line-height:1.05!important; } .cm-modern-stat-box .cm-modern-stat:nth-child(3) .cm-modern-stat-label::after{ content:"Comment"!important; display:block!important; font-size:10px!important; line-height:1.05!important; } body:not(.cm-top-stats-fixed) .cm-modern-stat-box .cm-modern-stat:nth-child(2) .cm-modern-stat-value, body:not(.cm-top-stats-fixed) .cm-modern-stat-box .cm-modern-stat:nth-child(3) .cm-modern-stat-value{ color:transparent!important; } } /* cm-home-stats-icons-css */ body.home .cm-home-stat__icon{font-size:0!important;width:46px!important;height:46px!important;border-radius:999px!important;display:flex!important;align-items:center!important;justify-content:center!important} body.home .cm-home-stat__icon:before{font-family:"Font Awesome 6 Free"!important;font-weight:900!important;font-size:22px!important;line-height:1!important} body.home .cm-home-stat:nth-child(1) .cm-home-stat__icon{color:#2d2bdd!important;background:#ece9ff!important} body.home .cm-home-stat:nth-child(2) .cm-home-stat__icon{color:#13b84f!important;background:#dcf8e8!important} body.home .cm-home-stat:nth-child(3) .cm-home-stat__icon{color:#2878ff!important;background:#e8f1ff!important} body.home .cm-home-stat:nth-child(4) .cm-home-stat__icon{color:#2d2bdd!important;background:#ece9ff!important} body.home .cm-home-stat:nth-child(1) .cm-home-stat__icon:before{content:"\f11b"!important} body.home .cm-home-stat:nth-child(2) .cm-home-stat__icon:before{content:"\f12e"!important} body.home .cm-home-stat:nth-child(3) .cm-home-stat__icon:before{content:"\f019"!important} body.home .cm-home-stat:nth-child(4) .cm-home-stat__icon:before{content:"\f0c0"!important} /* cm-dark-mode-design-system-v2 */ @media (min-width:1400px){ /* ========================================================== 1) GLOBÁLIS TOKENEK ========================================================== */ body:not(.light-surface), html.cm-dh-dark body{ --cm-bg: #050a11; --cm-bg-soft: #08111d; --cm-surface-1: #0f1724; --cm-surface-2: #111c2b; --cm-surface-3: #162235; --cm-border: rgba(148,163,184,.16); --cm-border-strong: rgba(148,163,184,.24); --cm-divider: rgba(148,163,184,.14); --cm-text: #f8fafc; --cm-text-secondary: #cbd5e1; --cm-text-muted: #94a3b8; --cm-link: #60a5fa; --cm-link-hover: #93c5fd; --cm-primary: #2f7df6; --cm-primary-hover: #4590ff; --cm-success: #22c55e; --cm-warning: #fbbf24; --cm-danger: #ef4444; } /* ========================================================== 2) BACKGROUND — minden oldalra ugyanaz a deep dark ========================================================== */ body:not(.light-surface), body:not(.light-surface) #page, body:not(.light-surface) .site, body:not(.light-surface) .site-content, body:not(.light-surface) .main-wrap, body:not(.light-surface) main, body:not(.light-surface) main#main-content, body:not(.light-surface) main.main-wrap, body:not(.light-surface) main#main-content.main-wrap, body:not(.light-surface) .cm-home-redesign, body:not(.light-surface) .cm-home-redesign__container, body:not(.light-surface) .entry-content, body:not(.light-surface) .page-content, body:not(.light-surface) .mpp-contact-page, body:not(.light-surface) .mpp-page-pricing, body:not(.light-surface) .messages-page, body:not(.light-surface) .single-mod{ background:var(--cm-bg) !important; background-color:var(--cm-bg) !important; color:var(--cm-text-secondary) !important; } /* ========================================================== 3) HEADER ========================================================== */ body:not(.light-surface) header.top-head{ background:var(--cm-bg) !important; background-color:var(--cm-bg) !important; border-bottom:1px solid var(--cm-border) !important; box-shadow:none !important; } /* ========================================================== 4) TIPOGRÁFIA — egyseges hierarchia minden oldalon ========================================================== */ body:not(.light-surface) h1, body:not(.light-surface) h2, body:not(.light-surface) h3, body:not(.light-surface) h4, body:not(.light-surface) .title, body:not(.light-surface) strong{ color:var(--cm-text) !important; } body:not(.light-surface) p, body:not(.light-surface) li, body:not(.light-surface) .description, body:not(.light-surface) .excerpt, body:not(.light-surface) .lead{ color:var(--cm-text-secondary) !important; } body:not(.light-surface) small, body:not(.light-surface) .meta, body:not(.light-surface) .muted, body:not(.light-surface) time, body:not(.light-surface) .post-meta, body:not(.light-surface) .label, body:not(.light-surface) .field-label{ color:var(--cm-text-muted) !important; } /* Linkek (kivéve gombok) */ body:not(.light-surface) a:not(.button):not(.btn):not(.menu-cta):not(.cm-hero__cta):not(.cm-side-discord__btn):not(.cm-featured__btn):not(.cm-side-topdl__more):not(.um-button):not(.mpp-um-action){ color:var(--cm-link) !important; } body:not(.light-surface) a:not(.button):hover{ color:var(--cm-link-hover) !important; } /* ========================================================== 5) KÁRTYA RENDSZER — egyseges minden oldalon ========================================================== */ body:not(.light-surface) .glass-card, body:not(.light-surface) .cm-stat-card, body:not(.light-surface) .cm-stats-row, body:not(.light-surface) .cm-side-card, body:not(.light-surface) .cm-hero, body:not(.light-surface) .cm-stats, body:not(.light-surface) .cm-featured, body:not(.light-surface) .cm-categories, body:not(.light-surface) .mpp-card, body:not(.light-surface) .mod-card-row, body:not(.light-surface) .cm-modern-card-view, body:not(.light-surface) .mpp-game-tile, body:not(.light-surface) .mpp-um-profile-info-card, body:not(.light-surface) .mpp-auth-card, body:not(.light-surface) .mpp-form-card, body:not(.light-surface) .mpp-panel, body:not(.light-surface) .mpp-info-card, body:not(.light-surface) .mpp-game-hero, body:not(.light-surface) .mpp-pricing-card, body:not(.light-surface) .pricing-card, body:not(.light-surface) .mpp-contact-card, body:not(.light-surface) .contact-option-card, body:not(.light-surface) .mpp-contact-form, body:not(.light-surface) .mpp-contact-page__card, body:not(.light-surface) .mpp-tip-box, body:not(.light-surface) .mpp-tip, body:not(.light-surface) [class*="tip-box"]{ background:linear-gradient(180deg,var(--cm-surface-1),var(--cm-surface-2)) !important; background-color:var(--cm-surface-1) !important; border:1px solid var(--cm-border) !important; border-radius:18px !important; box-shadow:0 14px 32px rgba(0,0,0,.28) !important; color:var(--cm-text-secondary) !important; } /* Kontaktoldal — minden belso card a tartalomban */ body:not(.light-surface) .mpp-contact-page section, body:not(.light-surface) .mpp-contact-page article, body:not(.light-surface) .mpp-contact-page .glass-card, body:not(.light-surface) .mpp-contact-page > .container > div{ background:linear-gradient(180deg,var(--cm-surface-1),var(--cm-surface-2)) !important; background-color:var(--cm-surface-1) !important; border:1px solid var(--cm-border) !important; color:var(--cm-text-secondary) !important; } /* Sidebar wrapper transparent (nem keret) */ body:not(.light-surface) .cm-home-redesign__side{ background:transparent !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; } /* ========================================================== 6) DIVIDER ========================================================== */ body:not(.light-surface) hr, body:not(.light-surface) .cm-featured__row + .cm-featured__row, body:not(.light-surface) .cm-side-topdl li + li, body:not(.light-surface) .cm-side-stats li + li, body:not(.light-surface) .mod-card-row + .mod-card-row, body:not(.light-surface) .cm-modern-card-view + .cm-modern-card-view{ border-color:var(--cm-divider) !important; border-top-color:var(--cm-divider) !important; border-bottom-color:var(--cm-divider) !important; } /* ========================================================== 7) FORMS — INPUT / SELECT / TEXTAREA / FILTEREK / MODAL ========================================================== */ body:not(.light-surface) input[type="text"], body:not(.light-surface) input[type="search"], body:not(.light-surface) input[type="email"], body:not(.light-surface) input[type="password"], body:not(.light-surface) input[type="url"], body:not(.light-surface) input[type="number"], body:not(.light-surface) input[type="tel"], body:not(.light-surface) textarea, body:not(.light-surface) select, body:not(.light-surface) .mpp-gfc__field, body:not(.light-surface) .mpp-gfc__pill, body:not(.light-surface) .mpp-gfc__dropdown-btn, body:not(.light-surface) .mpp-modal input, body:not(.light-surface) .mpp-modal select, body:not(.light-surface) .mpp-modal textarea, body:not(.light-surface) .um-form input, body:not(.light-surface) .um-form select{ background:var(--cm-bg-soft) !important; background-color:var(--cm-bg-soft) !important; border:1px solid var(--cm-border-strong) !important; color:var(--cm-text) !important; } body:not(.light-surface) input::placeholder, body:not(.light-surface) textarea::placeholder{ color:var(--cm-text-muted) !important; opacity:1 !important; } body:not(.light-surface) input:focus, body:not(.light-surface) textarea:focus, body:not(.light-surface) select:focus{ border-color:var(--cm-link) !important; box-shadow:0 0 0 3px rgba(96,165,250,.22) !important; outline:none !important; } /* Login / Auth Modal — Google gomb és modal sajátok */ body:not(.light-surface) .mpp-modal, body:not(.light-surface) .mpp-modal__panel, body:not(.light-surface) .mpp-modal__content, body:not(.light-surface) .mpp-auth-card{ background:linear-gradient(180deg,var(--cm-surface-1),var(--cm-surface-2)) !important; background-color:var(--cm-surface-1) !important; border:1px solid var(--cm-border) !important; color:var(--cm-text) !important; } body:not(.light-surface) .mpp-modal label, body:not(.light-surface) .mpp-auth-card label{ color:var(--cm-text-muted) !important; } /* ========================================================== 8) GOMBOK — egyseges rendszer ========================================================== */ body:not(.light-surface) .button, body:not(.light-surface) .btn, body:not(.light-surface) .menu-cta, body:not(.light-surface) a.cm-hero__cta, body:not(.light-surface) .cm-hero__cta{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } body:not(.light-surface) .cm-hero__cta *{ color:#ffffff !important; fill:#ffffff !important; } /* Outlined / secondary gombok */ body:not(.light-surface) .cm-featured__btn, body:not(.light-surface) .cm-side-topdl__more, body:not(.light-surface) .btn--ghost, body:not(.light-surface) .button--secondary{ background:rgba(15,23,42,.55) !important; border:1px solid var(--cm-border-strong) !important; color:var(--cm-link) !important; } body:not(.light-surface) .cm-featured__btn:hover, body:not(.light-surface) .cm-side-topdl__more:hover{ background:rgba(59,130,246,.12) !important; border-color:var(--cm-link) !important; color:var(--cm-link-hover) !important; } /* Disabled gomb */ body:not(.light-surface) [aria-disabled="true"], body:not(.light-surface) :disabled{ opacity:.65 !important; color:#dbeafe !important; } /* Header Regisztráció gomb (vendegnek) */ body:not(.light-surface) header.top-head .account-actions__link[href*="register"], body:not(.light-surface) header.top-head [data-mpp-open-register]{ background:linear-gradient(180deg,#3b82f6,#2563eb) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:0 !important; opacity:1 !important; } /* ========================================================== 9) DISCORD KÁRTYA — saját identitás ========================================================== */ body:not(.light-surface) .cm-side-discord, body:not(.light-surface) .cm-side-card--discord{ background:linear-gradient(135deg,#5865F2 0%,#4752c4 100%) !important; background-color:#5865F2 !important; border:0 !important; color:#ffffff !important; } body:not(.light-surface) .cm-side-discord *{ color:#ffffff !important; } body:not(.light-surface) a.cm-side-discord__btn, body:not(.light-surface) .cm-side-discord__btn{ background:#ffffff !important; background-color:#ffffff !important; color:#1f2950 !important; border:0 !important; box-shadow:0 6px 14px rgba(0,0,0,.25) !important; } body:not(.light-surface) a.cm-side-discord__btn *, body:not(.light-surface) .cm-side-discord__btn *{ color:#1f2950 !important; -webkit-text-fill-color:#1f2950 !important; fill:#1f2950 !important; } body:not(.light-surface) .cm-side-discord__online, body:not(.light-surface) .cm-side-discord__total{ background:rgba(15,23,42,.72) !important; color:#f8fafc !important; border:1px solid rgba(255,255,255,.12) !important; } body:not(.light-surface) .cm-side-discord__online-dot{ background:var(--cm-success) !important; box-shadow:0 0 0 3px rgba(34,197,94,.22) !important; } /* ========================================================== 10) MOD/JATEK CARDS — meta szövegek tisztulnak ========================================================== */ body:not(.light-surface) .mod-card-row__title, body:not(.light-surface) .mod-card-row__title a, body:not(.light-surface) .cm-modern-title, body:not(.light-surface) .cm-modern-title a{ color:var(--cm-link) !important; } body:not(.light-surface) .mod-card-row__excerpt, body:not(.light-surface) .cm-modern-excerpt{ color:var(--cm-text-secondary) !important; } body:not(.light-surface) .mod-card-row__meta-line, body:not(.light-surface) .cm-modern-stat, body:not(.light-surface) .cm-modern-tax, body:not(.light-surface) .cm-modern-tax a, body:not(.light-surface) .cm-modern-author{ color:var(--cm-text-muted) !important; } /* ========================================================== 11) FOOTER ========================================================== */ body:not(.light-surface) .site-footer, body:not(.light-surface) .site-footer--premium, body:not(.light-surface) footer.site-footer{ background:linear-gradient(180deg,var(--cm-bg-soft) 0%,var(--cm-bg) 100%) !important; background-color:var(--cm-bg-soft) !important; border-top:1px solid var(--cm-border) !important; color:var(--cm-text-secondary) !important; } body:not(.light-surface) .site-footer h2, body:not(.light-surface) .site-footer h3, body:not(.light-surface) .site-footer h4, body:not(.light-surface) .site-footer strong{ color:var(--cm-text) !important; } body:not(.light-surface) .site-footer a{ color:var(--cm-text) !important; } body:not(.light-surface) .site-footer a:hover{ color:var(--cm-link-hover) !important; } body:not(.light-surface) .site-footer .copy, body:not(.light-surface) .site-footer .copy *, body:not(.light-surface) .site-footer__copy{ color:var(--cm-text-muted) !important; } /* ========================================================== 12) STAT CARDOK ========================================================== */ body:not(.light-surface) .cm-stat-card__num{ color:var(--cm-text) !important; } body:not(.light-surface) .cm-stat-card__lbl{ color:var(--cm-text-secondary) !important; } body:not(.light-surface) .cm-stat-card__link{ color:var(--cm-link) !important; } body:not(.light-surface) .cm-stat-card__ico{ background:var(--cm-surface-3) !important; color:#a9c8ff !important; } /* ========================================================== 13) SCROLLBAR / SELECTION ========================================================== */ body:not(.light-surface) ::selection{ background:rgba(59,130,246,.45); color:#fff; } } /* cm-dark-contact-cards-css */ @media (min-width:1400px){ body:not(.light-surface) .cm-contact-wrap, body:not(.light-surface) .cm-contact-hero, body:not(.light-surface) .cm-contact-card, body:not(.light-surface) .cm-contact-note, body:not(.light-surface) .glass-card.mpp-contact-page{ background:linear-gradient(180deg,#0f1724,#111c2b) !important; background-color:#0f1724 !important; border:1px solid rgba(148,163,184,.18) !important; color:#cbd5e1 !important; border-radius:18px !important; box-shadow:0 14px 32px rgba(0,0,0,.28) !important; } /* A hero (felso kek banner) maradjon, csak finomitsuk */ body:not(.light-surface) .cm-contact-hero{ background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 100%) !important; color:#f8fafc !important; } body:not(.light-surface) .cm-contact-hero h1, body:not(.light-surface) .cm-contact-hero h2, body:not(.light-surface) .cm-contact-hero p{ color:#f8fafc !important; } /* A 3 fo card (Tamogatas, DMCA, Kozosseg) */ body:not(.light-surface) .cm-contact-grid{ background:transparent !important; } body:not(.light-surface) .cm-contact-card h2, body:not(.light-surface) .cm-contact-card h3, body:not(.light-surface) .cm-contact-card strong{ color:#f8fafc !important; } body:not(.light-surface) .cm-contact-card p, body:not(.light-surface) .cm-contact-card{ color:#cbd5e1 !important; } body:not(.light-surface) .cm-contact-card small, body:not(.light-surface) .cm-contact-card .meta{ color:#94a3b8 !important; } /* "Tip" sav alul */ body:not(.light-surface) .cm-contact-note{ background:#0f172a !important; background-color:#0f172a !important; color:#cbd5e1 !important; } /* Contact button stilusok */ body:not(.light-surface) .cm-contact-btn{ background:linear-gradient(180deg,#3b82f6,#2563eb) !important; color:#ffffff !important; border:0 !important; } body:not(.light-surface) .cm-contact-btn.secondary, body:not(.light-surface) .cm-contact-btn.cm-ghost{ background:rgba(15,23,42,.55) !important; border:1px solid rgba(148,163,184,.24) !important; color:#f8fafc !important; } body:not(.light-surface) .cm-contact-btn:hover{ filter:brightness(1.10); } } /* cm-hero-live-search-dark-css */ @media (min-width:1400px){ /* Pozicionalas: a hero search formhoz dropdown legyen alatta */ .cm-hero__search{position:relative !important;overflow:visible !important} /* DROPDOWN — sotet modra szabva */ body:not(.light-surface) .cm-home-live-results{ background:#0f1724 !important; border:1px solid rgba(148,163,184,.18) !important; box-shadow:0 22px 48px rgba(0,0,0,.50) !important; color:#cbd5e1 !important; } body:not(.light-surface) .cm-home-live-item{ color:#e2e8f0 !important; } body:not(.light-surface) .cm-home-live-item:hover, body:not(.light-surface) .cm-home-live-item:focus{ background:rgba(59,130,246,.16) !important; color:#93c5fd !important; } body:not(.light-surface) .cm-home-live-thumb{ background:#162235 !important; box-shadow:inset 0 0 0 1px rgba(148,163,184,.18) !important; } body:not(.light-surface) .cm-home-live-title{ color:#f8fafc !important; } body:not(.light-surface) .cm-home-live-meta{ color:#94a3b8 !important; } body:not(.light-surface) .cm-home-live-action{ color:#60a5fa !important; } body:not(.light-surface) .cm-home-live-empty, body:not(.light-surface) .cm-home-live-loading{ color:#94a3b8 !important; } /* Vilagos modban modern, tiszta */ body.light-surface .cm-home-live-results{ background:#ffffff !important; border:1px solid rgba(15,23,42,.10) !important; box-shadow:0 22px 48px rgba(15,23,42,.18) !important; } } /* cm-hero-live-search-fix-css */ @media (min-width:1400px){ /* A dropdown szuloi NE vagjak el */ .cm-home-redesign, .cm-home-redesign__container, .cm-home-redesign__main, .cm-hero, .cm-hero__left, .cm-hero__copy, .cm-hero__search{ overflow:visible !important; } /* Dropdown maradjon a hero felett, ne legyen levagva, kepes a teljes 5 talalatot mutatni */ .cm-home-live-results{ z-index:200 !important; max-height:none !important; overflow:visible !important; } .cm-home-live-results .cm-home-live-item{ overflow:hidden !important; } } /* cm-promo-bar-discord-btn-css */ @media (min-width:1400px){ header.top-head .promo-bar{ align-items:center !important; gap:12px !important; padding:6px 18px !important; font-size:13.5px !important; line-height:1.2 !important; } header.top-head .promo-bar__btn{ display:inline-flex !important; align-items:center !important; padding:3px 12px !important; height:22px !important; min-height:22px !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.2px !important; line-height:1 !important; border-radius:999px !important; background:#ffffff !important; color:#1d2c63 !important; -webkit-text-fill-color:#1d2c63 !important; border:0 !important; box-shadow:0 2px 8px rgba(0,0,0,.18) !important; } header.top-head .promo-bar__btn:hover{ background:#eef2ff !important; color:#1d2c63 !important; } header.top-head .promo-bar__btn::before{ content:none !important; } } /* cm-hero-remove-white-filter-css */ body.home .cm-home-hero__media{ opacity:.95!important; filter:none!important; mix-blend-mode:normal!important; } body.home .cm-home-hero__media--left{ mask-image:linear-gradient(90deg,#000 0%,#000 45%,rgba(0,0,0,.75) 58%,rgba(0,0,0,.38) 74%,rgba(0,0,0,.12) 88%,transparent 100%)!important; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 45%,rgba(0,0,0,.75) 58%,rgba(0,0,0,.38) 74%,rgba(0,0,0,.12) 88%,transparent 100%)!important; } body.home .cm-home-hero__media--right{ mask-image:linear-gradient(270deg,#000 0%,#000 45%,rgba(0,0,0,.75) 58%,rgba(0,0,0,.38) 74%,rgba(0,0,0,.12) 88%,transparent 100%)!important; -webkit-mask-image:linear-gradient(270deg,#000 0%,#000 45%,rgba(0,0,0,.75) 58%,rgba(0,0,0,.38) 74%,rgba(0,0,0,.12) 88%,transparent 100%)!important; } body.home .cm-home-hero__media::before, body.home .cm-home-hero__media::after, body.home .cm-home-hero::before, body.home .cm-home-hero::after{ display:none!important; content:none!important; background:none!important; opacity:0!important; filter:none!important; } /* cm-mobile-home-fix-css */ @media(max-width:1399px){ body.home .cm-home-hero{ min-height:auto!important; overflow:hidden!important; background:#eef5ff!important; } body.home .cm-home-hero__media{ width:100%!important; opacity:.22!important; filter:none!important; mask-image:none!important; -webkit-mask-image:none!important; } body.home .cm-home-hero__inner{ padding:34px 18px 28px!important; min-height:auto!important; } body.home .cm-home-hero__title{ max-width:100%!important; font-size:34px!important; line-height:1.08!important; margin:0 auto 16px!important; text-align:center!important; } body.home .cm-home-hero__lead{ max-width:92%!important; font-size:16px!important; line-height:1.45!important; margin:0 auto 22px!important; text-align:center!important; } body.home .cm-home-search-row{ display:flex!important; flex-direction:column!important; gap:14px!important; width:100%!important; max-width:100%!important; margin:0 auto!important; } body.home .cm-home-search-row .cm-home-search, body.home .cm-home-search{ width:100%!important; max-width:100%!important; height:58px!important; min-height:58px!important; aspect-ratio:auto!important; border-radius:18px!important; padding:5px!important; margin:0!important; display:flex!important; align-items:center!important; box-sizing:border-box!important; } body.home .cm-home-search input[type="search"], body.home .cm-home-search input[type="text"]{ height:48px!important; min-height:48px!important; font-size:16px!important; line-height:48px!important; padding:0 58px 0 16px!important; } body.home .cm-home-search button{ width:48px!important; height:48px!important; min-width:48px!important; border-radius:15px!important; } body.home .cm-home-browse-btn{ width:100%!important; height:52px!important; border-radius:12px!important; font-size:16px!important; padding:0 18px!important; } body.home .cm-home-stats__inner{ grid-template-columns:repeat(2,1fr)!important; padding:22px 18px!important; gap:22px 10px!important; } body.home .cm-home-stat{ justify-content:center!important; grid-template-columns:52px auto!important; column-gap:12px!important; } body.home .cm-home-stat__icon{ width:52px!important; height:52px!important; } body.home .cm-home-stat strong{ font-size:28px!important; } body.home .cm-home-stat span:last-child{ font-size:15px!important; } body.home .crashmod-home-games-head{ padding:24px 18px 12px!important; } body.home .mpp-games-title{ font-size:34px!important; line-height:1.05!important; } } /* cm-mobile-search-fix-css */ @media(max-width:1399px){ body.home .cm-home-search-row{ width:calc(100% - 32px)!important; max-width:420px!important; margin:0 auto!important; gap:12px!important; } body.home form.cm-home-search, body.home .cm-home-search-row form.cm-home-search{ width:100%!important; max-width:100%!important; height:56px!important; min-height:56px!important; max-height:56px!important; aspect-ratio:auto!important; padding:0 6px 0 18px!important; margin:0!important; border-radius:999px!important; background:#fff!important; display:flex!important; align-items:center!important; overflow:hidden!important; box-sizing:border-box!important; } body.home form.cm-home-search input, body.home form.cm-home-search input[type="search"], body.home form.cm-home-search input[type="text"]{ flex:1 1 auto!important; width:auto!important; height:56px!important; min-height:0!important; padding:0 10px!important; margin:0!important; border:0!important; background:transparent!important; font-size:15px!important; line-height:56px!important; } body.home form.cm-home-search button, body.home form.cm-home-search .search-submit{ flex:0 0 46px!important; width:46px!important; height:46px!important; min-width:46px!important; min-height:46px!important; margin:0!important; padding:0!important; border-radius:999px!important; } body.home .cm-home-browse-btn{ width:calc(100% - 32px)!important; max-width:420px!important; height:52px!important; margin:0 auto!important; border-radius:12px!important; } } /* cm-desktop-guest-register-css */ @media (min-width:1400px){ /* RESERVE SPACE — vendegnek mindig ugyanannyi szelesseg, akar van Reg gomb akar nincs */ html body:not(.logged-in) header.top-head .account-actions{ align-items:center!important; gap:10px!important; min-width:430px!important; justify-content:flex-end!important; } html body:not(.logged-in) header.top-head .account-actions .account-actions__link[data-mpp-open-login], html body:not(.logged-in) header.top-head .account-actions .cm-register-link{ display:inline-flex!important;align-items:center!important;gap:8px!important; height:46px!important;padding:0 22px!important;border-radius:999px!important; font-weight:800!important;font-size:14.5px!important;line-height:1!important; white-space:nowrap!important;text-decoration:none!important; transition:transform .15s ease,box-shadow .15s ease,filter .15s ease!important; } html body:not(.logged-in) header.top-head .account-actions .account-actions__link[data-mpp-open-login]{ background:#fff!important;color:#1f3a8a!important; border:1px solid rgba(15,23,42,.16)!important; box-shadow:0 6px 16px rgba(15,23,42,.06)!important; } html body:not(.logged-in) header.top-head .account-actions .account-actions__link[data-mpp-open-login] svg{stroke:#1f3a8a!important;} html body:not(.logged-in) header.top-head .account-actions .account-actions__link[data-mpp-open-login]:hover{ box-shadow:0 10px 22px rgba(15,23,42,.10)!important;transform:translateY(-1px)!important; } html body:not(.logged-in) header.top-head .account-actions .cm-register-link{ background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%)!important;color:#fff!important; border:1px solid #2563eb!important;box-shadow:0 10px 22px rgba(37,99,235,.32)!important; } html body:not(.logged-in) header.top-head .account-actions .cm-register-link svg{stroke:#fff!important;} html body:not(.logged-in) header.top-head .account-actions .cm-register-link:hover{filter:brightness(1.06)!important;transform:translateY(-1px)!important;} html body header.top-head #mppLangSwitcher, html body header.top-head #modeToggle{ height:46px!important;min-height:46px!important;border-radius:999px!important; border:1px solid rgba(15,23,42,.12)!important; box-shadow:0 6px 16px rgba(15,23,42,.06)!important; background:#fff!important;outline:none!important; transition:filter .15s ease,transform .15s ease!important; } html body header.top-head #mppLangSwitcher{padding:0 14px!important;} html body header.top-head #modeToggle{width:46px!important;min-width:46px!important;} html body header.top-head #mppLangSwitcher:hover, html body header.top-head #modeToggle:hover{transform:translateY(-1px)!important;box-shadow:0 10px 22px rgba(15,23,42,.10)!important;} html body header.top-head #mppLangToggle, html body header.top-head #mppLangToggle:hover, html body header.top-head #mppLangToggle:focus, html body header.top-head #mppLangToggle:focus-visible, html body header.top-head #mppLangToggle:active{ background:transparent!important;border:0!important;box-shadow:none!important;outline:none!important; } } /* cm-desktop-header-distribute-css */ @media (min-width:1400px){ html body header.top-head .container.top-row{ column-gap:30px!important; } /* Even distribution of primary menu items across middle column */ html body header.top-head #siteNav.main-nav{ width:100%!important; justify-content:stretch!important; } html body header.top-head #siteNav.main-nav .menu{ width:100%!important; display:flex!important; justify-content:space-between!important; align-items:center!important; flex-wrap:nowrap!important; gap:14px!important; } /* Right-side action buttons: balanced spacing */ html body header.top-head .account-actions{ gap:10px!important; } /* Language pill: kill the inner blue focus / hover ring */ html body header.top-head #mppLangSwitcher, html body header.top-head #mppLangSwitcher:hover, html body header.top-head #mppLangSwitcher:focus, html body header.top-head #mppLangSwitcher:focus-within, html body header.top-head #mppLangSwitcher:focus-visible, html body header.top-head #mppLangToggle, html body header.top-head #mppLangToggle:hover, html body header.top-head #mppLangToggle:focus, html body header.top-head #mppLangToggle:focus-visible, html body header.top-head #mppLangToggle:active{ outline:none!important; box-shadow:0 8px 22px rgba(15,23,42,.06)!important; border-color:rgba(15,23,42,.10)!important; } html body header.top-head #mppLangSwitcher:hover{ background:#f4f7fc!important; } } /* cm-profile-button-bigger-css */ @media (min-width:1400px){ /* Keep the OUTER button size the same (min 172px); just let the avatar + name fill it more (tighter padding/gap so the bigger content fits the 52px pill). */ html body header.top-head #mppUserMenuTrigger, html body header.top-head .mpp-user-panel__trigger, html body header.top-head [aria-controls="mppUserDropdown"]{ min-width:172px!important; max-width:230px!important; padding:0 13px!important; gap:9px!important; } /* The avatar IMG carries .mpp-user-panel__a (NOT a .mpp-user-panel__avatar wrapper), so target that directly — the old .mpp-user-panel__avatar rules never matched, which is why the avatar stayed small (30px). */ html body header.top-head .mpp-user-panel__trigger .mpp-user-panel__a, html body header.top-head .mpp-user-panel__trigger img.avatar, html body header.top-head .mpp-user-panel__avatar, html body header.top-head .mpp-user-panel__avatar-img, html body header.top-head .mpp-user-panel__avatar .avatar{ width:40px!important; height:40px!important; min-width:40px!important; min-height:40px!important; border-radius:50%!important; } html body header.top-head .mpp-user-panel__name{ font-size:18px!important; font-weight:800!important; line-height:1.1!important; max-width:14ch!important; } html body header.top-head .mpp-user-panel__chev{ font-size:11px!important; opacity:.8!important; } } /* cm-dark-profile-light-cart-red-badge-css */ /* --- 1) Sötét módban is világos profil gomb (desktop) --- */ @media (min-width:1400px){ html body:not(.light-surface) header.top-head #mppUserMenuTrigger, html body:not(.light-surface) header.top-head .mpp-user-panel__trigger, html body:not(.light-surface) header.top-head [aria-controls="mppUserDropdown"]{ background:linear-gradient(180deg,#f8fbff 0%,#eef3fb 100%)!important; color:#0f172a!important; border:1px solid rgba(59,130,246,.45)!important; box-shadow:0 8px 22px rgba(2,6,23,.22)!important; } html body:not(.light-surface) header.top-head .mpp-user-panel__name, html body:not(.light-surface) header.top-head .mpp-user-panel__chev{ color:#0f172a!important; -webkit-text-fill-color:#0f172a!important; } } /* --- 2) Kosár badge mindig piros, ne essen szét szöveggé --- */ html body header.top-head .mpp-header-cart-btn{ position:relative!important; overflow:visible!important; } html body header.top-head .mpp-header-cart__badge{ position:absolute!important; /* Match the message / bell badge (.mpp-msg-icon-badge) exactly: same offset, size, font and ring, and NO drop shadow so all three look identical. */ top:-5px!important; right:-5px!important; min-width:18px!important; height:18px!important; padding:0 5px!important; border-radius:999px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; line-height:1!important; font-size:0.65rem!important; font-weight:700!important; background:#ef4444!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; box-shadow:none!important; border:2px solid var(--bg-card)!important; transform:none!important; z-index:9999!important; } html body header.top-head .mpp-header-cart__badge[hidden]{ display:none!important; } /* cm-cart-panel-unified-all-pages-css */ @media (min-width:1400px){ html body header.top-head .mpp-header-cart-panel:not([hidden]), html body:not(.light-surface) header.top-head .mpp-header-cart-panel:not([hidden]){ display:flex!important; flex-direction:column!important; position:absolute!important; top:calc(100% + 8px)!important; right:0!important; left:auto!important; width:min(258px, calc(100vw - 24px))!important; /* +10% */ max-height:min(68vh, 370px)!important; /* +10% */ overflow:hidden!important; border-radius:9px!important; border:1px solid #d4deee!important; background:#ffffff!important; color:#1f2937!important; box-shadow:0 13px 34px rgba(15,23,42,.20)!important; z-index:1000000!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; transform:none!important; } html body header.top-head .mpp-header-cart-panel__scroll{ padding:9px 11px 8px!important; overflow:auto!important; } html body header.top-head .mpp-header-cart-panel ul.woocommerce-mini-cart.cart_list{ list-style:none!important; margin:0!important; padding:0!important; } html body header.top-head .mpp-header-cart-panel ul.woocommerce-mini-cart.cart_list li{ display:grid!important; grid-template-columns:39px minmax(0,1fr)!important; gap:7px!important; align-items:start!important; padding:7px 0!important; border-bottom:1px solid #e5eaf3!important; position:relative!important; } html body header.top-head .mpp-header-cart-panel ul.woocommerce-mini-cart.cart_list li:last-child{ border-bottom:0!important; } html body header.top-head .mpp-header-cart-panel ul.cart_list li img{ width:39px!important; height:39px!important; object-fit:cover!important; border-radius:7px!important; border:1px solid #dbe4f3!important; background:#f8fbff!important; margin:0!important; } html body header.top-head .mpp-header-cart-panel ul.cart_list li > a:not(.remove){ color:#1f2937!important; font-size:21px!important; /* +10% */ font-weight:800!important; line-height:1.25!important; text-decoration:none!important; display:block!important; padding-right:20px!important; position:relative!important; z-index:1!important; } html body header.top-head .mpp-header-cart-panel ul.cart_list li .quantity{ color:#374151!important; font-size:11px!important; font-weight:700!important; margin-top:4px!important; display:inline-flex!important; gap:4px!important; } html body header.top-head .mpp-header-cart-panel ul.cart_list li .quantity .amount{ color:#1f2937!important; font-weight:800!important; } html body header.top-head .mpp-header-cart-panel ul.cart_list li a.remove{ position:absolute!important; top:7px!important; right:0!important; width:18px!important; height:18px!important; border-radius:999px!important; border:1px solid rgba(239,68,68,.35)!important; background:rgba(239,68,68,.12)!important; color:#ef4444!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; font-size:11px!important; font-weight:900!important; line-height:1!important; text-decoration:none!important; z-index:40!important; pointer-events:auto!important; cursor:pointer!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__total, html body header.top-head .mpp-header-cart-panel p.woocommerce-mini-cart__total{ display:flex!important; align-items:baseline!important; justify-content:space-between!important; margin:8px 0 0!important; padding-top:8px!important; border-top:1px solid #e5eaf3!important; color:#1f2937!important; font-size:12px!important; font-weight:800!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__total strong{ color:#374151!important; font-weight:800!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__total .amount{ color:#3b82f6!important; font-size:22px!important; font-weight:900!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__buttons{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:7px!important; margin-top:8px!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__buttons a, html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__buttons .button{ min-height:28px!important; border-radius:7px!important; font-size:11px!important; font-weight:800!important; text-decoration:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__buttons .wc-forward:not(.checkout){ background:#e5eaf1!important; border:1px solid #cfd8e6!important; color:#1f2937!important; box-shadow:none!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-mini-cart__buttons .checkout{ background:linear-gradient(135deg,#22c55e,#16a34a)!important; border:1px solid rgba(22,163,74,.45)!important; color:#ffffff!important; box-shadow:0 5px 12px rgba(22,163,74,.24)!important; } html body header.top-head .mpp-header-cart-panel .woocommerce-notices-wrapper, html body header.top-head .mpp-header-cart-panel .woocommerce-message, html body header.top-head .mpp-header-cart-panel .woocommerce-info{ display:none!important; } } /* cart badge: always visible + red, even when count is 0 */ html body header.top-head .mpp-header-cart-wrap .mpp-header-cart__badge, html body header.top-head .mpp-header-cart-wrap [data-mpp-cart-count]{ position:absolute!important; /* Identical to the message / bell badge (.mpp-msg-icon-badge): same offset, size, weight and ring, and NO drop shadow so all three header badges look the same. */ top:-7px!important; right:-5px!important; min-width:19px!important; height:19px!important; padding:0 5px!important; border-radius:999px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; background:#ef4444!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; font-size:11px!important; font-weight:700!important; line-height:1!important; border:2px solid var(--bg-card)!important; box-shadow:none!important; z-index:9999!important; } /* override [hidden] so 0 is shown too */ html body header.top-head .mpp-header-cart-wrap .mpp-header-cart__badge[hidden], html body header.top-head .mpp-header-cart-wrap [data-mpp-cart-count][hidden]{ display:inline-flex!important; } /* cm-woo-add-to-cart-notice-polish-css */ /* Keep same row position, only visual polish */ .woocommerce-notices-wrapper{ margin:10px 0 14px!important; } .woocommerce-notices-wrapper .woocommerce-message{ display:flex!important; align-items:center!important; gap:10px!important; padding:10px 12px!important; border-radius:12px!important; border:1px solid #dbe6f5!important; background:#ffffff!important; color:#1f2937!important; box-shadow:0 8px 20px rgba(15,23,42,.08)!important; line-height:1.35!important; } .woocommerce-notices-wrapper .woocommerce-message::before{ content:"\2713"!important; font-family:inherit!important; font-weight:900!important; font-size:13px!important; color:#16a34a!important; width:22px!important; height:22px!important; border-radius:999px!important; background:rgba(34,197,94,.15)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; position:static!important; margin:0 2px 0 0!important; float:none!important; } /* "View cart" button: right side, same row */ .woocommerce-notices-wrapper .woocommerce-message .button, .woocommerce-notices-wrapper .woocommerce-message .wc-forward{ order:2!important; margin-left:auto!important; float:none!important; min-height:28px!important; padding:0 10px!important; border-radius:8px!important; border:1px solid #cfe0f8!important; background:#ecf5ff!important; color:#1f3b61!important; font-size:12px!important; font-weight:800!important; text-decoration:none!important; display:inline-flex!important; align-items:center!important; } /* message text/link */ .woocommerce-notices-wrapper .woocommerce-message a:not(.button):not(.wc-forward){ color:#1f2937!important; text-decoration:none!important; font-weight:700!important; } /* Dark mode compatibility */ body:not(.light-surface) .woocommerce-notices-wrapper .woocommerce-message{ background:#111a27!important; border-color:#2b3d57!important; color:#e6eefb!important; box-shadow:0 10px 24px rgba(0,0,0,.35)!important; } body:not(.light-surface) .woocommerce-notices-wrapper .woocommerce-message .button, body:not(.light-surface) .woocommerce-notices-wrapper .woocommerce-message .wc-forward{ background:#1b2a3d!important; border-color:#35507a!important; color:#e8f1ff!important; } body:not(.light-surface) .woocommerce-notices-wrapper .woocommerce-message a:not(.button):not(.wc-forward){ color:#e6eefb!important; }