::selection {
  background-color: #ed2e4d; /* your custom green */
  color:             #fff;    /* white text */
}
::-moz-selection {
  background-color: #ed2e4d;
  color:             #fff;
}

/* make sure dark-mode (data-bs-theme="dark") still uses the same style */
[data-bs-theme="dark"] ::selection {
  background-color: #1d5349 !important;
  color:             #fff    !important;
}
[data-bs-theme="dark"] ::-moz-selection {
  background-color: #1d5349 !important;
  color:             #fff    !important;
}body { 
    background-color: #98c5a8;
    position: relative;
    overflow: hidden;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents scrolling issues */
}

#powered_by_leaderos {
	opacity: 0 !important;
}

.auth-logo {
	z-index: 11;
}

.crown-container {
    position: fixed; /* Prevents cutoff */
    top: 0;
    left: -2.5%;
    width: 100%;
    height: 100vh; /* Makes sure it covers the full viewport */
    pointer-events: none;
    z-index: 1;
}
.crown {
    position: absolute;
    width: 40px;
    opacity: 0.10;
    filter: brightness(0.7);
    animation: moveCrown 20s infinite alternate linear;
}

/* Generate random positioning for multiple crowns */
.crown:nth-child(1) { left: 5%; top: 10%; width: 50px; opacity: 0.2; animation-duration: 6s; }
.crown:nth-child(2) { left: 20%; top: 30%; width: 40px; opacity: 0.15; animation-duration: 12s; }
.crown:nth-child(3) { left: 50%; top: 50%; width: 60px; opacity: 0.25; animation-duration: 8s; }
.crown:nth-child(4) { left: 75%; top: 20%; width: 55px; opacity: 0.18; animation-duration: 15s; }
.crown:nth-child(5) { left: 90%; top: 70%; width: 45px; opacity: 0.22; animation-duration: 10s; }
/* Repeat up to 150 crowns with different values */

@keyframes moveCrown {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(50px, 100px) rotate(45deg); }
    50% { transform: translate(-30px, -50px) rotate(90deg); }
    75% { transform: translate(100px, -30px) rotate(180deg); }
    100% { transform: translate(-50px, 70px) rotate(360deg); }
}


.card-login {
	position: relative;
    width: 500px;
    padding: 30px;
    border-radius: 10px;
    background: white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
	z-index: 1000;


    margin-top: -2%;
    margin-left: -5.3%;
}

.auth-logo {
    position: relative;
    z-index: 110; /* Slightly above the card */
    width: 30%;
    height: auto;
    max-height: 400px;
    margin-top: 30%;
    transition: transform 0.3s ease;
}

/* Ensure input wrapper is positioned correctly */
.input-wrapper {
    position: relative; /* Keeps elements inside aligned properly */
    width: 100%;
    margin-bottom: 20px;
}

/* Ensure input field takes full width */
.input-field {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 15px;
    background: #f8f9fa;
    color: #1d5349;
    margin-bottom: -5px; /* Reduced space between inputs */
}

.input-field::placeholder {
    font-size: 14px;
    color: #2b8d7a !important;
    opacity: 1;
}

/* Position "Forgot Password" correctly */
.forgot-password {
    position: absolute;
    right: 10px; /* Keeps it exactly 5px from the right border */
    top: 39%; /* Centers vertically */
    transform: translateY(-50%);
    font-size: 14px;
    color: #6eada2;
    text-decoration: none;
    white-space: nowrap; /* Prevents it from wrapping */
}


.card-login-header {
    margin-bottom: 20px;
}

.logo-text {
    font-size: 32px;
    font-weight: bold;
    color: #007bff;
    text-transform: uppercase;
}

.card-login-body h2 {
    font-weight: bold;
    font-size: 26px; /* Adjust heading size */
    color: #1d5349; 
    margin-bottom: 10px; /* Reduced vertical gap */
}

.card-login-body p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 15px; /* Reduced spacing */
}


.forgot-password:hover {
    text-decoration: underline;
}

.remember-me {
    display: flex;
    align-items: center;
    justify-content: start; /* Aligns checkbox and text */
    gap: 10px; /* Space between checkbox and label */
    font-size: 16px;
    color: #1d5349; /* Matches theme */
    cursor: pointer;
    margin: 15px 0; /* Adjust spacing */
}

/* Style the checkbox into a circle */
.remember-me input[type="checkbox"] {
    appearance: none; /* Removes default checkbox style */
    width: 20px;
    height: 20px;
    border-radius: 50%; /* Makes it a circle */
    border: 2px solid #1d5349; /* Dark green border */
    background-color: transparent;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

/* Animation for checkbox when checked */
.remember-me input[type="checkbox"]:checked {
    background-color: green; /* Fill with dark green */
    border: 2px solid #153d36; /* Slightly darker green */
    transform: scale(1.1); /* Add a subtle scale effect */
}

/* Fun bounce animation when clicked */
@keyframes bounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Apply bounce animation when checked */
.remember-me input[type="checkbox"]:checked {
    animation: bounce 0.3s ease-in-out;
}

/* Add a little checkmark */
.remember-me input[type="checkbox"]::before {
    content: "✔"; /* Checkmark */
    font-size: 14px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Initially hidden */
    transition: transform 0.2s ease-in-out;
}

/* Show the checkmark when checked */
.remember-me input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
}

