/* ============================================================
   HAPPY RAN - MALL V2
   Reference-matched visual redesign.
   Loaded after classic-theme.css.

   IMPORTANT:
   Existing Mall forms, links, hover preview and purchase routes
   are untouched. This is visual structure only.
   ============================================================ */

body.classic-public-body:has(.mall-page) {
    background: #04090d !important;
}

body.classic-public-body:has(.mall-page)::before {
    opacity: .16 !important;
}


/* ============================================================
   HERO
   ============================================================ */

.mv2-hero {
    min-height: 290px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(54, 119, 178, .32);
    background:
        url('/images/mall-v2/mall-hero.jpg')
        center / cover no-repeat;
    box-shadow:
        inset 0 -55px 75px rgba(4, 9, 13, .62);
}

.mv2-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 95px;
    background:
        linear-gradient(
            180deg,
            transparent,
            #050a0f
        );
    pointer-events: none;
}

.mv2-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse at center,
            rgba(3, 8, 12, .02),
            rgba(3, 8, 12, .24) 72%
        );
}


/* ============================================================
   PAGE / CONTAINER
   ============================================================ */

.mall-page {
    min-height: 760px !important;
    padding: 0 20px 68px !important;
    position: relative !important;
    background:
        linear-gradient(
            180deg,
            #050a0f,
            #06111a 48%,
            #04090d
        ) !important;
}

.mall-page::before {
    display: none !important;
}

.mall-container {
    width: min(1320px, 100%) !important;
    max-width: 1320px !important;
    margin: 0 auto !important;
    position: relative;
    z-index: 4;
}


/* Existing text header is replaced by artwork hero. */
.mall-header {
    display: none !important;
}


/* ============================================================
   MALL SWITCHER
   ============================================================ */

.mall-switcher {
    margin-top: -20px !important;
    margin-bottom: 12px !important;
    position: relative;
    z-index: 8;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

.mall-switcher a {
    min-height: 54px !important;
    border: 1px solid #314657 !important;
    border-radius: 3px !important;
    background:
        linear-gradient(
            180deg,
            rgba(10, 21, 30, .98),
            rgba(6, 14, 21, .98)
        ) !important;
    color: #8295a6 !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, .20);
}

.mall-switcher a:hover {
    border-color: #784a2c !important;
    color: #fff !important;
}

.mall-switcher a.active {
    border-color: #e2323b !important;
    background:
        linear-gradient(
            180deg,
            #6c181e,
            #391014
        ) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.07),
        0 9px 24px rgba(126, 18, 26, .18) !important;
}


/* ============================================================
   BALANCE BAR
   ============================================================ */

.mall-balance {
    margin-bottom: 12px !important;
    overflow: hidden;
    border: 1px solid #775825 !important;
    border-radius: 5px !important;
    background:
        radial-gradient(
            circle at 20% 50%,
            rgba(154, 97, 20, .12),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #09151e,
            #061019
        ) !important;
    box-shadow:
        inset 0 0 28px rgba(205, 148, 34, .035);
}

.mall-balance > div {
    min-height: 64px !important;
    padding: 0 19px !important;
    position: relative;
}

.mall-balance > div::before {
    content: "EP";
    width: 38px;
    height: 38px;
    margin-right: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #a87929;
    border-radius: 50%;
    background: #2d210c;
    color: #ffc64e;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 900;
    box-shadow:
        0 0 16px rgba(213, 153, 40, .15);
}

.mall-balance span {
    color: #8398aa !important;
    font-size: 7px !important;
}

.mall-balance strong {
    color: #ffb72f !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px !important;
}


/* ============================================================
   SEARCH / SORT
   ============================================================ */

.mall-filter-panel {
    margin-bottom: 12px !important;
    padding: 13px !important;
    border: 1px solid #304555 !important;
    border-radius: 5px !important;
    background:
        linear-gradient(
            180deg,
            #08141d,
            #061019
        ) !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.012);
}

.mall-toolbar-form {
    grid-template-columns:
        minmax(0, 1fr)
        190px
        120px !important;
    gap: 9px !important;
}

.mall-input,
.mall-select {
    min-height: 46px !important;
    border: 1px solid #2d4355 !important;
    border-radius: 3px !important;
    background: #06111a !important;
    color: #e3eaf0 !important;
    font-size: 8px !important;
}

.mall-search-icon {
    color: #698298 !important;
}

.mall-search-button {
    min-height: 46px !important;
    border: 1px solid #d42d37 !important;
    border-radius: 3px !important;
    background:
        linear-gradient(
            180deg,
            #d52b36,
            #85151c
        ) !important;
    color: #fff !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 7px 16px rgba(142, 20, 29, .15);
}


