/* Elegant & Minimalist Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif; /* More modern font */
    line-height: 1.7;
    background-color: #f8f9fa; /* Lighter background */
    color: #495057; /* Softer text color */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Add Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

header {
    background: linear-gradient(90deg, #4a00e0, #8e2de2); /* Vibrant gradient */
    color: #ffffff;
    padding: 0.8rem 2rem; /* Restore reasonable padding for other elements */
    display: flex;
    justify-content: space-between; /* Space between logo and right side */
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: sticky; /* Keep header visible */
    top: 0;
    z-index: 1000;
    position: relative; /* Needed for absolute positioning of child */
    min-height: 60px; /* Define a minimum height for the bar itself */
}

.logo a {
    text-decoration: none;
    display: inline-block; /* Helps with alignment */
    /* vertical-align: middle; Removed as absolute positioning handles alignment */
    position: static; /* Ensure the link itself doesn't interfere */
}

.logo img {
    height: 250px; /* User requested size */
    width: auto; /* Maintain aspect ratio */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); /* Glow effect for image */
    position: absolute; /* Take logo out of normal flow */
    left: -3.0rem; /* Move slightly further left */
    top: 50%; /* Start positioning from vertical center */
    transform: translateY(-50%); /* Center vertically */
    z-index: 1001; /* Ensure logo is potentially above other header content if needed */
}

.header-right {
    display: flex;
    align-items: center;
}

nav ul {
    list-style: none;
    padding: 0;
    display: flex; /* Align items horizontally */
    margin: 0; /* Reset margin */
}

nav ul li {
    margin-left: 25px; /* Spacing between nav items */
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    position: relative;
    padding-bottom: 5px; /* Space for underline */
}

nav ul li a::after { /* Underline effect on hover */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffffff;
    transition: width 0.3s ease;
}

