/*  id="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}
/*  id="cm-netbg-hatter" */
@layer cm-netbg{html body.cm-netbg-be.cm-netbg-be{background:radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--cmn-bg) 55%, transparent) 0%, transparent 70%) center top / 100% 100vh repeat-y,url("https://crashmods.com/wp-content/uploads/cm-netbg/netbg-vilagos-b1c249d1-tukor.webp?v=1791667428&t=1") center top / max(100%, 160vh) 200vh repeat-y var(--cmn-bg) !important}html body.cm-netbg-be.cm-netbg-be:not(.light-surface){background:radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--cmn-bg) 55%, transparent) 0%, transparent 70%) center top / 100% 100vh repeat-y,url("https://crashmods.com/wp-content/uploads/cm-netbg/netbg-sotet-5e85b7b6-tukor.webp?v=1791667428&t=1") center top / max(100%, 160vh) 200vh repeat-y var(--cmn-bg) !important}}
/*  id="cm-search-focus-css" */

/* Remove the harsh accent outline rectangle on search inputs. */
input[type="search"]:focus,
input[type="search"]:focus-visible,
.cm-hero__search-input:focus,
.cm-hero__search-input:focus-visible,
.cm-modsearch__input:focus,
.cm-modsearch__input:focus-visible,
.mpp-gfc input[name="keyword"]:focus,
.mpp-gfc input[name="keyword"]:focus-visible{outline:none !important;box-shadow:none !important;}
/* Show focus softly on the wrapping field instead (home hero search). */
.cm-hero__search:focus-within{box-shadow:0 0 0 4px rgba(59,130,246,.18) !important;border-color:#3b82f6 !important;}

/*  id="wp-custom-css" */

/* ========== CrashMods – További CSS (teljes) ========== */

/* Fejléc logó */
.top-head .logo {
  flex: 0 1 auto !important;
  max-width: 15vw;
  text-align: left;
  margin-left: -2px;
}

.top-head .logo .custom-logo-link {
  display: inline-flex !important;
  align-items: center;
  line-height: 0;
  max-width: min(240px, 100%) !important;
}

.top-head .logo .custom-logo-link img,
.top-head .logo .custom-logo-link svg {
  display: block !important;
  max-height: 64px !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Közepes asztal */
@media (min-width: 901px) and (max-width: 1509px) {
  .top-head .logo .custom-logo-link {
    max-width: min(380px, 100%) !important;
  }
  .top-head .logo .custom-logo-link img,
  .top-head .logo .custom-logo-link svg {
    max-height: 80px !important;
  }
}

/* Nagyon széles képernyő */
@media (min-width: 1510px) {
  .top-head .logo .custom-logo-link {
    max-width: min(540px, 100%) !important;
  }
  .top-head .logo .custom-logo-link img,
  .top-head .logo .custom-logo-link svg {
    max-height: 100px !important;
  }
}

/* Mobil / keskeny */
@media (max-width: 900px) {
  .top-head .container.top-row {
    padding-top: max(10px, env(safe-area-inset-top, 0px));
  }

  .top-head .logo {
    margin-top: -21px;
    align-self: flex-start;
  }

  .top-head .logo .custom-logo-link {
    max-width: min(92vw, 100%) !important;
  }

  .top-head .logo .custom-logo-link img,
  .top-head .logo .custom-logo-link svg {
    max-height: 112px !important;
  }
}

/* Alap szövegméret */
body.mpp-portal {
  font-size: 16px;
}

@media (max-width: 900px) {
  .top-head .logo {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 900px) {
  .top-head .logo {
    margin-bottom: -9px;
  }
}

/*  id="cm-popup-elmosas-ki" */

/* teljes képernyős popup-hátterek: nincs backdrop-filter (a login/regisztráció modal sötét változata 10px-es, !important-os elmosást kapott → erősebb szelektor) */
html body:not(.cm-x) .mpp-modal .mpp-modal__backdrop.mpp-modal__backdrop,
html body:not(.cm-x) #mppLoginModal .mpp-modal__backdrop.mpp-modal__backdrop,
html body:not(.cm-x) #cmOauth2faModal .mpp-modal__backdrop.mpp-modal__backdrop,
html body:not(.cm-x) #mppTwofaModal .mpp-modal__backdrop.mpp-modal__backdrop,
html body .mpp-modal__backdrop,
html body .mpp-report-modal__backdrop,
html body .mpp-external-modal__backdrop,
html body .mpp-game-filter-sheet__backdrop,
html body .cm-mem-modal__backdrop,
html body .cm-tip-modal__backdrop,
html body .cm-pricing-backdrop,
html body .cm-qp-backdrop,
html body .cm2fa-overlay,
html body #cm-dl-warn,
html body #cm-rgn .cm-rgn__bg,
html body .cm-advf__bg,
html body [class*="__backdrop"],
html body [class*="-backdrop"] {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* elmosás helyett kicsit tömörebb sötétítés, hogy az ablak ugyanúgy kiemelkedjen */
html body:not(.cm-x) .mpp-modal .mpp-modal__backdrop.mpp-modal__backdrop,
html body:not(.cm-x) #mppLoginModal .mpp-modal__backdrop.mpp-modal__backdrop,
html body .mpp-modal__backdrop,
html body .mpp-report-modal__backdrop,
html body .mpp-external-modal__backdrop,
html body .cm-mem-modal__backdrop,
html body .cm-tip-modal__backdrop,
html body .cm-pricing-backdrop,
html body .cm-qp-backdrop,
html body .cm2fa-overlay,
html body #cm-dl-warn,
html body #cm-rgn .cm-rgn__bg,
html body .cm-advf__bg {
  background: rgba(8, 12, 22, .72) !important;
  background-color: rgba(8, 12, 22, .72) !important;
}

/*  id="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:1800px!important;
    height:86px!important;
    min-height:86px!important;
    margin:0 auto!important;
    padding:0 34px!important;
    display:grid!important;
    grid-template-columns:200px 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:200px!important;
    max-width:200px!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:132px!important;
    height:50px!important;
    padding:0 20px!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 <span> that carries its own dark -webkit-text-fill-color (#111827), which
     overrode the <a>'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;
  }
  /* CTA pill kivetel: a "Mod bekuldese" feher-on-kek pill — SOHA ne kapja meg az
     aktiv/hover/aria-current kek szoveget (a label/ikon descendant * is!). #siteNav
     miatt magas specificitas + transition:none, hogy kattintaskori ujraszamitaskor
     se usson at a #1d4ed8 a -webkit-text-fill-color-on (ez volt a "kattintasra eltunik
     a feher szoveg" hiba valodi oka). */
  html body header.top-head #siteNav a.menu-cta,
  html body header.top-head #siteNav a.menu-cta *,
  html body header.top-head .main-nav .menu > li > a.menu-cta,
  html body header.top-head .main-nav .menu > li > a.menu-cta *,
  html body header.top-head .main-nav ul > li > a.menu-cta,
  html body header.top-head .main-nav ul > li > a.menu-cta *{
    color:#fff!important;
    -webkit-text-fill-color:#fff!important;
    transition:none!important;
  }

  /* ── Bubble pills on the top-nav items (owner request, 2026-07-05) — same #siteNav
     specificity as the master rules above and LATER in the file, so they win the ties.
     The Submit-Mod CTA keeps its solid blue look; the active item swaps the old
     underline for a tinted pill. Light header; the dark variant lives in 003.
     The pills add width, so the menu gap/padding/font STEP DOWN with viewport width —
     everything must fit next to the account icons even at 1920×1080 (no overlap). ── */
  @media (min-width:1400px){
    html body header.top-head #siteNav.main-nav .menu{ gap:8px!important; }
    html body header.top-head #siteNav.main-nav .menu > li > a:not(.menu-cta){
      background:#ffffff!important;
      box-shadow:inset 0 0 0 1px rgba(15,23,42,.10), 0 8px 22px rgba(15,23,42,.06)!important;
      border-radius:999px!important;
      padding:0 12px!important;
      font-size:14px!important;
    }
    html body header.top-head #siteNav.main-nav .menu > li > a:not(.menu-cta):hover{
      background:#f3f7ff!important;
      box-shadow:inset 0 0 0 1px rgba(47,125,246,.40), 0 8px 22px rgba(15,23,42,.06)!important;
    }
    html body header.top-head #siteNav.main-nav .menu > li.current-menu-item > a:not(.menu-cta),
    html body header.top-head #siteNav.main-nav .menu > li.current_page_item > a:not(.menu-cta),
    html body header.top-head #siteNav.main-nav .menu > li > a[aria-current="page"]:not(.menu-cta){
      background:#eef4ff!important;
      box-shadow:inset 0 0 0 1.5px rgba(47,125,246,.50), 0 8px 22px rgba(15,23,42,.06)!important;
    }
  }
  @media (min-width:1400px) and (max-width:1980px){
    html body header.top-head #siteNav.main-nav .menu{ gap:7px!important; }
    html body header.top-head #siteNav.main-nav .menu > li > a:not(.menu-cta){
      font-size:13.5px!important;
      padding:0 11px!important;
    }
    html body header.top-head #siteNav.main-nav .menu > li > a.menu-cta{
      min-width:126px!important;
      padding:0 18px!important;
    }
  }
  @media (min-width:1400px) and (max-width:1640px){
    html body header.top-head .container.top-row{
      padding:0 18px!important;
      grid-template-columns:170px minmax(0,1fr) auto!important;
      column-gap:14px!important;
    }
    html body header.top-head .logo,
    html body header.top-head .logo img,
    html body header.top-head img.custom-logo{
      width:170px!important;
      max-width:170px!important;
    }
    html body header.top-head #siteNav.main-nav .menu{ gap:4px!important; }
    html body header.top-head #siteNav.main-nav .menu > li > a:not(.menu-cta){
      font-size:12.4px!important;
      padding:0 9px!important;
    }
    /* reclaim width: drop the little per-item icons, keep them on the CTA */
    html body header.top-head #siteNav.main-nav .menu > li > a:not(.menu-cta) svg,
    html body header.top-head #siteNav.main-nav .menu > li > a:not(.menu-cta) img{
      display:none!important;
    }
    html body header.top-head #siteNav.main-nav .menu > li > a.menu-cta{
      min-width:0!important;
      padding:0 14px!important;
    }
  }