/* -------------------------------------------------------------------------- */
/*                               General Styles                               */
/* -------------------------------------------------------------------------- */
/* MARK: General Styles */


:root {

    /* --------------------------------- Colours -------------------------------- */

    --color-primary: hsl(0, 80%, 35%);
    --color-secondary: hsl(45, 80%, 50%);
    --color-primary-rgb: 161, 18, 18;
    --color-secondary-rgb: 230, 179, 25;

    --color-primary-light: hsl(0, 80%, 50%);
    --color-secondary-light: hsl(45, 80%, 60%);
    --color-primary-light-rgb: 230, 25, 25;
    --color-secondary-light-rgb: 235, 194, 71;

    --discord-color: #5865F2;
    --discord-color-rgb: 88, 101, 242;

    --background-1: hsl(0, 0%, 9%);
    --background-2: hsl(0, 0%, 12%);
    --background-3: hsl(0, 0%, 15%);
    --background-4: hsl(0, 0%, 18%);
    --background-5: hsl(0, 0%, 21%);
    --background-6: hsl(0, 0%, 24%);
    --background-7: hsl(0, 0%, 27%);
    --background-8: hsl(0, 0%, 30%);

    /* ------------------------------- Transitions ------------------------------ */

    --transition: 300ms;

    /* ----------------------------- Border Colours ----------------------------- */

    --border-color-1: #404040;

    --text-shadow: rgba(8, 8, 8, 0.8) 0px 0.5rem 1rem;

}

/* Code styling */
code {
    background: var(--background-5);
    color: #e8e8e8;
    padding: 0 0.2rem;
    border: 1px solid var(--background-7) !important;
    border-radius: 0.25rem;
}

.background-image-blur {
    backdrop-filter: blur(6px) brightness(80%) !important;
}

/* This only effects non desktops. Desktop is already set to 80% */
.container {
    width: 90%;
}

hr {
    background-color: var(--border-color-1);
    height: 1px;
    opacity: 0.5;
}


/* -------------------------------------------------------------------------- */
/*                                   Buttons                                  */
/* -------------------------------------------------------------------------- */
/* MARK: Buttons */


/* ------------------------------- Join Button ------------------------------ */

.join-button {
    transition: all var(--transition);
    /* Slightly smaller font to fix text scale issue on 1080p desktop */
    font-size: 1rem;
}

/* Scales up when hovering and stonger glow */
.join-button:hover {
    scale: 1.1;
    box-shadow: inset 0px 0px 15px rgba(var(--color-primary-rgb), 0.8),0px 0px 30px rgba(var(--color-primary-rgb), 0.7);
    color: var(--color-secondary);
}

/* Fixes background image and glow */
.join-button:active,
.join-button:focus {
    background-image: url("../images/general/button-background.jpg");
    box-shadow: inset 0px 0px 10px rgba(var(--color-primary-rgb), 0.7),0px 0px 10px rgba(var(--color-primary-rgb), 0.3);
}

/* ----------------------------- Primary Button ----------------------------- */

.c-button--primary {
    background-color: var(--color-primary-light) !important;
    background-image: linear-gradient(var(--color-primary-light), hsl(from var(--color-primary-light) h calc(s * 0.8) calc(l * 0.6))) !important;
    border: 1px solid var(--color-primary-light) !important;
}

.c-button--primary:hover,
.c-button--primary:active,
.c-button--primary:focus {
    background-color: var(--color-primary-light);
    box-shadow: inset 0px 0px 15px rgba(var(--color-primary-light-rgb), 0.25),0px 0px 30px rgba(var(--color-primary-light-rgb), 0.6);
}

/* ---------------------------- Secondary Button ---------------------------- */

.c-button--secondary {
    background-color: var(--color-secondary) !important;
    background-image: linear-gradient(var(--color-secondary), hsl(from var(--color-secondary) h calc(s * 0.8) calc(l * 0.6))) !important;
    border: 1px solid var(--color-secondary) !important;
}

.c-button--secondary:hover,
.c-button--secondary:active,
.c-button--secondary:focus {
    background-color: var(--color-secondary);
    box-shadow: inset 0px 0px 15px rgba(var(--color-secondary-rgb), 0.25),0px 0px 30px rgba(var(--color-secondary-rgb), 0.6);
}

/* ------------------------------- Blue Button ------------------------------ */

/* Changed to Discords brand colour */

.discord-button {
    background-color: var(--discord-color) !important;
    background-image: linear-gradient(var(--discord-color), hsl(from var(--discord-color) h calc(s * 0.6) calc(l * 0.6))) !important;
    border: 1px solid var(--discord-color) !important;
}

