/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* General Body Styles */
body {
    background: #2b2d42; /* Apply the desired background color */
    color: #e9ecef; /* Ensure text remains readable */
    font-family: 'Poppins', sans-serif; /* Maintain your selected font */
    margin: 0; /* Remove default body margin */
    padding: 0;
}



/* Hidden Class */
.hidden {
    display: none;
}




/* Header */
header {
    text-align: center;
    padding: 15px 0;
    background: linear-gradient(145deg, #2b2d42, #3a3d4e);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    position: relative;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    z-index: 1000;
}

/* Header Logo */
.header-logo {
    width: 90px;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Header Title */
header h1 {
    font-size: 36px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1.5px;
    color: #e9ecef;
    text-shadow: 8px 8px 8px rgba(0, 0, 0, 0.7);
    text-transform: uppercase;
    padding: 12px 40px;
    border-radius: 30px;
    background: linear-gradient(145deg, #3a3d4e, #2b2d42);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

header h1:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 15px rgba(255, 255, 255, 0.2);
}

/* Slogan */
header .slogan {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-style: italic;
    color: #b0bec5;
    letter-spacing: 1px;
    text-shadow: 8px 8px 4px rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: linear-gradient(45deg, #3a3d4e, #2b2d42);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Responsive Adjustments */

@media (max-width: 1400px) {
    header h1 {
        font-size: 20px; /* Make header smaller */
        text-align: center; /* Center the header text */
        white-space: normal; /* Allow wrapping if necessary */
        padding: 10px 15px;
    }

    .header-logo {
        position: relative; /* Adjust logo for stacking */
        left: 0;
        top: 0;
        transform: none; /* Remove translation */
        margin: 0 auto 10px; /* Center the logo above the text */
        display: block; /* Ensure logo is block level */
    }

    header .slogan {
        font-size: 14px; /* Smallest size for readability */
        position: relative; /* Stack below header */
        top: 0;
        right: 0;
        transform: none; /* Remove translation */
        margin-top: 10px;
        text-align: center; /* Center-align slogan */
        padding: 4px 8px; /* Adjust padding */
        display: inline-block; /* Ensure it doesn't stretch */
    }
}



#page-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* Adjust middle column to be wider */
    grid-template-rows: auto 1fr; /* First row adjusts to content, second row takes remaining space */
    gap: 20px;
    min-height: 100vh;
    padding: 20px;
    background: #2b2d42;
    color: #e9ecef;
}



/* Navigation Bar */
.nav-bar {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: stretch; /* Ensure buttons stretch to full width */
}

.nav-bar a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(145deg, #3a3d4e, #2b2d42);
    border: 1px solid #444b5e;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    width: 100%; /* Make buttons full width */
    box-sizing: border-box; /* Include padding and border in width */
}

.nav-bar a:hover {
    background: linear-gradient(145deg, #444b5e, #3a3d4e);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.6);
}

.nav-bar a:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

/* Responsive Design for Navigation Bar */
@media (max-width: 768px) {
    .nav-bar {
        flex-direction: column; /* Keep vertical layout on smaller screens */
        align-items: stretch; /* Ensure buttons stretch to full width */
        gap: 10px; /* Smaller gap between buttons */
    }

    .nav-bar a {
        padding: 8px 10px;
        font-size: 12px;
        border-radius: 5px;
        box-shadow: none;
    }

    .nav-bar a:hover {
        transform: none;
        background: #2b2d42;
    }

    .nav-login-btn {
        padding: 8px 12px;
        font-size: 14px;
        border-radius: 6px;
        width: 100%; /* Make the button full width */
        box-sizing: border-box;
    }

    .nav-login-btn:hover {
        transform: none;
    }
}

/* Discord Login Popup */
#discordlogin-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Darker overlay for emphasis */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: auto; /* Allow scrolling for smaller screens */
    animation: fadeIn 0.4s ease-in-out; /* Smooth fade-in animation */
}

/* Display when visible */
#discordlogin-popup.active {
    display: flex;
}

/* Popup Content */
#discordlogin-popup .popup-content {
    background: linear-gradient(145deg, #2b2d42, #3a3d4e); /* Modern gradient background */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7); /* Strong shadow for focus */
    max-width: 400px;
    width: 90%;
    text-align: center;
    color: #e9ecef; /* Text color */
    animation: slideDown 0.4s ease-in-out; /* Smooth slide-down effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for definition */
}

/* Close Button */
#discordlogin-popup .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: linear-gradient(145deg, #ff4e4e, #d43d3d); /* Vibrant gradient */
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 78, 78, 0.5); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Close Button Hover */
#discordlogin-popup .close-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 8px 20px rgba(255, 78, 78, 0.8);
    background: linear-gradient(145deg, #ff6b6b, #ff4e4e); /* Lighter gradient */
}

/* Title Styling */
#discordlogin-popup .popup-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #80d1ff; /* Bright and modern text color */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Subtle shadow */
}

/* Description Styling */
#discordlogin-popup .popup-description {
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.6; /* Improve readability */
    color: #dbe1e7;
}

/* Login Button */
#discordlogin-popup #login-to-discord-btn {
    padding: 15px 30px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, #4a5268, #3c3f50); /* Modern gradient */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Login Button Hover */
