/* ==========================================================================
   HabboQuests - Site chrome (Stage 1: header, navbar, banner, footer)

   Loaded after global.css and v2-0.css, so a handful of rules here use
   !important purely to unwind older !important declarations in global.css.

   Theme contract: the seasonal CSS stored in the database styles .banner,
   #navigationBar, .logo and the .header-* card colours. Those hooks are kept
   intact and this file deliberately avoids setting a background on .banner or
   #navigationBar in a way a theme cannot override.
   ========================================================================== */

:root {
    --hq-nav-bg: #3f4550;
    --hq-nav-bg-solid: #363b45;
    --hq-nav-text: rgba(255, 255, 255, 0.82);
    --hq-nav-text-active: #ffffff;
    --hq-nav-accent: #4fc3f7;
    --hq-nav-height: 58px;

    --hq-surface: #ffffff;
    --hq-surface-alt: #f4f6f8;
    --hq-border: rgba(15, 23, 42, 0.1);
    --hq-text: #3d4450;
    --hq-text-muted: #7c8698;

    --hq-footer-bg: #23272e;
    --hq-footer-bar: #151515;
    --hq-footer-text: rgba(255, 255, 255, 0.72);

    --hq-radius: 12px;
    --hq-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
    --hq-shadow-lg: 0 14px 40px rgba(15, 23, 42, 0.16);
}

