* { box-sizing: border-box; }
html, body { height: 100%; }
:root{

--bg: #ffffff;
--card: #f5f5f5;
--text: #1a1a1a;
--accent: #c79a5c;

}
.dark{

--bg: #121212;
--card: #1f1f1f;
--text: #eeeeee;
--accent: #d6a66a;

}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

.site-main{
  min-height: calc(100vh - 160px);
  padding: 28px 0 40px;
}

/* Header */
.site-header{
  background:#0f0f10;
  padding: 26px 0 18px;
  border-bottom:2px solid #000;
}

.header-inner{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}

.logo{
  margin:0;
  color:#fff;
  font-size:44px;
  text-align:center;
  letter-spacing:.5px;
}

.main-nav{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  justify-content:center;
}

.nav-link{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  padding:10px 18px;
  border-radius:12px;
  opacity:.9;
  transition:.2s;
}
.nav-link:hover{opacity:1}
.nav-link.active{background:#fff;color:#111}

/* Sections */
.section{display:none}
.section.active{display:block}

.card{
  background: var(--card);
  border-radius:18px;
  padding:26px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.card h2{
  margin-top:0;
  font-size:34px;
}

/* Főoldali kép */
.hero-img{
  width:100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display:block;
  margin-bottom: 16px;
}

/* Extra oldalak képei */
.extra-img{
  width:100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 16px;
  display:block;
  margin: 14px 0;
}

/* Contact */
.contact-form{margin-top:16px;display:grid;gap:14px}
.form-row label{font-weight:700;display:block;margin-bottom:6px}
.form-row input, .form-row textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:15px;
  outline:none;
}
.form-row input:focus, .form-row textarea:focus{border-color:#111}

.btn-primary{
  background:#111;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 14px;
  font-weight:800;
  cursor:pointer;
}
.btn-primary:hover{opacity:.92}

.form-note{margin:0;opacity:.75;font-size:13px}
.contact-direct{margin-top:18px;padding-top:12px;border-top:1px solid #eee}

/* GALÉRIA */
.gallery-tabs{
  display:flex;
  gap:10px;
  margin: 12px 0 18px;
  flex-wrap:wrap;
}
.dark .gallery-tabs button{
background:#2a2a2a;
color:#ffffff;
border:1px solid #444;
}
.gallery-tab{
  border:2px solid #111;
  background:transparent;
  color:#111;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
  font-weight:700;
  transition:.15s;
}

.dark .gallery-tabs button.active{
background:#ffffff;
color:#000000;
}

.gallery-grid,
#galleryGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* a script ilyen gombokat rak be */
.gallery-item-btn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;

  /* anim alap */
  opacity: 0;
  transform: translateY(22px) scale(0.98);
  animation: galleryPop 0.42s ease-out forwards;
}

.gallery-item-btn img{
  width:100%;
  height: 220px;
  object-fit: cover;
  border-radius: 16px;
  display:block;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transition: transform .15s ease;
}
.gallery-item-btn img:hover{transform: translateY(-2px)}

@keyframes galleryPop{
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Lightbox */
#lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.92);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
#lightbox.open{display:flex}
#lightboxImg{
  max-width:88vw;
  max-height:86vh;
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:52px;
  color:#fff;
  cursor:pointer;
  padding:12px 18px;
  user-select:none;
}
.lightbox-prev{left:20px}
.lightbox-next{right:20px}

/* Footer */
.site-footer{
  background:#f5f5f5;
  border-top:1px solid #e5e5e5;
  padding:12px 0;
  font-size:13px;
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.footer-links a{
  color:#222;
  text-decoration:none;
  font-weight:700;
  margin:0 6px;
}
.footer-links a:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 980px){
  .gallery-grid, #galleryGrid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 820px){
  .logo{font-size:34px}
  .card h2{font-size:26px}
  .gallery-grid, #galleryGrid {grid-template-columns: 1fr;}
  .gallery-item-btn img{height: 240px;}
}
/* ===== MOBIL MENÜ (A) + KÁRTYA/PADDING (B) ===== */

.menu-btn{
  display:none;
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  font-size:18px;
  font-weight:900;
  padding:10px 14px;
  border-radius:12px;
  cursor:pointer;
}

/* kártyák/padding mobilon */
@media (max-width: 820px){
  .container{ padding:0 14px; }
  .site-main{ padding:18px 0 26px; }

  .card{
    padding:18px;
    border-radius:16px;
  }

  /* header legyen "3 soros": logó + gomb + lenyíló nav */
  .header-inner{
    position:relative;
    width:100%;
    max-width:1100px;
    margin:0 auto;
    padding:0 14px;
    align-items:center;
  }

  .logo{ font-size:34px; }

  .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-top:6px;
  }

  /* nav alapból rejtve */
  .main-nav{
    display:none;
    width:100%;
    flex-direction:column;
    gap:10px;
    margin-top:10px;
  }

  /* ha nyitva van */
  body.nav-open .main-nav{
    display:flex;
  }

  .nav-link{
    width:100%;
    text-align:center;
    padding:12px 14px;
    border-radius:12px;
  }
}
/* ===== ÁRAZÓ BUILDER ===== */
.price-builder{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:14px;
}
.price-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.price-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.cab-list{
  display:grid;
  gap:10px;
}
.cab-item{
  border:1px solid #eee;
  border-radius:14px;
  padding:12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
}
.cab-item strong{display:block}
.cab-meta{font-size:13px;color:#666;margin-top:4px}
.cab-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.cab-actions button{
  border:0;border-radius:10px;padding:10px 12px;
  font-weight:800;cursor:pointer;
}
.btn-ghost{background:#f2f2f2;color:#111}
.btn-danger{background:#ffeded;color:#a30000}

.total-box{
  margin-top:12px;
  border:1px solid #eee;
  border-radius:14px;
  padding:14px;
  background:#fafafa;
}
.total-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:16px;
}
.small{font-size:13px;color:#666;line-height:1.5;word-break:break-word}

@media (max-width: 980px){
  .price-builder{grid-template-columns:1fr}
  .price-row{grid-template-columns:1fr}
}
#cabList { margin-top: 10px; display: grid; gap: 10px; }

.cab-item{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: #fff;
}

.cab-info{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
}

.cab-type{ opacity: 0.75; }

.cab-actions{ display:flex; gap: 8px; }

.cab-btn{
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  background: #ececec;
  font-weight: 600;
}

.cab-btn:hover{ filter: brightness(0.97); }

.cab-btn-danger{
  background: #ffdddd;
}

.cab-empty{
  padding: 10px 12px;
  opacity: 0.7;
}
@media (max-width: 768px) {
  .price-layout {
    display: flex;
    flex-direction: column;
  }

  /* ÖSSZESÍTÉS FELÜL */
  .price-right {
    order: -1;
    margin-bottom: 24px;
  }

  /* SZEKRÉNY LISTA ALUL */
  .price-left {
    order: 1;
  }
}
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  max-width: 420px;
  width: 90%;
}

.modal-content input,
.modal-content textarea {
  width: 100%;
  margin-bottom: 12px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
/* ===== ÁRAZÓ STÍLUS FIX ===== */

#price .grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
}

@media (min-width: 900px){
  #price .grid{
    grid-template-columns: 1.3fr 0.9fr;
  }
}

#price .price-card {
  background: var(--card);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

#price input,
#price select,
#price textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #ddd;
  font-size:15px;
  outline:none;
  transition:.2s;
}

#price input:focus,
#price select:focus{
  border-color:#111;
}

