/*  * {outline: 3px solid red !important;} */
/* === Fonts === */
@font-face {
  font-family: 'NotableRegular';
  src: url('../fonts/Notable-Regular.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'PlayfairDisplayBold';
  src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'LoraMedium';
  src: url('../fonts/Lora-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}
h1 {
  font-family: 'NotableRegular', cursive;
  font-weight: bold;
  font-size: 2rem;
}
h2 {
  font-family: 'PlayfairDisplayBold', serif;
  font-weight: bold;
}

p, body {
  font-family: 'LoraMedium', serif;
  text-align: justify;
  hyphens: auto;
}
/* .nav-link light-dark */
.nav-link {
  font-family: 'PlayfairDisplayBold', serif;
  font-weight: bold;
  font-size: 1.2rem;
  transition: color 0.3s ease;
}
.text-justify {
  text-align: justify;
}

/* Világos téma */
body.light-theme .nav-link {
  color: #000 !important;
}

/* Sötét téma */
body.dark-theme .nav-link {
  color: #fff !important;
}
/* == PALETTA == */

/* Világos téma (alapértelmezett) */
:root,
.light-theme {
  --bs-body-bg: #ffffff; /* Az oldal háttérszíne */
  --bs-body-color: #212529; /* Alap szöveg színe */

  /* Alapszínek */
  --bs-primary: #0d6efd;       /* Elsődleges szín (pl. gombokhoz, linkekhez) */
  --bs-secondary: #6c757d;     /* Másodlagos szín */
  --bs-success: #198754;       /* Sikeres művelet színe (zöld) */
  --bs-danger: #dc3545;        /* Hiba, törlés (piros) */
  --bs-warning: #ffc107;       /* Figyelmeztetés (sárga) */
  --bs-info: #0dcaf0;          /* Tájékoztató szín (kékes) */
  --bs-light: #f8f9fa;         /* Világos háttér */
  --bs-dark: #212529;          /* Sötét háttér */
  --bs-white: #ffffff;         /* Fehér */
  --bs-black: #000000;         /* Fekete */

  /* Határoló és link színek */
  --bs-border-color: #dee2e6;                  /* Alap szegélyszín */
  --bs-border-color-translucent: rgba(0,0,0,0.175); /* Áttetsző szegélyszín */
  --bs-heading-color: inherit;                 /* Címsor színe (öröklődik) */
  --bs-link-color: #0d6efd;                    /* Link alapszín */
  --bs-link-hover-color: #0a58ca;              /* Link hover színe */
  --bs-link-decoration: underline;             /* Link aláhúzás */
  --bs-link-hover-decoration: none;            /* Hover állapotban aláhúzás kikapcsolása */

  /* Speciális színek */
  --bs-code-color: #d63384;                    /* <code> és <pre> szöveg színe */
  --bs-highlight-bg: #fff3cd;                  /* <mark> háttérszín */

  /* Gombok */
  --bs-btn-color: #fff;                        /* Gomb szöveg színe */
  --bs-btn-bg: #0d6efd;                        /* Gomb háttér */
  --bs-btn-border-color: #0d6efd;              /* Gomb szegély */
  --bs-btn-hover-color: #fff;                  /* Hover szöveg */
  --bs-btn-hover-bg: #0b5ed7;                  /* Hover háttér */
  --bs-btn-hover-border-color: #0a58ca;        /* Hover szegély */
  --bs-btn-active-color: #fff;                 /* Aktív szöveg */
  --bs-btn-active-bg: #0a58ca;                 /* Aktív háttér */
  --bs-btn-active-border-color: #0a53be;       /* Aktív szegély */

  /* Figyelmeztető dobozok (Alert) */
  --bs-alert-color: #664d03;                   /* Alert szöveg színe */
  --bs-alert-bg: #fff3cd;                      /* Alert háttér */
  --bs-alert-border-color: #ffecb5;            /* Alert szegély */

  /* Tooltip és Popover */
  --bs-tooltip-bg: #000;                       /* Tooltip háttér */
  --bs-tooltip-color: #fff;                    /* Tooltip szöveg */
  --bs-popover-bg: #fff;                       /* Popover háttér */
  --bs-popover-border-color: rgba(0,0,0,0.2);  /* Popover szegély */

  /* Progress Bar */
  --bs-progress-bg: #e9ecef;                   /* Háttérsáv színe */
  --bs-progress-bar-color: #fff;               /* Kitöltés szövegszín */
  --bs-progress-bar-bg: #0d6efd;               /* Kitöltés háttérszín */
}

/* Sötét téma (Dark Theme) */
.dark-theme {
  --bs-body-bg: #121212;                       /* Sötét háttér */
  --bs-body-color: #e4e4e4;                    /* Világos szöveg */

  /* Alapszínek */
  --bs-primary: #0aa1ff;
  --bs-secondary: #adb5bd;
  --bs-success: #2ecc71;
  --bs-danger: #ff6b6b;
  --bs-warning: #f1c40f;
  --bs-info: #66d9ef;
  --bs-light: #343a40;
  --bs-dark: #f8f9fa;
  --bs-white: #1e1e1e;
  --bs-black: #ffffff;

  /* Határoló és link színek */
  --bs-border-color: #444;
  --bs-border-color-translucent: rgba(255,255,255,0.1);
  --bs-heading-color: #ffffff;
  --bs-link-color: #0aa1ff;
  --bs-link-hover-color: #66d9ef;
  --bs-link-decoration: underline;
  --bs-link-hover-decoration: none;

  /* Speciális színek */
  --bs-code-color: #ffa7c4;
  --bs-highlight-bg: #333333;

  /* Gombok */
  --bs-btn-color: #fff;
  --bs-btn-bg: #0aa1ff;
  --bs-btn-border-color: #0aa1ff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #007acc;
  --bs-btn-hover-border-color: #007acc;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #006bb3;
  --bs-btn-active-border-color: #006bb3;

  /* Alert */
  --bs-alert-color: #fff3cd;
  --bs-alert-bg: #2c2c2c;
  --bs-alert-border-color: #555;

  /* Tooltip és Popover */
  --bs-tooltip-bg: #fff;
  --bs-tooltip-color: #000;
  --bs-popover-bg: #1f1f1f;
  --bs-popover-border-color: rgba(255,255,255,0.1);

  /* Progress Bar */
  --bs-progress-bg: #2a2a2a;
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #0aa1ff;
}

/* == BUTTON SZÍNTÉMÁK == */

/* === color 1 Sky Blue === */
body.color-one-theme .text-primary {
  color: #3BB9FF !important;
}
body.color-one-theme .btn-link {
  color: #3BB9FF !important;
  background-color: transparent !important;
  text-decoration: underline;
}

body.color-one-theme .btn-link:hover {
  color: #2c96cc !important;
  background-color: transparent !important;
}
body.color-one-theme .badge.bg-primary,
body.color-one-theme .text-bg-primary,
body.color-one-theme .progress-bar.bg-primary,
body.color-one-theme .border-primary,
body.color-one-theme .alert-primary,
body.color-one-theme .list-group-item-primary {
  background-color: #3BB9FF !important;
  border-color: #2c96cc !important;
  color: #fff !important;
}
body.color-one-theme .alert-primary,
body.color-one-theme .list-group-item-primary {
  color: #212529 !important;
}
body.color-one-theme .bg-primary {
  background-color: #3BB9FF !important;
  border-color: #2c96cc !important;
}
body.color-one-theme .text-white {
  color: #fff !important;
}
body.color-one-theme .btn-primary {
  background-color: #3BB9FF;
  border-color: #2c96cc;
  color: #fff !important;
}
body.color-one-theme .btn-primary:hover {
  background-color: #2fa6e6;
  border-color: #247aab;
  color: #fff !important;
}
body.color-one-theme .btn-primary:active {
  background-color: #247aab;
  border-color: #1f6d97;
  color: #fff !important;
}
body.color-one-theme .tooltip-inner {
  background-color: #3BB9FF !important;
  color: #fff !important;
}
body.color-one-theme .popover {
  background-color: #3BB9FF !important;
  border-color: #2c96cc !important;
  color: #fff !important;
}
body.color-one-theme .popover-header {
  background-color: #2c96cc !important;
  color: #fff !important;
}
body.color-one-theme .btn-group .btn-primary.active {
  background-color: #3BB9FF !important;
  border-color: #2c96cc !important;
  color: #fff !important;
}
body.color-one-theme .form-control:focus {
  border-color: #3BB9FF !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.075), 0 0 0 0.2rem #3BB9FF33;
}
body.color-one-theme .dropdown-item.active,
body.color-one-theme .dropdown-item:active {
  background-color: #3BB9FF !important;
  color: #fff !important;
}
body.color-one-theme .accordion-button:not(.collapsed) {
  background-color: #3BB9FF !important;
  color: #fff !important;
  border-color: #2c96cc !important;
}
body.color-one-theme .table-primary,
body.color-one-theme thead {
  background-color: #3BB9FF !important;
  color: #fff !important;
}
body.color-one-theme .form-select:focus {
  border-color: #3BB9FF !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 185, 255, 0.25);
}
body.color-one-theme .form-check-input:checked {
  background-color: #3BB9FF;
  border-color: #2fa6e6;
}
body.color-one-theme .form-range::-webkit-slider-thumb {
  background-color: #3BB9FF;
}
body.color-one-theme .form-range::-moz-range-thumb {
  background-color: #3BB9FF;
}
body.color-one-theme .input-group-text {
  background-color: #3BB9FF;
  color: #fff;
  border-color: #2fa6e6;
}
body.color-one-theme ::placeholder {
  color: #3BB9FF;
  opacity: 0.7;
}
body.color-one-theme select.form-select {
  background-color: #f8f9fa;
  border-color: #3BB9FF;
  color: #212529;
}
body.color-one-theme select.form-select:focus {
  border-color: #3BB9FF;
  box-shadow: 0 0 0 0.25rem rgba(59, 185, 255, 0.25);
}


/* Világos téma – Bootstrap icons */
body.light-theme.color-one-theme .bi {
  color: #222;
}
body.light-theme.color-one-theme .bi:hover,
body.light-theme.color-one-theme .bi:active {
  color: #3BB9FF;
}

/* Sötét téma – Bootstrap icons */
body.dark-theme.color-one-theme .bi {
  color: #eee;
}
body.dark-theme.color-one-theme .bi:hover,
body.dark-theme.color-one-theme .bi:active {
  color: #3BB9FF;
}

/* Pagination */
body.light-theme.color-one-theme .pagination .page-item.active .page-link,
body.dark-theme.color-one-theme .pagination .page-item.active .page-link {
  background-color: #3BB9FF;
  border-color: #3BB9FF;
  color: #fff;
}

/* Linkek */
body.light-theme.color-one-theme a {
  color: #222;
}
body.light-theme.color-one-theme a:hover,
body.light-theme.color-one-theme a:active {
  color: #3BB9FF;
}
body.dark-theme.color-one-theme a {
  color: #eee;
}
body.dark-theme.color-one-theme a:hover,
body.dark-theme.color-one-theme a:active {
  color: #3BB9FF;
}


/* === Color 2. Light Sea Green (3EA99F) === */
body.color-two-theme .text-primary {
  color: #3EA99F !important;
}
body.color-two-theme .btn-link {
  color: #3EA99F !important;
  background-color: transparent !important;
  text-decoration: underline;
}
body.color-two-theme .btn-link:hover {
  color: #2f837b !important;
  background-color: transparent !important;
}
body.color-two-theme .badge.bg-primary,
body.color-two-theme .text-bg-primary,
body.color-two-theme .progress-bar.bg-primary,
body.color-two-theme .border-primary,
body.color-two-theme .alert-primary,
body.color-two-theme .list-group-item-primary {
  background-color: #3EA99F !important;
  border-color: #339088 !important;
  color: #fff !important;
}
body.color-two-theme .alert-primary,
body.color-two-theme .list-group-item-primary {
  color: #212529 !important;
}
body.color-two-theme .bg-primary {
  background-color: #3EA99F !important;
  border-color: #339088 !important;
}
body.color-two-theme .btn-primary {
  background-color: #3EA99F;
  border-color: #339088;
  color: #fff !important;
}
body.color-two-theme .btn-primary:hover {
  background-color: #37948b;
  border-color: #2f837b;
  color: #fff !important;
}
body.color-two-theme .btn-primary:active {
  background-color: #2f837b;
  border-color: #276f68;
  color: #fff !important;
}
body.color-two-theme .tooltip-inner {
  background-color: #3EA99F !important;
  color: #fff !important;
}
body.color-two-theme .popover {
  background-color: #3EA99F !important;
  border-color: #339088 !important;
  color: #fff !important;
}
body.color-two-theme .popover-header {
  background-color: #339088 !important;
  color: #fff !important;
}
body.color-two-theme .btn-group .btn-primary.active {
  background-color: #3EA99F !important;
  border-color: #339088 !important;
  color: #fff !important;
}
body.color-two-theme .form-control:focus {
  border-color: #3EA99F !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.075), 0 0 0 0.2rem #3EA99F33;
}
body.color-two-theme .dropdown-item.active,
body.color-two-theme .dropdown-item:active {
  background-color: #3EA99F !important;
  color: #fff !important;
}
body.color-two-theme .accordion-button:not(.collapsed) {
  background-color: #3EA99F !important;
  color: #fff !important;
  border-color: #339088 !important;
}
body.color-two-theme .table-primary,
body.color-two-theme thead {
  background-color: #3EA99F !important;
  color: #fff !important;
}
body.color-two-theme .form-select:focus {
  border-color: #3EA99F !important;
  box-shadow: 0 0 0 0.25rem rgba(62, 169, 159, 0.25);
}
body.color-two-theme .form-check-input:checked {
  background-color: #3EA99F;
  border-color: #2f8f86;
}
body.color-two-theme .form-range::-webkit-slider-thumb {
  background-color: #3EA99F;
}
body.color-two-theme .form-range::-moz-range-thumb {
  background-color: #3EA99F;
}
body.color-two-theme .input-group-text {
  background-color: #3EA99F;
  color: #fff;
  border-color: #2f8f86;
}
body.color-two-theme ::placeholder {
  color: #3EA99F;
  opacity: 0.7;
}
body.color-two-theme select.form-select {
  background-color: #f8f9fa;
  border-color: #3EA99F;
  color: #212529;
}
body.color-two-theme select.form-select:focus {
  border-color: #3EA99F;
  box-shadow: 0 0 0 0.25rem rgba(62, 169, 159, 0.25);
}

/* Világos téma – Bootstrap icons */
body.light-theme.color-two-theme .bi {
  color: #222;
}
body.light-theme.color-two-theme .bi:hover,
body.light-theme.color-two-theme .bi:active {
  color: #3EA99F;
}

/* Sötét téma – Bootstrap icons */
body.dark-theme.color-two-theme .bi {
  color: #eee;
}
body.dark-theme.color-two-theme .bi:hover,
body.dark-theme.color-two-theme .bi:active {
  color: #3EA99F;
}

/* Pagination */
body.light-theme.color-two-theme .pagination .page-item.active .page-link,
body.dark-theme.color-two-theme .pagination .page-item.active .page-link {
  background-color: #3EA99F;
  border-color: #3EA99F;
  color: #fff;
}

/* Linkek */
body.light-theme.color-two-theme a {
  color: #222;
}
body.light-theme.color-two-theme a:hover,
body.light-theme.color-two-theme a:active {
  color: #3EA99F;
}
body.dark-theme.color-two-theme a {
  color: #eee;
}
body.dark-theme.color-two-theme a:hover,
body.dark-theme.color-two-theme a:active {
  color: #3EA99F;
}

/* === Color 3 Sunshine Yellow (FDD017) === */
body.color-three-theme .text-primary {
  color: #FDD017 !important;
}
body.color-three-theme .btn-link {
  color: #FDD017 !important;
  background-color: transparent !important;
  text-decoration: underline;
}
body.color-three-theme .btn-link:hover {
  color: #caa900 !important;
  background-color: transparent !important;
}
body.color-three-theme .badge.bg-primary,
body.color-three-theme .text-bg-primary,
body.color-three-theme .progress-bar.bg-primary,
body.color-three-theme .border-primary,
body.color-three-theme .alert-primary,
body.color-three-theme .list-group-item-primary {
  background-color: #FDD017 !important;
  border-color: #caa900 !important;
  color: #212529 !important;
}
body.color-three-theme .alert-primary,
body.color-three-theme .list-group-item-primary {
  color: #212529 !important;
}
body.color-three-theme .bg-primary {
  background-color: #FDD017 !important;
  border-color: #caa900 !important;
}
body.color-three-theme .btn-primary {
  background-color: #FDD017;
  border-color: #caa900;
  color: #212529 !important;
}
body.color-three-theme .btn-primary:hover {
  background-color: #e6be00;
  border-color: #b39700;
  color: #212529 !important;
}
body.color-three-theme .btn-primary:active {
  background-color: #b39700;
  border-color: #8f7c00;
  color: #212529 !important;
}
body.color-three-theme .tooltip-inner {
  background-color: #FDD017 !important;
  color: #212529 !important;
}
body.color-three-theme .popover {
  background-color: #FDD017 !important;
  border-color: #caa900 !important;
  color: #212529 !important;
}
body.color-three-theme .popover-header {
  background-color: #caa900 !important;
  color: #212529 !important;
}
body.color-three-theme .btn-group .btn-primary.active {
  background-color: #FDD017 !important;
  border-color: #caa900 !important;
  color: #212529 !important;
}
body.color-three-theme .form-control:focus {
  border-color: #FDD017 !important;
  box-shadow: 0 0 0 0.25rem rgba(253, 208, 23, 0.25);
}
body.color-three-theme .dropdown-item.active,
body.color-three-theme .dropdown-item:active {
  background-color: #FDD017 !important;
  color: #212529 !important;
}
body.color-three-theme .accordion-button:not(.collapsed) {
  background-color: #FDD017 !important;
  color: #212529 !important;
  border-color: #caa900 !important;
}
body.color-three-theme .table-primary,
body.color-three-theme thead {
  background-color: #FDD017 !important;
  color: #212529 !important;
}
body.color-three-theme .form-select:focus {
  border-color: #FDD017 !important;
  box-shadow: 0 0 0 0.25rem rgba(253, 208, 23, 0.25);
}
body.color-three-theme .form-check-input:checked {
  background-color: #FDD017;
  border-color: #caa900;
}
body.color-three-theme .form-range::-webkit-slider-thumb {
  background-color: #FDD017;
}
body.color-three-theme .form-range::-moz-range-thumb {
  background-color: #FDD017;
}
body.color-three-theme .input-group-text {
  background-color: #FDD017;
  color: #212529;
  border-color: #caa900;
}
body.color-three-theme ::placeholder {
  color: #FDD017;
  opacity: 0.7;
}
body.color-three-theme select.form-select {
  background-color: #f8f9fa;
  border-color: #FDD017;
  color: #212529;
}
body.color-three-theme select.form-select:focus {
  border-color: #FDD017;
  box-shadow: 0 0 0 0.25rem rgba(253, 208, 23, 0.25);
}

/* Világos téma – Bootstrap icons */
body.light-theme.color-three-theme .bi {
  color: #222;
}
body.light-theme.color-three-theme .bi:hover,
body.light-theme.color-three-theme .bi:active {
  color: #FDD017;
}

/* Sötét téma – Bootstrap icons */
body.dark-theme.color-three-theme .bi {
  color: #eee;
}
body.dark-theme.color-three-theme .bi:hover,
body.dark-theme.color-three-theme .bi:active {
  color: #FDD017;
}

/* Pagination */
body.light-theme.color-three-theme .pagination .page-item.active .page-link,
body.dark-theme.color-three-theme .pagination .page-item.active .page-link {
  background-color: #FDD017;
  border-color: #FDD017;
  color: #212529;
}

/* Linkek */
body.light-theme.color-three-theme a {
  color: #222;
}
body.light-theme.color-three-theme a:hover,
body.light-theme.color-three-theme a:active {
  color: #FDD017;
}
body.dark-theme.color-three-theme a {
  color: #eee;
}
body.dark-theme.color-three-theme a:hover,
body.dark-theme.color-three-theme a:active {
  color: #FDD017;
}

/* === Color 4 Dark Olive Green (556B2F) === */
body.color-four-theme .text-primary {
  color: #556B2F !important;
}
body.color-four-theme .btn-link {
  color: #556B2F !important;
  background-color: transparent !important;
  text-decoration: underline;
}
body.color-four-theme .btn-link:hover {
  color: #3f511e !important;
  background-color: transparent !important;
}
body.color-four-theme .badge.bg-primary,
body.color-four-theme .text-bg-primary,
body.color-four-theme .progress-bar.bg-primary,
body.color-four-theme .border-primary,
body.color-four-theme .alert-primary,
body.color-four-theme .list-group-item-primary {
  background-color: #556B2F !important;
  border-color: #3f511e !important;
  color: #fff !important;
}
body.color-four-theme .alert-primary,
body.color-four-theme .list-group-item-primary {
  color: #212529 !important;
}
body.color-four-theme .bg-primary {
  background-color: #556B2F !important;
  border-color: #3f511e !important;
}
body.color-four-theme .btn-primary {
  background-color: #556B2F;
  border-color: #3f511e;
  color: #fff !important;
}
body.color-four-theme .btn-primary:hover {
  background-color: #6b8439;
  border-color: #556B2F;
  color: #fff !important;
}
body.color-four-theme .btn-primary:active {
  background-color: #3f511e;
  border-color: #2f3d15;
  color: #fff !important;
}
body.color-four-theme .tooltip-inner {
  background-color: #556B2F !important;
  color: #fff !important;
}
body.color-four-theme .popover {
  background-color: #556B2F !important;
  border-color: #3f511e !important;
  color: #fff !important;
}
body.color-four-theme .popover-header {
  background-color: #3f511e !important;
  color: #fff !important;
}
body.color-four-theme .btn-group .btn-primary.active {
  background-color: #556B2F !important;
  border-color: #3f511e !important;
  color: #fff !important;
}
body.color-four-theme .form-select:focus {
  border-color: #556B2F !important;
  box-shadow: 0 0 0 0.25rem rgba(85, 107, 47, 0.25);
}
body.color-four-theme .form-check-input:checked {
  background-color: #556B2F;
  border-color: #3f511e;
}
body.color-four-theme .form-range::-webkit-slider-thumb {
  background-color: #556B2F;
}
body.color-four-theme .form-range::-moz-range-thumb {
  background-color: #556B2F;
}
body.color-four-theme .input-group-text {
  background-color: #556B2F;
  color: #fff;
  border-color: #3f511e;
}
body.color-four-theme ::placeholder {
  color: #556B2F;
  opacity: 0.7;
}
body.color-four-theme select.form-select {
  background-color: #f8f9fa;
  border-color: #556B2F;
  color: #212529;
}
body.color-four-theme select.form-select:focus {
  border-color: #556B2F;
  box-shadow: 0 0 0 0.25rem rgba(85, 107, 47, 0.25);
}

/* Világos téma – Bootstrap icons */
body.light-theme.color-four-theme .bi {
  color: #222;
}
body.light-theme.color-four-theme .bi:hover,
body.light-theme.color-four-theme .bi:active {
  color: #556B2F;
}

/* Sötét téma – Bootstrap icons */
body.dark-theme.color-four-theme .bi {
  color: #eee;
}
body.dark-theme.color-four-theme .bi:hover,
body.dark-theme.color-four-theme .bi:active {
  color: #556B2F;
}

/* Pagination */
body.light-theme.color-four-theme .pagination .page-item.active .page-link,
body.dark-theme.color-four-theme .pagination .page-item.active .page-link {
  background-color: #556B2F;
  border-color: #556B2F;
  color: #fff;
}

/* Linkek */
body.light-theme.color-four-theme a {
  color: #222;
}
body.light-theme.color-four-theme a:hover,
body.light-theme.color-four-theme a:active {
  color: #556B2F;
}
body.dark-theme.color-four-theme a {
  color: #eee;
}
body.dark-theme.color-four-theme a:hover,
body.dark-theme.color-four-theme a:active {
  color: #556B2F;
}

/* === ALAP SELECT STÍLUSOK === */
select.form-select {
  background-color: inherit;
  color: inherit;
  border: 1px solid var(--bs-border-color, #ced4da);
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}

/* === DARK / LIGHT TÉMÁK === */
body.light-theme select.form-select {
  background-color: #ffffff;
  color: #000000;
}

body.dark-theme select.form-select {
  background-color: #1f1f1f;
  color: #f8f9fa;
  border-color: #444;
}
select.form-select:focus {
  outline: none;
}


/* === Light - Dark válto === */
/* === NAVBAR / SIDEBAR THEME === */

/* Világos */
.light-theme #sidebar {
  background-color: #ffffff !important;
  color: #212529 !important;
  border-color: #ccc !important;
}

/* Sötét */
.dark-theme #sidebar {
  background-color: #1e1e1e !important;
  color: #e4e4e4 !important;
  border-color: #444 !important;
}


/* == DRAGBURGER == */

#dragburger i {
  color: #fff !important;
}
.dragburger-btn {
/*   position: fixed;
  top: 16px;  kiindulási pozíció
  left: calc(100% - 90px);  jobb felső sarokhoz közel */
  width:65px;
  height: 65px;
  margin-right: 6px;
  border: none;
  border-radius: 50%;
  padding: none;
  z-index: 1065;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 6px 12px 20px rgba(0, 0, 0, 0.4);
  border-radius: 50%; /* ha eddig nem volt */
  transition: box-shadow 0.3s ease;

}

.dragburger-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
/*  transform: translate(-10%, -10%); */
}
@keyframes rotateInCW {
  from { transform: rotate(-90deg); opacity: 0; }
  to   { transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateInCCW {
  from { transform: rotate(90deg); opacity: 0; }
  to   { transform: rotate(0deg); opacity: 1; }
}

@keyframes rotateOutCW {
  from { transform: rotate(0deg); opacity: 1; }
  to   { transform: rotate(90deg); opacity: 0; }
}

@keyframes rotateOutCCW {
  from { transform: rotate(0deg); opacity: 1; }
  to   { transform: rotate(-90deg); opacity: 0; }
}

.dragburger-btn img.rotate-in-cw {
  animation: rotateInCW 0.3s ease forwards;
}
.dragburger-btn img.rotate-out-cw {
  animation: rotateOutCW 0.3s ease forwards;
}
.dragburger-btn img.rotate-in-ccw {
  animation: rotateInCCW 0.3s ease forwards;
}
.dragburger-btn img.rotate-out-ccw {
  animation: rotateOutCCW 0.3s ease forwards;
}
#unlockBtn {
  margin-left: auto;
  z-index: 1060;
}
#dragburger-modes .btn {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  border-radius: 0.75rem;
}

