/* --- Google Font Import --- */
/* This brings in the futuristic fonts for the theme. */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400&display=swap');

/* --- General Body & Theme Styling --- */
/* This sets the dark, space-like background and default text styles. */
body {
    background-color: #0a0f15;
    color: #e0e0e0;
    font-family: 'Roboto', sans-serif;
}

/* --- Main Container for All Shelves --- */
.game-server-shelves {
    padding: 2rem 0;
}

/* --- Individual Shelf Container --- */
.shelf {
    margin-bottom: 3rem; /* Adds space between the rows of games */
}

/* --- Shelf Title Styling (e.g., "Survival Games") --- */
.shelf-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.8rem;
    color: #00aaff;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-bottom: 2px solid #00aaff;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 1rem;
    
    /* --- Centering Fix --- */
    text-align: center; /* This will now work */
    display: block; /* Allows the element to be centered */
    margin-left: auto; /* Works with margin-right to center */
    margin-right: auto; /* Works with margin-left to center */
    width: fit-content; /* Makes the underline only as wide as the text */
}

/* --- Infinite Scroller Styling (JavaScript Controlled) --- */
.shelf-scroller {
    overflow: hidden;
    /* The mask creates the nice fade-out effect on the sides */
    -webkit-mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

/* This now ONLY targets shelves with the "scrolling-shelf" class */
.scrolling-shelf .scroller-content {
    display: flex;
    width: fit-content;
    gap: 1rem;
    animation: scroll 40s linear infinite;
}

/* --- New Style for Static (non-scrolling) Shelves --- */
.static-shelf-content {
    display: flex;
    flex-wrap: wrap; /* Allows cards to wrap to the next line */
    justify-content: center; /* Centers the cards in the row */
    gap: 20px; /* This is the space between cards */
}

/* --- Game Product Card Styling --- */
.game-card {
    flex: 0 0 auto;
    width: 300px;
    height: 230px; /* Set a fixed height for the entire card */
    margin: 0 20px;
    background-color: #12171d;
    border: 1px solid #2a323b;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative; /* This is crucial for positioning the title */
}

.game-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 170, 255, 0.6);
}

.game-card a {
    text-decoration: none;
    color: #e0e0e0;
    display: block;
    height: 100%; /* Make the link fill the card */
}

/* --- Game Product Card Styling --- */
.game-card img {
    width: 100%;
    height: 100%;
    /* This change makes images fill the container, resizing as needed */
    object-fit: cover; 
    background-color: #0a0f15;
}

.game-card-title {
    /* --- This block makes the title an overlay --- */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(18, 23, 29, 0.8); /* Semi-transparent background */
    backdrop-filter: blur(4px); /* Frosted glass effect */
    -webkit-backdrop-filter: blur(4px);
    /* ------------------------------------------- */

    padding: 1rem;
    font-size: 1.3rem;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

/* --- Header Logo & Company Name Centering --- */

/* This targets the main header area */
#header .container {
    position: relative;
    display: flex;
    justify-content: center; /* Horizontally centers the content */
    align-items: center;     /* Vertically centers the content */
}

/* This is the new container for your logo and text */
.logo-container {
    text-align: center; /* Fallback for centering */
}

/* This styles the link that contains both the logo and text */
.logo-container a {
    display: flex;          /* Aligns the logo and text side-by-side */
    align-items: center;    /* Vertically aligns them */
    color: #00aaff;         /* Sets the text color to white */
    text-decoration: none;
    transition: color 0.3s ease;
}

.logo-container a:hover {
    color: #00aaff; /* Changes color on hover to your theme's accent blue */
}

/*
=================================================================
--- How to Resize Your Logo ---
=================================================================
To change the size of your logo, you only need to edit the
'height' value in the '.logo-container .logo-image' block below.

- `height`: Controls the vertical size of your logo.
- `width: auto;`: This is important! It tells the browser to
  automatically adjust the width to maintain the original
  aspect ratio of your image, so it doesn't look stretched.

For example, to make the logo larger, you could change
'height: 40px;' to 'height: 60px;'.
*/

/* This styles your logo image */
.logo-container .logo-image {
    height: 200px;      /* <-- EDIT THIS VALUE to resize your logo. */
    width: auto;
    margin-right: 15px; /* Adds space between the logo and the text */
}

/* This styles the "CryteriaX" text */
.logo-container .logo-text {
    font-family: 'Orbitron', sans-serif; /* Uses the same futuristic font as your titles */
    font-size: 2.5rem;  /* Adjust font size as needed */
    font-weight: 700;
    letter-spacing: 1px;
}

