/* =========================================
   EnZenem – TELJES style.css (BLUE THEME)
   – Kék háttér, arany akcentus
   – Topbar logó: desktop 100×100, mobil 92×92
   – Menülemezek: fekete vinyl + arany glow hover/aktív
   – Referenciák: 16:9, középre igazítva, kompakt keret
   ========================================= */

* { box-sizing: border-box }

/* --------- Színek --------- */
:root{
  --bg1:#0d1b2a;   /* mélyebb kék */
  --bg2:#123254;   /* közép kék */
  --bg3:#16436f;   /* világosabb kék */
  --ink:#eef4fb;   /* fő szöveg – törtfehér kékes */
  --muted:#bcd0e6; /* halvány szöveg */
  --accent:#ffd166; /* arany */
  --accent2:#06d6a0;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

/* --------- Alapok --------- */
html, body { height: 100%; }
html { scroll-padding-top: 92px; }
section { scroll-margin-top: 92px; }

body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 70% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse at center, var(--bg3) 0%, var(--bg2) 48%, var(--bg1) 100%);
  overflow-x:hidden;
}

/* finom háttér textúra */
.bg-vinyl{
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at center, rgba(255,255,255,.07) 0 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,255,255,.04) 0 2px, transparent 2px);
  background-size: 6px 6px, 12px 12px;
  opacity:.28;
  pointer-events:none;
}

/* --------- Topbar --------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(13,27,42,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(188,208,230,.18);
}

.brand{
  display:flex; align-items:center; gap:14px;
  padding:18px 22px 10px 22px;
}
.brand h1{ margin:0; font-size:1.35rem; letter-spacing:.3px }
.brand p{ margin:2px 0 0 0; color:var(--muted); font-size:.9rem }

/* --------- LOGÓ: pontosan a HTML-ben szereplő elemre célozva --------- */
/* Desktop: 100×100 */
@media (min-width: 1025px){
  .topbar .brand > img.spinning-vinyl{
    width: 100px !important;
    height: 100px !important;
    margin: 10px 22px !important;
    animation:
      vinyl-intro var(--vinyl-intro, 1.3s) ease-out var(--vinyl-intro-delay, 0s) both,
      spin var(--vinyl-spin, 8s) linear infinite calc(var(--vinyl-intro, 1.3s) + var(--vinyl-intro-delay, 0s)) !important;
    will-change: transform;
    transform: translate3d(0,0,0);
    transform-origin: 50% 50%;
    contain: paint;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: auto;
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
  }
}

/* Mobil: 92×92 */
@media (max-width: 768px){
  .topbar .brand > img.spinning-vinyl{
    width: 92px !important;
    height: 92px !important;
    margin: 8px 16px !important;
  }
}

/* LOGÓ – NINCS arany glow a logón */
.topbar .brand > img.spinning-vinyl{ position:relative; }
.topbar .brand > img.spinning-vinyl::after{ content:none !important; }

/* Intro + spin keyframes (logó és bármi más használhatja) */
:root{ --vinyl-spin: 8s; --vinyl-intro: 1.3s; --vinyl-intro-delay: 0s; }
@keyframes vinyl-intro {
  from { opacity:0; transform:scale(.92) rotate(-12deg); filter:saturate(.7) brightness(.85); }
  to   { opacity:1; transform:scale(1) rotate(0deg);   filter:none; }
}

/* --------- Menü „lemezek” (vinyl-tabs) --------- */
.vinyl-tabs{
  display:flex; gap:16px; padding:12px 22px 16px 22px; flex-wrap:wrap;
}
.vinyl-tabs .tab{
  position:relative;
  width:86px; height:86px; border-radius:50%;
  border:none; cursor:pointer; color:var(--ink);
  /* fekete vinyl: belül világosabb, kívül sötétebb */
  background:
    radial-gradient(circle at center, #2a2a2a 0 35%, transparent 35% 37%, #111 37% 100%) !important,
    conic-gradient(from 0deg, #1a1a1a, #0f0f0f 60%, #1a1a1a) !important;
  box-shadow: var(--shadow), inset 0 0 0 3px #000, inset 0 0 0 6px #121212;
  display:grid; place-items:center; text-align:center; padding:8px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vinyl-tabs .tab span{ font-size:.78rem; line-height:1.1 }

/* hover/focus/active: arany glow */
.vinyl-tabs .tab:hover,
.vinyl-tabs .tab:focus-visible,
.vinyl-tabs .tab.active{
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px rgba(255,209,102,.45),
    0 0 0 3px rgba(255,209,102,.18),
    inset 0 0 0 3px #000,
    inset 0 0 0 6px #121212;
}

/* --------- Tartalom / tipográfia / kártyák (eredeti stílusok) --------- */
main{ max-width:1100px; margin:18px auto; padding:6px 20px 60px; }
.panel{ display:none; animation:fade .25s ease both }
.panel.active{ display:block !important; transform:none !important; }
@keyframes fade{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
h2{ font-size:1.6rem; margin:18px 0 10px }
p{ color:var(--ink); opacity:.92 }

.badges{ display:grid; gap:8px; margin:14px 0; padding:0 0 0 18px }
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  border:1px solid rgba(188,208,230,.14);
  border-radius:18px; padding:16px; box-shadow:var(--shadow);
}
.card h3{ margin:8px 0 6px }
.price{ color:var(--accent2); font-weight:700 }
.note{ color:var(--muted); font-size:.9rem }

.form {
  display: grid;
  gap: 14px;
}

.form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: .95rem;
}

.form input, .form select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(188,208,230,.22);
  background: rgba(6,24,44,.45);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  max-width: 100%;
}

/* csak a TEXTAREA kapja a scrollos fixet */
.form textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(188,208,230,.22);
  background: rgba(6,24,44,.45);
  color: var(--ink);
  outline: none;

  overflow: auto;              /* belső scroll */
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.5;
  box-sizing: border-box;
  max-width: 100%;

  height: auto;
  min-height: 5em;             /* ≈ 5 sor */
  display: block;
   /* <<< 3 LÉNYEGES FINOMÍTÁS A RÁFUTÁS ELLEN >>> */
  position: relative;   /* saját stacking context */
  z-index: 2;           /* a chips/title alá kerüljön, ne fusson rá */
  scrollbar-gutter: stable; /* ne „ugorjon” be a sáv, ne tolja a szöveget */
  padding-right: 16px;  /* a belső sávnak hagyjunk helyet (nem takarja ki a szöveget) */ 
}

.form input:focus, .form select:focus, .form textarea:focus{
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,209,102,.15);
}
/* --- Kézbesítési blokk, a Csomag mezőhöz igazítva --- */
.delivery-options {
  display: grid;
  font-weight: 600;
  font-size: .95rem;
  gap: 6px;
  transform: translateY(-2px);   /* <<< ez hozza pontosan egy szintbe */
}

.delivery-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 0;             /* eltávolítjuk a duplázódást */
}

/* --- Gombok --- */
.delivery-btn {
  flex: 1 1 auto;
  height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #d4af37;
  background: rgba(6, 24, 44, 0.55);
  color: #f3d27a;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  box-sizing: border-box;
  cursor: pointer;
  transition: all .18s ease-out;
}

/* Hover csak a nem aktív gombokon legyen látványos */
.delivery-btn:hover:not(.active) {
  background: rgba(212, 175, 55, 0.25);
  border-color: #e8c45a;
  color: #ffeeb3;
}

/* Aktív (kiválasztott) gomb — áttetsző arany, mindig jól olvasható szöveg */
.delivery-btn.active {
  background: rgba(212, 175, 55, 0.35);
  border-color: #f1d36d;
  color: #06182c;
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.25);
}

