/*
Theme Name: MűsorInfo
Theme URI: https://musorinfo.vaskakas.hu
Author: MűsorInfo
Description: A MűsorInfo saját, plugin-független WordPress sablonja.
Version: 0.68.0
Text Domain: musorinfo
*/

:root {
  --mi-bg: #0f0f16;
  --mi-bg-elevated: #17161f;
  --mi-border: #29283a;
  --mi-text: #f2f1f7;
  --mi-text-muted: #a6a3b8;
  --mi-accent: #8b5cf6;
  --mi-accent-hover: #7c3aed;
  --mi-radius: 14px;
  --mi-font-display: 'Clash Grotesk', 'Segoe UI', Arial, sans-serif;
  --mi-font-body: 'Source Sans 3', 'Segoe UI', Roboto, Arial, sans-serif;
  --mi-fejlec-magassag: 70px;
}

* {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* "Sticky footer": rövid tartalmú oldalakon (pl. kevés feltöltött
   szolgáltatással a Szolgáltatásaim listánál) enélkül a lábléc rögtön a
   rövid tartalom után jött, a nézet alja pedig üresen maradt alatta - ez
   szűk, "levágott" érzetet keltett. Ezzel a lábléc mindig a nézet aljára
   kerül, a <main> pedig kitölti a fennmaradó helyet. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1 0 auto;
}

body {
  background: var(--mi-bg);
  color: var(--mi-text);
  font-family: var(--mi-font-body);
  line-height: 1.5;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4 {
  line-height: 1.25;
  font-family: var(--mi-font-body);
  font-weight: 700;
}

.mi-display {
  font-family: var(--mi-font-display);
  font-weight: 600;
}

.mi-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

/* Fejléc */
.mi-header {
  border-bottom: 1px solid var(--mi-border);
  background: var(--mi-bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.mi-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.mi-logo img {
  height: 32px;
}

.mi-nav__list {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mi-nav__list a {
  color: var(--mi-text-muted);
  font-size: 15px;
}

.mi-nav__list a:hover {
  color: var(--mi-text);
}

/* A "Marketplace" (kereső) oldalra mutató menüpont köré egy kézzel firkált
   hatású, szándékosan pontatlan karika kerül - a szín itt fixen az accent
   szín hex-értéke (nem CSS var), mert a data-URI SVG-n belül nem lehet
   CSS egyéni tulajdonságra hivatkozni. */
.menu-item-piac-firka > a {
  position: relative;
}

.menu-item-piac-firka > a::after {
  content: "";
  position: absolute;
  top: -14px;
  bottom: -12px;
  left: -18px;
  right: -18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 60'%3E%3Cpath d='M20,30 C14,10 40,2 80,4 C122,6 152,18 146,36 C140,54 108,58 70,55 C36,52 12,44 22,28' fill='none' stroke='%238b5cf6' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
  z-index: -1;
}

.mi-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.mi-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mi-btn:active {
  transform: scale(0.97);
}

.mi-btn--primary {
  background: var(--mi-accent);
  color: #ffffff;
}

.mi-btn--primary:hover {
  background: var(--mi-accent-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

/* A ".mi-ikon" alapból saját (accent-lila) színt kap, ez felülírja az
   öröklődő fehér gombszínt - emiatt volt láthatatlan a küldés-gomb ikonja
   (lila ikon lila gombháttéren). */
.mi-btn--primary .mi-ikon {
  color: #ffffff;
}

.mi-btn--gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.35);
}

.mi-btn--ghost {
  background: transparent;
  border-color: var(--mi-border);
  color: var(--mi-text);
}

.mi-btn--ghost:hover {
  background: transparent;
  border-color: var(--mi-accent);
  transform: translateY(-2px);
}

.mi-btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  background: #ffffff;
  color: #1f1f1f;
  border: 1px solid var(--mi-border);
}

.mi-btn--google:hover {
  background: #f2f2f2;
  transform: translateY(-2px);
}

.mi-btn--google.is-disabled {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}

/* ---------- Fiók törlése ---------- */
.mi-fiok-torles {
  max-width: 560px;
  margin: 64px auto 0;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.mi-fiok-torles__lenyithato {
  text-align: center;
}

.mi-fiok-torles__nyito {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--mi-text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mi-fiok-torles__nyito::-webkit-details-marker {
  display: none;
}

.mi-fiok-torles__nyito .mi-ikon {
  width: 16px;
  height: 16px;
}

.mi-fiok-torles__nyito .mi-ikon:last-child {
  transition: transform 0.2s ease;
}

.mi-fiok-torles__lenyithato[open] .mi-fiok-torles__nyito .mi-ikon:last-child {
  transform: rotate(180deg);
}

.mi-fiok-torles__nyito:hover {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
}

.mi-fiok-torles__tartalom {
  max-width: 420px;
  margin: 24px auto 0;
  text-align: left;
  animation: mi-fade-up 0.25s ease both;
}

.mi-fiok-torles__tartalom .mi-hint {
  text-align: center;
  margin-bottom: 20px;
}

.mi-fiok-torles__urlap {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mi-fiok-torles__muveletek {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.mi-btn--fioktorles {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
  font-weight: 700;
}

.mi-btn--fioktorles:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(220, 38, 38, 0.35);
}

.mi-vagy-elvalaszto {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--mi-text-muted);
  font-size: 13px;
}

/* Hero */
.mi-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 24px;
  text-align: center;
  background: radial-gradient(120% 140% at 15% 25%, #201a35 0%, var(--mi-bg) 55%);
}

.mi-hero__grid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  max-width: 1220px;
  margin: 0 auto;
}

.mi-hero__telefon {
  flex-shrink: 0;
}

@media (max-width: 1100px) {
  .mi-hero {
    padding-bottom: 300px;
  }

  .mi-hero__grid {
    flex-direction: column;
    position: static;
  }

  /* Mobilon/tableten a telefon-makett a hero legalján lóg ki, nagyítva -
     pont félig látszik, mintha az alatta lévő szekció már eltakarná. A
     mi-anim-fadeup osztály (a belépő animáció) a szülőn marad, mert az a
     "transform"-ot animálja - ha ide is statikus transformot tennénk, azt
     az animáció felülírná. Ezért a nagyítás/lecsúsztatás a belső
     .mi-phone-mockup elemre kerül, aminek nincs saját animációja. */
  .mi-hero__telefon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
  }

  .mi-hero__telefon .mi-phone-mockup {
    width: 340px;
    transform: translateY(50%);
  }
}

.mi-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
}

.mi-hero__grid .mi-hero__inner {
  min-width: 0;
  margin: 0 auto;
}

/* ---------- Lassan mozgó, kapcsolódó "háló" háttér-animáció ---------- */
/* Canvas + JS (initHaloCanvaszok a main.js-ben) rajzolja ki: több,
   véletlenszerűen elhelyezett és véletlenszerű méretű (mélységet imitáló)
   pont-csoportot, csoporton belüli összekötő vonalakkal, plusz csoportok
   közti halvány "híd" vonalakkal. Csak dísz: aria-hidden, és nem fogadja
   az egérkattintásokat (pointer-events: none). Több helyen is megjelenik
   a weboldalon (data-mi-halo attribútummal jelölve), a --hero módosító a
   hero jobb oldalán lévő, fix méretű változat, a --fill a szekciót
   teljesen kitöltő, halványabb háttér-változat. */
.mi-halo-canvas {
  pointer-events: none;
}

.mi-halo-canvas--hero {
  position: absolute;
  /* Fix pixeles top-eltolás transform helyett - Chrome-ban a
     backdrop-filter (a kereső/gyorskeresés-címkék "üveg" hatása) nem tudja
     helyesen elmosni egy transform: translate()-tel eltolt canvas hátteret,
     így a felette lévő üveg-elemek mögött élesen, elmosás nélkül látszódott
     volna át a háló animáció. Fix top-értékkel ugyanaz a vizuális pozíció,
     de transform nélkül - így az elmosás helyesen működik. */
  top: calc(50% - 340px);
  right: -6%;
  width: 680px;
  height: 680px;
  z-index: 1;
}

/* A hero mobilon/tableten egy oszlopba rendeződik, és a szöveg tölti ki a
   teljes szélességet - nincs hely a jobb oldali hálónak, ott csak a
   szöveg alatt/mögött zavaróan tördelődne, ezért ott marad kikapcsolva. */
@media (max-width: 1100px) {
  .mi-halo-canvas--hero {
    display: none;
  }
}

.mi-halo-canvas--fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.55;
  z-index: 0;
}

.mi-hero__kereso {
  position: relative;
  /* Explicit z-index kell, mert a szomszédos .mi-gyorskereses (belépő
     animációja miatt) saját "stacking context"-et kap, ami DOM-sorrend
     alapján a lenyíló találatlista fölé kerülne enélkül. */
  z-index: 5;
}

.mi-hero h1 {
  font-size: 48px;
  margin-bottom: 16px;
}

.mi-hero__cim {
  /* Fix magasság (a betűméret arányában), hogy a gépelős animáció alatt
     a mondatok eltérő hossza/sortörése ne mozgassa el a lenti tartalmat -
     enélkül az oldal "ugrált" gépeléskor. */
  line-height: 1.25;
  min-height: 2.5em;
  color: #ffffff;
}

.mi-hero__szlogen {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  background: rgba(139, 92, 246, 0.12);
  color: var(--mi-accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.mi-hero__dinamikus {
  color: #b794f6;
}

.mi-hero__kurzor {
  display: inline-block;
  width: 2px;
  height: 0.9em;
  margin-left: 2px;
  background: #b794f6;
  vertical-align: -0.1em;
  animation: mi-hero-kurzor-villog 0.9s steps(1) infinite;
}

@keyframes mi-hero-kurzor-villog {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-hero__kurzor {
    animation: none;
    opacity: 0;
  }
}

.mi-hero p {
  color: var(--mi-text-muted);
  font-size: 18px;
  margin-bottom: 32px;
}

.mi-search {
  display: flex;
  gap: 8px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  padding: 6px;
}

.mi-search input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--mi-text);
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
}

.mi-search button {
  background: var(--mi-accent);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  cursor: pointer;
}

.mi-search__szuro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  border-radius: 999px;
  color: var(--mi-text-muted);
  transition: background 0.2s ease, color 0.2s ease;
}

.mi-search__szuro:hover {
  background: var(--mi-bg);
  color: var(--mi-text);
}

.mi-search__szuro .mi-ikon {
  margin-right: 0;
  color: inherit;
}

/* A hero keresője "üveg" (glassmorphism) hatást kap, hogy jobban illeszkedjen
   a sötét, díszes hero háttérhez - ez csak a hero-beli keresőt érinti, a
   .mi-search osztály máshol egyelőre nincs használatban. */
.mi-hero__kereso .mi-search {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
}

.mi-hero__kereso .mi-search input {
  color: #ffffff;
}

.mi-hero__kereso .mi-search input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.mi-hero__kereso .mi-search__szuro {
  color: rgba(255, 255, 255, 0.7);
}

.mi-hero__kereso .mi-search__szuro:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.mi-hero__kereso .mi-search button {
  background: linear-gradient(135deg, var(--mi-accent), var(--mi-accent-hover));
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mi-hero__kereso .mi-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(139, 92, 246, 0.5);
}