#price button{
  background:#111;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:12px 16px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

#price button:hover{
  opacity:.92;
}

#price .price-card h2,
#price .price-card h3{
  margin-top:0;
}

#totalPrice{
  font-size:32px;
  font-weight:800;
  margin-top:10px;
}

#cabList div{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  border:1px solid #eee;
  border-radius:12px;
  margin-bottom:8px;
  background:#fafafa;
}

#cabList button{
  background:#ffeded;
  color:#a30000;
  padding:6px 10px;
  font-size:13px;
  border-radius:10px;
}

#drawerOptions,
#slidingOptions,
#worktopFields{
  margin-top:12px;
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fafafa;
}

/* Modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.modal-content{
  background:#fff;
  padding:24px;
  border-radius:18px;
  width:100%;
  max-width:500px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}

.modal-content input,
.modal-content textarea{
  margin-bottom:10px;
}
/* ===== PRÉMIUM ÁRAZÓ ===== */

#price .grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 40px;
}

@media (max-width: 900px) {
  #price .grid {
    grid-template-columns: 1fr;
  }
}

#price .price-card {
  background: #f8f8f8;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

#price h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

#price h4 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 15px;
  opacity: 0.7;
}

#price .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

#price label {
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: 600;
}

#price input,
#price select {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 15px;
  transition: 0.2s ease;
}