.discord-button:hover,
.discord-button:active,
.discord-button:focus {
    background-color: var(--discord-color);
    box-shadow: inset 0px 0px 15px rgba(var(--discord-color-rgb), 0.25),0px 0px 30px rgba(var(--discord-color-rgb), 0.6);
}

/* --------------------------- Store Info Buttons --------------------------- */

/* Added transition and decreased button width */
.store-info-btn {
    transition: all var(--transition);
    width: 50%;
}

/* ------------------------------ Cart Buttons ------------------------------ */

.checkout-button,
.clear-cart-button {
    transition: all var(--transition);
}

/* --------------------------- Add to Cart Buttons -------------------------- */

.add-to-cart {
    color: #FFFFFF;
}

.add-to-cart:hover {
    color: var(--color-secondary) !important;
}


/* -------------------------------------------------------------------------- */
/*                                   Header                                   */
/* -------------------------------------------------------------------------- */
/* MARK: Header */


/* ------------------------------ Header Border ----------------------------- */

/* Reduced opacity of borders */
.c-border-red {
    opacity: 0.8;
}

/* Removed margin from borders */
.c-border-red.mb-2 {
    margin-bottom: 0 !important;
}

/* --------------------------------- Navbar --------------------------------- */


header {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0.6rem 1.5rem;
}

/* Added transparency and blur to navbar background */
.navbar {
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(6px) !important;
}

.c-nav__logo {
    height: 5rem;
    width: 100%;
}

.navbar-brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Hover animation for navbar logo */
.navbar-brand:hover {
    scale: 1.05;
}
.navbar-brand:active {
    scale: 0.95;
}

/* Removed 'app.min.css' styles */
.navbar .navbar-toggler {
    border-color: transparent;
    background-color: transparent;
}

/* Increased the size of the navbar toggler icon */
.navbar-toggler-icon {
    width: 3em;
    height: 3em;
}

/* Right aligns the nav buttons */
.navbar-nav {
    width: 100%;
}

/* ------------------------------ Navbar Links ------------------------------ */

/* Center aligns the links vertically */
.nav-item {
    display: flex;
    align-items: center;
}

/* Secondary accent colour when hovering on nav links */
.nav-link:hover {
    color: var(--color-secondary) !important;
}

/* ----------------------------- Navbar Buttons ----------------------------- */

/* Padding left between nav buttons */
.nav-buttons li {
    display: flex;
    padding-left: 1.5rem;
}

/* Nav button padding */
.nav-button {
    display: flex;
    padding: 16px 48px;
}

/* Nav button icon size */
.nav-button-icon {
    height: 1.5rem !important;
    width: 1.5rem !important;
}

/* --------------------------- Responsive - 1450px -------------------------- */

@media (max-width: 1450px) {

    /* .c-nav__logo {
     *        height: 80%;
     *        width: 80%;
} */

    /* Vertically stacked buttons */
    .nav-buttons {
        flex-direction: column !important;
    }

    /* Remove left padding */
    .nav-buttons li {
        padding-left: 0;
    }

    /* Add bottom padding on first button */
    .nav-buttons li:first-of-type {
        padding-bottom: 1rem;
    }

    /* Equal button widths */
    .play-now-button,
    .discord-button {
        width: 230px;
    }

}

/* --------------------------- Responsive - 1200px -------------------------- */

@media (max-width: 1200px) {

    /* Smaller font size for nav link */
    .nav-link {
        font-size: 0.9rem !important;
    }

    /* Removed padding to make more room */
    #navbarMenu {
    padding-left: 0 !important;
    }

    /* Reduced padding to make more room */
    .nav-buttons {
        padding-left: 1rem;
    }

    /* Smaller nav button */
    .nav-button {
        padding: 8px 24px;
        font-size: 0.9rem;
    }

    /* Smaller nav button icon size */
    .nav-button-icon {
        height: 1.2rem !important;
        width: 1.2rem !important;
    }

    /* Equal button widths */
    .play-now-button,
    .discord-button {
        width: 160px;
    }

}

/* --------------------------- Responsive - Mobile -------------------------- */

