/* Inter Variable — covers all weights 100-900 in a single woff2 (~350 KB).
   Replaces the 6-file Roboto setup. font-display: optional keeps CLS at
   zero (browser uses the fallback if Inter hasn't loaded by the first
   frame, never swaps in mid-render). v4.66 of Inter (rsms.me/inter). */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("/fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: optional;
    src: url("/fonts/inter/InterVariable-Italic.woff2") format("woff2");
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

:root {
    --bs-primary: #fecb08;
    --bs-primary-rgb: 254, 203, 8;
    --default-text-color: #333;
    --bs-light-rgb: 33 37 41;
    --bs-link-color-rgb: #333;
    --bs-link-hover-color-rgb: #333;
    --bs-btn-color: #000;
    --active-color: rgb(51, 51, 51);
    --navbar-color-bg: #f8f9fa;
    --secondary-navbar-color-bg: #f8f9fa;
    --dropdown-options-color-bg: #fff;
    --dropdown-option-hover-color-bg: #f8f9fa;
}

.nav {
    --bs-nav-link-color: rgba(0, 0, 0, 0.65);
    --bs-nav-link-hover-color: rgba(0, 0, 0, 0.75);
    --bs-nav-link-active-color: rgba(0, 0, 0, 1);
    --bs-nav-link-disabled-color: rgba(0, 0, 0, 0.3);
}

.btn-primary {
    --bs-btn-color: #2a2a2a;
    --bs-btn-bg: #fecb08;
    --bs-btn-hover-bg: #e4b607;
    --bs-btn-hover-color: #2a2a2a;
    --bs-btn-active-bg: #e4b607;
    --bs-btn-active-color: #2a2a2a;
    --bs-btn-disabled-color: #2a2a2a;
    --bs-btn-disabled-bg: #fecb08;
    --bs-btn-border-color: #fecb08;
    --bs-btn-hover-border-color: #e4b607;
    --bs-btn-active-border-color: #e4b607;
    --bs-btn-disabled-border-color: #fecb08;
}

.btn-outline-primary {
    --bs-btn-color: #b8860b;
    --bs-btn-border-color: #fecb08;
    --bs-btn-hover-color: #2a2a2a;
    --bs-btn-hover-bg: #fecb08;
    --bs-btn-hover-border-color: #fecb08;
    --bs-btn-focus-shadow-rgb: 254, 203, 8;
    --bs-btn-active-color: #2a2a2a;
    --bs-btn-active-bg: #e4b607;
    --bs-btn-active-border-color: #e4b607;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #b8860b;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fecb08;
    --bs-gradient: none;
}

[data-bs-theme="dark"] {
    --bs-primary: #e4b607;
    --bs-primary-rgb: 228, 182, 7;
    --bs-white-rgb: 33 37 41;
    --default-text-color: rgb(222, 226, 230);
    --bs-light-rgb: 33 37 41;
    --bs-link-color-rgb: 222, 226, 230;
    --bs-link-hover-color-rgb: 222 226 230;
    --bs-btn-color: #fff;
    --navbar-color-bg: #343a40;
    --secondary-navbar-color-bg: #2b3035;
    --dropdown-options-color-bg: #212529;
    --dropdown-option-hover-color-bg: #2b3035;
    --active-color: rgb(222, 226, 230);
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-color: #e0e0e0;
    --bs-accordion-bg: #212529;
    --bs-accordion-border-color: #333333;
    --bs-accordion-btn-color: #e0e0e0;
    --bs-accordion-btn-bg: #272b2f;
    --bs-accordion-active-bg: #2c3034;
    --bs-accordion-active-color: #e0e0e0;
}

[data-bs-theme="dark"] .nav {
    --bs-nav-link-color: rgba(255, 255, 255, 0.65);
    --bs-nav-link-hover-color: rgba(255, 255, 255, 0.75);
    --bs-nav-link-active-color: rgba(255, 255, 255, 1);
    --bs-nav-link-disabled-color: rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-color: #2a2a2a;
    --bs-btn-bg: #fecb08;
    --bs-btn-hover-bg: #e4b607;
    --bs-btn-hover-color: #2a2a2a;
    --bs-btn-active-bg: #e4b607;
    --bs-btn-active-color: #2a2a2a;
    --bs-btn-disabled-color: #2a2a2a;
    --bs-btn-disabled-bg: #fecb08;
    --bs-btn-border-color: #fecb08;
    --bs-btn-hover-border-color: #e4b607;
    --bs-btn-active-border-color: #e4b607;
    --bs-btn-disabled-border-color: #fecb08;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #fecb08;
    --bs-btn-border-color: #fecb08;
    --bs-btn-hover-color: #2a2a2a;
    --bs-btn-hover-bg: #fecb08;
    --bs-btn-hover-border-color: #fecb08;
    --bs-btn-focus-shadow-rgb: 254, 203, 8;
    --bs-btn-active-color: #2a2a2a;
    --bs-btn-active-bg: #e4b607;
    --bs-btn-active-border-color: #e4b607;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fecb08;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fecb08;
    --bs-gradient: none;
}

[data-bs-theme="dark"] .table-light {
    --bs-table-color: #fff;
    --bs-table-bg: #212529;
    --bs-table-border-color: #4d5154;
    --bs-table-striped-bg: #2c3034;
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: #373b3e;
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: #323539;
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--bs-tertiary-bg);
    --bs-dropdown-link-active-color: white;
}