/* Hover fix – ne villogjon, ha egy active fölött vagy */
.delivery-btn.active:hover {
  background: rgba(212, 175, 55, 0.35);
  border-color: #f1d36d;
  color: #06182c;
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.25);
}


.form .grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px }
.form .grid .full{ grid-column: 1 / -1 }
.check{ align-items:center; grid-auto-flow:column; grid-template-columns: auto 1fr }
.actions{ display:flex; align-items:center; gap:12px; margin-top:4px }
.primary{
  padding:12px 16px; border-radius:12px; border:1px solid rgba(188,208,230,.22);
  background: linear-gradient(180deg, #1d3557, #0f2744);
  color:var(--ink); cursor:pointer; font-weight:700;
  box-shadow: var(--shadow);
}
.form-status{ color:var(--accent); min-height:1.2em }

.embeds{ display:grid; grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); gap:16px }
.embed{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(188,208,230,.14);
  border-radius:18px; padding:10px; box-shadow:var(--shadow)
}
.embed p{ color:var(--muted); font-size:.9rem }

/* kontakt rács */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px }
.contacts{ list-style:none; padding:0; margin:6px 0 }
.contacts li{ margin:6px 0; color:var(--muted) }

/* lábléc */
footer{
  text-align:center; padding:30px 12px; color:var(--muted);
  border-top:1px solid rgba(188,208,230,.18)
}

/* reszponzív */
@media (max-width: 720px){
  .vinyl-tabs{ justify-content:center }
  .form .grid{ grid-template-columns: 1fr }
  .contact-grid{ grid-template-columns: 1fr }
}