nav ul li a:hover,
nav ul li a:focus {
    color: #f8f9fa;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

nav ul li a:hover::after {
    width: 100%;
}

.user-status {
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background */
    border-radius: 20px; /* Rounded corners */
    padding: 8px 15px; /* Adjusted padding */
    margin-left: 30px; /* Space between nav and user status */
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
    min-height: 40px; /* Ensure consistent height */
    box-sizing: border-box;
}

.user-status:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.user-info-link {
    display: flex; /* Keep display flex if needed for future icons */
    align-items: center;
    text-decoration: none;
    color: #ffffff;
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    margin-right: 5px; /* Reduced space before admin/logout icon */
}

.login-prompt {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}

.login-prompt:hover {
    text-decoration: underline;
}
.register-prompt { /* Style for register link */
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-left: 5px; /* Add some space before register link */
}

.register-prompt:hover {
    text-decoration: underline;
}

.user-status .separator { /* Style for the separator */
    color: rgba(255, 255, 255, 0.5); /* Make separator less prominent */
    margin: 0 5px; /* Space around separator */
    font-weight: normal;
    font-size: 0.95rem;
}

/* Styling for icons within user-status */
.user-status .admin-link,
.user-status .logout-icon {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    margin-left: 8px; /* Space between icons/username */
    display: inline-flex; /* Align icon vertically */
    align-items: center;
}

.user-status .admin-link i,
.user-status .logout-icon i {
    font-size: 1.1rem; /* Consistent icon size */
    line-height: 1; /* Ensure proper line height */
    vertical-align: middle; /* Align icon if needed */
}

.user-status .admin-link:hover,
.user-status .logout-icon:hover {
    opacity: 1;
}

.main-content {
    flex-grow: 1; /* Ensure main content takes available space */
    display: flex;
    flex-direction: column; /* Allow centering of content like forms */
    /* REMOVED align-items: center; */
    /* REMOVED text-align: center; */
    padding: 3rem 1rem;
    opacity: 0; /* Start hidden for fade-in */
    animation: fadeIn 1.2s 0.3s ease-in-out forwards; /* Delayed Fade-in animation */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.hero { /* Add width control for hero section */
    width: 100%;
    max-width: 800px; /* Limit hero width */
    margin-bottom: 2rem; /* Add space below hero */
    /* Added margin auto for centering */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Center text within hero */
}

.hero h2 {
    font-size: 2.8rem;
    font-weight: 600;
    color: #343a40; /* Darker heading */
    margin-bottom: 1rem;
    line-height: 1.3;
}

.hero p {
    font-size: 1.1rem;
    color: #6c757d; /* Subdued text */
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    background: linear-gradient(90deg, #8e2de2, #4a00e0); /* Match header gradient */
    color: #ffffff;
    padding: 12px 30px;
    border: none;
    border-radius: 25px; /* Rounded corners */
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 0, 224, 0.4); /* Button shadow */
    margin: 0 10px; /* Spacing for multiple buttons */
}

.cta-button:hover,
.cta-button:focus {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 6px 20px rgba(74, 0, 224, 0.5);
}

.cta-button.secondary { /* Style for a potential secondary button */
    background: #ffffff;
    color: #4a00e0;
    border: 2px solid #4a00e0;
    box-shadow: none;
}

.cta-button.secondary:hover,
.cta-button.secondary:focus {
    background: #f8f9fa;
    box-shadow: none;
}


footer {
    text-align: center;
    padding: 1.5rem;
    margin-top: auto; /* Push footer to bottom */
    background: #343a40; /* Dark footer */
    color: #adb5bd; /* Lighter footer text */
    font-size: 0.9rem;
}

/* Responsive Adjustments */
@media(max-width: 768px) {
    header {
        flex-direction: column;
        padding: 1rem;
    }
    .logo a {
        margin-bottom: 0.5rem;
        display: block; /* Center logo */
        text-align: center;
    }
    .header-right {
        flex-direction: column;
        width: 100%;
        margin-top: 0.5rem;
    }
    nav ul {
       justify-content: center; /* Center nav items */
       margin-bottom: 0.5rem;
       flex-wrap: wrap; /* Allow nav items to wrap */
    }
    nav ul li {
        margin: 5px 10px; /* Adjust spacing for smaller screens */
    }
    .user-status {
        margin-left: 0; /* Remove left margin */
        margin-top: 0.5rem; /* Add top margin */
        justify-content: center; /* Center content */
    }
    .hero h2 {
        font-size: 2.2rem;
    }
    .hero p {
        font-size: 1rem;
    }
    .cta-button {
        padding: 10px 25px;
        font-size: 1rem;
    }
    /* Responsive admin layout adjustments */
    .page-container.admin-layout {
        flex-direction: column;
    }
    .admin-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }
     .admin-layout .main-content {
        padding-left: 20px; /* Reset padding for smaller screens */
        align-items: stretch; /* Allow content to stretch */
        text-align: left; /* Reset text align */
    }
}

@media(max-width: 480px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li {
        margin: 8px 0; /* Stack nav items vertically */
    }
    .hero h2 {
        font-size: 1.8rem;
    }
    .main-content {
        padding: 2rem 0.5rem; /* Reduce padding on small screens */
    }
}


/* Form Styling */
.form-container {
    background-color: #ffffff;
    padding: 2rem; /* Adjust padding */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 400px; /* Slightly smaller max-width */
    width: 90%; /* Use percentage for smaller screens */
    margin: 2rem auto; /* Center form */
    text-align: left;
}

.form-container h2 {
    text-align: center;
    color: #343a40;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #495057;
    font-weight: 600;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group textarea, /* Added textarea */
.form-group select { /* Added select */
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit; /* Ensure consistent font */
}

.form-group textarea {
    min-height: 150px; /* Give textarea some height */
    resize: vertical; /* Allow vertical resize */
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="email"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #8e2de2; /* Highlight color */
    box-shadow: 0 0 0 2px rgba(142, 45, 226, 0.2);
}

.form-button {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    margin-top: 0.5rem; /* Space above button */
    /* Inherit .cta-button styles */
    display: inline-block;
    background: linear-gradient(90deg, #8e2de2, #4a00e0);
    color: #ffffff;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 0, 224, 0.4);
    cursor: pointer;
    text-align: center;
}

.form-button:hover,
.form-button:focus {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(74, 0, 224, 0.5);
}


.form-link {
    text-align: center;
    margin-top: 1.5rem;
    color: #6c757d;
}

.form-link a {
    color: #4a00e0;
    text-decoration: none;
    font-weight: 600;
}

.form-link a:hover {
    text-decoration: underline;
}

/* Flash Messages Styling */
.flash-messages {
    position: fixed; /* Keep messages visible */
    top: 80px; /* Below header */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001; /* Above other content */
    width: 90%;
    max-width: 600px;
    padding: 0;
    list-style: none;
}

.alert {
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border-radius: 5px;
    color: #ffffff;
    opacity: 0.95;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative; /* For potential close button */
    text-align: center; /* Center text in flash message */
}

.alert-success {
    background-color: #28a745; /* Green */
}

.alert-danger {
    background-color: #dc3545; /* Red */
}

.alert-warning {
    background-color: #ffc107; /* Yellow */
    color: #333;
}

.alert-info {
    background-color: #17a2b8; /* Blue */
}


/* --- Rank Colors --- */
:root { /* Define base colors */
    --rank-color-default-bg: #6c757d; /* Default grey */
    --rank-color-bronze: #cd7f32;
    --rank-color-silver: #c0c0c0;
    --rank-color-gold: #ffd700;
    --rank-color-platinum: #e5e4e2;
    --rank-color-diamond: #b9f2ff;
    --rank-color-master: #9400d3; /* Dark Violet */
    --rank-color-grandmaster: #ff4500; /* OrangeRed */
    --rank-color-challenger: #ff1493; /* DeepPink */
    --rank-color-epic: #1e90ff; /* DodgerBlue */
    --rank-color-legendary: #ff8c00; /* DarkOrange */
    --rank-color-mythic: #da70d6; /* Orchid */
    --rank-color-divine: #f0e68c; /* Khaki */
    --rank-color-celestial: #add8e6; /* LightBlue */
    --rank-color-cosmic: #9370db; /* MediumPurple */
    --rank-color-ultimate: #ff6347; /* Tomato */
    --rank-progress-bg: #e9ecef; /* Background for the empty part of the progress */
    --rank-indicator-bg: #495057; /* Inner circle background */
    --rank-indicator-text: #ffffff; /* Inner circle text color */
}

/* Apply rank colors via classes - SETTING A SPECIFIC VARIABLE NOW */
.rank-color-default { --rank-specific-color: var(--rank-color-default-bg); }
.rank-color-bronze { --rank-specific-color: var(--rank-color-bronze); }
.rank-color-silver { --rank-specific-color: var(--rank-color-silver); }
.rank-color-gold { --rank-specific-color: var(--rank-color-gold); }
.rank-color-platinum { --rank-specific-color: var(--rank-color-platinum); }
.rank-color-diamond { --rank-specific-color: var(--rank-color-diamond); }
.rank-color-master { --rank-specific-color: var(--rank-color-master); }
.rank-color-grandmaster { --rank-specific-color: var(--rank-color-grandmaster); }
.rank-color-challenger { --rank-specific-color: var(--rank-color-challenger); }
.rank-color-epic { --rank-specific-color: var(--rank-color-epic); }
.rank-color-legendary { --rank-specific-color: var(--rank-color-legendary); }
.rank-color-mythic { --rank-specific-color: var(--rank-color-mythic); }
.rank-color-divine { --rank-specific-color: var(--rank-color-divine); }
.rank-color-celestial { --rank-specific-color: var(--rank-color-celestial); }
.rank-color-cosmic { --rank-specific-color: var(--rank-color-cosmic); }
.rank-color-ultimate { --rank-specific-color: var(--rank-color-ultimate); }


/* --- Rank Display Styling --- */
.rank-section {
    margin-bottom: 2rem; /* Add some space below the rank section */
}

.rank-display {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between circle and text */
    margin-top: 1rem;
}

.rank-progress-container {
    width: 80px; /* Size of the outer circle */
    height: 80px;
    border-radius: 50%;
    position: relative; /* Needed for pseudo-element positioning */
    background-color: var(--rank-progress-bg); /* Set background color for the container */
    /* REMOVED background-image gradient from here */
    display: flex; /* Needed for centering the inner indicator */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    overflow: hidden; /* Clip the pseudo-element */
}

.rank-progress-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* Apply gradient to the pseudo-element */
    background-image: conic-gradient(
        var(--rank-specific-color, var(--rank-color-default-bg)) var(--progress, 0%),
        transparent var(--progress, 0%) /* Use transparent for the rest to show container bg */
    );
    /* z-index: -1; /* Optional: Place behind content if needed */
}

.rank-indicator {
    width: 64px; /* Slightly smaller inner circle */
    height: 64px;
    background-color: var(--rank-indicator-bg);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* No longer needs absolute positioning as container uses flex */
}

.rank-number {
    color: var(--rank-indicator-text);
    font-size: 1.8rem; /* Larger rank number */
    font-weight: 700;
    line-height: 1; /* Ensure text stays centered vertically */
}

.rank-details {
    /* Styles for the text part */
}

.rank-details p {
    margin-bottom: 0.3rem; /* Tighter spacing for rank details */
    font-size: 1rem;
}

.rank-details strong {
    color: #343a40; /* Darker label */
}
/* Dashboard Styling */
.dashboard-container {
    background-color: #ffffff;
    padding: 2rem; /* Adjust padding */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 900px; /* Wider container for dashboard */
    width: 90%;
    margin: 2rem auto;
    text-align: left;
}

.dashboard-container h2 {
    color: #343a40;
    margin-bottom: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
}

.dashboard-section {
    margin-bottom: 2rem;
}

.dashboard-section h3 {
    color: #4a00e0; /* Use accent color */
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.3rem;
}

.course-card {
    border: 1px solid #e9ecef;
    padding: 1.5rem;
    border-radius: 6px;
    background-color: #f8f9fa; /* Light background for card */
    margin-bottom: 1rem;
    transition: box-shadow 0.3s ease;
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Space out content and button */
    align-items: center; /* Vertically align items */
}
/* Styles for the content wrapper within the course card */
.course-card-content {
    flex-grow: 1; /* Allow content to take available space */
    margin-right: 1rem; /* Add space between content and button */
    /* Ensure text wraps */
    overflow-wrap: break-word;
    word-wrap: break-word; /* Older browsers */
    word-break: break-word; /* Break long words if necessary */
}

.course-card h4 {
    margin-bottom: 0.5rem; /* Add some space below the title */
}

.course-card p {
    margin-bottom: 0; /* Remove default bottom margin if any */
    color: #6c757d; /* Slightly muted description color */
}

/* Ensure button doesn't shrink */
.course-card .cta-button {
    flex-shrink: 0;
}

.course-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.course-card-content {
    flex-grow: 1; /* Allow content to take up space */
    margin-right: 1rem; /* Space before the button */
}

.course-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #343a40;
    margin-bottom: 0.3rem;
}

.course-card-description {
    font-size: 0.95rem;
    color: #6c757d;
    margin-bottom: 0.8rem;
}

.course-card-actions .btn {
    margin-left: 0.5rem; /* Space between buttons if multiple */
}

/* Course Container Specific Styling */
.course-container {
    background-color: #ffffff;
    padding: 2rem 2.5rem; /* More padding */
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
    max-width: 800px; /* Adjust width as needed */
    width: 90%;
    margin: 2rem auto;
    text-align: left;
}

.course-container h1 {
    color: #4a00e0; /* Accent color */
    margin-bottom: 0.5rem;
    font-weight: 700;
    border-bottom: 2px solid #eee; /* Subtle separator */
    padding-bottom: 0.5rem;
}

.course-container .course-intro {
    color: #495057;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.course-container h2 {
    color: #343a40;
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.5rem;
}

.course-container .list-group {
    margin-bottom: 2rem; /* Space below lesson list */
}

.course-container .list-group-item {
    padding: 1rem 1.25rem; /* Adjust padding */
    border-color: #e9ecef; /* Lighter border */
}

.course-container .mt-4 { /* Ensure margin for back button */
    margin-top: 2rem !important;
}


/* Admin Layout */
.page-container.admin-layout {
    display: flex;
}

.admin-sidebar {
    width: 250px; /* Sidebar width */
    background-color: #343a40; /* Dark sidebar */
    padding: 1.5rem 1rem;
    color: #f8f9fa; /* Light text */
    min-height: calc(100vh - 60px); /* Adjust based on header height */
    border-right: 1px solid #495057; /* Subtle border */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
}

.admin-sidebar h3 {
    color: #ffffff;
    margin-bottom: 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid #495057;
    padding-bottom: 0.5rem;
}

.admin-sidebar nav ul {
    list-style: none; /* Remove default bullets */
    padding: 0;       /* Remove default padding */
    margin: 0;        /* Remove default margin */
    display: flex; /* Explicitly set flex display */
    flex-direction: column; /* Stack items vertically */
}

.admin-sidebar nav li {
    margin: 0; /* Remove any potential inherited margin */
    padding: 0; /* Remove any potential inherited padding */
}
.admin-sidebar .nav-link {
    color: #adb5bd; /* Lighter link color */
    padding: 0.8rem 1rem; /* Adjusted padding */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center icon and text */
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 0.5rem; /* Space between links */
    white-space: nowrap; /* Prevent text wrapping */
}

.admin-sidebar .nav-link:hover,
.admin-sidebar .nav-link.active { /* Style for active link */
    background-color: #495057; /* Darker background on hover/active */
    color: #ffffff;
}

.admin-sidebar .nav-link i { /* Icon styling */
    margin-right: 12px; /* Space between icon and text */
    width: 20px; /* Fixed width for alignment */
    text-align: center; /* Center icon within its space */
    flex-shrink: 0; /* Prevent icon from shrinking */
    font-size: 1.1em; /* Slightly larger icon */
}

.admin-layout .main-content {
    flex-grow: 1; /* Allow main content to take remaining space */
    padding: 2rem 3rem; /* Padding for admin content area */
    /* Reset alignment if needed from general main-content */
    align-items: stretch;
    text-align: left;
}

/* Admin Table Styling */
.admin-table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse; /* Remove space between borders */
}