@media (max-width: 992px) {

    .navbar-collapse {
        /* Left margin for links */
        margin-left: 20px !important;

        /* Removed 'app.min.css' styles */
        position: static;
    }

    /* Fixed navbar animation stutter because of the padding */
    .navbar-collapse {
        padding: 0 !important;
    }
    .nav-item:first-of-type {
        margin-top: 1rem;
    }
    .nav-buttons {
        margin-bottom: 1rem !important;
    }

    /* Smaller padding between nav links */
    .nav-link {
        padding: 0.3rem 0;
    }

    /* Aligned nav buttons to the left */
    .nav-buttons {
        align-items: flex-start !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

}


/* -------------------------------------------------------------------------- */
/*                                    Home                                    */
/* -------------------------------------------------------------------------- */
/* MARK: Home */


/* ---------------------------- Background Image ---------------------------- */

/* Centered background image */
body {
    background-position: center top;
}

@media (max-width: 992px) {

    /* Positioned background image better for mobile devices */
    body {
        background-position: 30% 0% !important;
    }

}

/* Unblur the background image only on the home */
.background-image-blur:has(> #home-page) {
    backdrop-filter: blur(0px) !important;
}

/* Fade in title */
#home-page .c-main-header--home h1,
#home-page .c-main-header--home h1 span {
    opacity: 0;
    transform: translateX(-1rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
#home-page .c-main-header--home h1.animate,
#home-page .c-main-header--home h1 span.animate {
    opacity: 1;
    transform: translateX(0);
}
/* Delay for second line of title */
#home-page .c-main-header--home h1 span {
    transition-delay: 0.15s;
}

/* ---------------------------- Featured Content ---------------------------- */

/* Reduced opacity of underline effect on title */
.c-section-heading::after {
    opacity: 0.5;
}

/* Increased margin for featured content section */
#featured-content {
    margin-top: 160px !important;
}

/* Full width for featured content images so the text has more room before wrapping */
#featured-content .container {
    width: 100%;
}

/* Fade in Featured Content title */
#featured-content h2 {
    opacity: 0;
    transform: translateX(-1rem);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition-delay: 0.2s;
}
#featured-content h2.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Fade in images */
#featured-content .col {
    opacity: 0;
    transition: opacity 1.5s ease-out;
    transition-delay: 0.2s;
}
#featured-content .col.animate {
    opacity: 1;
}

/* Center aligned card text */
#featured-content .card {
    text-align: center;
}

.featured-content-card-title {
    font-size: 1.15rem !important;
    margin-bottom: 0.2rem !important;
}

.featured-content-card-description {
    font-size: 0.85rem;
}

/* ------------------------------ Scroll Button ----------------------------- */

/* Moved the main header down as the scroll button moved it up */
.c-main-header .container {
    margin-top: 100px;
}

/* Position the scroll button */
.home-scroll-button {
    display: flex;
    justify-content: center;
    margin-top: 100px;
}

/* Position the text and arrow */
.home-scroll-button a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Same transition for the text and arrow */
.home-scroll-button p,
.home-scroll-button svg {
    transition: all var(--transition);
}

/* Set arrow color */
.home-scroll-button svg {
    margin-top: 0.5rem;
    stroke: var(--color-faded);
}

/* Secondary arrow colour on hover */
.home-scroll-button a:hover svg {
    stroke: var(--color-secondary);
}


/* -------------------------------------------------------------------------- */
/*                                    Store                                   */
/* -------------------------------------------------------------------------- */
/* MARK: Store */


/* ------------------------------- Store Items ------------------------------ */

/* Store item border and transition */
.store__content-block .item-div {
    /* Disables the hover on the parent element */
    pointer-events: none;

    border: solid 1px hsl(from var(--color-primary) h s l / 60%) !important;
    border-radius: 6px;
    transition: all var(--transition);
}

/* Styles for parent element when hover is on child element */
.store__content-block .item-div:hover {
    border: solid 1px var(--color-secondary) !important;
}

/* Enables the hover on the parent element */
.add-to-cart {
    pointer-events: auto;
}

/* Equal padding around store items */
.store__content-block .col-md-4 {
    padding: calc(var(--bs-gutter-x) * .5);
}

/* Bold and larger item name */
.item-name {
    font-weight: bold;
    font-size: 1rem;
    padding: 0.2rem 0;
}

/* Larger new price font */
.item-price {
    margin-top: 0.4rem;
    font-size: 1rem;
}

/* Strikethrough and coloured old price */
.item-old-price {
    margin-top: 0.4rem;
    text-decoration: line-through;
    color: var(--color-primary);
}

/* Margin for item description */
.item-description {
    margin-top: 0.8rem;
}

/* ------------------------------ Cart Section ------------------------------ */

/* Centered store info buttons */
.buttons-store-info {
    align-items: center;
}