.mi-hero__categories {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.mi-hero__categories a {
  padding: 8px 16px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  font-size: 14px;
  color: var(--mi-text-muted);
}

.mi-hero__categories a:hover {
  border-color: var(--mi-accent);
  color: var(--mi-text);
}

/* Szekció címek, kategória- és tartalomrácsok */
.mi-section-title {
  font-size: 24px;
  margin: 56px 0 20px;
}

.mi-category-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.mi-category-card {
  display: flex;
  align-items: flex-end;
  height: 160px;
  border-radius: var(--mi-radius);
  border: 1px solid var(--mi-border);
  background-color: var(--mi-bg-elevated);
  background-size: cover;
  background-position: center;
  padding: 16px;
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.2s ease;
}

.mi-category-card:hover {
  border-color: var(--mi-accent);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

/* A főoldali "Válassz kategóriát" szekció 3 csoport-kártyát mutat (Fellépők /
   Szolgáltatók / Esküvőszervezés) a korábbi, kategóriánkénti flat rács
   helyett - ld. musorinfo_get_kategoria_csoportok(), front-page.php. */
.mi-kategoria-csoport-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mi-kategoria-csoport-kartya {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  height: 220px;
  border-radius: var(--mi-radius);
  border: 1px solid var(--mi-border);
  background-color: var(--mi-bg-elevated);
  background-size: cover;
  background-position: center;
  padding: 20px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.2s ease;
}

.mi-kategoria-csoport-kartya:hover {
  border-color: var(--mi-accent);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
}

.mi-kategoria-csoport-kartya__cim {
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
}

.mi-kategoria-csoport-kartya__alcim {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

/* A "Fellépők" csoport a felhasználó kérésére halványabban és kisebb
   betűvel jelenik meg, mert maga is inkább egy gyűjtőfogalom. */
.mi-kategoria-csoport-kartya--halvany .mi-kategoria-csoport-kartya__cim {
  font-size: 17px;
  font-weight: 600;
  opacity: 0.8;
}

.mi-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mi-cards-grid--compact {
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.mi-cards-grid--compact .mi-service-card__body {
  padding: 12px;
}

.mi-cards-grid--compact .mi-service-card__body h3 {
  font-size: 15px;
  margin: 4px 0;
}

.mi-cards-grid--compact .mi-service-card__excerpt {
  display: none;
}

.mi-service-card {
  display: block;
  color: var(--mi-text);
}

.mi-service-card__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mi-bg);
}

/* ---------- "Jóváhagyott" jelvény ---------- */
.mi-jelveny {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(15, 15, 22, 0.55);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: help;
}

.mi-jelveny svg {
  width: 16px;
  height: 16px;
}

.mi-jelveny--inline {
  position: static;
  display: inline-flex;
  vertical-align: -5px;
  margin-right: 4px;
}

/* Kártyán belül a jóváhagyott jelvény és a "Népszerű" jelvény egy közös,
   bal felső sarokba pozicionált sorban jelenik meg, hogy ne fedjék egymást. */
.mi-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}

.mi-card-badges .mi-jelveny {
  position: static;
}

.mi-service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.mi-service-card:hover .mi-service-card__image img {
  transform: scale(1.07);
}

.mi-service-card__image--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--mi-bg-elevated), var(--mi-bg));
}

/* ---------- Kártyán belüli kép-galéria (borító + további képek) ---------- */
.mi-service-card__image .mi-card-galeria-kep {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.mi-service-card__image .mi-card-galeria-kep.is-aktiv {
  opacity: 1;
}

.mi-card-nyil {
  position: absolute;
  top: 62%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(15, 15, 22, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.mi-service-card:hover .mi-card-nyil,
.mi-card-nyil:focus-visible {
  opacity: 1;
}

.mi-card-nyil:hover {
  background: rgba(15, 15, 22, 0.85);
}

.mi-card-nyil--elozo {
  left: 8px;
}

.mi-card-nyil--kovetkezo {
  right: 8px;
}

/* A látható kör mérete maradjon 32px, de a tényleges érinthető/kattintható
   terület ennél jóval nagyobb legyen, hogy ne kelljen pontosan a nyílra
   kattintani/koppintani - a kép-konténer overflow:hidden-je amúgy is
   levágja, ha ez a kártya szélén túlnyúlna. */
.mi-card-nyil::before {
  content: "";
  position: absolute;
  inset: -16px;
}

/* ---------- Kedvenc (szív) gomb a kártyán ---------- */
.mi-szivecske {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 15, 22, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.mi-szivecske svg {
  width: 18px;
  height: 18px;
}

.mi-szivecske:hover {
  transform: scale(1.12);
}

.mi-szivecske.is-liked {
  background: rgba(220, 38, 38, 0.9);
}

.mi-szivecske.is-liked svg {
  fill: currentColor;
}

/* ---------- "Népszerű" jelvény és kártya-kiemelés ---------- */
.mi-nepszeru-jelveny {
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mi-service-card--nepszeru {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 12px 24px rgba(236, 72, 153, 0.15);
}

/* A fizetett kiemelés a marketplace-en a "Népszerű" jelvénynél is
   feltűnőbb, izzó keretet kap, hogy egyértelműen elkülönüljön. */
.mi-service-card--kiemelt {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.5), 0 0 32px rgba(139, 92, 246, 0.4), 0 18px 36px rgba(0, 0, 0, 0.35);
}

.mi-service-card--kiemelt .mi-nepszeru-jelveny {
  font-size: 12px;
  padding: 5px 12px;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.55);
}

.mi-service-card__body {
  padding: 16px;
}

.mi-service-card__category {
  display: inline-block;
  font-size: 12px;
  color: var(--mi-accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.mi-service-card__body h3 {
  margin: 0;
  font-size: 16px;
}

.mi-empty-state {
  color: var(--mi-text-muted);
  border: 1px dashed var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 32px;
  text-align: center;
}

/* Kiemelt szolgáltatók - hirdetési bannerhez hasonló, látványos doboz */
.mi-kiemelt-banner {
  position: relative;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(139, 92, 246, 0.35);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.18), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(236, 72, 153, 0.16), transparent 60%),
    var(--mi-bg-elevated);
  overflow: hidden;
}

.mi-kiemelt-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.55), rgba(236, 72, 153, 0.5), rgba(139, 92, 246, 0.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.mi-kiemelt-banner__tartalom {
  position: relative;
  z-index: 1;
}

.mi-kiemelt-banner__cimke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.mi-kiemelt-banner__cimke .mi-ikon {
  width: 13px;
  height: 13px;
  color: #ffffff;
  margin-right: 0;
}

.mi-kiemelt-banner .mi-section-title {
  margin-top: 0;
}

@media (max-width: 600px) {
  .mi-kiemelt-banner {
    padding: 24px;
  }
}

/* A JS pontosan az első sor magasságára állítja ezt az "ablakot", majd a
   TELJES kártyarácsot (data-mi-kiemelt-blokk) duplázza meg egyben - nem
   soronként -, hogy páratlan (nem oszlopszámmal osztható) kiemelés-számnál
   se csússzon el a hurok varrata. Ha a JS nem fut le, ez a szabály
   önmagában semmit sem vág le (a magasság alapból auto marad), csak a
   sima, több sorba törő rács látszik. */
.mi-kiemelt-siklo {
  overflow: hidden;
}

.mi-kiemelt-siklo [data-mi-kiemelt-savok] {
  display: flex;
  flex-direction: column;
  animation: mi-kiemelt-gorgetes var(--mi-kiemelt-idotartam, 24s) linear infinite;
}

@keyframes mi-kiemelt-gorgetes {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-1 * var(--mi-kiemelt-tavolsag, 0px)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mi-kiemelt-siklo [data-mi-kiemelt-savok] {
    animation: none;
  }
}

/* Telefon-makett alapstílusa - kizárólag a főoldali hero-n használt,
   önjátszó, több jelenetes animációval (ld. lentebb, "Főoldali
   animáció"). */
.mi-phone-mockup {
  position: relative;
  width: 300px;
  background: #0a0a10;
  border: 1px solid var(--mi-border);
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.mi-phone-mockup__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 18px;
  background: #0a0a10;
  border-radius: 0 0 12px 12px;
  z-index: 2;
}

.mi-phone-mockup__kepernyo {
  position: relative;
  background: var(--mi-bg);
  border-radius: 24px;
  padding: 16px 12px 20px;
  overflow: hidden;
}

/* A "statikus" (egyjelenetes) makettek - pl. az üzenetváltás oldal
   kontextus-doboza - a fenti paddinget és a tartalmuk szerinti magasságot
   használják. A több jelenetet váltogató főoldali animációnak viszont fix
   magasság kell (a jelenetei egymásra fedve, "position: absolute"-tal
   helyezkednek el), a paddinget pedig már maguk a jelenetek adják, hogy ne
   duplázódjon - ezt a ".mi-phone-mockup--fooldal" módosító állítja át. */
.mi-phone-mockup--fooldal .mi-phone-mockup__kepernyo {
  height: 560px;
  padding: 0;
}

.mi-phone-mockup__statusor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: var(--mi-text);
  margin-bottom: 12px;
}

.mi-phone-mockup__statusor-ikonok {
  width: 30px;
  height: 6px;
  border-radius: 3px;
  background: var(--mi-border);
}

.mi-phone-mockup__appfejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mi-text);
}

.mi-phone-mockup__keresoikon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
}

.mi-phone-mockup__szurok {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.mi-phone-mockup__chip {
  height: 18px;
  width: 46px;
  border-radius: 999px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
}

.mi-phone-mockup__chip--aktiv {
  width: 60px;
  background: rgba(139, 92, 246, 0.25);
  border-color: var(--mi-accent);
}

/* A kártya eddig pontosan az ablak szélességét töltötte ki, ezért a
   kiemelt kártya izzó kerete (box-shadow) oldalt nem fért el - csak
   fent/lent látszott, mert függőlegesen bőven van hely a görgető
   ablakban, oldalt viszont semennyi. Az oldalsó "overflow" ezért
   szabaddá válik ("visible"), a görgetéshez szükséges függőleges
   vágás ("hidden") pedig megmarad; a kis oldalsó belső margó
   (padding) helyet ad az izzásnak, mielőtt a telefon-képernyő külső
   kerete (".mi-phone-mockup__kepernyo") amúgy is levágná. */
.mi-phone-mockup__lista-ablak {
  position: relative;
  height: 420px;
  padding: 0 10px;
  overflow-x: visible;
  overflow-y: hidden;
}

/* Az alján elhalványul a lista, mintha a lenti szekció már eltakarná -
   ez teszi hihetővé, hogy a képernyőn folyamatosan görgethető tartalom van. */
.mi-phone-mockup__lista-ablak::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px;
  background: linear-gradient(to bottom, transparent, var(--mi-bg));
  pointer-events: none;
}

/* A lista a saját transform-ját kapja (nem a szülő ablak scroll-oz) - a
   görgetést a JS indítja (initFooldalTelefonAnimacio, main.js), a
   kiemelt kártya tényleges pozíciójából számolt célértékre, hogy a
   görgetés soha ne fusson túl a kiválasztott kártyán. */
.mi-phone-mockup__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(0);
  transition: transform 2.2s cubic-bezier(0.45, 0, 0.2, 1);
}

/* "Dobozos" kártya - a piactéren/marketplace oldalon is látható
   ".mi-service-card" stílusát követi (kép felül, szöveges test alul),
   nem az eredeti kicsi lista-sor kinézetet. Minden kártya - kiemelt és
   wireframe egyaránt - PONTOSAN ugyanakkora (fix magasság), hogy a
   listában egységesnek tűnjön; a kiemelt kártyát nem a mérete, hanem a
   tartalma és a feltűnő kerete különbözteti meg. */
.mi-phone-mockup__kartya {
  display: flex;
  flex-direction: column;
  height: 186px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

/* A kiemelt kártya mindvégig feltűnő, izzó keretet kap - ugyanaz a
   vizuális nyelv, mint a valódi ".mi-service-card--kiemelt"-en a
   piactéren, nem csak a "koppintás" pillanatában. */
.mi-phone-mockup__kartya--kiemelt {
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.55), 0 0 14px rgba(139, 92, 246, 0.45), 0 8px 16px rgba(0, 0, 0, 0.35);
}

/* Amikor a főoldali animáció "koppint" a kiemelt kártyára - ld.
   initFooldalTelefonAnimacio(), main.js - egy pillanatra még erősebb
   lesz az izzás és kicsit fel is nagyítjuk. */
.mi-phone-mockup__kartya--kiemelt.is-koppintva {
  box-shadow: 0 0 0 2px var(--mi-accent), 0 0 18px rgba(139, 92, 246, 0.65), 0 8px 18px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
}

.mi-phone-mockup__kartya-kep {
  position: relative;
  height: 74px;
  flex-shrink: 0;
  background-color: var(--mi-border);
  background-size: cover;
  background-position: center;
}

.mi-phone-mockup__kartya--wire .mi-phone-mockup__kartya-kep {
  opacity: 0.6;
}

