/*
================================================================
 HXS Custom WHMCS Theme - v2.1 (Updated)
================================================================
*/

/* --- 1. Variables & Root Configuration --- */
:root {
    --hxs-bg-dark: #121212;
    --hxs-bg-panel: #1E1E1E;
    --hxs-bg-panel-hover: #2a2a2a;
    --hxs-text: #f0f0f0;
    --hxs-text-muted: #b5b5b5;
    --hxs-text-headings: #ffffff;
    --hxs-accent-primary: #F08040; /* Orange */
    --hxs-accent-secondary: #D87030; /* Darker Orange */
    --hxs-border: #367BF5; /* Blue */
    --hxs-radius: 8px;
}

/* --- 2. Base Styles --- */
html, body {
    background-color: var(--hxs-bg-dark) !important;
    color: var(--hxs-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
.container {
    max-width: 1400px;
}
a {
    color: var(--hxs-accent-primary);
    transition: color 0.2s ease, transform 0.2s ease;
}
a:hover {
    color: var(--hxs-text-headings);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--hxs-text-headings);
    font-weight: 600;
}

/* --- 3. Components --- */
/* Buttons */
.btn {
    border-radius: var(--hxs-radius);
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border: none;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    top: 0;
}
.btn-primary:active {
    transform: translateY(0px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.btn-secondary {
    background-color: transparent;
    color: var(--hxs-text);
    border: 1px solid var(--hxs-border);
}
.btn-secondary:hover {
    background-color: var(--hxs-bg-panel-hover);
    border-color: var(--hxs-accent-primary);
    color: var(--hxs-accent-primary);
}
body .btn-primary {
    background: linear-gradient(180deg, #f29c57, #F08040) !important;
    color: #fff !important;
    border-top: 1px solid #f29c57 !important;
    border-bottom: 1px solid #d87030 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}
body .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
    background: linear-gradient(180deg, #f5a96f, #f29c57) !important;
}

/* Cards & Panels */
.card, .panel, .modal-content, .list-group-item {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}
.card:hover {
    border-color: var(--hxs-accent-primary);
    transform: translateY(-2px);
}

/* Forms */
.form-control {
    color: var(--hxs-text);
}
.form-control, .form-select {
    display: flex !important;
    background-color: var(--hxs-bg-dark) !important;
    color: var(--hxs-text) !important;
    border: 1px solid var(--hxs-border) !important;
    border-radius: var(--hxs-radius) !important;
}
.form-select {
  width: 100%;
  min-height: 2rem;
  max-height: 3rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hxs-accent-primary);
    box-shadow: 0 0 8px rgba(240, 128, 64, 0.25);
}

/* --- 4. Layout --- */
/* Header & Navbar */
#header {
    background-color: var(--hxs-bg-panel) !important;
    border-bottom: 1px solid var(--hxs-border);
}
#header .navbar-brand {
    color: var(--hxs-text-headings) !important;
    font-weight: 600;
}
#mainNavbar ul li a {
    color: var(--hxs-text-muted) !important;
    font-size: 1rem;
    font-weight: 500;
}
#mainNavbar ul li a:hover {
    color: var(--hxs-text-headings) !important;
}
.navbar .dropdown-menu {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
}

/* --- 5. Page-Specific Styles --- */
/* Homepage Sections */
.homepage-hero {
    background-color: var(--hxs-bg-panel);
    padding: 4rem 0;
    border-bottom: 1px solid var(--hxs-border);
}
.custom-homepage-layout {
    padding: 3rem 0;
}
.homepage-hero .display-4, .homepage-section-title {
    color: var(--hxs-text-headings);
    font-weight: 700;
}
.homepage-section-title {
    margin-bottom: 2rem;
}
.homepage-hero .lead {
    color: var(--hxs-text-muted);
    font-size: 1.25rem;
}

/* Homepage Featured Games */
.featured-games-section, .why-us-section, .control-panel-section, .category-section {
    margin-bottom: 3.5rem;
}
.featured-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.featured-game-card {
    display: block;
    height: 450px;
    border-radius: var(--hxs-radius);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--hxs-border);
    transition: all 0.3s ease;
}
.featured-game-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    border-color: var(--hxs-accent-primary);
}
#featured-game-1 {
    background-image: url('https://ik.imagekit.io/nzbuwt9by/17545542797822.jpg?updatedAt=1754809916491');
}
#featured-game-2 {
    background-image: url('https://ik.imagekit.io/nzbuwt9by/17545542580343.jpg?updatedAt=1754809916492');
}
#featured-game-3 {
    background-image: url('https://ik.imagekit.io/nzbuwt9by/17545542796383.jpg?updatedAt=1754809916488');
}

