/* === Shared CSS === */
/* tg-reset.css */
/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

small {
  font-size: 0.8em;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}


/* tg-variables.css */
/**
 * TravelGate Global CSS Variables
 * Központi design system az egész TravelGate projekthez
 * Használható: lista oldal, show oldal, főoldali kereső, stb.
 * 
 * @version 1.2.0
 * @compatibility PHP 5.3.10+, Modern browsers + IE11
 * 
 * SZÍNRENDSZER FELÉPÍTÉSE:
 * ========================
 * 
 * PRIMARY: Fő brand szín (TravelGate kék) - CTA gombok, linkek, hangsúlyos elemek
 * SECONDARY: Másodlagos brand szín (szürke-kék) - másodlagos gombok, kiegészítő elemek
 * NEUTRAL: Semleges színek (tiszta szürke) - nagyobb felületek háttere (pl. body), általános UI elemek
 * SUCCESS/WARNING/DANGER/INFO: Státusz színek - visszajelzések, értesítések
 * 
 * FOREGROUND/BACKGROUND SZÍNPÁROK HASZNÁLATA:
 * ==========================================
 * 
 * Minden háttérszínhez (--tg-bg-*) tartozik egy megfelelő előtérszín (--tg-fg-on-bg-*).
 * Ez biztosítja a megfelelő kontrasztot és olvashatóságot.
 * 
 * Példák:
 * - background-color: var(--tg-bg-primary); color: var(--tg-fg-on-bg-primary);
 * - background-color: var(--tg-bg-body); color: var(--tg-fg-on-bg-body);
 * - background-color: var(--tg-bg-neutral); color: var(--tg-fg-on-bg-neutral);
 * 
 * HASZNÁLATI JAVASLATOK:
 * ======================
 * 
 * - Body háttér: --tg-bg-body (neutral-50)
 * - Kártya háttér: --tg-bg-surface (fehér)
 * - Másodlagos területek: --tg-bg-neutral (neutral-100)
 * - Hover állapotok: --tg-bg-hover (neutral-100)
 * - Szövegszínek: --tg-text-color (neutral-900), --tg-text-muted (neutral-500)
 * 
 * Automatikus támogatás:
 * - Dark mode: @media (prefers-color-scheme: dark)
 * - High contrast: @media (prefers-contrast: high)
 * - Reduced motion: @media (prefers-reduced-motion: reduce)
 */

/* ===================================================================================== */
/* BASE VARIABLES - ALAPVETŐ VÁLTOZÓK */
/* ===================================================================================== */

:root {
  /* Font Families - Betűtípusok */
  --tg-font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --tg-font-family-secondary: Georgia, "Times New Roman", Times, serif;
  --tg-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono",
    Consolas, "Courier New", monospace;

  /* Font Sizes - Betűméretek */
  --tg-font-size-xs: 0.75rem; /* 12px */
  --tg-font-size-sm: 0.875rem; /* 14px */
  --tg-font-size-base: 1rem; /* 16px */
  --tg-font-size-lg: 1.125rem; /* 18px */
  --tg-font-size-xl: 1.25rem; /* 20px */
  --tg-font-size-2xl: 1.5rem; /* 24px */
  --tg-font-size-3xl: 1.875rem; /* 30px */
  --tg-font-size-4xl: 2.25rem; /* 36px */
  --tg-font-size-5xl: 3rem; /* 48px */

  /* Font Weights - Betűvastagságok */
  --tg-font-weight-light: 300;
  --tg-font-weight-normal: 400;
  --tg-font-weight-medium: 500;
  --tg-font-weight-semibold: 600;
  --tg-font-weight-bold: 700;
  --tg-font-weight-extrabold: 800;

  /* Line Heights - Sormagasságok */
  --tg-line-height-tight: 1.25;
  --tg-line-height-snug: 1.375;
  --tg-line-height-normal: 1.5;
  --tg-line-height-relaxed: 1.625;
  --tg-line-height-loose: 2;

  /* Letter Spacing - Betűköz */
  --tg-letter-spacing-tighter: -0.05em;
  --tg-letter-spacing-tight: -0.025em;
  --tg-letter-spacing-normal: 0;
  --tg-letter-spacing-wide: 0.025em;
  --tg-letter-spacing-wider: 0.05em;
  --tg-letter-spacing-widest: 0.1em;
}

/* ===================================================================================== */
/* COLOR SYSTEM - SZÍNRENDSZER */
/* ===================================================================================== */

:root {
  /* Primary Colors - Elsődleges színek (TravelGate kék) */
  --tg-primary-50: #dadfec;
  --tg-primary-100: #b6bfd8;
  --tg-primary-200: #91a1c5;
  --tg-primary-300: #6c83b2;
  --tg-primary-400: #42659e;
  --tg-primary-500: #034b8b; /* Fő brand szín */
  --tg-primary-600: #113d6f;
  --tg-primary-700: #142f52;
  --tg-primary-800: #142239;
  --tg-primary-900: #0f141f;

  /* Secondary Colors - Másodlagos brand színek (szürke-kék) */
  --tg-secondary-50: #ffeada;
  --tg-secondary-100: #fff5bd;
  --tg-secondary-200: #ffbf93;
  --tg-secondary-300: #ffea75;
  --tg-secondary-400: #ffe44d;
  --tg-secondary-500: #ffe100;
  --tg-secondary-600: #c6af15;
  --tg-secondary-700: #a95a1f;
  --tg-secondary-800: #5e5417;
  --tg-secondary-900: #312b12;

  /* Neutral Colors - Semleges színek (nagyobb felületek háttereként) */
  --tg-neutral-50: #fafafa;
  --tg-neutral-100: #f5f5f5;
  --tg-neutral-200: #e5e5e5;
  --tg-neutral-300: #d4d4d4;
  --tg-neutral-400: #a3a3a3;
  --tg-neutral-500: #737373;
  --tg-neutral-600: #525252;
  --tg-neutral-700: #404040;
  --tg-neutral-800: #262626;
  --tg-neutral-900: #171717;

  /* Success Colors - Siker színek (zöld) */
  --tg-success-50: #f0fdf4;
  --tg-success-100: #dcfce7;
  --tg-success-200: #bbf7d0;
  --tg-success-300: #86efac;
  --tg-success-400: #4ade80;
  --tg-success-500: #22c55e;
  --tg-success-600: #16a34a;
  --tg-success-700: #15803d;
  --tg-success-800: #166534;
  --tg-success-900: #14532d;

  /* Warning Colors - Figyelmeztetés színek (sárga/narancs) */
  --tg-warning-50: #fffbeb;
  --tg-warning-100: #fef3c7;
  --tg-warning-200: #fde68a;
  --tg-warning-300: #fcd34d;
  --tg-warning-400: #fbbf24;
  --tg-warning-500: #f59e0b;
  --tg-warning-600: #d97706;
  --tg-warning-700: #b45309;
  --tg-warning-800: #92400e;
  --tg-warning-900: #78350f;

  /* Danger Colors - Veszély színek (piros) */
  --tg-danger-50: #fef2f2;
  --tg-danger-100: #fee2e2;
  --tg-danger-200: #fecaca;
  --tg-danger-300: #fca5a5;
  --tg-danger-400: #f87171;
  --tg-danger-500: #ef4444;
  --tg-danger-600: #dc2626;
  --tg-danger-700: #b91c1c;
  --tg-danger-800: #991b1b;
  --tg-danger-900: #7f1d1d;

  /* Info Colors - Információ színek (világoskék) */
  --tg-info-50: #f0f9ff;
  --tg-info-100: #e0f2fe;
  --tg-info-200: #bae6fd;
  --tg-info-300: #7dd3fc;
  --tg-info-400: #38bdf8;
  --tg-info-500: #0ea5e9;
  --tg-info-600: #0284c7;
  --tg-info-700: #0369a1;
  --tg-info-800: #075985;
  --tg-info-900: #0c4a6e;

  /* MUTED COLORS - Tompított színek (neutral alapú) */
  --tg-muted-50: var(--tg-neutral-50);
  --tg-muted-100: var(--tg-neutral-100);
  --tg-muted-200: var(--tg-neutral-200);
  --tg-muted-300: var(--tg-neutral-300);
  --tg-muted-400: var(--tg-neutral-400);
  --tg-muted-500: var(--tg-neutral-500);

  /* Semantic Colors - Szemantikus színek */
  --tg-color-primary: var(--tg-primary-500);
  --tg-color-secondary: var(--tg-secondary-500);
  --tg-color-neutral: var(--tg-neutral-500);
  --tg-color-success: var(--tg-success-500);
  --tg-color-warning: var(--tg-warning-500);
  --tg-color-danger: var(--tg-danger-500);
  --tg-color-info: var(--tg-info-500);

  /* Background Colors - Háttérszínek */
  --tg-bg-surface: #ffffff;
  --tg-bg-body: var(
    --tg-neutral-200
  ); /* Nagyobb felületek háttere (pl. body) */
  --tg-bg-secondary: var(--tg-secondary-500);
  --tg-bg-neutral: var(--tg-neutral-100); /* Semleges háttér */
  --tg-bg-muted: var(--tg-muted-300);
  --tg-bg-muted-light: var(--tg-muted-100);
  --tg-bg-hover: var(--tg-primary-50);
  --tg-bg-active: var(--tg-neutral-200);
  --tg-bg-disabled: var(--tg-neutral-200);

  /* Primary Background Variants - Elsődleges háttérváltozatok */
  --tg-bg-primary: var(--tg-primary-500);
  --tg-bg-primary-light: var(--tg-primary-50);
  --tg-bg-primary-dark: var(--tg-primary-700);

  /* Secondary Background Variants - Másodlagos háttérváltozatok */
  --tg-bg-secondary-light: var(--tg-secondary-50);
  --tg-bg-secondary-dark: var(--tg-secondary-600);

  /* Neutral Background Variants - Semleges háttérváltozatok */
  --tg-bg-neutral-light: var(--tg-neutral-50);
  --tg-bg-neutral-dark: var(--tg-neutral-700);

  /* Success Background Variants - Siker háttérváltozatok */
  --tg-bg-success: var(--tg-success-500);
  --tg-bg-success-light: var(--tg-success-50);
  --tg-bg-success-dark: var(--tg-success-700);

  /* Warning Background Variants - Figyelmeztetés háttérváltozatok */
  --tg-bg-warning: var(--tg-warning-500);
  --tg-bg-warning-light: var(--tg-warning-50);
  --tg-bg-warning-dark: var(--tg-warning-700);

  /* Danger Background Variants - Veszély háttérváltozatok */
  --tg-bg-danger: var(--tg-danger-500);
  --tg-bg-danger-light: var(--tg-danger-50);
  --tg-bg-danger-dark: var(--tg-danger-700);

  /* Info Background Variants - Információ háttérváltozatok */
  --tg-bg-info: var(--tg-info-500);
  --tg-bg-info-light: var(--tg-info-50);
  --tg-bg-info-dark: var(--tg-info-700);

  /* Foreground Colors for Backgrounds - Előtérszínek a háttérszínekhez */
  /* Light backgrounds - Világos hátterek */
  --tg-fg-on-bg-color: var(
    --tg-secondary-900
  ); /* Fehér háttéren sötét szöveg */
  --tg-fg-on-bg-body: var(--tg-neutral-800); /* Body háttéren sötét szöveg */
  --tg-fg-on-bg-secondary: var(
    --tg-secondary-800
  ); /* Világosszürke háttéren sötétebb szöveg */
  --tg-fg-on-bg-neutral: var(
    --tg-neutral-800
  ); /* Neutral háttéren sötét szöveg */
  --tg-fg-on-bg-muted: var(--tg-neutral-700); /* Szürke háttéren sötét szöveg */
  --tg-fg-on-bg-hover: var(--tg-neutral-800);
  --tg-fg-on-bg-active: var(--tg-neutral-700);
  --tg-fg-on-bg-disabled: var(--tg-neutral-400);

  --tg-fg-on-bg-primary-light: var(
    --tg-primary-700
  ); /* Világoskék háttéren sötétkék szöveg */
  --tg-fg-on-bg-secondary-light: var(
    --tg-secondary-700
  ); /* Világos secondary háttéren sötét secondary szöveg */
  --tg-fg-on-bg-neutral-light: var(
    --tg-neutral-700
  ); /* Világos neutral háttéren sötét neutral szöveg */
  --tg-fg-on-bg-success-light: var(
    --tg-success-700
  ); /* Világoszöld háttéren sötétzöld szöveg */
  --tg-fg-on-bg-warning-light: var(
    --tg-warning-700
  ); /* Világossárga háttéren sötétsárga szöveg */
  --tg-fg-on-bg-danger-light: var(
    --tg-danger-700
  ); /* Világospiros háttéren sötétpiros szöveg */
  --tg-fg-on-bg-info-light: var(
    --tg-info-700
  ); /* Világosinfo háttéren sötétinfo szöveg */

  /* Dark backgrounds - Sötét hátterek */
  --tg-fg-on-bg-primary: #ffffff; /* Kék háttéren fehér szöveg */
  --tg-fg-on-bg-primary-dark: #ffffff; /* Sötétkék háttéren fehér szöveg */
  --tg-fg-on-bg-secondary-dark: #ffffff; /* Sötét secondary háttéren fehér szöveg */
  --tg-fg-on-bg-neutral-dark: #ffffff; /* Sötét neutral háttéren fehér szöveg */
  --tg-fg-on-bg-success: #ffffff; /* Zöld háttéren fehér szöveg */
  --tg-fg-on-bg-success-dark: #ffffff; /* Sötétzöld háttéren fehér szöveg */
  --tg-fg-on-bg-warning: var(
    --tg-warning-900
  ); /* Sárga háttéren nagyon sötét szöveg */
  --tg-fg-on-bg-warning-dark: #ffffff; /* Sötétsárga háttéren fehér szöveg */
  --tg-fg-on-bg-danger: #ffffff; /* Piros háttéren fehér szöveg */
  --tg-fg-on-bg-danger-dark: #ffffff; /* Sötétpiros háttéren fehér szöveg */
  --tg-fg-on-bg-info: #ffffff; /* Info háttéren fehér szöveg */
  --tg-fg-on-bg-info-dark: #ffffff; /* Sötétinfo háttéren fehér szöveg */

  /* Text Colors - Szövegszínek (megtartva a kompatibilitás miatt) */
  --tg-text-color: var(--tg-neutral-900);
  --tg-text-primary: var(--tg-primary-500);
  --tg-text-primary-light: var(--tg-primary-300);
  --tg-text-primary-dark: var(--tg-primary-700);
  --tg-text-secondary: var(--tg-secondary-700);
  --tg-text-secondary-light: var(--tg-secondary-300);
  --tg-text-secondary-dark: var(--tg-secondary-800);
  --tg-text-neutral: var(--tg-neutral-700);
  --tg-text-neutral-light: var(--tg-neutral-300);
  --tg-text-neutral-dark: var(--tg-neutral-800);
  --tg-text-muted: var(--tg-neutral-600);
  --tg-text-light: var(--tg-neutral-400);
  --tg-text-disabled: var(--tg-neutral-300);
  --tg-text-inverse: #ffffff;
  --tg-text-link: var(--tg-info-600);

  /* Border Colors - Szegélyszínek */
  --tg-border-color: var(--tg-neutral-200);
  --tg-border-light: var(--tg-neutral-100);
  --tg-border-dark: var(--tg-neutral-300);
  --tg-border-secondary: var(--tg-secondary-200);
  --tg-border-neutral: var(--tg-neutral-300);
  --tg-border-focus: var(--tg-primary-500);
  --tg-border-error: var(--tg-danger-500);
  --tg-border-success: var(--tg-success-500);
  --tg-border-warning: var(--tg-warning-500);
  --tg-border-info: var(--tg-info-500);
}

/* ===================================================================================== */
/* SPACING SYSTEM - TÉRKÖZ RENDSZER */
/* ===================================================================================== */

:root {
  /* Base Spacing Unit - Alap térköz egység */
  --tg-spacer-base: 1rem; /* 16px */

  /* Spacing Scale - Térköz skála */
  --tg-spacer-0: 0;
  --tg-spacer-px: 1px;
  --tg-spacer-0-5: 0.125rem; /* 2px */
  --tg-spacer-1: 0.25rem; /* 4px */
  --tg-spacer-1-5: 0.375rem; /* 6px */
  --tg-spacer-2: 0.5rem; /* 8px */
  --tg-spacer-2-5: 0.625rem; /* 10px */
  --tg-spacer-3: 0.75rem; /* 12px */
  --tg-spacer-3-5: 0.875rem; /* 14px */
  --tg-spacer-4: 1rem; /* 16px */
  --tg-spacer-5: 1.25rem; /* 20px */
  --tg-spacer-6: 1.5rem; /* 24px */
  --tg-spacer-7: 1.75rem; /* 28px */
  --tg-spacer-8: 2rem; /* 32px */
  --tg-spacer-9: 2.25rem; /* 36px */
  --tg-spacer-10: 2.5rem; /* 40px */
  --tg-spacer-11: 2.75rem; /* 44px */
  --tg-spacer-12: 3rem; /* 48px */
  --tg-spacer-14: 3.5rem; /* 56px */
  --tg-spacer-16: 4rem; /* 64px */
  --tg-spacer-20: 5rem; /* 80px */
  --tg-spacer-24: 6rem; /* 96px */
  --tg-spacer-28: 7rem; /* 112px */
  --tg-spacer-32: 8rem; /* 128px */

  /* Component Specific Spacing - Komponens specifikus térközök */
  --tg-container-padding: var(--tg-spacer-4);
  --tg-section-spacing: var(--tg-spacer-8);
  --tg-card-padding: var(--tg-spacer-4);
  --tg-button-padding-x: var(--tg-spacer-4);
  --tg-button-padding-y: var(--tg-spacer-2);
  --tg-input-padding-x: var(--tg-spacer-3);
  --tg-input-padding-y: var(--tg-spacer-2);
}

/* ===================================================================================== */
/* BORDER RADIUS - LEKEREKÍTÉSEK */
/* ===================================================================================== */

:root {
  --tg-border-radius-none: 0;
  --tg-border-radius-sm: 0.125rem; /* 2px */
  --tg-border-radius-base: 0.25rem; /* 4px */
  --tg-border-radius-md: 0.375rem; /* 6px */
  --tg-border-radius-lg: 0.5rem; /* 8px */
  --tg-border-radius-xl: 0.75rem; /* 12px */
  --tg-border-radius-2xl: 1rem; /* 16px */
  --tg-border-radius-3xl: 1.5rem; /* 24px */
  --tg-border-radius-full: 9999px; /* Teljes kör */

  /* Component Specific Border Radius */
  --tg-border-radius-button: var(--tg-border-radius-md);
  --tg-border-radius-input: var(--tg-border-radius-md);
  --tg-border-radius-card: var(--tg-border-radius-md);
  --tg-border-radius-modal: var(--tg-border-radius-xl);
}

/* ===================================================================================== */
/* SHADOWS - ÁRNYÉKOK */
/* ===================================================================================== */