/* A kiemelt kártya jelvénysora (jóváhagyott-pipa + "Kiemelt" felirat) és
   szív-ikonja - ugyanaz a vizuális nyelv, mint a valódi
   ".mi-service-card"-on (".mi-jelveny" / ".mi-nepszeru-jelveny" /
   ".mi-szivecske"), csak telefon-makett méretre kicsinyítve. */
.mi-phone-mockup__kartya-jelvenyek {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
}

.mi-phone-mockup__kartya-jelveny {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(15, 15, 22, 0.55);
  color: #4ade80;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mi-phone-mockup__kartya-jelveny svg {
  width: 10px;
  height: 10px;
}

.mi-phone-mockup__kartya-kiemelt-cimke {
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  color: #ffffff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.mi-phone-mockup__kartya-sziv {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(15, 15, 22, 0.55);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mi-phone-mockup__kartya-sziv svg {
  width: 11px;
  height: 11px;
}

/* A test mindig a kártya fennmaradó magasságát tölti ki ("flex: 1" a
   fix magasságú kártyán belül) - így a tartalom mennyiségétől
   függetlenül minden kártya egyforma marad. Explicit bal-igazítás
   ("text-align" + "align-items: flex-start"), hogy semmiképp se
   középre rendeződjön a szöveg - ugyanaz az elrendezés, mint a valódi
   ".mi-service-card__body"-n: cím balra, alatta a leírás és a címkék. */
.mi-phone-mockup__kartya-test {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  gap: 6px;
  padding: 9px 10px 10px;
  text-align: left;
}

.mi-phone-mockup__kartya-kategoria {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mi-accent);
}

.mi-phone-mockup__kartya-cim {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mi-text);
}

.mi-phone-mockup__kartya-leiras {
  margin: 0;
  font-size: 9px;
  line-height: 1.4;
  color: var(--mi-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mi-phone-mockup__kartya-cimkek {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4px;
  margin-top: 2px;
  width: 100%;
}

/* A wireframe kártyák címke-helykitöltői - ugyanabban a sorban, mint a
   valódi címkék, csak szürke, szöveg nélküli "pirula" formában. */
.mi-phone-mockup__kartya-cimke-wire {
  width: 34px;
  height: 11px;
  border-radius: 999px;
  background: var(--mi-border);
  opacity: 0.6;
}

.mi-phone-mockup__kartya-cimke {
  font-size: 7px;
  padding: 2px 7px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  color: var(--mi-text-muted);
}

/* ---------- Főoldali animáció: jelenetváltós makett-tartalom ---------- */
/* 4 jelenet fedi egymást teljesen ("position: absolute"), csak a
   ".is-aktiv" a látható - a JS (initFooldalTelefonAnimacio, main.js)
   ütemezve váltogatja őket. */
.mi-phone-mockup__jelenet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 12px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease;
}

.mi-phone-mockup__jelenet.is-aktiv {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* 1. jelenet: piactér-lista - a görgetést a JS indítja el (transform a
   ".mi-phone-mockup__lista"-n, ld. fentebb), itt csak a kivágó ablak. */
.mi-phone-mockup__jelenet--lista .mi-phone-mockup__lista-ablak {
  position: relative;
  flex: 1;
  height: auto;
}

/* 2. jelenet: a kiválasztott (kiemelt) szolgáltatás aloldala - statikus,
   teljes tartalommal (nincs belső görgetés/animáció: a tartalom elfér a
   telefon képernyőjén, így erre nincs is szükség). */
.mi-phone-mockup__reszlet-ablak {
  position: relative;
}

.mi-phone-mockup__reszlet-kep {
  height: 130px;
  border-radius: 12px;
  margin-bottom: 10px;
  background-color: var(--mi-border);
  background-size: cover;
  background-position: center;
}

.mi-phone-mockup__reszlet-kategoria {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mi-accent);
  margin-bottom: 4px;
}

.mi-phone-mockup__reszlet-cim {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--mi-text);
  margin-bottom: 8px;
}

.mi-phone-mockup__reszlet-leiras {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.mi-phone-mockup__reszlet-cimkek {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 14px;
  min-height: 19px;
}

.mi-phone-mockup__reszlet-cimkek span {
  font-size: 8px;
  padding: 3px 8px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  color: var(--mi-text-muted);
}

.mi-phone-mockup__reszlet-cimkek span:empty {
  display: none;
}

.mi-phone-mockup__reszlet-cta {
  padding: 10px;
  text-align: center;
  background: var(--mi-accent);
  color: #ffffff;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mi-phone-mockup__reszlet-cta.is-lukto {
  transform: scale(1.04);
  box-shadow: 0 0 0 6px rgba(139, 92, 246, 0.25);
}

.mi-phone-mockup__reszlet-ajanlott-cim {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--mi-text-muted);
  margin-bottom: 8px;
}

.mi-phone-mockup__reszlet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.mi-phone-mockup__reszlet-grid-kartya {
  padding: 7px;
  border-radius: 10px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
}

.mi-phone-mockup__reszlet-grid-kep {
  height: 40px;
  border-radius: 6px;
  margin-bottom: 6px;
  background-color: var(--mi-border);
  background-size: cover;
  background-position: center;
}

.mi-phone-mockup__reszlet-grid-kartya--wire .mi-phone-mockup__reszlet-grid-kep {
  opacity: 0.6;
}

.mi-phone-mockup__reszlet-grid-cim {
  display: block;
  font-size: 9px;
  font-weight: 600;
  color: var(--mi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. jelenet: rövid üzenetváltás a szolgáltatóval - ugyanazok a
   ".mi-uzenet-buborek" osztályok, mint az üzenetváltás oldalon, csak
   kicsinyített méretben. */
.mi-phone-mockup__chat-fejlec {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--mi-border);
}

.mi-phone-mockup__chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--mi-border);
  background-size: cover;
  background-position: center;
}

.mi-phone-mockup__chat-fejlec strong {
  font-size: 11px;
  color: var(--mi-text);
}

.mi-phone-mockup__chat-test {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* A buborékok a rendes méretüket megtartják (mintha valódi mondat
   lenne bennük - ez adja a helyes alakot/méretet), de a szöveg maga
   láthatatlan (átlátszó) - nem kell benne olvasható tartalom, csak a
   helye legyen kihagyva, ahogy egy igazi beszélgetésben lenne. */
.mi-uzenet-buborek.mi-phone-mockup__buborek {
  max-width: 72%;
  padding: 7px 10px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mi-uzenet-buborek.mi-phone-mockup__buborek.is-aktiv {
  opacity: 1;
  transform: translateY(0);
}

.mi-uzenet-buborek.mi-phone-mockup__buborek p {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: transparent;
}

/* Az üzenetváltást lezáró kézfogás-emoji - nem az egyik fél oldalára
   igazítva, hanem középen, mint egy rendszerüzenet, hogy jelezze: ez már
   nem egy újabb mondat, hanem a beszélgetés lezáró pillanata. */
.mi-uzenet-buborek.mi-phone-mockup__buborek.mi-phone-mockup__buborek--emoji {
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-bg-elevated);
  border-color: var(--mi-border);
  font-size: 20px;
  line-height: 1;
  padding: 7px 16px;
}

/* 4. jelenet: sikeres kapcsolatfelvétel visszajelzés - nagyobb ikon és
   szöveg, hogy a jelenet valóban záró, hangsúlyos pillanatnak hasson. */
.mi-phone-mockup__jelenet--siker {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

.mi-phone-mockup__siker-kor {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.mi-phone-mockup__jelenet--siker.is-aktiv .mi-phone-mockup__siker-kor {
  transform: scale(1);
  opacity: 1;
}

.mi-phone-mockup__siker-cim {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--mi-text);
}

.mi-phone-mockup__siker-alcim {
  font-size: 12px;
  color: var(--mi-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .mi-phone-mockup__lista {
    transition: none;
  }
}

/* Hogyan működik */
.mi-how-it-works {
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 0 24px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mi-how-it-works__col {
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 32px;
  background-size: cover;
  background-position: center;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mi-how-it-works__col h2 {
  margin-top: 0;
  margin-bottom: 8px;
}

.mi-how-it-works__col p {
  color: var(--mi-text-muted);
}

.mi-how-it-works__col p:first-of-type {
  color: var(--mi-text);
  font-weight: 600;
  font-size: 17px;
}

/* Rólunk - bevezető, kép + szöveg */
.mi-rolunk-intro {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 64px 0;
}

.mi-rolunk-intro__kep {
  min-height: 420px;
  border-radius: var(--mi-radius);
  background-size: cover;
  background-position: center;
}

.mi-rolunk-intro__szoveg p {
  font-size: 19px;
  line-height: 1.6;
}

.mi-rolunk-intro__szoveg p.mi-hint {
  font-size: 15px;
}

/* CTA sáv */
.mi-cta-band {
  position: relative;
  overflow: hidden;
  background-color: var(--mi-bg-elevated);
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--mi-border);
  border-bottom: 1px solid var(--mi-border);
  padding: 56px 24px;
  text-align: center;
}

.mi-cta-band__inner {
  position: relative;
  z-index: 1;
}

.mi-cta-band__inner h2 {
  margin: 0 0 8px;
}

.mi-cta-band__inner p {
  color: var(--mi-text-muted);
  margin-bottom: 20px;
}

.mi-trust {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 80px;
  color: var(--mi-text-muted);
  padding: 0 24px;
}

/* Kártyák (későbbi felhasználásra) */
.mi-card {
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.2s ease;
}

a.mi-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.25);
  border-color: var(--mi-accent);
}

/* Egyszerű tartalmi oldalak */
.mi-page h1 {
  font-size: 32px;
  margin-bottom: 24px;
}

.mi-page p {
  color: var(--mi-text-muted);
  font-size: 16px;
}

/* Lábláb */
.mi-footer {
  border-top: 1px solid var(--mi-border);
  margin-top: 40px;
}

.mi-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 32px;
}

.mi-footer__logo {
  height: 28px;
  margin-bottom: 12px;
}

.mi-footer__szlogen {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mi-accent);
}

.mi-footer__col h4 {
  margin-top: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mi-text-muted);
}

.mi-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mi-footer__col a {
  color: var(--mi-text-muted);
}

.mi-footer__col a:hover {
  color: var(--mi-text);
}

.mi-footer__bottom {
  border-top: 1px solid var(--mi-border);
  padding: 20px 24px;
  text-align: center;
  color: var(--mi-text-muted);
  font-size: 13px;
}

@media (max-width: 768px) {
  .mi-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo actions" "nav nav";
    align-items: center;
    row-gap: 10px;
    padding: 14px 16px;
  }

  .mi-logo {
    grid-area: logo;
  }

  .mi-logo img {
    height: 26px;
  }

  .mi-header__actions {
    grid-area: actions;
    justify-self: end;
    gap: 8px;
  }

  .mi-header__actions .mi-btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .mi-account__nev {
    display: none;
  }

  .mi-nav {
    grid-area: nav;
    width: 100%;
  }

  .mi-nav__list {
    gap: 10px 16px;
    flex-wrap: wrap;
  }

  .mi-how-it-works {
    grid-template-columns: 1fr;
  }

  .mi-rolunk-intro {
    grid-template-columns: 1fr;
    padding: 32px 0;
    gap: 24px;
  }

  .mi-rolunk-intro__kep {
    min-height: 220px;
  }

  .mi-footer__inner {
    grid-template-columns: 1fr;
  }

  .mi-hero {
    padding: 80px 24px 300px;
  }

  .mi-hero h1 {
    font-size: 28px;
  }

  .mi-hero__cim {
    min-height: 3.75em;
  }

  .mi-category-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mi-kategoria-csoport-grid {
    grid-template-columns: 1fr;
  }

  .mi-cards-grid {
    grid-template-columns: 1fr;
  }

  .mi-cards-grid--compact,
  .mi-cards-grid--nepszeru {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .mi-marketplace__layout {
    grid-template-columns: 1fr;
  }
}