.admin-table th,
.admin-table td {
    padding: 0.85rem 1rem; /* Adjust padding */
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.admin-table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa; /* Light header background */
    font-weight: 600;
    text-align: left; /* Ensure headers are left-aligned */
}

.admin-table tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.03); /* Subtle striping */
}

.admin-table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.06); /* Hover effect */
}

.admin-table .actions {
    white-space: nowrap; /* Prevent action buttons from wrapping */
    text-align: right; /* Align actions to the right */
    width: 1%; /* Minimize width for actions column */
}

.admin-table .actions .btn {
    margin-left: 5px; /* Space between action buttons */
    padding: 0.25rem 0.5rem; /* Smaller padding for action buttons */
    font-size: 0.8rem; /* Smaller font size */
}

/* Admin Dashboard Cards */
.admin-stats-cards {
    display: flex;
    gap: 1.5rem; /* Space between cards */
    margin-bottom: 2rem;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.stat-card {
    background-color: #ffffff;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    flex: 1; /* Allow cards to grow */
    min-width: 200px; /* Minimum width before wrapping */
    display: flex;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
}

.stat-card-icon {
    font-size: 2.5rem; /* Large icon */
    margin-right: 1.5rem;
    padding: 1rem;
    border-radius: 50%;
    color: #ffffff;
}

.stat-card-icon.courses { background-color: #17a2b8; } /* Info blue */
.stat-card-icon.lessons { background-color: #28a745; } /* Success green */
.stat-card-icon.users { background-color: #ffc107; } /* Warning yellow */

.stat-card-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    color: #6c757d;
    font-weight: 400;
    text-transform: uppercase;
}

.stat-card-info .stat-number {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: #343a40;
}

/* Admin Form Styling Adjustments */
.admin-layout .form-container {
    max-width: 700px; /* Wider forms for admin */
    margin: 0; /* Remove auto margin for centering */
}

.admin-layout .form-button {
    width: auto; /* Don't force full width */
    padding: 10px 25px; /* Adjust padding */
}

.admin-layout .form-group textarea {
    min-height: 250px; /* Taller text area for content */
}

/* Add button styling */
.add-button-container {
    margin-bottom: 1.5rem;
    text-align: right; /* Align button to the right */
}

.btn-add {
    background: linear-gradient(90deg, #28a745, #218838); /* Green gradient */
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.btn-add:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.5);
    color: #ffffff; /* Ensure text remains white */
    text-decoration: none;
}

.btn-add i {
    margin-right: 5px;
}

/* General Button Styling (Refined) */
.btn {
    display: inline-block;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    color: #fff;
    background-color: #4a00e0;
    border-color: #4a00e0;
}
.btn-primary:hover {
    color: #fff;
    background-color: #3e00b3;
    border-color: #3700a0;
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62;
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}
.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
}
.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
}

.btn-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}
.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}
.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124;
}