/* ============================================================
   CATEGORIES
   ============================================================ */

.mall-categories {
    margin-bottom: 9px !important;
    padding: 0 !important;
    gap: 6px !important;
}

.mall-category {
    min-height: 36px !important;
    padding: 0 11px !important;
    border: 1px solid #2d414f !important;
    border-radius: 3px !important;
    background: #07111a !important;
    color: #8092a2 !important;
    font-size: 7px !important;
}

.mall-category:hover {
    border-color: #65402d !important;
    color: #fff !important;
}

.mall-category.active {
    border-color: #df3039 !important;
    background:
        linear-gradient(
            180deg,
            #5c161c,
            #2c0e12
        ) !important;
    color: #fff !important;
}


/* ============================================================
   RESULT BAR
   ============================================================ */

.mall-result-bar {
    margin-bottom: 14px !important;
    padding: 12px 2px !important;
    border-bottom: 1px solid #263c4c !important;
    color: #72889b !important;
    font-size: 8px !important;
}

.mall-result-bar strong {
    color: #f3f6f8 !important;
}

.mall-result-bar span:first-child strong {
    color: #e6b44d !important;
}


/* ============================================================
   ITEM GRID
   ============================================================ */

.mall-grid {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;
    gap: 13px !important;
    align-items: start;
}