/* ---------- Üzenetek ---------- */
.mi-hibauzenet,
.mi-sikeruzenet {
  border-radius: var(--mi-radius);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.mi-hibauzenet {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.mi-sikeruzenet {
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.mi-hibauzenet ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.mi-hint {
  color: var(--mi-text-muted);
  font-size: 14px;
}

.mi-mezo-segitseg {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 400;
  color: var(--mi-text-muted);
}

.mi-mezo-segitseg a {
  color: var(--mi-accent);
  text-decoration: underline;
}

.mi-mezo-segitseg a:hover {
  color: var(--mi-accent-hover);
}

/* ---------- Form elemek ---------- */
.mi-form,
.mi-wizard {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mi-auth-page,
.mi-feltoltes {
  text-align: center;
}

.mi-auth-page .mi-form,
.mi-auth-page .mi-wizard,
.mi-feltoltes .mi-wizard {
  text-align: left;
}

.mi-adataim-page .mi-form {
  max-width: 880px;
}

.mi-feltoltes .mi-wizard {
  max-width: 780px;
}

.mi-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 640px) {
  .mi-form-grid {
    grid-template-columns: 1fr;
  }
}

.mi-szocialis-linkek {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mi-szocialis-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  color: var(--mi-text);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mi-szocialis-link:hover {
  border-color: currentColor;
}

.mi-szocialis-link .mi-ikon {
  width: 16px;
  height: 16px;
}

.mi-szocialis-link--instagram {
  color: #d6249f;
}

.mi-szocialis-link--facebook {
  color: #1877f2;
}

.mi-auth-page h1,
.mi-feltoltes h1 {
  text-align: center;
}

.mi-auth-page .mi-hibauzenet,
.mi-auth-page .mi-sikeruzenet,
.mi-feltoltes .mi-hibauzenet,
.mi-feltoltes .mi-hint {
  max-width: 640px;
  margin: 0 auto 24px;
  text-align: left;
}

.mi-form label,
.mi-wizard label,
.mi-kiemeles-eltero-mezok label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mi-text);
}

.mi-form input[type="text"],
.mi-form input[type="email"],
.mi-form input[type="tel"],
.mi-form input[type="url"],
.mi-form input[type="password"],
.mi-form input[type="number"],
.mi-form input[type="date"],
.mi-form input[type="datetime-local"],
.mi-form textarea,
.mi-form select,
.mi-wizard input[type="text"],
.mi-wizard input[type="email"],
.mi-wizard input[type="tel"],
.mi-wizard input[type="url"],
.mi-wizard input[type="password"],
.mi-wizard input[type="number"],
.mi-wizard textarea,
.mi-wizard select,
.mi-feltoltes-form input[type="text"],
.mi-feltoltes-form input[type="number"],
.mi-feltoltes-form textarea,
.mi-feltoltes-form select,
.mi-kiemeles-eltero-mezok input[type="text"] {
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--mi-text);
  font-size: 15px;
  font-family: inherit;
}

/* A natív dátumválasztó ikonja sötét mezőn alig látszana feketén, ezért
   invertáljuk - csak ott jelenik meg, ahol type="date"/"datetime-local"
   mezőt használunk. */
.mi-form input[type="date"]::-webkit-calendar-picker-indicator,
.mi-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

/* Az előtöltött, nem szerkeszthető mezők (pl. gyors ajánlatkérés fiókadatai)
   vizuálisan is jelezzék, hogy zároltak - sötétebb háttér, tiltás-kurzor. */
.mi-form input[readonly] {
  background: var(--mi-bg);
  color: var(--mi-text-muted);
  cursor: not-allowed;
}

.mi-checkbox,
.mi-radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px !important;
}

.mi-checkbox--al {
  display: none !important;
  margin-left: 22px;
  font-size: 13px;
}

.mi-checkbox--al.is-lathato {
  display: flex !important;
}

/* ---------- Több kategória választó (dropdown, saját UI) ---------- */
.mi-multiselect {
  position: relative;
}

.mi-multiselect__trigger {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 8px 38px 8px 14px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  color: var(--mi-text);
  font-size: 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.mi-multiselect__trigger:hover {
  border-color: var(--mi-accent);
}

.mi-multiselect__trigger::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--mi-text-muted);
  border-bottom: 2px solid var(--mi-text-muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.mi-multiselect.is-open .mi-multiselect__trigger::after {
  transform: translateY(-35%) rotate(-135deg);
}

.mi-multiselect__placeholder {
  color: var(--mi-text-muted);
}

.mi-multiselect__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mi-multiselect__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  background: var(--mi-accent);
  color: #ffffff;
  border-radius: 999px;
  padding: 3px 6px 3px 10px;
  font-size: 11px;
  font-weight: 600;
}

.mi-multiselect__chip-szoveg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30vw;
}

.mi-multiselect__chip-eltavolit {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 0;
}

.mi-multiselect__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.mi-multiselect__panel:not([hidden]) {
  animation: mi-fade-up 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mi-multiselect__panel .mi-checkbox,
.mi-multiselect__panel .mi-radio {
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.mi-multiselect__panel .mi-checkbox:hover,
.mi-multiselect__panel .mi-radio:hover {
  background: var(--mi-bg);
}

.mi-multiselect__item--al {
  margin-left: 22px;
  font-size: 13px;
}

/* A kategória-szűrőben a fő kategóriák a 3 nagy csoport (Fellépők /
   Szolgáltatók / Esküvőszervezés) szerint kapnak egy-egy apró címkét - ld.
   musorinfo_get_kategoria_csoportok(), page-marketplace.php. */
.mi-multiselect__csoport-cim {
  display: block;
  margin: 10px 0 2px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mi-text-muted);
}

.mi-multiselect__csoport-cim:first-child {
  margin-top: 0;
}

.mi-multiselect__csoport-cim--halvany {
  opacity: 0.7;
}

.mi-fieldset {
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 16px;
}

.mi-fieldset legend {
  padding: 0 6px;
  color: var(--mi-text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mi-fieldset-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mi-fieldset-row--oszlop {
  grid-template-columns: 1fr;
}

.mi-gyorscimkek {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 8px;
}

.mi-gyorscimke {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--mi-border);
  background: var(--mi-bg-elevated);
  color: var(--mi-text-muted);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.mi-gyorscimke:hover {
  border-color: var(--mi-accent);
  color: var(--mi-text);
}

.mi-gyorscimke.is-aktiv {
  background: var(--mi-accent);
  border-color: var(--mi-accent);
  color: #ffffff;
}

.mi-ar-mezo {
  display: flex;
  align-items: stretch;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  overflow: hidden;
}

.mi-ar-mezo input {
  flex: 1;
  min-width: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mi-ar-mezo input:focus {
  outline: none;
}

.mi-ar-mezo:focus-within {
  border-color: var(--mi-accent);
}

.mi-ar-mezo__fix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--mi-border);
  color: var(--mi-text-muted);
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.mi-megye-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.mi-megye-grid--szuro {
  grid-template-columns: 1fr;
}

/* Az attribútum-szelektor eleve nagyobb specifitású, mint a sima
   .mi-megye-grid osztály fenti "display: grid" szabálya, így ez felülírja
   azt akkor is, ha a [hidden] rejtett divet JS mutatja/rejti utólag -
   ugyanaz az alapprobléma, mint a téma más [hidden]-t felülíró javításainál. */
.mi-megye-grid[hidden] {
  display: none;
}

.mi-megye-tovabbi-gomb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  color: var(--mi-accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

/* Az attribútum-szelektor nagyobb specifitása felülírja a fenti
   "display: inline-flex"-et akkor is, ha a gombot JS rejti el [hidden]-nel -
   e nélkül a gomb "beragadt" volna látszólag nyitott állapotban. */
.mi-megye-tovabbi-gomb[hidden] {
  display: none;
}

.mi-megye-tovabbi-gomb:hover {
  color: var(--mi-accent-hover);
  text-decoration: underline;
}

.mi-charcount {
  align-self: flex-end;
  font-size: 12px;
  color: var(--mi-text-muted);
}

/* ---------- Szám-léptető (stepper) ---------- */
.mi-stepper {
  display: flex;
  align-items: stretch;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  overflow: hidden;
}

.mi-stepper input[type="number"] {
  flex: 1;
  min-width: 0;
  text-align: center;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mi-stepper input[type="number"]::-webkit-inner-spin-button,
.mi-stepper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.mi-stepper input[type="number"] {
  -moz-appearance: textfield;
}

.mi-stepper__gomb {
  flex-shrink: 0;
  width: 38px;
  border: none;
  background: transparent;
  color: var(--mi-text-muted);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.mi-stepper__gomb:hover {
  background: var(--mi-bg);
  color: var(--mi-text);
}

/* ---------- Wizard lépések (idővonal) ---------- */
.mi-wizard__steps {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
}

.mi-wizard__step-label {
  position: relative;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  text-align: center;
  color: var(--mi-text-muted);
}

/* Szerepkörönként eltérő lépések esetén egy-egy címke JS-ből hidden lehet -
   ugyanaz a minta, mint a [hidden]-t felülíró class-oknál máshol a témában. */
.mi-wizard__step-label:not([hidden]) {
  display: flex;
}

.mi-wizard__step-label::before {
  content: attr(data-step-label);
  width: 30px;
  height: 30px;
  line-height: 26px;
  border-radius: 50%;
  border: 2px solid var(--mi-border);
  background: var(--mi-bg-elevated);
  color: var(--mi-text-muted);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.mi-wizard__step-label::after {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--mi-border);
  z-index: -1;
}

.mi-wizard__step-label:last-child::after,
.mi-wizard__step-label.is-utolso-lathato::after {
  display: none;
}

.mi-wizard__step-label.is-active,
.mi-wizard__step-label.is-done {
  color: var(--mi-text);
}

.mi-wizard__step-label.is-active::before {
  border-color: var(--mi-accent);
  background: var(--mi-accent);
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.mi-wizard__step-label.is-done::before {
  content: '✓';
  border-color: var(--mi-accent);
  background: var(--mi-accent);
  color: #ffffff;
}

.mi-wizard__step-label.is-done::after {
  background: var(--mi-accent);
}

.mi-wizard__step {
  display: none;
  flex-direction: column;
  gap: 16px;
  border: none;
  padding: 0;
  margin: 0;
}

.mi-wizard__step.is-active {
  display: flex;
}

.mi-wizard__nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ---------- Regisztráció: szerepkör-választó ---------- */
/* ---------- Adataim: a fiók szerepkörének (Szolgáltató / Szervező) állandó jelzése ---------- */
.mi-szerepkor-jelzo {
  display: inline-block;
  margin: 0 0 20px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  color: var(--mi-text-muted);
  font-size: 13px;
}

.mi-mezo-cim {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--mi-text);
  margin-bottom: 4px;
}

.mi-szerepkor-valaszto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.mi-szerepkor-kartya {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mi-szerepkor-kartya:hover {
  border-color: var(--mi-accent);
}

.mi-szerepkor-kartya:has(input:checked) {
  border-color: var(--mi-accent);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.25);
}

.mi-szerepkor-kartya input[type="radio"] {
  position: absolute;
  top: 16px;
  right: 16px;
  accent-color: var(--mi-accent);
}

.mi-szerepkor-kartya__cim {
  font-family: var(--mi-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--mi-text);
  padding-right: 24px;
}

.mi-szerepkor-kartya__leiras {
  font-size: 13px;
  color: var(--mi-text-muted);
}

.mi-szervezo-tipus {
  display: none;
  margin-top: 20px;
}

.mi-szerepkor-valaszto:has(input[value="szervezo"]:checked) ~ .mi-szervezo-tipus {
  display: block;
}

.mi-szervezo-tipus__racs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.mi-szervezo-tipus__kartya {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--mi-text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.mi-szervezo-tipus__kartya:hover {
  border-color: var(--mi-accent);
}

.mi-szervezo-tipus__kartya:has(input:checked) {
  border-color: var(--mi-accent);
  color: var(--mi-text);
}

.mi-szervezo-tipus__kartya input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 600px) {
  .mi-szerepkor-valaszto,
  .mi-szervezo-tipus__racs {
    grid-template-columns: 1fr;
  }
}

/* ---------- Drag & drop ---------- */
.mi-dropzone {
  border: 2px dashed var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  color: var(--mi-text-muted);
}

.mi-dropzone.is-dragover {
  border-color: var(--mi-accent);
  color: var(--mi-text);
}

.mi-dropzone input[type="file"] {
  display: none;
}

.mi-dropzone__previews {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  justify-content: center;
}

.mi-dropzone__previews img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

/* ---------- Marketplace / szűrő ---------- */
.mi-marketplace__layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}

.mi-filter-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 20px;
  background: var(--mi-bg-elevated);
}

.mi-filter-sidebar input[type="text"],
.mi-filter-sidebar input[type="number"] {
  background: var(--mi-bg);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--mi-text);
  width: 100%;
}

/* Asztali nézetben a kategória legördülő (mobil-only UI) helyett a régi,
   mindig kibontott jelölőnégyzet-lista jelenik meg - a JS-hez és a mobil
   nézethez semmit nem kell módosítani ehhez, csak vizuálisan "kilapítjuk"
   ugyanazt a .mi-multiselect komponenst. A "Hol lesz az esemény?" szűrő
   (.mi-multiselect--esemeny-helyszin) explicit ki van véve ez alól, mert
   annak valódi legördülő multiselectnek kell maradnia asztali nézetben is -
   nem megye szerint böngész a felhasználó, hanem kiválasztja, hol lesz az
   esemény, ezt egy hosszú, mindig kibontott lista helyett egy kompakt
   lenyíló mezővel kényelmesebb kezelni. */
@media (min-width: 769px) {
  .mi-filter-sidebar .mi-multiselect:not(.mi-multiselect--esemeny-helyszin) .mi-multiselect__trigger {
    display: none;
  }

  .mi-filter-sidebar .mi-multiselect:not(.mi-multiselect--esemeny-helyszin) .mi-multiselect__desktop-cim {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  .mi-filter-sidebar .mi-multiselect:not(.mi-multiselect--esemeny-helyszin) .mi-multiselect__panel {
    display: block !important;
    position: static;
    border: none;
    padding: 0;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    background: transparent;
    animation: none;
  }

  .mi-filter-sidebar .mi-multiselect + .mi-multiselect {
    margin-top: 20px;
  }

  /* A "Hol lesz az esemény?" cím asztali nézetben is jelenjen meg, a
     kompakt lenyíló gomb fölötti feliratként - ugyanaz a mintázat, mint a
     kilapított listák fölötti cím, csak most egy valódi dropdown fölött. */
  .mi-filter-sidebar .mi-multiselect--esemeny-helyszin .mi-multiselect__desktop-cim {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 10px;
  }
}

.mi-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 32px;
}

.mi-pagination a,
.mi-pagination span {
  padding: 8px 14px;
  border: 1px solid var(--mi-border);
  border-radius: 8px;
  color: var(--mi-text-muted);
}

.mi-pagination .current {
  color: var(--mi-text);
  border-color: var(--mi-accent);
}

.mi-service-card__excerpt {
  color: var(--mi-text-muted);
  font-size: 13px;
  margin: 6px 0;
}

.mi-service-card__tagok {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mi-service-card__tag {
  display: inline-block;
  font-size: 11px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  padding: 3px 10px;
  color: var(--mi-text-muted);
}

/* ---------- Fiókom ---------- */
.mi-fiokom__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

/* A globális "sticky footer" (body min-height: 100vh) csak azt
   garantálja, hogy a teljes oldal legalább egy képernyőnyi magas legyen -
   ha kevés (1-2) szolgáltatás van feltöltve, ez önmagában még mindig
   szűkös lehet a kiemelés-modal számára. Ez a plusz minimum-magasság
   csak akkor "látszik" (ad extra üres helyet a lábléc előtt), ha a
   listázás rövid - sok feltöltött szolgáltatásnál a tartalom magától
   túlnő rajta, és nincs hatása. */
.mi-fiokom {
  min-height: 70vh;
  max-width: 1320px;
}

.mi-fiokom-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mi-fiokom-kartya {
  position: relative;
  display: flex;
  gap: 16px;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 16px;
  background: var(--mi-bg-elevated);
}

/* ---------- Láthatóság kapcsoló (toggle switch) ---------- */
.mi-toggle-switch {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mi-text-muted);
}

.mi-toggle-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--mi-border);
  transition: background 0.2s;
}

.mi-toggle-switch__track::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s;
}

