/* VET-PROFIL arculat - torzsvasarloi kartya nyilvantartas.
 *
 * A szinek es a tipografia a vetprofil.hu-rol: meleg arany kiemeles (#EDB059)
 * sotet, majdnem fekete szovegen (#232121), sok feher felulettel. A felepites
 * viszont szandekosan csupasz: nincs menusor es nincs lablec-sav, a publikus
 * oldal egyetlen kozepre zart oszlop. Az arculatbol a SZIN marad, nem a
 * weboldal szerkezete.
 *
 * A Montserrat helyben van (assets/font/), nincs CDN - a felulet halozat
 * nelkul, belso halon is ugyanigy nez ki.
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;               /* valtozo betukeszlet: egy fajl, minden vastagsag */
  font-display: swap;
  src: url('/assets/font/montserrat-latin-ext.woff2') format('woff2');
  /* Az o es u is ide esik - magyar szoveghez ez a szelet kell. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/font/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --arany:        #EDB059;
  --arany-sotet:  #DE9330;
  --arany-halk:   #FBF1E1;
  --arany-vonal:  #F1DDBE;
  --tinta:        #232121;
  --tinta-halk:   #6C6763;
  --vonal:        #E8E2DA;
  --lap:          #FFFFFF;
  --hatter:       #FBF9F6;
  --zold:         #4C8A38;
  --zold-halk:    #EDF5E9;
  --piros:        #C0392B;
  --piros-halk:   #FBEDEB;
  --arnyek:       0 1px 2px rgba(35,33,33,.04), 0 8px 28px rgba(35,33,33,.05);
  --iv:           14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Montserrat', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--hatter);
  -webkit-font-smoothing: antialiased;
}

/* Ennyi maradt az arculat "organikus arany foltjabol": egy alig latszo
 * derenges a lap tetejen. Formaja nincs, csak melegsege. */
