:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --text: #111111;
  --muted: #6b7280;      /* slate-500 */
  --line: #e5e7eb;       /* gray-200 */
  --soft: #f6f7f8;       /* light section bg */
  --shadow: 0 10px 30px rgba(0,0,0,.06);
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
}

html,body{height:100%;}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

a{color: inherit;}
a:hover{color: #000;}
.text-muted2{color: var(--muted)!important;}
.border-soft{border:1px solid var(--line)!important;}

/* Navbar */
.navbar{
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 1100;
}
.brand-mark{
  width: 38px; height: 38px;
  border-radius: 12px;
  background: #111;
  box-shadow: var(--shadow-sm);
}
.brand-title{letter-spacing:.2px; font-weight: 800;}

/* Szakág oldal leírás (tradeIntro) – modernebb stílus */
#tradeIntro{
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Ensure nav link buttons show outline styling when used as buttons */
.navbar .nav-link.btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .6rem;
  border-radius:.375rem;
  border:1px solid transparent;
}

/* PRO nav specific tweaks: smaller padding and a small gap to left neighbor */
.navbar-nav > #proNavItem { margin-left: .45rem; }
.navbar-nav > #proNavItem .btn-ghost.btn-sm.dropdown-toggle {
  padding: 3px 6px;
}

/* Ensure PRO button uses site's typography, not Bootstrap base */
.navbar-nav > #proNavItem .btn-ghost.btn-sm.dropdown-toggle{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: .85rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
}

/* Keep PRO nav item vertically aligned with neighboring buttons when logged in */
.navbar-nav > #proNavItem{
  display: flex;
  align-items: center;
}
.navbar-nav > #proNavItem .dropdown{
  display: inline-flex;
  align-items: center;
}
.navbar-nav > #proNavItem .btn-ghost.btn-sm.dropdown-toggle{
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  margin-top: 0 !important;
  line-height: 1 !important;
}

/* When PRO user is logged in, style the PRO nav button similar to /pro landing */
.navbar-nav > #proNavItem.pro-logged .pro-nav-btn{
  padding: 3px 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: linear-gradient(180deg,#ffffff,#f7f7f8) !important;
  color: #111 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 6px rgba(16,24,40,0.04) !important;
}
.navbar-nav > #proNavItem.pro-logged .pro-nav-btn img{
  width: 28px; height:28px; border-radius:50%; object-fit:cover;
}
.navbar-nav > #proNavItem.pro-logged + .nav-item,
.navbar-nav > .nav-item + #proNavItem.pro-logged{
  margin-left: .5rem !important;
}
.navbar .nav-link.btn.btn-outline-secondary{
  background: transparent;
  color: var(--text);
  border: 1px solid black;
  border-radius: 3rem;
}
.navbar .nav-link.btn.btn-outline-secondary:hover{
  background: #000;
  color: #fff;
}

/* Helyszín beállítás / mentés modál – kompakt, modern megjelenés */
.mdj-location-modal{
  max-width: 420px;
}
.mdj-location-modal__content{
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 40px rgba(15,23,42,.18);
}
.mdj-location-modal__content .modal-header{
  padding-top: .55rem;
  padding-bottom: .45rem;
  background-color: #f8fafc;
}
.mdj-location-modal__title{
  font-size: 1.02rem;
  font-weight: 700;
}
.mdj-location-modal__intro{
  font-size: .9rem;
  margin-bottom: 0;
}
.mdj-location-modal__input{
  border-radius: 999px;
  padding-inline: 14px;
}
.mdj-location-modal__footer{
  padding-top: .5rem;
  padding-bottom: .7rem;
}
.mdj-location-modal__close{
  border-radius: 999px;
  padding-inline: 16px;
  font-weight: 600;
  border-color: rgba(15,23,42,.16);
  background-color: #ffffff;
  color: #0f172a;
}
.mdj-location-modal__close:hover{
  background-color: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}