.mi-toggle-switch.is-on .mi-toggle-switch__track {
  background: var(--mi-accent);
}

.mi-toggle-switch.is-on .mi-toggle-switch__track::before {
  transform: translateX(18px);
}

.mi-toggle-switch:hover {
  color: var(--mi-text);
}

.mi-fiokom-kartya__kep {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: 10px;
  overflow: hidden;
}

.mi-fiokom-kartya__kep img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mi-fiokom-kartya__adat {
  flex: 1;
  padding-right: 110px;
}

.mi-fiokom-kartya__adat h3 {
  margin: 0 0 6px;
}

.mi-statusz {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  margin-right: 6px;
  margin-bottom: 8px;
}

.mi-statusz--publish {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.mi-statusz--pending {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
}

.mi-statusz--draft,
.mi-statusz--trash {
  background: rgba(148, 163, 184, 0.15);
  color: var(--mi-text-muted);
}

.mi-statusz--elutasitva {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.mi-fiokom-kartya__cimke-sor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}

.mi-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--mi-bg);
  border: 1px solid var(--mi-border);
  font-size: 12px;
  color: var(--mi-text-muted);
}

.mi-stat-chip .mi-ikon {
  width: 14px;
  height: 14px;
  margin-right: 0;
  color: var(--mi-accent);
}

.mi-stat-chip strong {
  color: var(--mi-text);
  font-weight: 700;
}

.mi-statisztika-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 20px 0 32px;
}

@media (max-width: 760px) {
  .mi-statisztika-panel {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mi-statisztika-kartya {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  background: linear-gradient(135deg, var(--mi-bg-elevated), var(--mi-bg));
}

.mi-statisztika-kartya .mi-ikon {
  width: 26px;
  height: 26px;
  margin-right: 0;
  flex-shrink: 0;
  color: var(--mi-accent);
}

.mi-statisztika-kartya__szoveg {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mi-statisztika-kartya__szoveg strong {
  font-size: 22px;
  line-height: 1.1;
  color: var(--mi-text);
}

.mi-statisztika-kartya__szoveg span {
  font-size: 12px;
  color: var(--mi-text-muted);
}

.mi-fiokom-kartya__gombok {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

/* ---------- Üzeneteim (beszélgetés-lista) ---------- */
.mi-beszelgetes-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mi-beszelgetes-kartya {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 14px 36px 14px 14px;
  background: var(--mi-bg-elevated);
  color: var(--mi-text);
  transition: border-color 0.2s ease;
}

.mi-beszelgetes-kartya:hover {
  border-color: var(--mi-accent);
}

.mi-beszelgetes-kartya.is-olvasatlan {
  box-shadow: 0 0 0 1px var(--mi-accent) inset;
}

.mi-beszelgetes-kartya__szoveg {
  flex: 1;
  min-width: 0;
}

.mi-beszelgetes-kartya__szoveg strong {
  display: block;
  margin-bottom: 2px;
}

.mi-beszelgetes-kartya__szoveg p {
  margin: 0;
  font-size: 13px;
  color: var(--mi-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-beszelgetes-kartya__datum {
  font-size: 12px;
  color: var(--mi-text-muted);
  flex-shrink: 0;
}

.mi-beszelgetes-kartya__pont {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mi-accent);
}

/* ---------- Üzenetváltás (egy beszélgetés szála) ---------- */
.mi-uzenetvaltas__fejlec {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
}

.mi-uzenetvaltas__fejlec h1 {
  margin: 0;
}

/* A kapcsolódó szolgáltatás a valódi, marketplace-oldali "dobozos"
   kártyájával jelenik meg (ld. musorinfo_render_szolgaltatas_card()),
   nem egy kicsinyített telefon-makettel - ld. lentebb
   ".mi-uzenetvaltas__elrendezes". */
.mi-uzenetvaltas__elrendezes {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

.mi-uzenetvaltas__oldalso {
  position: sticky;
  top: 100px;
}

@media (max-width: 760px) {
  .mi-uzenetvaltas__elrendezes {
    grid-template-columns: 1fr;
  }

  .mi-uzenetvaltas__oldalso {
    order: -1;
    position: static;
  }
}

.mi-phone-mockup__wire-sor {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--mi-border);
  opacity: 0.6;
}

.mi-phone-mockup__wire-sor--cim {
  width: 70%;
}

.mi-phone-mockup__wire-sor--alcim {
  width: 45%;
}

/* Vékony, rövid sáv - a kategória-felirat helykitöltője a wireframe
   lista-kártyákon (ld. epitsListaKartya(), main.js). */
.mi-phone-mockup__wire-sor--kicsi {
  width: 30%;
  height: 4px;
}

.mi-uzenetvaltas__lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  background: var(--mi-bg);
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: 16px;
}

.mi-uzenet-buborek {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--mi-border);
  background: var(--mi-bg-elevated);
}

.mi-uzenet-buborek p {
  margin: 0 0 4px;
  color: var(--mi-text);
  word-break: break-word;
}

.mi-uzenet-buborek__datum {
  font-size: 11px;
  color: var(--mi-text-muted);
}

.mi-uzenet-buborek--sajat {
  align-self: flex-end;
  border-color: var(--mi-accent);
  background: var(--mi-accent);
  color: #ffffff;
}

.mi-uzenet-buborek--sajat p {
  color: #ffffff;
}

.mi-uzenet-buborek--sajat .mi-uzenet-buborek__datum {
  color: rgba(255, 255, 255, 0.75);
}

.mi-uzenet-buborek--masik {
  align-self: flex-start;
}

.mi-uzenetvaltas__urlap {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.mi-uzenetvaltas__urlap textarea {
  flex: 1;
  resize: vertical;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--mi-text);
  font-family: inherit;
}

@media (max-width: 640px) {
  .mi-uzenet-buborek {
    max-width: 85%;
  }

  .mi-uzenetvaltas__urlap {
    flex-direction: column;
    align-items: stretch;
  }
}

.mi-btn--kicsi {
  padding: 6px 12px;
  font-size: 13px;
}

.mi-btn--nagy {
  padding: 16px 32px;
  font-size: 16px;
}

.mi-btn--veszely {
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}

.mi-btn--kiemeles,
.mi-btn--gradient {
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  border-color: transparent;
  color: #ffffff;
  font-weight: 700;
}

.mi-btn--kiemeles:hover,
.mi-btn--gradient:hover {
  background: linear-gradient(135deg, #d97706, #db2777, #7c3aed);
}

.mi-btn--kiemeles.is-disabled {
  cursor: default;
  opacity: 0.5;
  filter: grayscale(0.6);
  pointer-events: none;
}

.mi-btn--kiemeles.is-disabled:hover {
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
}

/* ---------- Szolgáltatás profil ---------- */
.mi-szolgaltatas-profil__fejresz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.mi-szolgaltatas-profil__kep {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mi-radius);
}

.mi-szolgaltatas-profil__kep img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--mi-radius);
}

.mi-adatlista {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--mi-text-muted);
}

.mi-adatlista li {
  display: flex;
  align-items: center;
}

.mi-szolgaltato-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mi-szolgaltato-link:hover {
  color: var(--mi-accent);
}

.mi-szolgaltatas-profil__galeria {
  margin-top: 40px;
}

/* ---------- Szolgáltató bemutatkozása az aloldalon ---------- */
.mi-szolgaltato-bemutatkozas {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--mi-border);
}

.mi-szolgaltato-bemutatkozas__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.mi-szolgaltato-bemutatkozas__szoveg {
  flex: 1;
  min-width: 0;
}

.mi-adatlista--kompakt {
  margin: 16px 0 0;
}

/* ---------- Vízszintes carousel (pl. a szolgáltató további szolgáltatásai) ---------- */
.mi-tobbi-szolgaltatas {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--mi-border);
}

.mi-carousel {
  position: relative;
}