/* Added background colour to the cart warning */
.cart-section-warning {
    margin-top: 1rem;
    background-color: var(--background-3);
}

/* Fixed warning icon so it's now round */
.warning-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 0.5rem;
    background-color: var(--color-primary);
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 50%;
}

/* Exclamation mark styling */
.warning-icon p {
    font-size: 3rem !important;
    margin: 0;
}

/* Allows width for the warning icon so it isn't squished */
.cart-section-warning .m-2 {
    flex: 1;
}


/* -------------------------------------------------------------------------- */
/*                                 Rank Perks                                 */
/* -------------------------------------------------------------------------- */
/* MARK:Rank Perks */


/* Title */
#rank-perks h1 {
    font-size: 3rem;
}

@media (max-width: 1200px) {
    #rank-perks h1 {
    font-size: 2.5rem;
    }
}

@media (max-width: 992px) {
    #rank-perks h1 {
        font-size: 2rem;
    }
}

/* ---------------------------------- Table --------------------------------- */

/* Table container */
#rank-perks .table-responsive {
    background-color: var(--background-3);
    padding: 2rem;
    border: 1px solid var(--border-color-1);
}

@media (max-width: 768px) {
    #rank-perks .table-responsive {
        padding: 1rem;
    }
}

/* Remove bootstrap table margin */
.store-table-rank-perks {
    margin: 0;
}

/* Darker colour for every other row of content */
.store-table-rank-perks tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Remove dark colour for table head so the darker rows alternate correctly */
.store-table-rank-perks thead {
    background-color: var(--background-4);
}

/* Rank Perks title styling */
.store-table-rank-perks-title {
    margin-bottom: 2rem;
    color: var(--color-secondary) !important;
}

/* Centered text vertically */
.store-table-rank-perks td {
    vertical-align: middle;
    padding: 0.5rem 1rem;
}

/* Secondary colour for Features */
.store-table-rank-perks-features {
    color: var(--color-secondary);
}

/* Margin for icons */
.store-table-rank-perks-icon {
    margin-right: 0.3rem;
    height: 1.5rem;
}

/* Darker table border colour */
.store-table-rank-perks {
    border-color: var(--border-color-1) !important;
}

/* -------------------------- Top Donators Section -------------------------- */

#store-top-donators-accordion {

/* Variables - https://getbootstrap.com/docs/5.2/components/accordion/#variables */

/* Background Colours */
--bs-accordion-bg: var(--background-1) !important;
--bs-accordion-btn-bg: var(--background-2) !important;
--bs-accordion-active-bg: var(--background-2) !important;

/* Title color */
--bs-accordion-color: var(--color-secondary) !important;
--bs-accordion-btn-color: var(--color-secondary) !important;
--bs-accordion-active-color: var(--color-secondary) !important;

/* Icon color */
--bs-accordion-btn-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A01717'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
--bs-accordion-btn-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A01717'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");

/* Border color */
--bs-accordion-border-color: var(--border-color-1) !important;

margin-bottom: 4rem;

}

#store-top-donators-accordion .accordion-button {
font-size: 1rem;
font-weight: bold;
}

/* Removed box shadow */
#store-top-donators-accordion .accordion-button:focus {
box-shadow: none;
}

#store-top-donators-accordion .accordion-body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 2rem;
}

.store-top-donators-description {
    color: #FFFFFF !important;
    margin-bottom: 2rem;
    text-align: center;
}

/* --------------------------- Top Donators Table --------------------------- */

.store-top-donators-table thead {
    font-weight: bold;
    color: var(--color-secondary);
}

.store-top-donators-table td {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color-1);
    text-align: center;
}


/* -------------------------------------------------------------------------- */
/*                                  Policies                                  */
/* -------------------------------------------------------------------------- */
/* MARK:Policies */


/* Background colour */
#privacy-policy,
#refund-policy,
#terms-of-service {
background-color: var(--background-1);
}

/* Top and bottom padding */
#privacy-policy .container,
#refund-policy .container,
#terms-of-service .container {
padding: 5rem 0;
}

#privacy-policy h1,
#refund-policy h1,
#terms-of-service h1 {
font-family: "Montserrat","Roboto",sans-serif;
font-size: 2.5rem;
}

#privacy-policy h2,
#refund-policy h2,
#terms-of-service h2 {
font-family: "Montserrat","Roboto",sans-serif;
font-size: 1.5rem;
font-weight: bold;
}

#privacy-policy h3,
#refund-policy h3,
#terms-of-service h3 {
font-family: "Montserrat","Roboto",sans-serif;
font-size: 1.2rem;
font-weight: bold;
}