/* --------- ÁSZF sáv + Licenc modál (változatlan) --------- */
.consent{
  position: fixed;
  left: 18px; right: 18px; bottom: 18px;
  display: none; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(13,27,42,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(188,208,230,.22);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 1000;
}
.consent.show{ display: flex; }
.consent p{ margin:0; color: var(--ink); font-size:.95rem }
.consent a{ color: var(--accent); text-decoration: underline; }
@media (max-width: 640px){
  .consent{ flex-direction: column; align-items: stretch; }
  .consent .primary{ width: 100%; }
}

.license-modal{
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(13,27,42,.75); backdrop-filter: blur(6px); z-index: 1000;
}
.license-modal.show{ display: grid; }
.license-card{
  max-width: 560px; margin: 0 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(188,208,230,.22);
  border-radius: 16px; padding: 18px; box-shadow:var(--shadow);
  color: var(--ink); text-align: left;
}
.license-card p{ margin: 0 0 12px 0 }
.license-card .actions{ display:flex; gap:10px; justify-content:flex-end }

/* --------- Általános „spinning-vinyl” (más helyekhez) --------- */
.spinning-vinyl{
  display:block;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* --------- Jump link --------- */
.jump-link{
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.jump-link:hover{ opacity:.85 }

/* --------- REFERENCIÁK – keret és videó igazítás --------- */
/* A te HTML-edben sok .embed.small NINCS az .embeds gridben → mindkét esetre optimalizálunk */
.embed.small{
  max-width: 380px;
  margin: 0 auto 16px;
  padding: 10px;
  display:flex; flex-direction:column; align-items:center;
}
.embed .video{
  position: relative !important;
  width: 100% !important;
  max-width: 360px !important;     /* Desktop keret */
  aspect-ratio: 16 / 9 !important; /* pontos 16:9 */
  padding-top: 0 !important;
  margin: 0 auto !important;       /* középre */
}
.embed .video iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  border-radius: 8px;
}
.embed.small p{ text-align:center; }

/* mobilon szűkebb a kártya/videó */
@media (max-width: 768px){
  .embed.small{ max-width: 340px; }
  .embed .video{ max-width: 320px !important; }
}
/* === 1) MENÜ – VALÓDI FEKETE BAKELIT + ARANY GLOW, SZÖVEG LÁTSZIK === */
.vinyl-tabs .tab{
  position: relative;
  width: 86px; height: 86px; border-radius: 50%;
  color: var(--ink) !important;
  /* bakelit: sötét belső kör + vékony világosabb gyűrű + sötét külső test + barázdák */
  background:
    radial-gradient(circle at 50% 50%, #1b1b1b 0 34%, #2a2a2a 34% 36%, #0e0e0e 36% 100%) !important,
    repeating-conic-gradient(#151515 0 6deg, #101010 6deg 12deg) !important;
  box-shadow:
    inset 0 0 0 3px #000,
    inset 0 0 0 6px #121212,
    var(--shadow) !important;
  display: grid; place-items: center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.vinyl-tabs .tab span{
  position: relative; z-index: 2;   /* a szöveg mindig a glow fölött marad */
}

/* arany glow hover/focus/active – külön rétegen, hogy minden nézetben látszódjon */
.vinyl-tabs .tab::after{
  content:""; position:absolute; inset:-10%; border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity .2s ease;
  background: radial-gradient(closest-side,
              rgba(255,230,140,.50),
              rgba(255,210,80,.22) 55%,
              rgba(0,0,0,0) 70%);
  filter: blur(10px);
z-index: 3; /* a glow biztosan a lemez és a span fölött legyen */
}
.vinyl-tabs .tab:hover,
.vinyl-tabs .tab:focus-visible,
.vinyl-tabs .tab.active{
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px rgba(255,209,102,.40),
    0 0 0 3px rgba(255,209,102,.18),
    inset 0 0 0 3px #000,
    inset 0 0 0 6px #121212 !important;
   color: var(--accent) !important;
  text-shadow: 0 0 6px rgba(243,210,122,.4);
}
.vinyl-tabs .tab:hover::after,
.vinyl-tabs .tab:focus-visible::after,
.vinyl-tabs .tab.active::after{
  opacity: 1;
}

/* === 2) REFERENCIÁK – VIDEÓK 2× NAGYOBBRA, MINDIG KÖZÉPRE, 16:9 === */
/* a te HTML-edben az első .embed.small az .embeds-ben van, a többi kívül – mindkettőt lefedjük */
.embeds{ display: block !important; }  /* ne zsugorítsa grid a legelsőt kicsire */

.embed.small{
  max-width: 760px !important;         /* kártya 2× szélesebb */
  margin: 0 auto 18px !important;
  padding: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.embed .video{
  position: relative !important;
  width: 100% !important;
  max-width: 720px !important;         /* a videó tényleges szélessége (≈ 2×) */
  aspect-ratio: 16 / 9 !important;
  padding-top: 0 !important;
  margin: 0 auto !important;           /* KÖZÉPEN */
}

.embed .video iframe{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  border-radius: 8px;
}

.embed.small p{ text-align: center !important; }

/* mobilon arányosan kisebb, de továbbra is egységes */
@media (max-width: 768px){
  .embed.small{ max-width: 360px !important; }
  .embed .video{ max-width: 340px !important; }
}
/* === MENÜ – FEKETE BAKELIT, NEM FEHÉR BELSŐ; SZÖVEG LÁTSZIK === */
.vinyl-tabs .tab{
  position: relative;
  width: 86px; height: 86px; border-radius: 50%;
  /* teljes sötét-vinyl alapszín */
  background-color: #0b0b0b !important;

  /* bakelit: belső sötét címkekör + vékony világosabb gyűrű + sötét külső test + finom barázdák */
  background-image:
    radial-gradient(circle at 50% 50%, #1a1a1a 0 32%, #262626 32% 36%, #0d0d0d 36% 100%) !important,
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.05) 0 6deg, rgba(255,255,255,0) 6deg 12deg) !important;
  background-blend-mode: normal;
  box-shadow:
    inset 0 0 0 3px #000,
    inset 0 0 0 6px #121212,
    var(--shadow) !important;

  display: grid; place-items: center;
  color: var(--ink) !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

/* szöveg mindig olvasható a sötét alapon */
.vinyl-tabs .tab span{
  position: relative; z-index: 2;
  color: #eef4fb !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.7);
}

/* === MENÜ LEMEZEK – VALÓDI FEKETE BAKELIT, MINDEN NÉZETBEN === */
.vinyl-tabs .tab{
  position: relative;
  width: 86px; height: 86px; border-radius: 50%;
  color: var(--ink) !important;

  /* bakelit: test + vékony perem + koncentrikus barázdák (legfelül) */
  background:
    /* 1) barázdák – nagyon finom körgyűrűk */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.08) 0 1px,
      rgba(255,255,255,0)   1px 3px) !important,
    /* 2) test: belső sötét címke → vékony világosabb perem → sötét külső */
    radial-gradient(circle at 50% 50%,
      #1a1a1a 0 34%,   /* belső címke – sötét grafit */
      #2a2a2a 34% 36%, /* vékony világosabb perem */
      #0b0b0b 36% 100% /* külső mélyfekete test */
    ) !important;

  box-shadow:
    inset 0 0 0 3px #000,
    inset 0 0 0 6px #121212,
    var(--shadow) !important;

  display: grid; place-items: center;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  background-color: #0b0b0b !important; /* védőszín, ha bármely réteg nem rajzolna */
}

/* felirat mindig olvasható a sötét bakeliten */
.vinyl-tabs .tab span{
  position: relative; z-index: 2;
  color: #eef4fb !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}

/* LOGÓ – desktop 100×100, mobilon NAGYOBB és forog (a már meglévő .spinning-vinyl osztállyal) */
@media (min-width:1025px){
  .topbar .brand > img.spinning-vinyl{
    width:100px !important; height:100px !important;
  }
}
@media (max-width:768px){
  .topbar .brand > img.spinning-vinyl{
    width:112px !important; height:112px !important;  /* mobilon nagyobb */
  }
}

/* MENÜ LEMEZEK – valódi fekete bakelit (koncentrikus barázdák), felirat látszik */
.vinyl-tabs .tab{
  position:relative;
  width:86px; height:86px; border-radius:50%;
  background-color:#0b0b0b !important; /* védőalap – sosem fehér */
  /* bakelit test + vékony perem + barázdák + enyhe csillanás */
  background-image:
    /* barázdák (koncentrikus) */
    repeating-radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.07) 0 1px,
      rgba(255,255,255,0)   1px 3px),
    /* enyhe csillanás a bal-felső kvadránsban */
    radial-gradient(circle at 30% 30%,
      rgba(255,255,255,.10) 0%,
      rgba(255,255,255,0) 55%),
    /* belső címke (sötét) → vékony világos perem → külső mélyfekete test */
    radial-gradient(circle at 50% 50%,
      #1a1a1a 0 34%,
      #2a2a2a 34% 36%,
      #0b0b0b 36% 100%);
  box-shadow:
    inset 0 0 0 3px #000,
    inset 0 0 0 6px #121212,
    0 6px 18px rgba(0,0,0,.35) !important;
  display:grid; place-items:center;
}

.vinyl-tabs .tab span{
  position:relative; z-index:2;
  color:#eef4fb !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
}

/* Az arany glow-hoz nem nyúlunk – a meglévő :hover/:active szabályok maradnak. */
/* === HIBAJAVÍTÁS: Üzenetablak csak a Kapcsolat panelen === */
#thanksOverlay #overlayClose{
  margin-top: 4px;
  min-width: 120px;
}
/* Ne legyen a videó 720px fölé nagyítva – így nem pixelesedik felülskálázva */
.embed .video { width: min(100%, 720px) !important; max-width: 720px !important; }
.embed .video iframe {
  width: 100% !important;
  height: 100% !important;
  image-rendering: auto;           /* böngészőknek jelzés: normál mintavételezés */
  -ms-interpolation-mode: bicubic; /* régi Edge/IE fallback – ártani nem árt */
}

/* === Samsung Internet fix: valódi bakelit SVG textúrával + határozott arany glow === */
.ua-samsung .vinyl-tabs .tab{
  background-color:#0b0b0b !important;
  background-image:
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
  <defs>\
    <radialGradient id='g' cx='50%' cy='50%' r='50%'>\
      <stop offset='0%'  stop-color='%231a1a1a'/>\
      <stop offset='34%' stop-color='%231a1a1a'/>\
      <stop offset='36%' stop-color='%232a2a2a'/>\
      <stop offset='37%' stop-color='%230b0b0b'/>\
      <stop offset='100%' stop-color='%230b0b0b'/>\
    </radialGradient>\
  </defs>\
  <!-- test + címkeperem -->\
  <circle cx='50' cy='50' r='50' fill='url(%23g)'/>\
  <!-- barázdák (koncentrikus körök) -->\
  <g stroke='%23ffffff' stroke-opacity='0.08' fill='none'>\
    <circle cx='50' cy='50' r='49'/>\
    <circle cx='50' cy='50' r='47'/>\
    <circle cx='50' cy='50' r='45'/>\
    <circle cx='50' cy='50' r='43'/>\
    <circle cx='50' cy='50' r='41'/>\
    <circle cx='50' cy='50' r='39'/>\
    <circle cx='50' cy='50' r='37'/>\
    <circle cx='50' cy='50' r='35'/>\
  </g>\
</svg>");
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:100% 100% !important;
  /* a meglévő box-shadow maradhat, ezért nem írjuk felül */
}

/* Felirat biztosan látszódjon ugyanúgy */
.ua-samsung .vinyl-tabs .tab span{
  color:#eef4fb !important;
  text-shadow:0 1px 1px rgba(0,0,0,.8);
}

/* topbar üvegezés – arany tónus */
.theme-gold .topbar{
  background: rgba(26,18,6,.55);
  border-bottom: 1px solid rgba(255,210,100,.18);
  backdrop-filter: blur(10px);
}

/* opcionális: kártyák enyhe arany pereme (ízlés kérdése) */
.theme-gold .card{
  border-color: rgba(255,210,100,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
/* === GOLD THEME – világos, pezsgős arany (Samsung-safe) =================== */
/* használat: <body class="gold-theme"> */
body.gold-theme{
  /* 0) biztos alap – ha bármi nem rajzolódik, akkor se legyen sötét */
  background-color: #FFE8A3; /* világos arany-alap */

  /* 1) fémes arany rétegek – kifejezetten világos tónusokkal */
  background-image:
    /* nagyon enyhe szemcse (aránylag világos) */
    repeating-linear-gradient(
      45deg,
      rgba(255, 245, 210, .06) 0 2px,
      rgba(255, 245, 210, 0)   2px 4px
    ),
    /* keskeny csillanás-sáv bal-fentről */
    linear-gradient(125deg,
      rgba(255, 255, 255, .35) 0%,
      rgba(255, 255, 255, .10) 18%,
      rgba(255, 255, 255, 0)   38%
    ),
    /* fő arany átmenet – VILÁGOS tónusok, nincs sötétbarna */
    radial-gradient(1100px 650px at 60% -10%,
      #FFF7CF 0%,
      #FFECA4 28%,
      #FFE38A 50%,
      #FFD873 70%,
      #FFC957 100%
    );
  background-blend-mode: normal, screen, normal;
}

/* finom vignetta – jóval enyhébb, ne sötétítsen túl */
body.gold-theme::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(115% 115% at 50% 42%,
              rgba(0,0,0,0) 60%,
              rgba(0,0,0,.12) 100%);
  z-index:0;
}

/* a pontozott textúra aranyosítása (ha használod .bg-vinyl-t) */
body.gold-theme .bg-vinyl{
  background-image:
    radial-gradient(circle at center, rgba(255,235,170,.12) 0 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,235,170,.07) 0 2px, transparent 2px);
  opacity:.25;
}

/* (opcionális) nagyon finom csillanás anim – nem változtat színen */
@keyframes goldSweepSoft {
  from { background-position: 0 0, -200% 0, 0 0; }
  to   { background-position: 0 0, 200% 0, 0 0; }
}
body.gold-theme.gold-shimmer{
  background-size:
    auto, 400% 100%, auto;
  animation: goldSweepSoft 9s linear infinite;
}
/* === GOLD THEME – közepes kontraszt, olvasható felirat ==================== */
body.gold-theme{
  /* biztonsági alap, ha egy réteg nem rajzolódik */
  background-color:#F3CD76;

  /* rétegek: enyhe textúra + csillanás + két nagy arany átmenet */
  background-image:
    /* finom szemcse – alig látszik, nem sötétít */
    repeating-linear-gradient(
      45deg,
      rgba(255,240,200,.06) 0 2px,
      rgba(255,240,200,0)   2px 4px
    ),
    /* keskeny csillanás bal-fentről – világosít (screen) */
    linear-gradient(125deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 18%,
      rgba(255,255,255,0)   40%
    ),
    /* fő világos→közepes arany felülről-jobbról */
    radial-gradient(1100px 700px at 70% -10%,
      #FFF1B8 0%,
      #FFE08A 35%,
      #F9C85E 60%,
      #E8B247 85%,
      #D79A2E 100%
    ),
    /* közép→mély arany alulról-balról, hogy legyen kontraszt */
    radial-gradient(1200px 800px at -10% 110%,
      #8F6A1A 0%,
      #A97B1E 35%,
      #C28D25 65%,
      rgba(0,0,0,0) 100%
    );
  /* a csillanás réteg világosítson, a többi normál */
  background-blend-mode: normal, screen, normal, normal;
}

/* enyhe vignetta a széleken – csak kicsit, hogy ne sötétítsen túl */
body.gold-theme::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(120% 120% at 50% 45%,
              rgba(0,0,0,0) 62%,
              rgba(0,0,0,.10) 100%);
}

/* a pont-minta aranyosítása (ha használod a .bg-vinyl-t) */
body.gold-theme .bg-vinyl{
  background-image:
    radial-gradient(circle at center, rgba(255,230,160,.12) 0 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,230,160,.06) 0 2px, transparent 2px);
  opacity:.22;
}
/* === GOLD THEME OVERRIDE — a régi háttér lenullázása, majd az arany témát erőből rátenni === */
body.gold-theme{
  /* MINDENT nullázunk, ami korábban backgroundra vonatkozott */
  background: none !important;
  background-color: #F3CD76 !important;
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255,240,200,.06) 0 2px,
      rgba(255,240,200,0)   2px 4px
    ),
    linear-gradient(125deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 18%,
      rgba(255,255,255,0)   40%
    ),
    radial-gradient(1100px 700px at 70% -10%,
      #FFF1B8 0%,
      #FFE08A 35%,
      #F9C85E 60%,
      #E8B247 85%,
      #D79A2E 100%
    ),
    radial-gradient(1200px 800px at -10% 110%,
      #8F6A1A 0%,
      #A97B1E 35%,
      #C28D25 65%,
      rgba(0,0,0,0) 100%
    ) !important;
  background-blend-mode: normal, screen, normal, normal !important;
}