#discordlogin-popup #login-to-discord-btn:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); /* Stronger shadow on hover */
}

/* Custom Scrollbar */
#discordlogin-popup .popup-content::-webkit-scrollbar {
    width: 10px;
}

#discordlogin-popup .popup-content::-webkit-scrollbar-track {
    background: #2b2d42;
    border-radius: 10px;
}

#discordlogin-popup .popup-content::-webkit-scrollbar-thumb {
    background: #6eaed0;
    border-radius: 10px;
}

#discordlogin-popup .popup-content::-webkit-scrollbar-thumb:hover {
    background: #4c90b0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #discordlogin-popup .popup-content {
        padding: 30px;
        border-radius: 15px;
    }

    #discordlogin-popup .popup-title {
        font-size: 20px;
    }

    #discordlogin-popup .popup-description {
        font-size: 16px;
    }

    #discordlogin-popup #login-to-discord-btn {
        font-size: 16px;
        padding: 12px 25px;
    }
}



/* Responsive Design for Navigation Bar */
/* Adjust for smaller screens */
@media (max-width: 768px) {
    /* Navigation Bar Styles for Mobile */
    .nav-bar {
        flex-direction: column; /* Keep vertical layout on smaller screens */
        align-items: stretch; /* Ensure buttons stretch to full width */
        gap: 10px; /* Smaller gap between buttons */
    }

    .nav-bar a {
        padding: 8px 10px; /* Reduce padding for a compact look */
        font-size: 12px; /* Reduce font size */
        border-radius: 5px; /* Smaller border radius */
        box-shadow: none; /* Simplify shadows for a cleaner look */
    }

    .nav-bar a:hover {
        transform: none; /* Disable hover scaling for better mobile UX */
        background: #2b2d42; /* Maintain hover color */
    }

    /* Login Buttons */
    .nav-login-btn {
        padding: 8px 12px; /* Reduce padding */
        font-size: 14px; /* Smaller font size for buttons */
        border-radius: 6px; /* Adjust border radius for compact style */
        width: 100%; /* Make the button full width */
        box-sizing: border-box; /* Include padding and border in width */
    }

    .nav-login-btn:hover {
        transform: none; /* Simplify hover effect for mobile */
    }

    /* Adjust Header Spacing on Mobile */
    header {
        padding: 10px 5px; /* Reduce header padding */
        text-align: center; /* Center-align text */
    }
}




/* Left Column */
#left-column {
    grid-column: 1; /* Place in the first column */
    grid-row: 1 / span 2; /* Span both rows to align with the main content */
    background: #3a3d4e;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

/* Right Column Navigation */
#right-column-nav {
    grid-column: 3; /* Place in the third column */
    grid-row: 1; /* Place in the first row of the right column */
    background: #3a3d4e;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    text-align: center; /* Center-align content */
}

/* Right Column Widgets/Info */
#right-column {
    grid-column: 3;
    grid-row: 2;
    background: #2b2d42; /* Add a solid background */
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}



/* Main Content */
main {
    grid-column: 2; /* Place in the second column */
    grid-row: 1 / span 2; /* Span both rows for alignment */
    background: #2b2d42;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

main section {
    margin-bottom: 40px;
    background: #3a3d4e;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Welcome Section */
#welcome {
    text-align: center;
}

main h2 {
    font-size: 32px; /* Slightly larger font size */
    color: #80a4b8;
    text-transform: uppercase;
    text-align: center; /* Center align the text */
    margin: 20px 0; /* Add vertical spacing */
    padding: 10px 20px; /* Add padding for better spacing */
    background: linear-gradient(45deg, #2b2d42, #3a3d4e); /* Gradient background */
    color: #e9ecef; /* Text color for better contrast */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add depth with a shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow */
    font-weight: 700; /* Bold text */
    letter-spacing: 1.2px; /* Slightly spaced letters */
}


main p {
    font-size: 18px;
    color: #e9ecef;
    text-align: center; /* Center align the text */
}





/* Footer */
footer {
    background: linear-gradient(145deg, #2b2d42, #343a40);
    color: #e9ecef;
    text-align: center;
    padding: 15px 20px;
    margin-top: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    position: relative;
    overflow: hidden;
    
}

footer p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 180, 216, 0.1), rgba(0, 180, 216, 0.3));
    transform: skewX(-15deg);
    animation: shimmer 5s infinite;
    z-index: 1;
}

@keyframes shimmer {
    0% {
        transform: skewX(-15deg) translateX(-100%);
    }
    100% {
        transform: skewX(-15deg) translateX(100%);
    }
}

footer p {
    z-index: 2;
    position: relative;
}