/* Homepage "Why Us?" */
.why-us-section {
    text-align: center;
}
.feature-card {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    padding: 2rem;
    height: 100%;
    transition: all 0.25s ease;
}
.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--hxs-accent-primary);
}
.feature-icon {
    font-size: 2.5rem;
    color: var(--hxs-accent-primary);
    margin-bottom: 1rem;
}
.feature-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/*
================================================================
 Homepage Control Panel
================================================================
*/
.control-panel-section {
    background-color: var(--hxs-bg-panel);
    padding: 3rem;
    border-radius: var(--hxs-radius);
    border: 1px solid var(--hxs-border);
}
.carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.carousel {
    flex-grow: 1;
    border-radius: var(--hxs-radius);
    overflow: hidden;
    border: 1px solid var(--hxs-border);
    aspect-ratio: 16 / 9;
}
.carousel-inner, .carousel-item {
    height: 100%;
}
.carousel-item img {
    height: 100%;
    width: 100%; /* Make image take full width of its container */
    object-fit: contain; /* This is the fix: ensures full image is visible */
}
.carousel-control-prev, .carousel-control-next {
    position: static;
    transform: none;
    width: auto;
    background: transparent !important;
    opacity: 0.7;
}
.carousel-control-prev:hover, .carousel-control-next:hover {
    opacity: 1;
}
.carousel-control-prev i, .carousel-control-next i {
    font-size: 2.5rem;
    color: #fff;
    text-shadow: none;
}
.carousel-indicators [data-bs-target] {
    background-color: var(--hxs-accent-primary);
}

/* Homepage Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.category-box {
    display: block;
    text-align: center;
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    padding: 2.5rem 2rem;
    text-decoration: none;
}
.category-box:hover {
    border-color: var(--hxs-accent-primary);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.category-box .category-title {
    font-size: 1.5rem;
}

/*
================================================================
 6. Order Form Styles
================================================================
*/

/* --- Order Form Progress Bar --- */
.order-steps {
    border-radius: var(--hxs-radius);
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    padding: 1rem;
}
.order-steps .step-container.active .step,
.order-steps .step-container.active .arrow {
    background-color: var(--hxs-accent-primary);
    color: #fff;
}

/* --- Main Panels & Content Areas --- */
.product-details, .domain-selection, #order-summary, .card.checkout-details {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
}
.product-details-container h2 {
    color: var(--hxs-text-headings);
}

/* --- Configurable Options & Addons --- */
.addon-products .panel, .configurable-options .card {
    background-color: var(--hxs-bg-dark); /* Slightly darker to stand out */
}
label {
    color: var(--hxs-text);
}
.field-error-msg {
    color: #ff6b6b;
}

/* --- Domain Search Results --- */
.domain-checker-results-list .list-group-item,
.domain-results .domain-suggestions .list-group-item {
    background-color: var(--hxs-bg-panel);
    border-color: var(--hxs-border);
}
.domain-results .domain-suggestions .list-group-item.domain-suggestion,
.domain-results .spotlight .list-group-item {
    background-color: var(--hxs-bg-panel-hover);
}
.domain-pricelabel, .domain-pricelabel .price {
    color: var(--hxs-text);
}
.domain-pricelabel .promo {
    color: #2ECC71; /* Green color for promos */
}

/* --- Order Summary Sidebar --- */
#order-summary {
    background-color: var(--hxs-bg-dark);
    border-left: 1px solid var(--hxs-border);
}
#order-summary .summary-container {
    border-bottom: 1px solid var(--hxs-border);
    background-color: var(--hxs-bg-panel);
}
#order-summary .total-due-today .price {
    color: var(--hxs-accent-primary);
}
.promo-code-field-container .form-control {
    background-color: var(--hxs-bg-panel);
}

/* --- View Cart / Checkout Page --- */
.cart-items .cart-item {
    border-bottom: 1px solid var(--hxs-border);
}
.cart-item .products-list .product-info,
.cart-item .products-list .product-price {
    color: var(--hxs-text);
}
.payment-gateways-container .gateway-logo,
.payment-gateways-container .gateway-name {
    background-color: var(--hxs-bg-panel);
    border-color: var(--hxs-border);
}

/*
================================================================
 8. Product List Page (List Style)
================================================================
*/
.product-list-container {
    width: 100%;
}

