/* PakRummy premium frontend theme. Backend and application logic remain unchanged. */
:root {
    --premium-bg: #070b0a;
    --premium-surface: #0e1512;
    --premium-surface-2: #131d18;
    --premium-line: rgba(220, 183, 74, 0.18);
    --premium-green: #22c55e;
    --premium-green-dark: #12863d;
    --premium-gold: #dcb74a;
    --premium-text: #f4f7f5;
    --premium-muted: #91a098;
    --premium-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

html,
body {
    background:
        radial-gradient(circle at 50% -10%, rgba(34, 197, 94, 0.13), transparent 34rem),
        var(--premium-bg) !important;
    color: var(--premium-text);
    font-family: "Inter", "Roboto", sans-serif !important;
}

body > div,
#infinitysoft {
    scrollbar-color: rgba(220, 183, 74, 0.4) transparent;
}

/* Header */
.navbar.navtop-color {
    min-height: 62px;
    background-color: rgba(8, 14, 11, 0.96) !important;
    background-blend-mode: soft-light;
    border-bottom: 1px solid var(--premium-line);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.navbar .nav-menu {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.navbar .responsive-image {
    max-height: 38px;
    max-width: 128px;
    object-fit: contain;
}

.navbar button:not(.btn-login):not(.btn-register):not(.btn-deposit) {
    transition: transform .2s ease, opacity .2s ease;
}

.navbar button:not(.btn-login):not(.btn-register):not(.btn-deposit):active {
    transform: scale(.94);
}

/* Main action buttons */
.btn-login,
.btn-register,
.btn-deposit,
button[type="submit"] {
    min-height: 36px;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease !important;
}

.btn-login {
    color: var(--premium-text) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

.btn-register,
.btn-deposit,
button[type="submit"] {
    color: #061109 !important;
    background: linear-gradient(135deg, #36dd72, #16a34a) !important;
    border: 1px solid rgba(118, 255, 167, 0.34) !important;
    box-shadow: 0 7px 18px rgba(22, 163, 74, 0.24) !important;
}

.btn-login:hover,
.btn-register:hover,
.btn-deposit:hover,
button[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Horizontal casino categories */
.bgcategoria {
    padding: 8px 8px 6px;
    background: linear-gradient(180deg, rgba(14, 21, 18, .98), rgba(9, 14, 12, .96)) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.category-list.bordinha {
    gap: 6px;
    border: 0 !important;
}

.category-list .flex.overflow-x-auto {
    gap: 7px;
    scrollbar-width: none;
}

.category-list .flex.overflow-x-auto::-webkit-scrollbar {
    display: none;
}

.category-list a,
.category-list button:not(.btn-navigation) {
    border-radius: 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: linear-gradient(180deg, rgba(23, 34, 29, .95), rgba(13, 21, 17, .95)) !important;
    color: var(--premium-muted) !important;
    transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.category-list a:hover,
.category-list a.router-link-active,
.category-list a.category-active {
    color: var(--premium-text) !important;
    border-color: rgba(220, 183, 74, 0.5) !important;
    background: linear-gradient(180deg, rgba(34, 72, 48, .9), rgba(16, 43, 28, .96)) !important;
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .12), 0 5px 15px rgba(0, 0, 0, .2);
}

.category-list a:active {
    transform: scale(.97);
}

.btn-navigation {
    width: 30px;
    min-width: 30px;
    border: 0 !important;
    color: var(--premium-gold) !important;
    background: transparent !important;
}

/* Content and game sections */
.game-list {
    margin: 9px 7px 0 !important;
    padding: 10px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(18, 27, 23, .78), rgba(9, 15, 12, .6));
    box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
}

.game-list h2,
.header-title h1 {
    color: var(--premium-text) !important;
    font-weight: 750 !important;
    letter-spacing: -.015em;
}

.game-list h2::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 14px;
    margin-right: 7px;
    border-radius: 4px;
    vertical-align: -2px;
    background: linear-gradient(180deg, var(--premium-gold), var(--premium-green));
}

.game-list > div:first-child a.item-game {
    border: 1px solid rgba(220, 183, 74, .24);
    border-radius: 7px !important;
    background: rgba(220, 183, 74, .06);
    color: var(--premium-gold) !important;
}

/* Provider footer: compact count and premium VIP-style Show More button. */
.game-list > .text-center.mb-1.text-color {
    width: max-content;
    max-width: 100%;
    margin: 8px auto 5px !important;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: var(--premium-muted) !important;
    font-size: 10px !important;
    line-height: 1.25;
}

.game-list > .flex.justify-center.items-center.w-full {
    position: relative;
    padding: 5px 0 4px;
}

.game-list > .flex.justify-center.items-center.w-full::before,
.game-list > .flex.justify-center.items-center.w-full::after {
    content: "";
    flex: 1;
    height: 1px;
    max-width: 62px;
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, .38));
}

.game-list > .flex.justify-center.items-center.w-full::after {
    background: linear-gradient(90deg, rgba(34, 197, 94, .38), transparent);
}

.game-list > .flex.justify-center.items-center.w-full > button,
.game-list button.text-color.px-4.rounded {
    position: relative;
    min-width: 132px;
    min-height: 36px;
    margin: 0 11px;
    padding: 8px 20px !important;
    overflow: hidden;
    border: 1px solid rgba(255, 224, 128, .68) !important;
    border-radius: 999px !important;
    color: #fff9df !important;
    background-color: #a97b17 !important;
    background-image: linear-gradient(135deg, #6f4e0b 0%, #d5aa38 48%, #76530d 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 7px 18px rgba(174, 126, 20, .36) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease !important;
}

.game-list > .flex.justify-center.items-center.w-full > button::before,
.game-list button.text-color.px-4.rounded::before {
    content: "VIP";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    margin-right: 8px;
    padding: 0 6px;
    border-radius: 999px;
    color: #513b08;
    background: #fff0a8;
    font-size: 8px;
    font-weight: 900;
    vertical-align: 1px;
}

.game-list > .flex.justify-center.items-center.w-full > button:hover,
.game-list button.text-color.px-4.rounded:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px rgba(174, 126, 20, .46) !important;
}

.game-list > .flex.justify-center.items-center.w-full > button:active,
.game-list button.text-color.px-4.rounded:active {
    transform: scale(.97);
}

.game-list + .game-list {
    margin-top: 13px !important;
}

.item-game[data-v-70f78878] {
    border: 1px solid rgba(255, 255, 255, .075);
    background: var(--premium-surface-2);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .28);
    transform: translateZ(0);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

.item-game[data-v-70f78878]:hover {
    transform: translateY(-2px);
    border-color: rgba(220, 183, 74, .42);
    box-shadow: 0 11px 24px rgba(0, 0, 0, .38);
}

.item-game[data-v-70f78878] img {
    display: block;
    object-fit: cover;
}

.favorite-button[data-v-70f78878] {
    top: 5px !important;
    right: 5px !important;
    width: 25px !important;
    height: 25px !important;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(5, 10, 8, .72) !important;
    backdrop-filter: blur(5px);
}

/* Sidebar */
.sidebar-color {
    background: linear-gradient(180deg, #101914, #090e0c) !important;
}

.custom-side-shadow {
    border-right: 1px solid var(--premium-line);
    box-shadow: 15px 0 35px rgba(0, 0, 0, .42) !important;
}

.site-menu-item {
    border: 1px solid rgba(255, 255, 255, .065) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .025) !important;
    transition: background .2s ease, border-color .2s ease !important;
}

.site-menu-item:hover,
.site-menu-item.category-active,
.site-menu-item.router-link-active {
    border-color: rgba(220, 183, 74, .35) !important;
    background: rgba(34, 197, 94, .09) !important;
}

/* Bottom mobile navigation */
.background-bottom-navigation.custom-border-top {
    height: 66px !important;
    background-color: rgba(8, 14, 11, .97) !important;
    background-blend-mode: soft-light;
    border-top: 1px solid var(--premium-line) !important;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .38);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.background-bottom-navigation.custom-border-top button {
    position: relative;
    transition: transform .2s ease, filter .2s ease;
}

.background-bottom-navigation.custom-border-top button:hover,
.background-bottom-navigation.custom-border-top button:active {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.background-bottom-navigation.custom-border-top .icon {
    width: 23px !important;
    height: 23px !important;
    object-fit: contain;
}

.background-bottom-navigation.custom-border-top .text {
    margin-top: 4px;
    font-size: 10px !important;
    font-weight: 600;
}

/* Footer */
.footer-color {
    margin-top: 14px;
    padding: 22px 16px 76px !important;
    background:
        linear-gradient(180deg, rgba(13, 21, 17, .98), rgba(6, 10, 8, 1)) !important;
    border-top: 1px solid var(--premium-line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .18);
}

.footer-color .footer-list {
    padding: 10px 8px;
}

.footer-color .title-color {
    color: var(--premium-gold) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.footer-color .text-color {
    color: var(--premium-muted) !important;
    font-size: 11px;
    line-height: 1.7;
}

.footer-color a:hover {
    color: var(--premium-text) !important;
}

/* Forms and modal surfaces */
.modal-content,
.background-bottom-navigation.bunese,
.background-bottom-navigation.rounded-lg,
.nodes {
    border: 1px solid var(--premium-line) !important;
    border-radius: 13px !important;
    background-color: var(--premium-surface) !important;
    box-shadow: var(--premium-shadow) !important;
}

input,
select,
textarea {
    border-radius: 8px !important;
}

/* All-games search field */
#search.border-search {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 43px !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 11px !important;
    outline: none !important;
    color: var(--premium-text) !important;
    caret-color: var(--premium-green);
    background: linear-gradient(180deg, #131d18, #0e1612) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 6px 16px rgba(0,0,0,.22) !important;
    font-size: 14px !important;
    font-weight: 500;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
    -webkit-appearance: none;
    appearance: none;
}

#search.border-search::placeholder {
    color: #78867e !important;
    opacity: 1 !important;
    font-weight: 450;
}

#search.border-search:hover {
    border-color: rgba(220, 183, 74, .28) !important;
}

#search.border-search:focus {
    border-color: rgba(34, 197, 94, .72) !important;
    background: #111b16 !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .11), 0 8px 20px rgba(0,0,0,.28) !important;
}

#search.border-search::-webkit-search-cancel-button {
    width: 16px;
    height: 16px;
    cursor: pointer;
    filter: invert(1) opacity(.62);
}