/* Responsive Design for Small Devices */
@media (max-width: 1400px) {
    #page-layout {
        display: flex;
        flex-direction: column; /* Stack layout vertically */
        align-items: center; /* Center-align content */
    }

    #right-column-nav {
        order: 1; /* Move the navigation bar to the top, directly below the header */
        width: 100%; /* Full width for small screens */
        margin-top: 10px;
    }

    #left-column {
        order: 2; /* Move left column content below the navigation bar */
        width: 100%; /* Full width for small screens */
        margin-top: 10px; /* Add spacing below the navigation bar */
    }

    main {
        order: 3; /* Keep main content in the middle */
        width: 100%; /* Ensure it spans full width */
        margin-top: 10px; /* Add spacing below the left column */
    }

    #right-column {
        order: 4; /* Move right column to the bottom, below the main content */
        width: 100%;
        margin-top: 10px; /* Add spacing below the main content */
    }

    footer {
        order: 5; /* Footer remains at the bottom */
        width: 100%;
        margin-top: 20px; /* Add spacing before the footer */
    }

    aside {
        width: 100%; /* Ensure asides span full width */
        text-align: center; /* Center-align text for smaller screens */
    }
}




.widget-container {
    background: linear-gradient(145deg, #2b2d42, #3a3d4e); /* Subtle gradient background */
    padding: 20px; /* Add spacing inside the widget */
    border-radius: 15px; /* Smooth rounded corners */
    border: 2px solid #3a3d4e; /* Complementary border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), /* Outer shadow for depth */
                inset 0 1px 3px rgba(255, 255, 255, 0.1); /* Inner subtle glow */
    color: #e9ecef; /* Light text for readability */
    font-family: 'Poppins', sans-serif;
    margin-bottom: 25px; /* Add spacing between widgets */
    position: relative; /* Allow layered elements */
    overflow: hidden; /* Clip overflowing content to rounded corners */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover effect */
}

.widget-container:hover {
    transform: scale(1.02); /* Slight zoom on hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), /* Stronger shadow */
                inset 0 2px 6px rgba(255, 255, 255, 0.1); /* Glow effect */
}

/* Widget Header */
.widget-header {
    font-size: 22px; /* Larger header text */
    font-weight: 800; /* Bold font for emphasis */
    color: #f4f4f4; /* Bright blue accent color */
    margin-bottom: 15px; /* Spacing below header */
    text-transform: uppercase; /* Capitalized text */
    text-shadow: 6px 6px 4px rgba(0, 0, 0, 0.5);
    border-bottom: 3px solid #3f4157; /* Accent underline */
    padding-bottom: 8px; /* Add padding below header */
    letter-spacing: 1px; /* Spaced-out letters for elegance */
    text-align: center; /* Center-align the header */
}




/* Latest Release Section */
.latest-release {
    text-align: center;
    margin-top: 20px; /* Add spacing between Latest Release and the Filters */
    padding: 20px;
    background: linear-gradient(145deg, #2b2d42, #3a3d4e);
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.latest-release:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.latest-release h3 {
    font-size: 22px;
    color: #e9ecef;
    margin: 15px 0;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.latest-release p {
    font-size: 18px;
    color: #e9ecef;
    margin-bottom: 15px;
}

.latest-release .view-details {
    padding: 12px 18px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(145deg, #3a3d4e, #2b2d42);
    color: #e9ecef;
    border: 2px solid #66737a;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.latest-release .view-details:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    color: #2b2d42;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
}

.latest-release img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.latest-release:hover img {
    transform: scale(1.05);
}

/* Adjust Spacing for Widget Container */
#latest-release-widget {
    margin-top: 40px; /* Add space between the widget and the filters container */
}


/* Search Bar Styles */
#search-bar {
    width: 100%;
    padding: 12px 15px;
    border-radius: 12px;
    border: 2px solid #3a3d4e;
    background: linear-gradient(145deg, #2b2d42, #3a3d4e);
    color: #e9ecef;
    font-size: 16px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

#search-bar:focus {
    border-color: #80a4b8;
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.3);
    outline: none;
}

/* Category List */
#category-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#category-list li {
    padding: 12px;
    font-size: 18px;
    color: #e9ecef;
    text-align: center;
    background: linear-gradient(145deg, #3a3d4e, #2b2d42);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#category-list li:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    color: #2b2d42;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
}

#category-list li.active {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    color: #fff;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Filters Container */
#filters-container {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(145deg, #2b2d42, #3a3d4e);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Toggle Filters Button */
#toggle-filters {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(145deg, #3a3d4e, #2b2d42);
    color: #e9ecef;
    border: 2px solid #3a3d4e;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

#toggle-filters:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    color: #2b2d42;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
}

/* Category Filters */
.category-filters {
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(145deg, #3a3d4e, #2b2d42);
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    padding: 12px;
    font-size: 16px;
    text-align: center;
    color: #e9ecef;
    background: linear-gradient(145deg, #2b2d42, #3a3d4e);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.category-list li:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    transform: scale(1.1);
}

.category-list li.active {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    color: #fff;
}



/* Selected Category Header */
#selected-category-header {
    font-size: 28px; /* Adjust font size for visibility */
    color: #80a4b8; /* Light blue color to complement the theme */
    text-transform: uppercase; /* Transform to uppercase for emphasis */
    text-align: center; /* Center-align text for visual appeal */
    margin-bottom: 30px; /* Add space between header and assets */
    padding: 10px 20px; /* Add padding for better spacing */
    background: linear-gradient(45deg, #2b2d42, #3a3d4e); /* Gradient background */
    color: #e9ecef; /* Text color for contrast */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add subtle shadow for depth */
    font-weight: 700; /* Bold text for emphasis */
    letter-spacing: 1.2px; /* Add letter spacing for a stylish effect */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
}


.hidden {
    display: none;
}

/* Sorting Filters */
#sorting-filters {
    margin-top: 10px;
}

/* Sort Groups to ensure buttons are stacked properly */
.sort-group {
    margin-bottom: 15px; /* Space between different sort groups */
}

/* Sorting Button Styles */
#sorting-filters button {
    width: 100%; /* Make the buttons take the full width of their container */
    padding: 10px;
    margin-top: 10px;
    background-color: #2b2d42; /* Match your design theme */
    color: #e9ecef; /* Make text readable */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s;
}

#sorting-filters button:hover {
    background-color: #3a3d4e; /* Darken on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

/* Toggle Category Filters Visibility */
.hidden {
    display: none;
}

/* Asset Cards */
.asset-card {
    background: linear-gradient(145deg, #2f3440, #3a3f4c);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), inset 0 1px 5px rgba(255, 255, 255, 0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    position: relative;
    min-height: 350px;
}

/* Hover Effect for Asset Cards */
.asset-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* Asset Card Image */
.asset-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
    max-height: 180px;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Image Hover Effect */
.asset-card:hover img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Asset Card Title */
.asset-card h3 {
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 10px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asset Card Description or Price */
.asset-card p {
    font-size: 16px;
    color: #9fdcff;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Price Styling */
.asset-card .price {

    color: #f4faff; /* Softer white for better contrast */
    font-weight: bold;
    font-size: 22px;
    padding: 12px 25px;
    border-radius: 15px; /* Larger rounded corners for a smoother appearance */
    text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.6); /* Slight shadow for readability */

    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
    text-align: center;
    display: inline-block;
    margin-top: 10px; /* Add spacing above the price */
}

/* Price Hover Effect */
.asset-card .price:hover {
    transform: translateY(-3px) scale(1.1); /* Slight lift and zoom effect */

    color: #ffdd57; /* Eye-catching golden yellow on hover */

    text-shadow: 1px 2px 6px rgba(255, 255, 255, 0.3); /* Subtle glowing effect */
}


/* Asset Card Buttons */
.asset-card button {
    padding: 12px 20px;
    background: linear-gradient(145deg, #3c4450, #2e333c);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Hover Effect for Buttons */
.asset-card button:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    color: #2b2d42;
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.6);
}

/* View Details Button */
.asset-card .view-details {
    margin: 10px 0;
    background: linear-gradient(145deg, #5a6673, #4a5268);
}

.asset-card .view-details:hover {
    background: linear-gradient(145deg, #80d1ff, #6eaed0);
}

/* Add to Cart Button */
.asset-card .add-to-cart {
    margin: 10px 0;
    background: linear-gradient(145deg, #4caf50, #3e9242);
}

.asset-card .add-to-cart:hover {
    background: linear-gradient(145deg, #3e9242, #4caf50);
    color: #ffffff;
}

/* Responsive Asset Section */
#assets-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

/* Responsive Styles for Smaller Screens */
@media (max-width: 768px) {
    .asset-card {
        min-height: 300px;
    }
    .asset-card h3 {
        font-size: 18px;
    }
    .asset-card .price {
        font-size: 18px;
        padding: 8px 16px;
    }
    .asset-card button {
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* Responsive Styles for Very Small Screens */
@media (max-width: 480px) {
    .asset-card {
        padding: 15px;
    }
    .asset-card h3 {
        font-size: 16px;
    }
    .asset-card .price {
        font-size: 16px;
        padding: 8px 14px;
    }
    .asset-card button {
        padding: 8px 12px;
        font-size: 12px;
    }
}



/* Popup Container */
.package-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Darker overlay for dramatic focus */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: auto; /* Allow scrolling for large content */
    animation: fadeIn 0.3s ease-in-out;
    backdrop-filter: blur(5px); /* Subtle blur effect for a modern look */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Popup Content */
.popup-content {
    background: linear-gradient(145deg, #2e3440, #3b4252); /* Deep gradient with modern tones */
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8); /* Strong shadow for focus */
    max-width: 600px;
    width: 90%;
    position: relative;
    color: #e9ecef;
    max-height: 90vh;
    overflow-y: auto; /* Enable scrolling for large content */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for separation */
    text-align: center;
}

/* Close Button */
.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: linear-gradient(145deg, #e63946, #ff4f4f); /* Vivid red gradient */
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 78, 78, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.close-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 8px 25px rgba(255, 78, 78, 0.7);
    background: linear-gradient(145deg, #ff6b6b, #e63946); /* Enhanced hover effect */
}

/* Popup Image */
.popup-content img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7); /* Depth effect */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.popup-content img:hover {
    transform: scale(1.05);
    filter: brightness(1.15); /* Slight brightness on hover */
}

/* Popup Heading */
.popup-content h3 {
    font-size: 26px;
    color: #ffffff; /* Bright and clean white */
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* Soft text shadow */
}

/* Popup Description */
.popup-content p {
    font-size: 17px;
    margin-bottom: 20px;
    line-height: 1.8; /* Improve readability */
    color: #cfd8dc;
}

/* Add to Cart Button */
.popup-content button {
    padding: 12px 25px;
    font-size: 18px;
    color: #ffffff;
    background: linear-gradient(145deg, #4a5268, #3c3f50); /* Sleek gradient */
    border: none;
    border-radius: 15px;
    cursor: pointer;
    margin-top: 20px;
    transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.popup-content button:hover {
    background: linear-gradient(145deg, #6eaed0, #4a5268);
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
    color: #2e3440;
}

/* Links in the Popup */
.popup-content a {
    color: #80d1ff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s, transform 0.2s;
}

.popup-content a:hover {
    color: #b0e3ff;
    text-decoration: underline;
    transform: scale(1.05);
}

/* Scrollbar Customization */
.popup-content::-webkit-scrollbar {
    width: 12px;
}

.popup-content::-webkit-scrollbar-track {
    background: #3b4252;
    border-radius: 10px;
}

.popup-content::-webkit-scrollbar-thumb {
    background: #4c90b0;
    border-radius: 10px;
}

.popup-content::-webkit-scrollbar-thumb:hover {
    background: #6eaed0;
}

/* List Styles */
.popup-content ul,
.popup-content ol {
    text-align: left;
    margin: 15px 0;
    padding-left: 30px;
    list-style-type: disc;
    color: #cfd8dc; /* Harmonized color */
}

.popup-content li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 768px) {
    .popup-content {
        padding: 20px;
        border-radius: 15px;
    }

    .popup-content h3 {
        font-size: 22px;
    }

    .popup-content p {
        font-size: 15px;
    }

    .popup-content button {
        font-size: 16px;
        padding: 10px 20px;
    }
}



/* Shopping Cart Styles */
/* Center h3 Text */
#right-column h3 {
  text-align: center;
  margin-bottom: 10px; /* Add spacing below the header */
  margin-top: 10px; /* Add spacing below the header */
  font-size: 20px; /* Optional: Adjust font size */
  color: #f9f9f9; /* Optional: Add color for better visibility */
}


#right-column ul {
    list-style: none;
    padding: 0;
    color: #e9ecef;
}

#right-column ul li {
    padding: 10px 0;
    border-bottom: 1px solid #3f4157;
}

#right-column p {
    font-size: 20px;
    font-weight: 600;
    margin-top: 15px;
    color: #80a4b8;
}



/* Floating Cart Button */
#floating-cart {
    position: fixed;
    bottom: 30px; /* Distance from the bottom of the screen */
    right: 30px; /* Distance from the right of the screen */
    width: 60px; /* Circular width */
    height: 60px; /* Circular height */
    background: linear-gradient(145deg, #2b2d42, #3a3d4e); /* Gradient background */
    border-radius: 50%; /* Make it a circle */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3), inset 0 2px 5px rgba(255, 255, 255, 0.1); /* Depth effects */
    display: flex;
    align-items: center; /* Center the icon vertically */
    justify-content: center; /* Center the icon horizontally */
    color: #e9ecef; /* Icon color */
    font-size: 24px; /* Icon size */
    cursor: pointer; /* Pointer cursor on hover */
    z-index: 1000; /* Ensure it appears above most elements */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
}

/* Hover Effect */
#floating-cart:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4), inset 0 2px 10px rgba(255, 255, 255, 0.2); /* Enhanced shadow on hover */
    background: linear-gradient(145deg, #3a3d4e, #2b2d42); /* Slightly lighter gradient */
}

/* Cart Item Count Badge */
.cart-badge {
    position: absolute;
    top: -5px; /* Slightly above the cart icon */
    right: -5px; /* Slightly to the right of the cart icon */
    background: #ff4757; /* Bright red for visibility */
    color: #fff; /* White text */
    font-size: 12px; /* Font size for the badge */
    font-weight: bold; /* Bold text for better visibility */
    width: 20px; /* Fixed width for the badge */
    height: 20px; /* Fixed height for the badge */
    line-height: 20px; /* Center text vertically */
    text-align: center; /* Center text horizontally */
    border-radius: 50%; /* Make the badge circular */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for depth */
    z-index: 1001; /* Ensure it appears above other elements */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transitions for hover effects */
}

/* Hide Badge by Default */
.cart-badge.hidden {
    display: none;
}

/* Hover Effect for Floating Cart */
#floating-cart:hover .cart-badge {
    transform: scale(1.1); /* Slightly enlarge on hover */
    background: #e74c3c; /* Darker red on hover */
}



/* Responsive Adjustments */
@media (max-width: 768px) {
    #floating-cart {
        width: 50px; /* Smaller size for mobile */
        height: 50px; /* Match width */
        font-size: 20px; /* Adjust icon size */
        bottom: 15px; /* Adjust distance from bottom */
        right: 15px; /* Adjust distance from right */
    }
}





/* Login Popup */
#login-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Darker overlay for emphasis */
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 1000;
    overflow: auto; /* Allow scrolling for smaller screens */
    animation: fadeIn 0.4s ease-in-out; /* Smooth fade-in animation */
}

/* Display when visible */
#login-popup.active {
    display: flex;
}

/* Popup Content */
#login-popup .popup-content {
    background: linear-gradient(145deg, #2b2d42, #3a3d4e); /* Modern gradient background */
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7); /* Strong shadow for focus */
    max-width: 400px;
    width: 90%;
    text-align: center;
    color: #e9ecef; /* Text color */
    animation: slideDown 0.4s ease-in-out; /* Smooth slide-down effect */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border for definition */
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide-down Animation */
@keyframes slideDown {
    from {
        transform: translateY(-30%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Close Button */
#login-popup .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 35px;
    height: 35px;
    background: linear-gradient(145deg, #ff4e4e, #d43d3d); /* Vibrant gradient */
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(255, 78, 78, 0.5); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Close Button Hover */
#login-popup .close-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 8px 20px rgba(255, 78, 78, 0.8);
    background: linear-gradient(145deg, #ff6b6b, #ff4e4e); /* Lighter gradient */
}

/* Login Title */
#login-popup .popup-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #80d1ff; /* Bright and modern text color */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Subtle shadow */
}

/* Login Description */
#login-popup .popup-description {
    font-size: 18px;
    margin-bottom: 25px;
    line-height: 1.6; /* Improve readability */
    color: #dbe1e7;
}

/* Login Button */
#login-to-cfx-btn {
    padding: 15px 30px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(145deg, #4a5268, #3c3f50); /* Modern gradient */
    border: none;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease;
}

/* Login Button Hover */
#login-to-cfx-btn:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); /* Stronger shadow on hover */
}

/* Custom Scrollbar */
#login-popup .popup-content::-webkit-scrollbar {
    width: 10px;
}

#login-popup .popup-content::-webkit-scrollbar-track {
    background: #2b2d42;
    border-radius: 10px;
}

#login-popup .popup-content::-webkit-scrollbar-thumb {
    background: #6eaed0;
    border-radius: 10px;
}

#login-popup .popup-content::-webkit-scrollbar-thumb:hover {
    background: #4c90b0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #login-popup .popup-content {
        padding: 30px;
        border-radius: 15px;
    }

    #login-popup .popup-title {
        font-size: 20px;
    }

    #login-popup .popup-description {
        font-size: 16px;
    }

    #login-to-cfx-btn {
        font-size: 16px;
        padding: 12px 25px;
    }
}


