.navbar {
    background-color: transparent;
    margin: 15px;
    border-radius: 10px;
    height: 50px;
    z-index: 10;
}

.navbar-nav {
    position: relative; /* A highlight abszolút pozícionálásához */
    z-index: 10;
}

/* Semleges osztály, ami fix méretet ad, de NEM kék */
.fancy-stub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    min-width: 130px;
    height: 32px;
    border-radius: 7px;
    background: transparent; 
    color: #A8A8A8;
    padding: 5px 10px; /* kicsi belső margó */
    font-size: 18px;
    text-decoration: none;
    position: relative; /* fontos a z-index működéséhez */
    z-index: 2;
}

/* Semleges osztály, ami fix méretet ad, de NEM kék */
.fancy-stub {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    min-width: 130px;
    height: 32px;
    border-radius: 7px;
    background: transparent; 
    color: #A8A8A8;
    padding: 5px 10px; /* kicsi belső margó */
    font-size: 18px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fancy-btn {
    display: inline-flex; /* lehet inline-flex, hogy ne nyújtsa a navot túl */
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    min-width: 130px;
    height: 32px;
    cursor: pointer;
    position: relative;
    border-radius: 7px;
    color: #000; /* hogy tényleg fekete legyen a szöveg */
    background: none;
    padding: 5px 10px; /* kicsi belső margó */
    font-size: 18px;
    text-decoration: none;
    transition: color 0.3s ease;
    z-index: 2;
}

.fancy-highlight {
    position: absolute;
    top: 0;        /* passzoljon a linkek magasságához */
    left: 0;
    height: 32px;  /* ugyanakkora, mint .fancy-btn / .fancy-stub  */
    border-radius: 7px;
    background: #315ed1;
  
    transition: left 0.4s ease, width 0.4s ease;
    z-index: 1;      /* ha a linkek z-index: auto, ez alul lesz, glow-lal */
}
  
/* Glow animáció */
.fancy-highlight::before {
    content: "";
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 7px;
    background: linear-gradient(45deg, #4A52BD, #9539B8, #E95091, #EE6D72, #F0845E, #EE6D72, #E95091, #9539B8, #4A52BD);
    background-size: 600%;  /* Animációhoz */
    filter: blur(8px);
    opacity: 0;             /* Alapból nem látszik */
    transition: opacity 0.3s ease;
    animation: glow-move 20s linear infinite;
    z-index: -2;            /* A fő elem alatt */
}

.fancy-highlight::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 7px;
    background: #315ed1;   /* Ugyanaz a kék, mint a fő elem */
    z-index: -1;           /* ::before fölött, de a fő elem alatt */
}

/* Csak hover esetén (vagy amikor aktív) jelenjen meg a glow effekt */
.fancy-highlight.active::before {
    opacity: 1;
}

@keyframes glow-move {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

.navbar a:hover {
    color: #E2E2E2;
}
  
.navbar a {
    color: #A8A8A8;
}
  
#separatorline {
    color: #3d3d3d;
}
  
span {
    vertical-align: middle;
}

#successToast{
    font-family: 'SF Pro Display', sans-serif;
    background-color: #28A745; /* Custom orange */
    color: white; /* Text color */
    font-size: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Optional: smooth corners */
}

#errorToast{
    font-family: 'SF Pro Display', sans-serif;
    background-color: #8E1F30;
    color: white; /* Text color */
    font-size: 16px;
    text-align: center;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 10px; /* Optional: smooth corners */
}