/* a textúra réteget finomítjuk, hogy ne “kékezzen” be */
body.gold-theme .bg-vinyl{
  background-image:
    radial-gradient(circle at center, rgba(255,230,160,.12) 0 1px, transparent 1px),
    radial-gradient(circle at center, rgba(255,230,160,.06) 0 2px, transparent 2px) !important;
  opacity:.18 !important; /* ha még zavar, állítsd 0–0.18 között */
}

/* enyhe vignetta az aranyon */
body.gold-theme::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(120% 120% at 50% 45%,
              rgba(0,0,0,0) 62%,
              rgba(0,0,0,.10) 100%);
}
/* === GOLD THEME — teljesen egyszínű, sötét arany háttér === */
body.gold-theme{
  /* mindent lenullázunk, hogy ne maradjon régi gradient */
  background: none !important;
  background-image: none !important;
  background-color: #8F6A1A !important; /* sötét arany */
  background-blend-mode: normal !important;
}

/* arany téma alatt ne rajzoljon textúrát / vignettát */
body.gold-theme .bg-vinyl{ display: none !important; }
body.gold-theme::after{ content: none !important; }

/* brief counter */
.brief-counter{font-size:.9rem;opacity:.8;margin-top:.25rem}
.brief-counter.ok{opacity:1;font-weight:600}

/* golden selection glow for package cards */
.package-card.selected,[data-package].selected{
  outline: 2px solid #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,.35), 0 12px 24px rgba(0,0,0,.18);
  transform: translateY(-2px);
  transition: box-shadow .2s, transform .2s, outline-color .2s;
}

/* hover hint for clickable package cards */
.package-card:hover,[data-package]:hover{
  outline: 2px solid #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,.35), 0 12px 24px rgba(0,0,0,.18);
  transform: translateY(-2px);
}