/* Username Display */
.username-display {
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    color: #666;
}

/* Authenticated Username */
.username-display.authenticated {
    color: #4CAF50; /* Green color */
}

#login-link.authenticated {
    color: #4CAF50;
    font-size: 16px; /* Match other nav buttons */
    font-weight: bold;
    text-align: center;
    padding: 10px 15px; /* Match padding with other buttons */
    background-color: #2b2d42;
    border-radius: 8px;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Authenticated Login Link - Hover Effect */
#login-link.authenticated:hover {
    background-color: #3a3d4e;
    transform: scale(1.05);
    color: #e9ecef; /* Light text for contrast */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #login-link.authenticated {
        font-size: 14px; /* Reduce font size for smaller screens */
        padding: 8px 12px; /* Adjust padding for compact look */
        border-radius: 6px; /* Smaller border radius */
    }
}


/* Notification Container */
#notification-container {
    position: fixed;
    bottom: 15%; /* Distance from the bottom of the screen */
    right: 20px; /* Distance from the right of the screen */
    z-index: 1000; /* Ensure it appears above other elements */
    width: 300px; /* Set a fixed width */
    max-width: 90%; /* Allow resizing on smaller screens */
    display: flex; /* Enable stacking of notifications */
    flex-direction: column; /* Stack notifications vertically */
    gap: 10px; /* Space between notifications */
    pointer-events: none; /* Prevent container from interfering with clicks */
}