#sidebarBackdrop {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.6);
  transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
  z-index: 1040;
}

#sidebarBackdrop.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease-in-out;
}

/* == Betűméret témák == */
html.font-small {
  font-size: 0.875rem; /* ~14px */
}
html.font-normal {
  font-size: 1rem; /* 16px */
}
html.font-large {
  font-size: 1.125rem; /* ~18px */
}

/* Sidebar */
/* Zoom + fade alapbeállítás, oldalhoz illeszkedő pozícióval */
#sidebar {
  position: fixed;
  top: 0;
  width: 75%;
  height: 100%;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 1051;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  padding: 2rem;
}

@media (min-width: 768px) {
  #sidebar {
    padding: 3rem;
  }
}

#sidebar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Balról */
#sidebar.from-left {
  left: 0;
  right: auto;
}

/* Jobbról */
#sidebar.from-right {
  right: 0;
  left: auto;
}

#sidebar.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Extra padding és margin, ahogy eddig is */
#sidebar .border-top {
  margin-bottom: 4rem;
}

#sidebar .p-3 {
  padding-bottom: 5rem;
}

/* === Scrollbar stílus (világos téma) === */
body.light-theme #sidebar::-webkit-scrollbar {
  width: 10px;
}

body.light-theme #sidebar::-webkit-scrollbar-track {
  background: #f0f0f0;
}

