/* ==========================================================================
   Medias Car Autósbolt - Siófok
   Egyedi stíluslap - fekete/szürke alapszín + banánsárga kiemelés
   ========================================================================== */

:root{
  --c-bg-dark:#161616;
  --c-sheet:#242424;
  --c-sheet-2:#2b2b2b;
  --c-panel:#333333;
  --c-border:#3d3d3d;
  --c-text:#d6d6d6;
  --c-text-dim:#a8a8a8;
  --c-yellow:#FCD66E;
  --c-yellow-light:#FDE6A5;
  --c-yellow-deep:#F3EF82;
  --c-white:#f2f2f2;
  --site-width:860px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background-color:var(--c-bg-dark);
  background-image:url('../images/page-bgtexture.jpg');
  background-repeat:repeat;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--c-text);
  font-size:15px;
  line-height:1.6;
}
a{color:var(--c-yellow-light);text-decoration:none;}
a:hover{color:var(--c-yellow);text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4{color:var(--c-yellow-light);font-family:Arial, Helvetica, sans-serif;line-height:1.3;}
h1{font-size:26px;margin:.2em 0 .5em;}
h2{font-size:21px;border-bottom:1px solid var(--c-border);padding-bottom:8px;margin-top:1.4em;}
h3{font-size:17px;color:var(--c-yellow);}
p{margin:0 0 1em;}
ul{padding-left:1.2em;}
.cleared{clear:both;}
.visually-hidden{position:absolute;left:-9999px;}

/* ---------------- Full width solid black info bar ---------------- */
.infobar-band{
  width:100%;
  background:#000;
  border-bottom:1px solid #000;
}
.info-bar{
  max-width:1400px;
  margin:0 auto;
  padding:8px 16px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 22px;
  font-size:12.5px;
  color:#cfcfcf;
  text-align:center;
}
.info-bar strong{color:var(--c-yellow-light);}
.info-bar a{color:var(--c-yellow-light);}
.info-bar .sep{opacity:.35;}

/* header sits on its own glare band, tall enough that the full glare
   image (263px) is visible and never clipped at the bottom */
.header-band{
  width:100%;
  min-height:263px;
  background:#0d0d0d url('../images/page-bgglare.jpg') repeat-x top left;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.header-wrap{
  max-width:var(--site-width);
  width:100%;
  margin:0 auto;
}
.header-wrap img{width:100%;height:auto;display:block;}

/* ---------------- Page shell ---------------- */
.site{
  max-width:var(--site-width);
  margin:0 auto;
  background:var(--c-sheet);
  box-shadow:0 0 25px rgba(0,0,0,.6);
}

/* ---------------- Nav ---------------- */
nav.mainnav{
  background:#151515;
  border-bottom:2px solid #000;
}
nav.mainnav ul{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-wrap:wrap;
}
nav.mainnav li{border-right:1px solid #2c2c2c;}
nav.mainnav a{
  display:block;
  padding:12px 14px;
  color:var(--c-yellow-light);
  font-weight:bold;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:uppercase;
  text-decoration:none;
}
nav.mainnav a:hover{background:#000;color:var(--c-yellow);}
nav.mainnav li.active a,
nav.mainnav a[aria-current="page"]{
  background:var(--c-yellow);
  color:#111;
}

/* hamburger button - hidden on desktop, shown on mobile */
.nav-toggle-btn{
  display:none;
  align-items:center;
  gap:10px;
  width:100%;
  background:#151515;
  border:none;
  color:var(--c-yellow-light);
  font-weight:bold;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.03em;
  padding:12px 14px;
  cursor:pointer;
  font-family:inherit;
}
.nav-toggle-btn .bars{
  width:22px;height:16px;position:relative;flex:0 0 22px;
}
.nav-toggle-btn .bars span{
  position:absolute;left:0;right:0;height:2px;background:var(--c-yellow);
  border-radius:2px;
}
.nav-toggle-btn .bars span:nth-child(1){top:0;}
.nav-toggle-btn .bars span:nth-child(2){top:7px;}
.nav-toggle-btn .bars span:nth-child(3){top:14px;}

/* ---------------- Layout ---------------- */
.layout{
  display:flex;
  gap:18px;
  padding:18px;
  align-items:flex-start;
}
.content{flex:1 1 auto;min-width:0;}
.sidebar{flex:0 0 170px;}

.panel{
  background:var(--c-panel);
  border:1px solid var(--c-border);
  border-radius:4px;
  padding:14px;
  margin-bottom:16px;
}
.panel h4{
  margin:0 0 10px;
  color:var(--c-yellow-deep);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid var(--c-border);
  padding-bottom:8px;
}
.side-ad{text-align:center;margin-bottom:14px;}
.side-ad img{margin:0 auto;border-radius:3px;}
.side-ad-small{display:block;margin:0 auto 10px;max-width:100%;}

.brands-strip img{border-radius:3px;}

/* ---------------- Buttons / CTAs ---------------- */
.btn{
  display:inline-block;
  background:var(--c-yellow);
  color:#111 !important;
  font-weight:bold;
  padding:10px 18px;
  border-radius:3px;
  text-decoration:none !important;
  border:none;
  cursor:pointer;
  font-size:14px;
}
.btn:hover{background:var(--c-yellow-light);}
.btn-outline{
  background:transparent;
  border:1px solid var(--c-yellow);
  color:var(--c-yellow) !important;
}
.phone-link{color:var(--c-yellow-light);font-weight:bold;white-space:nowrap;}
.phone-link svg{vertical-align:-3px;margin-right:4px;}

/* ---------------- icon (monochrome) ---------------- */
.icon{width:18px;height:18px;fill:none;stroke:var(--c-yellow);stroke-width:1.8;vertical-align:-4px;margin-right:6px;}
.icon-white{stroke:var(--c-text);}
.feature-list{list-style:none;padding:0;margin:0;}
.feature-list li{
  padding:8px 0 8px 0;
  border-bottom:1px dashed var(--c-border);
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.feature-list li:last-child{border-bottom:none;}

/* ---------------- Boxes ---------------- */
.box-new{
  background:#3a3312;
  border:1px solid #6b5b1c;
  border-left:4px solid var(--c-yellow);
  padding:14px 16px;
  border-radius:3px;
  margin:16px 0;
}
.box-new h3{margin-top:0;}
.box-quote{
  background:#1e1e1e;
  border:1px solid var(--c-border);
  border-left:4px solid var(--c-yellow);
  padding:14px 16px;
  border-radius:3px;
  margin:16px 0;
  font-size:14px;
  color:var(--c-text-dim);
}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.cat-card, .brand-card{
  background:#1e1e1e;
  border:1px solid var(--c-border);
  border-radius:4px;
  padding:12px 14px;
}
.cat-card h3, .brand-card h3{margin:0 0 6px;font-size:15px;}
.cat-card p, .brand-card p{margin:0;font-size:13px;color:var(--c-text-dim);}

table.compare{width:100%;border-collapse:collapse;margin:1em 0;font-size:13.5px;}
table.compare th, table.compare td{border:1px solid var(--c-border);padding:8px 10px;text-align:left;}
table.compare th{background:#1c1c1c;color:var(--c-yellow-light);}

/* ---------------- Forms ---------------- */
form.card-form{
  background:#1e1e1e;
  border:1px solid var(--c-border);
  border-radius:5px;
  padding:18px;
}
.form-row{margin-bottom:12px;}
.form-row label{display:block;font-size:13px;color:var(--c-text-dim);margin-bottom:4px;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;
  padding:9px 10px;
  background:#111;
  border:1px solid #444;
  color:var(--c-text);
  border-radius:3px;
  font-family:inherit;
  font-size:14px;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:1px solid var(--c-yellow);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}

/* diagnostic tool */
.diag-options{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;}
.diag-options button{
  background:#111;border:1px solid #444;color:var(--c-text);
  padding:9px 12px;border-radius:3px;cursor:pointer;font-size:13.5px;
}
.diag-options button:hover{border-color:var(--c-yellow);color:var(--c-yellow);}
#diag-result{
  margin-top:14px;padding:14px;border-radius:4px;
  background:#241f0c;border:1px solid #6b5b1c;display:none;
}

/* ---------------- FAQ ---------------- */
details.faq{
  background:#1e1e1e;border:1px solid var(--c-border);
  border-radius:4px;margin-bottom:8px;padding:10px 14px;
}
details.faq summary{cursor:pointer;color:var(--c-yellow-light);font-weight:bold;font-size:14.5px;}
details.faq p{margin-top:8px;font-size:14px;}

/* ---------------- Recommended partner banners footer ---------------- */
.partners-recommend{
  border-top:1px solid var(--c-border);
  padding:14px 18px;
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  background:#1c1c1c;
}
.partners-recommend a{display:inline-block;}
.partners-recommend img{max-height:60px;width:auto;}

/* ---------------- Footer ---------------- */
footer.sitefoot{
  background:#111;
  border-top:2px solid #000;
  padding:14px 18px;
  font-size:11.5px;
  color:#8a8a8a;
  text-align:center;
}
footer.sitefoot a{color:#b7b7b7;}
footer.sitefoot .footlinks{margin-top:6px;}
footer.sitefoot .footlinks a{margin:0 6px;}

/* ---------------- Mobile call-now sticky ---------------- */
.mobile-call{
  display:none;
}
@media (max-width:780px){
  .mobile-call{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:999;
    text-align:center;
    padding:6px;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
  }
  .mobile-call img{max-width:260px;margin:0 auto;}
  body{padding-bottom:70px;}
}

/* ---------------- Responsive ---------------- */
@media (max-width:780px){
  .layout{flex-direction:column;padding:12px;}
  .sidebar{flex:1 1 auto;width:100%;}
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}

  /* hamburger menu */
  .nav-toggle-btn{display:flex;}
  nav.mainnav ul{
    display:none;
    flex-direction:column;
    width:100%;
  }
  nav.mainnav ul.open{display:flex;}
  nav.mainnav li{border-right:none;border-bottom:1px solid #2c2c2c;}

  /* kiemelt gyártók blokk elrejtése mobil nézetben */
  .hide-mobile{display:none;}

  .info-bar{font-size:11.5px;gap:4px 12px;}
  h1{font-size:21px;}
  h2{font-size:18px;}
}