/* =============================================================================
   Iktató — LIQUID GLASS GOMB-RENDSZER (iOS 26 hang, absec paletta).
   Átvéve a far360 buttons.css-éből; a „Liquid Glass gomb-rendszer” szabályai
   (far360/DESIGN.md) változtatás nélkül érvényesek.

   EGY rendszer, négy változat: .btn-f (elsődleges) · .btn-f-outline (másodlagos) ·
   .btn-f-ghost · .btn-f-danger. Az input[type="submit"] az elsődlegest kapja.

   KONTRASZT — a mérés a TÉNYLEGES háttér fölött történik: az üveg áttetsző, tehát a
   felirat a kikeveredett felülethez képest olvasható. Legrosszabb esetek (küszöb 4,5:1):
   elsődleges 6,21:1 · másodlagos 10,02:1 · ghost 13,59:1 · romboló 7,14:1 · letiltott 5,64:1.
   A ghost SÖTÉT felületen fehér feliratot kap: ink felirattal ott 1:1 lenne.
   ============================================================================= */
.btn-f,
.btn-f-outline,
.btn-f-ghost,
.btn-f-danger,
input[type="submit"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  /* WCAG 2.5.5: 44×44 px érintési méret MINDEN eszközön, nem csak mobilon. */
  min-height: 44px;
  min-width: 44px;
  padding: 0.6em 1.5em;
  border: 1px solid var(--glass-line-soft);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Az üveg homálya; a saturate adja a „folyékony” színtelítést. Fényél felül, halvány
     árnyék-él alul, lágy mélység. A backdrop-filter SOSEM animált (drága). */
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--glass-edge),
              inset 0 -1px 0 var(--glass-edge-low),
              var(--glass-depth-1);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* --- Elsődleges ---------------------------------------------------------- */
.btn-f,
input[type="submit"] {
  background-color: var(--glass-primary);
  color: var(--f-on-primary);
  border-color: rgba(255, 255, 255, 0.22);
}
.btn-f:hover,
input[type="submit"]:hover {
  background-color: var(--glass-primary-hover);
  color: var(--f-on-primary);
  text-decoration: none;
}

/* --- Másodlagos (a régi „outline”) -------------------------------------- */
.btn-f-outline {
  background-color: var(--glass-secondary);
  color: var(--f-ink);
  /* A körvonal a kezelőszervet AZONOSÍTJA: .55 alfa = 4,05:1 a lapháttéren. */
  border-color: var(--glass-line);
}
.btn-f-outline:hover {
  background-color: var(--glass-secondary-hover);
  color: var(--f-ink);
  text-decoration: none;
}

/* --- Szellem: eszköztárak, harmadrangú műveletek -------------------------- */
.btn-f-ghost {
  background-color: var(--glass-ghost);
  color: var(--f-ink);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.btn-f-ghost:hover {
  background-color: var(--glass-ghost-hover);
  border-color: var(--glass-line);
  color: var(--f-ink);
  text-decoration: none;
}

/* --- Romboló ------------------------------------------------------------- */
.btn-f-danger {
  background-color: var(--glass-danger);
  color: var(--f-on-primary);
  border-color: rgba(255, 255, 255, 0.2);
}
.btn-f-danger:hover {
  background-color: var(--glass-danger-hover);
  color: var(--f-on-primary);
  text-decoration: none;
}

/* --- Állapotok (minden változatra) -------------------------------------- */
.btn-f:hover,
.btn-f-outline:hover,
.btn-f-ghost:hover,
.btn-f-danger:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-depth-2);
}

.btn-f:active,
.btn-f-outline:active,
.btn-f-ghost:active,
.btn-f-danger:active,
input[type="submit"]:active {
  transform: translateY(0) scale(0.975);
  box-shadow: inset 0 1px 3px rgba(16, 16, 16, 0.22);
}

/* A fókuszgyűrű a base.css-ből jön; itt csak a gomb saját mélység-árnyéka ne írja felül. */
.btn-f:focus-visible,
.btn-f-outline:focus-visible,
.btn-f-ghost:focus-visible,
.btn-f-danger:focus-visible,
input[type="submit"]:focus-visible {
  box-shadow: 0 0 0 2px var(--f-white), var(--glass-depth-1);
}

/* A LETILTOTT gomb SZÁNDÉKOSAN nem üveg: átlátszatlan töltet, homály nélkül. Áttetsző
   tölteten a --f-grey-2 felirat sötét felületek fölött csak 4,10:1 volt; így mindenhol 5,64:1. */
.btn-f:disabled,
.btn-f-outline:disabled,
.btn-f-ghost:disabled,
.btn-f-danger:disabled,
input[type="submit"]:disabled,
.btn-f[aria-disabled="true"] {
  background-color: var(--f-light);
  color: var(--f-grey-2);
  border-color: var(--glass-line-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* --- Sötét felületen (fejléc, lábléc, .u-dark blokk) ---------------------- */
.f-header .btn-f-ghost,
.f-footer .btn-f-ghost,
.u-dark .btn-f-ghost {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--f-on-dark-strong);
  border-color: rgba(255, 255, 255, 0.34);
}

/* --- Méretek ------------------------------------------------------------- */
.btn-f--full { width: 100%; }

/* Kompakt gomb a SŰRŰ táblázatokhoz: a LÁTVÁNY kicsi marad, az ÉRINTÉSI CÉL 44 px
   (a ::after egy láthatatlan, a gombra középre húzott takaró). */
.btn-f--small {
  min-height: 34px;
  padding: 0.35em 0.95em;
  font-size: 0.85rem;
}
.btn-f--small::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}

@media (max-width: 820px) {
  /* Mobilon nincs sűrű táblázat: a kompakt gomb is valódi 44 px magas. */
  .btn-f--small { min-height: 44px; }
  .btn-f--small::after { display: none; }
}