/* ==========================================================================
   GENERIC CLEAN SHELL - komponensreteg
   Eredet: NEW CLEAN IMPLEMENTATION.

   Elvek:
   - minden komponens sajat token-felulettel indul (--gs-<komponens>-*),
     igy arculati koron a komponens belulrol hangolhato a globalis tokenek
     felulirasa nelkul;
   - a viselkedest a JS kizarolag data-gs-* attributumon keresztul koti be,
     osztalynevekre nem tamaszkodik;
   - allapotot data-* attributum vagy ARIA hordoz, nem "is-open" osztaly.
   ========================================================================== */

/* ============================================================== 1. BUTTON */

.gs-btn {
  --gs-btn-bg: var(--color-primary);
  --gs-btn-fg: var(--color-primary-contrast);
  --gs-btn-border: transparent;
  --gs-btn-padding-x: var(--space-md);
  --gs-btn-height: var(--field-height);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: var(--gs-btn-height);
  padding-inline: var(--gs-btn-padding-x);
  border: var(--control-border) solid var(--gs-btn-border);
  border-radius: var(--radius-sm);
  background: var(--gs-btn-bg);
  color: var(--gs-btn-fg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.gs-btn:hover  { background: var(--color-primary-strong); color: var(--gs-btn-fg); }
.gs-btn:active { transform: translateY(1px); }
.gs-btn[aria-disabled="true"],
.gs-btn:disabled { opacity: 0.55; pointer-events: none; }

.gs-btn--secondary {
  --gs-btn-bg: var(--color-secondary);
  --gs-btn-fg: var(--color-secondary-contrast);
}
.gs-btn--secondary:hover { background: var(--color-secondary-strong); }

.gs-btn--accent {
  --gs-btn-bg: var(--color-accent);
  --gs-btn-fg: var(--color-accent-contrast);
}
.gs-btn--accent:hover { background: var(--color-accent-strong); }

.gs-btn--outline {
  --gs-btn-bg: transparent;
  --gs-btn-fg: var(--color-primary);
  --gs-btn-border: var(--color-primary);
}
.gs-btn--outline:hover { background: var(--color-primary-soft); color: var(--color-primary-strong); }

.gs-btn--ghost {
  --gs-btn-bg: transparent;
  --gs-btn-fg: var(--text-primary);
}
.gs-btn--ghost:hover { background: var(--surface-sunken); color: var(--text-primary); }

.gs-btn--sm { --gs-btn-height: 2.25rem; --gs-btn-padding-x: var(--space-sm); font-size: var(--font-size-xs); }
.gs-btn--lg { --gs-btn-height: 3.25rem; --gs-btn-padding-x: var(--space-lg); font-size: var(--font-size-md); }
.gs-btn--block { width: 100%; }
.gs-btn--icon { --gs-btn-padding-x: 0; width: var(--gs-btn-height); }

/* Ikon a gombban: a szoveghez igazodik, nem sajat meretet visz. */
.gs-btn__icon { width: 1.15em; height: 1.15em; flex: none; }

/* ============================================================== 2. HEADER */

.gs-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  min-height: var(--header-height);
  background: var(--surface);
  border-block-end: 1px solid transparent;
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

/* Gorgetett allapot: a JS data-gs-scrolled attributumot allit. */
.gs-header[data-gs-scrolled="true"] {
  border-block-end-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.gs-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.gs-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-inline-end: auto;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: var(--letter-spacing-tight);
}
.gs-header__brand-mark {
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.gs-header__actions { display: flex; align-items: center; gap: var(--space-2xs); }

/* ================================================== 3. DESKTOP NAVIGATION */

.gs-nav { display: none; }

@media (min-width: 64rem) {
  .gs-nav { display: block; }
  .gs-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .gs-nav__item { position: relative; }
  .gs-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-xs);
    /* A <button> valtozat ne orokolje a bongeszo alap gomb-hatteret es
       -keretet: a nav-elem vizualisan link, csak szemantikailag gomb. */
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-standard),
                background-color var(--duration-fast) var(--ease-standard);
  }
  .gs-nav__link:hover { color: var(--text-primary); background: var(--surface-sunken); }
  .gs-nav__link[aria-current="page"] { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

  /* Nyito nyil: az aria-expanded allapotot koveti. */
  .gs-nav__caret {
    width: 0.55em;
    height: 0.55em;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: translateY(-0.12em) rotate(45deg);
    transition: transform var(--duration-fast) var(--ease-standard);
  }
  .gs-nav__link[aria-expanded="true"] .gs-nav__caret { transform: translateY(0.1em) rotate(-135deg); }
}

/* ============================================================ 4. DROPDOWN */

.gs-dropdown {
  position: absolute;
  inset-block-start: calc(100% + var(--space-3xs));
  inset-inline-start: 0;
  z-index: var(--z-raised);
  min-width: 15rem;
  margin: 0;
  padding: var(--space-3xs);
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.35rem);
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility 0s linear var(--duration-fast);
}
.gs-dropdown[data-gs-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.gs-dropdown__link {
  display: block;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.gs-dropdown__link:hover { background: var(--surface-sunken); color: var(--text-primary); }
.gs-dropdown__link[aria-current="page"] { color: var(--color-primary); }

/* Jobb szelen nyilo valtozat, hogy ne csusszon ki a nezetbol. */
.gs-dropdown--end { inset-inline-start: auto; inset-inline-end: 0; }

/* ====================================================== 5. NAV TOGGLE GOMB */

.gs-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
}
.gs-nav-toggle:hover { background: var(--surface-sunken); }
@media (min-width: 64rem) { .gs-nav-toggle { display: none; } }

.gs-nav-toggle__box { position: relative; width: 1.25rem; height: 0.875rem; }
.gs-nav-toggle__bar {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.gs-nav-toggle__bar:nth-child(1) { inset-block-start: 0; }
.gs-nav-toggle__bar:nth-child(2) { inset-block-start: calc(50% - 1px); }
.gs-nav-toggle__bar:nth-child(3) { inset-block-end: 0; }

.gs-nav-toggle[aria-expanded="true"] .gs-nav-toggle__bar:nth-child(1) { transform: translateY(0.4rem) rotate(45deg); }
.gs-nav-toggle[aria-expanded="true"] .gs-nav-toggle__bar:nth-child(2) { opacity: 0; }
.gs-nav-toggle[aria-expanded="true"] .gs-nav-toggle__bar:nth-child(3) { transform: translateY(-0.4rem) rotate(-45deg); }

/* ============================================================== 6. DRAWER */

.gs-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  width: var(--drawer-width);
  background: var(--surface);
  border-inline-start: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--duration-base) var(--ease-exit),
              visibility 0s linear var(--duration-base);
}
.gs-drawer[data-gs-open="true"] {
  transform: translateX(0);
  visibility: visible;
  transition-timing-function: var(--ease-entrance);
  transition-delay: 0s;
}
@media (min-width: 64rem) { .gs-drawer, .gs-drawer-overlay { display: none; } }