/* Notification Box */
.notification {
    background: linear-gradient(145deg, #3a3d4e, #2b2d42); /* Gradient background */
    color: #e9ecef; /* Text color */
    padding: 15px 20px; /* Spacing inside the notification */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Shadow for depth */
    font-size: 14px; /* Font size for text */
    font-family: 'Poppins', sans-serif; /* Consistent font */
    display: flex; /* Arrange text and close button horizontally */
    justify-content: space-between; /* Space out text and button */
    align-items: center; /* Vertically center align items */
    pointer-events: all; /* Allow interaction with notifications */
    animation: slideIn 0.3s ease-out, fadeOut 0.3s ease-out 4s forwards; /* Slide in and fade out animations */
}

/* Notification Text */
.notification p {
    margin: 0; /* Reset margins */
    padding: 0; /* Reset padding */
    flex: 1; /* Take up available space */
    text-align: left; /* Align text to the left */
}

/* Close Button */
.notification .close-btn {
    background: transparent; /* Transparent background */
    border: none; /* Remove border */
    color: #e9ecef; /* Button color */
    font-size: 16px; /* Font size */
    cursor: pointer; /* Pointer cursor */
    margin-left: 10px; /* Space between text and button */
}

/* Slide-in Animation */
@keyframes slideIn {
    from {
        transform: translateX(100%); /* Start off-screen */
        opacity: 0; /* Fully transparent */
    }
    to {
        transform: translateX(0); /* Slide into view */
        opacity: 1; /* Fully visible */
    }
}

/* Fade-out Animation */
@keyframes fadeOut {
    from {
        opacity: 1; /* Start fully visible */
    }
    to {
        opacity: 0; /* Fade to transparent */
    }
}

/* Basket Popup */
#basket-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Darker overlay for a modern feel */
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-in-out;
}