/* Hover hint and selected glow for pricing cards */
.card.package:hover{
  outline: 2px solid #d4af37;
  box-shadow: 0 0 0 3px rgba(212,175,55,.35), 0 12px 24px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.card.package.selected{
  outline: 2px solid #d4af37;
  box-shadow: 0 0 0 4px rgba(212,175,55,.35), 0 16px 28px rgba(0,0,0,.22);
  transform: translateY(-3px);
}
#order #enz-quality.too-short { color: #e74c3c; } /* piros, ha < 120 */
#order #enz-quality.ok        { color: #2ecc71; } /* zöld, ha >= 120 */
/* Desktop only változások – EREDETI MÓDOSÍTÁS, amit tegnap mentettünk */
@media (min-width: 992px) {
  /* Lemezek méretének növelése */
  .vinyl-item {
    transform: scale(1.3); /* +30% */
    transform-origin: center;
  }

  /* Logó növelése a lemezekhez képest */
  .site-logo {
    transform: scale(1.2); /* a korábbi lemezmérethez képest +20% */
    margin: 0 auto;
    display: block;
  }

  /* Címek félkövérré és kicsit nagyobb betűméretre */
  .menu-label, .format-title {
    font-weight: bold; /* félkövér */
    font-size: 1.2em; /* kicsit nagyobb */
    text-align: center;
  }
}
/* ===== VINYL MENU — desktop-only méretezés + középre igazítás ===== */

/* Alap (mobil) – változatlan */
:root{
  --tabSize: 132px;   /* a mostani mobil méreted – marad így */
  --tabFont: 15px;
}

/* Desktop ≥ 992px: lemez +30%, logó +20% a lemezhez képest */
@media (min-width: 992px){

  :root{
    /* 132px × 1.3 = 171.6px → kerekítheted 172-re, ha szeretnéd */
    --tabSize: 171.6px;
    --tabFont: 18px;
  }

  /* Menüsor középre, törhető, hogy ne tolja el a hosszú bemutatkozás */
  .vinyl-tabs{
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 24px;
    flex-wrap: wrap !important;
    text-align: center;
  }

  /* Lemez-gomb: fix méret a változóból, valódi középre rendezés */
  .vinyl-tabs .tab{
    width: var(--tabSize) !important;
    height: var(--tabSize) !important;
    display: grid !important;
    place-items: center !important;  /* vízszint + függőleg közép */
    padding: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Felirat a lemezen: félkövér, középen, max szélesség, ne csússzon */
  .vinyl-tabs .tab span{
    display: block !important;
    max-width: calc(var(--tabSize) - 18px);
    font-size: var(--tabFont) !important;
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: .2px;
    text-align: center !important;
    white-space: nowrap;             /* „Bemutatkozás” egy sorban marad */
    /* bármi korábbi eltolást kinullázunk: */
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* Leghosszabb címkén kis finomhangolás (ha kell) */
  .vinyl-tabs .tab[data-target="intro"] span{
    font-size: calc(var(--tabFont) - .5px) !important;
  }

  /* Logó: mindig 20%-kal nagyobb, mint a menülemez */
  .topbar .brand > img.spinning-vinyl,
  .site-logo img{
    width: calc(var(--tabSize) * 1.20) !important;
    height: calc(var(--tabSize) * 1.20) !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* „Árak / Formátumok” stb. címek: félkövér, nagyobb, középen, sor­törve */
  .menu-label, .menu-caption, .format-title, .pricing-title{
    font-weight: 700 !important;
    font-size: clamp(18px, 1.2rem, 22px) !important;
    line-height: 1.2;
    text-align: center !important;
  }
  .menu-label .line, .menu-caption .line,
  .format-title .line, .pricing-title .line{
    display: block !important;  /* egymás alatt */
  }
}
/* ===== VINYL MENU — desktop override: 50% méret + jobbra igazítás ===== */
@media (min-width: 992px){

  /* skála a korábbi desktop-mérethez képest */
  :root{ --tabScale: .5; }  /* 50% */

  /* a teljes menüsor jobbra húzva (szélesség kitöltve, hogy legyen hely jobbra) */
  .vinyl-tabs{
    width: 100%;
    justify-content: flex-end !important;  /* jobbra igazítás */
    align-items: center !important;
  }

  /* lemezek: a korábban beállított --tabSize felét használjuk */
  .vinyl-tabs .tab{
    width:  calc(var(--tabSize) * var(--tabScale)) !important;
    height: calc(var(--tabSize) * var(--tabScale)) !important;
    margin: 0 !important;                 /* ne középre igazítsa magát */
  }

  /* a lemezen a cím maradjon középen, de méretben arányosan visszavéve */
  .vinyl-tabs .tab span{
    max-width: calc(var(--tabSize) * var(--tabScale) - 14px) !important;
    font-size: calc(var(--tabFont) * var(--tabScale)) !important;
    text-align: center !important;
    white-space: nowrap;
    margin: 0 !important;
  }

  /* logó: a lemez-eredő méret 120%-a, de szintén 50%-ra skálázva */
  .topbar .brand > img.spinning-vinyl,
  .site-logo img{
    width:  calc(var(--tabSize) * 1.20 * var(--tabScale)) !important;
    height: calc(var(--tabSize) * 1.20 * var(--tabScale)) !important;
    margin: 0 !important;    /* ne középre igazítsa */
    display: block !important;
  }
}
/* ===== VINYL MENU — desktop finomhang: -30% méret, BALRA igazítás, cím nem lóg ki ===== */
@media (min-width: 992px){

  /* a korábbi desktop tab-mérethez képest 70% */
  :root{ --tabScale: .7; }  /* 100% → 70% (tehát -30%) */

  /* MENÜSOR: balra igazítva, szép távolságokkal */
  .vinyl-tabs{
    width: 100%;
    justify-content: flex-start !important;   /* BALRA */
    align-items: center !important;
    gap: 20px;
  }

  /* LEMEZ gomb: méret a skálából */
  .vinyl-tabs .tab{
    width:  calc(var(--tabSize) * var(--tabScale)) !important;
    height: calc(var(--tabSize) * var(--tabScale)) !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    margin: 0 !important;                     /* ne középre húzza magát */
    text-align: center !important;
  }

  /* FELIRAT: törhet, középen marad, és okosan skáláz */
  .vinyl-tabs .tab span{
    display: block !important;
    max-width: calc(var(--tabSize) * var(--tabScale) - 14px) !important;
    /* dinamikus méret: a korábbihoz képest 70%, de nem megy 14px alá és 18px fölé */
    font-size: clamp(14px, calc(var(--tabFont) * var(--tabScale) + 1px), 18px) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: .2px;
    text-align: center !important;

    /* << kulcs a kilógás ellen: engedjük a törést >> */
    white-space: normal !important;           /* TÖRHET */
    text-wrap: balance;                       /* szebb törés, ha támogatott */
    word-break: break-word;                   /* hosszú szavaknál is befér */
    hyphens: auto;                            /* ha van HU nyelvi támogatás */

    /* biztos, ami biztos – minden eltolást kinullázunk */
    position: static !important;
    left: auto !important; right: auto !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 0 6px;
  }

  /* EXTRA finomhang a leghosszabb címkére (Bemutatkozás) */
  .vinyl-tabs .tab[data-target="intro"] span{
    font-size: clamp(13.5px, calc(var(--tabFont) * var(--tabScale)), 17px) !important;
  }

  /* LOGÓ: a lemez-eredő méret 120%-a, de a 70%-os skálával együtt */
  .topbar .brand > img.spinning-vinyl,
  .site-logo img{
    width:  calc(var(--tabSize) * 1.20 * var(--tabScale)) !important;
    height: calc(var(--tabSize) * 1.20 * var(--tabScale)) !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;  /* balra igazított sorban ne középre húzza */
  }

  /* CÍMEK (Árak / Formátumok stb.): maradjanak félkövérek és jól olvashatók */
  .menu-label, .menu-caption, .format-title, .pricing-title{
    font-weight: 700 !important;
    font-size: clamp(18px, 1.2rem, 22px) !important;
    line-height: 1.2;
    text-align: left !important;  /* bal oldali menü mellé esztétikusabb */
  }
  .menu-label .line, .menu-caption .line,
  .format-title .line, .pricing-title .line{
    display: block !important;
  }
}
/* ===== LOGÓ = menülemez méret (desktop), nem nagyobb ===== */
@media (min-width: 992px){
  .topbar .brand > img.spinning-vinyl,
  .site-logo img{
    /* ugyanaz a méret, mint a taboké: var(--tabSize) × var(--tabScale) */
    width:  calc(var(--tabSize) * var(--tabScale)) !important;
    height: calc(var(--tabSize) * var(--tabScale)) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;              /* balra igazított sorban maradjon */
    display: block !important;

    /* élsimítás / kisebb pixelesedés */
    image-rendering: auto;
  }
}
@media (min-width: 992px){
  /* integer méret: így a böngésző nem “fél pixelt” skáláz */
  :root{ --tabFinal: 120px; } /* ha szeretnéd: próbáld 116px vagy 128px értéken is */

  .topbar .brand > img.spinning-vinyl,
  .site-logo img{
    width:  var(--tabFinal) !important;
    height: var(--tabFinal) !important;
    /* animáció marad (nem írjuk felül a transform-ot) */
    image-rendering: auto;
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: 50% 50%;
    display: block !important;
  }
}
/* === LOGÓ ÉLESÍTÉS – tegnapi módszer: animáció a WRAPPEREN, a kép fix integer px === */
@media (min-width: 992px){
  /* A wrapper forog → az <img>-et nem skálázzuk/forgatjuk minden frame-ben */
  .spin-wrap{
    /* méret: pontosan akkora, mint a mostani menülemez – NEM nyúlunk a lemezhez */
    width:  var(--tabFinal) !important;   /* nálad ez már be van állítva */
    height: var(--tabFinal) !important;
    display: inline-block;
    animation: spin 8s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: 50% 50%;
  }

  /* maga a kép csak kitölti a wrappert – nincs transform, nincs scale → nincs recésedés */
  .spin-wrap > img.spinning-vinyl,
  .spin-wrap > .site-logo img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    image-rendering: auto !important; /* ne crisp-edges, ne pixelated */
  }
}

/* ha nincs meg valahol a spin keyframes, itt egy biztos definíció */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* === LOGÓ ÉLESÍTÉS – végső override: kép NEM forog, csak a wrapper; minden régi anim/méret felülírva === */
@media (min-width: 992px){
  /* 1) a képről leszedjük az animációt és bármilyen transformot */
  .topbar .brand > img.spinning-vinyl,
  .site-logo img {
    animation: none !important;
    transform: none !important;   /* a forgás a wrapre kerül */
    image-rendering: auto !important;
    backface-visibility: hidden !important;
    will-change: auto !important;
    display: block !important;
    /* a méretet JS állítja, de ha mégis marad valamelyik korábbi fix px szabály,
       ne lépje túl a wrapet: */
    max-width: 100% !important;
    max-height: 100% !important;
  }

  /* 2) maga a forgó WRAP (új elem) */
  .topbar .brand .spin-wrap{
    display: inline-block !important;
    animation: spin 8s linear infinite !important;
    transform-origin: 50% 50% !important;
    backface-visibility: hidden !important;
    will-change: transform !important;
    /* a méretet JS-ből állítjuk egész px-re (a menülemez mérete alapján) */
    overflow: hidden; /* vágás, ha fél pixel miatt bármi kilógna */
  }

  /* 3) a kép csak kitölti a wrappert, NEM skálázzuk külön */
  .topbar .brand .spin-wrap > img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
}

  /* ha valamiért nincs wrapper, essünk vissza az <img>-re */
  .topbar .brand > img.spinning-vinyl{
    width: 102px !important;
    height: 102px !important;
    image-rendering: auto !important;
  }
}
/* === LOGÓ ÉLESÍTÉS (desktop) — fix integer méret + csak a wrapper forog === */
@media (min-width: 992px){
  /* 1) méret: próbáld 96px ↔ 104px között — integer px legyen */
  :root{ --logoPx: 96px; } /* ha még recés, próbáld 100px vagy 104px értékre */

  /* a FORGÁS a WRAPPEREN fusson (GPU layer + AA stabilabb) */
  .topbar .brand .spin-wrap{
    width: var(--logoPx) !important;
    height: var(--logoPx) !important;
    display: inline-block !important;

    /* kompozitor-barát beállítások */
    animation: spin 8s linear infinite !important;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);            /* rétegpromóció */
    -webkit-transform: translateZ(0);
    contain: paint;
  }

  /* a KÉP ne animáljon, csak töltse ki a wrappert (így nem recésedik) */
  .topbar .brand .spin-wrap > img{
    width: 100% !important;
    height: 100% !important;
    display: block !important;

    /* renderelési tippek SVG-re (WebKit/Chromium) */
    image-rendering: auto !important;
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
    -webkit-backface-visibility: hidden;
  }

  /* ha valahol még közvetlenül az <img> forogna, lelőjük */
  .topbar .brand > img.spinning-vinyl{
    animation: none !important;
    transform: none !important;
  }
}
/* === LOGÓ PONTOS MÉRET + FORGÁS A WRAPPEREN (desktop) === */
@media (min-width: 992px){
  :root{
    --tabFinal: 120px; /* menülemez = 120px → logó is ennyi */
  }

  /* a forgó keret mérete és animációja */
  .topbar .brand .spin-wrap{
    width:  var(--tabFinal) !important;
    height: var(--tabFinal) !important;
    display: inline-block !important;
    animation: spin 8s linear infinite !important;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    will-change: transform;
  }

  /* a képet nem animáljuk és nem skálázzuk – csak kitölti a wrappert */
  .topbar .brand > img.spinning-vinyl{
    width: 100% !important;
    height: 100% !important;
    animation: none !important;   /* fontos: ne forogjon a kép is */
    transform: none !important;
    image-rendering: auto !important;
    display: block !important;
  }
}
/* ============================
   ENZENEM – Mobil logó tuning
   ============================ */

/* Alap logó (desktop): változatlan */
.logo img {
  width: 160px;
  height: auto;
  transition: transform 0.6s ease;
}

/* Mobil nézet – nagyobb + forgó */
@media (max-width: 640px) {
  .logo img {
    width: 190px;              /* ~+20% */
    animation: spin 12s linear infinite;
  }
}

/* Finom, folyamatos forgás */

/* === EnZenem forgó logó animáció + mobilméret === */
.topbar img,
.logo img,
.enzenem-logo {
  animation: spin 10s linear infinite;
  height: 48px;
  transition: none !important;
}

@media (max-width: 640px) {
  .topbar img,
  .logo img,
  .enzenem-logo {
    height: 64px;
  }
}

@media (max-width: 640px) {
  .spinning-vinyl,
  .enzenem-logo {
    width: 120px !important;
    height: 120px !important;
  }
}

/* ===== CSS-only mobile 'audio' mode (no HTML/JS changes) ===== */
@media (max-width: 900px){
  /* Hide the YouTube video visually but keep it in DOM so sound can play after user action */
  .video-panel iframe#videoFrame{
    height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }
  /* Compact "audio bar" look */
  .video-panel{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #000 !important;
    color: #ffcc00 !important;
    border: 1px solid #ffcc00 !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 10 !important;
  }
  .video-panel > div[style]{
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }
  .video-panel select,
  .video-panel button{
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
}
/* ==== ABSZOLÚT FEKETE HÁTTÉR – DIAG TESZT ==== */
html, body{
  min-height:100%;
  background:#000 !important;
  background-color:#000 !important;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:center top !important;
}

/* Teljes vásznas hátterek képeinek letiltása (kattinthatóság NEM változik) */
.bg-vinyl, .overlay, .background, .page-bg, .site-bg, .backdrop{
  background:transparent !important;
  background-image:none !important;
}

/* Ha bármelyik fő konténer kapott hátteret, azt is vedd le */
header, main, footer, .topbar, .panel, .content, .embeds, .cards, .consent, .license-modal{
  background-image:none !important;
}

/* Pseudo-rétegek (gyakori „maradék csík” okai) */
html::before, html::after,
body::before, body::after{
  content:none !important;
  background:none !important;
  background-image:none !important;
}
/* ==== FINAL: FORCE PURE BLACK BACKGROUND (DIAG) ==== */
html, body{
  background: #000 !important;
  background-color: #000 !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
}

/* minden nagy overlay/textúra lekapcsolása */
.bg-vinyl, .overlay, .background, .page-bg, .site-bg, .backdrop{
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* gold-theme előző rétegeinek biztos lenullázása */
body.gold-theme{
  background: #000 !important;
  background-image: none !important;
}
body.gold-theme::after{ content: none !important; }
/* ==== Fényes fekete háttér – elegáns, visszafogott csillanás ==== */
html, body{
  min-height:100%;
  background:
    /* felső finom “fényfolt” */
    radial-gradient(900px 520px at 50% 6%,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 35%,
      rgba(255,255,255,0.00) 60%),
    /* alsó nagyon halvány visszfény */
    radial-gradient(800px 420px at 50% 98%,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.00) 65%),
    /* mély onyx alap */
    linear-gradient(180deg, #0b0b0c 0%, #070708 50%, #0a0a0b 100%);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100% 440px, 100% 360px, 100% 100%;
  background-position: center top, center bottom, center top;
  background-color:#0a0a0b; /* végtelen fekete alap, nincs alul csík */
  color:#f5f5f5; /* alap szöveg marad jól olvasható */
}
/* ==== GOLD TEXT – FORCE OVERRIDE (tabs, gombok, linkek) ==== */
html body .gold-text{
  display:inline-block; /* stabilabb background-clip */
  background-image: linear-gradient(
    180deg,
    #ffe7a3 0%,
    #f8d267 22%,
    #d4af37 45%,
    #b8891b 60%,
    #f3d27a 78%,
    #a6791a 100%
  );
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important; /* Chrome/Safari */
  text-shadow:
    0 0 8px rgba(255,215,130,0.35),
    0 2px 6px rgba(0,0,0,0.45);
}

/* Kifejezetten a menü-tab feliratára (felülírja a fehér !important-ot) */
html body .vinyl-tabs .tab span.gold-text{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* Ha gombban/primary-ben is fehérre kényszerítik a színt */
html body button .gold-text,
html body .btn .gold-text,
html body nav a.gold-text{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
/* === Samsung Internet (ua-samsung) – minden glow/clip OFF, éles arany szöveg === */
html.ua-samsung * {
  text-shadow: none !important;
  filter: none !important;
}

/* A gradient-clip-es arany szöveg helyett egyszerű, éles arany */
html.ua-samsung .gold-text,
html.ua-samsung .vinyl-tabs .tab span {
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #f3d27a !important;
  -webkit-text-fill-color: #f3d27a !important;
}

/* Chip/btn hover/focus belső fény ki, hogy ne mosson */
html.ua-samsung .examples .chip:hover,
html.ua-samsung .examples .chip:focus,
html.ua-samsung #order #enz-order-examples .chip:hover,
html.ua-samsung #order #enz-order-examples .chip:focus,
html.ua-samsung .video-panel button:hover,
html.ua-samsung .video-panel button:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Biztos, ami biztos: menüfülek felirata is sima arany */
html.ua-samsung .vinyl-tabs .tab span {
  color: #f3d27a !important;
}
/* ========== iOS / iPhone / iPad fix – csak ott hat ========== */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px) {
    .vinyl-tabs {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 0 8px;
      justify-items: center;
      align-items: center;
    }

    .vinyl-tabs .tab {
      --disc: 90px;
      font-size: 13px;
    }

    .vinyl-tabs .tab span {
      line-height: 1.1;
      text-align: center;
    }
  }
}
/* ======== VIDEOPANEL gombok (PLAY/STOP) nagyobbak és kitöltik a videó alatti teret ======== */

.video-panel .controls {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}

.video-panel .controls button {
  flex: 1;
  padding: 14px 0;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  background-color: var(--accent);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.video-panel .controls button:hover {
  background-color: var(--accent-dark);
}
/* ===== Videopanel gombok – teljes szélesség, erőltetve is ===== */

.video-panel .controls {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 12px;
  padding: 0 8px;
  box-sizing: border-box;
}

.video-panel .controls button {
  flex: 1 1 0% !important;
  padding: 16px 0 !important;
  font-size: 18px !important;
  font-weight: bold;
  border-radius: 10px;
  border: none;
  background-color: var(--accent);
  color: white;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.video-panel .controls button:hover {
  background-color: var(--accent-dark);
}
.video-panel select,
.video-panel button {
  width: 100%;
  padding: 1em;
  font-weight: bold;
  font-size: 16px;
  border-radius: 8px;
  margin-bottom: 6px;
}
/* --- Samsung Internet fix: gradientet tiltjuk, látható szöveg --- */
html.ua-samsung .gold-text,
html.ua-samsung button .gold-text,
html.ua-samsung .vinyl-tabs .tab span,
html.ua-samsung #order button span,
html.ua-samsung #contact button span {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #f3d27a !important;
  -webkit-text-fill-color: #f3d27a !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* Samsung Internet vizuális fixek – FRISSÍTETT */

html.ua-samsung .vinyl-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  justify-items: center;
  align-items: center;
  padding: 0 8px;
}

html.ua-samsung .vinyl-tabs .tab {
  --disc: 100px;
  width: var(--disc);
  height: var(--disc);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #111;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  padding: 0;
}

html.ua-samsung .vinyl-tabs .tab span {
  font-size: 13px;
  font-weight: bold;
  color: #f3d27a !important;
  -webkit-text-fill-color: #f3d27a !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  text-shadow: 0 0 1px #000 !important;
  mix-blend-mode: normal !important;
  line-height: 1.1;
  text-align: center;
}

html.ua-samsung .btn,
html.ua-samsung button,
html.ua-samsung .order-btn,
html.ua-samsung .submit-btn {
  color: #f3d27a !important;
  -webkit-text-fill-color: #f3d27a !important;
  background: #1a1a1a !important;
  border: 1px solid #f3d27a !important;
  font-weight: bold;
  font-size: 15px;
  padding: 10px 20px;
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
}

html.ua-samsung #order-submit span,
html.ua-samsung #contact-submit span,
html.ua-samsung #howto-open-order span {
  color: #f3d27a !important;
  -webkit-text-fill-color: #f3d27a !important;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  text-shadow: 0 0 1px #000 !important;
  mix-blend-mode: normal !important;
  font-weight: bold;
}

/* Gombok szélesség beállítása */
html.ua-samsung #order-submit,
html.ua-samsung #contact-submit {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  display: block;
}

/* === FINAL Universal Chrome WebView Desktop Mode Fix (Nova 2025-11-02) === */
/* Minden mobil eszközön, ha a viewport szélessége 980px fölött van (Chrome Desktop mode),
   akkor az oldal teljesen desktop nézetet kap */

@media only screen and (max-device-width: 1024px) and (min-width: 980px) {
  html, body {
    width: 1280px !important;          /* desktop layout */
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .topbar img.spinning-vinyl {
    width: 150px !important;
    height: 150px !important;
  }

  .vinyl-tabs .tab {
    width: 130px !important;
    height: 130px !important;
  }

  .vinyl-tabs .tab span {
    font-size: 14px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .video-panel {
    position: relative !important;
    margin: 10px auto 0 auto !important;
    width: 480px !important;
    max-width: 90vw !important;
    display: block !important;
    z-index: 2 !important;
  }

  .vinyl-tabs, .topbar {
    position: relative !important;
    z-index: 3 !important;
  }
}
/* === Samsung & iPad Vinyl Fix – Interactive Highlight (Nova 2025-11-03) === */
html.ua-samsung .vinyl-tabs .tab,
html.ua-ipad .vinyl-tabs .tab {
  background-image: url("/assets/vinyl_samsung_fix.svg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) !important;
}

html.ua-samsung .vinyl-tabs .tab.active::after,
html.ua-ipad .vinyl-tabs .tab.active::after {
  opacity: 1;
}

html.ua-samsung .vinyl-tabs .tab span,
html.ua-ipad .vinyl-tabs .tab span {
  color: #f3d27a !important;
  -webkit-text-fill-color: #f3d27a !important;
  text-shadow: 0 0 2px #000 !important;
  font-weight: 600 !important;
}
/* === END FIX === */
/* === Highlight visibility fix for Samsung & iPad WebView (Nova 2025-11-03b) === */
html.ua-samsung .vinyl-tabs .tab.active::after,
html.ua-ipad .vinyl-tabs .tab.active::after {
  opacity: 1 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 220, 130, 0.25) 0%,
    rgba(255, 255, 200, 0.35) 40%,
    rgba(255, 220, 130, 0.25) 80%,
    transparent 100%
  ) !important;
  mix-blend-mode: normal !important;  /* fallback, hogy látható legyen */
  box-shadow: inset 0 0 12px rgba(255, 220, 130, 0.3);
}
/* === Samsung vinyl fix: arany keret eltávolítás (Golden Clean v2) === */
html.ua-samsung .vinyl-tabs .tab,
html.ua-samsung .btn,
html.ua-samsung button,
html.ua-samsung .order-btn,
html.ua-samsung .submit-btn {
  box-shadow: none !important;
}
html.ua-samsung .vinyl-tabs .tab,
html.ua-ioswv .vinyl-tabs .tab {
  overflow: visible !important;
}
/* === Samsung Internet / WebView – Bemutatkozás + tipográfia fix (végleges) === */
@supports (-webkit-touch-callout: none) {
  html.ua-samsung .panel.active#intro {
    display: block !important;
    transform: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    text-align: justify !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
    padding: 10px 18px !important;
    margin: 0 auto !important;
    max-width: 960px !important;
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    font-size: 1em !important;
  }

  html.ua-samsung #intro strong,
  html.ua-samsung #intro b {
     font-size: inherit !important;
     font-weight: 700 !important;
  }
}
/* === Samsung Internet / WebView – Gold Text fix (Bemutatkozás) === */
@supports (-webkit-touch-callout: none) {
  html.ua-samsung .gold-text,
  html.ua-samsung .gold-text * {
    color: #f3d27a !important;
    -webkit-text-fill-color: #f3d27a !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    text-shadow: none !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    font-weight: 600 !important;  /* visszaadja a kiemelés vastagságát */
  }

  /* ahol tényleg félkövér kell */
  html.ua-samsung #intro strong.gold-text,
  html.ua-samsung #intro b.gold-text {
     font-size: inherit !important;
     font-weight: 700 !important;
  }
} 
/* === Megrendelés-gomb árfrissítés animáció === */
.primary.price-update {
  animation: glowPrice 0.6s ease-in-out;
}
@keyframes glowPrice {
  0%   { box-shadow: 0 0 0 rgba(243,210,122,0); transform: scale(1); }
  40%  { box-shadow: 0 0 12px rgba(243,210,122,.7); transform: scale(1.03); }
  100% { box-shadow: 0 0 0 rgba(243,210,122,0); transform: scale(1); }
}