[data-bs-theme="dark"] .list-group {
    --bs-list-group-active-bg: var(--bs-tertiary-bg);
    --bs-list-group-active-color: white;
}

.nav .nav-link.active,
.nav .nav-link.show {
    color: var(--bs-nav-link-active-color);
}

.btn-discord {
    --bs-btn-color: #fff;
    --bs-btn-bg: #5865f2;
    --bs-btn-border-color: #5865f2;
    --bs-btn-hover-bg: #4752c4;
    --bs-btn-hover-border-color: #4752c4;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #4752c4;
    --bs-btn-active-border-color: #4752c4;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #5865f2;
}

.btn-outline-discord {
    --bs-btn-color: #5865f2;
    --bs-btn-border-color: #5865f2;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #5865f2;
    --bs-btn-hover-border-color: #5865f2;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #4752c4;
    --bs-btn-active-border-color: #4752c4;
    --bs-btn-disabled-color: #5865f2;
    --bs-btn-disabled-border-color: #5865f2;
}

html {
    scroll-padding-top: 50px;
}

html,
body {
    font-size: 13px;
    line-height: 1.5;
    color: var(--default-text-color);
}

.container {
    max-width: 1100px;
}

img {
    font-size: 0;
}

.pop {
    cursor: zoom-in;
}