:root {
  /* Shadow Scale - Árnyék skála */
  --tg-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --tg-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --tg-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --tg-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --tg-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --tg-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tg-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --tg-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --tg-shadow-none: none;

  /* Component Specific Shadows */
  --tg-shadow-card: var(--tg-shadow-sm);
  --tg-shadow-card-hover: var(--tg-shadow-md);
  --tg-shadow-button: var(--tg-shadow-xs);
  --tg-shadow-button-hover: var(--tg-shadow-sm);
  --tg-shadow-dropdown: var(--tg-shadow-lg);
  --tg-shadow-modal: var(--tg-shadow-2xl);
  --tg-shadow-focus: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

/* ===================================================================================== */
/* TRANSITIONS - ÁTMENETEK */
/* ===================================================================================== */

:root {
  /* Transition Durations - Átmenet időtartamok */
  --tg-transition-duration-75: 75ms;
  --tg-transition-duration-100: 100ms;
  --tg-transition-duration-150: 150ms;
  --tg-transition-duration-200: 200ms;
  --tg-transition-duration-300: 300ms;
  --tg-transition-duration-500: 500ms;
  --tg-transition-duration-700: 700ms;
  --tg-transition-duration-1000: 1000ms;

  /* Transition Timing Functions - Átmenet időzítési függvények */
  --tg-transition-timing-linear: linear;
  --tg-transition-timing-ease: ease;
  --tg-transition-timing-ease-in: ease-in;
  --tg-transition-timing-ease-out: ease-out;
  --tg-transition-timing-ease-in-out: ease-in-out;
  --tg-transition-timing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common Transitions - Gyakori átmenetek */
  --tg-transition-base: all var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  --tg-transition-fast: all var(--tg-transition-duration-150)
    var(--tg-transition-timing-ease-in-out);
  --tg-transition-slow: all var(--tg-transition-duration-300)
    var(--tg-transition-timing-ease-in-out);
  --tg-transition-colors: color var(--tg-transition-duration-200)
      var(--tg-transition-timing-ease-in-out),
    background-color var(--tg-transition-duration-200)
      var(--tg-transition-timing-ease-in-out),
    border-color var(--tg-transition-duration-200)
      var(--tg-transition-timing-ease-in-out);
  --tg-transition-transform: transform var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  --tg-transition-opacity: opacity var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  --tg-transition-fill: fill var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
}

/* ===================================================================================== */
/* Z-INDEX LAYERS - Z-INDEX RÉTEGEK */
/* ===================================================================================== */

:root {
  --tg-z-index-hide: -1;
  --tg-z-index-auto: auto;
  --tg-z-index-base: 0;
  --tg-z-index-docked: 10;
  --tg-z-index-dropdown: 1000;
  --tg-z-index-sticky: 1020;
  --tg-z-index-banner: 1030;
  --tg-z-index-overlay: 1040;
  --tg-z-index-modal: 1050;
  --tg-z-index-popover: 1060;
  --tg-z-index-skiplink: 1070;
  --tg-z-index-toast: 1080;
  --tg-z-index-tooltip: 1090;
}

/* ===================================================================================== */
/* BREAKPOINTS - TÖRÉSPONTOK */
/* ===================================================================================== */

:root {
  /* Breakpoint Values - Töréspont értékek */
  --tg-breakpoint-xs: 0;
  --tg-breakpoint-sm: 576px;
  --tg-breakpoint-md: 768px;
  --tg-breakpoint-lg: 992px;
  --tg-breakpoint-xl: 1200px;
  --tg-breakpoint-2xl: 1400px;

  /* Container Max Widths - Konténer maximális szélességek */
  --tg-container-xs: 360px;
  --tg-container-sm: 540px;
  --tg-container-md: 720px;
  --tg-container-lg: 960px;
  --tg-container-xl: 1140px;
  --tg-container-2xl: 1320px;
}

/* ===================================================================================== */
/* COMPONENT SPECIFIC VARIABLES - KOMPONENS SPECIFIKUS VÁLTOZÓK */
/* ===================================================================================== */

:root {
  /* Buttons - Gombok */
  --tg-button-height-sm: 2rem;
  --tg-button-height-md: 2.5rem;
  --tg-button-height-lg: 3rem;
  --tg-button-font-size-sm: var(--tg-font-size-sm);
  --tg-button-font-size-md: var(--tg-font-size-base);
  --tg-button-font-size-lg: var(--tg-font-size-lg);

  /* Inputs - Beviteli mezők */
  --tg-input-height-sm: 2rem;
  --tg-input-height-md: 2.5rem;
  --tg-input-height-lg: 3rem;
  --tg-input-border-width: 1px;

  /* Cards - Kártyák */
  --tg-card-border-width: 1px;
  --tg-card-header-padding: var(--tg-spacer-4);
  --tg-card-body-padding: var(--tg-spacer-6);
  --tg-card-footer-padding: var(--tg-spacer-4);

  /* Navigation - Navigáció */
  --tg-navbar-height: 4rem;
  --tg-sidebar-width: 280px;
  --tg-sidebar-width-collapsed: 4rem;

  /* List Items - Lista elemek */
  --tg-list-item-padding: var(--tg-spacer-4);
  --tg-list-item-gap: var(--tg-spacer-4);
  --tg-list-item-image-width: 280px;
  --tg-list-item-image-height: 200px;

  /* Search Components - Keresési komponensek */
  --tg-searchbox-width: 400px;
  --tg-searchbox-padding: var(--tg-spacer-4);
  --tg-searchform-section-spacing: var(--tg-spacer-4);

  /* Gallery - Galéria */
  --tg-gallery-slide-width: 300px;
  --tg-gallery-slide-height: 200px;
  --tg-gallery-gap: var(--tg-spacer-2);

  /* Badges - Jelvények */
  --tg-badge-padding-x: var(--tg-spacer-2);
  --tg-badge-padding-y: var(--tg-spacer-0-5);
  --tg-badge-font-size: var(--tg-font-size-xs);
  --tg-badge-border-radius: var(--tg-border-radius-full);

  /* Star Rating - Csillag értékelés */
  --tg-star-color: #fa9314;
}

/* ===================================================================================== */
/* BUTTON VARIABLES - GOMB VÁLTOZÓK */
/* ===================================================================================== */

:root {
  /* Button Base Properties - Gomb alap tulajdonságok */
  --tg-button-font-family: var(--tg-font-family-primary);
  --tg-button-font-weight: var(--tg-font-weight-semibold);
  --tg-button-line-height: 1;
  --tg-button-text-align: center;
  --tg-button-text-decoration: none;
  --tg-button-cursor: pointer;
  --tg-button-user-select: none;
  --tg-button-display: inline-flex;
  --tg-button-align-items: center;
  --tg-button-justify-content: center;
  --tg-button-gap: var(--tg-spacer-2);
  --tg-button-border-width: 1px;
  --tg-button-border-style: solid;
  --tg-button-transition: var(--tg-transition-colors),
    var(--tg-transition-transform), var(--tg-transition-fill);
  --tg-button-outline-offset: 2px;

  /* Button Sizes - Gomb méretek */
  /* Extra Small */
  --tg-button-xs-height: 1.75rem; /* 28px */
  --tg-button-xs-padding-x: var(--tg-spacer-2); /* 8px */
  --tg-button-xs-padding-y: var(--tg-spacer-1); /* 4px */
  --tg-button-xs-font-size: var(--tg-font-size-xs); /* 12px */
  --tg-button-xs-border-radius: var(--tg-border-radius-sm); /* 2px */
  --tg-button-xs-icon-size: 0.75rem; /* 12px */

  /* Small */
  --tg-button-sm-height: var(--tg-button-height-sm); /* 32px */
  --tg-button-sm-padding-x: var(--tg-spacer-3); /* 12px */
  --tg-button-sm-padding-y: var(--tg-spacer-1-5); /* 6px */
  --tg-button-sm-font-size: var(--tg-button-font-size-sm); /* 14px */
  --tg-button-sm-border-radius: var(--tg-border-radius-base); /* 4px */
  --tg-button-sm-icon-size: 0.875rem; /* 14px */

  /* Medium (default) */
  --tg-button-md-height: var(--tg-button-height-md); /* 40px */
  --tg-button-md-padding-x: var(--tg-spacer-4); /* 16px */
  --tg-button-md-padding-y: var(--tg-spacer-2); /* 8px */
  --tg-button-md-font-size: var(--tg-button-font-size-md); /* 16px */
  --tg-button-md-border-radius: var(--tg-border-radius-button); /* 6px */
  --tg-button-md-icon-size: 1rem; /* 16px */

  /* Large */
  --tg-button-lg-height: var(--tg-button-height-lg); /* 48px */
  --tg-button-lg-padding-x: var(--tg-spacer-6); /* 24px */
  --tg-button-lg-padding-y: var(--tg-spacer-3); /* 12px */
  --tg-button-lg-font-size: var(--tg-button-font-size-lg); /* 18px */
  --tg-button-lg-border-radius: var(--tg-border-radius-lg); /* 8px */
  --tg-button-lg-icon-size: 1.125rem; /* 18px */

  /* Extra Large */
  --tg-button-xl-height: 3.5rem; /* 56px */
  --tg-button-xl-padding-x: var(--tg-spacer-8); /* 32px */
  --tg-button-xl-padding-y: var(--tg-spacer-4); /* 16px */
  --tg-button-xl-font-size: var(--tg-font-size-xl); /* 20px */
  --tg-button-xl-border-radius: var(--tg-border-radius-xl); /* 12px */
  --tg-button-xl-icon-size: 1.25rem; /* 20px */

  /* Button Variant Colors - Gomb változat színek */
  /* Primary */
  --tg-button-primary-bg: var(--tg-bg-primary);
  --tg-button-primary-color: var(--tg-fg-on-bg-primary);
  --tg-button-primary-border: var(--tg-bg-primary);
  --tg-button-primary-hover-bg: var(--tg-bg-primary-dark);
  --tg-button-primary-hover-color: var(--tg-fg-on-bg-primary-dark);
  --tg-button-primary-hover-border: var(--tg-bg-primary-dark);
  --tg-button-primary-focus-bg: var(--tg-bg-primary-dark);
  --tg-button-primary-focus-color: var(--tg-fg-on-bg-primary-dark);
  --tg-button-primary-focus-border: var(--tg-bg-primary-dark);
  --tg-button-primary-active-bg: var(--tg-primary-800);
  --tg-button-primary-active-color: var(--tg-fg-on-bg-primary-dark);
  --tg-button-primary-active-border: var(--tg-primary-800);
  --tg-button-primary-focus-shadow: var(--tg-shadow-focus);

  /* Secondary */
  --tg-button-secondary-bg: var(--tg-bg-secondary);
  --tg-button-secondary-color: var(--tg-fg-on-bg-secondary);
  --tg-button-secondary-border: var(--tg-bg-secondary);
  --tg-button-secondary-hover-bg: var(--tg-bg-secondary-dark);
  --tg-button-secondary-hover-color: var(--tg-fg-on-bg-secondary-dark);
  --tg-button-secondary-hover-border: var(--tg-bg-secondary-dark);
  --tg-button-secondary-focus-bg: var(--tg-bg-secondary-dark);
  --tg-button-secondary-focus-color: var(--tg-fg-on-bg-secondary-dark);
  --tg-button-secondary-focus-border: var(--tg-bg-secondary-dark);
  --tg-button-secondary-active-bg: var(--tg-secondary-800);
  --tg-button-secondary-active-color: var(--tg-fg-on-bg-secondary-dark);
  --tg-button-secondary-active-border: var(--tg-secondary-800);
  --tg-button-secondary-focus-shadow: var(--tg-shadow-focus);

  /* Success */
  --tg-button-success-bg: var(--tg-bg-success);
  --tg-button-success-color: var(--tg-fg-on-bg-success);
  --tg-button-success-border: var(--tg-bg-success);
  --tg-button-success-hover-bg: var(--tg-bg-success-dark);
  --tg-button-success-hover-color: var(--tg-fg-on-bg-success-dark);
  --tg-button-success-hover-border: var(--tg-bg-success-dark);
  --tg-button-success-focus-bg: var(--tg-bg-success-dark);
  --tg-button-success-focus-color: var(--tg-fg-on-bg-success-dark);
  --tg-button-success-focus-border: var(--tg-bg-success-dark);
  --tg-button-success-active-bg: var(--tg-success-800);
  --tg-button-success-active-color: var(--tg-fg-on-bg-success-dark);
  --tg-button-success-active-border: var(--tg-success-800);
  --tg-button-success-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);

  /* Warning */
  --tg-button-warning-bg: var(--tg-bg-warning);
  --tg-button-warning-color: var(--tg-fg-on-bg-warning);
  --tg-button-warning-border: var(--tg-bg-warning);
  --tg-button-warning-hover-bg: var(--tg-bg-warning-dark);
  --tg-button-warning-hover-color: var(--tg-fg-on-bg-warning-dark);
  --tg-button-warning-hover-border: var(--tg-bg-warning-dark);
  --tg-button-warning-focus-bg: var(--tg-bg-warning-dark);
  --tg-button-warning-focus-color: var(--tg-fg-on-bg-warning-dark);
  --tg-button-warning-focus-border: var(--tg-bg-warning-dark);
  --tg-button-warning-active-bg: var(--tg-warning-800);
  --tg-button-warning-active-color: var(--tg-fg-on-bg-warning-dark);
  --tg-button-warning-active-border: var(--tg-warning-800);
  --tg-button-warning-focus-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);

  /* Danger */
  --tg-button-danger-bg: var(--tg-bg-danger);
  --tg-button-danger-color: var(--tg-fg-on-bg-danger);
  --tg-button-danger-border: var(--tg-bg-danger);
  --tg-button-danger-hover-bg: var(--tg-bg-danger-dark);
  --tg-button-danger-hover-color: var(--tg-fg-on-bg-danger-dark);
  --tg-button-danger-hover-border: var(--tg-bg-danger-dark);
  --tg-button-danger-focus-bg: var(--tg-bg-danger-dark);
  --tg-button-danger-focus-color: var(--tg-fg-on-bg-danger-dark);
  --tg-button-danger-focus-border: var(--tg-bg-danger-dark);
  --tg-button-danger-active-bg: var(--tg-danger-800);
  --tg-button-danger-active-color: var(--tg-fg-on-bg-danger-dark);
  --tg-button-danger-active-border: var(--tg-danger-800);
  --tg-button-danger-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);

  /* Info */
  --tg-button-info-bg: var(--tg-bg-info);
  --tg-button-info-color: var(--tg-fg-on-bg-info);
  --tg-button-info-border: var(--tg-bg-info);
  --tg-button-info-hover-bg: var(--tg-bg-info-dark);
  --tg-button-info-hover-color: var(--tg-fg-on-bg-info-dark);
  --tg-button-info-hover-border: var(--tg-bg-info-dark);
  --tg-button-info-focus-bg: var(--tg-bg-info-dark);
  --tg-button-info-focus-color: var(--tg-fg-on-bg-info-dark);
  --tg-button-info-focus-border: var(--tg-bg-info-dark);
  --tg-button-info-active-bg: var(--tg-info-800);
  --tg-button-info-active-color: var(--tg-fg-on-bg-info-dark);
  --tg-button-info-active-border: var(--tg-info-800);
  --tg-button-info-focus-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);

  /* Outline Variants - Körvonalazott változatok */
  /* Primary Outline */
  --tg-button-outline-primary-bg: transparent;
  --tg-button-outline-primary-color: var(--tg-bg-primary);
  --tg-button-outline-primary-border: var(--tg-bg-primary);
  --tg-button-outline-primary-hover-bg: var(--tg-bg-primary);
  --tg-button-outline-primary-hover-color: var(--tg-fg-on-bg-primary);
  --tg-button-outline-primary-hover-border: var(--tg-bg-primary);

  /* Secondary Outline */
  --tg-button-outline-secondary-bg: transparent;
  --tg-button-outline-secondary-color: var(--tg-text-color);
  --tg-button-outline-secondary-border: var(--tg-border-color);
  --tg-button-outline-secondary-hover-bg: var(--tg-bg-secondary);
  --tg-button-outline-secondary-hover-color: var(--tg-fg-on-bg-secondary);
  --tg-button-outline-secondary-hover-border: var(--tg-border-dark);

  /* Ghost Variants - Szellem változatok */
  --tg-button-ghost-bg: transparent;
  --tg-button-ghost-color: var(--tg-text-color);
  --tg-button-ghost-border: transparent;
  --tg-button-ghost-hover-bg: var(--tg-bg-hover);
  --tg-button-ghost-hover-color: var(--tg-fg-on-bg-hover);
  --tg-button-ghost-hover-border: transparent;

  /* Link Variants - Linkező változatok */
  --tg-button-link-bg: transparent;
  --tg-button-link-color: var(--tg-text-color);
  --tg-button-link-border: transparent;
  --tg-button-link-hover-bg: var(--tg-bg-hover);
  --tg-button-link-hover-color: var(--tg-fg-on-bg-hover);
  --tg-button-link-hover-border: transparent;

  /* Disabled State - Letiltott állapot */
  --tg-button-disabled-bg: var(--tg-bg-disabled);
  --tg-button-disabled-color: var(--tg-fg-on-bg-disabled);
  --tg-button-disabled-border: var(--tg-bg-disabled);
  --tg-button-disabled-opacity: 0.6;
  --tg-button-disabled-cursor: not-allowed;

  /* Loading State - Betöltés állapot */
  --tg-button-loading-opacity: 0.8;
  --tg-button-loading-cursor: wait;
}

/* ===================================================================================== */
/* DARK MODE SUPPORT - SÖTÉT MÓD TÁMOGATÁS */
/* ===================================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Background Colors - Háttérszínek */
    /* --tg-bg-surface: #0f172a;
    --tg-bg-secondary: #1e293b;
    --tg-bg-muted: #334155;
    --tg-bg-hover: #475569;
    --tg-bg-active: #64748b;
    --tg-bg-disabled: #94a3b8; */

    /* Dark mode foreground colors for light backgrounds - Sötét módban világos háttérszínekhez */
    /* --tg-fg-on-bg-color: #f8fafc; */ /* Sötét háttéren világos szöveg */
    /* --tg-fg-on-bg-secondary: #e2e8f0; */ /* Sötétebb háttéren világosabb szöveg */
    /* --tg-fg-on-bg-muted: #cbd5e1; */ /* Még sötétebb háttéren világos szöveg */
    /* --tg-fg-on-bg-hover: #e2e8f0;
    --tg-fg-on-bg-active: #cbd5e1;
    --tg-fg-on-bg-disabled: #64748b; */

    /* Text Colors - Szövegszínek */
    /* --tg-text-color: #f8fafc;
    --tg-text-secondary: #e2e8f0;
    --tg-text-muted: #cbd5e1;
    --tg-text-light: #94a3b8;
    --tg-text-disabled: #64748b;
    --tg-text-inverse: #0f172a; */

    /* Border Colors - Szegélyszínek */
    /* --tg-border-color: #475569;
    --tg-border-light: #334155;
    --tg-border-dark: #64748b; */

    /* Shadows - Árnyékok (sötétebb) */
    /* --tg-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --tg-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4),
      0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --tg-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
      0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --tg-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4),
      0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --tg-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
      0 10px 10px -5px rgba(0, 0, 0, 0.3);
    --tg-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    --tg-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5); */
  }
}

/* ===================================================================================== */
/* HIGH CONTRAST MODE - MAGAS KONTRASZT MÓD */
/* ===================================================================================== */

@media (prefers-contrast: high) {
  :root {
    /* Erősebb kontrasztok */
    --tg-border-color: #000000;
    --tg-border-neutral: #000000;
    --tg-text-muted: #000000;
    --tg-text-neutral: #000000;
    --tg-shadow-card: none;
    --tg-shadow-card-hover: 0 0 0 2px #000000;
    --tg-shadow-button: none;
    --tg-shadow-button-hover: 0 0 0 2px #000000;
    --tg-shadow-focus: 0 0 0 3px #000000;

    /* High contrast foreground colors - Magas kontraszt előtérszínek */
    --tg-fg-on-bg-color: #000000; /* Fehér háttéren fekete szöveg */
    --tg-fg-on-bg-body: #000000; /* Body háttéren fekete szöveg */
    --tg-fg-on-bg-secondary: #000000;
    --tg-fg-on-bg-neutral: #000000;
    --tg-fg-on-bg-muted: #000000;
    --tg-fg-on-bg-hover: #000000;
    --tg-fg-on-bg-active: #000000;
    --tg-fg-on-bg-disabled: #666666;

    /* High contrast for colored backgrounds */
    --tg-fg-on-bg-primary: #ffffff;
    --tg-fg-on-bg-primary-light: #000000;
    --tg-fg-on-bg-primary-dark: #ffffff;
    --tg-fg-on-bg-secondary-light: #000000;
    --tg-fg-on-bg-secondary-dark: #ffffff;
    --tg-fg-on-bg-neutral-light: #000000;
    --tg-fg-on-bg-neutral-dark: #ffffff;
    --tg-fg-on-bg-success: #ffffff;
    --tg-fg-on-bg-success-light: #000000;
    --tg-fg-on-bg-success-dark: #ffffff;
    --tg-fg-on-bg-warning: #000000;
    --tg-fg-on-bg-warning-light: #000000;
    --tg-fg-on-bg-warning-dark: #ffffff;
    --tg-fg-on-bg-danger: #ffffff;
    --tg-fg-on-bg-danger-light: #000000;
    --tg-fg-on-bg-danger-dark: #ffffff;
    --tg-fg-on-bg-info: #ffffff;
    --tg-fg-on-bg-info-light: #000000;
    --tg-fg-on-bg-info-dark: #ffffff;
  }
}

/* ===================================================================================== */
/* REDUCED MOTION - CSÖKKENTETT MOZGÁS */
/* ===================================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    /* Gyorsabb vagy kikapcsolt animációk */
    --tg-transition-duration-75: 1ms;
    --tg-transition-duration-100: 1ms;
    --tg-transition-duration-150: 1ms;
    --tg-transition-duration-200: 1ms;
    --tg-transition-duration-300: 1ms;
    --tg-transition-duration-500: 1ms;
    --tg-transition-duration-700: 1ms;
    --tg-transition-duration-1000: 1ms;
  }
}

/* ===================================================================================== */
/* LEGACY BROWSER FALLBACKS - RÉGI BÖNGÉSZŐ FALLBACK-EK */
/* ===================================================================================== */

/* IE11 és régebbi böngészők támogatása */
.no-custom-properties {
  /* Fallback értékek CSS változók nélkül */
  color: #171717; /* neutral-900 */
  background-color: #fafafa; /* neutral-50 */
  border-color: #e5e5e5; /* neutral-200 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* ===================================================================================== */
/* BASE RESET - ALAPVETŐ RESET */
/* ===================================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Base body styles */
body {
  font-family: var(--tg-font-family-primary);
  font-size: var(--tg-font-size-base);
  line-height: var(--tg-line-height-normal);
  color: var(--tg-fg-on-bg-body);
  background-color: var(--tg-bg-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: 2px;
}

*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}


/* tg-typography.css */
/* Typography */

/* Headings */
h1 {
  font-size: var(--tg-font-size-2xl);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

h2 {
  font-size: var(--tg-font-size-xl);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

h3 {
  font-size: var(--tg-font-size-lg);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

h4 {
  font-size: var(--tg-font-size-md);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

h5 {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

h6 {
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}


/* tg-icons.css */
[class*="__icon"] svg {
  fill: var(--tg-text-primary);
  transition: fill 0.3s ease;
}

[class*="__icon--inverted"] svg {
  fill: var(--tg-button-primary-color);
}

/* Duotone specific - két réteg */
[class*="__icon"] svg .fa-primary {
  fill: var(--tg-text-primary);
}

[class*="__icon"] svg .fa-secondary {
  fill: var(--tg-text-primary-light);
  opacity: 0.4;
}

[class*="__stars"] svg {
  fill: var(--tg-star-color);
}

/* Hover effect */
.search-component__trigger:hover [class*="__icon"] svg {
  fill: var(--tg-text-primary-dark);
}

.icon-xs {
  width: 16px;
  height: 16px;
}

.icon-sm {
  width: 20px;
  height: 20px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}


/* tg-button.css */
/**
 * TravelGate Button Component
 * Gomb komponens a TravelGate design system-hez
 * 
 * @version 1.0.0
 * @compatibility PHP 5.3.10+, Modern browsers + IE11
 * @description Egységes gomb komponens különböző méretekkel, színekkel és állapotokkal
 */

/* ===================================================================================== */
/* BASE BUTTON STYLES - ALAP GOMB STÍLUSOK */
/* ===================================================================================== */

.tg-button {
  /* Base Properties */
  display: var(--tg-button-display);
  align-items: var(--tg-button-align-items);
  justify-content: var(--tg-button-justify-content);
  gap: var(--tg-button-gap);

  /* Typography */
  font-family: var(--tg-button-font-family);
  font-weight: var(--tg-button-font-weight);
  line-height: var(--tg-button-line-height);
  text-align: var(--tg-button-text-align);
  text-decoration: var(--tg-button-text-decoration);
  white-space: nowrap;

  /* Interaction */
  cursor: var(--tg-button-cursor);
  user-select: var(--tg-button-user-select);

  /* Border */
  border-width: var(--tg-button-border-width);
  border-style: var(--tg-button-border-style);

  /* Transition */
  transition: var(--tg-button-transition);

  /* Default to medium size and primary variant */
  height: var(--tg-button-md-height);
  padding: var(--tg-button-md-padding-y) var(--tg-button-md-padding-x);
  font-size: var(--tg-button-md-font-size);
  border-radius: var(--tg-button-md-border-radius);

  /* Default to primary colors */
  background-color: var(--tg-button-primary-bg);
  color: var(--tg-button-primary-color);
  border-color: var(--tg-button-primary-border);

  /* SVG fill */
  svg {
    fill: currentColor;
  }

  /* Remove default button styles */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.tg-button:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-primary-hover-bg);
  color: var(--tg-button-primary-hover-color);
  border-color: var(--tg-button-primary-hover-border);
  transform: translateY(-1px);
  box-shadow: var(--tg-shadow-button-hover);
  text-decoration: none;
}

.tg-button:focus:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  color: var(--tg-button-primary-focus-color);
  background-color: var(--tg-button-primary-focus-bg);
  border-color: var(--tg-button-primary-focus-border);
  text-decoration: none;
}

.tg-button:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-primary-active-bg);
  color: var(--tg-button-primary-active-color);
  border-color: var(--tg-button-primary-active-border);
  transform: translateY(0);
}

.tg-button:focus-visible {
  outline: none;
  box-shadow: var(--tg-button-primary-focus-shadow);
}

/* ===================================================================================== */
/* BUTTON SIZES - GOMB MÉRETEK */
/* ===================================================================================== */

.tg-button--xs {
  height: var(--tg-button-xs-height);
  padding: var(--tg-button-xs-padding-y) var(--tg-button-xs-padding-x);
  font-size: var(--tg-button-xs-font-size);
  border-radius: var(--tg-button-xs-border-radius);
}

.tg-button--sm {
  height: var(--tg-button-sm-height);
  padding: var(--tg-button-sm-padding-y) var(--tg-button-sm-padding-x);
  font-size: var(--tg-button-sm-font-size);
  border-radius: var(--tg-button-sm-border-radius);
}

.tg-button--md {
  height: var(--tg-button-md-height);
  padding: var(--tg-button-md-padding-y) var(--tg-button-md-padding-x);
  font-size: var(--tg-button-md-font-size);
  border-radius: var(--tg-button-md-border-radius);
}

.tg-button--lg {
  height: var(--tg-button-lg-height);
  padding: var(--tg-button-lg-padding-y) var(--tg-button-lg-padding-x);
  font-size: var(--tg-button-lg-font-size);
  border-radius: var(--tg-button-lg-border-radius);
}

.tg-button--xl {
  height: var(--tg-button-xl-height);
  padding: var(--tg-button-xl-padding-y) var(--tg-button-xl-padding-x);
  font-size: var(--tg-button-xl-font-size);
  border-radius: var(--tg-button-xl-border-radius);
}

/* ===================================================================================== */
/* BUTTON VARIANTS - GOMB VÁLTOZATOK */
/* ===================================================================================== */

/* Primary (default) */
.tg-button--primary {
  background-color: var(--tg-button-primary-bg);
  color: var(--tg-button-primary-color);
  border-color: var(--tg-button-primary-border);
}

.tg-button--primary:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-primary-hover-bg);
  color: var(--tg-button-primary-hover-color);
  border-color: var(--tg-button-primary-hover-border);
}