.gs-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-height-sm);
  padding-inline: var(--space-sm);
  border-block-end: 1px solid var(--border-subtle);
}
.gs-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-sm);
}
.gs-drawer__foot {
  padding: var(--space-sm);
  border-block-start: 1px solid var(--border-subtle);
}

.gs-drawer__list { margin: 0; padding: 0; list-style: none; }
.gs-drawer__link {
  display: block;
  padding: var(--space-xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}
.gs-drawer__link:hover { background: var(--surface-sunken); }
.gs-drawer__link[aria-current="page"] { color: var(--color-primary); }

/* Almenu-nyito a fiokban. */
.gs-drawer__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  width: 100%;
  padding: var(--space-xs) var(--space-2xs);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  text-align: start;
}
.gs-drawer__subtoggle:hover { background: var(--surface-sunken); }
.gs-drawer__subcaret {
  width: 0.5em; height: 0.5em; flex: none;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.gs-drawer__subtoggle[aria-expanded="true"] .gs-drawer__subcaret { transform: rotate(-135deg); }

.gs-drawer__sublist {
  margin: 0;
  padding: 0 0 0 var(--space-sm);
  list-style: none;
  overflow: hidden;
}
.gs-drawer__sublist[hidden] { display: none; }

.gs-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--surface-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
.gs-drawer-overlay[data-gs-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }

/* A torzs gorgetesenek zarolasa nyitott fiok/modal alatt. */
body[data-gs-scroll-lock="true"] { overflow: hidden; }

/* ================================================================ 7. HERO */

.gs-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(24rem, 18rem + 22vw, 40rem);
  padding-block: var(--space-2xl);
  background: var(--surface-alt);
  overflow: hidden;
}
.gs-hero__inner { position: relative; z-index: 1; width: 100%; }
.gs-hero__content { max-width: 42rem; }
.gs-hero--centered .gs-hero__content { margin-inline: auto; text-align: center; }