.product-row {
    display: flex;
    align-items: center;
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    padding: 1rem 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
}

.product-row:hover {
    border-color: var(--hxs-accent-primary);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.product-logo {
    flex-shrink: 0;
    width: 64px; /* Sets a standard size for all logos */
    height: 64px;
    margin-right: 1.5rem;
}

.product-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures logos aren't stretched */
}

.product-info {
    flex-grow: 1; /* Allows this section to take up the available space */
}

.product-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    color: var(--hxs-text-headings);
}

.product-info p {
    margin: 0;
    color: var(--hxs-text-muted);
}

.product-actions {
    display: flex;
    gap: 0.75rem; /* Adds space between the buttons */
    margin-left: 1rem;
}

/*
================================================================
 9. Product Group Tabs
================================================================
*/
.product-group-tabs {
    border-bottom: 2px solid var(--hxs-bg-panel-hover);
    margin-bottom: 2rem;
}

.product-group-tabs .nav-item {
    margin-bottom: -2px; /* Pulls the active tab's bottom border over the main border */
}

.product-group-tabs .nav-link {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--hxs-text-muted);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    transition: all 0.2s ease-in-out;
}

.product-group-tabs .nav-link:hover {
    color: var(--hxs-text-headings);
    border-bottom-color: var(--hxs-bg-panel-hover);
}

.product-group-tabs .nav-link.active {
    color: var(--hxs-accent-primary);
    border-bottom-color: var(--hxs-accent-primary);
}

/*
================================================================
 10. Product List Order Button
================================================================
*/
.btn-product-order {
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 1.3;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    min-width: 130px; /* Ensures buttons have a consistent width */
}

.btn-product-order .order-text {
    font-size: 1rem;
    font-weight: 600;
}

.btn-product-order .order-price {
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: none; /* Keep price text normal case */
    opacity: 0.9;
}

/*
================================================================
 12. Footer
================================================================
*/
#footer {
    background-color: var(--hxs-bg-panel);
    border-top: 2px solid var(--hxs-border);
    padding: 1.5rem 0;
    margin-top: 3rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer p.copyright {
    margin: 0;
    color: var(--hxs-text-muted);
}

.footer-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.footer-actions a {
    color: var(--hxs-text-muted);
    font-weight: 500;
    text-decoration: none;
}
.footer-actions a:hover {
    color: var(--hxs-text-headings);
}

.footer-actions .btn-language {
    background-color: var(--hxs-bg-dark);
    color: var(--hxs-text);
    border: 1px solid var(--hxs-border);
}
.footer-actions .btn-language:hover {
    border-color: var(--hxs-accent-primary);
    color: var(--hxs-accent-primary);
}

/*
================================================================
 15. Product Configuration Page (Stable Layout)
================================================================
*/

/* --- Hide the default left sidebar and expand the main content --- */
#order-standard_cart .cart-sidebar {
    display: none;
}
#order-standard_cart .cart-body {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

/* --- Style the main content panels --- */
#order-standard_cart .secondary-cart-body,
#order-standard_cart #orderSummary {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    padding: 2.5rem;
}
#order-standard_cart .sub-heading {
    border-bottom: 1px solid var(--hxs-bg-panel-hover);
    margin: 1.5rem 0;
    padding-bottom: 1rem;
}
#order-standard_cart .sub-heading:first-child {
    margin-top: 0;
}
#order-standard_cart .sub-heading span {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--hxs-text-headings);
}

/* --- Style the Order Summary --- */
#orderSummary {
    padding: 0;
    overflow: hidden;
}
#orderSummary h2 {
    font-size: 1.5rem;
    padding: 1.5rem;
    margin: 0;
    background-color: var(--hxs-bg-panel-hover);
}
#orderSummary .summary-container {
    padding: 1.5rem;
    background-color: var(--hxs-bg-panel) !important;
}
#orderSummary .summary-container .product-info {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
}
#orderSummary .total-due-today {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--hxs-accent-primary);
}
#orderSummary .total-due-today .price {
    color: var(--hxs-accent-primary) !important;
    font-size: 2rem;
    font-weight: 700;
}
#orderSummary .text-center {
    padding: 1rem;
    background-color: var(--hxs-bg-panel-hover);
}

/*
================================================================
 19. Product Config Page - Final Polish (Stable Layout)
================================================================
*/

/* --- Main Content Panels & Text --- */
#order-standard_cart .cart-body .product-info,
#order-standard_cart .secondary-cart-body {
    background-color: var(--hxs-bg-panel);
    color: var(--hxs-text) !important;
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    padding: 1rem;
}
#order-standard_cart p,
#order-standard_cart label {
    color: var(--hxs-text);
}
#order-standard_cart .product-title {
    color: var(--hxs-text-headings) !important;
}