.tg-button--primary:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-primary-active-bg);
  color: var(--tg-button-primary-active-color);
  border-color: var(--tg-button-primary-active-border);
}

.tg-button--primary:focus-visible {
  box-shadow: var(--tg-button-primary-focus-shadow);
}

.tg-button--primary svg {
  fill: var(--tg-button-primary-color);
}

.tg-button--primary:hover svg {
  fill: var(--tg-button-primary-hover-color);
}

/* Secondary */
.tg-button--secondary {
  background-color: var(--tg-button-secondary-bg);
  color: var(--tg-button-secondary-color);
  border-color: var(--tg-button-secondary-border);
}

.tg-button--secondary:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-secondary-hover-bg);
  color: var(--tg-button-secondary-hover-color);
  border-color: var(--tg-button-secondary-hover-border);
}

.tg-button--secondary:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-secondary-active-bg);
  color: var(--tg-button-secondary-active-color);
  border-color: var(--tg-button-secondary-active-border);
}

.tg-button--secondary:focus-visible {
  box-shadow: var(--tg-button-secondary-focus-shadow);
}

.tg-button--secondary svg {
  fill: var(--tg-button-secondary-color);
}

.tg-button--secondary:hover svg {
  fill: var(--tg-button-secondary-hover-color);
}

/* Success */
.tg-button--success {
  background-color: var(--tg-button-success-bg);
  color: var(--tg-button-success-color);
  border-color: var(--tg-button-success-border);
}

.tg-button--success:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-success-hover-bg);
  color: var(--tg-button-success-hover-color);
  border-color: var(--tg-button-success-hover-border);
}

.tg-button--success:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-success-active-bg);
  color: var(--tg-button-success-active-color);
  border-color: var(--tg-button-success-active-border);
}

.tg-button--success:focus-visible {
  box-shadow: var(--tg-button-success-focus-shadow);
}

.tg-button--success svg {
  fill: var(--tg-button-success-color);
}

.tg-button--success:hover svg {
  fill: var(--tg-button-success-hover-color);
}

/* Warning */
.tg-button--warning {
  background-color: var(--tg-button-warning-bg);
  color: var(--tg-button-warning-color);
  border-color: var(--tg-button-warning-border);
}

.tg-button--warning:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-warning-hover-bg);
  color: var(--tg-button-warning-hover-color);
  border-color: var(--tg-button-warning-hover-border);
}

.tg-button--warning:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-warning-active-bg);
  color: var(--tg-button-warning-active-color);
  border-color: var(--tg-button-warning-active-border);
}

.tg-button--warning:focus-visible {
  box-shadow: var(--tg-button-warning-focus-shadow);
}

.tg-button--warning svg {
  fill: var(--tg-button-warning-color);
}

.tg-button--warning:hover svg {
  fill: var(--tg-button-warning-hover-color);
}

/* Danger */
.tg-button--danger {
  background-color: var(--tg-button-danger-bg);
  color: var(--tg-button-danger-color);
  border-color: var(--tg-button-danger-border);
}

.tg-button--danger:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-danger-hover-bg);
  color: var(--tg-button-danger-hover-color);
  border-color: var(--tg-button-danger-hover-border);
}

.tg-button--danger:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-danger-active-bg);
  color: var(--tg-button-danger-active-color);
  border-color: var(--tg-button-danger-active-border);
}

.tg-button--danger:focus-visible {
  box-shadow: var(--tg-button-danger-focus-shadow);
}

.tg-button--danger svg {
  fill: var(--tg-button-danger-color);
}

.tg-button--danger:hover svg {
  fill: var(--tg-button-danger-hover-color);
}

/* Info */
.tg-button--info {
  background-color: var(--tg-button-info-bg);
  color: var(--tg-button-info-color);
  border-color: var(--tg-button-info-border);
}

.tg-button--info:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-info-hover-bg);
  color: var(--tg-button-info-hover-color);
  border-color: var(--tg-button-info-hover-border);
}

.tg-button--info:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-info-active-bg);
  color: var(--tg-button-info-active-color);
  border-color: var(--tg-button-info-active-border);
}

.tg-button--info:focus-visible {
  box-shadow: var(--tg-button-info-focus-shadow);
}

.tg-button--info svg {
  fill: var(--tg-button-info-color);
}

.tg-button--info:hover svg {
  fill: var(--tg-button-info-hover-color);
}

/* ===================================================================================== */
/* OUTLINE VARIANTS - KÖRVONALAZOTT VÁLTOZATOK */
/* ===================================================================================== */

.tg-button--outline-primary {
  background-color: var(--tg-button-outline-primary-bg);
  color: var(--tg-button-outline-primary-color);
  border-color: var(--tg-button-outline-primary-border);
}

.tg-button--outline-primary:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-outline-primary-hover-bg);
  color: var(--tg-button-outline-primary-hover-color);
  border-color: var(--tg-button-outline-primary-hover-border);
}

.tg-button--outline-secondary {
  background-color: var(--tg-button-outline-secondary-bg);
  color: var(--tg-button-outline-secondary-color);
  border-color: var(--tg-button-outline-secondary-border);
}

.tg-button--outline-secondary:hover:not(:disabled):not(
    .tg-button--disabled
  ):not(.tg-button--loading) {
  background-color: var(--tg-button-outline-secondary-hover-bg);
  color: var(--tg-button-outline-secondary-hover-color);
  border-color: var(--tg-button-outline-secondary-hover-border);
}

/* ===================================================================================== */
/* GHOST VARIANT - SZELLEM VÁLTOZAT */
/* ===================================================================================== */

.tg-button--ghost {
  background-color: var(--tg-button-ghost-bg);
  color: var(--tg-button-ghost-color);
  border-color: var(--tg-button-ghost-border);
}

.tg-button--ghost:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-ghost-hover-bg);
  color: var(--tg-button-ghost-hover-color);
  border-color: var(--tg-button-ghost-hover-border);
}

/* ===================================================================================== */
/* LINK VARIANT - LINKEZŐ VÁLTOZAT */
/* ===================================================================================== */

.tg-button--link {
  background-color: transparent;
  color: var(--tg-button-link-color);
  border-color: transparent;
  border: none;
  box-shadow: none;
}

.tg-button--link svg {
  fill: var(--tg-button-link-color);
}

.tg-button--link:hover:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-link-hover-bg);
  color: var(--tg-button-link-hover-color);
  border-color: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}

.tg-button--link:focus:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: transparent;
  color: var(--tg-button-link-color);
  border-color: transparent;
  border: none;
  box-shadow: none;
  transform: none;
}

.tg-button--link:active:not(:disabled):not(.tg-button--disabled):not(
    .tg-button--loading
  ) {
  background-color: var(--tg-button-link-active-bg);
  color: var(--tg-button-link-active-color);
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.tg-button--link:focus-visible {
  outline: none;
  box-shadow: none;
}

/* ===================================================================================== */
/* BUTTON STATES - GOMB ÁLLAPOTOK */
/* ===================================================================================== */

/* Disabled State */
.tg-button:disabled,
.tg-button--disabled {
  background-color: var(--tg-button-disabled-bg) !important;
  color: var(--tg-button-disabled-color) !important;
  border-color: var(--tg-button-disabled-border) !important;
  opacity: var(--tg-button-disabled-opacity);
  cursor: var(--tg-button-disabled-cursor) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading State */
.tg-button--loading {
  opacity: var(--tg-button-loading-opacity);
  cursor: var(--tg-button-loading-cursor) !important;
  pointer-events: none;
}

/* ===================================================================================== */
/* BUTTON WITH ICONS - GOMB IKONOKKAL */
/* ===================================================================================== */

.tg-button__icon {
  flex-shrink: 0;
}

.tg-button--xs .tg-button__icon {
  width: var(--tg-button-xs-icon-size);
  height: var(--tg-button-xs-icon-size);
  font-size: var(--tg-button-xs-icon-size);
}

.tg-button--sm .tg-button__icon {
  width: var(--tg-button-sm-icon-size);
  height: var(--tg-button-sm-icon-size);
  font-size: var(--tg-button-sm-icon-size);
}

.tg-button--md .tg-button__icon,
.tg-button .tg-button__icon {
  width: var(--tg-button-md-icon-size);
  height: var(--tg-button-md-icon-size);
  font-size: var(--tg-button-md-icon-size);
}

.tg-button--lg .tg-button__icon {
  width: var(--tg-button-lg-icon-size);
  height: var(--tg-button-lg-icon-size);
  font-size: var(--tg-button-lg-icon-size);
}

.tg-button--xl .tg-button__icon {
  width: var(--tg-button-xl-icon-size);
  height: var(--tg-button-xl-icon-size);
  font-size: var(--tg-button-xl-icon-size);
}

/* Icon only buttons */
.tg-button--icon-only {
  padding: var(--tg-button-md-padding-y);
  width: var(--tg-button-md-height);
}

.tg-button--xs.tg-button--icon-only {
  padding: var(--tg-button-xs-padding-y);
  width: var(--tg-button-xs-height);
}

.tg-button--sm.tg-button--icon-only {
  padding: var(--tg-button-sm-padding-y);
  width: var(--tg-button-sm-height);
}

.tg-button--lg.tg-button--icon-only {
  padding: var(--tg-button-lg-padding-y);
  width: var(--tg-button-lg-height);
}

.tg-button--xl.tg-button--icon-only {
  padding: var(--tg-button-xl-padding-y);
  width: var(--tg-button-xl-height);
}

/* ===================================================================================== */
/* BUTTON GROUPS - GOMB CSOPORTOK */
/* ===================================================================================== */

.tg-button-group {
  display: inline-flex;
  align-items: center;
}

.tg-button-group .tg-button {
  border-radius: 0;
  margin-left: -1px;
}

.tg-button-group .tg-button:first-child {
  border-top-left-radius: var(--tg-button-md-border-radius);
  border-bottom-left-radius: var(--tg-button-md-border-radius);
  margin-left: 0;
}

.tg-button-group .tg-button:last-child {
  border-top-right-radius: var(--tg-button-md-border-radius);
  border-bottom-right-radius: var(--tg-button-md-border-radius);
}

.tg-button-group .tg-button:hover,
.tg-button-group .tg-button:focus {
  z-index: 1;
  position: relative;
}

/* ===================================================================================== */
/* FULL WIDTH BUTTON - TELJES SZÉLESSÉGŰ GOMB */
/* ===================================================================================== */

.tg-button--full-width {
  width: 100%;
}

/* ===================================================================================== */
/* LOADING SPINNER - BETÖLTÉS SPINNER */
/* ===================================================================================== */

.tg-button__spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: tg-button-spin 1s linear infinite;
}

@keyframes tg-button-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ===================================================================================== */
/* RESPONSIVE DESIGN - RESZPONZÍV TERVEZÉS */
/* ===================================================================================== */

@media (max-width: 767.98px) {
  .tg-button--responsive {
    width: 100%;
  }

  .tg-button-group--responsive {
    flex-direction: column;
    width: 100%;
  }

  .tg-button-group--responsive .tg-button {
    width: 100%;
    margin-left: 0;
    margin-top: -1px;
    border-radius: 0;
  }

  .tg-button-group--responsive .tg-button:first-child {
    border-top-left-radius: var(--tg-button-md-border-radius);
    border-top-right-radius: var(--tg-button-md-border-radius);
    border-bottom-left-radius: 0;
    margin-top: 0;
  }

  .tg-button-group--responsive .tg-button:last-child {
    border-bottom-left-radius: var(--tg-button-md-border-radius);
    border-bottom-right-radius: var(--tg-button-md-border-radius);
    border-top-right-radius: 0;
  }
}

/* ===================================================================================== */
/* ACCESSIBILITY IMPROVEMENTS - AKADÁLYMENTESÍTÉSI FEJLESZTÉSEK */
/* ===================================================================================== */

@media (prefers-reduced-motion: reduce) {
  .tg-button {
    transition: none;
  }

  .tg-button:hover {
    transform: none;
  }

  .tg-button__spinner {
    animation: none;
  }
}

@media (prefers-contrast: high) {
  .tg-button {
    border-width: 2px;
  }

  .tg-button:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

/* ===================================================================================== */
/* PRINT STYLES - NYOMTATÁSI STÍLUSOK */
/* ===================================================================================== */

@media print {
  .tg-button {
    background: none !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .tg-button:hover,
  .tg-button:focus,
  .tg-button:active {
    background: none !important;
    transform: none !important;
  }
}


/* tg-card.css */
.tg-card {
  display: flex;
  flex-direction: column;
  background-color: var(--tg-bg-surface);
  padding: var(--tg-spacer-4);
  border-radius: var(--tg-border-radius-card);
  box-shadow: var(--tg-shadow-card);
  margin-bottom: var(--tg-list-item-gap);
  overflow: hidden;
  transition: var(--tg-transition-base);
  position: relative;
}

.tg-card--hoverable:hover {
  box-shadow: var(--tg-shadow-card-hover);
}


/* tg-badge.css */
/* Badge */
.tg-badge-list {
  display: flex;
}

.tg-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--tg-spacer-1);
  border-radius: var(--tg-border-radius-full);
  padding: var(--tg-spacer-1) var(--tg-spacer-2) var(--tg-spacer-1)
    var(--tg-spacer-1-5);
  font-weight: var(--tg-font-weight-semibold);
  text-align: center;
  line-height: 1.2;
  height: 1.5rem;
}

.tg-badge__label {
  font-size: var(--tg-font-size-xs);
}

/* Discount Badge */
.tg-badge--discount {
  background: linear-gradient(
    135deg,
    var(--tg-danger-600),
    var(--tg-danger-700)
  );
  color: var(--tg-fg-on-bg-danger);
}

.tg-badge--discount svg {
  fill: var(--tg-fg-on-bg-danger);
}

/* Info Badge */
.tg-badge--info {
  background: linear-gradient(
    135deg,
    var(--tg-success-600),
    var(--tg-success-700)
  );
  color: var(--tg-fg-on-bg-success);
}

.tg-badge--info svg {
  fill: var(--tg-fg-on-bg-success);
}

/* Tour Operator ID */
.tg-badge--tour-operator {
  padding: var(--tg-spacer-1) var(--tg-spacer-2);
  background: var(--tg-bg-muted);
  color: var(--tg-fg-on-bg-muted);
}

/* Featured Badge */
.tg-badge--featured {
  background-color: var(--tg-bg-secondary);
  color: var(--tg-fg-on-bg-secondary);
  font-weight: var(--tg-font-weight-semibold);
  border-radius: var(--tg-border-radius-full);
  padding: var(--tg-spacer-1) var(--tg-spacer-3);
  font-size: var(--tg-font-size-xs);
}


/* tg-tag.css */
.tg-tag-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tg-spacer-2);
}

.tg-tag-item {
  background-color: var(--tg-bg-warning-light);
  color: var(--tg-warning-900);
  border: 1px solid var(--tg-border-warning);
  padding: var(--tg-spacer-1) var(--tg-spacer-2) var(--tg-spacer-1)
    var(--tg-spacer-1-5);
  border-radius: var(--tg-border-radius-full);
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--tg-spacer-1);
  line-height: 1.2;
  height: 1.5rem;
}

.tg-tag-item svg {
  fill: var(--tg-warning-900);
}


/* tg-form.css */
/**
 * TravelGate Form Component
 * Űrlap komponens stílusok
 * 
 * @version 1.0.0
 * @description Űrlap komponensek a TravelGate design system szerint
 */

/* ===================================================================================== */
/* FORM LAYOUT - ŰRLAP ELRENDEZÉS */
/* ===================================================================================== */

.tg-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tg-spacer-4);
}

.tg-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-2);
}

/* ===================================================================================== */
/* FORM LABELS - ŰRLAP CÍMKÉK */
/* ===================================================================================== */

.tg-form-label {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-color-primary);
}

.tg-form-label--required::after {
  content: " *";
  color: var(--tg-color-danger);
}

/* ===================================================================================== */
/* FORM INPUTS - ŰRLAP BEVITELI MEZŐK */
/* ===================================================================================== */

.tg-form-input {
  height: var(--tg-input-height-md);
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  transition: var(--tg-transition-colors);
}

.tg-form-input:hover {
  border-color: var(--tg-border-focus);
}

.tg-form-input:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.tg-form-textarea {
  min-height: 5rem;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  transition: var(--tg-transition-colors);
  resize: vertical;
}

.tg-form-textarea:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.tg-form-select {
  height: var(--tg-input-height-md);
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  transition: var(--tg-transition-colors);
}

.tg-form-select:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

/* ===================================================================================== */
/* FORM HELPERS - ŰRLAP SEGÍTŐK */
/* ===================================================================================== */

.tg-form-helper {
  font-size: var(--tg-font-size-xs);
  color: var(--tg-text-muted);
}

.tg-form-privacy-notice {
  margin-top: var(--tg-spacer-4);
  padding: var(--tg-spacer-3);
  background-color: var(--tg-bg-muted-light);
  border-radius: var(--tg-border-radius-base);
  font-size: var(--tg-font-size-xs);
  line-height: 1.5;
  color: var(--tg-text-muted);
}

.tg-form-privacy-notice a {
  color: var(--tg-color-info);
  text-decoration: underline;
  transition: var(--tg-transition-colors);
}

.tg-form-privacy-notice a:hover {
  color: var(--tg-color-primary);
}

/* ===================================================================================== */
/* RESPONSIVE DESIGN - RESZPONZÍV TERVEZÉS */
/* ===================================================================================== */

@media (max-width: 767.98px) {
  .tg-form-row {
    grid-template-columns: 1fr;
  }
}

/* ===================================================================================== */
/* UTILITY CLASSES - SEGÉD OSZTÁLYOK */
/* ===================================================================================== */

.tg-form .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* tg-radio.css */
/* TG Design System - Radio Component */

/* Base radio styles */
.tg-radio {
  width: 16px;
  height: 16px;
  border: 2px solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-full);
  background-color: var(--tg-bg-surface);
  cursor: pointer;
  transition: all var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  flex-shrink: 0;
  margin: var(--tg-spacer-0) !important;
  margin-right: var(--tg-spacer-2) !important;
}

.tg-radio:hover {
  border-color: var(--tg-border-focus);
  background-color: var(--tg-bg-hover);
}

.tg-radio:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.tg-radio:checked {
  background-color: var(--tg-bg-surface);
  border-color: var(--tg-color-primary);
}

.tg-radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: var(--tg-color-primary);
  border-radius: var(--tg-border-radius-full);
}

.tg-radio:disabled {
  opacity: var(--tg-button-disabled-opacity);
  cursor: var(--tg-button-disabled-cursor);
  background-color: var(--tg-bg-disabled);
  border-color: var(--tg-border-disabled);
}

.tg-radio:disabled:checked::after {
  background-color: var(--tg-text-muted);
}

/* Radio item */
.tg-radio-item {
  display: flex;
  align-items: center;
  gap: var(--tg-spacer-2);
}

/* Radio option wrapper */
.tg-radio-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--tg-spacer-2) var(--tg-spacer-3);
  cursor: pointer;
  border-radius: var(--tg-border-radius-base);
  transition: var(--tg-transition-colors);
  margin-bottom: var(--tg-spacer-0);
  border: 0px solid transparent;
  margin-bottom: var(--tg-spacer-0) !important;
}

.tg-radio-option:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
  border-color: var(--tg-border-light);
}

.tg-radio-option:has(input[type="radio"]:checked),
.tg-radio-option:has(.tg-radio:checked) {
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
  border-color: var(--tg-border-focus);
  font-weight: var(--tg-font-weight-medium);
}

.tg-radio-option:has(input[type="radio"]:focus),
.tg-radio-option:has(.tg-radio:focus) {
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
}

.tg-radio-option__text {
  display: inline-flex;
  align-items: center;
  color: var(--tg-text-color);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  user-select: none;
}

/* Size variations */
.tg-radio--sm {
  width: 14px;
  height: 14px;
}

.tg-radio--sm::after {
  width: 6px;
  height: 6px;
}

.tg-radio--lg {
  width: 20px;
  height: 20px;
}

.tg-radio--lg::after {
  width: 10px;
  height: 10px;
}

/* Radio group styles */
.tg-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-1);
}

.tg-radio-group--horizontal {
  flex-direction: row;
  gap: var(--tg-spacer-3);
  flex-wrap: wrap;
}

.tg-radio-group__title {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-color);
  margin-bottom: var(--tg-spacer-2);
}

/* Legacy support - map existing elements to the new tg-radio */
input[type="radio"].list-searchform__radio,
input[type="radio"].discount-search__radio,
input[type="radio"].sea-distance-search__radio,
.discount-search__option input[type="radio"],
.sea-distance-search__option input[type="radio"] {
  width: 16px;
  height: 16px;
  border: 2px solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-full);
  background-color: var(--tg-bg-surface);
  cursor: pointer;
  transition: all var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  flex-shrink: 0;
  margin-right: var(--tg-spacer-2);
}

input[type="radio"].list-searchform__radio:hover,
input[type="radio"].discount-search__radio:hover,
input[type="radio"].sea-distance-search__radio:hover,
.discount-search__option input[type="radio"]:hover,
.sea-distance-search__option input[type="radio"]:hover {
  border-color: var(--tg-border-focus);
  background-color: var(--tg-bg-hover);
}