.mi-carousel__savok {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.mi-carousel__savok::-webkit-scrollbar {
  display: none;
}

.mi-carousel__elem {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.mi-carousel__nyil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  color: var(--mi-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}

.mi-carousel__nyil:hover {
  border-color: var(--mi-accent);
  color: var(--mi-accent);
}

.mi-carousel__nyil--elozo {
  left: -14px;
}

.mi-carousel__nyil--kovetkezo {
  right: -14px;
}

.mi-galeria-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.mi-galeria-grid img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.mi-galeria-kep {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

/* ---------- Lightbox ---------- */
.mi-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.92);
  align-items: center;
  justify-content: center;
  z-index: 200;
  display: none;
}

.mi-lightbox:not([hidden]) {
  display: flex;
  animation: mi-fade-in 0.25s ease both;
}

.mi-lightbox__kep {
  max-width: 88vw;
  max-height: 86vh;
  border-radius: 10px;
  object-fit: contain;
}

.mi-lightbox:not([hidden]) .mi-lightbox__kep {
  animation: mi-scale-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mi-lightbox__bezar {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--mi-border);
  background: var(--mi-bg-elevated);
  color: var(--mi-text);
  font-size: 18px;
  cursor: pointer;
}

.mi-lightbox__nyil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--mi-border);
  background: var(--mi-bg-elevated);
  color: var(--mi-text);
  font-size: 24px;
  cursor: pointer;
}

.mi-lightbox__nyil--elozo {
  left: 16px;
}

.mi-lightbox__nyil--kovetkezo {
  right: 16px;
}

/* ---------- Egyedi megerősítő ablak (törlés stb., natív confirm() helyett) ---------- */
.mi-megerosito {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.72);
  align-items: center;
  justify-content: center;
  z-index: 300;
  display: none;
  padding: 20px;
}

.mi-megerosito:not([hidden]) {
  display: flex;
  animation: mi-fade-in 0.2s ease both;
}

.mi-megerosito__doboz {
  width: 100%;
  max-width: 380px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.mi-megerosito:not([hidden]) .mi-megerosito__doboz {
  animation: mi-scale-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mi-megerosito__szoveg {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.5;
}

.mi-megerosito__gombok {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.mi-ar-kiemeles {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 20px 0;
  padding: 12px 18px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-accent);
  border-radius: var(--mi-radius);
  font-size: 20px;
  font-weight: 700;
  color: var(--mi-text);
}

.mi-ar-kiemeles .mi-ikon {
  width: 24px;
  height: 24px;
  margin-right: 0;
  color: var(--mi-accent);
}

.mi-kapcsolat-doboz {
  margin-top: 24px;
}

.mi-kapcsolat-doboz__gombsor {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mi-kapcsolat-doboz__reszletek {
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  display: none;
  flex-direction: column;
  gap: 4px;
  width: fit-content;
}

/* A [hidden] attribútum önmagában nem lett volna elég, mert a fenti
   class-szabály (szerző eredetű) felülírja a böngésző alap [hidden]
   szabályát (UA eredetű) - emiatt jelent meg a doboz kattintás nélkül is. */
.mi-kapcsolat-doboz__reszletek:not([hidden]) {
  display: flex;
}

.mi-kapcsolat-sor {
  display: flex;
  align-items: center;
}

.mi-kapcsolat-sor a {
  color: var(--mi-text);
}

.mi-kapcsolat-sor a:hover {
  color: var(--mi-accent);
}

/* ---------- Kategória CTA ---------- */
.mi-kategoria-cta {
  text-align: center;
  margin-top: 24px;
}

/* ---------- Szolgáltató-sáv (legutóbb regisztráltak) ---------- */
.mi-szolgaltato-sor {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mi-szolgaltato-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  background: var(--mi-bg-elevated);
  color: var(--mi-text);
  white-space: nowrap;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.25s ease;
}

.mi-szolgaltato-chip:hover {
  border-color: var(--mi-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
}

/* ---------- Logó kör (kép, vagy kezdőbetűs helyettesítő) ---------- */
.mi-logo-kor {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.mi-logo-kor--kezdobetu {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mi-accent);
  color: #ffffff;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Élő keresés (lebegő, nem tolja el a tartalmat) ---------- */
.mi-elo-kereses-eredmeny {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 50;
}

.mi-elo-kereses-sor {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mi-border);
}

.mi-elo-kereses-sor:last-child {
  border-bottom: none;
}

.mi-elo-kereses-sor img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}

/* ---------- GYIK ---------- */
.mi-accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mi-accordion__item {
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 16px 20px;
}

.mi-accordion__item summary {
  cursor: pointer;
  font-weight: 600;
}

.mi-accordion__item p {
  color: var(--mi-text-muted);
  margin-top: 12px;
}

/* ---------- Statisztika sáv (Rólunk) ---------- */
.mi-stat-sav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: center;
  margin: 40px 0;
}

.mi-stat {
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 24px;
  background: var(--mi-bg-elevated);
}

.mi-stat__szam {
  display: block;
  font-family: var(--mi-font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--mi-accent);
}

.mi-stat__cimke {
  color: var(--mi-text-muted);
  font-size: 14px;
}

/* ---------- Egyedi jelölőnégyzet és rádiógomb ---------- */
.mi-checkbox input[type="checkbox"],
.mi-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid var(--mi-accent);
  background: var(--mi-bg-elevated);
  position: relative;
  cursor: pointer;
}

.mi-checkbox input[type="checkbox"] {
  border-radius: 6px;
}

.mi-radio input[type="radio"] {
  border-radius: 50%;
}

.mi-checkbox input[type="checkbox"]:checked,
.mi-radio input[type="radio"]:checked {
  background: var(--mi-accent);
}

.mi-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.mi-radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
}

/* ---------- Fejléc: fiók-menü ---------- */
.mi-account {
  position: relative;
}

.mi-account__gomb {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--mi-border);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  color: var(--mi-text);
  cursor: pointer;
}

.mi-account__gomb:hover {
  border-color: var(--mi-accent);
}

.mi-account__nev {
  font-size: 14px;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  min-width: 160px;
  max-width: calc(100vw - 24px);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.mi-account:hover .mi-account__menu,
.mi-account:focus-within .mi-account__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Az egérrel/érintéssel a gomb és a menü között ne legyen "rés". */
.mi-account::after {
  content: '';
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  height: 8px;
}

.mi-account__menu a {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--mi-text);
}

.mi-account__menu a:hover {
  background: var(--mi-bg);
}

/* ---------- Fejléc: értesítések (csengő) ---------- */
.mi-ertesitesek {
  position: relative;
}

.mi-ertesitesek__gomb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--mi-border);
  border-radius: 50%;
  color: var(--mi-text);
  cursor: pointer;
}

.mi-ertesitesek__gomb:hover {
  border-color: var(--mi-accent);
  color: var(--mi-accent);
}

.mi-ertesitesek__gomb .mi-ikon {
  width: 18px;
  height: 18px;
  margin-right: 0;
}

.mi-ertesitesek__pont {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d63638;
  border: 2px solid var(--mi-bg);
}

.mi-ertesitesek__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 320px;
  max-width: 85vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  padding: 14px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.mi-ertesitesek:hover .mi-ertesitesek__panel,
.mi-ertesitesek:focus-within .mi-ertesitesek__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Az egérrel/érintéssel a gomb és a panel között ne legyen "rés". */
.mi-ertesitesek::after {
  content: '';
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  height: 8px;
}

.mi-ertesitesek__panel h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.mi-ertesitesek__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mi-ertesites-kartya {
  position: relative;
  padding: 10px 32px 10px 12px;
  border-radius: 8px;
  border-left: 3px solid var(--mi-border);
  background: var(--mi-bg);
}

.mi-ertesites-kartya.is-kattinthato {
  cursor: pointer;
  transition: background 0.2s ease;
}

.mi-ertesites-kartya.is-kattinthato:hover {
  background: var(--mi-bg-elevated);
}

.mi-ertesites-kartya p {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--mi-text);
}

.mi-ertesites-kartya__torles {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--mi-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.mi-ertesites-kartya__torles .mi-ikon {
  width: 12px;
  height: 12px;
  margin-right: 0;
}

.mi-ertesites-kartya__torles:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mi-text);
}

.mi-ertesites-kartya__datum {
  font-size: 11px;
  color: var(--mi-text-muted);
}

.mi-ertesites-kartya--kiemeles_elfogadva,
.mi-ertesites-kartya--uj_jovahagyva {
  border-left-color: #3fa34d;
}

.mi-ertesites-kartya--kiemeles_elutasitva,
.mi-ertesites-kartya--uj_elutasitva {
  border-left-color: #d63638;
}

.mi-ertesites-kartya.is-uj {
  background: var(--mi-bg-elevated);
  box-shadow: 0 0 0 1px var(--mi-accent) inset;
}

/* ---------- Hero gyorskeresés cimkék ---------- */
.mi-gyorskereses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.mi-hero__cta {
  margin-top: 28px;
}

.mi-badge {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--mi-text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mi-badge:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

/* ---------- Szűrő oldalsáv - finomítás ---------- */
.mi-filter-sidebar .mi-fieldset {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* A megye-checkboxok grid-gapje a checkbox-elemek saját (7px) paddingjára
   rakódott rá, így ott nagyobb lett a sortávolság, mint a kategória-listánál
   vagy a fenti fieldset-eknél - 0-ra állítva mind a három szűrő-csoportban
   ugyanannyi (kb. 14px) a checkboxok/radio-k közti távolság. */
.mi-filter-sidebar .mi-megye-grid--szuro {
  gap: 0;
}

.mi-filter-sidebar label {
  font-size: 14px;
}

.mi-filter-sidebar .mi-checkbox,
.mi-filter-sidebar .mi-radio {
  font-size: 14px;
  color: var(--mi-text);
}

.mi-vizualisan-rejtett {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.mi-kereso-mezo {
  position: relative;
  display: block;
}

.mi-kereso-mezo__ikon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--mi-text-muted);
  pointer-events: none;
}

.mi-kereso-mezo input[type="text"] {
  padding-left: 40px !important;
}

.mi-marketplace__eredmenyek {
  transition: opacity 0.2s ease;
}

.mi-marketplace__eredmenyek.is-toltodik {
  opacity: 0.5;
}

/* ---------- Marketplace: eredmény-eszköztár (találatszám + rendezés) ---------- */
.mi-marketplace__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mi-marketplace__talalat {
  color: var(--mi-text-muted);
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}

.mi-marketplace__talalat-sor {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.mi-kereso-mezo--marketplace input[type="text"] {
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--mi-text);
  font-size: 14px;
  font-family: inherit;
  width: 240px;
  max-width: 100%;
}

@media (max-width: 768px) {
  .mi-marketplace__talalat-sor {
    width: 100%;
    justify-content: space-between;
  }

  .mi-kereso-mezo--marketplace input[type="text"] {
    width: 160px;
  }
}

.mi-rendezes {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--mi-text-muted);
  flex-direction: row !important;
}

/* Egyéni "Rendezés" legördülő - a natív <select> nyitott listáját nem
   lehet a weboldal stílusához igazítani, ezért ez egy gomb + saját panel;
   a valódi <select> rejtve marad, csak a form-beküldéshez (FormData) kell. */
.mi-rendezes-egyeni {
  position: relative;
}

.mi-rendezes-egyeni__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 8px 32px 8px 12px;
  color: var(--mi-text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease;
}

.mi-rendezes-egyeni__trigger:hover {
  border-color: var(--mi-accent);
}

.mi-rendezes-egyeni__trigger::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--mi-text-muted);
  border-bottom: 2px solid var(--mi-text-muted);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}

.mi-rendezes-egyeni.is-open .mi-rendezes-egyeni__trigger::after {
  transform: translateY(-35%) rotate(-135deg);
}

