/*  id="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:nowrap;align-items:center;gap:8px;min-height:25px}
/* 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). */
/* File size on the LEFT, verified pill (full size) pinned to the FAR RIGHT of the block via
   margin-left:auto (main.css forces margin:0 0 0 8px !important, so we must !important it back);
   14px column-gap guarantees they never touch; wraps only if the column is somehow too narrow. */
.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 14px;width:100%;min-width:0;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 !important;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), 34%)) minmax(0,1fr) 300px;
  }
  /* 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}
}
/* Consistent right-column width regardless of the JS-injected "Verified — safe" pill.
   main.css set the game-wide grid's 3rd column to `auto` → it sized to content: ~205px
   WITHOUT the pill vs ~304px WITH it, so no-pill cards looked compressed/"inward". Pin it. */
@media (min-width:1500px){
  /* NOT on .mod-list--author-cards (the profile's multi-column grid of ~305px cells) —
     there a fixed 320px right column would crush the thumb+middle columns to 0. */
  .mod-list--game-wide:not(.mod-list--author-cards) .mod-card-row--v2.mod-card-row--modland{
    grid-template-columns: minmax(0, min(calc(323px * 1.14 * 1.15 * 1.1), calc(37.4vw * 1.14 * 1.15 * 1.1), 34%)) minmax(0, 1fr) 300px !important;
  }
}

/*  id="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}
/* Game archive (.mod-list--game-wide) has a narrower content column -> 12 pills wrapped to 3 rows and grew the card. Compact them so all fit in ~2 rows like /mods/. */
.mod-list--game-wide .mod-card-row__pills{gap:6px;max-height:50px;overflow:hidden}
.mod-list--game-wide .mod-card-row__pill{padding:3px 8px;font-size:.72rem;gap:4px;white-space:nowrap}
.mod-list--game-wide .mod-card-row__pill-ico svg{width:10px;height:10px}
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}
.cm-fp-add{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.cm-fp-add__input{flex:0 1 260px;min-width:180px;padding:7px 12px;border-radius:999px;border:1px solid rgba(120,140,170,.4);background:transparent;color:inherit;font-size:.85rem}
.cm-fp-add__input.is-bad{border-color:#dc2626}
/* A beirt szoveg mar letezo pillt kapcsolt be -> rovid felvillanas, hogy a szem odataláljon. */
@keyframes cm-fp-villan{0%{box-shadow:0 0 0 0 rgba(37,99,235,.55)}100%{box-shadow:0 0 0 9px rgba(37,99,235,0)}}
.cm-fp-chip.cm-fp-villan{animation:cm-fp-villan .9s ease-out}
@media (prefers-reduced-motion:reduce){ .cm-fp-chip.cm-fp-villan{animation:none;outline:2px solid #2563eb;outline-offset:2px} }
.cm-fp-add__err{color:#dc2626;font-size:.78rem;font-weight:600}
/* Egyedi pill: kis x jelzi, hogy kattintasra torolheto. */
.cm-fp-chip[data-custom]::after{content:"\00d7";margin-left:7px;font-weight:900;opacity:.75}
.cm-fp-chip[data-custom]:hover::after{opacity:1}
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}

/*  id="cm-kartya-kivonat-2sor" */

@media (min-width:1024px){
  .mod-list--game-wide:not(.mod-list--author-cards) .mod-card-row--modland .mod-card-row__excerpt{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/*  id="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;
  }
}

/*  id="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;
}

/*  id="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;
  }
}

/*  id="cm-mobile-profile-kartyak" */

@media (max-width:1399px){
  html body header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__nav{gap:6px!important;padding:0!important}
  html body header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__item{background:#fff!important;border:1px solid rgba(15,23,42,.10)!important;border-radius:12px!important;min-height:48px!important;padding:9px 12px!important;gap:10px!important;margin:0!important;box-shadow:none!important}
  html body header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__nav > .mpp-user-dropdown__item + .mpp-user-dropdown__item{border-top:1px solid rgba(15,23,42,.10)!important}
  html body header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__ico{width:32px!important;height:32px!important;flex:0 0 32px!important;border-radius:9px!important;background:rgba(37,99,235,.08)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}
  html body header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__sep{margin:2px 4px!important}
  /* sotet mod: ne feher kartya legyen a sotet panelen */
  html body:not(.light-surface) header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__item{background:rgba(255,255,255,.04)!important;border-color:rgba(255,255,255,.10)!important}
  html body:not(.light-surface) header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__nav > .mpp-user-dropdown__item + .mpp-user-dropdown__item{border-top-color:rgba(255,255,255,.10)!important}
  html body:not(.light-surface) header.top-head #mppUserDropdown.cm-mobile-profile-open.cm-mobile-profile-open .mpp-user-dropdown__ico{background:rgba(255,255,255,.08)!important}
}