#price input:focus,
#price select:focus {
  border-color: #000;
  outline: none;
}

#price button {
  background: #000;
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s ease;
}

#price button:hover {
  opacity: 0.85;
}

#price #totalPrice {
  font-size: 36px;
  font-weight: 800;
  margin-top: 25px;
  transition: 0.3s ease;
}

.price-live {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
  opacity: 0.6;
}

.price-animate {
  transform: scale(1.05);
}
.price-breakdown {
  margin-top:20px;
  font-size:14px;
}

.price-row {
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}
.hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.hero-image {
  flex: 1;
}

.hero-img {
  width: 100%;
  max-width: 600px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* ===============================
   MOBIL NAV (hamburger lenyíló)
================================ */
@media (max-width: 820px) {

  /* alapból rejtett */
  .main-nav {
    display: none;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 12px;

    background: rgba(255,255,255,0.98);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);

    /* görgethető legyen, ha sok menüpont van */
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* amikor nyitva van */
  body.nav-open .main-nav {
    display: flex;
  }

  /* menüpontok mobilon */
  .main-nav .nav-link,
  .main-nav a {
    display: block;
    width: 100%;
    padding: 12px 10px;
    border-radius: 12px;
  }
}
.site-header { position: sticky; top: 0; z-index: 1000; }
.main-nav { position: relative; z-index: 1001; }
/* ===============================
   ÁRAZÓ – MOBIL RESZPONZÍV
================================ */
@media (max-width: 820px) {

  /* a két hasáb egymás alá kerüljön */
  .grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  /* a méret mezők (szél/mag/mély) egymás alá */
  .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .field input,
  .field select,
  input[type="number"],
  select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* gombok mobilon full szélesek legyenek, ne lógjanak ki */
  #addCabinetBtn,
  #clearCabinetsBtn,
  #quoteBtn {
    width: 100%;
  }

  /* oldalsó ár-kártya ne legyen túl keskeny/margós */
  .price-card {
    width: 100%;
    box-sizing: border-box;
  }

  /* hosszú ár sorok tördelődjenek */
  #totalPrice,
  .cab-row,
  .cab-row-left,
  .cab-row-sub,
  .cab-row-price {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
/* ===== FIX: mobil hamburger menü link színek ===== */
@media (max-width: 820px) {
  body.nav-open .main-nav{
    display:flex; /* biztos ami biztos */
  }

  .main-nav .nav-link{
    color:#111 !important;      /* fehér helyett fekete */
    opacity:1 !important;
  }

  .main-nav .nav-link.active{
    background:#111 !important;
    color:#fff !important;
  }
}
/* ===== FIX: árazó (cabList) ne lógjon ki mobilon ===== */
#cabList > div{
  flex-wrap: wrap;          /* tördeljen sorokra */
  align-items: flex-start;  /* ne középre kényszerítse */
  gap:10px;
}

#cabList > div > *{
  min-width: 0;             /* engedje a tördelést */
}

#cabList button{
  flex: 0 0 auto;           /* gomb ne nyúljon */
  white-space: nowrap;
}

/* ha bárhol hosszú szöveg van: */
#price, #price *{
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* ===== ÁRAK ELREJTÉSE (csak számol, de nem látszik) ===== */