.mdj_sitehdr_v1__btnLocation:not(.mdj_sitehdr_v1__btnLocation--active) .mdj_sitehdr_v1__locationText{
  display: none;
}
.mdj-location-icon--inactive{
  filter: grayscale(.4);
  opacity: .7;
}
.mdj-location-icon--active{
  filter: none;
  opacity: 1;
}
.mdj-location-modal--secondary .mdj-location-modal__content{
  box-shadow: 0 14px 32px rgba(15,23,42,.16);
}

/* Globális toast értesítés (pl. helyszín mentve) */
.mdj__wagecard__v1__toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(10,16,28,.92);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(232,238,252,.92);
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  display:none;
  z-index: 2000;
  font-size: 13px;
}
.mdj__wagecard__v1__toastIsShow{
  display:block;
  animation: mdj__wagecard__v1__fade .14s ease;
}
@keyframes mdj__wagecard__v1__fade{
  from{ opacity:.0; transform: translateX(-50%) translateY(6px); }
  to{ opacity:1; transform: translateX(-50%) translateY(0); }
}

/* PRO account dropdown — match Árajánlat készítő page styles */
/* Applies to older nav (#proNavItem.pro-logged) and modern header (#probejelentkezve) */
.pro-logged .dropdown-menu,
#probejelentkezve .dropdown-menu {
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,.15);
  border: 1px solid rgba(15,23,42,.06);
  padding: 6px;
  background: rgba(255,255,255,.98);
}

.pro-logged .dropdown-menu .dropdown-item,
#probejelentkezve .dropdown-menu .dropdown-item{
  border-radius: 10px;
  font-size: 0.84rem;
  padding: 7px 10px;
  font-weight: 600;
  color: rgba(30,41,59,.92);
}

.pro-logged .dropdown-menu .dropdown-item:hover,
#probejelentkezve .dropdown-menu .dropdown-item:hover{
  background: rgba(31,59,134,.08);
  color: rgba(15,23,42,.98);
}


/* Small gap between header buttons */
.navbar .nav-link.btn + .nav-link.btn,
.navbar .ms-auto .btn + .btn{
  margin-left: .5rem;
}
/* Also handle buttons wrapped in list items: give space between neighboring nav-items containing buttons */
.navbar .nav-item + .nav-item > .nav-link.btn{
  margin-left: .5rem;
}

/* Hero */
.hero{padding: 56px 0 28px;}
.hero-card{
  /* The following styles are commented out for the homepage hero per request.
     If needed later, remove the comment markers to restore the visual style. */
  /*
  background: linear-gradient(180deg, #ffffff, #fbfbfb);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  */
}

/* =========================
   munkadijak.hu – HERO CREATIVE (WHITE)
   Namespaced: mdjHcHero*
   ========================= */

.mdjHcHero{
  background:#fff;
  padding: clamp(34px, 1vw, 86px) 0;
  position: relative;
  overflow: clip;
  margin-top:1px;
}