/* Active Class for Popup */
#basket-popup.active {
    display: flex; /* Show when active */
}

/* Popup Content */
#basket-popup .popup-content {
    background: linear-gradient(145deg, #323645, #242731);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
    max-width: 500px;
    width: 90%;
    position: relative;
    text-align: center;
    color: #e9ecef;
    animation: slideIn 0.4s ease-in-out;
    overflow: hidden;
}

/* Fade-in Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide-in Animation */
@keyframes slideIn {
    from {
        transform: translateY(-20%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header Text */
#basket-popup h3 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #9ec8ff;
    text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.8);
}

/* Close Button */
#basket-popup .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
    background: linear-gradient(145deg, #ff6b6b, #e64545);
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, background 0.3s ease;
}

#basket-popup .close-btn:hover {
    background: linear-gradient(145deg, #ff8787, #ff6b6b);
    transform: scale(1.1);
}

/* Basket Items Container with Styled Scrollbar */
#basket-items {
    max-height: 250px; /* Adjusted for smaller screens */
    overflow-y: auto; /* Vertical scroll */
    overflow-x: hidden; /* No horizontal scroll */
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    border-radius: 10px;
    background: linear-gradient(145deg, #2e313e, #242731);
    scrollbar-width: thin; /* Firefox: Thin scrollbar */
    scrollbar-color: #6eaed0 #2e313e; /* Firefox: Thumb and track colors */
}

/* WebKit Browsers (Chrome, Edge, Safari) */
#basket-items::-webkit-scrollbar {
    width: 10px; /* Vertical scrollbar width */
}