.btn-outline-primary {
    color: #4a00e0;
    border-color: #4a00e0;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #4a00e0;
    border-color: #4a00e0;
}

.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}
.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

/* Add other outline variants as needed */

.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

/* Ensure icons inside buttons are aligned */
.btn i, .btn svg {
    vertical-align: middle; /* Helps align FontAwesome icons */
    margin-top: -2px; /* Fine-tune alignment */
}


/* Rainbow Border Animation (Example - Keep if used) */
.rainbow-border {
    border: 3px solid transparent;
    border-radius: 10px;
    padding: 15px;
    position: relative;
    overflow: hidden; /* Keep animation contained */
}

.rainbow-border::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: conic-gradient(
        #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000
    );
    animation: rainbow-border-animation 4s linear infinite;
    z-index: -1; /* Place behind content */
}

@keyframes rainbow-border-animation {
    to {
        transform: rotate(360deg);
    }
}

/* Lesson Card Specific Styling */
.lesson-card {
    margin-bottom: 2rem; /* Space below lesson card */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: none; /* Remove default border */
}

.lesson-card .card-header {
    background-color: #f8f9fa; /* Light header */
    border-bottom: 1px solid #e9ecef;
}

.lesson-card .card-header h2 {
    margin-bottom: 0.25rem;
    color: #343a40;
}