/* This ensures the top navigation (Login, Register) doesn't interfere */
#header .top-nav {
    position: absolute;
    right: 15px; /* Positions the top navigation to the far right */
    top: 50%;
    transform: translateY(-50%);
}

/* --- Gray Background for Header & Footer (Ultra-Specific Version) --- */

/* This targets the main navigation bar with a highly specific path */
body #main-menu .navbar.navbar-default {
    background-color: #1c1c1c !important;
    border-color: #333333 !important;
}

/* This targets the footer section with a highly specific path */
body #footer {
    background-color: #1c1c1c !important;
    border-top: 1px solid #333333 !important;
    color: #cccccc !important; /* Makes footer text readable */
}

/* This makes sure the text inside the footer links is also readable */
body #footer a {
    color: #00aaff !important; /* Use your theme's accent blue for links */
}
body #footer a:hover {
    color: #ffffff !important;
}


/* --- Nav Link Colors (Ultra-Specific Version) --- */

/* This targets the navigation links */
body #main-menu .navbar-default .navbar-nav > li > a {
    color: #cccccc !important;
}

/* This targets the links on hover and when a dropdown is open */
body #main-menu .navbar-default .navbar-nav > li > a:hover,
body #main-menu .navbar-default .navbar-nav > .open > a,
body #main-menu .navbar-default .navbar-nav > .open > a:focus,
body #main-menu .navbar-default .navbar-nav > .open > a:hover {
    color: #ffffff !important;
    background-color: #333333 !important;
}

/* This styles the dropdown menus themselves */
.navbar-nav .dropdown-menu {
    background-color: #1c1c1c !important;
    border: 1px solid #333333 !important;
}
.dropdown-menu > li > a {
    color: #cccccc !important;
}
.dropdown-menu > li > a:hover {
    color: #ffffff !important;
    background-color: #333333 !important;
}

/* --- Making the Main Content Background Dark --- */

/* This targets the main body content area you identified and makes its background transparent */
body section#main-body {
    background-color: transparent !important;
}

/* This targets the main body content area you identified and makes its background transparent */
body section#header {
    background-color: transparent !important;
}

/* --- Search Bar Styling --- */
.search-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

#game-search-bar {
    font-family: 'Orbitron', sans-serif;
    width: 50%;
    max-width: 600px;
    padding: 15px 20px;
    background-color: #12171d;
    border: 1px solid #2a323b;
    border-radius: 5px;
    color: #e0e0e0;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

#game-search-bar:focus {
    outline: none;
    border-color: #00aaff;
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
}

/*
=================================================================
--- Static Shelf with 3 Rows/Columns (for "Game Servers") ---
=================================================================
This creates a responsive grid that shows a specific number of
cards per row based on the screen size.
*/

.shelf-3-rows {
    display: grid !important;
    justify-content: center;
    
    /* Mobile First: Defaults to a single column which is best for small screens. */
    grid-template-columns: repeat(1, 300px); 

    /* We are using display:grid, so we disable the flex-wrap from the base .static-shelf-content class */
    flex-wrap: unset; 
}

/* Tablet View: Switches to two columns when the screen is 768px or wider. */
@media (min-width: 768px) {
    .shelf-3-rows {
        grid-template-columns: repeat(2, 300px);
    }
}

/* Desktop View: Switches to the desired three columns for larger screens. */
@media (min-width: 1024px) {
    .shelf-3-rows {
        grid-template-columns: repeat(3, 300px) !important;
    }
}

/*
=================================================================
--- Search Results Styling ---
=================================================================
*/

#search-results-container {
    /* This ensures the result card is centered nicely below the search bar */
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

/* We can add a subtle animation for the result appearing */
#search-results-container .game-card {
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Dark Theme for WHMCS Client Area
   ========================================================================== */

/* ---- General Body & Text ---- */
body {
    background-color: #1c1c1c; /* The main page background */
    color: #e0e0e0;          /* A light default text color for readability */
}

/* ---- Headings and Links ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #ffffff; /* Make all headings white */
}

a {
    color: #00aeff; /* A bright blue for links */
}
a:hover {
    color: #5dd5ff; /* A lighter blue for hover */
}
hr {
    border-top-color: #444; /* Darken the horizontal rule lines */
}

/* ---- Universal Panel/Box/Widget Styling ---- */
.panel {
    background-color: #2c2c2e;
    border-color: #444;
    box-shadow: none; /* Removes shadows which don't look good on dark themes */
}
.panel-heading {
    background-color: #252527;
    color: #ffffff;
    border-bottom-color: #444 !important;
}
.panel-body,
.panel-footer {
    background-color: transparent; /* Inherits the panel's dark background */
    color: #e0e0e0;
    border-color: #444;
}
.list-group-item {
    background-color: #2c2c2e;
    border-color: #444;
    color: #e0e0e0;
}