#privacy-policy h4,
#refund-policy h4,
#terms-of-service h4 {
font-family: "Montserrat","Roboto",sans-serif;
font-size: 1rem;
font-weight: bold;
}

#privacy-policy p, #privacy-policy li,
#refund-policy p, #refund-policy li,
#terms-of-service p, #terms-of-service li {
font-family: "Montserrat","Roboto",sans-serif;
font-size: 1rem;
}


/* -------------------------------------------------------------------------- */
/*                                  Checkout                                  */
/* -------------------------------------------------------------------------- */
/* MARK: Checkout */


/* Centered button and text */
.continue-to-payment-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Smaller button width */
.paymentBtn {
    width: 30%;
}


/* -------------------------------------------------------------------------- */
/*                                    Play                                    */
/* -------------------------------------------------------------------------- */
/* MARK:Play */


#play h3 {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: "Cinzel", serif;
}

#play h4 {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: "Cinzel", serif;
}

/* Center card contents and make card height equal */
#play .card {
    align-items: center;
    height: 100%;
    background-image: none;
    border: 4px solid hsl(from var(--color-primary) h s l / 40%);
    background-color: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(6px);
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 1.5rem;
}

#play li {
    font-size: 0.9rem;
    padding: 0.2rem 0;
}

#play .client-issues p {
    font-size: 0.9rem;
    margin: 0.6rem 0 !important;
}

#play .windows-download-buttons {
    display: flex;
}

#play .windows-download-buttons .c-button:last-child {
    margin-left: 0.5rem;
}

#play .apple-download-buttons {
    display: flex;
}

#play .apple-download-buttons .c-button:last-child {
    margin-left: 0.5rem;
}


/* -------------------------------------------------------------------------- */
/*                                   Footer                                   */
/* -------------------------------------------------------------------------- */
/* MARK: Footer */


.c-footer--logo {
    width: 15rem;
    transition: all var(--transition);
}

/* Hover animation for footer logo */
.c-footer--logo:hover {
    scale: 1.05;
}
.c-footer--logo:active {
    scale: 0.95;
}


/* -------------------------------------------------------------------------- */
/*                             Guides and Updates                             */
/* -------------------------------------------------------------------------- */
/* MARK: Guides and Updates */


/* Fixed images */
.guide-image,
.image img {
    max-width: 100%;
    height: 100%;
}

/* Coloured title for cards */
.col-md-10 .card-title {
    color: var(--color-secondary) !important;
}

/* --------------------------------- Updates -------------------------------- */

/* Heading padding */
.cardUpdates h2 {
    padding: 2rem 0;
    margin: 0;
}

/* Image padding */
.cardUpdates .image {
    padding: 1rem;
    margin: 0 2rem;
}

/* Paragraph spacing */
.cardUpdates p {
    line-height: 1.6rem;
    margin: 0;
}


/* -------------------------------------------------------------------------- */
/*                                  Hiscores                                  */
/* -------------------------------------------------------------------------- */
/* MARK: Hiscores */


/* Title */
#hiscores h1 {
    font-size: 3rem;
}

/* Main container */
#hiscores .container {
    width: 80%;
    display: flex;
    justify-content: center;
}

/* ------------------------- Main Category Selector ------------------------- */

/* Seperate container so that the box can span the full width of the container */
.hiscores-main-category-selector-container {
    width: 80%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

/* Box */
.hiscores-main-category-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-around;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    background-color: var(--background-3);
    border: 1px solid var(--border-color-1);
}

/* Links */
.hiscores-main-category-selector a {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-5);
    padding: 0.5rem 9rem;
    border: 1px solid var(--border-color-1);
    font-size: 0.9rem;
    text-align: center;
}

/* Links hover */
.hiscores-main-category-selector a:hover {
    background-color: var(--background-6);
}

/* Active link */
.hiscores-main-category-selector a.active {
    background-color: var(--background-6);
    border: 1px solid var(--color-primary);
    font-weight: bold;
}

.hiscores-main-category-selector a img {
    max-width: 24px;
    max-height: 24px;
    margin-right: 0.5rem;
}

@media (max-width: 1450px) {
    .hiscores-main-category-selector a {
        flex: 0 0 calc(33.33% - 0.67rem);
        padding: 0.5rem 2rem;
    }
}