/* szekrény listában a soronkénti ár/bontás (ha van ilyen elem) */
#price .cab-row-price,
#price .cab-row .priceLine,
#price .cab-row .cab-row-price {
  display: none !important;
}
#totalPrice{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}
.hero-image{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.hero-img{
  max-width:420px;
  width:100%;
  height:auto;
  object-fit:contain;
  box-shadow:none;
}

/* ===== LOGÓ BEÚSZÓ ANIMÁCIÓ (HuHa balról, Bútor jobbról) ===== */

.logo-anim{
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  position: relative;
  overflow: hidden;              /* ne lógjon ki anim közben */
  will-change: transform;
}

.logo-anim .logo-left,
.logo-anim .logo-right{
  display: inline-block;
  will-change: transform, filter;
}

/* alapállapot: képernyőn kívül */
.logo-anim .logo-left{ transform: translateX(-130%); }
.logo-anim .logo-right{ transform: translateX(130%); }

/* indításkor fusson le */
.logo-anim.run .logo-left{
  animation: logoInLeft 900ms cubic-bezier(.2,.9,.2,1.1) forwards;
}
.logo-anim.run .logo-right{
  animation: logoInRight 900ms cubic-bezier(.2,.9,.2,1.1) forwards;
}

/* pici “ütközés” a teljes logón (finom bounce) */
.logo-anim.run{
  animation: logoImpact 900ms cubic-bezier(.2,.9,.2,1.1) forwards;
}

@keyframes logoInLeft{
  0%   { transform: translateX(-130%); }
  65%  { transform: translateX(8%); }     /* kicsit túlfut */
  100% { transform: translateX(0%); }
}

@keyframes logoInRight{
  0%   { transform: translateX(130%); }
  65%  { transform: translateX(-8%); }    /* kicsit túlfut */
  100% { transform: translateX(0%); }
}

@keyframes logoImpact{
  0%   { transform: scale(1); }
  60%  { transform: scale(1); }
  70%  { transform: scale(1.03); }        /* “kocc” */
  100% { transform: scale(1); }
}

/* ha valaki nem kér animációt (accessibility) */
@media (prefers-reduced-motion: reduce){
  .logo-anim, .logo-anim *{
    animation: none !important;
    transform: none !important;
  }
}
/* ===== LOGÓ "KOCCHANÁS" FÉNYCSÍK (középről kifelé) ===== */

.logo-anim{
  position: relative;
  overflow: hidden; /* fontos: a fény ne lógjon ki */
}

/* fénycsík réteg */
.logo-anim::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scaleX(0);
  width: 140%;
  height: 2.2em;                 /* a logó magasságához igazodik */
  pointer-events:none;
  opacity: 0;

  /* középen erős, széleken eltűnő fény */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.0) 35%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.0) 65%,
    rgba(255,255,255,0) 100%
  );

  filter: blur(6px);
  mix-blend-mode: screen;        /* sötét headeren szépen világít */
}

/* amikor fut az animáció, indítsuk késleltetve (a koccanásnál) */
.logo-anim.run::after{
  animation: logoGlowBurst 520ms ease-out forwards;
  animation-delay: 700ms; /* ezt finomhangolhatod: 600–800ms között */
}

@keyframes logoGlowBurst{
  0%   { opacity:0; transform: translate(-50%,-50%) scaleX(0); }
  15%  { opacity:1; transform: translate(-50%,-50%) scaleX(0.15); }
  60%  { opacity:0.9; transform: translate(-50%,-50%) scaleX(1); }
  100% { opacity:0; transform: translate(-50%,-50%) scaleX(1.2); }
}
/* ===== Anyagválasztó katalógus (kép + kereső) ===== */
.mat-picker { position: relative; }

.mat-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}

.mat-thumb{
  width:34px; height:34px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid rgba(0,0,0,.08);
  flex:0 0 auto;
}