input[type="radio"].list-searchform__radio:focus,
input[type="radio"].discount-search__radio:focus,
input[type="radio"].sea-distance-search__radio:focus,
.discount-search__option input[type="radio"]:focus,
.sea-distance-search__option input[type="radio"]:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

input[type="radio"].list-searchform__radio:checked,
input[type="radio"].discount-search__radio:checked,
input[type="radio"].sea-distance-search__radio:checked,
.discount-search__option input[type="radio"]:checked,
.sea-distance-search__option input[type="radio"]:checked {
  background-color: var(--tg-bg-surface);
  border-color: var(--tg-color-primary);
}

input[type="radio"].list-searchform__radio:checked::after,
input[type="radio"].discount-search__radio:checked::after,
input[type="radio"].sea-distance-search__radio:checked::after,
.discount-search__option input[type="radio"]:checked::after,
.sea-distance-search__option input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: var(--tg-color-primary);
  border-radius: var(--tg-border-radius-full);
}

/* Map existing option containers to tg-radio-option style */
.discount-search__option,
.sea-distance-search__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--tg-spacer-2) var(--tg-spacer-3);
  cursor: pointer;
  border-radius: var(--tg-border-radius-base);
  transition: background-color var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in);
  margin-bottom: var(--tg-spacer-1);
  border: 1px solid transparent;
}

.discount-search__option:hover,
.sea-distance-search__option:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
  border-color: var(--tg-border-light);
}

.discount-search__option:has(input[type="radio"]:checked),
.sea-distance-search__option:has(input[type="radio"]:checked) {
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
  border-color: var(--tg-border-focus);
  font-weight: var(--tg-font-weight-medium);
}

/* Color variations */
.tg-radio--success:checked {
  border-color: var(--tg-color-success);
}

.tg-radio--success:checked::after {
  background-color: var(--tg-color-success);
}

.tg-radio--warning:checked {
  border-color: var(--tg-color-warning);
}

.tg-radio--warning:checked::after {
  background-color: var(--tg-color-warning);
}

.tg-radio--danger:checked {
  border-color: var(--tg-color-danger);
}

.tg-radio--danger:checked::after {
  background-color: var(--tg-color-danger);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tg-radio,
  input[type="radio"] {
    border-width: 3px;
  }

  .tg-radio-option:has(input[type="radio"]:checked),
  .tg-radio-option:has(.tg-radio:checked),
  .discount-search__option:has(input[type="radio"]:checked),
  .sea-distance-search__option:has(input[type="radio"]:checked) {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tg-radio,
  input[type="radio"],
  .tg-radio-option,
  .discount-search__option,
  .sea-distance-search__option {
    transition-duration: var(--tg-transition-duration-75) !important;
  }
}


/* tg-checkbox.css */
/* TG Design System - Checkbox Component */

/* Base checkbox styles */
.tg-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-sm);
  background-color: var(--tg-bg-surface);
  cursor: pointer;
  transition: all var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  flex-shrink: 0;
  margin: var(--tg-spacer-0) !important;
}

.tg-checkbox:hover {
  border-color: var(--tg-border-focus);
  background-color: var(--tg-bg-hover);
}

.tg-checkbox:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.tg-checkbox:checked {
  background-color: var(--tg-color-primary);
  border-color: var(--tg-color-primary);
}

.tg-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='white' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tg-checkbox:indeterminate {
  background-color: var(--tg-color-warning);
  border-color: var(--tg-color-warning);
}

.tg-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='white' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tg-checkbox:disabled {
  opacity: var(--tg-button-disabled-opacity);
  cursor: var(--tg-button-disabled-cursor);
  background-color: var(--tg-bg-disabled);
  border-color: var(--tg-border-disabled);
}

.tg-checkbox:disabled:checked {
  background-color: var(--tg-bg-disabled);
  border-color: var(--tg-border-disabled);
}

.tg-checkbox:disabled:checked::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='%23888' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
}

/* Checkbox label wrapper */
.tg-checkbox-option {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-2);
  cursor: pointer;
  border-radius: var(--tg-border-radius-base);
  transition: var(--tg-transition-colors);
  gap: var(--tg-spacer-2);
  margin-bottom: var(--tg-spacer-0) !important;
}

.tg-checkbox-option:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
}

.tg-checkbox-option:has(.tg-checkbox:focus) {
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
}

.tg-checkbox-option__text {
  display: inline-flex;
  align-items: center;
  color: var(--tg-text-color);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  user-select: none;
}

/* Size variations */
.tg-checkbox--sm {
  width: 14px;
  height: 14px;
}

.tg-checkbox--sm::after {
  width: 8px;
  height: 8px;
}

.tg-checkbox--lg {
  width: 20px;
  height: 20px;
}

.tg-checkbox--lg::after {
  width: 14px;
  height: 14px;
}

/* Color variations */
.tg-checkbox--success:checked {
  background-color: var(--tg-color-success);
  border-color: var(--tg-color-success);
}

.tg-checkbox--success:checked::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='white' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
}

.tg-checkbox--warning:checked {
  background-color: var(--tg-color-warning);
  border-color: var(--tg-color-warning);
}

.tg-checkbox--warning:checked::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='white' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
}

.tg-checkbox--danger:checked {
  background-color: var(--tg-color-danger);
  border-color: var(--tg-color-danger);
}

.tg-checkbox--danger:checked::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='white' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
}

/* Rounded variant */
.tg-checkbox--rounded {
  border-radius: var(--tg-border-radius-full);
}

/* Checkbox group styles */
.tg-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-1);
}

.tg-checkbox-group--horizontal {
  flex-direction: row;
  gap: var(--tg-spacer-3);
  flex-wrap: wrap;
}

.tg-checkbox-group__title {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-color);
  margin-bottom: var(--tg-spacer-2);
}

/* Legacy checkbox compatibility */
.destination-search__checkbox,
.destination-search__country-checkbox,
.destination-search__region-checkbox,
.destination-search__city-checkbox,
.destination-search__accommodation-checkbox,
.travel-mode-search__checkbox,
.hotel-category-search__checkbox,
.meal-plan-search__checkbox,
.hotel-attributes-search__checkbox,
.place-checkbox,
.region-checkbox,
.location-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-sm);
  background-color: var(--tg-bg-surface);
  cursor: pointer;
  transition: all var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  flex-shrink: 0;
  margin: var(--tg-spacer-0) !important;
}

.destination-search__checkbox:hover,
.destination-search__country-checkbox:hover,
.destination-search__region-checkbox:hover,
.destination-search__city-checkbox:hover,
.destination-search__accommodation-checkbox:hover,
.travel-mode-search__checkbox:hover,
.hotel-category-search__checkbox:hover,
.meal-plan-search__checkbox:hover,
.hotel-attributes-search__checkbox:hover,
.place-checkbox:hover,
.region-checkbox:hover,
.location-checkbox:hover {
  border-color: var(--tg-border-focus);
  background-color: var(--tg-bg-hover);
}

.destination-search__checkbox:focus,
.destination-search__country-checkbox:focus,
.destination-search__region-checkbox:focus,
.destination-search__city-checkbox:focus,
.destination-search__accommodation-checkbox:focus,
.travel-mode-search__checkbox:focus,
.hotel-category-search__checkbox:focus,
.meal-plan-search__checkbox:focus,
.hotel-attributes-search__checkbox:focus,
.place-checkbox:focus,
.region-checkbox:focus,
.location-checkbox:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.destination-search__checkbox:checked,
.destination-search__country-checkbox:checked,
.destination-search__region-checkbox:checked,
.destination-search__city-checkbox:checked,
.destination-search__accommodation-checkbox:checked,
.travel-mode-search__checkbox:checked,
.hotel-category-search__checkbox:checked,
.meal-plan-search__checkbox:checked,
.hotel-attributes-search__checkbox:checked,
.place-checkbox:checked,
.region-checkbox:checked,
.location-checkbox:checked {
  background-color: var(--tg-color-primary);
  border-color: var(--tg-color-primary);
}

.destination-search__checkbox:checked::after,
.destination-search__country-checkbox:checked::after,
.destination-search__region-checkbox:checked::after,
.destination-search__city-checkbox:checked::after,
.destination-search__accommodation-checkbox:checked::after,
.travel-mode-search__checkbox:checked::after,
.hotel-category-search__checkbox:checked::after,
.meal-plan-search__checkbox:checked::after,
.hotel-attributes-search__checkbox:checked::after,
.place-checkbox:checked::after,
.region-checkbox:checked::after,
.location-checkbox:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3e%3cpath fill='white' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.destination-search__checkbox:indeterminate,
.destination-search__country-checkbox:indeterminate,
.destination-search__region-checkbox:indeterminate,
.destination-search__city-checkbox:indeterminate,
.destination-search__accommodation-checkbox:indeterminate,
.travel-mode-search__checkbox:indeterminate,
.hotel-category-search__checkbox:indeterminate,
.meal-plan-search__checkbox:indeterminate,
.hotel-attributes-search__checkbox:indeterminate,
.place-checkbox:indeterminate,
.region-checkbox:indeterminate,
.location-checkbox:indeterminate {
  background-color: var(--tg-color-warning);
  border-color: var(--tg-color-warning);
}

.destination-search__checkbox:indeterminate::after,
.destination-search__country-checkbox:indeterminate::after,
.destination-search__region-checkbox:indeterminate::after,
.destination-search__city-checkbox:indeterminate::after,
.destination-search__accommodation-checkbox:indeterminate::after,
.travel-mode-search__checkbox:indeterminate::after,
.hotel-category-search__checkbox:indeterminate::after,
.meal-plan-search__checkbox:indeterminate::after,
.hotel-attributes-search__checkbox:indeterminate::after,
.place-checkbox:indeterminate::after,
.region-checkbox:indeterminate::after,
.location-checkbox:indeterminate::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3e%3cpath fill='white' d='M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tg-checkbox,
  .destination-search__checkbox,
  .destination-search__country-checkbox,
  .destination-search__region-checkbox,
  .destination-search__city-checkbox,
  .destination-search__accommodation-checkbox,
  .travel-mode-search__checkbox,
  .hotel-category-search__checkbox,
  .meal-plan-search__checkbox,
  .hotel-attributes-search__checkbox,
  .place-checkbox,
  .region-checkbox,
  .location-checkbox {
    border-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tg-checkbox,
  .destination-search__checkbox,
  .destination-search__country-checkbox,
  .destination-search__region-checkbox,
  .destination-search__city-checkbox,
  .destination-search__accommodation-checkbox,
  .travel-mode-search__checkbox,
  .hotel-category-search__checkbox,
  .meal-plan-search__checkbox,
  .hotel-attributes-search__checkbox,
  .place-checkbox,
  .region-checkbox,
  .location-checkbox {
    transition: none;
  }
}


/* tg-switch.css */
/* ===================================================================================== */
/* SWITCH TOGGLE - KAPCSOLÓ */
/* ===================================================================================== */

.tg-form-switch {
  display: inline-flex;
  height: 24px;
  width: 44px;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 12px;
  border: 2px solid transparent;
  background-color: var(--tg-border-color);
  transition: var(--tg-transition-colors);
  position: relative;
}

.tg-form-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--tg-color-primary-alpha);
}

.tg-form-switch--checked {
  background-color: var(--tg-color-primary);
}

.tg-form-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.tg-form-switch-thumb {
  pointer-events: none;
  display: block;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: var(--tg-bg-surface);
  box-shadow: var(--tg-shadow-sm);
  transition: transform var(--tg-transition-default);
  transform: translateX(0);
}

.tg-form-switch-thumb--checked {
  transform: translateX(20px);
}


/* tg-accordion.css */
/* TravelGate Accordion Component Styles */

.tg-accordion {
  position: relative;
  background-color: var(--tg-bg-surface);
  border-radius: var(--tg-border-radius-card);
  transition: box-shadow var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
}

.tg-accordion:hover {
}

.tg-accordion.open {
}

.tg-accordion__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  background-color: var(--tg-bg-surface);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  cursor: pointer;
  text-align: left;
  transition: var(--tg-transition-colors);
  min-height: var(--tg-input-height-md);
}

.tg-accordion__trigger:hover {
  border-color: var(--tg-border-focus);
}

.tg-accordion__trigger:focus-visible {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.tg-accordion__icon {
  flex-shrink: 0;
  font-size: var(--tg-font-size-base);
  margin-right: var(--tg-spacer-2);
  color: var(--tg-text-muted);
}

.tg-accordion__content-header {
  flex: 1;
  overflow: hidden;
}

.tg-accordion__title {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  margin-bottom: var(--tg-spacer-0);
  color: var(--tg-text-color);
}

.tg-accordion__selections {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--tg-spacer-1);
  height: 1.5rem;
}

.tg-accordion__selections::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  flex: 1;
  background-image: linear-gradient(to left, var(--tg-bg-surface), transparent);
  width: 30px;
}

.tg-accordion__placeholder {
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
}

.tg-accordion__badge {
  display: flex;
  text-wrap: nowrap;
  align-items: center;
  background-color: var(--tg-bg-secondary);
  color: var(--tg-fg-on-bg-secondary);
  border-radius: var(--tg-badge-border-radius);
  padding: var(--tg-badge-padding-y) var(--tg-badge-padding-x);
  font-size: var(--tg-badge-font-size);
  font-weight: var(--tg-font-weight-medium);
  height: 1.5rem;
}

.tg-accordion__badge--more {
  font-style: italic;
}

.tg-accordion__arrow {
  flex-shrink: 0;
  margin-left: var(--tg-spacer-2);
  transition: transform var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
}

.tg-accordion.open .tg-accordion__arrow {
  transform: rotate(180deg);
}

.tg-accordion__content {
  margin-top: var(--tg-spacer-2);
  border: 1px solid var(--tg-border-color);
  background-color: var(--tg-bg-surface);
  border-radius: var(--tg-border-radius-lg);
  animation: accordionFadeIn var(--tg-transition-duration-300)
    var(--tg-transition-timing-ease-out);
  max-height: 600px;
  overflow: hidden;
}

.tg-accordion.open .tg-accordion__content {
  max-height: 600px;
  overflow-y: auto;
}

.tg-accordion__content--closing {
  animation: accordionFadeOut var(--tg-transition-duration-300)
    var(--tg-transition-timing-ease-out);
  pointer-events: none;
  overflow: hidden;
}

.tg-accordion__footer {
  padding: var(--tg-spacer-4);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--tg-border-color);
  margin-top: var(--tg-spacer-4);
  gap: var(--tg-spacer-3);
  background: var(--tg-bg-surface);
}

.tg-accordion__btn {
  padding: var(--tg-button-sm-padding-y) var(--tg-button-sm-padding-x);
  border-radius: var(--tg-button-sm-border-radius);
  font-weight: var(--tg-font-weight-medium);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  font-size: var(--tg-button-sm-font-size);
  min-height: var(--tg-button-sm-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-accordion__btn--primary {
  background-color: var(--tg-button-primary-bg);
  color: var(--tg-button-primary-color);
  border: 1px solid var(--tg-button-primary-border);
}

.tg-accordion__btn--primary:hover {
  background-color: var(--tg-button-primary-hover-bg);
  color: var(--tg-button-primary-hover-color);
  border-color: var(--tg-button-primary-hover-border);
}

.tg-accordion__btn--secondary {
  background: var(--tg-button-outline-secondary-bg);
  border: 1px solid var(--tg-button-outline-secondary-border);
  color: var(--tg-button-outline-secondary-color);
}

.tg-accordion__btn--secondary:hover {
  background-color: var(--tg-button-outline-secondary-hover-bg);
  color: var(--tg-button-outline-secondary-hover-color);
  border-color: var(--tg-button-outline-secondary-hover-border);
}

.tg-accordion__btn:focus-visible {
  outline: none;
  box-shadow: var(--tg-shadow-focus);
}

/* ===================================================================================== */
/* SIMPLE TOGGLE ACCORDION - EGYSZERŰ VÁLTÓ ACCORDION */
/* ===================================================================================== */

/* Simple toggle trigger for inline accordion functionality */
.tg-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--tg-spacer-4) var(--tg-spacer-6);
  background: none;
  border: none;
  border-top: 1px solid var(--tg-border-color);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  color: var(--tg-text-primary);
  font-weight: var(--tg-font-weight-medium);
  font-size: var(--tg-font-size-sm);
  text-align: left;
}

.tg-accordion-toggle:hover {
  background-color: var(--tg-bg-muted-light);
  color: var(--tg-text-primary);
}

.tg-accordion-toggle:focus-visible {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: -2px;
  background-color: var(--tg-bg-muted-light);
}

.tg-accordion-toggle svg {
  transition: transform var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  color: var(--tg-text-muted);
}

.tg-accordion-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Simple toggle content with smooth transitions */
.tg-accordion-content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--tg-transition-duration-300)
      var(--tg-transition-timing-ease-out),
    opacity var(--tg-transition-duration-300)
      var(--tg-transition-timing-ease-out),
    padding var(--tg-transition-duration-300)
      var(--tg-transition-timing-ease-out),
    margin var(--tg-transition-duration-300)
      var(--tg-transition-timing-ease-out);
}

.tg-accordion-content--expanded {
  max-height: 400px;
  opacity: 1;
}

.tg-accordion-content--collapsing {
  max-height: 0;
  opacity: 0;
}

/* Mobil reszponzivitás */
@media (max-width: 767.98px) {
  .tg-accordion__content {
    max-height: 300px;
  }

  .tg-accordion.open .tg-accordion__content {
    max-height: 300px;
  }

  .tg-accordion__trigger {
    padding: var(--tg-spacer-3);
  }

  .tg-accordion__footer {
    padding: var(--tg-spacer-3);
  }

  .tg-accordion-toggle {
    padding: var(--tg-spacer-4);
  }

  .tg-accordion-content--expanded {
    max-height: 500px;
  }
}

@media (max-width: 575.98px) {
  .tg-accordion-content--expanded {
    max-height: 600px;
  }
}

/* Accordion animációk */
@keyframes accordionFadeIn {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 600px;
  }
}

@keyframes accordionFadeOut {
  from {
    opacity: 1;
    max-height: 600px;
  }
  to {
    opacity: 0;
    max-height: 0;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tg-accordion,
  .tg-accordion__content,
  .tg-accordion__arrow,
  .tg-accordion-toggle,
  .tg-accordion-toggle svg,
  .tg-accordion-content {
    transition: none;
    animation: none;
  }
}


/* tg-dropdown.css */
/* TravelGate Dropdown Component Styles */

/* Search Component Base Styles */
.tg-dropdown {
  position: relative;
}

.tg-dropdown__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  background-color: var(--tg-bg-surface);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  cursor: pointer;
  text-align: left;
  transition: var(--tg-transition-colors);
  min-height: var(--tg-input-height-md);
}

.tg-dropdown__trigger:hover {
  border-color: var(--tg-border-focus);
}

.tg-dropdown__trigger:focus-visible,
.open .tg-dropdown__trigger {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.tg-dropdown__icon {
  flex-shrink: 0;
  font-size: var(--tg-font-size-base);
  margin-right: var(--tg-spacer-2);
  color: var(--tg-text-muted);
}

.tg-dropdown__icon--inverted {
  color: var(--tg-fg-on-bg-primary);
}

.tg-dropdown__content {
  flex: 1;
  overflow: hidden;
}

.tg-dropdown__title {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  margin-bottom: var(--tg-spacer-0);
  color: var(--tg-text-color);
}

.tg-dropdown__selections {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--tg-spacer-1);
  height: 1.5rem;
}

.tg-dropdown__selections::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  flex: 1;
  background-image: linear-gradient(to left, var(--tg-bg-surface), transparent);
  width: 30px;
}

.tg-dropdown__placeholder {
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
}

.tg-dropdown__badge {
  display: flex;
  text-wrap: nowrap;
  align-items: center;
  background-color: var(--tg-bg-secondary);
  color: var(--tg-fg-on-bg-secondary);
  border-radius: var(--tg-badge-border-radius);
  padding: var(--tg-badge-padding-y) var(--tg-badge-padding-x);
  font-size: var(--tg-badge-font-size);
  font-weight: var(--tg-font-weight-medium);
  height: 1.5rem;
}

.tg-dropdown__badge--more {
  font-style: italic;
}

.tg-dropdown__arrow {
  flex-shrink: 0;
  margin-left: var(--tg-spacer-2);
  transition: transform var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
}

.tg-dropdown.open .tg-dropdown__arrow {
  transform: rotate(180deg);
}

/* Dropdown Styles */
.tg-dropdown__dropdown {
  position: absolute;
  top: calc(100% + var(--tg-spacer-2));
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 800px;
  z-index: var(--tg-z-index-dropdown);
  background-color: var(--tg-bg-surface);
  border-radius: var(--tg-border-radius-lg);
  box-shadow: var(--tg-shadow-dropdown);
  padding: var(--tg-spacer-0);
  max-height: 540px;
  overflow-y: auto;
  border: 1px solid var(--tg-border-light);
  display: none;
  animation: fadeIn var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
}

/* Ne használjunk !important csak ha feltétlenül szükséges */
.tg-dropdown.open .tg-dropdown__dropdown {
  display: block;
}

.tg-dropdown__header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--tg-spacer-0);
  border-bottom: 1px solid var(--tg-border-color);
  background: var(--tg-bg-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tg-dropdown__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--tg-container-2xl);
  margin: 0 auto;
  width: 100%;
  padding: var(--tg-spacer-2) var(--tg-spacer-4);
}

.tg-dropdown__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--tg-radius-md);
  background: transparent;
  color: var(--tg-text-secondary);
  cursor: pointer;
  transition: var(--tg-transition-colors);
}

.tg-dropdown__close:hover {
  background: var(--tg-bg-secondary);
  color: var(--tg-text-primary);
}

.tg-dropdown__close:focus-visible {
  outline: 2px solid var(--tg-color-primary);
  outline-offset: 2px;
}

.tg-dropdown__close svg {
  width: 20px;
  height: 20px;
}

.tg-dropdown__dropdown--closing {
  animation: fadeOut var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
  pointer-events: none;
}

.tg-dropdown__search {
  position: relative;
  padding: var(--tg-spacer-4);
}

.tg-dropdown__search-input {
  width: 100%;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
}

.tg-dropdown__search-input:focus {
  outline: none !important;
  border-color: var(--tg-border-focus) !important;
  box-shadow: var(--tg-shadow-focus) !important;
}

.tg-dropdown__tabs {
  display: flex;
  margin-bottom: var(--tg-spacer-4);
  border-bottom: 1px solid var(--tg-border-color);
}

.tg-dropdown__tab {
  padding: var(--tg-spacer-2) var(--tg-spacer-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: var(--tg-font-weight-medium);
  transition: var(--tg-transition-colors);
  color: var(--tg-text-color);
}

.tg-dropdown__tab:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
}

.tg-dropdown__tab--active {
  border-bottom-color: var(--tg-color-primary);
  color: var(--tg-color-primary);
}

