main, header, body, footer {
    color: var(--content-color);
    background-color: var(--body-color);
}


/* Protection */
html, body {
    -webkit-user-select: none;  /* Chrome, Safari */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE10+ */
    -khtml-user-select: none;
    -webkit-touch-callout: none; /* iOS */
    user-select: none;          /* Современи прелистувачи */
}



/* MENU HOVER  */
.dark-theme-icon:hover {
  color: #26c951;
}
.light-theme-icon:hover {
    color: #26c951;
}
.menu-hover:hover {
    color: #26c951;
}

/* OTHER HOVERS */
a:hover {
    color: var(--link-hover);
}
.learn-badge-icon {
    color: #1f2937;
}
html.dark .learn-badge-icon {
    color: #fafafa;
}
.learn-badge-icon:hover {
    background-color: #4287f5;
    color: #fafafa;
}
html.dark .learn-badge-icon:hover {
    background-color: #4287f5;
    color: #1f2937;
}
.facebook-badge-icon {
    color: #1f2937;
}
html.dark .facebook-badge-icon {
    color: #fafafa;
}
.facebook-badge-icon:hover {
    background-color: #4e6df5;
    color: #fafafa;
}
html.dark .facebook-badge-icon:hover {
    background-color: #4e6df5;
    color: #1f2937;
}


.google-badge-icon {
  bottom: 76px;   /* нагоре */
  right: -24px;     /* надесно */
}  

.facebook-badge-icon {
  bottom: 32px;   /* нагоре */
  right: -18px;     /* надесно */
}

.instagram-badge-icon {
  bottom: 2px;   /* нагоре */
  right: 16px;     /* надесно */
}

body .custom-toc {
  max-height: 310px;
  overflow-y: auto;
  background: var(--sidebar-button-bg);
  border: 1px solid var(--sidebar-button-border);
  border-radius: 10px 0 0 10px;
  font-size: 0.9rem;
  scrollbar-width: thin;     /* Firefox */
  scrollbar-color: #70aafa #ddd;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 1rem;
}

body .custom-toc a {
      color: var(--sidebar-button);
}

.custom-toc ul {
  padding-left: 1rem !important;
  font-weight: 666;
}

.custom-toc ul ul {
  padding-left: 1.25rem;
  font-weight: 444;
}

.custom-toc ul ul ul {
  padding-left: 1.5rem;
  font-weight: 333;
}

h2, h3, h4 {
  scroll-margin-top: 115px;
}

body .custom-toc a:hover {
  color: var(--bonus-link);
  text-decoration: none;
}



/* Анимации за отварање и затворање на менито */
@keyframes openMenu {
  0% { transform: scaleY(0); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes closeMenu {
  0% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* Класи што JS ги додава */
.animate-open {
  animation: openMenu 0.3s ease-in-out forwards;
}

.animate-close {
  animation: closeMenu 0.3s ease-in-out forwards;
}



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

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE / Edge legacy */
body {
  -ms-overflow-style: none;
}


main, .main-content, #content { 
  min-height: 80vh; 
  display: flex;
  flex-direction: column;
}

.search-container-wrapper {
  min-height: 75vh; /* Го држи navbar-от горе */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
}

.verify-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

.verify-logo { width: 80px; height: auto; }

.verify-title-group { display: flex; flex-direction: column; }

.verify-main-title { font-size: 2.2rem; font-weight: bold; line-height: 1; }

.search-box-area { width: 100%; max-width: 500px; padding: 0 20px; }

.search-input-wrapper { position: relative; width: 100%; }

#searchForm {
  display: flex;
  border: 2px solid #0dc657;
  border-radius: 8px;
  overflow: hidden;
}

#searchInput {
  flex: 1;
  background: transparent;
  border: none;
  padding: 12px 15px;
  color: var(--search-text);
  font-size: 1.1rem;
  outline: none;
}

#searchBtn {
  background: #0dc657;
  border: none;
  color: white;
  padding: 8px 20px;
  cursor: pointer;
  font-size: 1.5rem;
}

#searchBtn:hover {
    background: var(--search-btn-bg);
  color: white;
}


/* Основен стил за листата */
#searchResults {
  position: absolute;
  top: 105%;
  left: 0;
  width: 100%;
  background: var(--search-results-bg);
  border: 1px solid #333;
  border-radius: 6px;
  list-style: none;
  z-index: 100;
  display: none;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Стил за секој елемент поединечно */