/* soft background shapes (subtle, “exciting” but clean) */
.mdjHcHero::before,
.mdjHcHero::after{
  content:"";
  position:absolute;
  inset:auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  filter: blur(32px);
  opacity: .22;
  pointer-events:none;
}
.mdjHcHero::before{
  top: -220px;
  left: -220px;
  background: radial-gradient(circle at 30% 30%, #38bdf8, transparent 60%),
              radial-gradient(circle at 70% 55%, #8b5cf6, transparent 62%);
}
.mdjHcHero::after{
  bottom: -240px;
  right: -240px;
  background: radial-gradient(circle at 30% 30%, #f59e0b, transparent 60%),
              radial-gradient(circle at 60% 60%, #38bdf8, transparent 62%);
}

.mdjHcHero__wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(22px, 4vw, 46px);
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 980px){
  .mdjHcHero__wrap{ grid-template-columns: 1fr; }
}

/* LEFT */
.mdjHcHero__left{
  min-width: 0;
}

.mdjHcHero__badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(2, 6, 23, .10);
  background: rgba(2, 6, 23, .03);
  color: rgba(2, 6, 23, .78);
  font-size: 13.5px;
  line-height: 1;
  margin-bottom: 14px;
}

.mdjHcHero__badgeDot{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #8b5cf6);
  box-shadow: 0 0 0 4px rgba(56,189,248,.14);
}

.mdjHcHero__h1{
  margin: 0 0 12px;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 860;
  color: #0b1220;
}

.mdjHcHero__grad{
  display:inline-block;
  background: linear-gradient(90deg, #0ea5e9, #8b5cf6, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

.mdjHcHero__grad::after{
  content:"";
  position:absolute;
  left: 2px;
  right: 2px;
  bottom: -6px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(14,165,233,.18), rgba(139,92,246,.18), rgba(245,158,11,.18));
  transform: skewX(-12deg);
  z-index: -1;
}

.mdjHcHero__h1Sub{
  display:block;
  margin-top: 10px;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 650;
  color: rgba(2,6,23,.66);
  letter-spacing: -0.01em;
}

.mdjHcHero__lead{
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.55;
  color: rgba(2,6,23,.72);
  max-width: 70ch;
}

/* Search block */
.mdjHcHero__searchBlock{
  margin: 18px 0 18px;
}

.mdjHcHero__search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid rgba(2, 6, 23, .12);
  box-shadow: 0 16px 40px rgba(2,6,23,.08);
}

.mdjHcHero__searchIcon{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(139,92,246,.10));
  border: 1px solid rgba(2,6,23,.08);
  color: rgba(2,6,23,.70);
  flex: 0 0 auto;
}

.mdjHcHero__input{
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-size: 16px;
  padding: 10px 6px;
  color: rgba(2,6,23,.86);
}
.mdjHcHero__input::placeholder{ color: rgba(2,6,23,.45); }

.mdjHcHero__kbd{
  flex: 0 0 auto;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(2,6,23,.10);
  color: rgba(2,6,23,.58);
  background: rgba(2,6,23,.03);
  user-select:none;
  white-space: nowrap;
}

.mdjHcHero__go{
  flex: 0 0 auto;
  border: 0;
  border-radius: 14px;
  padding: 11px 14px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
  box-shadow: 0 16px 34px rgba(14,165,233,.16);
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.mdjHcHero__goArrow{
  font-weight: 900;
  transform: translateY(-.5px);
}

.mdjHcHero__helperRow{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mdjHcHero__micro{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(2,6,23,.08);
  background: rgba(2,6,23,.02);
  color: rgba(2,6,23,.70);
  font-size: 13.5px;
}
.mdjHcHero__microIco{ transform: translateY(-.5px); }

/* CTA buttons */
.mdjHcHero__cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
}
.mdjHcHero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 820;
  letter-spacing: .01em;
  border: 1px solid transparent;
}
.mdjHcHero__btn--primary{
  color: #fff;
  background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
  box-shadow: 0 18px 38px rgba(139,92,246,.16);
}
.mdjHcHero__btn--soft{
  color: rgba(2,6,23,.86);
  background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(139,92,246,.08));
  border-color: rgba(2,6,23,.08);
}
.mdjHcHero__btn--ghost{
  color: rgba(2,6,23,.78);
  background: #fff;
  border-color: rgba(2,6,23,.14);
}

/* Chips */
.mdjHcHero__chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}
.mdjHcHero__chip{
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 750;
  color: rgba(2,6,23,.78);
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.mdjHcHero__chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2,6,23,.10);
}
.mdjHcHero__chipIco{ opacity: .9; }