.tg-dropdown__section {
  display: none;
}

.tg-dropdown__section--active {
  display: block;
}

.tg-dropdown__footer {
  padding: var(--tg-spacer-4);
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--tg-border-color);
  margin-top: var(--tg-spacer-0);
  gap: var(--tg-spacer-3);
  background: var(--tg-bg-surface);
}

.tg-dropdown__btn {
  padding: var(--tg-button-sm-padding-y) var(--tg-button-sm-padding-x);
  border-radius: var(--tg-button-sm-border-radius);
  font-weight: var(--tg-font-weight-medium);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  font-size: var(--tg-button-sm-font-size);
  min-height: var(--tg-button-sm-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-dropdown__btn--primary {
  background-color: var(--tg-button-primary-bg);
  color: var(--tg-button-primary-color);
  border: 1px solid var(--tg-button-primary-border);
}

.tg-dropdown__btn--primary:hover {
  background-color: var(--tg-button-primary-hover-bg);
  color: var(--tg-button-primary-hover-color);
  border-color: var(--tg-button-primary-hover-border);
}

.tg-dropdown__btn--secondary {
  background: var(--tg-button-outline-secondary-bg);
  border: 1px solid var(--tg-button-outline-secondary-border);
  color: var(--tg-button-outline-secondary-color);
}

.tg-dropdown__btn--secondary:hover {
  background-color: var(--tg-button-outline-secondary-hover-bg);
  color: var(--tg-button-outline-secondary-hover-color);
  border-color: var(--tg-button-outline-secondary-hover-border);
}

.tg-dropdown__btn:focus-visible {
  outline: none;
  box-shadow: var(--tg-shadow-focus);
}

/* Univerzális options konténer */
.tg-options-list {
  padding: var(--tg-spacer-2);
  margin-bottom: var(--tg-spacer-4);
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-1);
}

/* Animation for smooth transitions */
.tg-dropdown__dropdown {
  animation: fadeIn var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
}

.tg-dropdown__dropdown--closing {
  animation: fadeOut var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
  pointer-events: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Focus and accessibility improvements */
/* .tg-dropdown__trigger:focus-visible,
.tg-dropdown__btn:focus-visible,
.tg-dropdown__search-input:focus-visible {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: 2px;
} */

/* Enhanced search component tabs for new sections */
.tg-dropdown__tab[data-tab="cities"] {
  background: linear-gradient(
    135deg,
    var(--tg-bg-info-light) 0%,
    var(--tg-bg-primary-light) 100%
  );
}

.tg-dropdown__tab[data-tab="all"] {
  background: linear-gradient(
    135deg,
    var(--tg-bg-neutral-light) 0%,
    var(--tg-bg-secondary-light) 100%
  );
}

.tg-dropdown__tab[data-tab="cities"]:hover,
.tg-dropdown__tab[data-tab="all"]:hover {
  opacity: 0.8;
}

/* Mobil reszponzivitás */
@media (max-width: 767.98px) {
  .tg-dropdown__header {
    display: flex;
  }

  .tg-dropdown__dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tg-z-index-modal);
    max-height: none;
    border-radius: 0;
    padding: var(--tg-spacer-0);
  }

  .tg-dropdown__footer {
    position: sticky;
    bottom: 0;
    background-color: var(--tg-bg-surface);
    padding-bottom: var(--tg-spacer-4);
    margin-bottom: calc(-1 * var(--tg-spacer-4));
  }
}

@media (max-width: 479.98px) {
  .tg-dropdown__trigger {
    padding: var(--tg-spacer-3);
  }

  .tg-dropdown__icon {
    font-size: var(--tg-font-size-lg);
  }

  .tg-dropdown__title {
    font-size: var(--tg-font-size-xs);
  }
}


/* tg-tabs.css */
/**
 * TravelGate Tabs Component
 * Újra felhasználható tabozós navigáció
 */

/* ===================================================================================== */
/* TABS BASE - TABS ALAPOK */
/* ===================================================================================== */

.tg-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ===================================================================================== */
/* TABS NAVIGATION - TABS NAVIGÁCIÓ */
/* ===================================================================================== */

.tg-tabs__nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid var(--tg-border-color);
  background-color: var(--tg-bg-surface);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.tg-tabs__nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.tg-tabs__nav-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.tg-tabs__nav-item {
  display: flex;
  margin: 0;
  padding: 0;
}

.tg-tabs__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tg-spacer-4) var(--tg-spacer-6);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: var(--tg-transition-colors);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  white-space: nowrap;
  min-height: 48px;
  position: relative;
}

.tg-tabs__nav-link:hover {
  color: var(--tg-text-primary);
  background-color: var(--tg-bg-muted-light);
}

.tg-tabs__nav-link:focus-visible {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: -2px;
}

.tg-tabs__nav-link.active,
.tg-tabs__nav-link[aria-selected="true"] {
  color: var(--tg-text-primary);
  border-bottom-color: var(--tg-color-primary);
  background-color: transparent;
}

.tg-tabs__nav-link.active:hover {
  background-color: transparent;
}

/* Icon support in tabs */
.tg-tabs__nav-link svg {
  margin-right: var(--tg-spacer-2);
  flex-shrink: 0;
  pointer-events: none;
}

/* Badge support for notification counts */
.tg-tabs__nav-badge {
  margin-left: var(--tg-spacer-2);
  background-color: var(--tg-color-primary);
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-bold);
}

/* ===================================================================================== */
/* TABS CONTENT - TABS TARTALOM */
/* ===================================================================================== */

.tg-tabs__content {
  flex: 1;
  min-height: 200px;
}

.tg-tabs__panel {
  display: none;
  padding: var(--tg-spacer-6);
  animation: tabFadeIn var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
}

.tg-tabs__panel.active,
.tg-tabs__panel[aria-hidden="false"] {
  display: block;
}

/* Tab változás animáció */
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================================================== */
/* TABS VARIANTS - TABS VÁLTOZATOK */
/* ===================================================================================== */

/* Pill style tabs */
.tg-tabs--pills .tg-tabs__nav {
  border-bottom: none;
  background-color: transparent;
  gap: var(--tg-spacer-2);
  padding: var(--tg-spacer-2);
}

.tg-tabs--pills .tg-tabs__nav-link {
  border-radius: var(--tg-border-radius-pill);
  border-bottom: none;
  background-color: var(--tg-bg-muted);
  color: var(--tg-text-muted);
}

.tg-tabs--pills .tg-tabs__nav-link:hover {
  background-color: var(--tg-bg-muted-dark);
}

.tg-tabs--pills .tg-tabs__nav-link.active,
.tg-tabs--pills .tg-tabs__nav-link[aria-selected="true"] {
  background-color: var(--tg-color-primary);
  color: white;
}

/* Vertical tabs */
.tg-tabs--vertical {
  flex-direction: row;
}

.tg-tabs--vertical .tg-tabs__nav {
  flex-direction: column;
  border-bottom: none;
  border-right: 1px solid var(--tg-border-color);
  min-width: 200px;
  overflow-x: visible;
  overflow-y: auto;
}

.tg-tabs--vertical .tg-tabs__nav-list {
  flex-direction: column;
}

.tg-tabs--vertical .tg-tabs__nav-link {
  justify-content: flex-start;
  border-bottom: none;
  border-right: 2px solid transparent;
  text-align: left;
}

.tg-tabs--vertical .tg-tabs__nav-link.active,
.tg-tabs--vertical .tg-tabs__nav-link[aria-selected="true"] {
  border-right-color: var(--tg-color-primary);
  border-bottom-color: transparent;
}

/* Justified tabs - egyenlően elosztott */
.tg-tabs--justified .tg-tabs__nav-item {
  flex: 1;
}

.tg-tabs--justified .tg-tabs__nav-link {
  justify-content: center;
  width: 100%;
}

/* ===================================================================================== */
/* RESPONSIVE DESIGN - RESZPONZÍV DESIGN */
/* ===================================================================================== */

@media (max-width: 767.98px) {
  .tg-tabs__nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tg-tabs__nav-link {
    padding: var(--tg-spacer-3) var(--tg-spacer-4);
    font-size: var(--tg-font-size-sm);
    min-width: 120px;
  }

  .tg-tabs__panel {
    padding: var(--tg-spacer-4);
  }

  /* Vertical tabs mobilon horizontálissá válnak */
  .tg-tabs--vertical {
    flex-direction: column;
  }

  .tg-tabs--vertical .tg-tabs__nav {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--tg-border-color);
    min-width: auto;
    overflow-x: auto;
  }

  .tg-tabs--vertical .tg-tabs__nav-list {
    flex-direction: row;
  }

  .tg-tabs--vertical .tg-tabs__nav-link {
    border-right: none;
    border-bottom: 2px solid transparent;
    justify-content: center;
  }

  .tg-tabs--vertical .tg-tabs__nav-link.active,
  .tg-tabs--vertical .tg-tabs__nav-link[aria-selected="true"] {
    border-right-color: transparent;
    border-bottom-color: var(--tg-color-primary);
  }
}

@media (max-width: 575.98px) {
  .tg-tabs__nav-link {
    padding: var(--tg-spacer-3);
    font-size: var(--tg-font-size-xs);
    min-width: 100px;
  }

  .tg-tabs__nav-link svg {
    display: none; /* Ikont elrejtjük kis képernyőn */
  }

  .tg-tabs__panel {
    padding: var(--tg-spacer-3);
  }
}

/* ===================================================================================== */
/* PRINT STYLES - NYOMTATÁSI STÍLUSOK */
/* ===================================================================================== */

@media print {
  .tg-tabs__nav {
    display: none;
  }

  .tg-tabs__panel {
    display: block !important;
    padding: 0;
    page-break-inside: avoid;
  }

  .tg-tabs__panel:not(:first-child) {
    page-break-before: always;
  }
}

/* ===================================================================================== */
/* ACCESSIBILITY - AKADÁLYMENTESÍTÉS */
/* ===================================================================================== */

/* Screen reader only content */
.tg-tabs__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tg-tabs__nav-link.active,
  .tg-tabs__nav-link[aria-selected="true"] {
    border-bottom-width: 3px;
  }

  .tg-tabs--vertical .tg-tabs__nav-link.active,
  .tg-tabs--vertical .tg-tabs__nav-link[aria-selected="true"] {
    border-right-width: 3px;
    border-bottom-width: 2px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tg-tabs__panel,
  .tg-tabs__nav-link {
    animation: none;
    transition: none;
  }
}


/* tg-modal.css */
/* ===================================================================================== */
/* MODAL - SAJÁT IMPLEMENTÁCIÓ */
/* ===================================================================================== */

.tg-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}

.tg-modal.tg-modal--open {
  visibility: visible;
  opacity: 1;
}

.tg-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(0px);
}

.tg-modal__container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}

.tg-modal__content {
  width: calc(100vw - var(--tg-spacer-20));
  height: calc(100vh - var(--tg-spacer-20));
  background: var(--tg-bg-body);
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  will-change: transform;
  position: relative;
  z-index: 1;
  transform: translateY(100%);
  transition: transform 0.4s ease-in-out;
  border-radius: var(--tg-border-radius-lg);
}

.tg-modal--open .tg-modal__content {
  transform: translateY(0);
}

.tg-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tg-spacer-0);
  border-bottom: 1px solid var(--tg-border-color);
  background: var(--tg-bg-surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tg-modal__header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--tg-container-2xl);
  margin: 0 auto;
  width: 100%;
  padding: var(--tg-spacer-2) var(--tg-spacer-4);
}

.tg-modal__title {
  font-size: var(--tg-font-size-xl);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-primary);
  margin: 0;
}

.tg-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--tg-radius-md);
  background: transparent;
  color: var(--tg-text-secondary);
  cursor: pointer;
  transition: var(--tg-transition-colors);
}

.tg-modal__close:hover {
  background: var(--tg-bg-secondary);
  color: var(--tg-text-primary);
}

.tg-modal__close:focus-visible {
  outline: 2px solid var(--tg-color-primary);
  outline-offset: 2px;
}

.tg-modal__close svg {
  width: 20px;
  height: 20px;
}

/* Modal tartalom görgethetősége */
.tg-modal .booking-process {
  flex: 1;
  overflow-y: auto;
}

/* Responsive kiigazítások */
@media (min-width: 1200px) {
  .tg-modal__content {
    /* width: 100%;
    height: auto; */
    max-height: 100vh;
  }
}

/* Mobil eszközökön teljes képernyős */
@media (max-width: 767.98px) {
  .tg-modal__header {
    padding: var(--tg-spacer-3) var(--tg-spacer-4);
  }

  .tg-modal__title {
    font-size: var(--tg-font-size-lg);
  }
}

/* Body scroll lock amikor modal nyitva */
.tg-modal-open {
  overflow: hidden !important;
  margin-right: 15px;
}

/* Biztosítjuk, hogy a Lightpick fixed pozicionálású legyen modalban */
.tg-modal .lightpick {
  position: fixed !important;
  z-index: 99999;
}


/* flag-icons.css */
.fib,
.fi {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}

.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
}
.fi:before {
  content: " ";
}
.fi.fis {
  width: 1em;
}

.fi-xx {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/xx.svg);
}
.fi-xx.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/xx.svg);
}

.fi-ad {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ad.svg);
}
.fi-ad.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ad.svg);
}

.fi-ae {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ae.svg);
}
.fi-ae.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ae.svg);
}

.fi-af {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/af.svg);
}
.fi-af.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/af.svg);
}

.fi-ag {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ag.svg);
}
.fi-ag.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ag.svg);
}

.fi-ai {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ai.svg);
}
.fi-ai.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ai.svg);
}

.fi-al {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/al.svg);
}
.fi-al.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/al.svg);
}

.fi-am {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/am.svg);
}
.fi-am.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/am.svg);
}

.fi-ao {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ao.svg);
}
.fi-ao.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ao.svg);
}

.fi-aq {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/aq.svg);
}
.fi-aq.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/aq.svg);
}

.fi-ar {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ar.svg);
}
.fi-ar.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ar.svg);
}

.fi-as {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/as.svg);
}
.fi-as.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/as.svg);
}

.fi-at {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/at.svg);
}
.fi-at.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/at.svg);
}

.fi-au {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/au.svg);
}
.fi-au.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/au.svg);
}

.fi-aw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/aw.svg);
}
.fi-aw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/aw.svg);
}

.fi-ax {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ax.svg);
}
.fi-ax.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ax.svg);
}

.fi-az {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/az.svg);
}
.fi-az.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/az.svg);
}

.fi-ba {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ba.svg);
}
.fi-ba.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ba.svg);
}

.fi-bb {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bb.svg);
}
.fi-bb.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bb.svg);
}

.fi-bd {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bd.svg);
}
.fi-bd.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bd.svg);
}

.fi-be {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/be.svg);
}
.fi-be.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/be.svg);
}

.fi-bf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bf.svg);
}
.fi-bf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bf.svg);
}

.fi-bg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bg.svg);
}
.fi-bg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bg.svg);
}

.fi-bh {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bh.svg);
}
.fi-bh.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bh.svg);
}

.fi-bi {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bi.svg);
}
.fi-bi.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bi.svg);
}

.fi-bj {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bj.svg);
}
.fi-bj.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bj.svg);
}

.fi-bl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bl.svg);
}
.fi-bl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bl.svg);
}

.fi-bm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bm.svg);
}
.fi-bm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bm.svg);
}

.fi-bn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bn.svg);
}
.fi-bn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bn.svg);
}

.fi-bo {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bo.svg);
}
.fi-bo.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bo.svg);
}

.fi-bq {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bq.svg);
}
.fi-bq.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bq.svg);
}

.fi-br {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/br.svg);
}
.fi-br.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/br.svg);
}

.fi-bs {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bs.svg);
}
.fi-bs.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bs.svg);
}

.fi-bt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bt.svg);
}
.fi-bt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bt.svg);
}

.fi-bv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bv.svg);
}
.fi-bv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bv.svg);
}

.fi-bw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bw.svg);
}
.fi-bw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bw.svg);
}

.fi-by {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/by.svg);
}
.fi-by.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/by.svg);
}

.fi-bz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/bz.svg);
}
.fi-bz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/bz.svg);
}

.fi-ca {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ca.svg);
}
.fi-ca.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ca.svg);
}

.fi-cc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cc.svg);
}
.fi-cc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cc.svg);
}

.fi-cd {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cd.svg);
}
.fi-cd.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cd.svg);
}

.fi-cf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cf.svg);
}
.fi-cf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cf.svg);
}

.fi-cg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cg.svg);
}
.fi-cg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cg.svg);
}

.fi-ch {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ch.svg);
}
.fi-ch.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ch.svg);
}

.fi-ci {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ci.svg);
}
.fi-ci.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ci.svg);
}

.fi-ck {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ck.svg);
}
.fi-ck.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ck.svg);
}

.fi-cl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cl.svg);
}
.fi-cl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cl.svg);
}

.fi-cm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cm.svg);
}
.fi-cm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cm.svg);
}

.fi-cn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cn.svg);
}
.fi-cn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cn.svg);
}

.fi-co {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/co.svg);
}
.fi-co.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/co.svg);
}

.fi-cr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cr.svg);
}
.fi-cr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cr.svg);
}

.fi-cu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cu.svg);
}
.fi-cu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cu.svg);
}

.fi-cv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cv.svg);
}
.fi-cv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cv.svg);
}

.fi-cw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cw.svg);
}
.fi-cw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cw.svg);
}

.fi-cx {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cx.svg);
}
.fi-cx.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cx.svg);
}

.fi-cy {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cy.svg);
}
.fi-cy.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cy.svg);
}

.fi-cz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cz.svg);
}
.fi-cz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cz.svg);
}

.fi-de {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/de.svg);
}
.fi-de.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/de.svg);
}

.fi-dj {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/dj.svg);
}
.fi-dj.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/dj.svg);
}

.fi-dk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/dk.svg);
}
.fi-dk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/dk.svg);
}

.fi-dm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/dm.svg);
}
.fi-dm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/dm.svg);
}

.fi-do {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/do.svg);
}
.fi-do.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/do.svg);
}

.fi-dz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/dz.svg);
}
.fi-dz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/dz.svg);
}

.fi-ec {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ec.svg);
}
.fi-ec.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ec.svg);
}

.fi-ee {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ee.svg);
}
.fi-ee.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ee.svg);
}

.fi-eg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/eg.svg);
}
.fi-eg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/eg.svg);
}

.fi-eh {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/eh.svg);
}
.fi-eh.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/eh.svg);
}

.fi-er {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/er.svg);
}
.fi-er.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/er.svg);
}

.fi-es {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/es.svg);
}
.fi-es.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/es.svg);
}

.fi-et {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/et.svg);
}
.fi-et.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/et.svg);
}

.fi-fi {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/fi.svg);
}
.fi-fi.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/fi.svg);
}

.fi-fj {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/fj.svg);
}
.fi-fj.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/fj.svg);
}

.fi-fk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/fk.svg);
}
.fi-fk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/fk.svg);
}

.fi-fm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/fm.svg);
}
.fi-fm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/fm.svg);
}

.fi-fo {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/fo.svg);
}
.fi-fo.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/fo.svg);
}

.fi-fr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/fr.svg);
}
.fi-fr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/fr.svg);
}

.fi-ga {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ga.svg);
}
.fi-ga.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ga.svg);
}

.fi-gb {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gb.svg);
}
.fi-gb.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gb.svg);
}

.fi-gd {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gd.svg);
}
.fi-gd.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gd.svg);
}

.fi-ge {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ge.svg);
}
.fi-ge.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ge.svg);
}

.fi-gf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gf.svg);
}
.fi-gf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gf.svg);
}

.fi-gg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gg.svg);
}
.fi-gg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gg.svg);
}

.fi-gh {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gh.svg);
}
.fi-gh.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gh.svg);
}

.fi-gi {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gi.svg);
}
.fi-gi.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gi.svg);
}

.fi-gl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gl.svg);
}
.fi-gl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gl.svg);
}

.fi-gm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gm.svg);
}
.fi-gm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gm.svg);
}

.fi-gn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gn.svg);
}
.fi-gn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gn.svg);
}

.fi-gp {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gp.svg);
}
.fi-gp.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gp.svg);
}

.fi-gq {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gq.svg);
}
.fi-gq.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gq.svg);
}

.fi-gr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gr.svg);
}
.fi-gr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gr.svg);
}

.fi-gs {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gs.svg);
}
.fi-gs.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gs.svg);
}

.fi-gt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gt.svg);
}
.fi-gt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gt.svg);
}

.fi-gu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gu.svg);
}
.fi-gu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gu.svg);
}

.fi-gw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gw.svg);
}
.fi-gw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gw.svg);
}

.fi-gy {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gy.svg);
}
.fi-gy.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gy.svg);
}

.fi-hk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/hk.svg);
}
.fi-hk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/hk.svg);
}

.fi-hm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/hm.svg);
}
.fi-hm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/hm.svg);
}

.fi-hn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/hn.svg);
}
.fi-hn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/hn.svg);
}

.fi-hr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/hr.svg);
}
.fi-hr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/hr.svg);
}

.fi-ht {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ht.svg);
}
.fi-ht.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ht.svg);
}

.fi-hu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/hu.svg);
}
.fi-hu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/hu.svg);
}

.fi-id {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/id.svg);
}
.fi-id.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/id.svg);
}

.fi-ie {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ie.svg);
}
.fi-ie.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ie.svg);
}

.fi-il {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/il.svg);
}
.fi-il.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/il.svg);
}

.fi-im {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/im.svg);
}
.fi-im.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/im.svg);
}

.fi-in {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/in.svg);
}
.fi-in.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/in.svg);
}

.fi-io {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/io.svg);
}
.fi-io.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/io.svg);
}

.fi-iq {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/iq.svg);
}
.fi-iq.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/iq.svg);
}

.fi-ir {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ir.svg);
}
.fi-ir.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ir.svg);
}

.fi-is {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/is.svg);
}
.fi-is.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/is.svg);
}

.fi-it {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/it.svg);
}
.fi-it.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/it.svg);
}

.fi-je {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/je.svg);
}
.fi-je.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/je.svg);
}

.fi-jm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/jm.svg);
}
.fi-jm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/jm.svg);
}

.fi-jo {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/jo.svg);
}
.fi-jo.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/jo.svg);
}

.fi-jp {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/jp.svg);
}
.fi-jp.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/jp.svg);
}

.fi-ke {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ke.svg);
}
.fi-ke.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ke.svg);
}

.fi-kg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kg.svg);
}
.fi-kg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kg.svg);
}

.fi-kh {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kh.svg);
}
.fi-kh.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kh.svg);
}

.fi-ki {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ki.svg);
}
.fi-ki.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ki.svg);
}

.fi-km {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/km.svg);
}
.fi-km.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/km.svg);
}

.fi-kn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kn.svg);
}
.fi-kn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kn.svg);
}

.fi-kp {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kp.svg);
}
.fi-kp.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kp.svg);
}