/* --- Styled Section Titles --- */
.secondary-cart-body .sub-heading {
    text-align: center;
    border-bottom: 1px solid var(--hxs-bg-panel-hover);
    margin: 2rem 0;
    padding-bottom: 1rem;
}
.secondary-cart-body .sub-heading:first-of-type {
    margin-top: 0;
}
.secondary-cart-body .sub-heading span {
    font-size: 1.5rem;
    font-weight: 600;
}

/* --- Polished Order Summary --- */
#orderSummary {
    background-color: var(--hxs-bg-panel);
    padding: 0;
}
#orderSummary .summary-container {
    padding: 1.5rem;
}
#orderSummary .summary-container .product-info,
#orderSummary .summary-container .price,
#orderSummary .summary-container .subtotal,
#orderSummary .summary-container .total-due-today {
    background-color: transparent !important;
    color: var(--hxs-text) !important;
}
#orderSummary .total-due-today .price {
    color: var(--hxs-accent-primary) !important;
    font-size: 2rem;
    font-weight: 700;
}

/* --- Themed HTML5 Quantity Slider --- */
.custom-slider-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--hxs-bg-dark);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    outline: none;
}
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--hxs-accent-primary);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #fff;
}
.custom-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--hxs-accent-primary);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #fff;
}
.slider-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hxs-text-headings);
    background-color: var(--hxs-bg-panel-hover);
    padding: 0.25rem 0.75rem;
    border-radius: var(--hxs-radius);
    min-width: 50px;
    text-align: center;
}

/* --- Themed HTML5 Quantity Slider --- */
/* This section can be added once the JS error is confirmed to be fixed */

/*
================================================================
 Config Page - Definitive Text Color Override
================================================================
*/

/* This ultra-specific selector is more powerful than the default
  WHMCS style and will force the text to be light-colored.
*/
body #order-standard_cart .configurable-options .form-group > label,
body #order-standard_cart .styled-radios label,
body #order-standard_cart .styled-checkbox label {
    color: var(--hxs-text-headings) !important;
    font-weight: 500;
}

/*
================================================================
 20. Definitive Config Page Fixes
================================================================
*/

/* --- Fix for White Panels & Dark Text --- */
#order-standard_cart .secondary-cart-body,
#order-standard_cart #orderSummary {
    background-color: var(--hxs-bg-panel) !important;
    color: var(--hxs-text) !important;
}
#order-standard_cart .secondary-cart-body p,
#order-standard_cart .secondary-cart-body label {
    color: var(--hxs-text) !important;
}
#order-standard_cart .secondary-cart-body .sub-heading span,
#order-standard_cart .product-title {
    color: var(--hxs-text-headings) !important;
    background-color: var(--hxs-bg-panel) !important;
}

/* --- Fix for White Order Summary Content --- */
#orderSummary .summary-container,
#orderSummary .summary-container div {
    background-color: transparent !important;
    color: var(--hxs-text) !important;
}
#orderSummary .summary-container .total-due-today .price {
    color: var(--hxs-accent-primary) !important;
}

/* --- Themed HTML5 Quantity Slider --- */
.custom-slider-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.custom-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: var(--hxs-bg-dark);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    outline: none;
}
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--hxs-accent-primary);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #fff;
}
.custom-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--hxs-accent-primary);
    cursor: pointer;
    border-radius: 50%;
    border: 3px solid #fff;
}
.slider-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--hxs-text-headings);
    background-color: var(--hxs-bg-panel-hover);
    padding: 0.25rem 0.75rem;
    border-radius: var(--hxs-radius);
    min-width: 50px;
    text-align: center;
}

.irs-min, .irs-max {
    background-color: var(--hxs-bg-dark) !important;
    color: var(--hxs-text) !important;
}

.irs-from, .irs-to, .irs-single {
    background-color: var(--hxs-border) !important;
    font-size: 1rem !important;
    margin-bottom: 5px !important;
}

#order-standard_cart .view-cart-items .item {
    background-color: var(--hxs-bg-panel) !important;
}
#order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--hxs-bg-panel) !important;
}

.btn-default {
    background-color: var(--hxs-accent-primary) !important;
    color: var(--hxs-text) !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded=true], #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected=true] {
    background-color: #058 !important;
    color: var(--hxs-text);
}

