/* ==========================================================

   BASIC STYLES

   ========================================================== */

body {

    margin: 0;

    padding: 0;

    background: #0d0d0d;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    font-family: Arial, sans-serif;

    gap: 20px;

}

/* ==========================================================

   DYNAMIC WIDTH VARIABLES

   ========================================================== */

:root {

    --box-width: min(90vw, 480px);

    --title-width: min(90vw, 450px);

}

/* ==========================================================

   MENUBAR STYLES

   ========================================================== */

.menubar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  gap: 15px;
  position: fixed;
  top: 30px;
  left: 10px;
  width: 100%;
  z-index: 900;
}
.menu-logout {
    align-items: center;
}
/* Logout button styles */
.logout-btn {
    background: transparent !important;
    border: none;
    padding: 0;
    padding-top: 12px;
    cursor: pointer;
    appearance: none;
    transition: transform 0.2s ease,filter 0.1s ease;
}

.logout-btn:hover,
.logout-btn:focus-visible {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.logout-icon {
    width: 62px;
    height: 62px;
}

/* Menu link styles */
.menubar a {
  position: relative;
  background: #2a2a2a;
  color: #ccc;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1.2em;
  letter-spacing: 0.08em;
  font-weight: 400;
  padding: 10px 28px;
  transition: 0.4s;
}

.menubar a::before {
  content: '';
  position: absolute;
  inset: 2px;
  background: #1f1f1f;
}

.menubar a span {
  position: relative;
  z-index: 1;
}

.menubar a i {
  position: absolute;
  inset: 0;
  display: block;
}

.menubar a i::before {
  content: '';
  position: absolute;
  top: 0;
  left: 75%;
  width: 30px;
  height: 3px;
  background: #8e8e8e;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.4s;
}

.menubar a i::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 20px;
  height: 3px;
  background: #8e8e8e;
  transform: translateX(-50%) skewX(325deg);
  transition: 0.4s;
}

/* HOVER */
.menubar a:hover {
  background: var(--clr);
  color: var(--clr);
  letter-spacing: 0.12em;
  box-shadow: 0 0 25px var(--clr);
}

.menubar a:hover i::before {
  width: 18px;
  left: 20%;
}

.menubar a:hover i::after {
  width: 18px;
  left: 80%;
}

/* RESPONSIVE STYLES */