.lesson-card .card-header .card-subtitle {
    color: #6c757d;
}

.lesson-card .card-body {
    padding: 1.5rem 2rem; /* More padding */
    line-height: 1.8; /* Improve readability */
}

.lesson-card .card-footer {
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    padding: 1rem 2rem;
}

/* --- Lesson Page Button Styling --- */
.lesson-card .card-footer .btn {
    text-decoration: none !important; /* Force remove underline */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add subtle hover effect */
    border-radius: 20px; /* Rounded corners */
    padding: 0.5rem 1.2rem; /* Adjust padding */
    font-weight: 500;
}

.lesson-card .card-footer .btn:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

/* --- Lesson Complete Notification Styling --- */
.lesson-complete-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 30px 40px;
    border-radius: 10px;
    z-index: 1050; /* Ensure it's above other content */
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.lesson-complete-popup.show {
    opacity: 1;
    visibility: visible;
}

.lesson-complete-popup .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lesson-complete-popup p {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Checkmark SVG Animation */
.checkmark {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    stroke-width: 3; /* Thicker stroke */
    stroke: #4CAF50; /* Base color green for fill */
    stroke-miterlimit: 10;
    margin: 0 auto; /* Center the checkmark */
    box-shadow: none; /* Explicitly none initially */
    animation: fill-circle .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
   }
   
   .checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 3; /* Match stroke width */
    stroke-miterlimit: 10;
    stroke: #ffffff; /* Draw outline in white */
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
   }

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    stroke-width: 4; /* Slightly thicker check */
    stroke: #ffffff; /* White color */
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards; /* Start slightly earlier */
   }
   
   @keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }
    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill-circle {
	100% {
		box-shadow: inset 0px 0px 0px 40px #4CAF50; /* Green fill effect */
	}
}
/* --- Course Page Lesson List Styling --- */
.course-lesson-list .list-group-item {
    transition: background-color 0.3s ease;
}

.course-lesson-list .list-group-item:hover {
    background-color: #f8f9fa; /* Subtle hover effect */
}

.course-lesson-list .locked-lesson-item {
    background-color: #e9ecef; /* Slightly greyed out */
    color: #6c757d; /* Muted text color */
}

.course-lesson-list .locked-lesson-item span {
    opacity: 0.7;
}

/* --- Course Page Button Styling Refinements --- */

/* Target ALL buttons within the course container for consistency */
.course-container .btn {
    padding: 0.4rem 1rem; /* Adjust padding */
    font-size: 0.9rem; /* Slightly smaller font */
    font-weight: 500;
    border-radius: 20px; /* More rounded corners */
    text-decoration: none !important; /* Force remove underline */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow */
    border: 1px solid transparent; /* Base border */
    min-width: 140px; /* Ensure buttons have similar width */
    text-align: center;
    vertical-align: middle; /* Align text vertically */
    line-height: 1.5; /* Adjust line height for better vertical centering */
}

/* Specific style for the accessible lesson button (outline primary) */
.course-container .btn.btn-outline-primary {
    border-color: #6a1b9a; /* Slightly darker purple */
    color: #6a1b9a;
    background-color: transparent;
}

.course-container .btn.btn-outline-primary:hover {
    background-color: #6a1b9a;
    color: #ffffff;
    box-shadow: 0 4px 8px rgba(106, 27, 154, 0.3);
    transform: translateY(-2px);
}

/* Style for the locked lesson button (secondary, disabled) */
.course-container .btn.btn-secondary.locked-lesson {
    background-color: #adb5bd; /* Lighter grey */
    border-color: #adb5bd;
    color: #ffffff;
    opacity: 0.65; /* Keep opacity */
    cursor: not-allowed;
    box-shadow: none; /* Remove shadow for disabled */
}
.course-container .btn.btn-secondary.locked-lesson:hover {
     transform: none; /* No hover effect */
}