form .relative > .absolute.inset-y-0.left-0 {
    z-index: 2;
    padding-left: 15px !important;
    color: var(--premium-gold) !important;
}

form .relative > .absolute.inset-y-0.left-0 svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--premium-gold) !important;
}

.mobile-content > div > .px-2.py-3 > form.mb-4 {
    margin: 0 4px 17px !important;
}

@media (min-width: 451px) {
    .navbar.navtop-color,
    .bgcategoria,
    .footer-color,
    .background-bottom-navigation.custom-border-top {
        border-left: 1px solid rgba(255,255,255,.055);
        border-right: 1px solid rgba(255,255,255,.055);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* V2: consistent premium mobile page rhythm */
#infinitysoft {
    width: 100%;
    max-width: 450px;
    min-height: 100dvh;
    margin: 0 auto;
    overflow-x: hidden;
    background: #090e0c;
}

#infinitysoft main,
#infinitysoft .page-content,
#infinitysoft .content-container {
    box-sizing: border-box;
    width: 100%;
}

#infinitysoft .game-list:empty,
#infinitysoft .provider-list:empty,
#infinitysoft .banner-container:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Wallet pages top navigation */
nav[data-v-30a70005] {
    height: 58px !important;
    padding: 7px 9px !important;
    background: rgba(8, 21, 15, .98) !important;
    border-bottom: 1px solid rgba(220, 183, 74, .22) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}

