/* Úticél-aloldalak – a honlap saját stílusára épül, csak azt teszi hozzá,
   ami az úticél-oldalakhoz kell. Minden választó .uticel alá van szűkítve,
   hogy semmi ne ütközzön a meglévő oldalakkal. */

.uticel{
  --u-jo4:#13a173; --u-jo3:#3a8f82; --u-jo2:#c0842a; --u-jo1:#bb5340;
  --u-halk:#6b7280; --u-vonal:rgba(120,140,170,.24); --u-doboz:rgba(120,140,170,.07);
  --u-arany:#9a6a12;
  max-width:760px;
}
@media (prefers-color-scheme:dark){
  .uticel{
    --u-jo4:#3ed9a4; --u-jo3:#519c8f; --u-jo2:#cf8c3e; --u-jo1:#b0554a;
    --u-halk:#94a3b8; --u-vonal:rgba(150,175,215,.2); --u-doboz:rgba(150,175,215,.07);
    --u-arany:#e3b04b;
  }
}

.uticel-hol{font-size:13px; color:var(--u-halk); margin:0 0 6px}
.uticel-hol a{color:inherit}
.uticel-lead{font-size:17px; line-height:1.6; margin:0 0 20px}
.uticel-lead b{display:block; margin-bottom:4px}

/* A honlap style.css-ében is van .uticel-kep (a kártyák képe: 3:2 arány,
   színes háttér). Itt azt felül kell írni, különben a kép alatt színes sáv marad. */
.uticel figure.uticel-kep{
  margin:0 0 22px; aspect-ratio:auto; background:none; overflow:visible; position:static;
}
.uticel figure.uticel-kep img{
  width:100%; height:auto; border-radius:12px; display:block;
  aspect-ratio:8/5; object-fit:cover;
}

/* ---- év sáv ---- */
.uticel-evsav{
  display:grid; grid-template-columns:repeat(12,1fr); gap:3px;
  margin:0 0 10px; text-align:center;
}
.uticel-evsav .hn{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:0}
.uticel-evsav span{font-size:11px; color:var(--u-halk); letter-spacing:.01em}
.uticel-evsav i{display:block; width:100%; height:26px; border-radius:5px}
.uticel-evsav em{font-style:normal; font-size:9.5px; color:var(--u-halk); line-height:1.1}
.uticel-evsav .hn[data-v="4"] i{background:var(--u-jo4)}
.uticel-evsav .hn[data-v="3"] i{background:var(--u-jo3)}
.uticel-evsav .hn[data-v="2"] i{background:var(--u-jo2)}
.uticel-evsav .hn[data-v="1"] i{background:var(--u-jo1)}
@media (max-width:560px){
  .uticel-evsav{grid-template-columns:repeat(6,1fr); gap:5px}
  .uticel-evsav em{font-size:10.5px}
}

.uticel-magy{font-size:13.5px; color:var(--u-halk); line-height:1.6; margin:0 0 26px}

/* ---- látnivalók ---- */
.uticel-latnivalok{margin:0 0 26px; padding:0; list-style:none; counter-reset:ul}
.uticel-latnivalok li{
  counter-increment:ul; position:relative; padding:10px 0 10px 34px;
  border-top:1px solid var(--u-vonal); font-size:16px;
}
.uticel-latnivalok li:first-child{border-top:0}
.uticel-latnivalok li::before{
  content:counter(ul); position:absolute; left:0; top:10px;
  width:23px; height:23px; border-radius:50%; text-align:center;
  font-size:12px; line-height:23px; font-weight:700;
  color:var(--u-arany); background:var(--u-doboz);
}

.uticel-esemenyek{margin:0 0 26px; padding-left:18px; line-height:1.7}
.uticel-esemenyek li{margin-bottom:3px}

