/* =========================
   BASE – TAVERN THEME
   World of Warcraft / Hearthstone hangulat
   ========================= */

:root{
  /* Háttér */
  --bg-main: #151016;
  --bg-panel: #1d1620;
  --bg-panel-soft: #241b26;

  /* Fa / meleg tónus */
  --wood-dark: #2b1a12;
  --wood-light:#3a2418;

  /* Pergamen */
  --parchment: #e6d3a3;
  --parchment-dark: #c7ae78;

  /* Arany */
  --gold: #f7d37a;
  --gold-dark: #b8892e;

  /* Szöveg */
  --text-main: #f1eadc;
  --text-muted:#cfc4ae;

  /* Egyéb */
  --border-soft: rgba(255,220,160,.18);
  --shadow-main: 0 18px 50px rgba(0,0,0,.55);
}

/* ===== BODY ===== */

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  background:
    radial-gradient(1100px 650px at 22% 12%, rgba(255,190,120,.18), transparent 62%),
    radial-gradient(900px 650px at 78% 18%, rgba(120,190,255,.10), transparent 68%),
    radial-gradient(1200px 900px at 50% 95%, rgba(255,160,90,.10), transparent 70%),
    linear-gradient(180deg, #120c14, var(--bg-main));

  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  color: var(--text-main);
}

/* Finom vignetta + fluid fény */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(circle at 50% 45%, transparent 34%, rgba(0,0,0,.55) 82%),
    radial-gradient(900px 520px at 18% 18%, rgba(255,200,120,.10), transparent 65%),
    radial-gradient(820px 520px at 82% 22%, rgba(120,200,255,.06), transparent 70%);

  background-repeat: no-repeat;
  background-size: cover;

  mix-blend-mode: overlay;
  opacity: .55;
}

/* ===== ALAP ELEMEK ===== */

a {
  color: #8bd5ff;
  text-decoration: none;
}

a:hover {
  filter: brightness(1.1);
}

h1, h2, h3 {
  color: #f8f3e6;
  letter-spacing: .4px;
  text-shadow: 0 2px 14px rgba(255,180,90,.18);
}

.hidden {
  display: none !important;
}

/* ===== FORM ELEMEK ===== */

input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;

  padding: 8px 10px;
  margin-top: 4px;

  border-radius: 10px;
  border: 1px solid var(--border-soft);

  background:
    linear-gradient(180deg, var(--bg-panel-soft), var(--bg-panel));

  color: var(--text-main);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

label {
  display: block;
  margin-bottom: 4px;
  font-size: .9rem;
  color: var(--text-muted);
}

/* ===== GOMBOK ===== */

button,
button[type="submit"] {
  padding: 8px 16px;
  margin-top: 6px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);

  background:
    linear-gradient(180deg, var(--gold), var(--gold-dark));

  color: #2b160c;
  font-weight: 700;
  cursor: pointer;

  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

button:hover {
  filter: brightness(1.06);
}

button:disabled {
  background: linear-gradient(180deg, #9ca3af, #6b7280);
  color: #1f2937;
  cursor: not-allowed;
}

/* ===== KÁRTYA / PANEL ALAP ===== */

.panel,
.box,
.checkout,
.info-page,
.products-filter {
  background:
    linear-gradient(180deg, rgba(40,22,18,.92), rgba(22,14,20,.90));

  border: 1px solid var(--border-soft);
  border-radius: 14px;

  box-shadow: var(--shadow-main);
}

/* ===== KIS SEGÉD SZÖVEGEK ===== */

.small {
  font-size: .8rem;
  color: var(--text-muted);
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #120c14;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  border-radius: 999px;
}

/* =================================================
   INFO PAGE – BELSŐ TÉR VÉGLEGES FIX
   ================================================= */

html body .info-page{
  box-sizing: border-box;
  padding: 40px !important;
}

html body .info-page h1,
html body .info-page h2,
html body .info-page p,
html body .info-page ul,
html body .info-page ol{
  padding-left: 84px !important;
  padding-right: 84px !important;
}

html body .info-page ul,
html body .info-page ol{
  margin-left: 28px;
}

@media (max-width: 600px){
  html body .info-page{
    padding: 24px !important;
  }

  html body .info-page h1,
  html body .info-page h2,
  html body .info-page p,
  html body .info-page ul,
  html body .info-page ol{
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}

/* =================================================
   GLOBAL SPACING FIX – TERMÉK GRID
   ================================================= */

.product-grid{
  gap: 26px !important;
  margin-top: 16px !important;
}

/* =================================================
   PAGE SECTION TRANSITION – SZOLID OLDAL BEJÖVETEL
   (NEM POP-IN, NEM GICCSES)
   ================================================= */

.page-section{
  display: block;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(1.5px);

  pointer-events: none;

  transition:
    opacity .32s ease,
    transform .32s ease,
    filter .32s ease;

  will-change: opacity, transform, filter;
}

.page-section.active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}
/* =========================================
   PAGE SECTION TRANSITION – NINCS POP-IN
   (display:none helyett animálható rejtés)
   ========================================= */

.page-section{
  /* NE display:none !!! */
  display: block !important;

  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);

  visibility: hidden;
  pointer-events: none;

  /* hogy ne foglaljon helyet */
  height: 0;
  overflow: hidden;

  transition:
    opacity .34s ease,
    transform .34s ease,
    filter .34s ease;
  will-change: opacity, transform, filter;
}

.page-section.active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

  visibility: visible;
  pointer-events: auto;

  height: auto;
  overflow: visible;
}

/* ha a tartalom magas, height:auto miatt néha “ugorhat”:
   opcionális: adunk minimális stabilitást */
.page-section.active{
  min-height: 1px;
}