.announcements .announcement article {
    background-color: var(--hxs-bg-panel) !important;
    color: var(--hxs-text) !important;
}
.md-editor {
    border-color: var(--hxs-border) !important;
}
.md-editor>.btn-toolbar {
    background-color: var(--hxs-bg-panel) !important;
}
.md-editor>.md-preview, .md-editor>textarea.markdown-editor {
    background-color: var(--hxs-bg-panel) !important;
    border-color: var(--hxs-border) !important;
}
.md-editor .md-footer, .md-editor>.md-header {
    background-color: var(--hxs-bg-panel) !important;
    color: var(--hxs-text) !important;
}

.list-group-item-action {
    color: var(--hxs-text) !important;
}

.card, .panel, .modal-content, .list-group-item {
    background-color: var(--hxs-bg-panel) !important;
    border: 1px solid var(--hxs-border) !important;
    border-radius: var(--hxs-radius) !important;
    box-shadow: 0 0 4px var(--hxs-border) !important;
}
/*
================================================================
 Notification Bar
================================================================
*/
.notice-bar {
    background-color: var(--hxs-border); /* Use the theme's blue accent */
    color: #fff;
    padding: 0.5rem 1rem;
    text-align: center;
}
.notice-bar p {
    margin: 0;
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
}

.client-home-cards .card-header {
    background-color: var(--hxs-bg-panel) !important;
    color: var(--hxs-text) !important;
}

.tiles .tile {
    background-color: var(--hxs-bg-panel) !important;
    color: var(--hxs-text) !important;
}
.table {
    color: var(--hxs-text) !important;
}
.table-list>tbody>tr>td {
    color: var(--hxs-text) !important;
    background-color: var(--hxs-bg-panel) !important;
}
table.table-list thead th {
    color: var(--hxs-text) !important;
    background-color: var(--hxs-bg-panel) !important;
}
.navbar-toggler .fa-bars {
    color: var(--hxs-accent-primary) !important;
}
div.product-details div.product-icon {
    background-color: var(--hxs-bg-panel) !important;
}
.fa-inverse {
    color: var(--hxs-bg-panel) !important;
}
.bg-white {
    background-color: var(--hxs-bg-panel) !important;
}

/*
================================================================
 Header Discord Button
================================================================
*/
#mainNavbar .btn-discord {
    display: flex;
    align-items: center;
    background-color: #7289DA;
    color: #fff !important;
    padding: 0.5rem 1rem;
    text-transform: none;
    font-weight: 600;
    opacity: 1 !important; /* This is the fix */
    margin-left: 0.5rem;
}

.btn-discord span {
    padding-left: 5px;
}

.btn-discord:hover {
    background-color: #7289DA; /* White on hover */
    color: #fff !important;
}

.btn-discord svg {
    width: 1.2em;
    height: 1.2em;
}

/*
================================================================
 Homepage Hardware Section
================================================================
*/
.hardware-section {
    margin-bottom: 3.5rem;
}

.hardware-grid {
    display: grid;
    /* Creates a responsive grid that fits the items automatically */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.hardware-card {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    padding: 2rem;
    text-align: center;
    transition: all 0.25s ease;
}

.hardware-card:hover {
    transform: translateY(-5px);
    border-color: var(--hxs-accent-primary);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.hardware-icon {
    font-size: 3rem;
    color: var(--hxs-accent-primary);
    margin-bottom: 1.5rem;
}

.hardware-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--hxs-text-headings);
    margin-bottom: 0.75rem;
}

.hardware-card p {
    color: var(--hxs-text);
    font-size: 0.95rem;
    line-height: 1.6;
}

/*
================================================================
 Animated Arrow for Product Categories
================================================================
*/

/* 1. Use Flexbox to align the arrow and text */
.category-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* Space between arrow and text */
}

.category-grid a:hover {
    text-decoration: none;
}

/* 2. Style the arrow and prepare it for animation */
.category-arrow {
    font-size: 1.25rem; /* Makes the arrow slightly smaller than the text */
    color: var(--hxs-accent-primary); /* Use the theme's orange color */
    transition: transform 0.3s ease-in-out; /* Smooth animation */
}

/* 3. On hover, move the arrow to the right */
.category-box:hover .category-arrow {
    transform: translateX(8px); /* Moves the arrow 10px to the right */
}

/*
================================================================
 Final Fix: Rotating Gradient Border for Categories
================================================================
*/

/* 1. Define the custom property to be animated. This is essential for the rotation. */
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