/* ---- út Budapestről ---- */
.uticel-ut{
  display:grid; grid-template-columns:auto 1fr; gap:8px 16px;
  margin:0 0 10px; padding:14px 16px; border-radius:11px; background:var(--u-doboz);
}
.uticel-ut dt{
  font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--u-halk); white-space:nowrap; padding-top:2px;
}
.uticel-ut dd{margin:0; font-size:15px}

/* ---- gombok ---- */
.uticel-gombok{display:grid; gap:8px; margin:0 0 20px}
.uticel-gombok a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-radius:11px; text-decoration:none;
  border:1px solid var(--u-arany); color:var(--u-arany);
  font-size:15.5px; font-weight:600;
}
.uticel-gombok a:hover{background:var(--u-doboz)}
.uticel-gombok a span:last-child{font-weight:400; font-size:13.5px; opacity:.8}

.uticel-cikk, .uticel-gomb-link{margin:0 0 20px; font-size:15px}

/* ---- hasonló ---- */
.uticel-hasonlo{
  list-style:none; margin:0 0 24px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px;
}
.uticel-hasonlo a{
  display:block; padding:11px 13px; border-radius:10px;
  border:1px solid var(--u-vonal); text-decoration:none;
}
.uticel-hasonlo a:hover{border-color:var(--u-arany)}
.uticel-hasonlo b{display:block; font-size:15px}
.uticel-hasonlo span{font-size:12.5px; color:var(--u-halk)}

.uticel-cimkek{display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin:0}
.uticel-cimkek i{font-style:normal; font-size:12.5px; color:var(--u-halk)}
.uticel-cimkek a{
  font-size:12.5px; color:var(--u-halk); text-decoration:none;
  border:1px solid var(--u-vonal); border-radius:20px; padding:4px 11px;
}
.uticel-cimkek a:hover{border-color:var(--u-arany); color:var(--u-arany)}