.gs-hero__title {
  font-size: var(--font-size-display);
  margin-block-end: var(--space-xs);
}
.gs-hero__lead {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  margin-block-end: var(--space-md);
}
.gs-hero--centered .gs-hero__lead { margin-inline: auto; }
.gs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.gs-hero--centered .gs-hero__actions { justify-content: center; }

/* Hatterreteg: kep vagy szinatmenet. A tartalom olvashatosagat a maszk adja. */
.gs-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.gs-hero__media > img { width: 100%; height: 100%; object-fit: cover; }
.gs-hero__mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--surface) 88%, transparent),
    color-mix(in srgb, var(--surface) 40%, transparent)
  );
}
.gs-hero--inverse { background: var(--surface-inverse); color: var(--text-inverse); }
.gs-hero--inverse :where(h1, h2, h3) { color: inherit; }
.gs-hero--inverse .gs-hero__lead { color: color-mix(in srgb, var(--text-inverse) 78%, transparent); }

/* ================================================================ 8. CARD */

.gs-card {
  --gs-card-padding: var(--space-md);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.gs-card--interactive:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.gs-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--surface-sunken); }
.gs-card__media > img { width: 100%; height: 100%; object-fit: cover; }
.gs-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1 1 auto;
  padding: var(--gs-card-padding);
}
.gs-card__eyebrow {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-primary);
}
.gs-card__title { margin: 0; font-size: var(--font-size-lg); }
.gs-card__text { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.gs-card__foot {
  margin-block-start: auto;
  padding-block-start: var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
}
.gs-card__meta { font-size: var(--font-size-xs); color: var(--text-muted); }

/* Teljes kartya kattinthato: a cimben levo link kiterjed a kartyara,
   de a kartyan beluli tovabbi linkek kattinthatok maradnak. */
.gs-card--linked { position: relative; }
.gs-card--linked .gs-card__link::after { content: ""; position: absolute; inset: 0; }
.gs-card--linked .gs-card__link { text-decoration: none; color: inherit; }
.gs-card--linked .gs-card__foot > * { position: relative; z-index: 1; }

.gs-card--icon .gs-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.gs-card--icon .gs-card__icon > svg { width: 1.4rem; height: 1.4rem; }

/* ================================================================= 9. CTA */

.gs-cta {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--radius-xl);
  background: var(--color-primary-soft);
}
@media (min-width: 48rem) {
  .gs-cta { grid-template-columns: 1fr auto; gap: var(--space-xl); }
}
.gs-cta__title { margin: 0 0 var(--space-3xs); font-size: var(--font-size-section); }
.gs-cta__text  { margin: 0; color: var(--text-secondary); }
.gs-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.gs-cta--inverse {
  background: var(--surface-inverse);
  color: var(--text-inverse);
}
.gs-cta--inverse .gs-cta__title { color: inherit; }
.gs-cta--inverse .gs-cta__text  { color: color-mix(in srgb, var(--text-inverse) 78%, transparent); }