@media (max-width: 1200px) {
    .hiscores-main-category-selector a {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (max-width: 768px) {
    .hiscores-main-category-selector a {
        flex: 0 0 100%;
        font-size: 0.8rem;
    }
}

/* --------------------------------- Sidebar -------------------------------- */

/* Sidebar */
.hiscores-sidebar {
    width: 20%;
    margin-right: 1rem;
}

/* Categories box */
.hiscores-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 1rem;
    background-color: var(--background-3);
    border: 1px solid var(--border-color-1);
}

/* Sidebar hiscores page links */
.hiscores-categories a {
    flex-basis: 100%;
    font-size: 1rem;
    padding: 0.4rem;
}

.hiscores-categories a.active {
    font-weight: bold;
    color: var(--color-secondary);
}

.hiscores-categories a img {
    max-height: 24px;
    max-width: 24px;
    margin-right: 0.5rem;
}

.hiscores-categories hr {
    width: 100%;
    height: 1px;
    margin: 0;
    background-color: var(--border-color-1);
}

/* -------------------------------- Gamemodes ------------------------------- */

.hiscores-gamemodes {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    background-color: var(--background-3);
    border: 1px solid var(--border-color-1);
}

.hiscores-gamemodes a {
    background-color: var(--background-5);
    padding: 0.5rem 3rem;
    border: 1px solid var(--border-color-1);
    font-size: 0.9rem;
    text-align: center;
}

.hiscores-gamemodes a:hover {
    background-color: var(--background-6);
}

.hiscores-gamemodes a.active {
    background-color: var(--background-6);
    font-weight: bold;
    border: 1px solid var(--color-primary);
}

.hiscores-gamemodes a img {
    margin-right: 0.5rem;
}

@media (max-width: 1850px) {
    .hiscores-gamemodes {
        justify-content: center;
    }

    .hiscores-gamemodes a {
        flex: 0 0 calc(33.33% - 0.67rem);
        padding: 0.5rem 2rem;
    }
}

@media (max-width: 1450px) {
    .hiscores-gamemodes a {
        flex: 0 0 calc(50% - 0.5rem);
    }
}

@media (max-width: 768px) {
    .hiscores-gamemodes a {
        flex: 0 0 100%;
        font-size: 0.8rem;
    }
}

/* --------------------------- Main Table Section --------------------------- */

.hiscores-main-section {
    justify-content: center;
    align-items: start;
    width: 80%;
}

.hiscores-table-container {
    padding: 1rem;
    background-color: var(--background-3);
    border: 1px solid var(--border-color-1);
    overflow-x: auto;
}

/* ------------------------------- Table Title ------------------------------ */

.hiscores-table-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.5rem;
}

.hiscores-table-title h2 {
    font-family: 'Cinzel', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0.8rem;
}

.hiscores-table-title h2:last-child {
    font-size: 1.2rem;
    opacity: 60%;
}

.hiscores-table-title h2 img {
    margin-right: 0.8rem;
    max-width: 32px;
    max-height: 32px;
}

/* ---------------------------------- Table --------------------------------- */

/* Main hiscores table */
.hiscores-table {
    width: 100%;
    text-align: center;
    white-space: nowrap;
}

/* Table headings */
.hiscores-table th {
    border-bottom: 1px solid var(--border-color-1);
}

/* Darker colour for every other row of content */
.hiscores-table tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Heading and data cells */
.hiscores-table th,
.hiscores-table td {
    font-size: 1rem;
    padding: 0.5rem;
}

/* Needed to fix display flex on the header and data below */
.hiscores-table tr {
    display: flex;
}

/* Center icons with text */
.hiscores-table th,
.hiscores-table td {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 4rem;
}

/* Donator, gamemode and staff rank icons */
.hiscores-table td img {
    max-width: 1rem;
    max-height: 1rem;
    margin-right: 0.2rem;
}

/* ------------------------- Table Auto Column Width ------------------------ */

/*
    Sets a specific width to all columns (th and td) so that the data doesn't overflow
    the width of the th text, which causes the data for that line to be offset.
    This only happens in mobile or tablet widths where the table is compressed horizontally.
*/
.hiscores-table th,
.hiscores-table td {
    min-width: 6rem;
}

/*
    Set longer width for Username column (For now, it's always the second column. If it's not always the second column
    in the future, you'll need to set this as an inline style on the th and td elements in the .ejs table files)
*/
.hiscores-table th:nth-child(2),
.hiscores-table td:nth-child(2) {
    min-width: 10rem;
}

/* --------------------------- Responsive - 1450 px -------------------------- */

@media (max-width: 1450px) {

    .hiscores-main-section {
        width: 70%;
    }

    /* Wider Sidebar */
    .hiscores-sidebar {
        width: 30%;
    }

}

