/*
  Expressz csomag — megosztott, token-vezérelt design-rendszer.
  Minden iparági demó (klíma/könyvelő/villanyszerelő/vízszerelő) ugyanezt a
  fájlt linkeli — az újraszínezéshez/logócseréhez csak a .trade-template
  wrapper --tt-* CSS-változóit kell felülírni az adott oldal saját
  theme-osztályával, a komponens-osztályok (tt-*) és a HTML szerkezet
  változatlan marad.

  IRÁNY: "szerviz-specifikáció / munkalap" — a valódi szerviz-dokumentumok
  (munkalap, tanúsítvány, tételes díjbekérő) vizuális nyelve, nem generikus
  "SaaS landing page" kártyarács. Az árlista táblázatos tételsor, nem
  azonos méretű ikon-kártyák; a monospace kizárólag valódi adatokhoz
  (árak, dátum, referenciaszám) tartozik, nem díszítő "technikai" kosztüm.
*/

.trade-template {
  --tt-ink: #0F172A;
  --tt-paper: #FFFFFF;
  --tt-mist: #F5F7FA;
  --tt-accent: #2F80C4;
  --tt-accent-dark: #1F5C91;
  --tt-accent-soft: #E7F1FA;
  --tt-text: #334155;
  --tt-text-soft: #64748B;
  --tt-border: #E2E8F0;

  background-color: var(--tt-paper);
  color: var(--tt-text);
}

/* Iparági téma-felülírások — a színváltozók (accent ÉS a sötét "ink" panel-
   szín is) térnek el oldalanként, hogy a motívum végigmenjen az egész
   oldalon, ne csak a gombokon/ikonokon. Minden más (tt-* osztály, HTML
   szerkezet) azonos marad. */
.theme-klima {
  --tt-ink: #0B2136;
}
.theme-konyvelo {
  --tt-accent: #0F9D6B;
  --tt-accent-dark: #0B7A54;
  --tt-accent-soft: #E4F5EE;
  --tt-ink: #08211A;
}
.theme-villany {
  --tt-accent: #C27803;
  --tt-accent-dark: #96600A;
  --tt-accent-soft: #FBF0DD;
  --tt-ink: #241906;
}
.theme-viz {
  --tt-accent: #0E86A8;
  --tt-accent-dark: #0B6883;
  --tt-accent-soft: #E1F2F6;
  --tt-ink: #072026;
}

.tt-ink { color: var(--tt-ink); }
.tt-accent { color: var(--tt-accent); }
.tt-bg-mist { background-color: var(--tt-mist); }
.tt-bg-ink { background-color: var(--tt-ink); }
.tt-bg-accent { background-color: var(--tt-accent); }
.tt-bg-accent-soft { background-color: var(--tt-accent-soft); }
.tt-border { border-color: var(--tt-border); }

/* Valódi adatokhoz (ár, dátum, referenciaszám, telefonszám) — nem díszítés */
.tt-data {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.tt-btn-primary {
  background-color: var(--tt-ink);
  color: #fff;
  font-weight: 700;
  transition: background-color .2s ease, transform .2s ease;
}
.tt-btn-primary:hover { background-color: var(--tt-accent-dark); transform: translateY(-1px); }

.tt-btn-accent {
  background-color: var(--tt-accent);
  color: #fff;
  font-weight: 700;
  transition: background-color .2s ease, transform .2s ease;
}
.tt-btn-accent:hover { background-color: var(--tt-accent-dark); transform: translateY(-1px); }

.tt-btn-outline {
  background-color: #fff;
  color: var(--tt-ink);
  font-weight: 700;
  border: 1.5px solid var(--tt-border);
  transition: border-color .2s ease, color .2s ease;
}
.tt-btn-outline:hover { border-color: var(--tt-accent); color: var(--tt-accent); }

/* Dokumentum-panel: sarok-jelölésekkel, mint egy hivatalos munkalap/tanúsítvány */
.tt-doc-panel {
  position: relative;
  background-color: #fff;
  border: 1px solid var(--tt-border);
}
.tt-doc-panel::before,
.tt-doc-panel::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--tt-accent);
  opacity: 0.6;
}
.tt-doc-panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tt-doc-panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Tételsor az árlistában — táblázatos, nem kártyarács */
.tt-spec-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--tt-border);
}
/* Grid-elemek alapból nem zsugorodnak a tartalmuk min-szélessége alá —
   enélkül a fejléc (ikon+cím+jelvény) mobilon kitolja a sort a konténerből. */
.tt-spec-row > * {
  min-width: 0;
}
.tt-spec-row:first-child { padding-top: 0; }
.tt-spec-row:last-child { border-bottom: none; }
.tt-spec-row.featured {
  background-color: var(--tt-ink);
  color: #fff;
  margin: 0 -2rem;
  padding: 1.75rem 2rem;
  border-bottom: none;
  border-radius: 0.5rem;
}
@media (max-width: 640px) {
  .tt-spec-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .tt-spec-row.featured {
    margin: 0 -1.25rem;
    padding: 1.5rem 1.25rem;
  }
}

/* Bizalmi sáv felsorolása — az ikon és a szöveg egy egységben marad
   (inline-flex), a tételeket az ikon+szöveg pár választja el, nem elválasztójel. */
.tt-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tt-trust-item svg {
  flex-shrink: 0;
}

/* GYIK harmonika — grid-rows technika helyett max-height, mert a tartalom
   mérete ismert/korlátozott (rövid válaszok). */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-panel.is-open { max-height: 220px; }

/* Szolgáltatás fülek aktív állapota */
.tab-btn.is-active {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  color: var(--tt-accent);
}

.tt-cal-day {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tt-cal-free { background-color: var(--tt-accent-soft); color: var(--tt-ink); }
.tt-cal-partial { background-color: #FEF3C7; color: #92400E; }
.tt-cal-full { background-color: #F1F5F9; color: #94A3B8; }
.tt-cal-past { background-color: transparent; color: #CBD5E1; }
.tt-cal-selected { background-color: var(--tt-accent); color: #fff; }