body.light-theme #sidebar::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

/* === Scrollbar stílus (sötét téma) === */
body.dark-theme #sidebar::-webkit-scrollbar {
  width: 10px;
}

body.dark-theme #sidebar::-webkit-scrollbar-track {
  background: #222;
}

body.dark-theme #sidebar::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 5px;
}

#mobileNavbar {
  z-index: 1040;
  top: 1rem;
}
#mainNavbar {
  color: var(--bs-body-color);
  transition: color 0.3s ease;
}

#mainNavbar a {
  color: var(--bs-body-color);
  text-decoration: none;
}

#mainNavbar a:hover {
  color: var(--bs-primary);
}
  #mode-free,
#mode-edge {
  display: none !important;
}
/* dragburger ikon valtas animacio */
@keyframes fadeOutQuick {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.8); }
}

@keyframes fadeInQuick {
  from { opacity: 0; transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}

.dragburger-btn img.fade-out {
  animation: fadeOutQuick 0.15s forwards;
}

.dragburger-btn img.fade-in {
  animation: fadeInQuick 0.2s forwards;
}

/* Alapértelmezett logo: világos téma */
.theme-logo-dark {
  display: none;
}
body.dark-theme .theme-logo-light {
  display: none;
}
body.dark-theme .theme-logo-dark {
  display: inline;
}

.fancy-corners {
  border-top-left-radius: 2px;
  border-top-right-radius: 50px;
  border-bottom-right-radius:2px;
  border-bottom-left-radius: 50px;
  box-shadow: 6px 12px 20px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s ease;
}

.fancybox__container {
  background-color: rgba(0, 0, 0, 0.95);
}

.fancybox__image {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.zur-galerie-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  background-color: var(--bs-primary);
  color: #fff;
  opacity: 1;
  border: none;
  border-radius: 6px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); /* ✨ erősebb, puhább árnyék */
}

.zur-galerie-btn:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); /* ✨ lebegő hatás */
}
.thumbnail-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}
.thumbnail-wrapper {
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  box-sizing: border-box;
}
#galerie .row {
  margin-right: 0;
  margin-left: 0;
}

#galerie .col-12 {
  padding-left: 0;
  padding-right: 0;
}

#galerie img {
  max-width: 100%;
  height: auto;
  display: block;
}
body {
  overflow-x: hidden;
}

body.light-theme .navbar-brand-name {
  color: #000 !important;
}

body.dark-theme .navbar-brand-name {
  color: #fff !important;
}

.justify-text {
  text-align: justify;
}

#toggleSettings {
  margin-top: 1rem;
}

#settingsContent {
  margin-top: 0.75rem;
  margin-bottom: 3rem;
}