/* --------------------------- Responsive - 1200 px -------------------------- */

@media (max-width: 1200px) {

    #hiscores h1 {
    font-size: 2.5rem;
    }

    .hiscores-table th,
    .hiscores-table td {
        font-size: 0.9rem;
    }

    .hiscores-categories a {
        font-size: 0.9rem;
    }

    .hiscores-categories a img {
        max-height: 20px;
        max-width: 20px;
    }

}

/* --------------------------- Responsive - 992 px --------------------------- */

@media (max-width: 992px) {

    #hiscores h1 {
        font-size: 2rem;
    }

    /* Moved sidebar under main table */
    #hiscores .container {
        flex-direction: column;
    }

    .hiscores-main-section {
        width: 100%;
    }

    .hiscores-sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .hiscores-categories a {
        flex: 0 0 calc(33.33% - 0.67rem);
        padding: 0.4rem;
    }

    /* Hide hr so the categories stack horizontally as well as vertically for mobile */
    .hiscores-categories hr {
        display: none;
    }

}

/* --------------------------- Responsive - 768 px -------------------------- */

@media (max-width: 768px) {

    .hiscores-table th,
    .hiscores-table td {
        font-size: 0.8rem;
    }

    .hiscores-table-title h2,
    .hiscores-table-title h2:last-child {
        font-size: 1rem;
    }

    .hiscores-table-title h2 img {
        margin-right: 0.5rem;
        max-width: 20px;
        max-height: 20px;
    }
    
    .hiscores-categories a {
        flex: 0 0 calc(50% - 0.5rem);
    }

}

/* --------------------------- Responsive - 576 px --------------------------- */

@media (max-width: 575px) {

    #hiscores h1 {
        font-size: 1.5rem;
    }

    #hiscores .container {
        width: 90%;
    }

    .hiscores-table-container,
    .hiscores-categories {
        padding: 0.8rem;
    }

    .hiscores-categories a {
        flex: 0 0 100%;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }

}


.store-table-rank-perks {
    padding: 5px 38px !important;
    box-shadow: 0 0 10px #404040 !important;
}
.store-table-rank-perks tr td {
    font-weight: bold;
}
.store-table-rank-perks tr td:nth-child(1) {
    /*color: black;*/
}
.store-table-rank-perks tr td:nth-child(2) {
    color: red;text-align: center;
    font-weight: bold;
}
.store-table-rank-perks tr td:nth-child(3) {
    color: blue;text-align: center;
    font-weight: bold;
}
.store-table-rank-perks tr td:nth-child(4) {
    color: green;text-align: center;
    font-weight: bold;
}
.store-table-rank-perks tr td:nth-child(5) {
    color: deeppink;text-align: center;
}
.store-table-rank-perks tr td:nth-child(6) {
    color: gold;text-align: center;
}
.store-table-rank-perks tr td:nth-child(7) {
    text-align: center;
}
.store-table-rank-perks tr td:nth-child(8) {
    color: lightskyblue;text-align: center;
}
.store-table-rank-perks tr td:nth-child(9) {
    color: brown;text-align: center;
}