body.theme-dark {
    --hq-nav-bg: #1d2128;
    --hq-nav-bg-solid: #191c22;
    --hq-surface: #262a31;
    --hq-surface-alt: #2e333b;
    --hq-border: rgba(255, 255, 255, 0.09);
    --hq-text: #d7dbe2;
    --hq-text-muted: #98a1b0;
    --hq-footer-bg: #16191e;
    --hq-footer-bar: #0e1013;
    --hq-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    --hq-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   Banner
   -------------------------------------------------------------------------- */

.hq-banner {
    padding: 0;
    margin-bottom: 0 !important;
    display: flex;
    align-items: flex-end;
}

.hq-banner-inner {
    width: 100%;
    padding-bottom: 18px;
}

/* Featured items carousel */
.hq-featured {
    border-radius: var(--hq-radius);
    overflow: hidden;
    box-shadow: var(--hq-shadow-lg);
}

.hq-featured-card {
    height: 125px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.hq-featured-card:hover {
    transform: scale(1.02);
}

.hq-featured-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    padding: 22px 16px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.hq-featured-dots {
    margin-bottom: 6px;
}

.hq-featured-dots li {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s ease, width 0.2s ease;
}

.hq-featured-dots li.active {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Radio player
   -------------------------------------------------------------------------- */

.hq-radio {
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--hq-radius);
    box-shadow: var(--hq-shadow-lg);
    color: #fff;
    padding: 10px 12px;
    height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Unwind the absolute positioning the old markup relied on. */
.hq-radio .radioStats,
.hq-radio .radioButtons {
    position: static;
    background: none;
    box-shadow: none;
    padding: 0;
    height: auto;
}

.hq-radio-body {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 0;
    flex: 1;
}

.hq-radio .quickStats {
    width: auto;
    flex-shrink: 0;
}

.hq-radio .djHabbo {
    width: 52px;
    height: 58px;
    overflow: hidden;
    position: relative;
    margin: 0;
    background: none;
}

.hq-radio .djHabbo img {
    width: 64px;
    margin-left: -6px;
    image-rendering: pixelated;
}

.hq-radio .djHabbo .overlay {
    display: none;
}

.hq-radio .statHolder {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.hq-radio-live {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
    color: rgba(255, 255, 255, 0.85);
}

.hq-radio-live b {
    color: #fff;
}

.hq-radio-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
    flex-shrink: 0;
    animation: hq-radio-pulse 2s infinite;
}

@keyframes hq-radio-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.hq-radio-song {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    width: 100%;
}

.hq-radio-song span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.hq-radio-stats {
    display: flex;
    gap: 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}

.hq-radio-stat i {
    margin-right: 3px;
    opacity: 0.8;
}

.hq-radio-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hq-radio-btn {
    border: 0;
    border-radius: 8px;
    width: 32px;
    height: 30px;
    flex-shrink: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.hq-radio-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.12);
}

.hq-radio-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 1px;
}

.hq-radio-btn-play { background: #22c55e; }
.hq-radio-btn-like { background: #ef4444; }
.hq-radio-btn-request { background: #0ea5e9; }

.hq-radio-slider {
    flex: 1;
    min-width: 60px;
    height: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
}

.hq-radio-slider .ui-slider-range {
    background: #fff;
    border: 0;
    border-radius: 999px;
}

.hq-radio-slider .ui-slider-handle {
    width: 13px;
    height: 13px;
    top: -4px;
    margin-left: -6px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    cursor: grab;
}

.hq-radio-slider .ui-slider-handle:focus {
    outline: none;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

/* #navigationBar carries the bar colour so the seasonal themes, which target
   this id, can actually recolour it. global.css paints .navbar with an
   !important grey, so that has to be unwound here. */
#navigationBar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--hq-nav-bg);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
    margin-bottom: 22px;
}

.hq-nav {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    min-height: var(--hq-nav-height);
    transition: min-height 0.2s ease;
}

.hq-nav-inner {
    min-height: var(--hq-nav-height);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    transition: min-height 0.2s ease;
}

.hq-nav.is-scrolled,
.hq-nav.is-scrolled .hq-nav-inner {
    min-height: 50px;
}

/* Brand ------------------------------------------------------------------ */

.hq-nav-brand {
    position: relative;
    margin-right: 18px;
    padding: 0;
    display: flex;
    align-items: center;
    /* Stretch to the bar's height so the logo, which is anchored against this
       box, lines up with the top edge rather than with the text inside it. */
    align-self: stretch;
}

.hq-nav-brand a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* .logo keeps its absolute positioning and theme-supplied artwork; it hangs up
   into the banner and is swapped for the wordmark once the bar sticks. */
.hq-nav-brand .logo {
    display: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.hq-nav-wordmark {
    color: #fff;
    font-family: 'Nunito', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

/* The logo artwork is a fixed ~293px sprite and the themes ship their own sizes,
   which will not fit beside six menus inside a 1140px container. So it is not
   laid out inline at all: it is anchored to hang up into the banner above the
   bar, overlapping only its top edge, and is free to extend right over the
   banner without covering any nav link. Only a small brand gap is reserved.

   The theme CSS still supplies the artwork and its width/height; only the
   vertical offset is neutralised, since the anchor below replaces it.

   Below xl, and once the bar sticks to the top and the banner has scrolled
   away, the compact wordmark stands in for it. */
@media (min-width: 1200px) {
    /* The logo only appears at this width, and it hangs up into the banner, so
       the carousel and radio player are lifted to leave it a clear band.

       The banner is 250px tall and its content 125px. The logo's bottom edge
       lands 266px down, so with a 118px theme logo its top edge is at 148px -
       the content has to finish above that. 106px of bottom padding puts it at
       144px, which clears the tallest logo any theme currently ships. */
    .hq-banner-inner {
        padding-bottom: 106px;
    }

    .hq-nav-brand {
        min-width: 120px;
    }

    /* The logo overhangs the nav links, so it must not swallow their clicks.
       The link keeps its own hit area in the bar instead. */
    .hq-nav-brand .logo {
        display: block;
        position: absolute;
        left: 0;
        bottom: calc(100% - 16px);
        margin-top: 0 !important;
        pointer-events: none;
        /* Themes set their own logo size. The width is left to them, but the
           height is capped so a taller sprite cannot grow up into the carousel;
           contain scales the artwork to fit rather than cropping it. */
        height: 118px !important;
        background-size: contain !important;
        background-repeat: no-repeat;
        background-position: left bottom;
    }

    .hq-nav-brand > a {
        width: 120px;
        height: 100%;
    }

    .hq-nav-wordmark {
        position: absolute;
        left: 0;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    .hq-nav.is-scrolled .hq-nav-brand .logo {
        opacity: 0;
        visibility: hidden;
    }

    .hq-nav.is-scrolled .hq-nav-wordmark {
        opacity: 1;
        visibility: visible;
    }
}

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

.hq-nav-links {
    margin: 0 auto 0 0;
    text-align: left;
}

.hq-nav-actions {
    margin-left: auto;
    flex-direction: row;
    align-items: center;
}

.hq-nav .nav-link {
    color: var(--hq-nav-text) !important;
    font-family: 'Nunito', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 13px;
    padding: 8px 12px !important;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    gap: 7px;
    /* A wrapped label would push the whole bar to two rows. */
    white-space: nowrap;
}

.hq-nav .nav-link:hover,
.hq-nav .nav-link:focus,
.hq-nav .show > .nav-link {
    color: var(--hq-nav-text-active) !important;
    background: rgba(255, 255, 255, 0.12);
}

.hq-nav-links .nav-item.is-current > .nav-link {
    color: var(--hq-nav-text-active) !important;
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 -2px 0 var(--hq-nav-accent);
}

.hq-nav .dropdown-toggle::after {
    margin-left: 2px;
    opacity: 0.6;
}

.hq-nav-icon .bi {
    font-size: 15px;
}

.hq-nav-cta {
    background: var(--hq-nav-accent);
    color: #10222c !important;
    font-weight: 700;
}

.hq-nav-cta:hover,
.hq-nav-cta:focus {
    background: #7fd4fa;
    color: #10222c !important;
}

/* Notification bell ------------------------------------------------------ */

.hq-nav-bell {
    position: relative;
}

.hq-nav-bell.has-unread .bi {
    color: #ffb4b7;
    animation: hq-bell-nudge 3s ease-in-out infinite;
}

@keyframes hq-bell-nudge {
    0%, 88%, 100% { transform: rotate(0deg); }
    91% { transform: rotate(12deg); }
    94% { transform: rotate(-10deg); }
    97% { transform: rotate(5deg); }
}

.hq-nav-bell-count {
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 999px;
    min-width: 17px;
    text-align: center;
}

@media (min-width: 992px) {
    .hq-nav-bell-count {
        position: absolute;
        top: 2px;
        right: 2px;
    }
}

/* User menu -------------------------------------------------------------- */

.hq-nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    object-fit: cover;
    object-position: center top;
    image-rendering: pixelated;
}

.hq-nav-avatar-fallback {
    font-size: 20px;
}

.hq-nav-username {
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Between lg and the widest desktops the six menus, the action icons and the
   username together outgrow the container, so the name gives way to the avatar. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .hq-nav-username {
        display: none;
    }
}

/* Dropdowns -------------------------------------------------------------- */

.hq-dropdown {
    border: 1px solid var(--hq-border);
    border-radius: 10px;
    box-shadow: var(--hq-shadow-lg);
    background: var(--hq-surface);
    padding: 6px;
    margin-top: 8px;
    min-width: 220px;
}

.hq-dropdown .dropdown-item {
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hq-text);
    display: flex;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
}

.hq-dropdown .dropdown-item .bi {
    width: 16px;
    text-align: center;
    opacity: 0.55;
    flex-shrink: 0;
}

.hq-dropdown .dropdown-item:hover,
.hq-dropdown .dropdown-item:focus {
    background: var(--hq-surface-alt);
    color: var(--hq-text);
}

.hq-dropdown .dropdown-item:hover .bi {
    opacity: 1;
}

.hq-dropdown .dropdown-divider {
    border-color: var(--hq-border);
    margin: 5px 2px;
}

.hq-dropdown-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--hq-text-muted);
    padding: 6px 10px 3px;
}

.hq-dropdown-button {
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

/* Mobile drawer ---------------------------------------------------------- */

.hq-nav-toggler {
    border: 0;
    padding: 6px 8px;
    margin-left: auto;
}

.hq-nav-toggler:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
}

@media (max-width: 991.98px) {
    .hq-nav-collapse {
        max-height: calc(100vh - var(--hq-nav-height));
        overflow-y: auto;
        padding: 8px 0 14px;
        margin-top: 6px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hq-nav-links,
    .hq-nav-actions {
        margin: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .hq-nav-actions {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .hq-nav .nav-link {
        padding: 10px 12px !important;
        font-size: 14px;
    }

    /* Bootstrap renders dropdowns inline inside the collapsed drawer. */
    .hq-dropdown {
        background: rgba(0, 0, 0, 0.18);
        border: 0;
        box-shadow: none;
        margin: 2px 0 6px 12px;
    }

    .hq-dropdown .dropdown-item,
    .hq-dropdown .dropdown-item:hover,
    .hq-dropdown .dropdown-item:focus {
        color: rgba(255, 255, 255, 0.85);
        background: none;
    }

    .hq-dropdown .dropdown-item:hover {
        color: #fff;
    }

    .hq-dropdown-label {
        color: rgba(255, 255, 255, 0.45);
    }

    .hq-dropdown .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.12);
    }

    .hq-nav-username {
        max-width: none;
    }
}

/* --------------------------------------------------------------------------
   Main content and notices
   -------------------------------------------------------------------------- */

.hq-main {
    min-height: 420px;
    padding-bottom: 32px;
}

.hq-notices {
    margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   Notifications modal
   -------------------------------------------------------------------------- */

.hq-notifications .modal-content {
    border: 0;
    border-radius: var(--hq-radius);
    background: var(--hq-surface);
    box-shadow: var(--hq-shadow-lg);
}

.hq-notifications .modal-header,
.hq-notifications .modal-footer {
    border-color: var(--hq-border);
}

.hq-notifications .modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hq-text);
    display: flex;
    align-items: center;
}

.hq-notification-pill {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 8px;
}

.hq-notification {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.hq-notification:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

.hq-notifications-empty {
    text-align: center;
    padding: 34px 10px;
    color: var(--hq-text-muted);
}

.hq-notifications-empty .bi {
    font-size: 26px;
    opacity: 0.4;
    display: block;
    margin-bottom: 10px;
}

.hq-notifications-empty p {
    margin: 0;
    font-size: 13px;
}

.hq-notifications-footer {
    padding: 12px 16px;
}

body.theme-dark .hq-notification {
    background-color: #2e333b !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--hq-text) !important;
}

body.theme-dark .hq-notification .title {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */

.hq-pagination .pagination {
    gap: 4px;
}

.hq-pagination .page-link {
    border: 1px solid var(--hq-border);
    border-radius: 8px;
    color: var(--hq-text);
    background: var(--hq-surface);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    min-width: 34px;
    text-align: center;
}

.hq-pagination .page-link:hover {
    background: var(--hq-surface-alt);
    color: var(--hq-text);
}

.hq-pagination .page-item.active .page-link {
    background: var(--hq-nav-accent);
    border-color: var(--hq-nav-accent);
    color: #10222c;
}

.hq-pagination .page-item.disabled .page-link {
    opacity: 0.45;
    background: var(--hq-surface);
    color: var(--hq-text-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.hq-footer-main {
    background: var(--hq-footer-bg);
    color: var(--hq-footer-text);
    padding: 38px 0 18px;
    box-shadow: none;
}

.hq-footer-heading {
    font-family: 'Nunito', "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 14px;
}

.hq-footer-links .list-group-item {
    background: none !important;
    border: 0 !important;
    padding: 4px 0 !important;
}

.hq-footer-links .list-group-item a {
    color: var(--hq-footer-text) !important;
    font-size: 13px;
    transition: color 0.15s ease, padding-left 0.15s ease;
    display: inline-block;
}

.hq-footer-links .list-group-item a:hover {
    color: #fff !important;
    padding-left: 4px;
    text-decoration: none;
}

.hq-spotlight {
    display: block;
    height: auto;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: background 0.15s ease, transform 0.15s ease;
}

.hq-spotlight:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-1px);
    text-decoration: none;
}

.hq-spotlight-info {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hq-spotlight-name {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hq-spotlight-role {
    color: rgba(255, 255, 255, 0.55);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.hq-footer-disclaimer {
    font-size: 11.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

.hq-footer-external {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
}

.hq-footer-external a {
    color: var(--hq-footer-text);
    font-size: 12px;
    font-weight: 600;
}

.hq-footer-external a:hover {
    color: #fff;
    text-decoration: none;
}

.hq-footer-bar {
    background: var(--hq-footer-bar);
    height: auto;
    line-height: 1.6;
    padding: 16px 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.hq-footer-bar a {
    color: #fff;
    font-weight: 600;
}

.hq-footer-credit .bi-heart-fill {
    color: #ef4444;
}

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

@media (max-width: 991.98px) {
    /* The banner artwork is desktop-sized; shrink the strip and let the radio
       player take the space on smaller screens. */
    .banner.hq-banner {
        height: auto;
        min-height: 0;
        padding-top: 16px;
    }

    .hq-banner-inner {
        padding-bottom: 14px;
    }

    #navigationBar {
        margin-bottom: 16px;
    }
}

@media (max-width: 575.98px) {
    .hq-radio {
        height: auto;
    }

    .hq-radio-body {
        margin-bottom: 10px;
    }

    .hq-footer-main {
        padding-top: 28px;
    }

    .hq-footer-bar {
        text-align: center;
    }

    .hq-footer-credit {
        text-align: center !important;
        margin-top: 6px;
    }
}

/* --------------------------------------------------------------------------
   Popup forms (hq-modal.js)
   -------------------------------------------------------------------------- */

.hq-modal .modal-content {
    border: 0;
    border-radius: var(--hq-radius);
    background: var(--hq-surface);
    box-shadow: var(--hq-shadow-lg);
}

.hq-modal .modal-header {
    border-color: var(--hq-border);
    padding: 14px 20px;
}

.hq-modal .modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--hq-text);
    display: flex;
    align-items: center;
}

.hq-modal .modal-title .bi {
    opacity: 0.45;
}

.hq-modal-body {
    padding: 20px;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
}

/* The fragment arrives wrapped in its page grid, which the dialog flattens. */
.hq-modal-body > .row {
    margin-left: 0;
    margin-right: 0;
}

.hq-modal-body > .row > [class^="col-"],
.hq-modal-body > .row > [class*=" col-"] {
    padding-left: 0;
    padding-right: 0;
    flex: 0 0 100%;
    max-width: 100%;
}

/* Cards inside a dialog already sit on a panel, so drop the extra chrome. */
.hq-modal-body .card {
    box-shadow: none;
    border: 1px solid var(--hq-border);
    margin-bottom: 14px;
}

.hq-modal-body .card:last-child {
    margin-bottom: 0;
}

.hq-modal-loading {
    text-align: center;
    padding: 46px 0;
}

.hq-modal-error {
    text-align: center;
    padding: 34px 16px;
    color: var(--hq-text-muted);
}

.hq-modal-error .bi {
    display: block;
    font-size: 26px;
    opacity: 0.4;
    margin-bottom: 10px;
}

.hq-modal-error p {
    margin: 0;
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   Public page hero (partials/pageHero.blade.php)

   Pages not yet moved onto the component still set their accent with an inline
   style, which older theme rules match with [style*="..."] selectors. These
   named accents replace that hook for migrated pages.
   -------------------------------------------------------------------------- */

.hq-hero-icon {
    background: linear-gradient(135deg, rgba(66, 165, 245, 0.2), rgba(66, 165, 245, 0.06));
    color: #42a5f5;
}

.hq-hero-blue    { background: linear-gradient(135deg, rgba(66, 165, 245, 0.2), rgba(66, 165, 245, 0.06)); color: #42a5f5; }
.hq-hero-sky     { background: linear-gradient(135deg, rgba(79, 195, 247, 0.2), rgba(79, 195, 247, 0.06)); color: #4fc3f7; }
.hq-hero-amber   { background: linear-gradient(135deg, rgba(255, 193, 7, 0.22), rgba(255, 193, 7, 0.08)); color: #ffc107; }
.hq-hero-orange  { background: linear-gradient(135deg, rgba(255, 183, 77, 0.22), rgba(255, 183, 77, 0.08)); color: #ffb74d; }
.hq-hero-purple  { background: linear-gradient(135deg, rgba(171, 71, 188, 0.2), rgba(171, 71, 188, 0.06)); color: #ab47bc; }
.hq-hero-lilac   { background: linear-gradient(135deg, rgba(206, 147, 216, 0.2), rgba(206, 147, 216, 0.06)); color: #ce93d8; }
.hq-hero-green   { background: linear-gradient(135deg, rgba(102, 187, 106, 0.2), rgba(102, 187, 106, 0.06)); color: #66bb6a; }
.hq-hero-discord { background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.06)); color: #5865f2; }

/* The light theme darkens each accent so it stays legible on a pale surface,
   matching what the older [style*="..."] rules do for unmigrated pages. */
body.theme-light .goodies-header .hq-hero-blue {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2), rgba(33, 150, 243, 0.08)) !important;
    color: #1976d2 !important;
}

body.theme-light .goodies-header .hq-hero-sky {
    background: linear-gradient(135deg, rgba(3, 169, 244, 0.2), rgba(3, 169, 244, 0.08)) !important;
    color: #0277bd !important;
}

body.theme-light .goodies-header .hq-hero-amber,
body.theme-light .goodies-header .hq-hero-orange {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25), rgba(255, 193, 7, 0.1)) !important;
    color: #f57f17 !important;
}

body.theme-light .goodies-header .hq-hero-purple,
body.theme-light .goodies-header .hq-hero-lilac {
    background: linear-gradient(135deg, rgba(171, 71, 188, 0.2), rgba(171, 71, 188, 0.08)) !important;
    color: #7b1fa2 !important;
}

body.theme-light .goodies-header .hq-hero-green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2), rgba(76, 175, 80, 0.08)) !important;
    color: #2e7d32 !important;
}

body.theme-light .goodies-header .hq-hero-discord {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(88, 101, 242, 0.08)) !important;
    color: #3b45c4 !important;
}

/* --------------------------------------------------------------------------
   Scrollable modal

   .modal-dialog-scrollable arrived in Bootstrap 4.3, but the compiled CSS
   bundle in app.css is 4.1.3, so the class has no styles of its own here.
   -------------------------------------------------------------------------- */

.modal-dialog-scrollable {
    display: flex;
    max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto;
}

@media (min-width: 576px) {
    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem);
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 3.5rem);
    }
}