/* =========================================================== 10. ACCORDION */

.gs-accordion { border-block-start: 1px solid var(--border-subtle); }
.gs-accordion__item { border-block-end: 1px solid var(--border-subtle); }

.gs-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  text-align: start;
}
.gs-accordion__trigger:hover { color: var(--color-primary); }

.gs-accordion__icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}
.gs-accordion__icon::before,
.gs-accordion__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.gs-accordion__icon::after { transform: rotate(90deg); }
.gs-accordion__trigger[aria-expanded="true"] .gs-accordion__icon::after { transform: rotate(0deg); opacity: 0; }

/* A panel magassaga JS-bol kap explicit erteket az animalt nyitashoz;
   JS nelkul a [hidden] eltavolitasa is elegendo (progressive enhancement). */
.gs-accordion__panel {
  overflow: hidden;
  transition: height var(--duration-base) var(--ease-standard);
}
.gs-accordion__panel[hidden] { display: none; }
.gs-accordion__panel-inner { padding-block-end: var(--space-sm); color: var(--text-secondary); }

/* =============================================================== 11. MODAL */

.gs-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard),
              visibility 0s linear var(--duration-base);
}
.gs-modal[data-gs-open="true"] { opacity: 1; visibility: visible; transition-delay: 0s; }
.gs-modal__backdrop { position: absolute; inset: 0; background: var(--surface-overlay); }

.gs-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(34rem, 100%);
  max-height: min(85svh, 48rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: translateY(0.75rem) scale(0.985);
  transition: transform var(--duration-base) var(--ease-entrance);
}
.gs-modal[data-gs-open="true"] .gs-modal__dialog { transform: none; }
.gs-modal--wide .gs-modal__dialog { width: min(52rem, 100%); }

.gs-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-2xs);
}
.gs-modal__title { margin: 0; font-size: var(--font-size-xl); }
.gs-modal__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-2xs) var(--space-md) var(--space-md); }
.gs-modal__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-md) var(--space-md);
}
.gs-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
}
.gs-modal__close:hover { background: var(--surface-sunken); color: var(--text-primary); }

/* ============================================================== 12. SLIDER */

.gs-slider { position: relative; }
.gs-slider__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.gs-slider__viewport::-webkit-scrollbar { display: none; }
.gs-slider__track {
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-slider__slide {
  flex: 0 0 min(var(--gs-slide-width, 22rem), 86%);
  scroll-snap-align: start;
}
.gs-slider__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}
.gs-slider__dots { display: flex; gap: var(--space-3xs); margin: 0; padding: 0; list-style: none; }
.gs-slider__dot {
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  transition: background-color var(--duration-fast) var(--ease-standard),
              width var(--duration-base) var(--ease-standard);
}
.gs-slider__dot[aria-current="true"] { background: var(--color-primary); width: 1.5rem; }
.gs-slider__arrows { display: flex; gap: var(--space-3xs); }

/* A gorgetes natív; JS nelkul is hasznalhato marad (progressive enhancement). */

/* ================================================================ 13. FORM */

.gs-form { display: grid; gap: var(--space-md); max-width: var(--container-sm); }
.gs-form__row { display: grid; gap: var(--space-md); }
@media (min-width: 36rem) {
  .gs-form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.gs-field { display: grid; gap: var(--space-3xs); }
.gs-field__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.gs-field__required { color: var(--color-error); }

.gs-field__control {
  width: 100%;
  min-height: var(--field-height);
  padding: var(--space-2xs) var(--space-xs);
  border: var(--control-border) solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--font-size-md);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.gs-field__control:hover { border-color: var(--text-muted); }
.gs-field__control:focus-visible {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-focus);
}
textarea.gs-field__control { min-height: 8rem; resize: vertical; }
select.gs-field__control { appearance: none; padding-inline-end: var(--space-lg); }