/* Style for the 'Powrót do Panelu' button (secondary) */
.course-container .mt-4 .btn.btn-secondary {
     background-color: #6c757d; /* Standard secondary grey */
     border-color: #6c757d;
     color: #ffffff;
}

.course-container .mt-4 .btn.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* Ensure anchor tags used AS buttons have no underline */
.course-container a.btn {
    text-decoration: none !important;
}

/* --- Access Denied Notification Styling --- */
.access-denied-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(220, 53, 69, 0.9); /* Red background (danger) */
    color: white;
    padding: 30px 40px;
    border-radius: 10px;
    z-index: 1051; /* Above lesson complete popup */
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.access-denied-popup.show {
    opacity: 1;
    visibility: visible;
}

.access-denied-popup .popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.access-denied-popup i { /* Style for a potential icon */
    font-size: 3em;
    margin-bottom: 15px;
    color: #f8d7da; /* Lighter red */
}

.access-denied-popup p {
    margin-top: 10px;
    font-size: 1.2em;
    font-weight: bold;
}
/* Rainbow glow effect for completed courses */
/* Smoother, more vibrant rainbow gradient background effect */
@keyframes smooth-rainbow-scroll {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.course-completed-rainbow {
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.2),    /* Red */
        rgba(255, 165, 0, 0.2), /* Orange */
        rgba(255, 255, 0, 0.2), /* Yellow */
        rgba(0, 128, 0, 0.2),   /* Green */
        rgba(0, 0, 255, 0.2),   /* Blue */
        rgba(75, 0, 130, 0.2),  /* Indigo */
        rgba(238, 130, 238, 0.2),/* Violet */
        rgba(255, 0, 0, 0.2)     /* Red again for smooth loop */
    );
    background-size: 400% 400%; /* Make the gradient much larger than the element */
    animation: smooth-rainbow-scroll 10s linear infinite; /* Animate the position */
    color: #333; /* Ensure text remains readable */
}
.course-completed-rainbow h4,
.course-completed-rainbow p,
.course-completed-rainbow .badge,
.course-completed-rainbow a {
    position: relative; /* Ensure text stays above the animated background */
    z-index: 1;
}
/* Animated Checkmark for Completed Courses */
.completed-tick {
    display: inline-block;
    width: 22px; /* Adjust size as needed */
    height: 22px;
    margin-left: 8px; /* Space from title */
    vertical-align: middle; /* Align with text */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Ccircle cx='26' cy='26' r='25' fill='none' stroke='%234CAF50' stroke-width='3'/%3E%3Cpath fill='none' stroke='%234CAF50' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' d='M14 27l10 10 16-16'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0; /* Start hidden */
    transform: scale(0.5); /* Start small */
    animation: draw-tick 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.2s forwards; /* Delayed animation */
}

@keyframes draw-tick {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Adjust course card title alignment if needed */
.course-card h4 {
    display: flex; /* Use flex to align title and tick */
    align-items: center; /* Vertically center items */
}
/* Removed the .register-container specific styles as they are now handled by .form-container */
/* Index page specific background */
.body-index {
    position: relative; /* Needed for the pseudo-element positioning */
    z-index: 0; /* Ensure body context is established */
}

.body-index::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../eduxidobaner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.5); /* Add dark overlay (50% transparent black) */
    background-blend-mode: overlay; /* Optional: Blend the color with the image */
    z-index: -1; /* Place the background behind the content */
}

/* White text for hero section on index page */
.body-index .hero h2,
.body-index .hero p {
    color: #ffffff; /* White text */
    /* Optional: Add text shadow for better readability */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Added text shadow */
}
/* --- Rank Display Styles --- */
.rank-section {
    margin-bottom: 2rem; /* Space below the rank section */
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e9ecef; /* Separator line */
}

.rank-section h3 {
    margin-bottom: 1rem;
    color: #495057;
    font-weight: 600;
}

.rank-display {
    display: flex;
    align-items: center;
    gap: 20px; /* Space between indicator and details */
}