@media (max-width: 768px) {

   body {
    padding-top: 20px;
  }

  .menubar {
    top: 0;
    height: auto;
    padding: 10px 8px;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .menubar a {
    font-size: 0.85rem;
    padding: 8px 16px;
    letter-spacing: 0.05em;
  }

  .menubar a::before {
    inset: 1px;
  }

  .menubar a i::before,
  .menubar a i::after {
    height: 3px;
  }
}

/* ==========================================================

   FOOTER STYLES

   ========================================================== */
.footer {
    background-color: #1a1a1a;
    color: #aaa;
    border-top: 1px solid #333;
    text-align: center; 
    padding: 2px 0;
    position: fixed; 
    left: 0;
    bottom: 0;
    width: 100%; 
    font-size: 0.9rem;
    z-index: 1000;
}

.footer p:hover {
    text-decoration: underline;
}


/* ==========================================================

    LOGIN TITLE BOX

   ========================================================== */

.login-title-box {

    position: relative;

    width: var(--title-width);

    padding: 15px;

    text-align: center;

    font-size: 22px;

    font-weight: bold;

    color: white;

    background: #121212ff;

    border-radius: 60px 60px 3px 3px;

    overflow: hidden;

    top: 28px;

}



.login-title-box::before {

    content: "";

    position: absolute;

    top: 0;

    left: -60%;

    width: 100%;

    height: 100%;

    background: linear-gradient(

        90deg,

        rgba(164, 164, 164, 0.15),

        rgba(145, 145, 145, 0.45),

        rgba(255,255,255,0.15)

    );

    filter: blur(4px);

    animation: slideTitleGlow 4.5s linear infinite;

    z-index: 1;

}



@keyframes slideTitleGlow {

    0% { left: -100%; }

    100% { left: 120%; }

}

/* ==========================================================

    GLOW BOX

   ========================================================== */

.glow-box {

    position: relative;

    width: var(--box-width);

    padding: 2px;

    border-radius: 12px;

    overflow: hidden;

}

.glow-box::before {

    content: "";

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(

        0deg,

        rgba(90, 90, 90, 1),

        rgba(255,255,255,1),

        rgba(90, 90, 90, 1),

        rgba(255,255,255,1)

    );

    animation: rotateGlow 6s linear infinite;

}



.glow-box::after {

    content: "";

    position: absolute;

    inset: 4px;

    background: #161616;

    border-radius: 10px;

    z-index: 10;

}



@keyframes rotateGlow {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



/* ==========================================================

    LOGIN BOX

   ========================================================== */

.login-box {

    position: relative;

    z-index: 20;

    padding: 30px;

    color: #fff;

}



/* ==========================================================

    INPUT GROUPS

   ========================================================== */

.input-group {

    margin-bottom: 18px;

}



.input-group label {

    font-size: 14px;

    color: #d9d9d9;

}



.input-group input {

    width: 100%;

    padding: 12px;

    background: #262626;

    border: none;

    border-radius: 6px;

    font-size: 15px;

    color: #fff;

    margin-top: 5px;

    box-sizing: border-box;

}



.input-group input:focus {

    background: #303030;

}



/* --- Forgot password link --- */

.forgot {

    text-align: right;

    margin-top: -10px;

    margin-bottom: 15px;

}



.forgot a {

    font-size: 13px;

    color: #4caf50;

    text-decoration: none;

    cursor: pointer;

}

.forgot a:hover {

    text-decoration: underline;

}

/* ==========================================================

   BUTTONS

   ========================================================== */

button {

    width: 100%;

    padding: 12px;

    background: #6b6b6bff;

    border: none;

    border-radius: 6px;

    font-size: 16px;

    cursor: pointer;

    margin-top: 5px;

    color: #fff;

}



button:hover {

    background: #45a049;

}

#fb_login:hover {

    background: #145dbf;

}



/* ==========================================================

   SOCIAL BUTTONS

   ========================================================== */

.social-buttons {

    margin-top: 20px;

    display: flex;

    gap: 10px;

    justify-content: space-between;

}



.icon-btn {

    width: 10%;

    padding: 11px;

    border-radius: 6px;

    cursor: pointer;

    border: none;

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    top: -6px;

    left: 40%;

}



.icon-btn svg {

    width: 20px;

    height: 20px;

}





#googleBtn /*Google*/

{

    position: relative;

    left: -35%;

}



.fb-btn { background: #1877F2; }

.google-btn { background: #DB4437; }

.icon-btn:hover { opacity: 0.85; }



/* ==========================================================

   REGISTER TEXT

   ========================================================== */

.bottom-text {

    text-align: center;

    margin-top: 15px;

    color: #bbb;

    font-size: 14px;

}



.bottom-text a {

    color: #4caf50;

    text-decoration: none;

    cursor: pointer;

}

.bottom-text a:hover {

    text-decoration: underline;

}



/* ==========================================================

    RESPONSIVE STYLES

   ========================================================== */

@media (max-width: 400px) {

    .login-title-box { font-size: 20px; padding: 12px; }

    .login-box { padding: 20px; }

    .input-group input { font-size: 14px; padding: 10px; }

    button { font-size: 15px; padding: 10px; }

    .social-buttons .icon-btn svg { width: 22px; height: 22px; }

}



/* ==========================================================

    ERROR MESSAGES

   ========================================================== */



.error-message {

    color: #ff4d4d;

    font-size: 12px;

    margin-top: 3px;

    display: block;

    height: 14px;

}



/* ==========================================================

    POPUP STYLES

   ========================================================== */

.popup-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,0.6);

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

    z-index: 9998;

}



/* ==========================================================

    Active popup overlay

   ========================================================== */

.popup-overlay.active {

    opacity: 1;

    pointer-events: all;

}



/* ==========================================================

    POPUP MODAL

   ========================================================== */

.popup-modal {

    background: #161616; /* alap szürke */

    padding: 30px 25px;

    border: 2px solid #222;

    border-radius: 16px;

    text-align: center;

    color: #fff;

    min-width: 280px;

    max-width: 90%;

    transform: scale(0.8);

    transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;

    opacity: 0;

}



.popup-overlay.active .popup-modal {

    transform: scale(1);

    opacity: 1;

}



/* ==========================================================

    POPUP TYPES

   ========================================================== */



/* SUCCESS */

.popup-modal.success {

    background: #4caf50;

}



/* ERROR */

.popup-modal.error {

    background: #960a00ff;

}



/* ==========================================================

    POPUP BUTTONS

   ========================================================== */

.popup-modal button {

    padding: 10px 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    font-size: 14px;

    color: #222;

    transition: background 0.2s;

}

/* SUCCESS */

.popup-modal.success button {

    background: #2e7d32;

}

.popup-modal.success button:hover {

    background: #1b5e20;

}

/* ERROR */

.popup-modal.error button {

    background: #fff;

}

.popup-modal.error button:hover {

    background: #f8a0a0ff;

}

.hidden { display: none; }



/* ==========================================================

   DASHBOARD UI

   ========================================================== */

        .dashboard-container {

            max-width: 600px;

            margin: 50px auto;

            padding: 20px;

            background: #222;

            color: #fff;

            border-radius: 10px;

            text-align: center;

            overflow: visible;

            height: auto;

        }



        .dashboard-container button {

            padding: 10px 20px;

            margin-top: 20px;

            background: #ff4c4c;

            border: none;

            color: #fff;

            cursor: pointer;

            border-radius: 5px;

            font-size: 16px;

        }



        .dashboard-container button:hover {

            background: #ff1a1a;

        }



        .welcome-message {

            font-size: 24px;

            margin-bottom: 20px;

        }