.mat-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mat-name{ font-weight:700; line-height:1.2; }
.mat-sub{ font-size:12px; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mat-panel{
  position:absolute;
  top: calc(100% + 10px);
  left:0; right:0;
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
  z-index:2000;
  display:none;
  overflow:hidden;
}

.mat-picker.open .mat-panel{ display:block; }

.mat-search{
  width:100%;
  border:0;
  border-bottom:1px solid #eee;
  padding:12px 14px;
  outline:none;
  font-size:14px;
}

.mat-list{
  max-height: 320px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.mat-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  cursor:pointer;
}
.mat-item:hover{ background:#f6f6f6; }

.mat-item .mat-thumb{ width:40px; height:40px; border-radius:12px; }
/* ===== Anyag minta előnézet (korpusz/front) ===== */
.mat-preview{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:14px;
  background:#fafafa;
}

.mat-thumb{
  width:54px;
  height:54px;
  border-radius:12px;
  object-fit:cover;
  background:#e9e9e9;
  border:1px solid rgba(0,0,0,0.06);
  flex:0 0 auto;
}

.mat-meta{ min-width:0; }
.mat-name{ font-weight:800; font-size:14px; line-height:1.2; }
.mat-code{ font-size:12px; opacity:.7; margin-top:4px; }
.mat-panel{
display:none;
position:absolute;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
width:100%;
max-height:320px;
overflow:auto;
z-index:20;
}

.mat-panel.open{
display:block;
}
.mat-picker{
position:relative;
width:100%;
}
.mat-item{
display:flex;
gap:10px;
padding:10px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.mat-item:hover{
background:#f4f4f4;
}

.mat-thumb{
width:36px;
height:36px;
border-radius:4px;
object-fit:cover;
}
.mat-panel{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
border:1px solid #ddd;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
max-height:420px;
overflow:auto;
z-index:50;
}

.mat-panel.open{
display:block;
}

.mat-search{
width:100%;
padding:10px;
border:none;
border-bottom:1px solid #ddd;
outline:none;
}

.mat-list{
padding:10px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:10px;
}

.mat-item{
background:#fff;
border:1px solid #eee;
border-radius:8px;
cursor:pointer;
overflow:hidden;
transition:all .15s;
}

.mat-item:hover{
border-color:#bbb;
transform:scale(1.03);
}

.mat-thumb{
width:100%;
height:70px;
object-fit:cover;
display:block;
}

.mat-meta{
padding:6px;
font-size:12px;
text-align:center;
}

.mat-name{
font-weight:600;
}

.mat-sub{
color:#777;
font-size:11px;
}
.mat-picker{position:relative}

.mat-panel{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
max-height:350px;
overflow:auto;
z-index:50;
}

.mat-panel.open{
display:block;
}

.mat-item{
display:flex;
gap:10px;
padding:8px;
cursor:pointer;
border-bottom:1px solid #eee;
}

.mat-item:hover{
background:#f3f3f3;
}

.mat-thumb{
width:40px;
height:40px;
object-fit:cover;
}
/* MATERIAL PICKER */

.mat-picker{
position:relative;
width:100%;
}

.mat-btn{
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:10px;
border:1px solid #ddd;
border-radius:8px;
background:#fff;
cursor:pointer;
}

.mat-btn:hover{
border-color:#aaa;
}

.mat-panel{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
border:1px solid #ddd;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
max-height:420px;
overflow:auto;
z-index:50;
}

.mat-panel.open{
display:block;
}

.mat-search{
width:100%;
padding:10px;
border:none;
border-bottom:1px solid #ddd;
outline:none;
}

.mat-list{
padding:12px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
gap:10px;
}

.mat-item{
border:1px solid #eee;
border-radius:8px;
cursor:pointer;
overflow:hidden;
transition:.15s;
background:#fff;
}

.mat-item:hover{
transform:scale(1.04);
border-color:#bbb;
}

.mat-thumb{
width:100%;
height:70px;
object-fit:cover;
}

.mat-meta{
padding:6px;
font-size:12px;
text-align:center;
}

.mat-name{
font-weight:600;
}

.mat-sub{
color:#777;
font-size:11px;
}

/* brand cím */
.mat-brand{
grid-column:1/-1;
font-weight:bold;
margin:8px 0 4px;
font-size:13px;
}
/* MATERIAL PICKER */

.mat-picker{
position:relative;
width:100%;
}

.mat-btn{
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:10px;
background:#fff;
cursor:pointer;
font-weight:600;
}

.mat-btn:hover{
border-color:#999;
}

.mat-panel{
display:none;
position:absolute;
top:100%;
left:0;
width:100%;
background:#fff;
border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
max-height:420px;
overflow:auto;
z-index:100;
}

.mat-panel.open{
display:block;
}

.mat-search{
width:100%;
padding:12px;
border:none;
border-bottom:1px solid #eee;
font-size:14px;
outline:none;
}

.mat-list{
padding:12px;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
gap:12px;
}

.mat-brand{
grid-column:1/-1;
font-weight:bold;
margin:10px 0 5px;
font-size:14px;
}

.mat-item{
border:1px solid #eee;
border-radius:10px;
cursor:pointer;
overflow:hidden;
transition:.2s;
background:#fff;
}

.mat-item:hover{
transform:scale(1.05);
border-color:#bbb;
}

.mat-thumb{
width:100%;
height:80px;
object-fit:cover;
background:#eee;
}

.mat-meta{
padding:6px;
text-align:center;
}

.mat-name{
font-size:12px;
font-weight:600;
}

.mat-sub{
font-size:11px;
color:#777;
}
/* ===== MATERIAL PICKER ===== */

.mat-panel{
max-height:420px;
overflow-y:auto;
padding:10px;
}

/* lista */

.mat-list{
display:flex;
flex-direction:column;
gap:8px;
}

/* dekor sor */

.mat-item{
display:grid;
grid-template-columns:44px 1fr;
align-items:center;
gap:10px;

padding:10px;

border:1px solid #e5e5e5;
border-radius:10px;

background:#fff;
cursor:pointer;
}

/* kép */

.mat-item img{
width:44px;
height:44px;

border-radius:6px;
object-fit:cover;
}

/* szöveg blokk */

.mat-meta{
display:flex;
flex-direction:column;
}

/* dekor név */

.mat-name{
font-size:14px;
font-weight:600;
}

/* dekor kód */

.mat-sub{
font-size:12px;
color:#777;
}
/* ===== MATERIAL PICKER FIX ===== */

.mat-panel{
max-height:420px;
overflow-y:auto;
padding:10px;
}

.mat-list{
display:flex;
flex-direction:column;
gap:10px;
}

.mat-item{
display:flex;
align-items:center;
gap:12px;

padding:10px;

min-height:60px;

border:1px solid #e5e5e5;
border-radius:10px;

background:#fff;

cursor:pointer;
}

/* kép */

.mat-item img{
width:44px;
height:44px;

border-radius:6px;

object-fit:cover;

flex-shrink:0;
}

/* szöveg blokk */

.mat-meta{
display:flex;
flex-direction:column;
}

/* dekor név */

.mat-name{
font-size:14px;
font-weight:600;
line-height:1.2;
}

/* dekor kód */

.mat-sub{
font-size:12px;
color:#777;
line-height:1.2;
}
/* ===== MOBILE LAYOUT FIX ===== */

@media (max-width: 768px){

  .grid{
    display:flex;
    flex-direction:column;
  }

  .price-card{
    order:-1;
  }

}
@media (max-width:768px){

.mat-picker{
width:100%;
}

.mat-panel{
width:100%;
}

}
.theme-btn{

margin-left:10px;
font-size:18px;
background:none;
border:none;
cursor:pointer;

}
/* THEME VARIABLES */

:root{
--bg:#ffffff;
--text:#1a1a1a;
--card:#f5f5f5;
--border:#e5e5e5;
}

.dark{
--bg:#121212;
--text:#eeeeee;
--card:#1f1f1f;
--border:#333;
}

body{
background:var(--bg);
color:var(--text);
transition:background .3s,color .3s;
}

.card{
background:var(--card);
border:1px solid var(--border);
}


/* THEME SWITCH */

.theme-switch{
position:relative;
display:inline-block;
width:50px;
height:26px;
margin-left:12px;
}

.theme-switch input{
opacity:0;
width:0;
height:0;
}

.theme-slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#ccc;
transition:.3s;
border-radius:34px;
}

.theme-slider:before{
position:absolute;
content:"☀️";
display:flex;
align-items:center;
justify-content:center;

font-size:12px;

height:20px;
width:20px;
left:3px;
bottom:3px;

background:white;

transition:.3s;

border-radius:50%;
}
.dark .theme-slider:before{
content:"🌙";
}

.theme-switch input:checked + .theme-slider{
background:#444;
}

.theme-switch input:checked + .theme-slider:before{
transform:translateX(24px);
}
/* FOOTER */

footer{
color:#333;
background:#f5f5f5;
}

footer a{
color:#333;
}

.dark footer{
background:#111;
color:#e6e6e6;
}

.dark footer a{
color:#ffffff;
}
footer{
padding:20px 0;
font-size:14px;
text-align:center;
border-top:1px solid #ddd;
}

.dark footer{
border-top:1px solid #333;
}
/* ===== ÁRKALKULÁTOR DARK MODE ===== */

.dark .calculator,
.dark .card{
background:#1c1c1c;
color:#ffffff;
}

/* címkék */
.dark label{
color:#e0e0e0;
}

/* input mezők */

.dark input,
.dark select{
background:#2a2a2a;
color:#ffffff;
border:1px solid #444;
}

/* placeholder */

.dark input::placeholder{
color:#999;
}

/* jobb oldali panel */

.dark .materials-panel{
background:var(--card);
color:var(--text);
}

/* ár szöveg */

.dark .price{
color:#ffffff;
}

/* info szöveg */

.dark .calculator-info{
color:#cccccc;
}
/* ===== ÁRKALKULÁTOR JOBB PANEL DARK MODE ===== */

.dark .materials-panel{
background:#1e1e1e;
color:#ffffff;
}

.dark .materials-panel h3{
color:#ffffff;
}

.dark .materials-panel label{
color:#dddddd;
}

.dark .materials-panel hr{
border-color:#444;
}

.dark .materials-panel input{
accent-color:#ffffff;
}
.dark .materials-panel .price{
color:#ffffff;
}
.dark #price .price-card{
background:#1e1e1e;
color:#ffffff;
}

.dark #price .price-card label{
color:#dddddd;
}