.mi-rendezes-egyeni__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  min-width: 220px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 6px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.mi-rendezes-egyeni__panel:not([hidden]) {
  animation: mi-fade-up 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mi-rendezes-egyeni__opcio {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--mi-text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.mi-rendezes-egyeni__opcio:hover {
  background: var(--mi-bg);
}

.mi-rendezes-egyeni__opcio.is-kivalasztva {
  color: var(--mi-accent);
  font-weight: 600;
}

/* ---------- Marketplace: kategória + helyszín (fontos szűrők) ---------- */
.mi-fontos-szurok-orzo {
  display: block;
  height: 1px;
}

.mi-filter-sidebar__fontos {
  margin-bottom: 18px;
}

.mi-fontos-szurok-terkitolto[hidden] {
  display: none;
}

.mi-multiselect__desktop-cim {
  display: none;
}

/* ---------- Marketplace: "további szűrők" (elválasztó vonal + felirat) ---------- */
.mi-filter-sidebar__tovabbi {
  border-top: 1px solid var(--mi-border);
  padding-top: 14px;
}

.mi-filter-sidebar__tovabbi-nyito {
  list-style: none;
  cursor: pointer;
  color: var(--mi-text-muted);
  font-size: 13px;
  font-weight: 600;
}

.mi-filter-sidebar__tovabbi-nyito::-webkit-details-marker {
  display: none;
}

.mi-filter-sidebar__tovabbi-nyito::before {
  content: "+";
  display: inline-block;
  width: 14px;
}

.mi-filter-sidebar__tovabbi[open] .mi-filter-sidebar__tovabbi-nyito::before {
  content: "−";
}

.mi-filter-sidebar__tovabbi-nyito:hover {
  color: var(--mi-text);
}

.mi-filter-sidebar__tovabbi-tartalom {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 16px;
}

.mi-ikon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: -3px;
  color: var(--mi-accent);
  margin-right: 6px;
}

@media (max-width: 768px) {
  .mi-fieldset-row,
  .mi-megye-grid,
  .mi-stat-sav {
    grid-template-columns: 1fr;
  }

  .mi-szolgaltatas-profil__fejresz {
    grid-template-columns: 1fr;
  }

  .mi-galeria-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .mi-filter-sidebar {
    position: static;
  }

  /* A .mi-marketplace__layout mobil felülbírálása korábban (a fájl elején,
     a .mi-marketplace__layout alap - két oszlopos - szabálya ELŐTT) volt
     definiálva, így az azonos erősségű, de KÉSŐBBI alap szabály felülírta -
     emiatt maradt mobilon is a 280px+1fr két oszlop, ami miatt a
     szűrő és a listázás egymás mellé szorult, és csak vízszintesen
     görgetve lehetett látni a teljes kártyát. Itt, a forrásban később
     ismételve érvényesül helyesen. */
  .mi-marketplace__layout {
    grid-template-columns: 1fr;
  }

  /* Mobilon nincs hover, ezért a kártyák kép-váltó nyilai eddig sosem
     látszottak - halványan, érintés nélkül is látszódjanak, hogy gyorsan
     át lehessen lapozni a képeket. */
  .mi-card-nyil {
    opacity: 0.55;
  }

  .mi-card-nyil:active {
    opacity: 1;
  }

  /* A további-szolgáltatások carousel vízszintesen görgethető volt minden
     nézeten - mobilon ehelyett 1 oszlopos, lefelé görgethető listává
     alakítjuk, hogy sehol ne kelljen oldalra görgetni. */
  .mi-carousel__savok {
    flex-direction: column;
    overflow-x: visible;
    scroll-snap-type: none;
  }

  .mi-carousel__elem {
    flex: none;
    width: 100%;
  }

  .mi-carousel__nyil {
    display: none;
  }

  .mi-szolgaltato-bemutatkozas__inner {
    flex-direction: column;
  }

  .mi-carousel__nyil--elozo {
    left: 0;
  }

  .mi-carousel__nyil--kovetkezo {
    right: 0;
  }
}

/* ---------- Animációk ---------- */
@keyframes mi-fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    /* "translateY(0)" vizuálisan azonos a "none"-nal, de technikailag még
       mindig transform-nak számít, ami "position: fixed" elemeknek (pl. a
       modal ablaknak) a viewport helyett ezt az elemet tenné meg viszonyítási
       kerete - emiatt "ragadt be" korábban a fiók törlése popup a láthatatlan
       részre. "none"-nal ez a mellékhatás megszűnik. */
    transform: none;
  }
}

@keyframes mi-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mi-scale-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.mi-anim-fadeup {
  animation: mi-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mi-anim-fadein {
  animation: mi-fade-in 0.6s ease both;
}

.mi-anim-delay-1 {
  animation-delay: 0.08s;
}

.mi-anim-delay-2 {
  animation-delay: 0.16s;
}

.mi-anim-delay-3 {
  animation-delay: 0.24s;
}

.mi-anim-delay-4 {
  animation-delay: 0.32s;
}

/* Görgetésre bekúszó szekciók - a JS teszi hozzá az is-revealed osztályt,
   amint az elem a képernyőre ér (initScrollReveal, main.js). */
.mi-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.mi-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Rácsban lévő elemek egymás után, kis csúsztatással jelenjenek meg. */
.mi-reveal-grid > *:nth-child(1) { transition-delay: 0s; }
.mi-reveal-grid > *:nth-child(2) { transition-delay: 0.06s; }
.mi-reveal-grid > *:nth-child(3) { transition-delay: 0.12s; }
.mi-reveal-grid > *:nth-child(4) { transition-delay: 0.18s; }
.mi-reveal-grid > *:nth-child(5) { transition-delay: 0.24s; }
.mi-reveal-grid > *:nth-child(6) { transition-delay: 0.3s; }
.mi-reveal-grid > *:nth-child(n+7) { transition-delay: 0.36s; }

/* Ugyanez, de azonnal lejátszódó animáció (pl. AJAX-szal frissülő
   marketplace-találatok) - nincs szükség görgetés-figyelésre. */
.mi-anim-grid > *:nth-child(1) { animation-delay: 0s; }
.mi-anim-grid > *:nth-child(2) { animation-delay: 0.05s; }
.mi-anim-grid > *:nth-child(3) { animation-delay: 0.1s; }
.mi-anim-grid > *:nth-child(4) { animation-delay: 0.15s; }
.mi-anim-grid > *:nth-child(5) { animation-delay: 0.2s; }
.mi-anim-grid > *:nth-child(6) { animation-delay: 0.25s; }
.mi-anim-grid > *:nth-child(n+7) { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .mi-anim-fadeup,
  .mi-anim-fadein,
  .mi-reveal,
  .mi-lightbox:not([hidden]),
  .mi-lightbox:not([hidden]) .mi-lightbox__kep,
  .mi-multiselect__panel:not([hidden]) {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .mi-carousel__savok {
    scroll-behavior: auto;
  }
}

/* ---------- Kapcsolat oldal ---------- */
.mi-kapcsolat__fejlec {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}

.mi-kapcsolat__fejlec p {
  color: var(--mi-text-muted);
  font-size: 16px;
}

.mi-kapcsolat__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

.mi-kapcsolat__info {
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 28px;
}

.mi-kapcsolat__info .mi-adatlista {
  margin: 0;
}

.mi-kapcsolat__info .mi-adatlista li {
  font-size: 16px;
}

.mi-kapcsolat__info .mi-adatlista a {
  color: var(--mi-text);
}

.mi-kapcsolat__info .mi-adatlista a:hover {
  color: var(--mi-accent);
}

.mi-kapcsolat__form-kartya {
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 28px;
}

.mi-kapcsolat__form-kartya .mi-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 768px) {
  .mi-kapcsolat__grid {
    grid-template-columns: 1fr;
  }

  .mi-filter-sidebar__fontos {
    display: flex;
    gap: 10px;
  }

  .mi-filter-sidebar__fontos .mi-multiselect {
    flex: 1;
    min-width: 0;
  }

  .mi-filter-sidebar__fontos .mi-multiselect__trigger {
    min-height: 42px;
    padding: 6px 30px 6px 12px;
    font-size: 13px;
  }

  .mi-filter-sidebar__fontos .mi-multiselect__chip {
    font-size: 10px;
    padding: 2px 5px 2px 8px;
  }

  .mi-filter-sidebar__fontos .mi-multiselect__chip-szoveg {
    max-width: 22vw;
  }

  /* A lenyíló panel mobilon szélesebb lehet, mint maga a gomb (ami csak
     fél szélességű a 2-oszlopos elrendezésben), hogy a hosszabb kategória-
     és megyeneveknek ne kelljen a panelen belül tovább görgetni. Balra/jobbra
     igazítva, hogy a szélesebb panel ne lógjon ki a képernyőről. */
  .mi-filter-sidebar__fontos .mi-multiselect__panel {
    width: 86vw;
    max-width: 360px;
    max-height: 60vh;
  }

  .mi-filter-sidebar__fontos .mi-multiselect:first-child .mi-multiselect__panel {
    left: 0;
    right: auto;
  }

  .mi-filter-sidebar__fontos .mi-multiselect:last-child .mi-multiselect__panel {
    left: auto;
    right: 0;
  }

  .mi-filter-sidebar__fontos.is-fixed {
    position: fixed;
    top: var(--mi-fejlec-magassag, 70px);
    left: 0;
    right: 0;
    z-index: 35;
    margin-bottom: 0;
    padding: 12px 24px;
    background: var(--mi-bg-elevated);
    border-bottom: 1px solid var(--mi-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    animation: mi-fade-in 0.2s ease both;
  }

  .mi-marketplace__toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .mi-rendezes {
    width: 100%;
    justify-content: space-between;
  }

  .mi-rendezes-egyeni {
    flex: 1;
  }

  .mi-rendezes-egyeni__trigger {
    width: 100%;
    justify-content: space-between;
  }

  /* ---------- Szolgáltatásaim lista mobilon: 1 oszlopos, listing-kártya szerű ---------- */
  .mi-fiokom-kartya {
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  .mi-fiokom-kartya__kep {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 0;
  }

  .mi-fiokom-kartya__adat {
    padding: 14px 16px 16px;
  }

  .mi-toggle-switch {
    top: 10px;
    right: 10px;
    background: rgba(15, 15, 22, 0.6);
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    color: #ffffff;
  }
}

/* ---------- Kiemelés vásárlása ---------- */
.mi-kiemeles-page .mi-kiemeles-kethasabos {
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
}

.mi-laptop-mockup {
  max-width: 100%;
}

.mi-kiemeles-kethasabos {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
  margin: 20px 0;
}

@media (max-width: 760px) {
  .mi-kiemeles-kethasabos {
    grid-template-columns: 1fr;
  }
}

.mi-kiemeles-kethasabos__bal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* A makett a jobb hasábban marad a helyén görgetéskor is, amíg a bal
   hasáb (csomagok + számlázási adatok) hosszabb nála. */
.mi-kiemeles-kethasabos__jobb {
  position: sticky;
  top: 100px;
}

@media (max-width: 760px) {
  .mi-kiemeles-kethasabos__jobb {
    position: static;
  }
}

/* ---------- Gyors ajánlatkérés ---------- */
.mi-ajanlatkeres-kethasabos {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 40px;
  align-items: start;
  margin: 24px 0;
}

@media (max-width: 760px) {
  .mi-ajanlatkeres-kethasabos {
    grid-template-columns: 1fr;
  }
}

/* A bal hasáb egy kicsit "kitöltés alatt lévő dokumentum" hangulatot kapjon
   - finoman vonalazott háttér, mint egy papírlap, enyhén megemelt kártyán.
   A jobb oldali előnézeti doboz emiatt szándékosan kisebb (0.65fr), hogy a
   bal oldal kényelmesen kiférjen. */
.mi-ajanlatkeres-kethasabos__bal {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent, transparent 51px, rgba(255, 255, 255, 0.035) 52px),
    linear-gradient(135deg, var(--mi-bg-elevated), var(--mi-bg));
  border: 1px solid var(--mi-border);
  border-radius: 20px;
  padding: 28px clamp(18px, 4vw, 36px) 32px;
  box-shadow: 0 26px 55px rgba(0, 0, 0, 0.35);
}

.mi-ajanlatkeres-jelzo {
  display: inline-flex;
  margin-bottom: 18px;
  cursor: default;
}

.mi-ajanlatkeres-fiok-hint {
  margin: 0 0 18px;
}

/* ---------- Saját dátum+idő választó (nem natív naptár) ---------- */
.mi-datumido {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mi-datumido__label {
  font-size: 14px;
  color: var(--mi-text-muted);
}

.mi-datumido__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  color: var(--mi-text);
  font-size: 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.mi-datumido__trigger:hover {
  border-color: var(--mi-accent);
}

.mi-datumido__trigger .mi-ikon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--mi-text-muted);
}

[data-mi-datumido-szoveg].is-ures {
  color: var(--mi-text-muted);
}

.mi-datumido__panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 320px;
  max-width: 90vw;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 14px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35);
}