body.kozepre {
  background-image: radial-gradient(115% 48% at 50% -16%,
                    #F9E8CE 0%, rgba(251,249,246,0) 68%);
  background-repeat: no-repeat;
}

h1, h2, h3 { margin: 0 0 .4em; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.6rem, 3.6vw, 2.15rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.02rem; }
p  { margin: 0 0 1em; }
a  { color: var(--arany-sotet); }

.keret { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.szakasz { padding: 30px 0; }

/* ------------------------------------------------------- kozepre zart lap */

.kozep {
  max-width: 700px;
  margin: 0 auto;
  padding: clamp(48px, 9vh, 88px) 20px 40px;
  text-align: center;
}
.kozep h1 { margin-bottom: .35em; }
.kozep .alcim {
  max-width: 44ch; margin: 0 auto 34px;
  color: var(--tinta-halk); font-size: .97rem;
}

.jelkep { display: block; height: 56px; width: auto; margin: 0 auto 30px; }
.jelkep.kicsi { height: 40px; margin: 0; }

.halk-lablec {
  margin-top: 46px; padding-top: 20px;
  border-top: 1px solid var(--vonal);
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  font-size: .82rem; color: var(--tinta-halk);
}
.halk-lablec a { color: var(--tinta-halk); text-decoration: none; }
.halk-lablec a:hover { color: var(--arany-sotet); }

/* Az admin fejlec nem sav, csak egy sor a tartalom felett. */
.admin-fej {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 8px;
  border-bottom: 1px solid var(--vonal);
}
.admin-fej h1 { margin: 0; font-size: 1.5rem; }
.admin-fej .sugo { margin: 0; }

/* ----------------------------------------------------------------- kartek */

.kartya {
  background: var(--lap); border: 1px solid var(--vonal);
  border-radius: var(--iv); box-shadow: var(--arnyek); padding: 26px;
  text-align: left;                  /* a kozepre zart oszlopban is balra olvas */
}

/* ------------------------------------------------------------------ urlap */

label { display: block; font-weight: 600; font-size: .82rem; margin-bottom: 6px; }
.sugo { display: block; font-weight: 400; font-size: .78rem; color: var(--tinta-halk); margin-top: 4px; }

input[type=text], input[type=search], input[type=password], select {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--lap);
  border: 1px solid var(--vonal); border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus {
  outline: none; border-color: var(--arany);
  box-shadow: 0 0 0 3px var(--arany-halk);
}
input::placeholder { color: #B4ADA6; }

.mezok { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mezok .teljes { grid-column: 1 / -1; }
@media (max-width: 620px) { .mezok { grid-template-columns: 1fr; } }

.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; font: inherit; font-weight: 700; font-size: .95rem;
  color: #fff; background: var(--arany); border: 1px solid var(--arany);
  border-radius: 999px; cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.gomb:hover { background: var(--arany-sotet); border-color: var(--arany-sotet); color: #fff; }
.gomb:active { transform: translateY(1px); }
.gomb[disabled] { opacity: .5; cursor: default; transform: none; }
.gomb.halk { background: transparent; color: var(--tinta); border-color: var(--vonal); }
.gomb.halk:hover { background: var(--arany-halk); border-color: var(--arany-vonal); color: var(--tinta); }
.gomb.kicsi { padding: 7px 16px; font-size: .82rem; }

/* ------------------------------------------------------------ kereso sav */

/* A publikus kereso egyetlen fuggoleges oszlop: cimke, mezo, gomb. */
.kozep .kereso { display: block; }
.kozep .kereso label {
  text-transform: uppercase; letter-spacing: .14em;
  font-size: .7rem; color: var(--tinta-halk); margin-bottom: 10px;
}
.kozep .kereso input {
  font-size: 1.45rem; font-weight: 700; letter-spacing: .14em;
  text-align: center;
  /* Ket oldalt AZONOS behuzas: igy a szoveg tenyleg kozepen all, a jobb
   * oldali resben pedig elfer a markalogo. */
  padding: 16px 72px;
  border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.kozep .kereso .gomb { margin-top: 16px; min-width: 200px; }

.input-jel { position: relative; display: block; }

/* A markalogo a mezo jobb szelen bukkan fel, amint a sorszam felismerheto. */
.marka-jel {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.9);
  height: 28px; opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.marka-jel.lathato { opacity: 1; transform: translateY(-50%) scale(1); }

/* ---------------------------------------------------------------- allapot */

.szalag {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 18px; border-radius: 12px; margin-bottom: 22px;
  font-weight: 700;
}
.szalag.jo   { background: var(--zold-halk);  color: var(--zold);  border: 1px solid #CFE4C6; }
.szalag.rossz{ background: var(--piros-halk); color: var(--piros); border: 1px solid #F1CFCA; }
.szalag.semleges { background: var(--arany-halk); color: var(--tinta); border: 1px solid var(--arany-vonal); }
.szalag .kis { font-weight: 500; font-size: .88rem; opacity: .85; }

.jelveny {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
}
.jelveny.jo    { background: var(--zold-halk);  color: var(--zold); }
.jelveny.rossz { background: var(--piros-halk); color: var(--piros); }
.jelveny.varo  { background: #F2EFEB; color: var(--tinta-halk); }

/* ------------------------------------------------------------ kartyalap */

.kartyafej { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 20px; }
.szam {
  font-size: 1.9rem; font-weight: 700; letter-spacing: .1em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kartyafej img.marka { height: 38px; margin-left: auto; }

.adatok { display: grid; gap: 2px 26px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.adatok div { padding: 10px 0; border-top: 1px solid var(--vonal); }
.adatok dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-halk); font-weight: 700; }
.adatok dd { margin: 2px 0 0; font-weight: 600; }

.jutalmak { margin-top: 24px; display: grid; gap: 12px; }
.jutalom {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--vonal); border-radius: 12px;
  background: var(--hatter);
}
.jutalom.kesz { background: var(--zold-halk); border-color: #CFE4C6; }
.jutalom .cim { font-weight: 700; }
.jutalom .leiras { font-size: .85rem; color: var(--tinta-halk); }
/* A szoveg zsugorodjon, ne az allapot toredezzen ket sorba: hosszabb
 * jutalomleirasnal az "Atadva" es az idopont egyben kell maradjon. */
.jutalom .szoveg { flex: 1 1 160px; min-width: 0; }
.jutalom .jobb { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; }
.pipa {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 2px solid var(--vonal); background: var(--lap);
  display: grid; place-items: center; color: transparent; font-weight: 700;
}
.jutalom.kesz .pipa { border-color: var(--zold); background: var(--zold); color: #fff; }

/* ------------------------------------------------------------------ lista */

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--vonal); vertical-align: middle; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-halk); white-space: nowrap; }
tbody tr:hover { background: var(--arany-halk); }
td.szamoszlop { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .06em; white-space: nowrap; }
.tabla-doboz { overflow-x: auto; border: 1px solid var(--vonal); border-radius: var(--iv); background: var(--lap); }

/* Kapcsolo a jutalmakhoz az admin listaban. */
.kapcs { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .84rem; white-space: nowrap; }
.kapcs input { width: 18px; height: 18px; accent-color: var(--zold); cursor: pointer; margin: 0; }

/* A lista szurosora keskenyebb, mint a regisztracios urlap. */
.szuro { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); margin-bottom: 18px; }
@media (max-width: 620px) { .szuro { grid-template-columns: 1fr; } }

/* Az admin urlapon a szam melletti markajel kisebb mezoben ul. */
#uj-szam { padding-right: 84px; letter-spacing: .08em; font-weight: 700; }
#uj-marka { height: 20px; right: 10px; }

/* -------------------------------------------------------------- belepes */

/* A talalati lap aljan ul, elvalasztva: nem a kartya adata, hanem ajanlat.
 * Alaphelyzetben egyetlen halk gomb, kibontva egy soros urlap. */
.belepo {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--vonal);
}
.belepo-urlap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.belepo-urlap input { width: auto; flex: 1 1 150px; min-width: 130px; padding: 9px 12px; font-size: .92rem; }
.belepo-urlap .uzenet { flex: 1 1 100%; margin: 4px 0 0; }

/* Az admin fejlecben a kilepes gomb a jobb szelre kerul. */
.admin-fej .gomb + .gomb { margin-left: 10px; }

/* ---------------------------------------------------------------- uzenet */

.uzenet { padding: 13px 16px; border-radius: 10px; margin: 16px 0; font-size: .92rem; font-weight: 600; text-align: left; }
.uzenet.hiba { background: var(--piros-halk); color: var(--piros); border: 1px solid #F1CFCA; }
.uzenet.jo   { background: var(--zold-halk);  color: var(--zold);  border: 1px solid #CFE4C6; }
.rejtve { display: none !important; }
.tolo { margin-left: auto; }

.feltetel {
  margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--vonal);
  font-size: .86rem; color: var(--tinta-halk);
}

/* Kepernyoolvasonak megvan, szemmel nem latszik. */
.rejtett-cimke {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

#eredmeny:not(:empty) { margin-top: 30px; }

/* A nyomtatott kimutatas ne vigyen feleslegeset a papirra. */
/* ---------------------------------------- mobil es hazikepernyo (PWA) */

/* A lap hazikepernyore tehato: iOS-en Megosztas -> Hozzaadas a kezdolaphoz,
 * Androidon menu -> Alkalmazas telepitese. Ilyenkor nincs bongeszo-fejlec,
 * a lap maga a kepernyo - ez a szakasz ehhez igazit. */

html { -webkit-text-size-adjust: 100%; }

/* A `viewport-fit=cover` miatt a lap a TELJES kepernyot kapja, tehat a
 * bevagas (notch) es a home-jelzo ala is befutna. Az env() ertekek rendes
 * bongeszoben 0-k, tehat ezek a sorok csak ott tesznek valamit, ahol kell. */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.kozep { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.keret { padding-bottom: env(safe-area-inset-bottom); }

/* Az alapertelmezett kek koppintas-villanas helyett arculati meleg folt. */
a, button, .gomb, .kapcs { -webkit-tap-highlight-color: rgba(237, 176, 89, .25); }

@media (pointer: coarse) {
  /* Az iOS RANAGYIT a lapra, ha egy fokuszalt mezo betuje 16px alatt van.
   * A belepokod beirasakor ez eppen a legrosszabbkor rantana el a kepet. */
  .belepo-urlap input { font-size: 16px; }

  /* Ujjal a 44 px koruli talalati felulet a kenyelmes minimum. */
  .gomb { min-height: 44px; }
  .gomb.kicsi { min-height: 42px; padding-top: 10px; padding-bottom: 10px; }
  .kapcs input { width: 22px; height: 22px; }
}

@media (display-mode: standalone) {
  /* Nincs bongeszo-fejlec, tehat a lap teteje maga a kepernyo teteje: ott
   * kevesebb levego is eleg, es a kereso mezo hüvelykujjal is elerhetobb. */
  .kozep { padding-top: clamp(24px, 5vh, 52px); }
  /* A tulhuzas ne rantsa el az egesz lapot - alkalmazasban ez idegen mozdulat. */
  body { overscroll-behavior-y: contain; }
}

@media print {
  .gomb, .kereso, .halk-lablec, .jelkep { display: none !important; }
  body { background: #fff; background-image: none; }
  .kartya { box-shadow: none; border-color: #999; }
}