.fi-kr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kr.svg);
}
.fi-kr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kr.svg);
}

.fi-kw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kw.svg);
}
.fi-kw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kw.svg);
}

.fi-ky {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ky.svg);
}
.fi-ky.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ky.svg);
}

.fi-kz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/kz.svg);
}
.fi-kz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/kz.svg);
}

.fi-la {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/la.svg);
}
.fi-la.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/la.svg);
}

.fi-lb {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lb.svg);
}
.fi-lb.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lb.svg);
}

.fi-lc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lc.svg);
}
.fi-lc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lc.svg);
}

.fi-li {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/li.svg);
}
.fi-li.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/li.svg);
}

.fi-lk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lk.svg);
}
.fi-lk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lk.svg);
}

.fi-lr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lr.svg);
}
.fi-lr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lr.svg);
}

.fi-ls {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ls.svg);
}
.fi-ls.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ls.svg);
}

.fi-lt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lt.svg);
}
.fi-lt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lt.svg);
}

.fi-lu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lu.svg);
}
.fi-lu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lu.svg);
}

.fi-lv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/lv.svg);
}
.fi-lv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/lv.svg);
}

.fi-ly {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ly.svg);
}
.fi-ly.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ly.svg);
}

.fi-ma {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ma.svg);
}
.fi-ma.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ma.svg);
}

.fi-mc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mc.svg);
}
.fi-mc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mc.svg);
}

.fi-md {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/md.svg);
}
.fi-md.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/md.svg);
}

.fi-me {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/me.svg);
}
.fi-me.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/me.svg);
}

.fi-mf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mf.svg);
}
.fi-mf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mf.svg);
}

.fi-mg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mg.svg);
}
.fi-mg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mg.svg);
}

.fi-mh {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mh.svg);
}
.fi-mh.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mh.svg);
}

.fi-mk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mk.svg);
}
.fi-mk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mk.svg);
}

.fi-ml {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ml.svg);
}
.fi-ml.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ml.svg);
}

.fi-mm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mm.svg);
}
.fi-mm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mm.svg);
}

.fi-mn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mn.svg);
}
.fi-mn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mn.svg);
}

.fi-mo {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mo.svg);
}
.fi-mo.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mo.svg);
}

.fi-mp {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mp.svg);
}
.fi-mp.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mp.svg);
}

.fi-mq {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mq.svg);
}
.fi-mq.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mq.svg);
}

.fi-mr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mr.svg);
}
.fi-mr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mr.svg);
}

.fi-ms {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ms.svg);
}
.fi-ms.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ms.svg);
}

.fi-mt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mt.svg);
}
.fi-mt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mt.svg);
}

.fi-mu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mu.svg);
}
.fi-mu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mu.svg);
}

.fi-mv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mv.svg);
}
.fi-mv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mv.svg);
}

.fi-mw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mw.svg);
}
.fi-mw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mw.svg);
}

.fi-mx {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mx.svg);
}
.fi-mx.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mx.svg);
}

.fi-my {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/my.svg);
}
.fi-my.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/my.svg);
}

.fi-mz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/mz.svg);
}
.fi-mz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/mz.svg);
}

.fi-na {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/na.svg);
}
.fi-na.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/na.svg);
}

.fi-nc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/nc.svg);
}
.fi-nc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/nc.svg);
}

.fi-ne {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ne.svg);
}
.fi-ne.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ne.svg);
}

.fi-nf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/nf.svg);
}
.fi-nf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/nf.svg);
}

.fi-ng {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ng.svg);
}
.fi-ng.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ng.svg);
}

.fi-ni {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ni.svg);
}
.fi-ni.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ni.svg);
}

.fi-nl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/nl.svg);
}
.fi-nl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/nl.svg);
}

.fi-no {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/no.svg);
}
.fi-no.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/no.svg);
}

.fi-np {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/np.svg);
}
.fi-np.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/np.svg);
}

.fi-nr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/nr.svg);
}
.fi-nr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/nr.svg);
}

.fi-nu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/nu.svg);
}
.fi-nu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/nu.svg);
}

.fi-nz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/nz.svg);
}
.fi-nz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/nz.svg);
}

.fi-om {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/om.svg);
}
.fi-om.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/om.svg);
}

.fi-pa {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pa.svg);
}
.fi-pa.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pa.svg);
}

.fi-pe {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pe.svg);
}
.fi-pe.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pe.svg);
}

.fi-pf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pf.svg);
}
.fi-pf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pf.svg);
}

.fi-pg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pg.svg);
}
.fi-pg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pg.svg);
}

.fi-ph {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ph.svg);
}
.fi-ph.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ph.svg);
}

.fi-pk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pk.svg);
}
.fi-pk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pk.svg);
}

.fi-pl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pl.svg);
}
.fi-pl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pl.svg);
}

.fi-pm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pm.svg);
}
.fi-pm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pm.svg);
}

.fi-pn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pn.svg);
}
.fi-pn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pn.svg);
}

.fi-pr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pr.svg);
}
.fi-pr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pr.svg);
}

.fi-ps {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ps.svg);
}
.fi-ps.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ps.svg);
}

.fi-pt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pt.svg);
}
.fi-pt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pt.svg);
}

.fi-pw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pw.svg);
}
.fi-pw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pw.svg);
}

.fi-py {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/py.svg);
}
.fi-py.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/py.svg);
}

.fi-qa {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/qa.svg);
}
.fi-qa.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/qa.svg);
}

.fi-re {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/re.svg);
}
.fi-re.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/re.svg);
}

.fi-ro {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ro.svg);
}
.fi-ro.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ro.svg);
}

.fi-rs {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/rs.svg);
}
.fi-rs.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/rs.svg);
}

.fi-ru {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ru.svg);
}
.fi-ru.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ru.svg);
}

.fi-rw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/rw.svg);
}
.fi-rw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/rw.svg);
}

.fi-sa {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sa.svg);
}
.fi-sa.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sa.svg);
}

.fi-sb {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sb.svg);
}
.fi-sb.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sb.svg);
}

.fi-sc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sc.svg);
}
.fi-sc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sc.svg);
}

.fi-sd {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sd.svg);
}
.fi-sd.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sd.svg);
}

.fi-se {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/se.svg);
}
.fi-se.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/se.svg);
}

.fi-sg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sg.svg);
}
.fi-sg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sg.svg);
}

.fi-sh {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sh.svg);
}
.fi-sh.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sh.svg);
}

.fi-si {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/si.svg);
}
.fi-si.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/si.svg);
}

.fi-sj {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sj.svg);
}
.fi-sj.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sj.svg);
}

.fi-sk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sk.svg);
}
.fi-sk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sk.svg);
}

.fi-sl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sl.svg);
}
.fi-sl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sl.svg);
}

.fi-sm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sm.svg);
}
.fi-sm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sm.svg);
}

.fi-sn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sn.svg);
}
.fi-sn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sn.svg);
}

.fi-so {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/so.svg);
}
.fi-so.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/so.svg);
}

.fi-sr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sr.svg);
}
.fi-sr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sr.svg);
}

.fi-ss {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ss.svg);
}
.fi-ss.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ss.svg);
}

.fi-st {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/st.svg);
}
.fi-st.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/st.svg);
}

.fi-sv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sv.svg);
}
.fi-sv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sv.svg);
}

.fi-sx {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sx.svg);
}
.fi-sx.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sx.svg);
}

.fi-sy {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sy.svg);
}
.fi-sy.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sy.svg);
}

.fi-sz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sz.svg);
}
.fi-sz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sz.svg);
}

.fi-tc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tc.svg);
}
.fi-tc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tc.svg);
}

.fi-td {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/td.svg);
}
.fi-td.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/td.svg);
}

.fi-tf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tf.svg);
}
.fi-tf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tf.svg);
}

.fi-tg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tg.svg);
}
.fi-tg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tg.svg);
}

.fi-th {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/th.svg);
}
.fi-th.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/th.svg);
}

.fi-tj {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tj.svg);
}
.fi-tj.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tj.svg);
}

.fi-tk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tk.svg);
}
.fi-tk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tk.svg);
}

.fi-tl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tl.svg);
}
.fi-tl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tl.svg);
}

.fi-tm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tm.svg);
}
.fi-tm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tm.svg);
}

.fi-tn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tn.svg);
}
.fi-tn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tn.svg);
}

.fi-to {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/to.svg);
}
.fi-to.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/to.svg);
}

.fi-tr {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tr.svg);
}
.fi-tr.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tr.svg);
}

.fi-tt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tt.svg);
}
.fi-tt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tt.svg);
}

.fi-tv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tv.svg);
}
.fi-tv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tv.svg);
}

.fi-tw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tw.svg);
}
.fi-tw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tw.svg);
}

.fi-tz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/tz.svg);
}
.fi-tz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/tz.svg);
}

.fi-ua {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ua.svg);
}
.fi-ua.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ua.svg);
}

.fi-ug {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ug.svg);
}
.fi-ug.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ug.svg);
}

.fi-um {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/um.svg);
}
.fi-um.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/um.svg);
}

.fi-us {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/us.svg);
}
.fi-us.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/us.svg);
}

.fi-uy {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/uy.svg);
}
.fi-uy.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/uy.svg);
}

.fi-uz {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/uz.svg);
}
.fi-uz.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/uz.svg);
}

.fi-va {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/va.svg);
}
.fi-va.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/va.svg);
}

.fi-vc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/vc.svg);
}
.fi-vc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/vc.svg);
}

.fi-ve {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ve.svg);
}
.fi-ve.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ve.svg);
}

.fi-vg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/vg.svg);
}
.fi-vg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/vg.svg);
}

.fi-vi {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/vi.svg);
}
.fi-vi.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/vi.svg);
}

.fi-vn {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/vn.svg);
}
.fi-vn.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/vn.svg);
}

.fi-vu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/vu.svg);
}
.fi-vu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/vu.svg);
}

.fi-wf {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/wf.svg);
}
.fi-wf.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/wf.svg);
}

.fi-ws {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ws.svg);
}
.fi-ws.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ws.svg);
}

.fi-ye {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ye.svg);
}
.fi-ye.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ye.svg);
}

.fi-yt {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/yt.svg);
}
.fi-yt.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/yt.svg);
}

.fi-za {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/za.svg);
}
.fi-za.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/za.svg);
}

.fi-zm {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/zm.svg);
}
.fi-zm.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/zm.svg);
}

.fi-zw {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/zw.svg);
}
.fi-zw.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/zw.svg);
}

.fi-arab {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/arab.svg);
}
.fi-arab.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/arab.svg);
}

.fi-asean {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/asean.svg);
}
.fi-asean.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/asean.svg);
}

.fi-cefta {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cefta.svg);
}
.fi-cefta.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cefta.svg);
}

.fi-cp {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/cp.svg);
}
.fi-cp.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/cp.svg);
}

.fi-dg {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/dg.svg);
}
.fi-dg.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/dg.svg);
}

.fi-eac {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/eac.svg);
}
.fi-eac.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/eac.svg);
}

.fi-es-ct {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/es-ct.svg);
}
.fi-es-ct.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/es-ct.svg);
}

.fi-es-ga {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/es-ga.svg);
}
.fi-es-ga.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/es-ga.svg);
}

.fi-es-pv {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/es-pv.svg);
}
.fi-es-pv.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/es-pv.svg);
}

.fi-eu {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/eu.svg);
}
.fi-eu.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/eu.svg);
}

.fi-gb-eng {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gb-eng.svg);
}
.fi-gb-eng.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gb-eng.svg);
}

.fi-gb-nir {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gb-nir.svg);
}
.fi-gb-nir.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gb-nir.svg);
}

.fi-gb-sct {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gb-sct.svg);
}
.fi-gb-sct.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gb-sct.svg);
}

.fi-gb-wls {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/gb-wls.svg);
}
.fi-gb-wls.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/gb-wls.svg);
}

.fi-ic {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/ic.svg);
}
.fi-ic.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/ic.svg);
}

.fi-pc {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/pc.svg);
}
.fi-pc.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/pc.svg);
}

.fi-sh-ac {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sh-ac.svg);
}
.fi-sh-ac.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sh-ac.svg);
}

.fi-sh-hl {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sh-hl.svg);
}
.fi-sh-hl.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sh-hl.svg);
}

.fi-sh-ta {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/sh-ta.svg);
}
.fi-sh-ta.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/sh-ta.svg);
}

.fi-un {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/un.svg);
}
.fi-un.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/un.svg);
}

.fi-xk {
  background-image: url(../../shared/vendor/flag-icons/flags/4x3/xk.svg);
}
.fi-xk.fis {
  background-image: url(../../shared/vendor/flag-icons/flags/1x1/xk.svg);
}


/* lightpick.css */
/* Lightpick - TravelGate Design System verzió */
/* Eredeti Lightpick CSS átírva TG változókkal */

