/* Register Page Specific Styles */

/* Card styling - Base styles for both light and dark mode */
.register-page .card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Light mode specific styles */
.register-page .card {
    background-color: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Form elements - Light mode */
.register-page .form-control {
    background-color: #ffffff;
    color: var(--text-color);
    border-color: #ced4da;
    transition: all 0.3s ease;
}

.register-page .form-control:focus {
    background-color: #ffffff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(140, 82, 255, 0.25);
}

.register-page .form-check-input {
    background-color: #ffffff;
    border-color: #ced4da;
}

.register-page .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Button styling - Light mode */
.register-page .btn-primary {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none;
    transition: all 0.3s ease;
}

.register-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 82, 255, 0.3);
    filter: brightness(1.1);
}

/* Links - Light mode */
.register-page a {
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.register-page a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

/* Blur effects - Light mode */
.register-page .absolute-container {
    pointer-events: none;
}

.register-page .blur-primary {
    background-color: rgba(140, 82, 255, 0.08);
    width: 40vw;
    height: 40vw;
    top: -10%;
    right: -10%;
    pointer-events: none;
}

.register-page .blur-secondary {
    background-color: rgba(94, 23, 235, 0.08);
    width: 30vw;
    height: 30vw;
    bottom: -5%;
    left: -5%;
    pointer-events: none;
}

/* Horizontal rule - Light mode */
.register-page hr {
    border-color: #dee2e6;
    opacity: 0.3;
}

/* Auth card specific styles - Light mode */
.register-page .auth-card {
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.register-page .auth-card-header {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
}

/* Dark mode overrides */
.dark-mode.register-page .card {
    background-color: rgba(30, 36, 50, 0.8);
    border-color: var(--card-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}

/* Form elements - Dark mode */
.dark-mode.register-page .form-control {
    background-color: rgba(44, 48, 52, 0.8);
    color: var(--text-color);
    border-color: var(--border-color);
    transition: all 0.3s ease;
}

.dark-mode.register-page .form-control:focus {
    background-color: rgba(44, 48, 52, 0.9);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(140, 82, 255, 0.25);
}

.dark-mode.register-page .form-check-input {
    background-color: rgba(44, 48, 52, 0.8);
    border-color: var(--border-color);
}

.dark-mode.register-page .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Button styling - Dark mode */
.dark-mode.register-page .btn-primary {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border: none;
    transition: all 0.3s ease;
}

.dark-mode.register-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(140, 82, 255, 0.3);
    filter: brightness(1.1);
}

/* Links - Dark mode */
.dark-mode.register-page a {
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.dark-mode.register-page a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

/* Button Links - Dark mode */
.dark-mode.register-page .btn-link {
    color: var(--primary-color);
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
}

.dark-mode.register-page .btn-link:hover {
    background-color: rgba(140, 82, 255, 0.1);
    color: var(--primary-hover);
    text-decoration: none;
}

/* Navigation Links im Dark Mode */
.dark-mode .navbar {
    position: relative;
    z-index: 100;
    /* Höherer z-index, damit die Navbar über den Blur-Effekten liegt */
}

.dark-mode .navbar .nav-link {
    color: var(--text-color);
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    /* Stellt sicher, dass der Link über anderen Elementen liegt */
    padding: 0.5rem 1rem;
    margin: 0 0.25rem;
    border-radius: 0.25rem;
}

.dark-mode .navbar .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(140, 82, 255, 0.1);
}

.dark-mode .navbar .navbar-brand .brand-text {
    background: linear-gradient(to right, var(--gradient-start), var(--gradient-end));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    position: relative;
    /* Stellt sicher, dass das Logo über anderen Elementen liegt */
}

/* Footer Links im Dark Mode */
.dark-mode .footer a {
    color: var(--primary-color);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.dark-mode .footer a:hover {
    color: var(--primary-hover);
    opacity: 1;
    text-decoration: none;
}

.dark-mode .footer h5 {
    color: white;
}

/* Blur effects - Dark mode */
.dark-mode.register-page .absolute-container {
    pointer-events: none;
    /* Verhindert, dass der Container Klicks abfängt */
}

.dark-mode.register-page .blur-primary {
    background-color: rgba(140, 82, 255, 0.15);
    width: 40vw;
    height: 40vw;
    top: -10%;
    right: -10%;
    pointer-events: none;
    /* Verhindert, dass der Blur-Effekt Klicks abfängt */
}

.dark-mode.register-page .blur-secondary {
    background-color: rgba(94, 23, 235, 0.15);
    width: 30vw;
    height: 30vw;
    bottom: -5%;
    left: -5%;
    pointer-events: none;
    /* Verhindert, dass der Blur-Effekt Klicks abfängt */
}

/* Horizontal rule - Dark mode */
.dark-mode.register-page hr {
    border-color: var(--border-color);
    opacity: 0.2;
}

/* Auth card specific styles - Dark mode */
.dark-mode.register-page .auth-card {
    backdrop-filter: blur(10px);
    background-color: rgba(30, 36, 50, 0.8) !important;
}

.dark-mode.register-page .auth-card-header {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
}

/* Footer im Dark Mode */
.dark-mode .footer {
    background-color: rgba(17, 19, 25, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
}

.dark-mode .footer p {
    color: var(--text-muted);
}

/* Form text helper - Dark mode */
.dark-mode.register-page .form-text {
    color: var(--text-muted) !important;
    font-size: 0.85rem;
}