/* Trust */
.mdjHcHero__trust{
  margin-top: 14px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mdjHcHero__trustItem{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(2,6,23,.08);
  color: rgba(2,6,23,.65);
  font-weight: 700;
  font-size: 13px;
}

/* RIGHT (Ad) */
.mdjHcHero__right{
  min-width: 0;
}

.mdjHcHero__adTop{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mdjHcHero__adLabel{
  display:flex;
  flex-direction:column;
  gap: 6px;
  min-width: 0;
}

.mdjHcHero__adPill{
  display:inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.12);
  color: rgba(124,45,18,.84);
  border: 1px solid rgba(245,158,11,.22);
  font-weight: 850;
  font-size: 12.5px;
}

.mdjHcHero__adHint{
  color: rgba(2,6,23,.55);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mdjHcHero__adNote{
  color: rgba(2,6,23,.45);
  font-size: 12.5px;
  white-space: nowrap;
}

.mdjHcHero__adSlot{
  border-radius: 18px;
  border: 1.5px dashed rgba(2,6,23,.20);
  background: linear-gradient(135deg, rgba(14,165,233,.06), rgba(139,92,246,.05));
  min-height: 1px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
}

.mdjHcHero__adInner{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  max-width: 420px;
}

.mdjHcHero__adIcon{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: #fff;
  border: 1px solid rgba(2,6,23,.10);
  box-shadow: 0 14px 28px rgba(2,6,23,.08);
  flex: 0 0 auto;
  font-size: 18px;
}

.mdjHcHero__adTitle{
  font-weight: 900;
  color: rgba(2,6,23,.78);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.mdjHcHero__adDesc{
  color: rgba(2,6,23,.62);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Optional mini promo */
.mdjHcHero__miniPromo{
  margin-top: 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  background: #fff;
  text-decoration:none;
  color: rgba(2,6,23,.86);
  position: relative;
  overflow:hidden;
  box-shadow: 0 16px 38px rgba(2,6,23,.08);
}
.mdjHcHero__miniGlow{
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 160px at 30% 20%, rgba(14,165,233,.18), transparent 60%),
              radial-gradient(420px 160px at 75% 65%, rgba(139,92,246,.14), transparent 60%);
  pointer-events:none;
}
.mdjHcHero__miniLeft{ position: relative; z-index: 1; min-width:0; }
.mdjHcHero__miniTitle{ font-weight: 900; letter-spacing: -0.01em; }
.mdjHcHero__miniSub{
  margin-top: 4px;
  color: rgba(2,6,23,.62);
  font-weight: 650;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mdjHcHero__miniCta{
  position: relative;
  z-index: 1;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(139,92,246,.12));
  border: 1px solid rgba(2,6,23,.08);
  white-space: nowrap;
}

/* Responsive tuning */
@media (max-width: 520px){
  .mdjHcHero__search{ flex-wrap: wrap; }
  .mdjHcHero__kbd{ display:none; }
  .mdjHcHero__go{ width: 100%; justify-content:center; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .mdjHcHero__chip{ transition:none; }
  .mdjHcHero__chip:hover{ transform:none; box-shadow:none; }
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .6rem;
  border:1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  font-size: .86rem;
  color: var(--muted);
}
.hero h1{font-weight:900; letter-spacing:-.02em;}

/* Search */
.search-wrap{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: .55rem;
}
.search-wrap .form-control{
  background: transparent;
  border: none;
  color: var(--text);
}
.search-wrap .form-control::placeholder{color: #9ca3af;}
.search-wrap .form-control:focus{box-shadow:none;}
.search-wrap .btn{border-radius: 12px;}

/* Kompakt, inline kereső a szakág oldalon */
.search-wrap.search-wrap-sm{
  padding: .18rem .45rem;
  border-radius: 999px;
}
.trade-inline-search .form-control-sm{
  border: none;
  background: transparent;
  padding-left: 0;
  font-size: .8rem;
  padding-top: .1rem;
  padding-bottom: .1rem;
  min-height: 28px;
}
.trade-inline-search .form-control-sm:focus{
  box-shadow: none;
}
.trade-inline-search .btn.btn-brand.btn-sm{
  border-radius: 999px;
  padding: .15rem .5rem;
  font-size: .8rem;
}

/* Keresőoldali rendezés select – modernebb, pill stílus */
.sort-select{
  border-radius: 999px;
  border-color: var(--line);
  background-color: #fff;
  padding-inline: 0.75rem 2.25rem;
  box-shadow: var(--shadow-sm);
  font-size: .86rem;
}
.sort-select:focus{
  border-color: rgba(30,91,255,.45);
  box-shadow: 0 0 0 1px rgba(30,91,255,.2);
}

/* Sections */
.section-soft{background: var(--soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);}

/* Kezdőlap "Szakágak" cím – projekt2 #projectTitle stílus alapján */
.section-soft h2.h4.mb-0{
  margin: 0;
  font-size: 24px;
  letter-spacing: .2px;
  line-height: 1.15;
  font-weight: 800;
}

/* Cards */
.card-soft{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
}
.card-soft .card-header{background: transparent; border-bottom: 1px solid var(--line);}

.kpi{
  border:1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.kpi:hover, .kpi:focus, .kpi:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 14px 34px rgba(0,0,0,0.08);
}

/* If .kpi is used as an anchor, avoid default underline and keep pointer */
a.kpi, a.kpi *{
  text-decoration: none !important;
}
a.kpi:hover, a.kpi:focus{
  text-decoration: none !important;
}

/* Ensure links used to wrap whole cards don't show underline */
.card a.text-reset, .card a.text-reset *{
  text-decoration: none !important;
}

.pill{
  border:1px solid var(--line);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: .35rem .6rem;
  font-size: .86rem;
  display:inline-flex;
  gap:.5rem;
  align-items:center;
}

.pill.icon-pill{ padding: .35rem .45rem; }
.pill.icon-pill svg{ width:18px; height:18px; display:block; color:inherit; }
.pill.icon-pill svg path, .pill.icon-pill svg rect, .pill.icon-pill svg circle{ stroke:currentColor; }
/* Ensure injected heroicons scale and inherit color */
.trade-icon{display:inline-flex;align-items:center;justify-content:center}
.trade-icon svg{width:18px;height:18px;display:block;color:inherit}

/* === Szakágak kártyák – projekt2 "pro" kártya stílus alapján === */
.trade-card-link{
  text-decoration: none !important;
  color: inherit;
  display: block;
  height: 100%;
}

.trade-card{
  border: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  border-radius: 16px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(20,24,36,.05);
  transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease;
  display:flex;
  gap: 12px;
  align-items: flex-start;
  height: 100%;
}

.trade-card:hover{
  border-color: rgba(30,91,255,.26);
  box-shadow: 0 14px 24px rgba(20,24,36,.07);
  transform: translateY(-1px);
}

.trade-avatar{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color:#fff;
  font-weight: 800;
  letter-spacing: .4px;
  flex: 0 0 auto;
  box-shadow: 0 10px 18px rgba(20,24,36,.10);
  position: relative;
  overflow:hidden;
  background: linear-gradient(135deg, #1e5bff, #0b3ad6);
}

.trade-avatar::after{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,.18), transparent 55%);
  transform: rotate(20deg);
}

.trade-main{
  min-width: 0;
  flex: 1;
}

.trade-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.trade-name{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .15px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

/* Szakág oldali munkadíj tétel kártyákon (trade-card--item)
   mindig teljes cím jelenjen meg, ne legyen ellipszisre vágva. */
.trade-card--item .trade-name{
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.trade-tag{
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(20,24,36,.12);
  background: rgba(20,24,36,.04);
  color: rgba(20,24,36,.72);
  white-space: nowrap;
}

.trade-mid{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.trade-dot{
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(20,24,36,.35);
}

.trade-bottom{
  margin-top: 2px;
}

.trade-intro{
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Szakág oldali nézetváltó (kártya/lista) gombok */
.view-toggle .btn{
  padding: 6px 8px;
  border-radius: 999px;
  line-height: 1;
}
.view-toggle .btn .bi{font-size: 16px;}
.view-toggle .btn.active{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* Lista nézet: #tradeGrid elemei legyenek teljes szélességű sorok */
#tradeGrid.list-view .col-12{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
#tradeGrid.list-view .trade-card{
  align-items: center;
}
#tradeGrid.list-view .trade-avatar{ width:48px; height:48px; border-radius:10px }
#tradeGrid.list-view .trade-main{ min-width:0 }

/* Lista nézet finomhangolása a szakág kártyákhoz */
.trade-card--list{
  padding: 10px 12px;
}
.trade-card--list .trade-name{
  margin-bottom: 2px;
}

/* Lista nézet: oszlopok stabil elrendezése, ár mindig jobb oldalon */
.trade-card--list .trade-text-col{
  flex: 1 1 auto;
  min-width: 0;
}
.trade-card--list .trade-price-col{
  flex: 0 0 auto;
}
.trade-card--list .trade-main > .d-flex{
  flex-wrap: nowrap;
}

/* Ár/ársáv megjelenítés – hasonló hangulat a munkadíj kártyához */
.trade-price-pill{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(135deg, #eef2ff, #e0f2fe);
  border: 1px solid rgba(148,163,184,.5);
}
.trade-price-range{
  font-weight: 700;
  font-size: 13px;
}
.trade-price-unit{
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
}
.trade-price-sub{
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

/* Kártyanézetben legyen kis vizuális távolság
   a tipikus ár és a rövid leírás között. */
.trade-card--item .trade-bottom .trade-intro{
  margin-top: 4px;
}

/* Utility to hide sections without removing markup (kept for future use) */
.hidden-section{display:none !important}

/* Autocomplete dropdown */
.md-autocomplete{position:relative;display:flex;flex:1;overflow:visible;z-index:2}
.md-autocomplete > input{flex:1;min-width:0}
.md-autocomplete-list{position:absolute;top:calc(100% + 6px);z-index:1200;background:#fff;border:1px solid #e6e9ee;border-radius:6px;box-shadow:0 6px 18px rgba(24,32,40,0.08);max-height:320px;overflow:auto}
.md-autocomplete-item{padding:8px 12px;cursor:pointer}
.md-autocomplete-item:hover,.md-autocomplete-item.active{background:#f5f7fb}

/* Highlighted search term */
mark.search-hit{background:#fff08a;color:#000;padding:0 .15rem;border-radius:3px}

/* Skeleton card */
.skeleton-card{border-radius:12px;padding:16px;background:linear-gradient(90deg,#f7f8fa,#fcfcfc);box-shadow:none;border:1px solid var(--line)}
.skeleton-line{height:14px;background:linear-gradient(90deg,#eef0f3,#f8f9fb);border-radius:8px;margin-bottom:8px}
.skeleton-title{height:18px;width:60%;margin-bottom:12px}
.skeleton-sub{height:12px;width:40%}

/* Mobile modal tweaks */
.modal-bottom .modal-dialog{position:fixed;right:0;left:0;bottom:0;margin:0}
.modal-bottom .modal-content{border-top-left-radius:12px;border-top-right-radius:12px}

/* Ensure modal backdrop covers sticky header (sticky navbar has z-index:1100) */
.modal-backdrop{
  z-index:1200 !important;
}
.modal{
  z-index:1201 !important;
}

/* Ensure dropdowns appear above sticky navbar */
.dropdown-menu{z-index:1300 !important;}

/* Larger touch targets for CTAs */
.btn-brand, .btn-ghost, .btn-outline-secondary{padding:12px 16px}

/* Buttons */
.btn-brand{
  background: #111;
  border: 1px solid #111;
  color: #fff;
  font-weight: 800;
}
.btn-brand:hover{background:#000; border-color:#000;}

.btn-ghost{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-ghost:hover{background: #f3f4f6;}

/* Vissza a szakághoz – modernebb, pill stílusú gomb */
.btn-back-pill{
  border-radius: 999px;
  padding-inline: 14px;
  padding-block: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .86rem;
}
.btn-back-pill .btn-back-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:#f3f4f6;
  font-size:.9rem;
}

/* Tables + lists */
.list-group-item{
  background: #fff;
  border-color: var(--line);
  color: var(--text);
}

/* Chips */
.chip{
  cursor:pointer;
  user-select:none;
  border:1px solid var(--line);
  background: #fff;
  color: var(--muted);
  padding: .45rem .7rem;
  border-radius: 999px;
  font-size: .9rem;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.chip.active{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* PRO badge style (moved from inline in munkadij.html) */
.badge-pro-gold{
  padding:.32rem .55rem;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:#7a5c00;                 /* mély arany */
  background-color:#fff8e1;      /* nagyon halvány arany */
  border:1px solid #e6c768;      /* finom arany keret */
  border-radius:.4rem;
}
.badge.badge-pro-gold{
  color:#7a5c00;
  background-color:#fff8e1;
}

/* Price range */
.price-range{
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -.01em;
}
.price-sub{color: var(--muted); font-size: .92rem;}

/* Sidebar */
.sticky-top-offset{position: sticky; top: 88px;}

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  background: #fff;
}

/* Ad slots */
.ad-slot{
  /* border: 1px dashed #d1d5db;
  border-radius: 16px;
  padding: 18px;
  color: #6b7280;
  background: #fff; */
}

/* Breadcrumb */
.breadcrumb a{color: #111; text-decoration: none;}
.breadcrumb a:hover{text-decoration: underline;}
.breadcrumb-item+.breadcrumb-item::before{color: #9ca3af;}

/* Small helpers */
.hr-soft{border-color: var(--line)!important; opacity:1;}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;}
}

/* === PRO Szakember banner === */
.pro-banner{
  position: relative;
  padding: 56px 0;
  overflow: hidden;
  color: #fff;
  background: #0b1220;
}

.pro-banner-bg{
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(900px 420px at 15% 15%, rgba(109,94,252,.35), transparent 60%),
    radial-gradient(780px 420px at 85% 20%, rgba(21,183,255,.28), transparent 55%),
    radial-gradient(900px 520px at 50% 120%, rgba(55,214,122,.18), transparent 60%);
  z-index: 0;
}

.pro-banner .container{
  z-index: 1;
}

.pro-badge{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}

.pro-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.pro-lead{
  color: rgba(255,255,255,.82);
  max-width: 720px;
}

.pro-features{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 16px;
  margin-top: 16px;
}

.pro-feature{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: rgba(255,255,255,.9);
}

.pro-feature i{
  color: #8b7cff;
  font-size: 1.1rem;
}

/* CTA card */
.pro-cta-card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}

.pro-price{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
}

.pro-price-now{
  font-size: 2.4rem;
  font-weight: 900;
}

.pro-price-per{
  font-size: .9rem;
  opacity: .8;
}

.pro-price-old{
  font-size: .9rem;
  color: rgba(255,255,255,.6);
  text-decoration: line-through;
}

.pro-price-note{
  font-size: .8rem;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
}

.pro-cta-sub{
  font-size: .75rem;
  color: rgba(255,255,255,.65);
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 991px){
  .pro-banner{
    padding: 40px 0;
  }
}

/* PRO prices block (public pages) - compact, professional list */
.pro-prices-block{ background: #fff; border:1px solid rgba(15,23,42,0.06); border-radius:10px; box-shadow:0 8px 24px rgba(15,23,42,0.06); }
.pro-prices-block .card-title{ padding:12px 14px; margin:0; font-weight:700; color:#0b1220; }
.pro-prices-list{ padding:8px 0; }
.pro-price-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid rgba(15,23,42,0.04); }
.pro-price-item:first-child{ border-top:0; }
.pro-who{ font-weight:700; color:#0b1220; }
.pro-company{ font-weight:400; color:#6b7280; font-size:0. ninerem; display:block; }
.pro-price{ text-align:right; min-width:120px; }
.pro-price .amount{ font-weight:800; font-size:1.05rem; color:#0b1220; }
.pro-price .unit{ display:block; color:#6b7280; font-size:0. ninerem; }
.pro-price-note{ color:#6b7280; font-size:. ninerem; margin-top:6px; }

@media (prefers-color-scheme: dark){
  .pro-prices-block{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.06); }
  .pro-prices-block .card-title, .pro-who, .pro-price .amount{ color:#fff; }
  .pro-company, .pro-price .unit, .pro-price-note{ color: rgba(255,255,255,0.72); }
}