nav[data-v-30a70005] > .container {
    height: 44px !important;
    align-items: center;
}

nav[data-v-30a70005] .overflow-x-auto {
    gap: 5px;
    padding: 2px 4px 4px;
    scrollbar-width: none;
}

nav[data-v-30a70005] .overflow-x-auto::-webkit-scrollbar {
    display: none;
}

.btn-nav[data-v-30a70005] {
    flex: 0 0 auto;
    min-height: 34px;
    margin: 0 !important;
    padding: 7px 12px !important;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 999px;
    color: var(--premium-muted) !important;
    background: rgba(255,255,255,.025);
    font-size: 12px;
    font-weight: 650;
}

.btn-nav.active[data-v-30a70005] {
    color: #f6fff8 !important;
    border-color: rgba(34,197,94,.5);
    background: linear-gradient(135deg, #116633, #18984a);
    box-shadow: 0 5px 14px rgba(21,145,69,.22);
}

.btn-nav[data-v-30a70005]::after {
    display: none !important;
}

/* Transaction history: remove forced full-screen empty area */
.items-container[data-v-74512525],
.items-container[data-v-09f81a57] {
    min-height: calc(100dvh - 58px);
    margin: 58px 0 0 !important;
    padding: 10px 10px 90px !important;
    background: linear-gradient(180deg, #0b120e, #080c0a) !important;
}

.scroll-container[data-v-74512525],
.scroll-container[data-v-09f81a57] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 0 0;
    overflow: visible !important;
}

.scroll-container[data-v-74512525] > .grid,
.scroll-container[data-v-09f81a57] > .grid {
    max-height: none !important;
    gap: 10px !important;
}

.bordas[data-v-74512525],
.bordas[data-v-09f81a57] {
    gap: 7px;
    margin: 0 0 9px !important;
    padding: 7px !important;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 12px;
    background: rgba(255,255,255,.025) !important;
    scrollbar-width: none;
}

.bordas[data-v-74512525]::-webkit-scrollbar,
.bordas[data-v-09f81a57]::-webkit-scrollbar {
    display: none;
}

.items-container .btn-2 {
    flex: 0 0 auto;
    min-height: 34px;
    margin: 0 !important;
    padding: 6px 14px !important;
    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 999px !important;
    color: var(--premium-muted) !important;
    background: #101914 !important;
    font-size: 12px;
}

.items-container .btn-2.actives {
    color: #fff7d7 !important;
    border-color: rgba(220,183,74,.5) !important;
    background: linear-gradient(135deg, #5f430b, #a47718) !important;
}

.bordass[data-v-74512525],
.bordass[data-v-09f81a57] {
    margin: 0 !important;
    padding: 13px !important;
    border: 1px solid rgba(220,183,74,.16) !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #121c17, #0c120f) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.24);
}

.bordass[data-v-74512525] img,
.bordass[data-v-09f81a57] img {
    width: 36px !important;
    height: 36px !important;
    padding: 3px;
    border-radius: 9px;
    object-fit: contain;
    background: rgba(255,255,255,.96);
}

.bordass[data-v-74512525] .uppercase,
.bordass[data-v-09f81a57] .uppercase {
    color: #f5f8f6 !important;
    font-size: 13px !important;
    letter-spacing: .025em;
}

.bordass[data-v-74512525] p,
.bordass[data-v-09f81a57] p {
    overflow-wrap: anywhere;
}

.bordass[data-v-74512525] > div > p:last-child,
.bordass[data-v-09f81a57] > div > p:last-child {
    color: #f5d978 !important;
    font-size: 14px !important;
}

.bordass[data-v-74512525] span[class*="bg-green"],
.bordass[data-v-09f81a57] span[class*="bg-green"] {
    border: 1px solid rgba(64,255,126,.3);
    border-radius: 999px !important;
    color: #b8ffd0 !important;
    background: rgba(26,151,69,.22) !important;
}

/* General mobile sections: remove edge collisions */
@media (max-width: 450px) {
    #infinitysoft .px-2,
    #infinitysoft .p-2 {
        box-sizing: border-box;
    }

    #infinitysoft .header-title {
        padding-left: 12px;
        padding-right: 12px;
    }

    #infinitysoft .modal-content,
    #infinitysoft .bordas-modal {
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .footer-color {
        padding-left: 13px !important;
        padding-right: 13px !important;
    }
}