.mall-card {
    position: relative !important;
    overflow: visible !important;
    border: 1px solid #2d4151 !important;
    border-radius: 6px !important;
    background:
        radial-gradient(
            circle at 50% 24%,
            rgba(38, 60, 75, .15),
            transparent 37%
        ),
        linear-gradient(
            180deg,
            #09151e,
            #061019
        ) !important;
    box-shadow:
        0 11px 29px rgba(0,0,0,.21),
        inset 0 1px rgba(255,255,255,.012) !important;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.mall-card:hover,
.mall-card:focus-within {
    transform: translateY(-3px);
    border-color: #76562a !important;
    box-shadow:
        0 15px 34px rgba(0,0,0,.30),
        0 0 0 1px rgba(198, 144, 42, .05) !important;
}

.mall-card:first-child {
    border-color: #a47527 !important;
    box-shadow:
        0 0 0 1px rgba(223, 162, 44, .08),
        0 0 28px rgba(187, 123, 27, .10) !important;
}

.mall-card-body {
    padding: 17px !important;
}

.mall-card-icon-row {
    min-height: 116px !important;
    margin: -2px 0 9px !important;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.mall-card-icon-row::before {
    content: "";
    width: 105px;
    height: 105px;
    position: absolute;
    border: 1px solid rgba(139, 98, 34, .45);
    background:
        radial-gradient(
            circle,
            rgba(82, 50, 20, .22),
            rgba(6, 13, 19, .04) 67%
        );
    transform: rotate(45deg);
    opacity: .44;
}

.mall-card-icon {
    width: 76px !important;
    height: 76px !important;
    position: relative;
    z-index: 2;
    object-fit: contain !important;
    border: 2px solid #7b6039;
    background: #1a1010;
    box-shadow:
        0 0 0 3px #09121a,
        0 0 0 4px #8b662d,
        0 10px 24px rgba(0,0,0,.36);
    image-rendering: auto;
}

.mall-card-icon-empty {
    width: 76px !important;
    height: 76px !important;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #354857;
    background: #09131b;
    color: #647789;
    font-size: 6px !important;
}

.mall-item-category {
    margin-bottom: 6px !important;
    color: #ff434c !important;
    font-size: 6px !important;
    letter-spacing: 1.3px !important;
}

.mall-card h3 {
    margin: 0 0 6px !important;
    color: #f1ede5 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

.mall-item-description {
    min-height: 36px !important;
    color: #778c9f !important;
    font-size: 8px !important;
    line-height: 1.6 !important;
}

.mall-meta {
    margin-top: 13px !important;
    gap: 7px !important;
}

.mall-meta > div {
    min-height: 55px !important;
    padding: 9px 10px !important;
    border: 1px solid #2c4050 !important;
    border-radius: 3px;
    background: #061018 !important;
}

.mall-meta span {
    color: #688197 !important;
    font-size: 6px !important;
}

.mall-meta strong {
    color: #edf2f6 !important;
    font-size: 9px !important;
}

.mall-meta > div:last-child strong {
    color: #ffc339 !important;
}


/* ============================================================
   QUICK PREVIEW
   ============================================================ */

.mall-preview-trigger {
    min-height: 36px !important;
    margin-top: 8px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #304858 !important;
    border-radius: 3px !important;
    background: #07131c !important;
    color: #66b8ff !important;
    font-size: 7px !important;
    font-weight: 900 !important;
    letter-spacing: .5px;
}

.mall-preview-trigger span {
    padding: 4px 7px !important;
    border: 1px solid #385064 !important;
    border-radius: 2px;
    color: #a8bac9 !important;
    font-size: 6px !important;
}


/* Preserve previous buy-click safety:
   preview must NEVER block action buttons. */
.mall-hover-preview {
    z-index: 80 !important;
    pointer-events: none !important;
    border: 1px solid #a17329 !important;
    border-radius: 5px !important;
    background:
        linear-gradient(
            180deg,
            rgba(7, 19, 28, .99),
            rgba(4, 11, 17, .995)
        ) !important;
    box-shadow:
        0 20px 55px rgba(0,0,0,.64),
        0 0 0 1px rgba(209, 151, 43, .08) !important;
}

.mall-preview-head {
    border-bottom-color: #304657 !important;
}

.mall-preview-head img {
    border-color: #73552d !important;
}

.mall-preview-head h4 {
    color: #f2eee7 !important;
    font-family: Georgia, serif !important;
}

.mall-preview-head span,
.mall-preview-section-title {
    color: #51adff !important;
}


/* ============================================================
   ACTION / BUY BUTTON
   Works with existing card footer classes.
   ============================================================ */

.mall-card-footer {
    padding: 0 17px 17px !important;
    border-top: 0 !important;
}

.mall-view-button {
    min-height: 46px !important;
    border: 1px solid #d72e38 !important;
    border-radius: 3px !important;
    background:
        linear-gradient(
            180deg,
            #d22833,
            #84151b
        ) !important;
    color: #fff !important;
    font-family: Georgia, serif;
    font-size: 11px !important;
    letter-spacing: .7px !important;
    box-shadow:
        inset 0 1px rgba(255,255,255,.09),
        0 8px 20px rgba(137, 19, 27, .16);
}

.mall-view-button:hover {
    color: #fff !important;
    transform: translateY(-1px);
}


/* Catch other existing buy / detail classes safely. */
.mall-card a[href*="/Mall/"],
.mall-card button[type="submit"] {
    position: relative;
    z-index: 4;
}


/* ============================================================
   EMPTY / PAGINATION
   ============================================================ */

.mall-empty {
    min-height: 190px !important;
    border: 1px dashed #3b5264 !important;
    border-radius: 5px;
    background: #07121a !important;
}

.mall-pagination {
    margin-top: 25px !important;
}

.mall-pagination a {
    min-height: 38px !important;
    border-color: #304656 !important;
    border-radius: 3px;
    background: #07131c !important;
}

.mall-pagination a:hover {
    border-color: #c52a34 !important;
    background: #491319 !important;
}


/* ============================================================
   GAME INFO CONTENT INSIDE PREVIEW
   ============================================================ */

.ran-item-info {
    border-color: #304756 !important;
    background:
        linear-gradient(
            180deg,
            #08141d,
            #050d14
        ) !important;
}

.ran-info-heading {
    color: #51adff !important;
}

.ran-info-name {
    color: #f0e8d3 !important;
    font-family: Georgia, serif;
}

.ran-info-gold {
    color: #ffc23d !important;
}

.ran-info-red {
    color: #ff4a54 !important;
}

.mall-mini-game-stats span {
    border-color: #2b4050 !important;
    background: #061019 !important;
}


/* ============================================================
   FOOTER MATCH
   ============================================================ */

body.classic-public-body:has(.mall-page) .classic-footer {
    border-top-color: rgba(132, 96, 36, .40) !important;
    background:
        linear-gradient(
            180deg,
            #061019,
            #03070b
        ) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .mall-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .mall-toolbar-form {
        grid-template-columns:
            minmax(0, 1fr)
            165px
            105px !important;
    }

}


@media (max-width: 760px) {

    .mv2-hero {
        min-height: 235px;
        background-position: center;
    }

    .mall-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .mall-switcher {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .mall-toolbar-form {
        grid-template-columns: 1fr !important;
    }

    .mall-grid {
        grid-template-columns: 1fr !important;
    }

    .mall-card-icon-row {
        min-height: 126px !important;
    }

    .mall-card-icon {
        width: 84px !important;
        height: 84px !important;
    }

}


@media (max-width: 500px) {

    .mv2-hero {
        min-height: 190px;
        background-size: auto 190px;
    }

    .mall-switcher {
        grid-template-columns: 1fr !important;
    }

    .mall-result-bar {
        flex-direction: column;
        gap: 5px;
    }

}