/* === EnZenem – Nyitási akció szaggatott, körbefutó arany keret (v3 – középre igazított) === */

#pricing .promo-banner {
  position: relative;
  display: block;               /* ✅ így középre igazítható */
  text-align: center;           /* ✅ szöveg középre */
  margin: 28px auto 36px;
  padding: 28px 64px;
  border-radius: 18px;
  font-size: 1.8em;
  font-weight: 700;
  color: #fff9c4;
  background: rgba(0, 0, 0, 0.8);
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 0 22px rgba(255,215,0,0.35);
  max-width: fit-content;       /* középen marad, nem nyúlik végig */
}

#pricing .promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  padding: 2px;
  background: repeating-linear-gradient(
    90deg,
    #ffd700 0 8px,
    transparent 8px 12px
  );
  background-size: 200% 100%;
  animation: dashmove 4s linear infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 0;
}

@keyframes dashmove {
  to { background-position: -200% 0; }
}

#pricing .promo-banner span {
  position: relative;
  z-index: 2;
  text-shadow: 0 0 10px rgba(255,215,0,0.75);
}


/* === Árak formázás – Áthúzott régi ár (FIXED) === */
#pricing .old-price {
  text-decoration: line-through !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: #ff6b6b !important;
  color: #ff6b6b !important;
  opacity: 0.85;
  margin-right: 6px;
}