.rank-indicator {
    width: 80px; /* Size of the circle */
    height: 80px;
    border-radius: 50%; /* Make it a circle */
    /* Use CSS variable for background, fallback to dark grey */
    background-color: var(--rank-indicator-bg-color, #343a40);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* For potential pseudo-elements like the border */
    border: 5px solid; /* Placeholder for rank color border */
    /* Use CSS variable for border, fallback to default grey */
    border-color: var(--rank-indicator-border-color, #6c757d);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

/* Style for the number inside the circle */
.rank-number {
    color: #ffffff; /* White text */
    font-size: 1.8rem; /* Large rank number */
    font-weight: 700;
    line-height: 1;
}

.rank-details p {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

.rank-details strong {
    color: #343a40;
}

/* --- Rank Colors (Progression: Grey -> Blue -> Green -> Orange/Red -> Purple) --- */
/* Define border and background colors for each rank */
/* Ranks 1-3: Greys */
.rank-color-1 { --rank-indicator-border-color: #adb5bd; --rank-indicator-bg-color: #9fa6ad; }
.rank-color-2 { --rank-indicator-border-color: #868e96; --rank-indicator-bg-color: #767c83; }
.rank-color-3 { --rank-indicator-border-color: #6c757d; --rank-indicator-bg-color: #5a6268; }

/* Ranks 4-6: Blues */
.rank-color-4 { --rank-indicator-border-color: #74c0fc; --rank-indicator-bg-color: #53b1fa; }
.rank-color-5 { --rank-indicator-border-color: #4dabf7; --rank-indicator-bg-color: #2e9cf5; }
.rank-color-6 { --rank-indicator-border-color: #339af0; --rank-indicator-bg-color: #1a8ae0; }

/* Ranks 7-9: Greens */
.rank-color-7 { --rank-indicator-border-color: #8ce99a; --rank-indicator-bg-color: #6fe37e; }
.rank-color-8 { --rank-indicator-border-color: #69db7c; --rank-indicator-bg-color: #49d15c; }
.rank-color-9 { --rank-indicator-border-color: #51cf66; --rank-indicator-bg-color: #31c54a; }

/* Ranks 10-13: Oranges/Reds */
.rank-color-10 { --rank-indicator-border-color: #ffc078; --rank-indicator-bg-color: #ffae54; } /* Orange-ish */
.rank-color-11 { --rank-indicator-border-color: #ffa94d; --rank-indicator-bg-color: #ff9529; }
.rank-color-12 { --rank-indicator-border-color: #ff922b; --rank-indicator-bg-color: #f77f07; } /* Reddish-Orange */
.rank-color-13 { --rank-indicator-border-color: #fa5252; --rank-indicator-bg-color: #f83131; } /* Red */

/* Ranks 14-15: Purples/Special */
.rank-color-14 { --rank-indicator-border-color: #cc5de8; --rank-indicator-bg-color: #b83be0; } /* Purple */
.rank-color-15 {
    --rank-indicator-border-color: #be4bdb; /* Darker Purple */
    --rank-indicator-bg-color: #a92bc9;
    /* TODO: Add fire animation later */
}
/* --- Dashboard Account Settings Styles --- */
.dashboard-section .change-password-form {
    margin-top: 1rem; /* Add space above the form */
    padding-top: 1rem;
    border-top: 1px solid #e9ecef; /* Separator line */
    max-width: 450px; /* Limit form width */
}

.dashboard-section .change-password-form h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
}

.dashboard-section .change-password-form .form-group {
    margin-bottom: 1rem; /* Adjust spacing between fields */
}

.dashboard-section .change-password-form .form-control {
    padding: 10px 12px; /* Slightly smaller padding */
    font-size: 0.95rem;
}

/* Define the small CTA button variant */
.cta-button.small {
    padding: 8px 20px; /* Reduced padding */
    font-size: 0.9rem; /* Smaller font size */
    border-radius: 20px; /* Slightly smaller radius */
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(74, 0, 224, 0.3); /* Adjusted shadow */
}

.cta-button.small:hover,
.cta-button.small:focus {
    transform: translateY(-2px); /* Slightly less lift */
    box-shadow: 0 4px 12px rgba(74, 0, 224, 0.4); /* Adjusted hover shadow */
}

/* Style for the logout link to look like a button */
.dashboard-section .logout-link {
    display: inline-block;
    padding: 8px 20px;
    font-size: 0.9rem;
    border-radius: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
    margin-top: 1rem; /* Add some space above logout */

    /* Secondary button style */
    background: #6c757d; /* Secondary color */
    color: #ffffff;
    border: 1px solid #6c757d;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-section .logout-link:hover,
.dashboard-section .logout-link:focus {
    background-color: #5a6268;
    border-color: #545b62;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* User Dashboard Navigation Buttons */
.user-dashboard-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
    gap: 1rem; /* Spacing between buttons */
    justify-content: center; /* Center buttons if they don't fill the row */
    margin-top: 1rem; /* Add some space above the buttons */
}

.user-dashboard-nav li {
    margin: 0; /* Remove default li margin if any, gap handles spacing */
}

.user-dashboard-nav .nav-link {
    display: inline-flex; /* Use flex to align icon and text */
    align-items: center;
    background: linear-gradient(90deg, #8e2de2, #4a00e0); /* Match header gradient */
    color: #ffffff;
    padding: 15px 25px; /* Increased padding for larger buttons */
    border: none;
    border-radius: 25px; /* Rounded corners */
    text-decoration: none;
    font-size: 1.1rem; /* Larger font size */
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(74, 0, 224, 0.3); /* Softer shadow */
    text-align: center;
}

.user-dashboard-nav .nav-link:hover,
.user-dashboard-nav .nav-link:focus {
    transform: translateY(-3px); /* Slight lift on hover */
    box-shadow: 0 6px 20px rgba(74, 0, 224, 0.4);
    color: #f8f9fa; /* Slightly lighter text on hover */
}

.user-dashboard-nav .nav-link i {
    margin-right: 10px; /* Space between icon and text */
    font-size: 1.2em; /* Slightly larger icon */
}

/* Responsive adjustments for dashboard buttons if needed */
@media(max-width: 768px) {
    .user-dashboard-nav ul {
        flex-direction: column; /* Stack buttons vertically on smaller screens */
        align-items: stretch; /* Make buttons full width */
    }
    .user-dashboard-nav .nav-link {
        justify-content: center; /* Center content within the button */
        width: 100%; /* Make buttons take full width of their container */
        margin-bottom: 0.5rem; /* Add some space between stacked buttons */
    }
}
/* Password Strength Indicator */
.password-strength-indicator {
    font-size: 0.875rem;
    height: 20px; /* Ensure it takes up space even when empty */
    margin-top: 5px;
    transition: color 0.3s ease-in-out;
}

.strength-weak {
    color: #dc3545; /* Red */
}

.strength-medium {
    color: #ffc107; /* Yellow */
}

.strength-strong {
    color: #28a745; /* Green */
}
/* Homepage Specific Styles */

.animated-hero {
    position: relative;
    padding: 4rem 2rem;
    text-align: center;
    overflow: hidden; /* For animation effects */
    background: linear-gradient(135deg, #8A2BE2 0%, #4B0082 100%); /* BlueViolet to Indigo gradient */
    color: #ffffff;
    border-radius: 0 0 30px 30px;
    margin-bottom: 3rem;
}

.animated-hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.animated-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #F5F5F5 !important; /* Very light grey, not pure white */
    text-shadow: 0 0 1px rgba(255,255,255,0.5), 0 0 3px rgba(255,255,255,0.3), 0 0 5px rgba(106, 13, 173, 0.2), 0 0 8px rgba(106, 13, 173, 0.1); /* Extremely subtle glow */
}

.animated-hero p {
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Basic animation - can be replaced with something more complex */
.animated-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 70%);
    animation: pulse-animation 5s infinite ease-in-out;
    z-index: 1;
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.5); opacity: 0.2; }
    100% { transform: scale(1); opacity: 0.5; }
}

.features-section {
    padding: 2rem 1rem;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem auto;
}

.feature-block h2 {
    font-size: 2.2rem;
    color: #F0F8FF !important; /* AliceBlue - a very light, readable color */
    margin-bottom: 0.75rem;
    font-weight: 600;
    /* Removed gradient properties */
    display: block; /* Changed from inline-block */
    width: fit-content; /* Allow centering with auto margins */
    max-width: 100%; /* Ensure it doesn't overflow its container */
    margin-left: auto;
    margin-right: auto;
    min-height: 3em; /* Approx 6.6rem, for "Ucz się. Twórz. Inspiruj." */
}

.feature-block p {
    font-size: 1.1rem;
    color: #E6E6FA !important; /* Lavender - a very light, readable color */
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
    font-weight: 500; /* Bolder text */
    /* Removed gradient properties */
    min-height: 10rem; /* Estimated for the paragraph content */
}

.join-community-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 3rem 2rem;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    max-width: 1100px;
    margin: 0 auto 3rem auto;
}

.community-block-left {
    flex-basis: 55%;
    padding-right: 2rem;
}

.community-block-left h2 {
    font-size: 2rem;
    color: #343a40;
    margin-bottom: 1rem;
    font-weight: 600;
}

.community-block-left p {
    font-size: 1.05rem;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.community-block-left h3 {
    font-size: 1.3rem;
    color: #6e45e2; /* Accent color */
    font-weight: 600;
}

.community-block-right {
    flex-basis: 40%;
    text-align: center;
}

.community-block-right img {
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.final-cta-section {
    text-align: center;
    padding: 2rem 1rem;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.final-cta-section p {
    font-size: 1.15rem;
    color: #495057;
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.auth-buttons .cta-button {
    margin: 0.5rem;
}

/* Responsive adjustments for new sections */
@media(max-width: 992px) {
    .join-community-section {
        flex-direction: column;
        text-align: center;
    }
    .community-block-left {
        flex-basis: 100%;
        padding-right: 0;
        margin-bottom: 2rem;
    }
    .community-block-right {
        flex-basis: 100%;
    }
    .community-block-right img {
        max-width: 80%;
    }
}

@media(max-width: 768px) {
    .animated-hero h1 {
        font-size: 2.5rem;
    }
    .animated-hero p {
        font-size: 1.1rem;
    }
    .feature-block h2 {
        font-size: 1.8rem;
    }
    .feature-block p {
        font-size: 1rem;
    }
    .community-block-left h2 {
        font-size: 1.7rem;
    }
    .community-block-left p, .community-block-left h3 {
        font-size: 1rem;
    }
    .final-cta-section p {
        font-size: 1.05rem;
    }
}
/* Typing Animation Styles */
.typing-cursor {
    display: inline-block;
    width: 2px; /* Adjust cursor width */
    height: 1.1em; /* Adjust cursor height to match text */
    background-color: currentColor; /* Use text color for cursor */
    animation: blink-caret 0.75s step-end infinite;
    vertical-align: bottom; /* Align cursor with text baseline */
    margin-left: 2px; /* Small space after text */
}

@keyframes blink-caret {
    from, to { background-color: transparent; }
    50% { background-color: currentColor; }
}

/* Ensure elements for typing animation have a minimum height if empty */
#typing-heading:empty::after,
#typing-paragraph:empty::after {
    content: "\\00a0"; /* Non-breaking space to maintain height */
}

#typing-heading, #typing-paragraph {
    position: relative; /* For cursor positioning if needed */
}
/* Homepage specific style to remove top padding from main content */
.body-index .main-content {
    padding-top: 0 !important;
}