.text-container {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    text-align: justify;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Navbar */
.navbar {
    height: 42px;
    font-size: 13px;
    border-bottom: 0.1px solid var(--bs-border-color);
    background: var(--navbar-color-bg) !important;
}

.navbar-brand {
    vertical-align: middle;
}

/* Responsive username truncation in the navbar. The layout uses
   `navbar-expand` (no breakpoint), so all 9 left links stay visible from
   md up and the md range (768-991px) is the tightest band — there we
   hide the name entirely and show an icon (see Navbar.cshtml). Below md
   the left nav collapses into the sidebar so there's room; at lg+ the
   container widens. Full name available on hover via `title=`. */
.nav-username {
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

@media (min-width: 1200px) {
    .nav-username { max-width: 200px; }
}

.secondary-navbar {
    height: 32px;
    font-size: 12px;
    border-bottom: 0.1px solid var(--bs-border-color);
    background: var(--secondary-navbar-color-bg) !important;
    top: 42px !important;
    z-index: 3;
    position: fixed;
    width: 100%;
    right: 0;
    left: 0;
}

/* Heroes */

.b-example-divider {
    height: 3rem;
    background-color: rgba(0, 0, 0, 0.1);
    border: solid rgba(0, 0, 0, 0.15);
    border-width: 1px 0;
    box-shadow:
        inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
        inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
}

@media (min-width: 992px) {
    .rounded-lg-3 {
        border-radius: 0.3rem;
    }
}

/* Sticky footer styles
-------------------------------------------------- */

.border-top {
    border-top: 1px solid #e5e5e5;
}
.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
    scrollbar-gutter: stable;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

/* Prevent Bootstrap modal from adding extra padding when scrollbar-gutter is used */
body.modal-open {
    padding-right: 0 !important;
    overflow: hidden !important;
}

body.modal-open .navbar,
body.modal-open .header-section,
body.modal-open .main-header {
    padding-right: 0 !important;
}

.cart-icon {
    position: relative;
    color: var(--bs-nav-link-color);
}

.cart-icon:hover {
    color: var(--bs-nav-link-hover-color);
}

.cart-count {
    position: absolute;
    top: 14px;
    left: 13px;
    color: var(--bs-nav-link-color);
    padding: 3px 6px;
    font-size: 12px;
}

.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 40px;
    padding-left: calc(100vw - 100%);
}

.cursor-pointer {
    cursor: pointer;
}

/* Snackbar styles
-------------------------------------------------- */
#snackbar {
    visibility: hidden; /* Hidden by default. Visible on click */
    min-width: 250px; /* Set a default minimum width */
    margin-left: -125px; /* Divide value of min-width by 2 */
    background-color: #333; /* Black background color */
    color: #fff; /* White text color */
    text-align: center; /* Centered text */
    border-radius: 2px; /* Rounded borders */
    padding: 16px; /* Padding */
    position: fixed; /* Sit on top of the screen */
    z-index: 1; /* Add a z-index if needed */
    left: 50%; /* Center the snackbar */
    bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
    visibility: visible; /* Show the snackbar */
    /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
    -webkit-animation:
        fadein 0.5s,
        fadeout 0.5s 2.5s;
    animation:
        fadein 0.5s,
        fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

/* currency flag */

.form-group {
    display: flex;
    align-items: center; /* Center vertically */
}

.currency-label {
    margin-right: 10px; /* Space between label and dropdown */
}

.custom-dropdown-container {
    flex: 1; /* Take remaining space */
}

.custom-dropdown {
    position: relative;
    display: flex;
    cursor: pointer;
    align-items: center;
    width: 90px;
}

.selected-option {
    padding: 10px;
    display: flex;
    align-items: center;
    width: 120px;
}

.dropdown-options {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    border: 1px solid var(--bs-border-color);
    background-color: var(--dropdown-options-color-bg);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    border-radius: 0.3rem;
}

.dropdown-option {
    padding: 10px;
    display: flex;
    align-items: center;
    background: transparent;
}

.dropdown-option:hover {
    background-color: var(--dropdown-option-hover-color-bg);
}

.fi {
    margin-right: 10px;
}

/* Videos */
.video-card {
    overflow: hidden;
}

.video-card-thumbnail {
    position: relative;
    padding-bottom: 56%;
    background-size: cover;
    width: 100%;
}

.video-card-title {
    height: 50px;
    overflow: hidden;
    line-height: 20.5px;
    text-overflow: ellipsis;
    font-size: 13.5px;
    font-weight: 600;
}

.video-card-duration {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 2px 5px;
    font-size: 12px;
}

.breadcrumb-first {
    padding-left: 0 !important;
}

.breadcrumb-first::before {
    content: none;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: none;
}

@media (max-width: 640px) {
    .hide-xs {
        display: none;
    }
    .show-xs {
        display: block !important;
    }
}

@media (max-width: 768px) {
    .hide-sm {
        display: none;
    }
    .show-sm {
        display: block !important;
    }
}

@media (max-width: 1024px) {
    .hide-md {
        display: none;
    }
    .show-md {
        display: block !important;
    }
}

@media (max-width: 1280px) {
    .hide-lg {
        display: none;
    }
    .show-lg {
        display: block !important;
    }
}

@media (max-width: 1400px) {
    .hide-xl {
        display: none;
    }
    .show-xl {
        display: block !important;
    }
}

.release-description > :last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.text-yellow {
    color: #fecb08 !important;
}

.card-hover {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card-hover:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.2);
}