.dark #price .price-card h3{
color:#ffffff;
}
/* =========================================
   GLOBAL THEME FIX (Light / Dark stabil)
========================================= */

#price .price-card,
.card,
.total-box,
#cabList div,
#drawerOptions,
#slidingOptions,
#worktopFields,
.mat-btn,
.mat-panel,
.mat-item,
.mat-preview{
background:var(--card) !important;
color:var(--text) !important;
border-color:var(--border) !important;
}

/* INPUT mezők */

#price input,
#price select,
#price textarea{
background:var(--bg);
color:var(--text);
border:1px solid var(--border);
}

/* material picker panel */

.mat-panel{
background:var(--card);
}

/* material item */

.mat-item{
background:var(--card);
}

/* modal */

.modal-content{
background:var(--card);
color:var(--text);
}

/* cab list */

#cabList div{
background:var(--card);
}

/* total box */

.total-box{
background:var(--card);
}

/* drawer / options */

#drawerOptions,
#slidingOptions,
#worktopFields{
background:var(--card);
}

/* buttons dark mode */

.dark button{
background:#000;
color:#fff;
}

/* ===== DARK MODE SPECIFIC ===== */

.dark #price input,
.dark #price select{
background:#2a2a2a;
border:1px solid #444;
color:#fff;
}

.dark #cabList button{
background:#ffdddd;
color:#a30000;
}

.dark .mat-item:hover{
background:#2a2a2a;
}

.dark .gallery-tab{
border-color:#888;
color:#fff;
}