#pricing .new-price {
  font-size: 1.3em;
  font-weight: 700;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255,215,0,0.5);
}
/* === [Samsung/WebView Final Visible Tap Feedback] === */
@supports (-webkit-touch-callout: none) {
  .play-btn:active,
  .stop-btn:active {
    background: rgba(255,215,0,0.15);
    box-shadow: 0 0 8px rgba(255,215,0,0.4) inset;
    transition: background 0.15s ease;
  }

  /* 🌟 Tartós fény Samsungon */
  .play-btn.active,
  .stop-btn.active {
    background: rgba(212,175,55,0.3);
    box-shadow:
      0 0 12px rgba(255,215,0,0.6) inset,
      0 0 12px rgba(255,215,0,0.3);
  }
}
/* === COMBOBOX – ZENEI STÍLUS === */
.custom-combobox {
  position: relative;
  display: block;
}

.custom-combobox input {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid gold;
  background: #000;
  color: gold;
  font-size: 15px;
}

/* Alap lista – minden böngészőre */
.combo-list {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 180px;
  overflow-y: auto;
  background: #000 !important;
  border: 1px solid gold;
  border-radius: 6px;
  z-index: 9999;
}

.combo-list div {
  padding: 10px;
  cursor: pointer;
  color: gold;
  font-size: 15px;
}