.lightpick {
  padding: var(--tg-spacer-1, 4px);
  border-radius: var(--tg-border-radius-none, 0px);
  background-color: var(--tg-bg-surface, #fff);
  box-shadow: none;
  color: var(--tg-text-color, #000);
  font-family: var(
    --tg-font-family-primary,
    system-ui,
    Roboto,
    Helvetica,
    Arial,
    sans-serif
  );
  line-height: var(--tg-line-height-base, 1.5);
  border: none;
}

.lightpick--inlined {
  position: relative;
  display: inline-block;
}

.lightpick,
.lightpick *,
.lightpick::after,
.lightpick::before {
  box-sizing: border-box;
}

.lightpick.is-hidden {
  display: none;
}

.lightpick--1-columns {
  box-shadow: var(--tg-shadow-dropdown);
  border-radius: var(--tg-border-radius-card);
}

.lightpick__months {
  display: grid;
  background-color: var(--tg-bg-secondary, #f9fafb);
  grid-template-columns: auto;
  grid-gap: var(--tg-spacer-1, 4px);
}

.lightpick--2-columns .lightpick__months {
  grid-template-columns: auto auto;
}

.lightpick--3-columns .lightpick__months {
  grid-template-columns: auto auto auto;
}

.lightpick--4-columns .lightpick__months {
  grid-template-columns: auto auto auto auto;
}

.lightpick--5-columns .lightpick__months {
  grid-template-columns: auto auto auto auto auto;
}

.lightpick__month {
  padding: var(--tg-spacer-1, 4px);
  width: 288px;
  background-color: var(--tg-bg-surface, #fff);
}

.lightpick__month-title-bar {
  display: flex;
  margin-bottom: var(--tg-spacer-1, 4px);
  justify-content: space-between;
  align-items: center;
  background: inherit !important;
}

.lightpick__month-title {
  margin-top: var(--tg-spacer-0, 4px);
  margin-bottom: var(--tg-spacer-0, 4px);
  margin-left: var(--tg-spacer-0, 4px);
  font-size: var(--tg-font-size-lg, 18px);
  font-weight: var(--tg-font-weight-semibold, 600);
  line-height: var(--tg-line-height-base, 1.5);
  cursor: default;
  padding: var(--tg-spacer-0, 12px);
  border-radius: var(--tg-border-radius-base, 6px);
  color: var(--tg-color-primary, #2563eb);
  background-color: transparent;
}

.lightpick__month-title > .lightpick__select {
  border: none;
  outline: none;
  /* -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none; */
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  cursor: pointer;
  padding: var(--tg-spacer-3, 12px);
  background-color: var(--tg-bg-primary-light, #eff6ff);
  direction: ltr;
  transition: all var(--tg-transition-duration-300)
    var(--tg-transition-timing-ease-in-out);
}

.lightpick__month-title > .lightpick__select:hover {
  background-color: var(--tg-primary-100, #e0e7ff);
}

.lightpick__month-title > .lightpick__select:disabled {
  color: var(--tg-text-disabled, #9ca3af);
}

.lightpick__month-title > .lightpick__select-months {
  font-weight: var(--tg-font-weight-bold, 700);
  font-size: 1em;
  margin-right: var(--tg-spacer-1, 4px);
}

.lightpick__toolbar {
  display: flex;
  text-align: right;
  justify-content: flex-end;
}

.lightpick__previous-action,
.lightpick__next-action,
.lightpick__close-action {
  display: flex;
  margin-left: var(--tg-spacer-2, 8px);
  width: 2rem;
  height: 2rem;
  outline: none;
  border: 1px solid var(--tg-border-color, #e5e7eb);
  border-radius: var(--tg-border-radius-full, 50%);
  background-color: var(--tg-bg-neutral-light, #f3f4f6);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: var(--tg-transition-colors, all 0.2s ease);
  color: var(--tg-text-color, #374151);
}

.lightpick__previous-action:hover,
.lightpick__next-action:hover,
.lightpick__close-action:hover {
  background-color: var(--tg-color-primary, #2563eb);
  color: var(--tg-fg-on-color-primary, #ffffff);
}

.lightpick__previous-action,
.lightpick__next-action {
  font-size: var(--tg-font-size-sm, 14px);
}

.lightpick__close-action {
  font-size: var(--tg-font-size-lg, 18px);
}

.lightpick__previous-action:active,
.lightpick__next-action:active,
.lightpick__close-action:active {
  color: inherit;
}

.lightpick__days-of-the-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: var(--tg-bg-secondary, #f9fafb);
}

.lightpick__day-of-the-week {
  display: flex;
  font-size: var(--tg-font-size-xs, 12px);
  font-weight: var(--tg-font-weight-medium, 500);
  justify-content: center;
  align-items: center;
  color: var(--tg-text-muted, #6b7280);
  text-transform: uppercase;
  padding: var(--tg-spacer-2, 8px);
}

.lightpick__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.lightpick__day {
  display: flex;
  height: 40px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  font-size: var(--tg-font-size-sm, 14px);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--tg-text-color, #374151);
  font-weight: var(--tg-font-weight-normal, 400);
  transition: var(--tg-transition-colors, all 0.2s ease);
  border-radius: var(--tg-border-radius-base, 6px);
  margin: 1px;
}

.lightpick__day:not(.is-disabled):hover {
  background-color: var(--tg-bg-primary-light, #eff6ff);
  color: var(--tg-fg-on-bg-primary-light, #1d4ed8);
  background-image: none;
}

.lightpick__day.is-today {
  background-color: var(--tg-bg-info-light, #dbeafe);
  color: var(--tg-fg-on-bg-info-light, #1e40af);
  font-weight: var(--tg-font-weight-semibold, 600);
  background-image: none;
}

.lightpick__day.is-disabled {
  opacity: 0.38;
  pointer-events: none;
  color: var(--tg-text-disabled, #9ca3af);
  background-color: var(--tg-bg-disabled, #f9fafb);
  cursor: not-allowed;
}

.lightpick__day.disabled-tooltip {
  pointer-events: auto;
}

.lightpick__day.is-disabled.is-forward-selected {
  opacity: 1;
}

.lightpick__day.is-disabled.is-forward-selected:not(.is-start-date) {
  background-color: var(--tg-bg-primary, rgba(37, 99, 235, 0.1));
  background-image: none;
}

.lightpick__day.is-previous-month,
.lightpick__day.is-next-month {
  opacity: 0.38;
}

.lightpick__day.lightpick__day.is-in-range:not(.is-disabled) {
  opacity: 1;
}

.lightpick__day.is-in-range {
  border-radius: 0;
  background-color: var(--tg-bg-primary, rgba(37, 99, 235, 0.1));
  color: var(--tg-fg-on-bg-primary, #1d4ed8);
  background-image: none;
}

.lightpick__day.is-in-range:hover {
  background-color: var(--tg-bg-primary-light, #eff6ff);
  background-image: none;
}

.lightpick__day.is-start-date.is-in-range,
.lightpick__day.is-end-date.is-in-range.is-flipped {
  border-top-left-radius: 50%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 50%;
  background-color: var(--tg-color-primary, #2563eb);
  color: var(--tg-fg-on-color-primary, #ffffff);
  background-image: none;
}

.lightpick__day.is-end-date.is-in-range,
.lightpick__day.is-start-date.is-in-range.is-flipped {
  border-top-left-radius: 0;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
  background-color: var(--tg-color-primary, #2563eb);
  color: var(--tg-fg-on-color-primary, #ffffff);
  background-image: none;
}

.lightpick__day.is-start-date.is-end-date {
  background-color: var(--tg-color-primary, #2563eb);
  color: var(--tg-fg-on-color-primary, #ffffff);
  border-radius: var(--tg-border-radius-full, 50%);
  background-image: none;
}

.lightpick__day.is-start-date,
.lightpick__day.is-end-date,
.lightpick__day.is-start-date:hover,
.lightpick__day.is-end-date:hover {
  background-color: var(--tg-color-primary, #2563eb);
  color: var(--tg-fg-on-color-primary, #ffffff);
  background-size: auto;
  background-position: center;
  font-weight: var(--tg-font-weight-bold, 700);
  background-image: none;
  border-radius: var(--tg-border-radius-full, 50%);
}

.lightpick__tooltip {
  position: absolute;
  margin-top: -4px;
  padding: var(--tg-spacer-1, 4px) var(--tg-spacer-2, 8px);
  border-radius: var(--tg-border-radius-base, 6px);
  background-color: var(--tg-bg-surface, #fff);
  box-shadow: var(--tg-shadow-tooltip, 0 4px 12px rgba(0, 0, 0, 0.15));
  white-space: nowrap;
  font-size: var(--tg-font-size-xs, 12px);
  pointer-events: none;
  color: var(--tg-text-color, #374151);
  border: 1px solid var(--tg-border-color, #e5e7eb);
}

.lightpick__tooltip::before {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 5px);
  border-top: 5px solid var(--tg-border-color, rgba(0, 0, 0, 0.12));
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: "";
}

.lightpick__tooltip::after {
  position: absolute;
  bottom: -4px;
  left: calc(50% - 4px);
  border-top: 4px solid var(--tg-bg-surface, #fff);
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
}

.lightpick__footer {
  display: flex;
  justify-content: space-between;
  padding: var(--tg-spacer-3, 12px);
  border-top: 1px solid var(--tg-border-color, #e5e7eb);
  background-color: var(--tg-bg-secondary, #f9fafb);
  gap: var(--tg-spacer-2, 8px);
}

.lightpick__reset-action,
.lightpick__apply-action {
  border-radius: var(--tg-border-radius-base, 6px);
  font-size: var(--tg-font-size-sm, 14px);
  border: none;
  padding: var(--tg-spacer-2, 8px) var(--tg-spacer-3, 12px);
  cursor: pointer;
  transition: var(--tg-transition-colors, all 0.2s ease);
  font-weight: var(--tg-font-weight-medium, 500);
}

.lightpick__reset-action {
  color: var(--tg-button-outline-secondary-color, #6b7280);
  background-color: var(--tg-button-outline-secondary-bg, transparent);
  border: 1px solid var(--tg-button-outline-secondary-border, #d1d5db);
}

.lightpick__reset-action:hover {
  background-color: var(--tg-button-outline-secondary-hover-bg, #f9fafb);
  color: var(--tg-button-outline-secondary-hover-color, #374151);
  border-color: var(--tg-button-outline-secondary-hover-border, #9ca3af);
}

.lightpick__apply-action {
  color: var(--tg-button-primary-color, #ffffff);
  background-color: var(--tg-button-primary-bg, #2563eb);
  border: 1px solid var(--tg-button-primary-border, #2563eb);
}

.lightpick__apply-action:hover {
  background-color: var(--tg-button-primary-hover-bg, #1d4ed8);
  color: var(--tg-button-primary-hover-color, #ffffff);
  border-color: var(--tg-button-primary-hover-border, #1d4ed8);
}

/* Responsive Design */
@media (max-width: 767.98px) {
  .lightpick__months {
    grid-template-columns: auto;
    grid-gap: var(--tg-spacer-2, 8px);
  }

  .lightpick__month {
    width: 100%;
    min-width: 280px;
  }

  .lightpick--2-columns .lightpick__months,
  .lightpick--3-columns .lightpick__months,
  .lightpick--4-columns .lightpick__months,
  .lightpick--5-columns .lightpick__months {
    grid-template-columns: auto;
  }
}

@media (max-width: 479.98px) {
  .lightpick {
    font-size: var(--tg-font-size-sm, 14px);
    padding: var(--tg-spacer-2, 8px);
  }

  .lightpick__day {
    height: 36px;
    font-size: var(--tg-font-size-xs, 12px);
  }

  .lightpick__month-title {
    font-size: var(--tg-font-size-base, 16px);
    padding: var(--tg-spacer-2, 8px);
  }

  .lightpick__day-of-the-week {
    padding: var(--tg-spacer-1, 4px);
    font-size: 10px;
  }
}


/* === Common Search CSS === */
/* search-widget-variables.css */
/**
 * Search Widget Specific CSS Variables
 * Ezek a változók épülnek a TravelGate alap változóira
 */

:root {
  /* Search Widget Base Variables */
  --sw-bg: var(--tg-bg-surface);
  --sw-border-radius: var(--tg-border-radius-card);
  --sw-padding: var(--tg-card-padding);
  --sw-gap: var(--tg-spacer-4);
  --sw-transition: var(--tg-transition-colors);
  --sw-shadow: var(--tg-shadow-card);
  --sw-border-color: var(--tg-border-light);

  /* Search Widget Field Variables */
  --sw-field-bg: var(--tg-bg-white);
  --sw-field-border: var(--tg-border-color);
  --sw-field-border-focus: var(--tg-border-focus);
  --sw-field-padding: var(--tg-spacer-3);
  --sw-field-gap: var(--tg-spacer-2);
  --sw-field-height: var(--tg-form-control-height);
  --sw-field-font-size: var(--tg-font-size-base);

  /* Search Widget Button Variables */
  --sw-btn-primary-bg: var(--tg-button-primary-bg);
  --sw-btn-primary-color: var(--tg-button-primary-color);
  --sw-btn-primary-border: var(--tg-button-primary-border);
  --sw-btn-primary-hover-bg: var(--tg-button-primary-hover-bg);
  --sw-btn-primary-hover-color: var(--tg-button-primary-hover-color);
  --sw-btn-primary-hover-border: var(--tg-button-primary-hover-border);
  --sw-btn-padding: var(--tg-button-md-padding-y) var(--tg-button-md-padding-x);
  --sw-btn-height: var(--tg-button-md-height);

  /* Search Widget Dropdown Variables */
  --sw-dropdown-bg: var(--tg-bg-surface);
  --sw-dropdown-border: var(--tg-border-color);
  --sw-dropdown-shadow: var(--tg-shadow-dropdown);
  --sw-dropdown-padding: var(--tg-spacer-3);
  --sw-dropdown-max-height: 400px;

  /* Search Widget Tab Variables */
  --sw-tab-bg: var(--tg-bg-surface);
  --sw-tab-active-bg: var(--tg-bg-primary);
  --sw-tab-active-color: var(--tg-fg-on-bg-primary);
  --sw-tab-hover-bg: var(--tg-bg-hover);
  --sw-tab-padding: var(--tg-spacer-2) var(--tg-spacer-3);

  /* Search Widget Responsive Variables */
  --sw-mobile-padding: var(--tg-spacer-4);
  --sw-mobile-gap: var(--tg-spacer-3);
  --sw-mobile-field-height: 48px;
}

/* Dark mode overrides (ha szükséges) */
@media (prefers-color-scheme: dark) {
  :root {
    --sw-bg: var(--tg-bg-surface-dark);
    --sw-field-bg: var(--tg-bg-surface-dark);
    --sw-dropdown-bg: var(--tg-bg-surface-dark);
  }
}


/* searchbox-base.css */
/* TravelGate Searchbox Alap CSS - TG Design System változókkal */

/* CSS változók */
:root {
  /* Szín leképezések */
  --bg-color: var(--tg-bg-surface);
  --text-color: var(--tg-fg-on-bg-color);
  --text-muted-color: var(--tg-text-muted);
  --primary-color: var(--tg-color-primary);
  --secondary-color: var(--tg-border-color);

  /* Elrendezés leképezések */
  --border-radius: var(--tg-border-radius-md);
  --transition: var(--tg-transition-colors);

  /* Árnyék leképezések */
  --box-shadow: var(--tg-shadow-card);
  --dropdown-shadow: var(--tg-shadow-dropdown);
}

/* Közös komponens alapok */
.search-component {
  position: relative;
}

.search-component__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  background-color: var(--tg-bg-surface);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  cursor: pointer;
  text-align: left;
  transition: var(--tg-transition-colors);
  min-height: var(--tg-input-height-md);
}

.search-component__trigger:hover {
  border-color: var(--tg-border-focus);
}

.search-component__trigger:focus-visible {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.search-component__icon {
  flex-shrink: 0;
  font-size: var(--tg-font-size-base);
  margin-right: var(--tg-spacer-2);
  color: var(--tg-text-muted);
}

.search-component__content {
  flex: 1;
  overflow: hidden;
}

.search-component__title {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  margin-bottom: var(--tg-spacer-0);
  color: var(--tg-text-color);
}

.search-component__selections {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--tg-spacer-1);
  height: 1.5rem;
}

.search-component__selections::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  flex: 1;
  background-image: linear-gradient(to left, var(--tg-bg-surface), transparent);
  width: 30px;
}

.search-component__placeholder {
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
}

.search-component__badge {
  display: flex;
  text-wrap: nowrap;
  align-items: center;
  background-color: var(--tg-bg-secondary);
  color: var(--tg-fg-on-bg-secondary);
  border-radius: var(--tg-badge-border-radius);
  padding: var(--tg-badge-padding-y) var(--tg-badge-padding-x);
  font-size: var(--tg-badge-font-size);
  font-weight: var(--tg-font-weight-medium);
  height: 1.5rem;
}

.search-component__badge--more {
  font-style: italic;
}

.search-component__arrow {
  flex-shrink: 0;
  margin-left: var(--tg-spacer-2);
  transition: transform var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in-out);
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
}

.search-component.open .search-component__arrow {
  transform: rotate(180deg);
}

/* Dropdown alapstílusok */
.search-component__dropdown {
  position: absolute;
  top: calc(100% + var(--tg-spacer-2));
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 800px;
  z-index: var(--tg-z-index-dropdown);
  background-color: var(--tg-bg-surface);
  border-radius: var(--tg-border-radius-lg);
  box-shadow: var(--tg-shadow-dropdown);
  padding: var(--tg-spacer-0);
  display: none;
  max-height: 540px;
  overflow-y: auto;
  border: 1px solid var(--tg-border-light);
}

.search-component.open .search-component__dropdown,
.search-component__dropdown.open {
  display: block;
  animation: fadeIn var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
}

.search-component__search {
  position: relative;
  padding: var(--tg-spacer-4);
}

.search-component__search-input {
  width: 100%;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
}

.search-component__search-input:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.search-component__tabs {
  display: flex;
  margin-bottom: var(--tg-spacer-4);
  border-bottom: 1px solid var(--tg-border-color);
}

.search-component__tab {
  padding: var(--tg-spacer-2) var(--tg-spacer-4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: var(--tg-font-weight-medium);
  transition: var(--tg-transition-colors);
  color: var(--tg-text-color);
}

.search-component__tab:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
}

.search-component__tab--active {
  border-bottom-color: var(--tg-color-primary);
  color: var(--tg-color-primary);
}

.search-component__section {
  display: none;
}

.search-component__section--active {
  display: block;
}

.search-component__footer {
  padding: var(--tg-spacer-4);
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--tg-border-color);
  margin-top: var(--tg-spacer-4);
  gap: var(--tg-spacer-3);
  background: var(--tg-bg-surface);
}

.search-component__btn {
  padding: var(--tg-button-sm-padding-y) var(--tg-button-sm-padding-x);
  border-radius: var(--tg-button-sm-border-radius);
  font-weight: var(--tg-font-weight-medium);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  font-size: var(--tg-button-sm-font-size);
  min-height: var(--tg-button-sm-height);
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-component__btn--primary {
  background-color: var(--tg-button-primary-bg);
  color: var(--tg-button-primary-color);
  border: 1px solid var(--tg-button-primary-border);
}

.search-component__btn--primary:hover {
  background-color: var(--tg-button-primary-hover-bg);
  color: var(--tg-button-primary-hover-color);
  border-color: var(--tg-button-primary-hover-border);
}

.search-component__btn--secondary {
  background: var(--tg-button-outline-secondary-bg);
  border: 1px solid var(--tg-button-outline-secondary-border);
  color: var(--tg-button-outline-secondary-color);
}

.search-component__btn--secondary:hover {
  background-color: var(--tg-button-outline-secondary-hover-bg);
  color: var(--tg-button-outline-secondary-hover-color);
  border-color: var(--tg-button-outline-secondary-hover-border);
}

.search-component__btn:focus-visible {
  outline: none;
  box-shadow: var(--tg-shadow-focus);
}

/* Közös segédosztályok */
.hidden {
  display: none;
}

/* Alapvető animációk */
.search-component__dropdown {
  animation: fadeIn var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-out);
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Akadálymentesítési javítások */
.search-component__trigger:focus-visible,
.search-component__btn:focus-visible,
.search-component__search-input:focus-visible {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: 2px;
}

/* Magas kontrasztú mód támogatása */
@media (prefers-contrast: high) {
  :root {
    --secondary-color: var(--tg-border-color);
    --text-muted-color: var(--tg-text-color);
  }
}

/* Csökkentett mozgás támogatása */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: var(--tg-transition-duration-75) !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--tg-transition-duration-75) !important;
  }
}


/* searchbox-modules.css */
/* TravelGate Searchbox Modulok közös CSS */

/* Dátumválasztó stílusok */
.date-search__picker-container {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-4);
  margin-bottom: var(--tg-spacer-4);
}

.date-search__input-container {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-2);
  margin-bottom: var(--tg-spacer-3);
}

.date-search__input-label {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
}

.date-search__range-input {
  width: 100%;
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  min-height: var(--tg-input-height-sm);
}

.date-search__range-input:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

.date-search__range-input:hover {
  border-color: var(--tg-border-focus);
}

.date-search__range-input::placeholder {
  color: var(--tg-text-muted);
  font-style: italic;
}

.date-search__picker-info {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-3);
  padding: var(--tg-spacer-3);
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
  border-radius: var(--tg-border-radius-base);
  border: 1px solid var(--tg-border-color);
}

.date-search__info-text {
  text-align: center;
}

.date-search__info-text strong {
  display: block;
  font-size: var(--tg-font-size-lg);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-color-primary);
  margin-bottom: var(--tg-spacer-1);
}

.date-search__info-text p {
  font-size: var(--tg-font-size-sm);
  color: var(--tg-text-muted);
  margin: 0;
}

.date-search__selected-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tg-spacer-3);
}

.date-search__date-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--tg-spacer-2);
  background-color: var(--tg-bg-surface);
  border-radius: var(--tg-border-radius-base);
  border: 1px solid var(--tg-border-color);
}

.date-search__date-label {
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--tg-spacer-1);
}

.date-search__date-value {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
  text-align: center;
  min-height: 1.2em;
}

.date-search__calendar {
  display: flex;
  justify-content: center;
  background-color: var(--tg-bg-surface);
}

.date-search__quick-options {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-2);
  padding: var(--tg-spacer-3);
  background-color: var(--tg-bg-neutral-light);
  color: var(--tg-fg-on-bg-neutral-light);
  border-radius: var(--tg-border-radius-base);
  border: 1px solid var(--tg-border-color);
}

.date-search__quick-title {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-color);
  text-align: center;
  margin-bottom: var(--tg-spacer-1);
}

.date-search__quick-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--tg-spacer-2);
}

.date-search__quick-btn {
  padding: var(--tg-spacer-2) var(--tg-spacer-3);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  border: 1px solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-base);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  text-align: center;
}

.date-search__quick-btn:hover {
  background-color: var(--tg-bg-primary);
  color: var(--tg-fg-on-bg-primary);
  border-color: var(--tg-bg-primary);
  transform: translateY(-1px);
  box-shadow: var(--tg-shadow-button);
}

.date-search__quick-btn:active,
.date-search__quick-btn--active {
  background-color: var(--tg-color-primary);
  color: var(--tg-fg-on-color-primary);
  border-color: var(--tg-color-primary);
  box-shadow: var(--tg-shadow-button-active);
}

.date-search__quick-btn:focus-visible {
  outline: none;
  box-shadow: var(--tg-shadow-focus);
}

/* Fallback HTML dátum input stílusok */
.date-search__fallback {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-4);
  padding: var(--tg-spacer-4);
  background-color: var(--tg-bg-warning-light);
  color: var(--tg-fg-on-bg-warning-light);
  border-radius: var(--tg-border-radius-base);
  border: 1px solid var(--tg-border-warning);
}

.date-search__fallback::before {
  content: "⚠️ Lightpick nem elérhető - Alapvető dátumválasztó használatban";
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  text-align: center;
  color: var(--tg-color-warning);
}

/* Eredeti date-search stílusok megőrzése fallback-hez */
.date-search__dates {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-4);
  margin-bottom: var(--tg-spacer-4);
}

.date-search__date-group {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-2);
}

.date-search__date-input {
  padding: var(--tg-input-padding-y) var(--tg-input-padding-x);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-input);
  font-size: var(--tg-font-size-sm);
  font-family: var(--tg-font-family-primary);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  min-height: var(--tg-input-height-sm);
}

.date-search__date-input:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

/* Utazás hossz választó stílusok */
.length-search__options {
  padding: var(--tg-spacer-2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--tg-spacer-2);
}

.length-search__option {
  padding: var(--tg-spacer-3);
  text-align: center;
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-base);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  font-weight: var(--tg-font-weight-medium);
}

.length-search__option:hover {
  border-color: var(--tg-border-focus);
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
}

.length-search__option.selected {
  background-color: var(--tg-bg-primary);
  color: var(--tg-fg-on-bg-primary);
  border-color: var(--tg-bg-primary);
}

/* Nincs szükség külön éjszaka stílusra, mert közvetlenül az eredeti elnevezéseket használjuk */

/* Utasszám választó stílusok */
.passenger-search__groups {
  padding: var(--tg-spacer-2) var(--tg-spacer-2) 0 var(--tg-spacer-2);
  margin-bottom: var(--tg-spacer-4);
}

.passenger-search__group {
  margin-bottom: var(--tg-spacer-4);
}

.passenger-search__group:last-child {
  margin-bottom: var(--tg-spacer-0);
}
.passenger-search__group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tg-spacer-2);
}

.passenger-search__group-title {
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
}

.passenger-search__counter {
  display: flex;
  align-items: center;
  gap: var(--tg-spacer-2);
}

.passenger-search__counter-btn {
  width: 2rem;
  height: 2rem;
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-full);
  background: var(--tg-bg-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--tg-font-weight-bold);
  transition: var(--tg-transition-colors);
  color: var(--tg-text-color);
}

.passenger-search__counter-btn:hover {
  border-color: var(--tg-border-focus);
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
}

.passenger-search__counter-btn:disabled {
  opacity: var(--tg-button-disabled-opacity);
  cursor: var(--tg-button-disabled-cursor);
  background-color: var(--tg-bg-disabled);
  color: var(--tg-fg-on-bg-disabled);
}

.passenger-search__counter-value {
  min-width: 2rem;
  text-align: center;
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
}

.passenger-search__children-ages {
  margin-top: var(--tg-spacer-4);
  padding-left: var(--tg-spacer-2);
}

.passenger-search__age-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tg-spacer-2);
  padding: var(--tg-spacer-2);
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
  border-radius: var(--tg-border-radius-base);
}

.passenger-search__age-label {
  font-size: var(--tg-font-size-sm);
  color: inherit;
}

.passenger-search__age-select {
  padding: var(--tg-spacer-1) var(--tg-spacer-2);
  border: var(--tg-input-border-width) solid var(--tg-border-color);
  border-radius: var(--tg-border-radius-base);
  font-size: var(--tg-font-size-sm);
  background-color: var(--tg-bg-surface);
  color: var(--tg-text-color);
  cursor: pointer;
}

.passenger-search__age-select:focus {
  outline: none;
  border-color: var(--tg-border-focus);
  box-shadow: var(--tg-shadow-focus);
}

/* Reszponzív beállítások a modulokhoz */
@media (max-width: 767.98px) {
  .length-search__options {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Dátumválasztó reszponzív stílusok */
  .date-search__selected-dates {
    grid-template-columns: 1fr;
    gap: var(--tg-spacer-2);
  }

  .date-search__quick-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .date-search__input-container {
    margin-bottom: var(--tg-spacer-2);
  }

  .date-search__range-input {
    font-size: var(--tg-font-size-base);
    padding: var(--tg-spacer-3);
  }

  .date-search__calendar {
    min-height: 250px;
    padding: var(--tg-spacer-1);
  }

  .date-search__picker-container {
    gap: var(--tg-spacer-3);
  }

  .date-search__picker-info,
  .date-search__quick-options {
    padding: var(--tg-spacer-2);
  }
}

@media (max-width: 479.98px) {
  .length-search__options {
    grid-template-columns: 1fr;
  }

  /* Dátumválasztó mobil */
  .date-search__quick-buttons {
    grid-template-columns: 1fr;
  }

  .date-search__quick-btn {
    padding: var(--tg-spacer-3);
    font-size: var(--tg-font-size-base);
  }

  .date-search__info-text strong {
    font-size: var(--tg-font-size-base);
  }

  .date-search__info-text p {
    font-size: var(--tg-font-size-xs);
  }

  .date-search__range-input {
    font-size: var(--tg-font-size-sm);
    padding: var(--tg-spacer-2);
  }

  .date-search__calendar {
    min-height: 200px;
  }
}

/* Travel Mode Component stílusok */
/* Travel mode dropdown specifikus stílusok */
.travel-mode-search__options {
  padding: var(--tg-spacer-2);
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-1);
}

/* Indulási helyszín optgroup stílusai */
.travel-mode-search__options .tg-optgroup {
  margin-top: var(--tg-spacer-3);
  margin-bottom: var(--tg-spacer-2);
  padding-left: var(--tg-spacer-4);
  border-left: 2px solid var(--tg-border-color-subtle);
}

.travel-mode-search__options .tg-optgroup:last-child {
  margin-bottom: 0;
}

.travel-mode-search__options .tg-optgroup__label {
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-muted);
  background-color: var(--tg-bg-subtle);
  padding: var(--tg-spacer-1) var(--tg-spacer-2);
  border-radius: var(--tg-border-radius-sm);
  margin-bottom: var(--tg-spacer-2);
  border: 1px solid var(--tg-border-color-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
}

.travel-mode-search__options .tg-optgroup__options {
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-1);
}

/* Travel mode responsive módosítások */
@media (max-width: 768px) {
  .travel-mode-search__options .tg-optgroup {
    padding-left: var(--tg-spacer-3);
  }

  .travel-mode-search__options .tg-optgroup__label {
    font-size: var(--tg-font-size-xs);
    padding: var(--tg-spacer-1) var(--tg-spacer-2);
  }

  .travel-mode-search__options .tg-optgroup__options .tg-radio-option {
    padding: var(--tg-spacer-2);
  }
}


/* destination-columns.css */
/* TravelGate oszlopos úti cél kereső közös CSS */

.destination-search-columns .tg-dropdown__dropdown {
  max-height: inherit;
}

/* Tab navigáció */
.destination-search__tabs {
  background-color: var(--tg-bg-surface);
  overflow: hidden;
}

.destination-search__tabs .tg-tabs__nav {
  background-color: var(--tg-bg-surface);
  padding: 0;
}

.destination-search__tabs .tg-tabs__nav-list {
  background-color: transparent;
  justify-content: stretch;
  gap: 0;
}

.destination-search__tabs .tg-tabs__nav-item {
  flex: 1;
}

.destination-search__tabs .tg-tabs__nav-link {
  padding: var(--tg-spacer-2) var(--tg-spacer-6);
  font-size: var(--tg-font-size-base);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-muted);
  border-bottom: 3px solid transparent;
  transition: var(--tg-transition-colors),
    border-color var(--tg-transition-duration-200)
      var(--tg-transition-timing-ease-in-out);
  position: relative;
  background-color: var(--tg-bg-primary);
  color: var(--tg-fg-on-bg-primary);
  width: 100%;
}

.destination-search__tabs .tg-tabs__nav-link:hover {
  color: var(--tg-text-primary);
  background-color: var(--tg-bg-muted-light);
}

.destination-search__tabs .tg-tabs__nav-link.active,
.destination-search__tabs .tg-tabs__nav-link[aria-selected="true"] {
  color: var(--tg-color-primary);
  border-bottom-color: var(--tg-color-primary);
  background-color: var(--tg-bg-surface);
}

.destination-search__tabs .tg-tabs__nav-link.active:hover {
  background-color: var(--tg-bg-surface);
  color: var(--tg-color-primary);
}

.destination-search__tabs .tg-tabs__nav-link svg {
  margin-right: var(--tg-spacer-3);
  fill: currentColor;
}

.destination-search__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: var(--tg-spacer-3) var(--tg-spacer-4);
  border: none;
  background-color: transparent;
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  position: relative;
}

.destination-search__tab svg {
  margin-right: var(--tg-spacer-3);
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.destination-search__tab:hover {
  background-color: var(--tg-bg-muted-light);
  color: var(--tg-color-primary);
}

.destination-search__tab--active {
  color: var(--tg-color-primary);
  border-bottom-color: var(--tg-color-primary);
  font-weight: var(--tg-font-weight-semibold);
}

/* .destination-search__tab:focus {
  outline: 2px solid var(--tg-color-primary);
  outline-offset: -2px;
} */

/* Tab tartalom */
.destination-search__tab-content {
  position: relative;
}

.destination-search__tab-panel {
  display: none;
}

.destination-search__tab-panel--active {
  display: block;
}

/* Egyoszlopos nézet a szállásoknak és programoknak */
.destination-search-single-column__container {
  width: 820px;
  max-width: 100%;
  height: 420px;
  overflow: hidden;
}

.destination-search-single-column__content {
  height: 100%;
  overflow-y: auto;
  background-color: var(--tg-bg-neutral-light);
}

.destination-search-single-column__section {
  margin-bottom: 0;
}

.destination-search-single-column__section-title {
  padding: var(--tg-spacer-3);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-muted);
  background-color: var(--tg-bg-neutral-light);
  border-bottom: 1px solid var(--tg-border-color);
  position: sticky;
  top: 0;
  z-index: 1;
}

.destination-search-single-column__subsection-title {
  padding: var(--tg-spacer-2) var(--tg-spacer-3);
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-color-primary);
  background-color: var(--tg-bg-neutral-light);
  border-bottom: 1px solid var(--tg-border-color);
  position: sticky;
  top: var(--tg-spacer-6);
  z-index: 1;
}

.destination-search-single-column__item {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-3);
  border-bottom: 1px solid var(--tg-border-light);
  cursor: pointer;
  transition: var(--tg-transition-colors);
  background-color: var(--tg-bg-surface);
}

.destination-search-single-column__item:hover {
  background-color: var(--tg-bg-hover);
}

.destination-search-single-column__item--highlighted {
  background-color: var(--tg-bg-primary-light);
  border-left: 3px solid var(--tg-color-primary);
  padding-left: calc(var(--tg-spacer-3) - 3px);
}

.destination-search-single-column__item-header {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tg-spacer-6);
}

.destination-search-single-column__item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.destination-search-single-column__item-name {
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.destination-search-single-column__item--highlighted
  .destination-search-single-column__item-name {
  color: var(--tg-color-primary);
  font-weight: var(--tg-font-weight-semibold);
}

.destination-search-single-column__item-stars {
  color: var(--tg-color-warning);
  font-size: var(--tg-font-size-sm);
  margin-left: var(--tg-spacer-2);
  flex-shrink: 0;
}

/* Program specifikus stílusok */
.destination-search-single-column__program
  .destination-search-single-column__item-name::before {
  content: "📋";
  margin-right: var(--tg-spacer-3);
  font-size: var(--tg-font-size-base);
}

/* Szállás specifikus stílusok */
.destination-search-single-column__accommodation
  .destination-search-single-column__item-name::before {
  content: "🏨";
  margin-right: var(--tg-spacer-3);
  font-size: var(--tg-font-size-base);
}

/* Radio button-ok stílusai */
.destination-search__radio {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--tg-border-color);
  border-radius: 50%;
  background-color: var(--tg-bg-surface);
  appearance: none;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-right: var(--tg-spacer-3);
}

.destination-search__radio:hover {
  border-color: var(--tg-color-primary);
}

.destination-search__radio:focus {
  outline: 2px solid var(--tg-color-primary-light);
  outline-offset: 2px;
}

.destination-search__radio:checked {
  border-color: var(--tg-color-primary);
  background-color: var(--tg-color-primary);
}

.destination-search__radio:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
}

/* Oszlopos elrendezésű úti cél kereső */
.destination-search-columns {
  position: relative;
  width: 100%;
}

.destination-search-columns__container {
  display: flex;
  width: 100%;
  height: 420px;
  overflow: hidden;
}

.destination-search-columns__countries {
  width: 280px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid var(--tg-border-color);
  background-color: var(--tg-bg-surface);
}

.destination-search-columns__regions {
  width: 540px;
  height: 100%;
  overflow-y: auto;
  background-color: var(--tg-bg-neutral-light);
}

.destination-search-columns__section-title {
  padding: var(--tg-spacer-3);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-text-muted);
  background-color: var(--tg-bg-neutral-light);
  border-bottom: 1px solid var(--tg-border-color);
}

.destination-search-columns__country {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-3);
  border-bottom: 1px solid var(--tg-border-light);
  cursor: pointer;
  transition: var(--tg-transition-colors);
}

.destination-search-columns__country:hover {
  background-color: var(--tg-bg-hover);
}

.destination-search-columns__country--active {
  background-color: var(--tg-bg-primary-light);
  border-left: 3px solid var(--tg-color-primary);
}

.destination-search-columns__country-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search-columns__country-flag {
  flex-shrink: 0;
  margin-right: var(--tg-spacer-3);
  object-fit: cover;
  border-radius: var(--tg-border-radius-full);
}

.destination-search-columns__country-name {
  flex: 1;
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-medium);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.destination-search-columns__country-arrow {
  margin-left: var(--tg-spacer-2);
  color: var(--tg-text-muted);
  transition: transform 0.2s ease;
}

.destination-search-columns__region {
  padding: var(--tg-spacer-3);
  border-bottom: 1px solid var(--tg-border-light);
}

.destination-search-columns__region-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--tg-spacer-2);
}

.destination-search-columns__region-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search-columns__region-name {
  flex: 1;
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
}

.destination-search-columns__region-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 var(--tg-spacer-2);
  border-radius: var(--tg-border-radius-full);
  background-color: var(--tg-bg-secondary);
  color: var(--tg-fg-on-bg-secondary);
  font-size: var(--tg-font-size-xs);
  font-weight: var(--tg-font-weight-medium);
}

.destination-search-columns__city {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-2) var(--tg-spacer-3) var(--tg-spacer-2)
    var(--tg-spacer-6);
  transition: var(--tg-transition-colors);
}

.destination-search-columns__city:hover {
  background-color: var(--tg-bg-hover);
}

.destination-search-columns__city-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search-columns__city-name {
  font-size: var(--tg-font-size-sm);
}

.destination-search-columns__city-name--long {
  color: var(--tg-text-muted);
  font-size: var(--tg-font-size-xs);
  margin-left: var(--tg-spacer-1);
  display: none;
}

.destination-search-columns__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--tg-spacer-6);
  text-align: center;
  color: var(--tg-text-muted);
}

.destination-search-columns__empty-icon {
  font-size: var(--tg-font-size-2xl);
  margin-bottom: var(--tg-spacer-3);
  color: var(--tg-text-color-light);
}

.destination-search-columns__empty p {
  margin: 0;
  font-size: var(--tg-font-size-sm);
  line-height: 1.5;
  max-width: 280px;
}

/* Keresési találatok kiemelése */
.destination-search-columns__region--highlighted {
  background-color: var(--tg-bg-primary-light);
  border-left: 3px solid var(--tg-color-primary);
  padding-left: calc(var(--tg-spacer-3) - 3px);
}

.destination-search-columns__city--highlighted {
  background-color: var(--tg-bg-primary-light);
  border-left: 3px solid var(--tg-color-primary);
  padding-left: calc(var(--tg-spacer-6) - 3px);
}

.destination-search-columns__region--highlighted
  .destination-search-columns__region-name,
.destination-search-columns__city--highlighted
  .destination-search-columns__city-name {
  font-weight: var(--tg-font-weight-bold);
  color: var(--tg-color-primary);
}

/* Találati szövegrész kiemelése */
.destination-search-columns__highlight {
  background-color: var(--tg-color-warning-light);
  font-weight: var(--tg-font-weight-bold);
  border-radius: 2px;
  padding: 0 2px;
}

/* Program és szállás elemek az oszlopos elrendezésben */
.destination-search-columns__special-section-title {
  padding: var(--tg-spacer-3);
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-color-primary);
  background-color: var(--tg-bg-neutral-light);
  border-bottom: 1px solid var(--tg-border-color);
}

