/* ==========================================================================
   Noza Kedvencek – szívecske, felugró ablak, értesítő sáv, kezelő oldal.
   A téma változóit használja (fekete–arany), tartalék értékekkel.
   ========================================================================== */

.nzk-burok,
.nzk-modal,
.nzk-toast,
.nzk-kezeles {
  --nzk-arany: var(--nz-gold, #D4AF37);
  --nzk-arany-sotet: var(--nz-gold-hover, #C29F2F);
  --nzk-arany-szoveg: var(--nz-gold-text, #8A6A12);
  --nzk-fekete: var(--nz-black, #0a0a0a);
  --nzk-szoveg: var(--nz-text, #374151);
  --nzk-halvany: var(--nz-subtle, #6B7280);
  --nzk-vonal: var(--nz-line, #E5E7EB);
  --nzk-sans: var(--nz-sans, 'Inter', system-ui, sans-serif);
  --nzk-serif: var(--nz-serif, 'Playfair Display', Georgia, serif);
}

/* ---------- Szív gomb ---------- */
.nzk-heart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--nz-black, #0a0a0a);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .45);
  cursor: pointer;
  transition: transform .25s, background-color .25s, color .25s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}

.nzk-heart svg {
  width: 21px;
  height: 21px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill .25s, stroke .25s;
}

.nzk-heart:hover {
  transform: scale(1.08);
  color: var(--nz-gold-text, #8A6A12);
}

.nzk-heart:focus-visible {
  outline: 3px solid var(--nz-gold, #D4AF37);
  outline-offset: 2px;
}

.nzk-heart.is-active {
  background: var(--nz-black, #0a0a0a);
  color: var(--nz-gold, #D4AF37);
}

.nzk-heart.is-active svg {
  fill: var(--nz-gold, #D4AF37);
  stroke: var(--nz-gold, #D4AF37);
}

.nzk-heart.is-active:not(.is-busy) svg {
  animation: nzk-dobban .45s ease-out;
}

.nzk-heart.is-busy {
  opacity: .6;
  pointer-events: none;
}

@keyframes nzk-dobban {
  0% { transform: scale(1); }
  40% { transform: scale(1.28); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nzk-heart,
  .nzk-heart svg { transition: none; animation: none !important; }
}

/* ---------- Kártyán: jobb felső sarok ---------- */
.nzk-burok {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.nzk-burok > .nz-card {
  width: 100%;
}

.nzk-heart--kartya {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
}

/* A kártya hover-emelkedésével együtt mozogjon. */
.nzk-burok:hover > .nzk-heart--kartya {
  transform: translateY(-4px);
}

.nzk-burok:hover > .nzk-heart--kartya:hover {
  transform: translateY(-4px) scale(1.08);
}

/* ---------- Adatlapon: az ár mellett ---------- */
.nzk-ar {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 16px;
}

.nzk-ar::before {
  flex-basis: 100%;
}

.nzk-heart--ar {
  order: 2;
  width: 46px;
  height: 46px;
  border: 1px solid var(--nz-line, #E5E7EB);
  box-shadow: none;
}

.nzk-heart--lebego {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 54px;
  height: 54px;
}

/* ---------- Kapcsolat dobozban: szöveges gomb ---------- */
.nzk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 700 13px/1.2 var(--nz-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}

.nzk-btn--szives {
  grid-column: span 2;
  width: 100%;
  min-height: 50px;
  background: #fff;
  color: var(--nz-black, #0a0a0a);
  border-color: var(--nz-black, #0a0a0a);
}

.nzk-btn--szives svg {
  width: 18px;
  height: 18px;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
}

.nzk-btn--szives:hover {
  border-color: var(--nz-gold, #D4AF37);
  color: var(--nz-gold-text, #8A6A12);
}

.nzk-btn--szives.is-active {
  border-color: var(--nz-gold, #D4AF37);
  background: rgba(212, 175, 55, .1);
  color: var(--nz-gold-text, #8A6A12);
}

.nzk-btn--szives.is-active svg {
  fill: var(--nz-gold, #D4AF37);
  stroke: var(--nz-gold, #D4AF37);
}

.nzk-btn--arany {
  background: var(--nz-gold, #D4AF37);
  color: var(--nz-black, #0a0a0a);
}

.nzk-btn--arany:hover {
  background: var(--nz-gold-hover, #C29F2F);
}

.nzk-btn--arany:disabled {
  opacity: .6;
  cursor: wait;
}

.nzk-btn--ures {
  background: transparent;
  color: var(--nz-text, #374151);
  border-color: var(--nz-line, #E5E7EB);
}

.nzk-btn--ures:hover {
  border-color: var(--nz-black, #0a0a0a);
}

/* ---------- Felugró ablak ---------- */
.nzk-modal-nyitva {
  overflow: hidden;
}

.nzk-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--nzk-sans);
}

.nzk-modal[hidden] {
  display: none;
}

.nzk-modal__hatter {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, .62);
  backdrop-filter: blur(3px);
  animation: nzk-be .2s ease-out;
}

.nzk-modal__doboz {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 34px 32px 28px;
  border-radius: var(--nz-radius, 18px);
  background: #fff;
  color: var(--nzk-szoveg);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5);
  animation: nzk-fel .25s ease-out;
}

@keyframes nzk-be { from { opacity: 0; } }
@keyframes nzk-fel { from { opacity: 0; transform: translateY(16px); } }

.nzk-modal__x {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  background: none;
  font-size: 28px;
  line-height: 1;
  color: var(--nzk-halvany);
  cursor: pointer;
}

.nzk-modal__ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--nzk-fekete);
}

.nzk-modal__ikon svg {
  width: 24px;
  height: 24px;
  fill: var(--nzk-arany);
}

.nzk-modal__cim {
  margin: 0 0 10px;
  font: 700 26px/1.2 var(--nzk-serif);
  color: var(--nzk-fekete);
}

.nzk-modal__szoveg {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.6;
}

.nzk-modal__label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nzk-halvany);
}

.nzk-modal__input {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid var(--nzk-vonal);
  border-radius: var(--nz-radius-sm, 12px);
  font: 500 16px var(--nzk-sans);
  color: var(--nzk-fekete);
  background: #fff;
}

.nzk-modal__input:focus {
  outline: none;
  border-color: var(--nzk-arany);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, .25);
}

.nzk-modal__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.nzk-modal__check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--nzk-fekete);
}

.nzk-modal__check a {
  color: var(--nzk-arany-szoveg);
  text-decoration: underline;
}

.nzk-modal__hiba {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: 14px;
}

.nzk-modal__hiba[hidden] {
  display: none;
}

.nzk-modal__gombok {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.nzk-csapda {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media (max-width: 480px) {
  .nzk-modal {
    align-items: flex-end;
    padding: 0;
  }

  .nzk-modal__doboz {
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 30px 20px 22px;
  }

  .nzk-modal__gombok {
    flex-direction: column-reverse;
  }

  .nzk-modal__gombok .nzk-btn {
    width: 100%;
  }
}

/* ---------- Értesítő sáv ---------- */
.nzk-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 1001;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: max-content;
  max-width: min(560px, calc(100vw - 32px));
  padding: 16px 18px 16px 20px;
  border-radius: 14px;
  background: var(--nzk-fekete);
  color: #f3f4f6;
  font: 400 14px/1.55 var(--nzk-sans);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .55);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform .3s, opacity .3s;
  pointer-events: none;
}

.nzk-toast.is-open {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.nzk-toast b,
.nzk-toast strong {
  color: #fff;
}

.nzk-toast__link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nzk-arany);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.nzk-toast__x {
  flex: 0 0 auto;
  margin: -4px -4px 0 0;
  border: 0;
  background: none;
  color: #9ca3af;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Kezelő oldal (/kedvencek/kezel/…) ---------- */
.nzk-kezeles,
.nzk-oldal {
  max-width: 820px;
  margin: 0 auto 64px;
  font-family: var(--nz-sans, 'Inter', system-ui, sans-serif);
}

.nzk-oldal__cim {
  font: 700 28px/1.2 var(--nz-serif, Georgia, serif);
  margin: 0 0 12px;
}

.nzk-kezeles__bevezeto {
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 1.6;
}

.nzk-kezeles__figyelem {
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(212, 175, 55, .12);
  color: var(--nz-gold-text, #8A6A12);
  font-weight: 600;
}

.nzk-lista {
  display: grid;
  gap: 14px;
}

.nzk-lista__sor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 20px 22px;
  border: 1px solid var(--nz-line, #E5E7EB);
  border-radius: var(--nz-radius, 18px);
  background: #fff;
  box-shadow: var(--nz-shadow, 0 10px 24px -14px rgba(0, 0, 0, .18));
}

.nzk-lista__adat {
  flex: 1 1 320px;
  min-width: 0;
}

.nzk-lista__cim {
  display: block;
  font: 700 19px/1.3 var(--nz-serif, Georgia, serif);
  color: var(--nz-black, #0a0a0a);
}

.nzk-lista__reszlet {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--nz-subtle, #6B7280);
}

.nzk-lista__gombok {
  display: flex;
  gap: 8px;
}

.nzk-kezeles .nzk-gomb {
  min-height: 42px;
  padding: 0 18px;
  font-size: 12px;
}

.nzk-kezeles__vegso {
  margin-top: 32px;
  text-align: center;
}

.nzk-kezeles .nzk-link-gomb {
  padding: 0;
  border: 0;
  background: none;
  color: var(--nz-subtle, #6B7280);
  font: 500 14px var(--nz-sans, 'Inter', system-ui, sans-serif);
  text-decoration: underline;
  cursor: pointer;
}

.nzk-kezeles .nzk-link-gomb:hover {
  color: #b91c1c;
}

/* Adatlap: hányan figyelik (csak szerkesztőnek) */
.nzk-figyelok {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px dashed var(--nz-gold, #D4AF37);
  border-radius: 999px;
  background: rgba(212, 175, 55, .1);
  color: var(--nz-gold-text, #8A6A12);
  font: 600 13px/1.3 var(--nz-sans, 'Inter', system-ui, sans-serif);
}

.nzk-figyelok svg {
  width: 15px;
  height: 15px;
  fill: var(--nz-gold, #D4AF37);
}

.nz-agent .nzk-figyelok {
  grid-column: span 2;
  justify-self: center;
}

/* Szerkesztő űrlap: hányan figyelik */
.nzk-admin-info {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(212, 175, 55, .12);
  font-size: 13px;
}