/* Ertektanu — vallalati (ceges) csomagok es adminisztracio.
 *
 * A jovahagyott B irany szerint: karakteres 2 px keret, szines fejlecsav
 * (melykek / smaragd / arany), eros kivalasztott allapot.
 *
 * KETTOS MEGOLDAS A KIVALASZTOTT ALLAPOTRA
 * ----------------------------------------
 * A `:has()` szelektort a regebbi Android WebView nem tamogatja, ezert a
 * kiemelt csomagot NEM CSS-szelektor jeloli, hanem a JS altal kiirt
 * `.vt-featured` osztaly. Igy asztali bongeszoben es a natív appban is
 * ugyanaz latszik.
 *
 * A valtozok a meglevo oldalak :root-jabol jonnek; ahol nincsenek
 * definialva (pl. app.html), a fallback ertek lep be.
 */

.vt-wrap {
  --vt-navy: var(--navy, #123244);
  --vt-gold: var(--gold, #C08A2E);
  --vt-gold-ink: var(--gold-ink, #9A6F1E);
  --vt-teal: var(--teal, #0F766E);
  --vt-ink: var(--ink, #17222B);
  --vt-ink2: var(--ink2, #5a6275);
  --vt-line: var(--line, #E6E3DD);
  --vt-red: var(--red, #B23A3F);
  --vt-bg: var(--bg, #FFFFFF);
}

/* ------------------------------------------------------------------ */
/* Csomagkartyak                                                       */
/* ------------------------------------------------------------------ */
.vt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.vt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vt-bg, #fff);
  border: 2px solid var(--vt-line, #E6E3DD);
  border-radius: 14px;
  padding: 0 22px 22px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(18, 50, 68, .06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.vt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(18, 50, 68, .12);
}

/* A kiemelt (ajanlott) csomag: eros arany keret es emelt arnyek. */
.vt-card.vt-featured {
  border-color: var(--vt-gold, #C08A2E);
  border-width: 3px;
  box-shadow: 0 8px 28px rgba(192, 138, 46, .22);
}

/* Szines fejlecsav — csomagonkent mas, a B irany szerint. */
.vt-head {
  height: 6px;
  margin: 0 -22px 18px;
  background: var(--vt-navy, #123244);
}

.vt-head-BELEPO-5 { background: #123244; }
.vt-head-STANDARD-10 { background: #0F766E; }
.vt-head-BOVITETT-20 {
  background: linear-gradient(90deg, #C08A2E, #E3B45C);
}

.vt-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--vt-gold, #C08A2E);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 4px 9px;
  border-radius: 999px;
  z-index: 2;
}

.vt-name {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
  color: var(--vt-navy, #123244);
  overflow-wrap: break-word;
}

/* A kiemelt kartyan az AJANLOTT jelveny a jobb felso sarokban van, ezert a
 * cimnek helyet kell hagyni, kulonben hosszabb csomagnevnel a ketto
 * egymasra futna. */
.vt-card.vt-featured .vt-name { padding-right: 96px; }

.vt-desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vt-ink2, #5a6275);
  /* Hosszu szo se torjen csunyan ket sorba. */
  overflow-wrap: break-word;
  /* Ket sor helye fixen le van foglalva, hogy a HAROM KARTYAN AZ AR
   * UGYANABBAN A VONALBAN legyen. A leirasok hossza kulonbozo (egy- es
   * ketsoros), es enelkul a rovidebb leirasu kartyan az ar feljebb csuszik
   * -- ami rendezetlennek latszik egymas mellett. */
  min-height: calc(2 * 1.5 * 13px);
}

/* A "Kinek szol" es "Hogyan mukodik" szekcio kartyain nincs ar, ott a fix
 * magassag csak ures helyet hagyna. */
.vt-card-plain .vt-desc { min-height: 0; }

.vt-price {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vt-ink, #17222B);
  /* Az ar es az "+ afa" ne szakadjon el egymastol. */
  white-space: nowrap;
}

.vt-vat {
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-ink2, #5a6275);
  margin-left: 6px;
}

.vt-units {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-teal, #0F766E);
}

.vt-unit {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--vt-ink2, #5a6275);
}

.vt-feat {
  list-style: none;
  margin: 16px 0 20px;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--vt-ink, #17222B);
  flex: 1 1 auto;
}

.vt-feat li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 7px;
}

.vt-feat li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .52em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vt-teal, #0F766E);
}

.vt-cta {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: var(--vt-navy, #123244);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  /* Legalabb 44 px magas, hogy touchon biztosan eltalalhato legyen. */
  min-height: 44px;
}

.vt-card.vt-featured .vt-cta {
  background: var(--vt-gold, #C08A2E);
}

.vt-cta:hover { filter: brightness(1.08); }
.vt-cta:focus-visible {
  outline: 3px solid var(--vt-gold, #C08A2E);
  outline-offset: 2px;
}

.vt-note {
  margin: 20px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--vt-ink2, #5a6275);
}

/* ------------------------------------------------------------------ */
/* Urlap                                                               */
/* ------------------------------------------------------------------ */
.vt-form {
  margin-top: 24px;
  border: 2px solid var(--vt-line, #E6E3DD);
  border-radius: 12px;
  padding: 20px 22px;
  background: #FCFBF8;
}

.vt-form.vt-ok {
  border-color: var(--vt-teal, #0F766E);
  background: #F0F8F6;
}

.vt-form h4 {
  margin: 0 0 6px;
  font-size: 17px;
  color: var(--vt-navy, #123244);
}

.vt-form-pkg {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--vt-ink2, #5a6275);
}

.vt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.vt-form label,
.vt-panel label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vt-ink, #17222B);
  margin-bottom: 14px;
}

.vt-row label { margin-bottom: 0; }

.vt-req { color: var(--vt-red, #B23A3F); }

.vt-form input,
.vt-form textarea,
.vt-panel input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 11px;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--vt-ink, #17222B);
  background: #fff;
  border: 1px solid var(--vt-line, #E6E3DD);
  border-radius: 8px;
  box-sizing: border-box;
  /* 16 px alatt az iOS ranagyit a mezore fokuszalaskor. */
  min-height: 42px;
}

.vt-form textarea { min-height: 72px; resize: vertical; }

.vt-form input:focus,
.vt-form textarea:focus,
.vt-panel input:focus {
  outline: 0;
  border-color: var(--vt-teal, #0F766E);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}

.vt-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.vt-submit, .vt-cancel {
  padding: 11px 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9px;
  cursor: pointer;
  min-height: 44px;
}

.vt-submit {
  color: #fff;
  background: var(--vt-teal, #0F766E);
  border: 0;
}

.vt-submit:hover { filter: brightness(1.08); }

.vt-submit:disabled {
  background: #9AA7AF;
  cursor: default;
  filter: none;
}

.vt-cancel {
  color: var(--vt-ink, #17222B);
  background: #fff;
  border: 1px solid var(--vt-line, #E6E3DD);
}

/* ------------------------------------------------------------------ */
/* Allapotjelzes                                                       */
/* ------------------------------------------------------------------ */
.vt-status {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  min-height: 18px;
}

.vt-status.vt-err { color: var(--vt-red, #B23A3F); font-weight: 600; }
.vt-status.vt-ok { color: var(--vt-teal, #0F766E); font-weight: 600; }
.vt-status.vt-wait { color: var(--vt-ink2, #5a6275); }

.vt-token {
  display: block;
  margin-top: 8px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--vt-ink, #17222B);
  background: #fff;
  border: 1px dashed var(--vt-gold, #C08A2E);
  border-radius: 8px;
  /* A token hosszu es szokoz nelkuli: torhessen, ne fusson ki. */
  word-break: break-all;
}

.vt-loading {
  padding: 22px;
  font-size: 13.5px;
  color: var(--vt-ink2, #5a6275);
  text-align: center;
}

.vt-alert {
  margin: 14px 0;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 9px;
  border-left: 4px solid;
}

.vt-alert-info { background: #F3F6F8; border-color: var(--vt-navy, #123244); color: #26333D; }
.vt-alert-warn { background: #FDF6E7; border-color: var(--vt-gold, #C08A2E); color: #6B4E12; }
.vt-alert-err { background: #FBEFEF; border-color: var(--vt-red, #B23A3F); color: #7E2529; }

/* ------------------------------------------------------------------ */
/* Adminisztracios panelek                                             */
/* ------------------------------------------------------------------ */
.vt-panel {
  border: 2px solid var(--vt-line, #E6E3DD);
  border-radius: 12px;
  padding: 20px 22px;
  background: #fff;
}

.vt-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--vt-line, #E6E3DD);
}

.vt-panel-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  color: var(--vt-navy, #123244);
}

.vt-role {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--vt-teal, #0F766E);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.vt-role-super { background: var(--vt-gold, #C08A2E); }

.vt-lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vt-ink, #17222B);
}

.vt-sub {
  margin: 24px 0 10px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--vt-ink2, #5a6275);
}

.vt-expiry {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--vt-ink2, #5a6275);
}

/* Osszesito szamok */
.vt-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.vt-stat {
  padding: 12px 14px;
  background: #F7F9FA;
  border: 1px solid var(--vt-line, #E6E3DD);
  border-radius: 9px;
  min-width: 0;
}

.vt-stat span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--vt-ink2, #5a6275);
  margin-bottom: 5px;
  /* Ha hosszu a felirat, torjen, ne fusson ki a kartyabol. */
  overflow-wrap: break-word;
}

.vt-stat strong {
  display: block;
  font-size: 21px;
  line-height: 1.2;
  color: var(--vt-navy, #123244);
  overflow-wrap: break-word;
}

/* Keretsav */
.vt-bar {
  height: 10px;
  background: #EDF0F2;
  border-radius: 999px;
  overflow: hidden;
}

.vt-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.vt-bar-ok { background: var(--vt-teal, #0F766E); }
.vt-bar-warn { background: var(--vt-gold, #C08A2E); }
.vt-bar-block { background: var(--vt-red, #B23A3F); }

.vt-bar-lbl {
  margin-top: 6px;
  font-size: 12px;
  color: var(--vt-ink2, #5a6275);
}

/* Tablazat */
.vt-tablewrap {
  /* Mobilon a tabla vizszintesen csusztathato, nem torik szet. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--vt-line, #E6E3DD);
  border-radius: 9px;
}

.vt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.vt-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vt-ink2, #5a6275);
  background: #F7F9FA;
  padding: 10px 12px;
  border-bottom: 1px solid var(--vt-line, #E6E3DD);
  white-space: nowrap;
}

.vt-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #F0EEE9;
  color: var(--vt-ink, #17222B);
  vertical-align: middle;
}

.vt-table tr:last-child td { border-bottom: 0; }

.vt-table td small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--vt-ink2, #5a6275);
  word-break: break-all;
}

.vt-num { text-align: right; white-space: nowrap; }
th.vt-num { text-align: right; }

.vt-cell-act { white-space: nowrap; text-align: right; }

/* ------------------------------------------------------------------ */
/* Rétegzett táblázat szűk helyen                                     */
/* ------------------------------------------------------------------ */
/* A `.vt-stacked` osztályt a JS teszi ki, ha a táblázat tényleges
 * szélessége 620 px alatt van. Ez azért kell, mert a panel a Fiókom
 * modalban van (legfeljebb 680 px), tehát asztali gépen is szűk — media
 * query ott nem segit. Ilyenkor minden sor egy kártyává alakul, és a
 * `data-cimke` mutatja meg, melyik érték mit jelent. Így nem kell
 * vízszintesen csusztatni. */
.vt-stacked { overflow-x: visible; border: 0; }

.vt-stacked .vt-table { min-width: 0; display: block; }
.vt-stacked .vt-table thead { display: none; }
.vt-stacked .vt-table tbody { display: block; }

.vt-stacked .vt-table tr {
  display: block;
  border: 1px solid var(--vt-line, #E6E3DD);
  border-radius: 9px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
}

.vt-stacked .vt-table tr:last-child { margin-bottom: 0; }

.vt-stacked .vt-table td {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 0;
  text-align: left;
  white-space: normal;
}

.vt-stacked .vt-table td::before {
  content: attr(data-cimke);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--vt-ink2, #5a6275);
}

/* Az első cella (e-mail / cégnév) a kártya fejléce: címke nélkül,
 * egymás alatt, hogy a hosszú e-mail-cím ki ne fusson. */
.vt-stacked .vt-table td:first-child {
  display: block;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid #F0EEE9;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
}

.vt-stacked .vt-table td:first-child::before { content: none; }

/* A műveleti cellában nincs érték, csak gombok. */
.vt-stacked .vt-table td.vt-cell-act {
  display: block;
  text-align: left;
  padding-top: 9px;
  margin-top: 4px;
  border-top: 1px solid #F0EEE9;
  white-space: normal;
}

.vt-stacked .vt-table td.vt-cell-act::before { content: none; }
.vt-stacked .vt-table td.vt-cell-act .vt-mini { margin: 3px 6px 3px 0; }

/* Üres táblázat ("még nincs előfizető") ne kapjon címke-elrendezést. */
.vt-stacked .vt-table td[colspan] {
  display: block;
  border: 0;
  font-weight: 400;
}

.vt-stacked .vt-table td[colspan]::before { content: none; }

.vt-mini {
  padding: 6px 11px;
  margin-left: 5px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-navy, #123244);
  background: #fff;
  border: 1px solid var(--vt-line, #E6E3DD);
  border-radius: 7px;
  cursor: pointer;
  /* Touchon is elerheto marad. */
  min-height: 32px;
}

.vt-mini:hover { background: #F7F9FA; border-color: var(--vt-teal, #0F766E); }

/* Cimkek */
.vt-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.vt-tag-ok { background: #E4F3F0; color: #0B5C56; }
.vt-tag-wait { background: #FBF1DC; color: #7A5A14; }
.vt-tag-off { background: #EFEFEF; color: #5C5C5C; }
.vt-tag-admin { background: #E7EDF2; color: #1A3C51; }

/* Naplo */
.vt-log {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

/* A naplósor két részes: dátum + hivatkozás. Flexszel a hosszú
 * ingatlancím tört sorai EGY blokkban maradnak, nem ugranak vissza a
 * dátum alá — az olvashatatlanul rendezetlen látványt adna. */
.vt-log li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #F0EEE9;
  color: var(--vt-ink, #17222B);
  overflow-wrap: break-word;
  word-break: break-word;
}

.vt-log li:last-child { border-bottom: 0; }

.vt-log span {
  flex: 0 0 auto;
  color: var(--vt-ink2, #5a6275);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.vt-invite {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--vt-line, #E6E3DD);
}

/* ------------------------------------------------------------------ */
/* Reszponzív                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 1000px) {
  .vt-grid { grid-template-columns: 1fr 1fr; }
  .vt-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .vt-grid { grid-template-columns: 1fr; gap: 16px; }
  .vt-row { grid-template-columns: 1fr; }
  .vt-card { padding: 0 18px 18px; }
  .vt-head { margin: 0 -18px 16px; }
  .vt-panel, .vt-form { padding: 16px 15px; }
  .vt-price { font-size: 24px; }
  .vt-name { font-size: 18px; }
  /* Mobilon a visszafogottabb arnyek nem "lebeg" zavaroan. */
  .vt-card { box-shadow: 0 1px 5px rgba(18, 50, 68, .07); }
  .vt-card:hover { transform: none; }
  .vt-cell-act { text-align: left; }
  .vt-mini { margin: 3px 5px 3px 0; }
}

@media (max-width: 420px) {
  .vt-stats { grid-template-columns: 1fr; }
}

/* Mozgascsokkentett mod */
@media (prefers-reduced-motion: reduce) {
  .vt-card, .vt-bar-fill { transition: none; }
  .vt-card:hover { transform: none; }
}