.destination-search-columns__program,
.destination-search-columns__accommodation {
  display: flex;
  flex-direction: column;
  padding: var(--tg-spacer-3);
  border-bottom: 1px solid var(--tg-border-light);
  transition: var(--tg-transition-colors);
}

.destination-search-columns__program:hover,
.destination-search-columns__accommodation:hover {
  background-color: var(--tg-bg-hover);
}

.destination-search-columns__program--highlighted,
.destination-search-columns__accommodation--highlighted {
  background-color: var(--tg-bg-primary-light);
  border-left: 3px solid var(--tg-color-primary);
  padding-left: calc(var(--tg-spacer-3) - 3px);
}

.destination-search-columns__program-header,
.destination-search-columns__accommodation-header {
  display: flex;
  align-items: center;
  margin-bottom: var(--tg-spacer-2);
}

.destination-search-columns__program-checkbox,
.destination-search-columns__accommodation-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search-columns__program-name,
.destination-search-columns__accommodation-name {
  flex: 1;
  font-size: var(--tg-font-size-sm);
  font-weight: var(--tg-font-weight-semibold);
}

.destination-search-columns__program--highlighted
  .destination-search-columns__program-name,
.destination-search-columns__accommodation--highlighted
  .destination-search-columns__accommodation-name {
  font-weight: var(--tg-font-weight-bold);
  color: var(--tg-color-primary);
}

.destination-search-columns__program-location,
.destination-search-columns__accommodation-location {
  font-size: var(--tg-font-size-xs);
  color: var(--tg-text-muted);
  margin-left: calc(
    var(--tg-spacer-3) + 1.25rem
  ); /* Checkbox szélességének és margin-jának összege */
}

/* Keresőmező clear gomb */
.tg-dropdown__search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--tg-text-muted);
  cursor: pointer;
  padding: var(--tg-spacer-1);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--tg-border-radius-sm);
  transition: var(--tg-transition-colors);
}

.tg-dropdown__search-clear:hover {
  color: var(--tg-text-color);
  background-color: var(--tg-bg-hover);
}

/* Reszponzív beállítások az oszlopos elrendezéshez */
@media (max-width: 767.98px) {
  .destination-search-columns__container {
    flex-direction: column;
    height: calc(100vh - 252px);
  }

  .destination-search-columns__countries,
  .destination-search-columns__regions {
    width: 100%;
    height: 50%;
  }

  .destination-search-columns__countries {
    border-right: none;
    border-bottom: 1px solid var(--tg-border-color);
  }

  .destination-search-single-column__container {
    width: 100%;
    height: calc(100vh - 252px);
  }

  .destination-search-single-column__item {
    padding: var(--tg-spacer-2);
  }

  .destination-search-single-column__item-name {
    font-size: var(--tg-font-size-xs);
  }
}

/* Klasszikus/hagyományos úti cél kereső stílusok */
.destination-search__item {
  position: relative;
}

.destination-search__country {
  margin-bottom: var(--tg-spacer-0);
  background-color: var(--tg-bg-body);
  overflow: hidden;
  transition: all 0.3s var(--tg-transition-timing-ease-in);
}

.destination-search__country:hover {
  border-color: var(--tg-border-color-hover);
}

.destination-search__country-header {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-3) var(--tg-spacer-4);
  cursor: pointer;
  border-bottom: 1px solid var(--tg-border-color);
  transition: all 0.2s var(--tg-transition-timing-ease-in);
  user-select: none;
}

.destination-search__country-header:hover {
  background-color: var(--tg-bg-secondary);
}

.destination-search__country-header--expanded {
  background-color: var(--tg-bg-primary-light);
  border-bottom-color: var(--tg-border-color);
}

.destination-search__country-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search__country-flag {
  margin-right: var(--tg-spacer-3);
  font-size: var(--tg-font-size-lg);
  border-radius: var(--tg-border-radius-full);
}

.destination-search__country-name {
  flex: 1;
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
}

.destination-search__country-arrow {
  color: var(--tg-text-color-muted);
  transition: transform var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in);
  font-size: var(--tg-font-size-sm);
}

.destination-search__country-arrow--expanded {
  transform: rotate(180deg);
}

.destination-search__country-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in);
  background-color: var(--tg-bg-surface);
}

.destination-search__country-content--expanded {
  max-height: 400px; /* Sufficient height for most countries */
}

.destination-search__regions {
  padding: var(--tg-spacer-0) 0;
}

.destination-search__region {
  margin-bottom: var(--tg-spacer-0);
}

.destination-search__region-header {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-2) var(--tg-spacer-3) var(--tg-spacer-2)
    var(--tg-spacer-4);
  border-bottom: 1px solid var(--tg-border-color-light);
  cursor: pointer;
  transition: all var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in);
}

.destination-search__region-header:hover {
  background-color: var(--tg-bg-hover);
}

.destination-search__region-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search__region-name {
  flex: 1;
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
  font-size: var(--tg-font-size-sm);
}

.destination-search__region-count {
  color: var(--tg-text-color-muted);
  font-size: var(--tg-font-size-xs);
  background-color: var(--tg-bg-primary-light);
  padding: var(--tg-spacer-0-5) var(--tg-spacer-2);
  border-radius: var(--tg-border-radius-full);
  margin-left: var(--tg-spacer-2);
}

.destination-search__cities {
  padding-left: var(--tg-spacer-6);
}

.destination-search__city {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-2) var(--tg-spacer-4);
  border-bottom: 1px solid var(--tg-border-color-light);
  transition: background-color var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in);
}

.destination-search__city:hover {
  background-color: var(--tg-bg-hover);
}

.destination-search__city:last-child {
  border-bottom: none;
}

.destination-search__city-checkbox {
  margin-right: var(--tg-spacer-3) !important;
}

.destination-search__city-name {
  flex: 1;
  color: var(--tg-text-color);
  font-size: var(--tg-font-size-sm);
}

.destination-search__city-name--long {
  display: none;
  color: var(--tg-text-color-muted);
  font-size: var(--tg-font-size-xs);
  margin-left: var(--tg-spacer-2);
}

/* Animációk a magasság sima átmenetéhez */
@keyframes expandAccordion {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 400px;
    opacity: 1;
  }
}

@keyframes collapseAccordion {
  from {
    max-height: 400px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

.destination-search__country-content--expanding {
  animation: expandAccordion var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in) forwards;
}

.destination-search__country-content--collapsing {
  animation: collapseAccordion var(--tg-transition-duration-200)
    var(--tg-transition-timing-ease-in) forwards;
}

/* Loading és empty állapotok */
.destination-search__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--tg-spacer-8);
  color: var(--tg-text-color-muted);
}

.destination-search__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--tg-spacer-8);
  color: var(--tg-text-color-muted);
  text-align: center;
}

.destination-search__empty-icon {
  font-size: var(--tg-font-size-2xl);
  margin-bottom: var(--tg-spacer-2);
}

/* Reszponzív design a hagyományos úti cél keresőhöz */
@media (max-width: 767.98px) {
  .destination-search__country-content--expanded {
    max-height: 300px;
  }

  .destination-search__cities {
    padding-left: var(--tg-spacer-4);
  }

  .destination-search__city,
  .destination-search__region-header {
    padding-left: var(--tg-spacer-3);
    padding-right: var(--tg-spacer-3);
  }
}

@media (max-width: 479.98px) {
  .destination-search__country-header {
    padding: var(--tg-spacer-2) var(--tg-spacer-3);
  }

  .destination-search__region-header {
    padding: var(--tg-spacer-1) var(--tg-spacer-2) var(--tg-spacer-1)
      var(--tg-spacer-3);
  }

  .destination-search__city {
    padding: var(--tg-spacer-1) var(--tg-spacer-3);
  }

  .destination-search__country-checkbox,
  .destination-search__region-checkbox,
  .destination-search__city-checkbox {
    margin-right: var(--tg-spacer-2) !important;
  }

  .destination-search__country-flag {
    margin-right: var(--tg-spacer-2);
    font-size: var(--tg-font-size-base);
  }

  .destination-search__country-name,
  .destination-search__region-name,
  .destination-search__city-name {
    font-size: var(--tg-font-size-xs);
  }

  .destination-search__region-count {
    font-size: var(--tg-font-size-xxs);
    padding: var(--tg-spacer-0-25) var(--tg-spacer-1);
  }
}


/* === Travel Search Specific CSS === */
/* searchbox.css */
/* TravelGate Travel Searchbox CSS */

/* Travel Searchbox specifikus stílusok */
.travel-searchbox {
  background-color: var(--tg-bg-surface);
  border-radius: var(--sw-border-radius);
  box-shadow: var(--sw-shadow);
  padding: var(--sw-padding);
  color: var(--tg-fg-on-bg-color);
  font-family: var(--tg-font-family-primary);
  border: 1px solid var(--sw-border-color);
}

.travel-searchbox__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sw-gap);
}

.travel-searchbox__advanced-section {
  margin-top: var(--sw-gap);
  border-top: 1px solid var(--sw-border-color);
  padding-top: var(--sw-gap);
}

.travel-searchbox__advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sw-gap);
}

.travel-searchbox__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--tg-spacer-4);
  gap: var(--tg-spacer-3);
}

.travel-searchbox__submit {
  background-color: var(--sw-btn-primary-bg);
  color: var(--sw-btn-primary-color);
  border: 1px solid var(--sw-btn-primary-border);
  padding: var(--sw-btn-padding);
  border-radius: var(--tg-button-md-border-radius);
  font-weight: var(--tg-font-weight-semibold);
  font-size: var(--tg-button-md-font-size);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--tg-spacer-2);
  transition: var(--sw-transition);
  box-shadow: var(--tg-shadow-button);
  min-height: var(--sw-btn-height);
}

.travel-searchbox__submit:hover {
  background-color: var(--sw-btn-primary-hover-bg);
  color: var(--sw-btn-primary-hover-color);
  border-color: var(--sw-btn-primary-hover-border);
  box-shadow: var(--tg-shadow-button-hover);
}

.travel-searchbox__submit:focus-visible {
  outline: none;
  box-shadow: var(--tg-button-primary-focus-shadow);
}

.travel-searchbox__toggle {
  background: none;
  border: none;
  color: var(--tg-text-primary);
  font-weight: var(--tg-font-weight-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--tg-spacer-1);
  padding: var(--tg-spacer-2);
  transition: var(--tg-transition-colors);
  border-radius: var(--tg-border-radius-base);
}

.travel-searchbox__toggle:hover {
  background-color: var(--tg-bg-primary-light);
  color: var(--tg-fg-on-bg-primary-light);
}

.travel-searchbox__toggle:focus-visible {
  outline: 2px solid var(--tg-border-focus);
  outline-offset: 2px;
}

/* Egyéb travel-searchbox specifikus stílusok */
.travel-mode-search__options,
.hotel-category-search__options,
.meal-plan-search__options,
.hotel-attributes-search__options {
  padding: var(--tg-spacer-2);
  margin-bottom: var(--tg-spacer-4);
}

.travel-mode-search__option,
.hotel-category-search__option,
.meal-plan-search__option,
.hotel-attributes-search__option {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-2);
  cursor: pointer;
  border-radius: var(--tg-border-radius-base);
  transition: var(--tg-transition-colors);
}

.travel-mode-search__option:hover,
.hotel-category-search__option:hover,
.meal-plan-search__option:hover,
.hotel-attributes-search__option:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
}

/* Reszponzív travel-searchbox stílusok */
@media (max-width: 767.98px) {
  .travel-searchbox {
    padding: var(--tg-spacer-4);
  }

  .travel-searchbox__grid,
  .travel-searchbox__advanced-grid {
    grid-template-columns: 1fr;
  }

  .travel-searchbox__actions {
    flex-direction: column;
    gap: var(--tg-spacer-2);
  }

  .travel-searchbox__toggle {
    order: 2;
    width: 100%;
    justify-content: center;
  }

  .travel-searchbox__submit {
    order: 1;
    width: 100%;
    justify-content: center;
  }

  .search-component__dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--tg-z-index-modal);
    max-height: none;
    border-radius: 0;
    padding: var(--tg-spacer-4);
  }

  .search-component__footer {
    position: sticky;
    bottom: 0;
    background-color: var(--tg-bg-surface);
    padding-bottom: var(--tg-spacer-4);
    margin-bottom: calc(-1 * var(--tg-spacer-4));
  }
}

/* Új location elem stílusok */
.location-item {
  margin-bottom: var(--tg-spacer-2);
}

.location-header {
  display: flex;
  align-items: center;
  padding: var(--tg-spacer-2);
  cursor: pointer;
  border-radius: var(--tg-border-radius-base);
  transition: var(--tg-transition-colors);
  border: 1px solid var(--tg-border-light);
}

.location-header:hover {
  background-color: var(--tg-bg-hover);
  color: var(--tg-fg-on-bg-hover);
  border-color: var(--tg-border-focus);
}

.location-icon {
  margin-right: var(--tg-spacer-2);
  font-size: var(--tg-font-size-lg);
}

.location-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--tg-spacer-1);
}

.location-name {
  font-weight: var(--tg-font-weight-medium);
  color: var(--tg-text-color);
}

.location-parent {
  font-size: var(--tg-font-size-sm);
  color: var(--tg-text-muted);
}

.location-type {
  font-size: var(--tg-font-size-xs);
  color: var(--tg-text-muted);
  text-transform: uppercase;
  font-weight: var(--tg-font-weight-medium);
}

.location-checkbox {
  margin-left: var(--tg-spacer-2) !important;
  cursor: pointer;
}

.location-group {
  margin-bottom: var(--tg-spacer-6);
}

.location-group-title {
  font-size: var(--tg-font-size-lg);
  font-weight: var(--tg-font-weight-semibold);
  color: var(--tg-color-primary);
  margin-bottom: var(--tg-spacer-3);
  padding-bottom: var(--tg-spacer-2);
  border-bottom: 1px solid var(--tg-border-color);
}

.location-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--tg-spacer-2);
}

.city-item .location-header {
  background: linear-gradient(
    135deg,
    var(--tg-bg-surface) 0%,
    var(--tg-bg-primary-light) 100%
  );
  border-left: 3px solid var(--tg-color-primary);
}

.simple-location .location-header {
  background: var(--tg-bg-surface);
}

.simple-location .location-header:hover {
  background: var(--tg-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--tg-shadow-card);
}

/* Travel searchbox fülhöz kapcsolódó stílusok */
.search-component__tab[data-tab="cities"] {
  background: linear-gradient(
    135deg,
    var(--tg-bg-info-light) 0%,
    var(--tg-bg-primary-light) 100%
  );
}

.search-component__tab[data-tab="all"] {
  background: linear-gradient(
    135deg,
    var(--tg-bg-neutral-light) 0%,
    var(--tg-bg-secondary-light) 100%
  );
}

.search-component__tab[data-tab="cities"]:hover,
.search-component__tab[data-tab="all"]:hover {
  opacity: 0.8;
}

/* Reszponzív módosítások a travel keresőhöz */
@media (max-width: 479.98px) {
  .search-component__trigger {
    padding: var(--tg-spacer-3);
  }

  .search-component__icon {
    font-size: var(--tg-font-size-lg);
  }

  .search-component__title {
    font-size: var(--tg-font-size-xs);
  }

  /* Új location elem reszponzív stílusok */
  .location-group-items {
    grid-template-columns: 1fr;
  }

  .location-header {
    padding: var(--tg-spacer-3);
  }

  .location-icon {
    font-size: var(--tg-font-size-xl);
  }

  .location-info {
    gap: var(--tg-spacer-half);
  }

  .location-name {
    font-size: var(--tg-font-size-sm);
  }

  .location-parent,
  .location-type {
    font-size: var(--tg-font-size-xs);
  }
}