.btn-login {
    width: 100%;
    padding: 12px;
    background-color: #2cb069;
    color: white;
    font-weight: bold;
    font-size: 16px; /* Slightly smaller font */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    margin-top: 10px; /* Reduce space above the button */
}

.btn-login:hover {
    background-color: #24955a;
}

.discord-login {
    margin-top: 20px;
}

.btn-discord {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px;
    background-color: #5865F2;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    margin-bottom: 20px;
    gap: 10px; /* Adds space between the icon and text */
}

.btn-discord::before {
    content: "";
    width: 20px; /* Adjust size as needed */
    height: 20px;
    background-image: url('/assets/flat/pilt/discordicon.png'); /* Path to your icon */
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    margin-right: -5px;
    margin-top: 0.5%;
}


.btn-discord:hover {
    background-color: #4a5acf;
    text-decoration: none;
}

.register-link {
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
}

.register-link span {
    color: #1d5349; /* Updated Pole kasutajat color */
}

.register-link a {
    color: var(--tblr-primary); /* Updated Registreeri color */
    text-decoration: none;
    font-weight: bold;
}

.register-link a:hover {
    color: #26864c; /* Updated hover color for Registreeri */
    text-decoration: underline; /* Underlined on hover */
}

/* Hover Effect */
.auth-logo:hover {
    transform: translateY(-10px) scale(1.1); /* Moves it up and increases size */
    background: transparent;
}

.text-center {
    color: #1d5349 !important;
}

.auth-layout-fix {
    display: block !important; /* Overrides Bootstrap flex */
    height: auto !important;
    min-height: 100vh; /* Ensures full-page height */
	width: auto !important;
}

/* Ensure the page stays properly centered */
.page-center {
    display: block !important;
    margin: auto;
    text-align: center;
}

.text-center.text-secondary {
    font-size: 14px;
    color: #6c757d;
    margin-top: 10px; /* Reduce spacing */
}

.login-link {
    margin-top: 10px;
    font-size: 16px;
    text-align: center;
	color: #26864c;
}
.login-link:hover {
    color: #26864c; /* Updated Registreeri color */
    text-decoration: none;
    font-weight: bold;
	text-decoration: underline;
}

@media (max-height: 840px) {
  .card-login {
    /* ditch the old negative‐margin hack */
    margin: 0 auto;
    /* absolutely position it from the top instead */
    position: absolute;
    top: 35vh;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* even shorter screens — pull it up more */
@media (max-height: 800px) {
  .card-login {
    top: 30vh;
  }
  .auth-logo{
	  display: none;
}

/* very low screens — minimal top offset + hide the crowns */
@media (max-height: 600px) {
  .card-login {
    top: 2vh;
  }
  .crown-container {
    display: none;
  }
}


@media (max-width: 600px) {
    .card-login {
        width: 90%;
        padding: 15px;
    }

    .card-login-body h2 {
        font-size: 22px;
        margin-bottom: 8px;
    }

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

    .btn-login {
        font-size: 14px;
        padding: 10px;
    }

    .text-center.text-secondary {
        font-size: 14px;
        margin-top: 8px;
    }
}

[data-bs-theme="dark"] {
    /* Override inner elements if needed */
    .card-login {
        background-color: #1f2125;
        color: #ffffff;
        border: none;
    }
    .card-login-body {
        background-color: #1f2125;
        color: #ffffff;
    }
    .login-form {
        background-color: transparent;
        color: #ffffff;
    }
    .input-field {
        background-color: #212224 !important;
        color: #ffffff;
        border: 1px solid #444444;
    }
    .input-field::placeholder {
        color: #888888;
    }
    .input-wrapper a.forgot-password,
    .forgot-password {
        color: #adadb0 !important;
    }
    .forgot-password:hover,
    .input-wrapper a.forgot-password:hover {
        color: #ffffff !important;
    }
    .btn-login {
        background-color: #008f5e !important;
        color: #ffffff;
        border: none;
    }
    .btn-login:hover {
        background-color: #2cb069 !important;
    }
    .btn-discord,
    .btn-discord:hover {
        color: #ffffff !important;
    }
    .login-link {
        color: #adadb0 !important;
    }
    .login-link:hover {
        color: #ffffff !important;
    }
    .text-center .mb-4 {
        display: none !important;
        color: transparent !important;
    }
	.text-center {
		color: #ffffff !important;
	}
}

[data-bs-theme="dark"] body {
	background-color: #24262b !important;
}