.mi-datumido__panel:not([hidden]) {
  animation: mi-fade-up 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mi-datumido__naptar-fejlec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.mi-datumido__honap-nyil {
  width: 28px;
  height: 28px;
  border: 1px solid var(--mi-border);
  border-radius: 50%;
  background: transparent;
  color: var(--mi-text);
  cursor: pointer;
  font-size: 15px;
}

.mi-datumido__honap-nyil:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mi-datumido__hetnapok {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  color: var(--mi-text-muted);
  margin-bottom: 4px;
}

.mi-datumido__napok {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.mi-datumido__nap {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--mi-text);
  font-size: 13px;
  cursor: pointer;
}

.mi-datumido__nap:hover {
  background: rgba(255, 255, 255, 0.08);
}

.mi-datumido__nap.is-kivalasztva {
  background: var(--mi-accent);
  color: #ffffff;
  font-weight: 600;
}

.mi-datumido__nap--ures {
  cursor: default;
}

.mi-datumido__nap--ures:hover {
  background: transparent;
}

.mi-datumido__ido-sor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 10px;
}

.mi-datumido__stepper {
  width: 112px;
  flex-shrink: 0;
}

.mi-datumido__stepper input[type="number"] {
  padding: 0 2px;
  font-size: 15px;
  font-weight: 600;
  color: var(--mi-text);
}

.mi-datumido__ido-elvalaszto {
  color: var(--mi-text-muted);
  font-weight: 700;
}

.mi-datumido__kesz {
  width: 100%;
}

/* ---------- Ajánlatkéréseim (szervező saját listája) ---------- */
.mi-ajanlatkeres-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mi-ajanlatkeres-kartya {
  position: relative;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 20px 56px 20px 24px;
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 24px;
  align-items: start;
}

.mi-ajanlatkeres-kartya__torles {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--mi-border);
  border-radius: 50%;
  background: transparent;
  color: var(--mi-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mi-ajanlatkeres-kartya__torles:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mi-text);
}

.mi-ajanlatkeres-kartya__torles .mi-ikon {
  width: 15px;
  height: 15px;
  margin-right: 0;
}

@media (max-width: 700px) {
  .mi-ajanlatkeres-kartya {
    grid-template-columns: 1fr;
  }
}

.mi-ajanlatkeres-kartya__cimke {
  font-size: 12px;
  color: var(--mi-text-muted);
}

.mi-ajanlatkeres-kartya__elonezet {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mi-ajanlatkeres-kartya__elonezet .mi-ajanlatkeres-kartya__cimke {
  display: block;
}

.mi-ajanlatkeres-kartya__elonezet--ures {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 1px dashed var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 20px;
  text-align: center;
  color: var(--mi-text-muted);
  font-size: 13px;
}

.mi-ajanlatkeres-kartya__adatok h3 {
  margin: 0 0 10px;
  font-size: 17px;
}

.mi-ajanlatkeres-kartya__megjegyzes {
  color: var(--mi-text-muted);
  font-size: 14px;
  margin: 10px 0 0;
}

.mi-ajanlatkeres-kartya__datum {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--mi-text-muted);
}

/* ---------- Bejövő ajánlatkérések (szolgáltatóknak) ---------- */
.mi-bejovo-ajanlatkeres-lista {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mi-bejovo-ajanlatkeres-kartya {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent, transparent 43px, rgba(255, 255, 255, 0.035) 44px),
    linear-gradient(135deg, var(--mi-bg-elevated), var(--mi-bg));
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 24px 56px 28px clamp(18px, 4vw, 32px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  scroll-margin-top: calc(var(--mi-fejlec-magassag) + 20px);
  display: grid;
  grid-template-columns: 7fr 3fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 700px) {
  .mi-bejovo-ajanlatkeres-kartya {
    grid-template-columns: 1fr;
  }
}

.mi-bejovo-ajanlatkeres-kartya__cimke {
  font-size: 12px;
  color: var(--mi-text-muted);
}

.mi-bejovo-ajanlatkeres-kartya__elonezet {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mi-bejovo-ajanlatkeres-kartya__elonezet--ures {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border: 1px dashed var(--mi-border);
  border-radius: var(--mi-radius);
  padding: 20px;
  text-align: center;
  color: var(--mi-text-muted);
  font-size: 13px;
}

.mi-bejovo-ajanlatkeres-kartya__torles {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--mi-border);
  border-radius: 50%;
  background: transparent;
  color: var(--mi-text-muted);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mi-bejovo-ajanlatkeres-kartya__torles:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--mi-text);
}

.mi-bejovo-ajanlatkeres-kartya__torles .mi-ikon {
  width: 15px;
  height: 15px;
  margin-right: 0;
}

.mi-bejovo-ajanlatkeres-kartya__rendezveny {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--mi-border);
  font-size: 20px;
}

.mi-bejovo-ajanlatkeres-kartya__adatok {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin: 0;
}

@media (max-width: 640px) {
  .mi-bejovo-ajanlatkeres-kartya__adatok {
    grid-template-columns: 1fr;
  }
}

.mi-bejovo-ajanlatkeres-kartya__mezo {
  min-width: 0;
}

.mi-bejovo-ajanlatkeres-kartya__mezo dt {
  font-size: 12px;
  color: var(--mi-text-muted);
  margin-bottom: 2px;
}

.mi-bejovo-ajanlatkeres-kartya__mezo dd {
  margin: 0;
  font-size: 15px;
  overflow-wrap: break-word;
}

.mi-bejovo-ajanlatkeres-kartya__mezo dd a {
  color: var(--mi-text);
}

.mi-bejovo-ajanlatkeres-kartya__mezo--teljes {
  margin-top: 14px;
}

.mi-bejovo-ajanlatkeres-kartya__datum {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  color: var(--mi-text-muted);
}

.mi-bejovo-ajanlatkeres-kartya__gombsor {
  margin-top: 14px;
}

.mi-ajanlatkeres-kethasabos__elonezet {
  position: sticky;
  top: 100px;
}

@media (max-width: 760px) {
  .mi-ajanlatkeres-kethasabos__elonezet {
    position: static;
  }
}

.mi-ajanlatkeres-kethasabos__elonezet .mi-section-title {
  margin-top: 0;
  font-size: 18px;
}

.mi-ajanlatkeres__gombsor {
  display: flex;
  gap: 12px;
}

/* A csomagválasztó a bal hasábban egymás alatti, sor-jellegű kártyaként
   fér el jól, nem egymás mellett, mint korábban a modal teljes
   szélességében. */
.mi-kiemeles-kethasabos__bal .mi-kiemeles-csomagok {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0;
}

.mi-kiemeles-kethasabos__bal .mi-kiemeles-csomag {
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 14px 18px;
}

.mi-kiemeles-kethasabos__bal .mi-kiemeles-csomag input[type="radio"] {
  position: static;
  order: 1;
  flex-shrink: 0;
}

.mi-kiemeles-kethasabos__bal .mi-kiemeles-csomag__nev {
  order: 2;
  flex: 1;
  margin-top: 0;
  font-size: 14px;
}

.mi-kiemeles-kethasabos__bal .mi-kiemeles-csomag__ar {
  order: 3;
  font-size: 16px;
  white-space: nowrap;
}

.mi-laptop-mockup__kepernyo {
  background: #0a0a10;
  border: 1px solid var(--mi-border);
  border-radius: 10px 10px 4px 4px;
  padding: 10px;
}

.mi-laptop-mockup__sor {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

.mi-laptop-mockup__pont {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mi-border);
}

.mi-laptop-mockup__cimsor {
  margin-left: 8px;
  background: var(--mi-bg-elevated);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10px;
  color: var(--mi-text-muted);
}

.mi-laptop-mockup__gorgeto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.mi-laptop-mockup__kartya {
  position: relative;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: 8px;
  overflow: hidden;
  min-height: 96px;
}

.mi-laptop-mockup__kartya--sajat {
  border-color: #f59e0b;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35);
}

.mi-laptop-mockup__kartya--placeholder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
}

.mi-laptop-mockup__wire-kep {
  height: 122px;
  border-radius: 4px;
  background: var(--mi-border);
  opacity: 0.6;
}

.mi-laptop-mockup__wire-sor {
  height: 6px;
  border-radius: 3px;
  background: var(--mi-border);
  opacity: 0.6;
}

.mi-laptop-mockup__wire-sor--cim {
  width: 75%;
}

.mi-laptop-mockup__wire-sor--alcim {
  width: 45%;
}

.mi-laptop-mockup__kartya-kep {
  height: 122px;
  background-size: cover;
  background-position: center;
  background-color: var(--mi-border);
}

.mi-laptop-mockup__jelveny {
  position: absolute;
  top: 4px;
  left: 4px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6);
  color: #ffffff;
  font-size: 7px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
}

.mi-laptop-mockup__kartya-szoveg {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mi-laptop-mockup__kartya-szoveg strong {
  font-size: 9px;
  color: var(--mi-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-laptop-mockup__kartya-szoveg span {
  font-size: 7px;
  color: var(--mi-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mi-laptop-mockup__talp {
  height: 10px;
  margin: 0 -14px;
  background: linear-gradient(180deg, var(--mi-border), var(--mi-bg));
  border-radius: 0 0 10px 10px;
}

.mi-kiemeles-csomagok {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 24px 0;
}

.mi-kiemeles-csomag {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 14px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mi-kiemeles-csomag:hover {
  border-color: var(--mi-accent);
}

.mi-kiemeles-csomag input[type="radio"] {
  position: absolute;
  top: 12px;
  right: 12px;
  accent-color: var(--mi-accent);
}

.mi-kiemeles-csomag__nev {
  font-weight: 600;
  font-size: 14px;
  margin-top: 6px;
}

.mi-kiemeles-csomag__ar {
  font-size: 20px;
  font-weight: 700;
  color: var(--mi-text);
}

.mi-kiemeles-csomag.is-kivalasztva {
  border-color: var(--mi-accent);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.4);
}

.mi-kiemeles-szamlazas {
  margin: 0;
  padding: 18px;
  background: var(--mi-bg-elevated);
  border: 1px solid var(--mi-border);
  border-radius: var(--mi-radius);
}

.mi-kiemeles-szamlazas h3 {
  margin-top: 0;
  font-size: 16px;
}

/* A "számlázási adatok" lista alatt közvetlenül következő jelölőnégyzet
   túl közel volt a felirathoz, mert a ...--kompakt módosító nem hagyott
   alsó margót a listának. */
.mi-kiemeles-szamlazas > .mi-checkbox {
  margin-top: 16px;
}

.mi-kiemeles-csomag__idotartam {
  color: #f59e0b;
}

.mi-kiemeles-eltero-mezok {
  display: none;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--mi-border);
}

/* Ugyanaz a hiba, mint a kapcsolat-doboznál: a class önmagában felülírta
   volna a [hidden] attribútumot, így a mezők a jelölőnégyzet nélkül is
   mindig látszottak volna. */
.mi-kiemeles-eltero-mezok:not([hidden]) {
  display: flex;
}

.mi-kiemeles-elfogadas {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 14px;
  color: var(--mi-text-muted);
  margin-bottom: 20px;
}

.mi-kiemeles-siker {
  text-align: center;
  padding: 20px 0 8px;
}

.mi-kiemeles-siker__ikon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mi-kiemeles-siker__ikon svg {
  width: 36px;
  height: 36px;
}

.mi-kiemeles-siker p {
  color: var(--mi-text-muted);
  max-width: 420px;
  margin: 0 auto 24px;
}

@media (max-width: 600px) {
  .mi-kiemeles-csomagok {
    flex-direction: column;
    align-items: stretch;
  }
}