/* ---- Alert Boxes (like "No products/services found") ---- */
.alert {
    color: #e0e0e0;
    background-color: #333;
    border-color: #555;
    text-shadow: none;
}
.alert-info {
    background-color: #1d3c4d;
    border-color: #00aeff;
}
.alert-warning {
    background-color: #4d441d;
    border-color: #ffc107;
}
.alert a {
    color: #ffffff !important; /* Make links in alerts stand out */
    font-weight: bold;
}

/* ---- Forms & Input Fields ---- */
.form-control {
    background-color: #333;
    color: #e0e0e0;
    border-color: #555;
}
.form-control:focus {
    background-color: #444;
    border-color: #00aeff;
    color: #ffffff;
    box-shadow: none;
}

/* ---- Client Dashboard Panels (Services, Tickets, etc.) ---- */
.client-home-panels .panel-body {
    text-align: center;
}
.client-home-panels .panel-body .icon {
    color: #00aeff;
    font-size: 48px;
    text-shadow: none;
}
.client-home-panels .panel-body .count {
    color: #ffffff;
    font-size: 36px;
    font-weight: bold;
}

/* ---- Buttons (More comprehensive) ---- */
.btn-default, .btn-light {
    color: #fff;
    background-color: #4a4a4e;
    border-color: #666;
    text-shadow: none;
}
.btn-default:hover, .btn-light:hover {
    background-color: #5a5a5e;
    border-color: #777;
}

/* The orange '+ My Services' button */
.btn-warning {
    color: #fff;
    background-color: #ff8c00;
    border-color: #cc7000;
}
.btn-warning:hover {
    background-color: #e67e00;
    border-color: #b36500;
}
/* This should cover buttons like '+ Open New Ticket' */
.btn-info {
    color: #fff;
    background-color: #008fcc;
    border-color: #0076a8;
}
.btn-info:hover {
    background-color: #0076a8;
    border-color: #005f87;
}

/* ==========================================================================
   Targeted Dark Theme Fixes
   ========================================================================== */

/* Main Dashboard Widgets/Tiles (Services, Quotes, etc.) */
.tiles .tile {
    background-color: #2c2c2e !important;
    border: 1px solid #444 !important;
    color: #e0e0e0 !important;
}

/* Ensure consistent border on the last tile */
.tiles .tile:last-child {
    border-right: 1px solid #444 !important;
}

/* Heading/Title for the Dashboard Widgets */
.client-home-panels .panel > .panel-heading {
    background-color: #252527 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #444 !important;
}

/* Sidebar Panel Titles ("Your Info", "Contacts", etc.) */
.panel-sidebar .panel-title {
    background-color: #252527;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 15px;
    margin: -10px -15px 10px; /* Adjusts spacing to look clean */
}

/* Footer of the Sidebar Panels */
.panel-sidebar > .panel-footer {
    background-color: #2c2c2e;
    border-top: 1px solid #444;
}

/* Knowledgebase Search Bar on the Homepage */
.home-kb-search .form-control {
    background-color: #333 !important;
    color: #e0e0e0 !important;
    border-color: #555 !important;
}

/* Fixes for text and numbers inside the dashboard tiles */
.tiles .tile .stat {
    color: #ffffff;
}

.tiles .tile .desc, .tiles .tile a {
    color: #cccccc;
    opacity: 1; /* Override any fade effects */
}

.tiles .tile a:hover {
    color: #ffffff;
}

/* Fix for buttons like "+ New Contact" */
.btn.btn-block.btn-default {
    color: #fff;
    background-color: #4a4a4e;
    border-color: #666;
    text-shadow: none;
}
.btn.btn-block.btn-default:hover {
    background-color: #5a5a5e;
}

/* ==========================================================================
   Remove ALL Sidebar Panels from Client Area Homepage
   ========================================================================== */

/* This hides the "Your Info" panel column */
.col-md-3.pull-md-left.sidebar {
    display: none;
}

/* This hides the "Contacts" and "Shortcuts" panel column */
.col-md-3.pull-md-left.sidebar-secondary {
    display: none;
}

/*
  This finds the main content area and expands it to fill the full width,
  and also removes the "Welcome Back" header that is now redundant.
*/
.col-md-9.pull-md-right.main-content {
    width: 100% !important;
}

.col-md-9.pull-md-right .header-lined {
    display: none;
}