/* szűrősáv a gyűjtőoldalon */
.uticel-cimkesav{display:flex; flex-wrap:wrap; gap:6px; margin:-14px 0 26px; align-items:center}
.uticel-cimkesav i{font-style:normal; font-size:12.5px; color:var(--u-halk); margin-right:2px}
.uticel-cimkesav a{
  font-size:13px; padding:6px 12px; border-radius:20px; text-decoration:none;
  border:1px solid var(--u-vonal); color:inherit;
}
.uticel-cimkesav a:hover{border-color:var(--u-arany); color:var(--u-arany)}
.uticel-cimkesav a[aria-current]{background:var(--u-arany); border-color:var(--u-arany); color:#fff; font-weight:600}

/* Az országsáv: ugyanaz a csip-forma, csak a darabszám halványabb benne. */
.uticel-orszagsav{margin:0 0 20px}
.uticel-orszagsav a .db{font-size:11.5px; opacity:.6; margin-left:3px}
.uticel-orszagsav a[aria-current] .db{opacity:.85}

/* ---- gyűjtőoldal ---- */
.uticel-honapok{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 26px}
.uticel-honapok a{
  font-size:13.5px; padding:7px 12px; border-radius:9px; text-decoration:none;
  border:1px solid var(--u-vonal); color:inherit;
}
.uticel-honapok a:hover{border-color:var(--u-arany); color:var(--u-arany)}
.uticel-honapok a[aria-current]{background:var(--u-arany); border-color:var(--u-arany); color:#fff; font-weight:600}

.uticel h2 .db{font-size:13px; color:var(--u-halk); font-weight:400}
.uticel-racs{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px;
}
.uticel-racs li{display:flex}
.uticel-racs a{
  display:flex; flex-direction:column; flex:1; border-radius:12px; overflow:hidden;
  border:1px solid var(--u-vonal); text-decoration:none; color:inherit;
  transition:border-color .15s;
}
.uticel-racs a:hover{border-color:var(--u-arany)}
.uticel-racs .kep{
  width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; display:block;
  border-bottom:1px solid var(--u-vonal);
}
.uticel-racs .kep.helyett{
  box-sizing:border-box; display:grid; place-items:center; text-align:center; padding:8px;
  font-family:Georgia,"Times New Roman",serif; font-size:16px; color:rgba(20,30,45,.42);
}
.uticel-racs .torzs{display:block; padding:12px 14px 13px}
.uticel-racs b{display:block; font-size:16px; line-height:1.3}
.uticel-racs .o{display:block; font-size:12.5px; color:var(--u-halk); margin-top:2px}
.uticel-racs .mikor{
  display:inline-block; margin-top:8px; font-size:12px; color:var(--u-arany);
  background:var(--u-doboz); border-radius:20px; padding:3px 10px;
}
.uticel-racs .meta{
  display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:8px;
  font-size:12.5px; color:var(--u-halk);
}
.uticel-racs .ar{letter-spacing:.5px; color:var(--u-arany)}
.uticel-racs .ar i{font-style:normal; opacity:.28; color:var(--u-halk)}

/* Telefonon egy oszlop, és fekvő kártya: kis bélyegkép balra, szöveg jobbra.
   Álló képpel 149 hely görgethetetlenül hosszú lenne. */
@media (max-width:620px){
  .uticel-racs{grid-template-columns:1fr; gap:9px}
  .uticel-racs a{flex-direction:row; align-items:stretch}
  .uticel-racs .kep{
    width:108px; flex:0 0 108px; aspect-ratio:auto; height:auto; align-self:stretch;
    border-bottom:0; border-right:1px solid var(--u-vonal);
  }
  .uticel-racs .kep.helyett{font-size:12.5px; padding:6px; line-height:1.25}
  .uticel-racs .torzs{flex:1; min-width:0; padding:11px 13px}
  .uticel-racs b{font-size:15.5px}
  .uticel-racs .mikor{margin-top:6px}
  .uticel-racs .meta{margin-top:6px; gap:3px 10px; font-size:12px}
}


/* ---------- bejegyzések ---------- */
.cikk-torzs{font-size:17px; line-height:1.75}
.cikk-torzs p{margin:0 0 17px}
.cikk-torzs h2{font-size:21px; margin:32px 0 12px}
.cikk-torzs h3{font-size:17.5px; margin:26px 0 9px}
.cikk-torzs ul, .cikk-torzs ol{margin:0 0 17px; padding-left:22px}
.cikk-torzs li{margin-bottom:6px}
.cikk-torzs strong{font-weight:600}
.cikk .uticel-gombok{margin:28px 0 8px}

.cikk-racs{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.cikk-racs a{
  display:block; padding:15px 17px; border-radius:12px;
  border:1px solid var(--u-vonal); text-decoration:none; color:inherit;
}
.cikk-racs a:hover{border-color:var(--u-arany)}
.cikk-racs b{display:block; font-size:17.5px; line-height:1.35; margin-bottom:5px}
.cikk-racs span{display:block; font-size:14px; color:var(--u-halk); line-height:1.55}
@media (min-width:760px){ .cikk-racs{grid-template-columns:1fr 1fr} }

/* ---------- hub-oldalak szövege ---------- */
.hub-szoveg{margin:34px 0 0; max-width:42em; font-size:16.5px; line-height:1.75}
.hub-szoveg h2{font-size:21px; margin:30px 0 11px}
.hub-szoveg h3{font-size:17.5px; margin:24px 0 8px}
.hub-szoveg p{margin:0 0 16px}
.hub-szoveg ul{margin:0 0 16px; padding-left:22px}
.hub-szoveg li{margin-bottom:6px}
.hub-szoveg strong{font-weight:600}

.hub-faq{max-width:42em; display:grid; gap:8px; margin:0 0 10px}
.hub-faq details{border:1px solid var(--u-vonal); border-radius:11px; padding:13px 16px}
.hub-faq summary{cursor:pointer; font-weight:600; font-size:16px; list-style:none}
.hub-faq summary::-webkit-details-marker{display:none}
.hub-faq summary::after{content:"+"; float:right; color:var(--u-arany); font-weight:400}
.hub-faq details[open] summary::after{content:"\2013"}
.hub-faq p{margin:10px 0 0; font-size:15.5px; line-height:1.65; color:var(--u-halk)}

/* ---------- hírlevél ---------- */
.hirlevel-doboz{
  margin:34px 0 0; padding:20px 22px; border-radius:13px;
  background:var(--u-doboz); border:1px solid var(--u-vonal); max-width:42em;
}
.hirlevel-doboz h2{margin:0 0 6px; font-size:19px}
.hl-alcim{margin:0 0 14px; font-size:14.5px; color:var(--u-halk); line-height:1.6}
.hl-sor{display:flex; gap:8px; flex-wrap:wrap}
.hl-sor input[type=email]{
  flex:1; min-width:210px; padding:12px 14px; border-radius:10px; font:inherit; font-size:15px;
  border:1px solid var(--u-vonal); background:transparent; color:inherit;
}
.hl-sor button{
  padding:12px 20px; border-radius:10px; border:0; cursor:pointer;
  background:var(--u-arany); color:#fff; font:inherit; font-size:15px; font-weight:600;
}
.hl-jelol{display:flex; gap:9px; margin:12px 0 0; font-size:13.5px;
          color:var(--u-halk); line-height:1.5; align-items:flex-start}
.hl-jelol input{margin-top:3px; width:17px; height:17px; flex:0 0 17px; accent-color:var(--u-arany)}
.hl-apro{margin:12px 0 0; font-size:12.5px; color:var(--u-halk); line-height:1.55}
.hl-urlap{margin:0 0 26px; max-width:42em}
.hl-uzenet{padding:13px 16px; border-radius:10px; font-size:15px; margin:0 0 20px; max-width:42em}
.hl-uzenet.jo{background:rgba(19,161,115,.12); border:1px solid rgba(19,161,115,.4)}
.hl-uzenet.baj{background:rgba(187,83,64,.12); border:1px solid rgba(187,83,64,.4)}
.hirlevel-lap ul{max-width:42em; line-height:1.7}
.hirlevel-lap p{max-width:42em}

/* ---- partnerek: fizetett szállásmegjelenés ---- */
.partner-jeloles{
  margin:0 0 12px; font-size:12.5px; line-height:1.55; color:var(--u-halk);
  max-width:42em;
}
.partner-lista{list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px}
.partner-lista li{
  display:flex; gap:14px; align-items:stretch;
  border:1px solid var(--u-vonal); border-radius:12px; overflow:hidden;
  background:var(--u-doboz);
}
.partner-lista img{
  width:150px; height:auto; object-fit:cover; flex:0 0 150px; display:block;
  align-self:stretch;
}
.partner-torzs{display:flex; flex-direction:column; gap:5px; padding:12px 14px; min-width:0}
.partner-torzs b{font-size:15.5px}
.partner-torzs span{font-size:14px; line-height:1.55; color:var(--u-halk)}
.partner-elerhetoseg{display:flex; gap:14px; flex-wrap:wrap; margin-top:auto; padding-top:4px}
.partner-elerhetoseg a{font-size:14px; color:var(--u-arany); text-decoration:none; font-weight:600}
.partner-elerhetoseg a:hover{text-decoration:underline}
@media (max-width:560px){
  .partner-lista li{flex-direction:column}
  .partner-lista img{width:100%; flex:0 0 auto; max-height:180px}
}

/* A halk ajánlat ott, ahol még nincs partner. */
.partner-ajanlat{
  margin:22px 0 26px; padding:13px 16px; border-radius:11px; max-width:42em;
  font-size:14px; line-height:1.6; color:var(--u-halk);
  background:var(--u-doboz); border:1px dashed var(--u-vonal);
}
.partner-ajanlat b{color:inherit}
.partner-ajanlat a{color:var(--u-arany); font-weight:600}

/* ---- az ajánlati oldal ---- */
.partner-lap p, .partner-lap ol, .partner-lap ul{max-width:42em}
.partner-pontok{line-height:1.7; padding-left:1.25em}
.partner-pontok.halk{color:var(--u-halk)}
.partner-pontok li{margin:0 0 7px}
.partner-urlap{display:grid; gap:12px; max-width:38em; margin:0 0 8px}
.partner-urlap label{display:block; font-size:13px; color:var(--u-halk)}
.partner-urlap input, .partner-urlap textarea{
  box-sizing:border-box; max-width:100%;
  width:100%; margin-top:5px; padding:11px 13px; border-radius:10px; font:inherit;
  font-size:15px; border:1px solid var(--u-vonal); background:transparent; color:inherit;
}
.partner-urlap textarea{resize:vertical}
.partner-urlap button{
  justify-self:start; padding:12px 24px; border-radius:10px; border:0; cursor:pointer;
  background:var(--u-arany); color:#fff; font:inherit; font-size:15px; font-weight:600;
}
.partner-apro{margin:0; font-size:12.5px; color:var(--u-halk); line-height:1.55}

/* ---- mentés ---- */
.uticel-muvelet{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin:22px 0 26px; font-size:14px;
}
.uticel-muvelet a{color:var(--u-arany); text-decoration:none}
.uticel-muvelet a:hover{text-decoration:underline}
.uticel-ment{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:9px 15px; border-radius:10px; font:inherit; font-size:14px;
  background:transparent; color:inherit; border:1px solid var(--u-vonal);
}
.uticel-ment:hover{border-color:var(--u-arany); color:var(--u-arany)}
.uticel-ment.be{border-color:var(--u-arany); color:var(--u-arany); font-weight:600}
.uticel-ment.be svg{fill:currentColor}

.ment-racs li{position:relative}
.ment-le{
  position:absolute; top:6px; right:6px; z-index:2;
  width:28px; height:28px; border-radius:50%; cursor:pointer; line-height:1;
  font:inherit; font-size:17px; border:1px solid var(--u-vonal);
  background:var(--u-doboz); color:var(--u-halk);
}
.ment-le:hover{color:#fff; background:var(--u-jo1); border-color:var(--u-jo1)}
.mentes-masik{
  margin:0 0 22px; padding:12px 15px; border-radius:11px; max-width:42em;
  font-size:14px; color:var(--u-halk);
  background:var(--u-doboz); border:1px solid var(--u-vonal);
}
.mentes-masik a{color:var(--u-arany); font-weight:600}

/* ---- hírlevél: név mező, botcsapda, saját adatok ---- */
.hl-sor input.hl-nev{
  flex:0 1 190px; min-width:150px; padding:12px 14px; border-radius:10px; font:inherit; font-size:15px;
  border:1px solid var(--u-vonal); background:transparent; color:inherit;
}
.hl-csapda{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}
.hl-jelol a{color:var(--u-arany)}
.hl-adatok{border-collapse:collapse; margin:0 0 12px; font-size:14.5px; max-width:42em; width:100%}
.hl-adatok th,.hl-adatok td{text-align:left; padding:7px 10px; border-bottom:1px solid var(--u-vonal); vertical-align:top}
.hl-adatok th{font-weight:500; color:var(--u-halk); width:38%}
.hl-sor button.masodlagos{background:transparent; color:var(--u-jo1); border:1px solid var(--u-jo1)}

/* ---- partner-előnézet ---- */
.partner-elonezet-sav{
  margin:0 0 18px; padding:12px 15px; border-radius:11px; font-size:14px; line-height:1.55;
  background:rgba(154,106,18,.1); border:1px solid rgba(154,106,18,.45);
}
.partner-elonezet-sav a{color:var(--u-arany); font-weight:600; white-space:nowrap}
.partner-lista li:has(.partner-elo-cimke){border-color:var(--u-arany); box-shadow:0 0 0 2px rgba(154,106,18,.18)}
.partner-elo-cimke{
  font-style:normal; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  margin-left:8px; padding:2px 7px; border-radius:6px; background:var(--u-arany); color:#fff; vertical-align:2px;
}