/* 2. The main category box container */
.category-box {
    position: relative;
    z-index: 1;
    display: block;
    text-align: center;
    padding: 2.5rem 2rem;
    text-decoration: none;
    border: none;
    background: transparent;
    transition: transform 0.2s ease;
}

/* 3. The ::before pseudo-element IS the animated gradient border */
.category-box::before {
    content: '';
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--hxs-radius);
    
    /* A conic-gradient creates a circular gradient perfect for rotation */
    background: conic-gradient(
        from var(--border-angle),
        var(--hxs-border),
        var(--hxs-border) 25%,
        var(--hxs-accent-primary) 40%, /* The orange "comet" */
        var(--hxs-border) 75%,
        var(--hxs-border)
    );
    
    /* Apply the new rotation animation */
    animation: spin-border 3s linear infinite;
}

/* 4. The ::after pseudo-element IS the inner background */
.category-box::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: var(--hxs-bg-panel);
    border-radius: calc(var(--hxs-radius) - 2px);
}

/* 5. The hover effect */
.category-box:hover {
    transform: translateY(-5px);
}

/* 6. Keyframes to animate the --border-angle custom property */
@keyframes spin-border {
    to {
        --border-angle: 1turn;
    }
}

/*
================================================================
 Fix for WHMCS Stripe Elements Input Fields
================================================================
*/
#stripeElements .form-control.StripeElement {
    display: block !important;
}
/*
================================================================
 Stripe Payment Fields - Text Visibility Fix
================================================================
*/
#stripeElements .StripeElement {
    background-color: #ffffff !important;
}
.table .table-condensed {
    background-color: var(--hxs-bg-panel) !important;
    color:#121212;
}

/*
================================================================
 Definitive Fix for Invoice Summary Table Styling
================================================================
*/

/* 1. Force the parent card to have the correct dark background */
#invoiceIdSummary.card {
    background-color: var(--hxs-bg-panel) !important;
    border: 1px solid var(--hxs-border) !important;
}

/* 2. Remove the white background from all table cells */
#invoiceIdSummary .table td {
    /* This makes the cells transparent so the dark card background shows through */
    background-color: transparent !important;
    border-top: 1px solid var(--hxs-bg-panel-hover) !important;
}

/* 3. Re-apply the specific background for the header row */
#invoiceIdSummary .table tbody tr:first-child td {
    background-color: var(--hxs-bg-dark) !important;
    border-top: none !important;
}

/* 4. Re-apply the specific background and accent border for the final total row */
#invoiceIdSummary .table tbody tr:last-child {
    background-color: var(--hxs-bg-dark) !important;
}
#invoiceIdSummary .table tbody tr:last-child td {
    border-top: 2px solid var(--hxs-accent-primary) !important;
}

/* 5. Ensure all text in the table remains light-colored */
#invoiceIdSummary .table, #invoiceIdSummary .table td {
    color: var(--hxs-text) !important;
}
#invoiceIdSummary .table .total-row, #invoiceIdSummary .table strong {
    color: var(--hxs-text-headings) !important;
}

/*
================================================================
  Product List - Collapsible Description
================================================================
*/

/* 1. Main product wrapper */
.product-item-wrapper {
    background-color: var(--hxs-bg-panel);
    border: 1px solid var(--hxs-border);
    border-radius: var(--hxs-radius);
    margin-bottom: 1rem;
    transition: all 0.2s ease-in-out;
}
.product-item-wrapper:hover {
    border-color: var(--hxs-accent-primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Make the original .product-row transparent inside the new wrapper */
.product-row {
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    padding: 1rem 1.5rem;
    margin: 0;
}

/* 2. Group for the product title and toggle button */
.product-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between title and arrow */
}
.product-title-group h4 {
    margin: 0;
}

/* 3. The arrow toggle button styling */
.btn-description-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hxs-text-muted);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.btn-description-toggle:hover {
    color: var(--hxs-accent-primary);
}
.btn-description-toggle i {
    transition: transform 0.3s ease-in-out;
}

/* 4. The ROTATING arrow animation! */
/* This selector targets the button when the description is expanded */
.btn-description-toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* 5. The hidden description content panel */
.product-description-content {
    padding: 0 1.5rem 1.5rem 1.5rem; /* Padding on all sides except the top */
    color: var(--hxs-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Add a separator line for a clean look */
.product-description-content .description-body {
    border-top: 1px solid var(--hxs-bg-panel-hover);
    padding-top: 1.5rem;
    margin-left: calc(64px + 1.5rem); /* Aligns description text with the product title */
}