#basket-items::-webkit-scrollbar-track {
    background: #2e313e; /* Scrollbar track background */
    border-radius: 5px; /* Rounded track */
}

#basket-items::-webkit-scrollbar-thumb {
    background: linear-gradient(145deg, #6eaed0, #4c90b0); /* Stylish thumb gradient */
    border-radius: 5px; /* Rounded thumb corners */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); /* Depth effect */
}

#basket-items::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(145deg, #80d1ff, #6eaed0); /* Lighter gradient on hover */
}

/* Basket Item */
.basket-item {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 15px;
    background: linear-gradient(145deg, #3b3f4f, #2e333f); /* Modern gradient */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Soft shadow */
    transition: transform 0.3s ease, background 0.3s ease;
}

.basket-item:hover {
    transform: scale(1.02);
    background: linear-gradient(145deg, #444b57, #3a3d4e); /* Brighter on hover */
}

/* Basket Item Image */
.basket-item img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin-right: 15px;
    object-fit: cover;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
}

/* Item Details */
.basket-item-details {
    flex-grow: 1;
    text-align: left;
}

.basket-item-title {
    font-size: 16px;
    font-weight: bold;
    color: #e9ecef;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.basket-item-id {
    font-size: 14px;
    color: #9f9f9f;
    margin-bottom: 5px;
}

.basket-item-total {
    font-size: 14px;
    color: #9ec8ff;
    font-weight: bold;
}

/* Remove Button with Trash Icon */
.remove-item {
    padding: 8px;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(145deg, #e64545, #ff6b6b);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

/* Hover Effect for Trash Icon */
.remove-item:hover {
    background: linear-gradient(145deg, #ff8787, #e64545);
    transform: scale(1.1);
}

/* Trash Can Icon */
.remove-item i {
    font-size: 18px;
    color: #fff;
    transition: color 0.3s ease;
}

.remove-item:hover i {
    color: #ffeaea;
}



/* Basket Summary */
.basket-total {
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    color: #e9ecef;
    margin: 10px 0;
}

/* Checkout Button */
#basket-popup button {
    padding: 10px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(145deg, #4a5268, #3c3f50);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

#basket-popup button:hover {
    background: linear-gradient(145deg, #80a4b8, #6eaed0);
    transform: scale(1.05);
    color: #2b2d42;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    #basket-popup .popup-content {
        max-width: 95%;
        padding: 15px;
    }

    .basket-item img {
        width: 40px;
        height: 40px;
        margin-right: 8px;
    }

    .basket-item-title {
        font-size: 14px;
    }

    .basket-item-id,
    .basket-item-total {
        font-size: 12px;
    }

    .remove-item {
        padding: 5px 8px;
        font-size: 12px;
    }

    .basket-total {
        font-size: 16px;
    }

    #basket-popup button {
        padding: 8px 12px;
        font-size: 14px;
    }
}



/* Basket Info Section */
#basket-info {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between items */
    margin-top: 20px;
    padding: 20px;
    background: linear-gradient(145deg, #212530, #2b303d); /* Darker modern gradient */
    border-radius: 20px; /* Smooth rounded corners */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); /* Softer shadow for modern look */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    overflow: hidden; /* Prevent overflow issues */
    width: 100%; /* Ensure full-width on mobile screens */
}

/* Individual Basket Info Items */
.basket-info-item {
    padding: 15px 20px;
    background: linear-gradient(145deg, #2e333f, #242731); /* Depth effect with gradient */
    border-radius: 12px; /* Rounded corners for smooth design */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    text-align: left; /* Align text to the left */
}

/* Hover Effects */
.basket-info-item:hover {
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.6); /* More pronounced shadow */
}

/* Text Styling */
.basket-info-item p {
    font-size: 16px;
    color: #e9ecef; /* Soft light text for readability */
    font-family: 'Poppins', sans-serif; /* Consistent font */
    margin: 0; /* Remove default margin */
    display: flex; /* Flex layout for label and value */
    align-items: flex-start; /* Align text to the top */
    gap: 10px; /* Space between label and value */
    word-break: break-word; /* Break long words */
    white-space: normal; /* Allow wrapping */
}

/* Label Styling */
.basket-info-item strong {
    color: #9ec8ff; /* Bright blue for emphasis */
    font-weight: bold; /* Bold text for labels */
    min-width: 120px; /* Consistent label width for alignment */
    flex-shrink: 0; /* Prevent shrinking of the label */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #basket-info {
        padding: 15px; /* Adjust padding for smaller screens */
    }

    .basket-info-item {
        padding: 10px 15px; /* Reduce padding */
    }

    .basket-info-item p {
        font-size: 14px; /* Slightly smaller text for smaller screens */
    }

    .basket-info-item strong {
        min-width: 100px; /* Adjust label width */
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    #basket-info {
        padding: 10px; /* Minimal padding for very small screens */
    }

    .basket-info-item {
        padding: 8px 10px; /* Compact padding */
    }

    .basket-info-item p {
        font-size: 12px; /* Smaller font for readability */
        gap: 5px; /* Less spacing between label and value */
    }

    .basket-info-item strong {
        min-width: 80px; /* Adjust for narrower screens */
    }
}

.spinner {
    border: 2px solid #ccc;
    border-top: 2px solid #000;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin: 0 auto;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.add-to-cart.success {
    background-color: #28a745; /* Green background */
    color: #fff; /* White text */
    cursor: not-allowed; /* Disable pointer */
}

.add-to-cart.success i {
    margin-right: 5px;
}


.top-left-button {
    position: absolute;
    top: 10px;
    left: 10px;
}

#copy-link-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    color: #007BFF;
}

