/* ==========================================================================
   custom.css
   Project-specific design polish additions on top of style.css.
   Per project rule: ALL new/changed CSS for this reskin goes in this file;
   style.css itself is not to be touched.
   ========================================================================== */

/* Footer (.t-footer) font change per request: Inter (Google Fonts).
   @import must stay at the very top of the file - CSS spec requires any
   @import to precede all other rules (besides @charset) or it is ignored.
   https://fonts.google.com/specimen/Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   Header wallet balance refresh icon (next to "$<balance>" in the top nav)
   This button has existing functionality (getMainWalletHeader()) that was
   kept from before the reskin, but it previously had no styling at all and
   rendered as a bare browser-default button next to the balance text.
   -------------------------------------------------------------------------- */
.hdr-amt .hdr-refresh-btn {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 4px;
    color: var(--text-color6);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: color .2s ease;
}

.hdr-amt .hdr-refresh-btn:hover,
.hdr-amt .hdr-refresh-btn:focus {
    color: var(--main-color);
    outline: none;
}

.hdr-amt .hdr-refresh-btn i {
    display: inline-block;
    transition: transform .4s ease;
}

.hdr-amt .hdr-refresh-btn:active i {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Pending page - "Cancel" button on a pending withdrawal request.
   This button/feature is not present in the reference design at all, so it
   never had a matching style. Styled here as a small outlined/ghost button
   so it doesn't look like an unstyled stray element inside the accordion
   header.
   -------------------------------------------------------------------------- */
.pending-content .accordion-header .btn-cancel {
    display: block;
    width: fit-content;
    margin: 0 15px 12px auto;
    background: transparent;
    border: 1px solid var(--border-color2);
    color: var(--text-color2);
    font-family: var(--font-family);
    font-size: 12px;
    letter-spacing: .5px;
    padding: 5px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.pending-content .accordion-header .btn-cancel:hover,
.pending-content .accordion-header .btn-cancel:focus {
    background: var(--border-color2);
    color: var(--text-color);
    outline: none;
}

/* --------------------------------------------------------------------------
   Broken image fixes (style.css references assets that don't exist under
   images/index/; the real files live under images/menu/, with an underscore
   not a hyphen). Overriding here instead of touching style.css.
   -------------------------------------------------------------------------- */
.menu-wrapper a {
    background: url("/web/images/menu/side_btn.webp") no-repeat center center/100% 100%;
}

.menu-wrapper a.active {
    background: url("/web/images/menu/side_btn-h.webp") no-repeat center center/100% 100%;
}

/* style.css's .games-title background (index/txt-base.webp) points at an
   asset that doesn't exist anywhere in the image folders. Replacing with a
   plain gradient in the site's own palette instead of a missing-image box. */
.games-title {
    background: linear-gradient(135deg, var(--main-color1), var(--main-color2));
    border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Banner prev/next arrow buttons (index.aspx .banner-arrow-prev/-next).
   style.css already gives these buttons a complete arrow graphic via
   background-image (btn_left.webp / btn_right.webp, swapped to the "-h"
   variant on hover) and tries to hide any inner icon with a
   ".banner-arrow-prev img, .banner-arrow-next img { display: none; }" rule.
   But the actual markup uses a FontAwesome <i> icon, not an <img>, so that
   rule never matches and the black angle-icon renders on top of the arrow
   graphic, making it look like two overlapping arrows. Hiding the icon here
   restores the single clean arrow button from the background image.
   -------------------------------------------------------------------------- */
.banner-arrow-prev i,
.banner-arrow-next i {
    display: none;
}

/* --------------------------------------------------------------------------
   Popup announcement modal close button (#popup_announcement_listing_index_modal)
   shows "××" instead of a single "×". style.css's ".announcementmodal .close::before"
   already draws an "×" via CSS content, but the button's actual markup also still
   has the old Bootstrap-4-style "<span aria-hidden="true">×</span>" text inside it,
   so both render side by side. Hiding the span leaves just the CSS-drawn "×".
   -------------------------------------------------------------------------- */
.announcementmodal .close span {
    display: none;
}

/* --------------------------------------------------------------------------
   About Us page title (.info-title). The reference design shows this in
   all caps ("ABOUT US"); the markup now pulls the text from Resources
   (title case, e.g. "About Us" / "关于我们") instead of a hardcoded caps
   string, so the caps styling is restored here instead of baking case into
   the translated resource values.
   -------------------------------------------------------------------------- */
.info-title {
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Account page "Transfer to Main Wallet" button (.acc-tf-btn, in
   _account_balance.ascx). style.css gives it the same bold gradient +
   white border as primary call-to-action buttons (deposit/submit), which
   makes it visually louder than the other secondary buttons sitting right
   next to it in the same card (.token-btn, .acc-pass-btn), both of which
   use a flat solid color with no border. Toning it down to match those
   neighbors so it no longer stands out from the rest of the balance card.
   -------------------------------------------------------------------------- */
.acc-tf-btn {
    background: var(--btn-color2);
    border: none;
}

/* --------------------------------------------------------------------------
   Account page balance refresh icon (.acc-bln-amt button, in
   _account_balance.ascx). The markup has no class on this <button> at all,
   so it never matched any style and rendered as a bare browser-default
   white button next to the "$<balance>" text — the same refresh icon that
   is already styled for the header (.hdr-amt .hdr-refresh-btn above) is
   left unstyled here. Applying the same transparent/theme-matching
   treatment, sized up slightly to sit next to the larger 28px balance text.
   -------------------------------------------------------------------------- */
.acc-bln-amt button {
    background: transparent;
    border: none;
    padding: 0;
    margin-left: 6px;
    color: var(--text-color6);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: color .2s ease;
}

.acc-bln-amt button:hover,
.acc-bln-amt button:focus {
    color: var(--main-color);
    outline: none;
}

.acc-bln-amt button i {
    display: inline-block;
    transition: transform .4s ease;
}

.acc-bln-amt button:active i {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Inbox reply box (.chatBox, inside the inbox-detail.aspx reply modal, and
   also used by inbox.aspx). style.css uses the wrong CSS variables here:
   the textarea's background is set to var(--text-color), which is #fff
   (that variable is meant for TEXT color, not a background), so the input
   renders as a plain white bar instead of a themed dark field. The send
   button's background is var(--main-color) = #ffef28 (bright yellow),
   which doesn't match the site's red/dark theme at all. The message bubble
   (.msg-content) is also a hardcoded light grey (#cbcbcb) with no variable.
   Restyling all three to match the same dark input treatment already used
   by the login modal (.modal-login .input-group .form-control, which uses
   var(--bg-color1) / var(--text-color)) so the reply box matches the rest
   of the dark red theme instead of standing out as a bright white/yellow
   block.
   -------------------------------------------------------------------------- */
.chatBox textarea {
    background: var(--bg-color1);
    color: var(--text-color);
}

.chatBox textarea::placeholder {
    color: var(--text-color6);
}

.chatBox .mdi-send {
    background: var(--main-color1);
    color: var(--text-color);
}

.chatBox .mdi-attachment {
    color: var(--main-color1);
}

.msg-content {
    background: var(--bg-color1);
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Inbox reply thread bubbles (.userMessage / .adminMessage / .date-msg /
   .sent-by, built by returnReplyHTML() in inbox-detail.aspx and inbox.aspx).
   These classes had NO styling anywhere in style.css at all - on this
   page's dark background they rendered as unstyled, unreadable black-on-dark
   text with no spacing. Styling them as chat bubbles: member's own replies
   (.userMessage) in the same red used for the send button, admin replies
   (.adminMessage) in the same dark grey as the original message bubble, so
   the whole thread reads as one consistent conversation instead of plain
   unstyled text.
   -------------------------------------------------------------------------- */
.userMessage,
.adminMessage {
    max-width: 85%;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-color);
}

.userMessage {
    margin-left: auto;
    background: var(--main-color1);
}

.adminMessage {
    margin-right: auto;
    background: var(--bg-color1);
}

.userMessage .date-msg,
.adminMessage .date-msg,
.userMessage .sent-by,
.adminMessage .sent-by {
    font-size: 11px;
    color: var(--text-color6);
}

.userMessage p,
.adminMessage p {
    margin: 4px 0 0;
    color: var(--text-color);
}

/* --------------------------------------------------------------------------
   Inbox detail page reply box (.inbox-reply-box, inbox-detail.aspx).
   Replaces the old modal-based reply flow: now it's a plain textbox + send
   button sitting directly in the page's normal flow, right under the
   message thread (not inside a modal), so it needs its own layout rather
   than reusing .chatBox (which is positioned for the old modal and uses
   position: absolute - that would break here). Laid out as a simple flex
   row, themed the same dark/red palette as the chat bubbles above.
   -------------------------------------------------------------------------- */
.inbox-reply-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px;
    background: var(--bg-color1);
    border-radius: 8px;
}

.inbox-reply-box textarea {
    flex: 1;
    resize: none;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 13px;
    line-height: 1.4;
    max-height: 80px;
    padding: 6px 8px;
}

.inbox-reply-box textarea:focus {
    outline: none;
}

.inbox-reply-box textarea::placeholder {
    color: var(--text-color6);
}

.inbox-reply-box .mdi-send {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--main-color1);
    color: var(--text-color);
    cursor: pointer;
    transition: opacity .2s ease;
}

.inbox-reply-box .mdi-send:hover {
    opacity: .85;
}

/* style.css draws the send icon glyph via ".mdi-send:before" with
   position: absolute; right: 10px (no top) - it relies on ".chatBox
   .mdi-send" also being position: absolute to contain/center it. This
   button now lives in a flex layout instead (not position: absolute), so
   that absolutely-positioned pseudo-element was escaping to the nearest
   positioned ancestor instead of the button itself, landing off-screen -
   which is why the icon wasn't visible. Resetting it to static makes it a
   normal flex item again, so the parent's align-items/justify-content
   center it inside the circle like intended. */
.inbox-reply-box .mdi-send:before {
    position: static;
    right: auto;
}

/* --------------------------------------------------------------------------
   Inbox list unread indicator (.inbox-row.unread, inbox.aspx). The list
   already carries each message's read/unread status (msg_status, 0 =
   unread) in a hidden input, but it was never shown visually - every row
   looked the same whether read or not. Marking unread rows with the
   "unread" class in JS and showing a small red dot in front of the title
   here, in the site's existing red accent color, so unread messages stand
   out at a glance.
   -------------------------------------------------------------------------- */
.inbox-row.unread .inbox-detail h5 {
    position: relative;
    padding-left: 14px;
}

.inbox-row.unread .inbox-detail h5::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--main-color1);
}

/* --------------------------------------------------------------------------
   Inbox detail message thread (.inbox-content / #read_content,
   inbox-detail.aspx). This fills up with the original message plus every
   reply with no limit, so a long conversation just keeps pushing the
   whole page (and the reply box below it) further and further down,
   forcing endless scrolling just to see the latest message or reach the
   reply box. Capping its height and scrolling inside it instead, so the
   reply box always stays right below it, reachable without scrolling the
   whole page.
   -------------------------------------------------------------------------- */
.inbox-content {
    max-height: 50vh;
    overflow-y: auto;
    padding-right: 6px;
}

.inbox-content::-webkit-scrollbar {
    width: 6px;
}

.inbox-content::-webkit-scrollbar-thumb {
    background: var(--main-color1);
    border-radius: 3px;
}

.inbox-content::-webkit-scrollbar-track {
    background: transparent;
}

/* --------------------------------------------------------------------------
   Login / Register modal input text (.modal-login input - covers both
   #login-modal and #reg-modal, e.g. username, password, verification
   code). The site's base font (--font-family, set on <body> and inherited
   by Bootstrap's .form-control) is "Bebas Neue", a display font with no
   real lowercase letterforms - typed text in these fields visually renders
   as if everything were capitalized, even though the actual value typed
   keeps its real case. This is harmless for most of the site (it's the
   intended branded look for headings/buttons), but inside input fields -
   especially the password field, where someone may need to visually check
   on "show password" exactly what they typed, case included - it reads as
   a bug: it looks like only capital letters can be entered. Overriding the
   font just for inputs inside these two modals so typed text displays with
   its real casing.
   -------------------------------------------------------------------------- */
.modal-login input {
    font-family: Arial, Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------
   Footer (.t-footer) font: switch from the site's base font (--font-family,
   "Bebas Neue") to Inter per request. Inter is imported at the top of this
   file via @import.
   -------------------------------------------------------------------------- */
.t-footer {
    font-family: 'Inter', sans-serif;
}