.custom-btn {
    background-color: #ff2424;
    background-image: -webkit-gradient(linear, left bottom, left top, from(#8b1010), to(var(--color-primary)));
    background-image: linear-gradient(0deg, #8b1010 0%, var(--color-primary) 100%);
    border: 1px solid var(--color-primary);
}
.list-group-item {
    background: #1f1f1fde;
    border: none;
}
.c-hiscores-navigation__links--list li {
    cursor: pointer;
}
.hiscore-gold-icon::before {
    content: "";
    display: inline-block;
    width: 30px !important;
    height: 30px;
    background-image: url(../images/general/gold-medal.png);
    background-size: cover;
    margin-right: 5px;
}
.hiscore-silver-icon::before {
    content: "";
    display: inline-block;
    width: 30px !important;
    height: 24px;
    background-image: url(../images/general/silver-medal.png);
    background-size: cover;
    margin-right: 5px;
}
.hiscore-bronze-icon::before {
    content: "";
    display: inline-block;
    width: 30px !important;
    height: 30px;
    background-image: url(../images/general/bronze-medal.png);
    background-size: cover;
    margin-right: 5px;
}


/* Store Start */
.category-image {
    max-width: 50px;
}
.category-button {
    float: left;
    margin: 10px;
    text-align: center;
}
.item-div {
    border: solid 1px var(--color-primary);
    padding: 15px;
}
.item-div:hover {
    border: solid 1px #e8b71a;
}
.category-button-active {
    color: #e8b71a;
}
.item-image {
    max-width: 100px;
}
.card-item {
    border: solid 1px #e8b71a;
    padding: 10px;
}
.input-box {
    max-width: 100% !important;
    margin-bottom: 5px;
}
/* custom checkbox */
.custom-checkbox {
    padding: 10px !important;
    border-radius: 5px !important;
    margin-top: -5px !important;
}
.agree-block {
    padding: 20px 0 20px 0;
}
.agree-block input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    position: relative;
    top: 4px;
    margin-right: 10px;
}
.agree-block input[type="checkbox"]:checked {
    background-color: var(--color-primary);
}
.agree-block input[type="checkbox"]::before {
    content: '\2713';
    position: absolute;
    top: 10px;
    left: 10px;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    opacity: 0;
    font-size: 25px;
    color: white;
}
.agree-block input[type="checkbox"]:checked::before {
    opacity: 1;
}
.agree-label {
    color: white;
}
.warning-alert-char {
    font-size: 55px;
    color: white;
    background-color: var(--color-primary);
    border-radius: 50%;
    padding: 20px;
}
.custom-red-btn {
    background-image: linear-gradient(0deg, #8b1010 0%, var(--color-primary) 100%);
    border: 1px solid var(--color-primary);
    color: black;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}
.custom-red-btn:hover {
    color: white;
    border: solid 1px #e8b71a;
}

.custom-yellow-btn {
    background-image: linear-gradient(0deg, #8b1010 0%, #ffe000 100%);
    border: 1px solid #ffe000;
    color: black;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}
.custom-yellow-btn:hover {
    color: white;
    border: solid 1px var(--color-primary);
}
.modal-btn {
    background: transparent;
    border: 1px solid #ffe000;
    color: white;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
}
.modal-btn:hover {
    border: 1px solid var(--color-primary);
    color: #ffe000;
}
/* Store End */

.modal-content {
    background-image: url(../images/general/card-background.jpg);
    background-repeat: repeat;
    background-size: auto;
    background-position: center;
    padding: 30px;
}

.nav-link.active {
    color: var(--color-primary-light) !important;
}

.increment-btn {
    background-color: transparent;
    color: white;
    border: solid 1px #ffe000;
    width: 25px;
    height: 25px;
    border-radius: 5px;
}
.increment-btn:hover {
    border-color: white;
    background-color: transparent;
    color: #ffe000;
    transform: scale(1.05);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.816), rgba(2, 14, 40, 0.55));
}
.apply-promo-element {
    border: solid 1px rgba(0, 0, 0, 0.816) !important;
    border-radius: 0 5px 5px 0;
    background-color: transparent;
    color: white !important;
}
.ctm-btn {
    border: solid 1px #ffe000 !important;
    border-radius: 5px;
    background-color: transparent;
    color: white !important;
}
.hover-effect:hover {
    transform: scale(1.05);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.816), var(--color-primary));
}
.c-button--blue {
    background-color: #00abf0;
    background-image: linear-gradient(0deg, #00abf0 0%, #00abf0 100%);
    border: 1px solid #00abf0;
}
.c-button--blue:hover,.c-button--blue:active,.c-button--blue:focus {

}
.navbar {
    background-color: #0c0c0c;
}
.card.ranks {
    min-height: 490px;
    margin-bottom: 20px;
}
.card.ranks .card-header {
    text-align: center;
}

.game-mode.is--active {
    border-bottom: solid 2px #ffe000 !important;
}
.hiscore-icon {
    height: 25px;
    margin: auto;
    padding-left: 10px;
}
.padding-left-10px {
    padding-left: 10px !important;
}

/* Общий стиль для всех таблиц hiscores */
.score-table.show-score-table {
    width: 100%;
    max-width: 600px;
    margin: 1.5rem auto;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
}

/* Заголовки таблиц */
.score-table.show-score-table thead {
    font-weight: bold;
    text-align: center;
}

/* Ячейки */
.score-table.show-score-table td {
    padding: 12px 16px;
    text-align: center;
    vertical-align: middle;
}

/* Последняя строка без нижней границы */
.score-table.show-score-table tbody tr:last-child td {
    border-bottom: none;
}

/* Иконка и текст в строке */
.score-table.show-score-table .hiscore-icon {
    height: 24px;
    vertical-align: middle;
    margin-right: 10px;
}

.padding-left-10px {
    padding-left: 5px;
}

.score-table.show-score-table span {
    vertical-align: middle;
}