/* Tokens */
:root{
  --bg:#0b0d12;
  --panel:rgba(255,255,255,.06);
  --panel-2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
  --text:#e6e9ef;
  --muted:#a0a7b3;
  --ring:#7c8cff;
  --ring-2:#9b86ff;
  --ring-soft:rgba(124,140,255,.22);
  --danger:#ff6b6b;
  --success:#22c55e;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --blur:10px;
  --radius:16px;
  --maxw:1120px;
}

/* Base */
*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(1200px 800px at 10% -20%, #1a1f2e 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 20%, #161d2b 0%, transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:#aab3ff; text-decoration:none }
a:hover{ text-decoration:underline; text-underline-offset:2px }
.wrap{ max-width:var(--maxw); margin:auto; padding:28px }

/* Typography */
h1,h2,h3,h4{ margin:0 0 .6em; line-height:1.15; letter-spacing:.01em }
h1{ font-size:clamp(30px,5vw,48px); font-weight:800 }
h2{ font-size:clamp(22px,3vw,30px); font-weight:700 }
h3{ font-size:clamp(18px,2.4vw,22px); font-weight:700 }
h4{ font-size:clamp(16px,2vw,18px); font-weight:600 }
p{ margin:0 0 1em; color:var(--muted) }

.section-title{
  font-size:clamp(20px,2.6vw,26px);
  font-weight:800;
  margin:2px 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.subsection-title{
  margin:20px 0 12px;
  font-weight:700;
  font-size:clamp(18px,2.2vw,20px);
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg, rgba(124,140,255,.18), rgba(124,140,255,.06));
  color:var(--text);
  border:1px solid var(--border);
  border-radius:22px;
  padding:30px 24px;
  text-align:center;
  margin:10px 0 28px;
  backdrop-filter: blur(var(--blur));
  box-shadow:var(--shadow);
}

/* Layout / cards */
.grid{ display:grid; gap:22px }
.grid.cols-2{ grid-template-columns:1.1fr .9fr }
.mt-18{ margin-top:18px }

.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter: blur(var(--blur));
  box-shadow:var(--shadow);
  margin-top:24px;
  padding:18px;
}
.card.callout{
  background:linear-gradient(180deg, rgba(155,134,255,.20), rgba(155,134,255,.08));
  border:1px solid rgba(155,134,255,.35);
}
.row{ display:grid; gap:12px }
.row.cols-2{ grid-template-columns:1fr 1fr }

/* Forms */
form{ display:grid; gap:14px }
label{ font-weight:600; margin-bottom:6px; display:inline-block; color:var(--text) }
.req{ color:var(--danger); margin-left:4px; font-weight:800 }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select{
  width:100%; min-width:0; height:auto;
  padding:12px 14px;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .02s ease;
  scroll-margin-top: 90px;
}
textarea{ min-height:120px; resize:vertical }
input::placeholder, textarea::placeholder{ color:#8f96a6 }

/* Focus */
input:focus, textarea:focus, select:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px var(--ring-soft);
}

/* Invalid */
.invalid{
  border-color:var(--danger) !important;
  box-shadow:0 0 0 4px rgba(255,107,107,.18);
}
.error-msg{ color:var(--danger); font-size:12px; margin-top:6px }

/* Select options (dark) */
select option{ background:#0f131b; color:#e7e9ef }

/* Hints / separators */
.hint{ color:var(--muted); font-size:12.5px }
.hr{ height:1px; background:var(--border); border-radius:1px; margin:8px 0 4px }

/* Uploads */
.images{ display:grid; gap:10px }
.img-field{ display:flex; gap:10px; align-items:center }
.img-field input[type="file"]{ flex:1 }

/* MPID */
.mpid-row{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 280px));
  gap:10px; align-items:center;
}
.mpid-input{
  text-transform:uppercase;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  letter-spacing:.03em;
}

/* Buttons */
.btn,button{
  -webkit-appearance:none; appearance:none;
  border:0; cursor:pointer;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  background:linear-gradient(180deg, var(--ring) 0%, var(--ring-2) 100%);
  color:#fff;
  box-shadow:0 10px 30px rgba(124,140,255,.22);
  min-height:44px;
  transition:filter .15s ease, transform .02s ease;
}
.btn:hover,button:hover{ filter:brightness(1.05) }
.btn:active,button:active{ transform:translateY(1px) }
.btn.secondary{
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
}
.btn.small{ padding:8px 12px; border-radius:10px; font-weight:600; min-height:36px }
.btn.micro{ padding:4px 8px; font-size:12px; min-height:auto; border-radius:10px; font-weight:600 }
.btn.icon{
  width:28px; height:28px; padding:0; border-radius:9999px;
  display:flex; align-items:center; justify-content:center; line-height:1; font-size:16px; min-height:0;
}
.btn.secondary.ghost{ background:transparent; border:1px solid var(--border) }

/* Utils */
.hidden{ display:none }
.flex{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.muted{ color:var(--muted) }
.block{ display:block }
.spacer-10{ height:10px }
.mt-8{ margin-top:8px }
.mt-16{ margin-top:16px }
.contact-box{ white-space:pre-line }
.choice-row{ display:grid; gap:6px }

/* Pecset-bontas specifikus */
.meter-item select.meter-type{ min-width:18ch }
.meter-item .other-input.hidden{ display:none }
#uploadsWrap { margin:24px 0 }
#messageWrap { margin:16px 0 }

/* Date input (dark) */
input[type="date"]{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--text);
}
input[type="date"]::-webkit-calendar-picker-indicator{ filter:invert(1); opacity:.75; cursor:pointer }

/* =======================================================================
   ÚJ: Toast (felugró visszajelzés) – lebegő, automatikusan eltűnik
   ======================================================================= */
#toast-root{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: grid;
  gap: 10px;
  width: min(92vw, 680px);
  pointer-events: none; /* ne takarja a kattintást */
}

.toast{
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: rgba(20,25,35,.95);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--text);
  padding: 12px 16px 14px;
  box-shadow: var(--shadow);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}

.toast.is-in{
  opacity: 1;
  transform: translateY(0);
}
.toast.is-out{
  opacity: 0;
  transform: translateY(12px);
}

.toast__msg{
  font-size: 15.5px;
  line-height: 1.45;
}

.toast__bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ring), var(--ring-2));
  border-radius: 0 0 14px 14px;
  opacity: .9;
}

/* állapot színek */
.toast--ok{
  border-color: rgba(34,197,94,.45);
}
.toast--err{
  border-color: rgba(255,107,107,.55);
  background: rgba(35, 15, 18, .95);
}

/* Responsive */
@media (max-width:900px){
  .wrap{ padding:18px }
  .card{ padding:16px }
  .grid.cols-2{ grid-template-columns:1fr }
  .row.cols-2{ grid-template-columns:1fr }
  .row{ gap:10px }
  .section-title{ font-size:clamp(18px,4.2vw,22px) }
  .subsection-title{ font-size:clamp(16px,3.8vw,18px) }
  .hero{ margin:12px 0 22px; padding:22px 16px }
  .mpid-row{ grid-template-columns:1fr }
  .img-field{ flex-wrap:wrap; align-items:flex-start }
  .img-field .btn.small{ width:100% }
  .img-field input[type="file"]{ flex:1 1 100% }
}