#searchResults li {
  padding: 12px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--search-results-border);
  transition: all 0.1s ease;
}

/* Hover со маус */
#searchResults li:hover {
  background-color: #26c951;
  color: var(--search-results-hover-color);
}

/* КЛАСАТА ЗА СТРЕЛКИТЕ - ВНИМАВАЈ НА !IMPORTANT */
#searchResults li.selected {
  background-color: #26c951 !important; 
  color: var(--search-results-hover-color);
}




 
html, body {
    height: auto !important; 
    min-height: 100%;
    overflow-x: hidden;
    /* Ако имаш overflow: hidden; тука, ИЗБРИШИ ГО! */
}

/* Провери го главниот контејнер каде што ти е пребарувачот */
.search-container-wrapper {
    position: relative !important;
    /* Осигурај се дека нема overflow: hidden; */
}



/* Стил за Lucky Duck нотификацијата */
.duck-notification {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%) translateY(200px);
    
    background: #fffbe6;
    border: 2px solid #f39c12;
    color: #856404;
    padding: 12px 20px;
    border-radius: 25px; /* Малку помал радиус за кога има повеќе редови */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 9999;
    font-weight: bold;
    
    /* Ова го поправа излегувањето од екран */
    width: 90%; /* Зазема 90% од екранот на мобилен */
    max-width: 450px; /* Но не повеќе од 400px */
    white-space: normal; /* Дозволува нов ред */
    text-align: center;
    
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    visibility: hidden;
}

.duck-notification.show {
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* На компјутер нека си остане попространо и во аголот */
@media (min-width: 768px) {
    .duck-notification {
        left: auto;
        right: 20px;
        transform: translateY(200px);
        width: auto; /* На десктоп нека се шири според текстот */
        text-align: left;
    }
    .duck-notification.show {
        transform: translateX(0) translateY(0);
    }
}

.duck-icon {
    font-size: 24px;
    flex-shrink: 0; /* Спречува иконата да се стисне кога има многу текст */
}




.star-capsule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #f1c40f 0%, #f39c12 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
    border: 1px solid #d4ac0d;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    /* Суптилно светкање */
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(243, 156, 18, 0); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

.star-icon-mini {
    font-size: 16px;
}





header {
    position: fixed;   /* Го „залепува“ за екранот */
    top: 0;           /* Точно на врвот */
    left: 0;
    width: 100%;      /* Да ја зафаќа целата широчина */
    z-index: 1000;    /* Да биде над сите други елементи */
}

/* Бидејќи хедерот сега „лебди“, мораме да ја спуштиме содржината 
   за да не биде покриена од него. Прилагоди ги овие пиксели според висината на твоето мени. */
body {
    padding-top: 70px; 
}

/* Ако имаш специфична класа за менито, примени го истото и таму */
.navbar, .main-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 70px;
}


.btnAuth:hover {
    background-color: #219c4e !important;
}



.copy-badge {
    background-color: #333; /* Темен Енигма стил */
    color: #ff3333; /* Твојата црвена боја за кодови */
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: monospace;
    font-weight: bold;
    border: 1px solid #444;
    transition: all 0.3s ease;
    user-select: none; /* За секој случај да не може да се селектира */
}

.copy-badge:hover {
    background-color: #444;
    border-color: #ff3333;
    box-shadow: 0 0 5px rgba(255, 51, 51, 0.5);
}

.copy-notification {
    position: absolute;
    top: 5px; /* Го става зборот НАД кодот */
    left: 135%;
    transform: translateX(-50%);
    background-color: #2ecc71;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Да не може да се кликне на него */
}

.copy-notification.show {
    opacity: 1;
}




body > footer > div {
    padding: 0;
    line-height: 2;
}

.LAK {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

#val-lak:not(:empty) {
    color: #453003 !important;
    font-family: 'Courier New', monospace;
    font-weight: 777;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 8px; /* Растојание меѓу кодот и клучот */
}

/* Додавање на иконата по текстот */
#val-lak:not(:empty)::after {
    content: "\f084"; /* Ова е Unicode за fa-key во FontAwesome */
    font-family: "Font Awesome 6 Free"; /* Осигурај се дека верзијата е точна */
    font-weight: 900; /* Замени со 400 ако користиш 'regular' верзија */
    font-size: 1em;
    opacity: 0.8;
}

/* Dark mode боја */
.dark #val-lak:not(:empty) {
    color: #f1c40f !important;
}