#copy-link-btn:hover {
    color: #0056b3;
}



/* Log Out Button Styles */
#logout-btn {
    background: linear-gradient(145deg, #f44336, #e53935); /* Gradient red button */
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, background 0.3s;
    font-weight: bold;
    margin: 10px 0;
}

#logout-btn:hover {
    background: linear-gradient(145deg, #e53935, #d32f2f); /* Slightly darker on hover */
    transform: scale(1.05); /* Scale up slightly */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

#logout-container {
    text-align: center;
    margin-top: 10px;
}


#latest-purchases-widget ul {
    list-style-type: none;
    padding: 0;
}

#latest-purchases-widget li {
    margin: 5px 0;
    color: #555;
}

/* List Styling */
.payment-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

/* Payment Item */
.payment-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f9f9f9, #ffffff);
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.payment-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
  background: linear-gradient(135deg, #ffffff, #f4f4f4);
}

/* Background Effect */
.payment-item::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: rgba(69, 124, 163, 0.215);
  transform: rotate(45deg);
  transition: all 0.4s ease;
}

.payment-item:hover::before {
  top: -70%;
  left: -70%;
  background: rgba(0, 255, 128, 0.1);
}

/* Avatar Styling */
.payment-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
  margin-left: 10px;
  object-fit: cover;
  border: 2px solid #e0e0e0;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.payment-item:hover .payment-avatar {
  border-color: #4caf50;
  transform: scale(1.1);
}

/* Payment Details */
.payment-details strong {
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.payment-details small {
  color: #7f8c8d;
  font-size: 12px;
  transition: color 0.3s ease;
}

.payment-item:hover strong {
  color: #4caf50;
}

/* Loading and Error States */
.loading-state,
.error-state,
.no-data {
  text-align: center;
  color: #555;
  font-style: italic;
  animation: fadeIn 1s ease;
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Top Customer Styling */
.top-customer {
  display: flex;
  align-items: center;
  margin-top: 20px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
  border: 2px solid #4caf50;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.top-customer:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Animated Highlight Effect */
.top-customer::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #4caf50;
  transition: width 0.3s ease;
}

.top-customer:hover::before {
  width: 100%;
}

/* Avatar */
.top-customer-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
  object-fit: cover;
  border: 3px solid #4caf50;
  transition: transform 0.3s ease;
}

.top-customer:hover .top-customer-avatar {
  transform: rotate(10deg) scale(1.1);
}

/* Top Customer Details */
.top-customer-details strong {
  color: #2e7d32;
  font-size: 18px;
  font-weight: bold;
  transition: color 0.3s ease;
}

.top-customer-details small {
  color: #555;
  font-size: 14px;
  transition: color 0.3s ease;
}

.top-customer:hover strong {
  color: #43a047;
}

/* Keyframes for Background Animation */
@keyframes pulseEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}