.card-hover-info:hover {
    border-color: var(--bs-info);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--bs-info-rgb), 0.2);
}

/* Floating Cart Bar */
.floating-cart-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--navbar-color-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: 10px 0;
    z-index: 1030;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Only animate when dynamically created by JS */
.floating-cart-bar.animate-in {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.floating-cart-bar.hidden {
    animation: slideDown 0.3s ease forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Adjust layout when floating cart is visible */
body:has(.floating-cart-bar:not(.hidden)) {
    margin-bottom: 105px;
}

body:has(.floating-cart-bar:not(.hidden)) .footer {
    bottom: 45px;
}

/* Bootstrap caps tooltip width at 200px which crops the wider hover icon
   previews used in the asset list tables. The image attribute width sets
   the rendered image size, but the tooltip-inner container still clamps,
   so the image overflows. Bump the max-width on this opt-in class only. */
.tooltip-icon-preview {
    --bs-tooltip-max-width: 280px;
}
.tooltip-icon-preview .tooltip-inner {
    padding: 4px;
}

/* Shared page header used across /browser, /plugins, /servers, /hosting and
   similar landing pages. Replaces the per-page .browser-header / .plugins-header
   / .servers-header / .main-header blocks that inlined the same gradient + bg
   image trick. The bg image stays attached to the viewport so it appears to
   stand still while the user scrolls (parallax). Earlier inline copies used
   background-size: cover which mis-sized on ultrawide viewports and showed
   only part of the image; here we lock width to 100vw with auto height so
   coverage is consistent across screen widths. Per-page focal point is set
   via inline style="background-position: center 60%;" on .page-header-bg. */
.page-header {
    position: relative;
    color: #fff;
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 50%, #111111 100%);
}
.page-header-bg {
    position: absolute;
    inset: 0;
    /* Hosts the oversized background image (background-size: 110vw auto). The
       parent .page-header used to set overflow:hidden to keep the image from
       spilling, but that also clipped descendant flyouts (e.g. the /browser
       search results dropdown disappeared into the next section). The bg
       paint is already constrained to this element's own border-box by the
       default background-clip, so clipping happens here instead and the
       parent can stay overflow:visible for popovers. */
    overflow: hidden;
    background-image: var(--page-header-bg-image);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    /* 110vw guarantees ~10% overflow in every dimension regardless of monitor
       aspect ratio. Without overflow, background-position Y% has no room to
       shift the focal point and 16:9 source images on 16:9 viewports always
       show the top of the image (i.e., the sky). The slight horizontal crop
       is invisible behind the blur. */
    background-size: 110vw auto;
    opacity: 0.28;
    filter: blur(3px);
    pointer-events: none;
}
.page-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, 0.10) 0%, rgba(13, 13, 13, 0.40) 100%);
    pointer-events: none;
}
.page-header-content {
    position: relative;
    z-index: 1;
}
.page-header h1 {
    color: #fff;
}
.page-header .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}
/* background-attachment: fixed is dropped on most mobile browsers and looks
   weird with momentum scroll, so fall back to scroll attachment + element-
   relative cover sizing on small screens. */
@media (max-width: 768px) {
    .page-header-bg {
        background-attachment: scroll;
        background-size: cover;
    }
}

/* Blog promo strip — reusable across home/plugins/servers/browser/docs.
   Card matches the blog listing: cover on top, author pinned to the
   bottom regardless of title/excerpt length. */
.blogpromo-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blogpromo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
}
.blogpromo-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--bs-tertiary-bg);
}
.blogpromo-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.1rem 1.15rem;
}
.blogpromo-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-primary);
    margin-bottom: .4rem;
}
.blogpromo-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bs-body-color);
    margin: 0 0 .4rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blogpromo-excerpt {
    font-size: .9rem;
    color: var(--bs-secondary-color);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blogpromo-foot {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
    padding-top: 1rem;
    font-size: .82rem;
    color: var(--bs-secondary-color);
}
.blogpromo-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bs-tertiary-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--bs-body-color);
    flex: 0 0 auto;
    overflow: hidden;
}
.blogpromo-av img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}