.combo-list div:hover {
  background: rgba(255, 215, 0, 0.25);
}

.combo-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.sep {
  text-align: center;
  color: #555;
  padding: 4px 0;
  pointer-events: none;
}

/* ===== Samsung WebView – Tökéletes, stabil ABSOLUTE fix ===== */

/* Jelöld meg, hogy WebView–Samsung eszköz */
html.ua-samsung .custom-combobox {
  position: relative !important;
}

html.ua-samsung .combo-list {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  width: 100% !important;

  max-height: 40vh !important;

  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;

  overscroll-behavior: contain !important;
  scroll-behavior: auto !important;

  background: #000 !important;
  border: 1px solid gold !important;
  border-radius: 6px !important;
  z-index: 99999 !important;
}
/* ==== Kártyalogók – EnZenem VPOS blokk ==== */

footer {
  padding: 24px 16px 32px;
  text-align: center;
}

.footer-cards {
  margin-top: 10px;
}

.footer-cards-label {
  font-size: 12px;
  opacity: 0.85;
  display: block;
  margin-bottom: 6px;
}

.card-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.card-logo {
  min-width: 60px;
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  background: #111;
  border: 1px solid rgba(245, 207, 96, 0.5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
  color: #f5f0d8;
}

.card-visa,
.card-mastercard,
.card-maestro,
.card-visa-electron,
.card-vpay {
  border-color: rgba(245, 207, 96, 0.6) !important;
  color: #f5cf60 !important;
}


@media (max-width: 768px) {
  .card-logo { min-width: 72px; }
}
/* === NovaBot ne takarja a footer linkeket (ÁSZF, Adatkezelés) === */
footer, .footer-links, a[href*="aszf"], a[href*="adatkezeles"] {
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

/* Minden NovaBot overlay, ami nem látszik → ne kapjon pointert */
#novabot::before,
#novabot::after {
  pointer-events: none !important;
}

/* Mobilon NovaBot ne üljön rá a footerre */
@media(max-width: 768px){
  #novabot.nb-docked {
    bottom: 40px !important;
  }
}