.gs-field__hint  { font-size: var(--font-size-xs); color: var(--text-muted); }
.gs-field__error { font-size: var(--font-size-xs); color: var(--color-error); font-weight: var(--font-weight-medium); }
.gs-field__error[hidden] { display: none; }

.gs-field[data-gs-invalid="true"] .gs-field__control {
  border-color: var(--color-error);
  background: var(--color-error-soft);
}

/* Jelolonegyzet / radio: sajat igazitas, natív kontrollal. */
.gs-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.gs-choice__input { width: 1.05rem; height: 1.05rem; margin-block-start: 0.2rem; accent-color: var(--color-primary); }

/* Urlap-visszajelzes savja. */
.gs-form__status {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  border: 1px solid transparent;
}
.gs-form__status[hidden] { display: none; }
.gs-form__status[data-gs-status="success"] { background: var(--color-success-soft); border-color: var(--color-success); color: var(--text-primary); }
.gs-form__status[data-gs-status="error"]   { background: var(--color-error-soft);   border-color: var(--color-error);   color: var(--text-primary); }

/* ============================================================== 14. FOOTER */

.gs-footer {
  padding-block: var(--space-xl) var(--space-md);
  background: var(--surface-inverse);
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
  font-size: var(--font-size-sm);
}
.gs-footer :where(h2, h3, h4) { color: var(--text-inverse); }
.gs-footer__grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  padding-block-end: var(--space-lg);
}
.gs-footer__title {
  margin: 0 0 var(--space-2xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.gs-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3xs); }
.gs-footer__link { color: inherit; text-decoration: none; }
.gs-footer__link:hover { color: var(--text-inverse); text-decoration: underline; }
.gs-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding-block-start: var(--space-md);
  border-block-start: 1px solid color-mix(in srgb, var(--text-inverse) 18%, transparent);
  font-size: var(--font-size-xs);
}

/* ========================================================= 15. COOKIE UI
   Csak a felulet vaza. Nincs benne szolgaltato-konfiguracio es nincs
   semmilyen meresi azonosito - azt kesobb, kulon konfiguracio adja.        */

.gs-cookie {
  position: fixed;
  inset-inline: var(--space-sm);
  inset-block-end: var(--space-sm);
  /* A hozzajarulasi panel NEM fokusz-csapdas felulet, ezert a fiok (--z-drawer)
     es a modal (--z-modal) fole nem kerulhet: azok takarjak, ha nyitva vannak. */
  z-index: var(--z-sticky);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.gs-cookie[hidden] { display: none; }
.gs-cookie__title { margin: 0 0 var(--space-3xs); font-size: var(--font-size-md); }
.gs-cookie__text  { margin: 0 0 var(--space-sm); font-size: var(--font-size-sm); color: var(--text-secondary); }
.gs-cookie__actions { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.gs-cookie__options { display: grid; gap: var(--space-2xs); margin-block-end: var(--space-sm); }
.gs-cookie__options[hidden] { display: none; }

/* =============================================== 16. BADGE / TAG / TO-TOP */

.gs-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.15rem var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}
.gs-badge--primary { background: var(--color-primary-soft); color: var(--color-primary-strong); }
.gs-badge--success { background: var(--color-success-soft); color: var(--color-success); }
.gs-badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.gs-badge--error   { background: var(--color-error-soft);   color: var(--color-error); }

.gs-to-top {
  position: fixed;
  inset-block-end: var(--space-sm);
  inset-inline-end: var(--space-sm);
  z-index: var(--z-sticky);
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.gs-to-top[data-gs-visible="true"] { opacity: 1; transform: none; pointer-events: auto; }