/* ==========================================================================
   BlackBet Custom Styling: Cart Buttons & Minimized Sidebar
   Exact match to media_1791193504806.png and media_1791193546038.png
   ========================================================================== */

/* 1. Global Font Faces with absolute paths */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/fonts/@fortawesome/fa-solid-900.woff2") format("woff2"),
       url("/fonts/@fortawesome/fa-solid-900.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/@fortawesome/fa-regular-400.woff2") format("woff2"),
       url("/fonts/@fortawesome/fa-regular-400.ttf") format("truetype");
}

@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/@fortawesome/fa-brands-400.woff2") format("woff2"),
       url("/fonts/@fortawesome/fa-brands-400.ttf") format("truetype");
}

@font-face {
  font-family: "keenicons-outline";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url("/fonts/keenicons/keenicons-outline.woff") format("woff"),
       url("/fonts/keenicons/keenicons-outline.ttf") format("truetype");
}

@font-face {
  font-family: "keenicons-solid";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url("/fonts/keenicons/keenicons-solid.woff") format("woff"),
       url("/fonts/keenicons/keenicons-solid.ttf") format("truetype");
}

@font-face {
  font-family: "keenicons-duotone";
  font-style: normal;
  font-weight: normal;
  font-display: block;
  src: url("/fonts/keenicons/keenicons-duotone.woff") format("woff"),
       url("/fonts/keenicons/keenicons-duotone.ttf") format("truetype");
}

/* ==========================================================================
   2. Cart Button Styling (Compact & neatly sized)
   ========================================================================== */

button.PlvjQLbE:not(.d-none),
.PlvjQLbE:not(.d-none) {
    background-color: #eceff5 !important;
    border: 1px solid #d5dbe5 !important;
    border-radius: 6px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    outline: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

button.PlvjQLbE:hover,
.PlvjQLbE:hover {
    background-color: #e2e6f0 !important;
    border-color: #c4ccdc !important;
}

button.PlvjQLbE:active,
.PlvjQLbE:active {
    transform: scale(0.96) !important;
}

button.PlvjQLbE i,
button.PlvjQLbE i.fas,
button.PlvjQLbE i.fa-cart-plus,
.PlvjQLbE i,
button[onclick*="CartAction"] i.fa-cart-plus {
    color: #5c687e !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.PlvjQLbE.d-none,
button.PlvjQLbE.d-none {
    display: none !important;
}

/* Trash / in-cart remove button */
button.rpXIRX:not(.d-none),
.rpXIRX:not(.d-none) {
    background-color: #50cd89 !important;
    border: 1px solid #47be7d !important;
    border-radius: 6px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

button.rpXIRX i,
.rpXIRX i {
    color: #ffffff !important;
    font-size: 13px !important;
}

.rpXIRX.d-none,
button.rpXIRX.d-none {
    display: none !important;
}

button.rpXIRX i,
.rpXIRX i {
    color: #ffffff !important;
    font-size: 15px !important;
}

/* Dashed row divider matching screenshot 1 */
.table tbody tr,
table.table tbody tr,
.table > tbody > tr > td,
table > tbody > tr > td {
    border-bottom: 1px dashed #d5dbe5 !important;
}

/* ==========================================================================
   3. Minimized Left Sidebar (Exact match to media_1791193546038.png)
   ========================================================================== */

/* Active item rounded pill highlight */
#kt_app_sidebar .menu-link.active,
#kt_app_sidebar .menu-item .menu-link.active {
    background-color: #f6f7f9 !important;
    border-radius: 10px !important;
}

/* Hover effect */
#kt_app_sidebar .menu-link:hover,
#kt_app_sidebar .menu-item .menu-link:hover {
    background-color: #f6f7f9 !important;
    border-radius: 10px !important;
}

/* Amber/Gold color for all sidebar category icons (#edbb0e) */
#kt_app_sidebar .menu-icon i,
#kt_app_sidebar .menu-icon i.fas,
#kt_app_sidebar .menu-icon i.far,
#kt_app_sidebar .menu-icon i.fab,
#kt_app_sidebar .menu-icon i.fa-solid,
#kt_app_sidebar .menu-icon i.fa-regular,
#kt_app_sidebar .menu-icon i.ki-outline,
#kt_app_sidebar .menu-icon i.ki-duotone,
#kt_app_sidebar .menu-icon i.ki-solid,
#kt_app_sidebar .menu-link i {
    color: #edbb0e !important;
    font-size: 1.45rem !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* Separator styling matching media_1791193546038.png */
#kt_app_sidebar .app-sidebar-separator,
#kt_app_sidebar .separator {
    border-bottom: 1px solid #dbdfe9 !important;
    width: 36px !important;
    margin: 14px auto !important;
    opacity: 1 !important;
    display: block !important;
}

/* Top hamburger toggle icon */
.bb-sidebar-toggle-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 14px;
    padding-bottom: 12px;
}

.bb-sidebar-toggle-btn {
    width: 44px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
    transition: background 0.15s ease;
}

.bb-sidebar-toggle-btn:hover {
    background-color: #f6f7f9;
}

/* Custom SVGs for Home, Support, Wishes, Rules */
.bb-home-icon path {
    stroke: #edbb0e !important;
}

.bb-support-icon path {
    stroke: #edbb0e !important;
}
.bb-support-icon text {
    fill: #edbb0e !important;
}

.bb-wishes-icon rect,
.bb-wishes-icon path {
    stroke: #edbb0e !important;
}

.bb-rules-icon rect,
.bb-rules-icon path {
    stroke: #edbb0e !important;
}

/* ==========================================================================
   4. Natural Table Layout & Responsive Display
   Preserves exact first-page appearance before and during scrolling down
   ========================================================================== */

/* Prevent document-level horizontal blowout while keeping tables neatly contained in cards */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

#kt_app_main,
.app-wrapper,
#kt_app_content_container {
    max-width: 100% !important;
}

/* Responsive table container inside card */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch !important;
}

/* ==========================================================================
   4. Table Alignment & Styling (Exact match to Screenshot 1)
   Applies across /shop and ALL other pages
   ========================================================================== */

/* Gold dashed border under table header matching Screenshot 1 */
.table thead tr.border-gold,
.table thead tr {
    border-bottom: 2px dashed rgba(245, 158, 11, 0.85) !important;
    background-color: #ffffff !important;
}

.table thead th,
table.table thead th {
    background-color: #ffffff !important;
    border-bottom: 2px dashed rgba(245, 158, 11, 0.85) !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

/* Subtle dashed border between body rows */
.table.table-row-dashed tbody tr,
.table tbody tr {
    border-bottom: 1px dashed rgba(226, 232, 240, 0.85) !important;
    transition: background-color 0.15s ease !important;
}

.table tbody tr:hover {
    background-color: #fafbfc !important;
}

/* Table cell styling */
.table td, 
.table tbody td {
    padding: 9px 6px !important;
    font-size: 13px !important;
    color: #334155 !important;
    vertical-align: middle !important;
    border-bottom: 1px dashed rgba(226, 232, 240, 0.85) !important;
}

/* Hide empty phantom columns */
.table thead th:empty,
.table tbody td[data-title=""]:empty {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Column specific widths & alignment */
.table th[data-title="Shop"],
.table td[data-title="Shop"] {
    white-space: nowrap !important;
    font-weight: 500 !important;
    color: #1e293b !important;
}

.table th.SJNrJFmGeAthEpHx_Balance,
.table td[data-title="Balance"],
.table th.SJNrJFmGeAthEpHx_Points,
.table td[data-title="Points"] {
    max-width: 65px !important;
    text-align: center !important;
}

.table th.SJNrJFmGeAthEpHx_Account_type,
.table td[data-title="Type"] {
    max-width: 55px !important;
    text-align: center !important;
}

.table th[data-title="Country"],
.table td[data-title="Country"] {
    font-weight: 600 !important;
    color: #1e293b !important;
}

.table th.SJNrJFmGeAthEpHx_Zip,
.table td[data-title="Zip"],
.table th.SJNrJFmGeAthEpHx_Credit_card,
.table td[data-title="СС"],
.table th.SJNrJFmGeAthEpHx_Bank_accounts,
.table td[data-title="Bank"],
.table th.SJNrJFmGeAthEpHx_Additional_Information,
.table td[data-title="Info"] {
    max-width: 50px !important;
    text-align: center !important;
}

.table th.SJNrJFmGeAthEpHx_Last_order,
.table td[data-title="Last_order"],
.table td[data-title="Last  order"],
.table td[data-title="Last order"] {
    min-width: 80px !important;
    text-align: center !important;
}

.table th[data-title*="Domain"],
.table td[data-title*="Domain"] {
    white-space: nowrap !important;
    color: #334155 !important;
    padding-left: 10px !important;
}

.table th[data-title*="Added"],
.table th[data-title*="Statistic"],
.table th.SJNrJFmGeAthEpHx_data_add_Statistic,
.table th[data-title*="Date"],
.table td[data-title*="Added"],
.table td[data-title*="Statistic"],
.table td[data-title*="Date"] {
    min-width: 100px !important;
    white-space: nowrap !important;
    color: #475569 !important;
}

.table th[data-title*="seller"],
.table th[data-title*="Seller"],
.table td[data-title*="seller"],
.table td[data-title*="Seller"] {
    white-space: nowrap !important;
    color: #334155 !important;
}

/* Wrap long balances and descriptions gracefully so wide tables do not break */
.table td.fBRZRMcgftCOY[data-title*="Description"],
.table td.fBRZRMcgftCOY[data-title*="desc"] {
    max-width: 280px !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.table td.fBRZRMcgftCOY[data-title="Balance"]:not(:empty) {
    max-width: 320px !important;
    white-space: normal !important;
    word-break: break-word !important;
}

/* Soft N/A badges and dimmed cells matching Screenshot 1 */
.badge.badge-light-primary {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    letter-spacing: 0.3px !important;
}

.table td[style*="opacity: 0.3"],
.table td[style*="opacity:0.3"],
.fBRZRMcgftCOY[style*="opacity: 0.3"],
.fBRZRMcgftCOY[style*="opacity:0.3"] {
    opacity: 0.45 !important;
    color: #94a3b8 !important;
}

/* Action column (Right aligned matching Screenshot 1) */
.table th:last-child {
    padding-right: 14px !important;
    min-width: 145px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.table td:last-child {
    padding-right: 14px !important;
    min-width: 145px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* "Add all to card" button */
button.WdprJtcJviCgWZjjYuV,
.table th button[onclick*="addMassCart"] {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    border-radius: 6px !important;
    height: 32px !important;
    line-height: 30px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

button.WdprJtcJviCgWZjjYuV:hover,
.table th button[onclick*="addMassCart"]:hover {
    background-color: #f8fafc !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
}

/* Buy price button styling: crisp black border, white bg, bold black price, tight to cart button */
.table td button.sSsBkbxIPQsmdAvwp,
.table td button[onclick*="quickBuy"],
button.sSsBkbxIPQsmdAvwp,
button[onclick*="quickBuy"] {
    border: 1.5px solid #000000 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    min-width: 52px !important;
    height: 30px !important;
    padding: 0 8px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 15 !important;
}

button[onclick*="quickBuy"] * {
    pointer-events: none !important;
}

.table td button.sSsBkbxIPQsmdAvwp .indicator-label,
button.sSsBkbxIPQsmdAvwp .indicator-label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: -0.2px !important;
    line-height: 1 !important;
}

.table td button.sSsBkbxIPQsmdAvwp:hover,
button.sSsBkbxIPQsmdAvwp:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

.table td button.sSsBkbxIPQsmdAvwp:hover .indicator-label,
button.sSsBkbxIPQsmdAvwp:hover .indicator-label {
    color: #ffffff !important;
}

/* Action buttons container alignment: close to price (gap: 6px) matching compact aesthetic */
.table td:last-child .align-items-center,
.table td .align-items-center:has(button.PlvjQLbE),
.table td .align-items-center:has(button.sSsBkbxIPQsmdAvwp),
.table td .align-items-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.table td:last-child {
    text-align: right !important;
    white-space: nowrap !important;
    width: 1% !important;
    padding-right: 14px !important;
}

.table th:last-child {
    text-align: right !important;
    padding-right: 14px !important;
}

/* Cart drawer styles */
#kt_drawer_cart {
    z-index: 1050 !important;
}

/* Modal and Add Funds button interactivity guarantee */
.modal-backdrop {
    z-index: 99990 !important;
    pointer-events: none !important; /* Backdrop should never intercept clicks over modal! */
}

body:not(.modal-open) .modal-backdrop {
    display: none !important;
    pointer-events: none !important;
}

#pkTmS,
.modal {
    z-index: 100000 !important;
}

#pkTmS.show,
.modal.show {
    display: block !important;
    pointer-events: auto !important;
}

#pkTmS .modal-dialog,
.modal .modal-dialog {
    z-index: 100001 !important;
    pointer-events: auto !important;
}

#pkTmS .modal-content,
.modal .modal-content {
    pointer-events: auto !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

#pkTmS a.btn-primary,
#pkTmS a[href*="deposit"],
#pkTmS .btn,
.bb-add-funds-btn,
a[href*="/dashboard/deposit"] {
    position: relative !important;
    z-index: 100002 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================================================
   5. Full Page Refresh Loader
   Loader is HIDDEN by default. It only displays when .bb-loader-active is present
   during an active refresh. NO white hover, NO white backdrop, NO blocking overlay.
   ========================================================================== */

.page-loader,
#kt_app_page_loader,
.bb-page-loader {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: -1 !important;
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

.page-loading > .page-loader,
body.page-loading .page-loader,
[data-kt-app-page-loading="on"] .page-loader,
.page-loader.bb-loader-active,
#kt_app_page_loader.bb-loader-active,
.bb-page-loader.bb-loader-active {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Table & Page Header-First Micro-Refresh Bar (Exact match to User Screenshot)
   ========================================================================== */

.bb-table-loader-row {
    background: transparent !important;
    border: none !important;
}

.bb-table-loader-td {
    padding: 10px 0 16px 0 !important;
    border: none !important;
}

.bb-table-loader-box {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    background-color: #f5f6f8 !important; /* Soft light gray matching user screenshot */
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: none !important;
    margin: 2px 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease !important;
}

[data-bs-theme="dark"] .bb-table-loader-box {
    background-color: #1e1e2d !important;
}

.bb-content-loader-box {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    background-color: #f5f6f8 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    border: none !important;
    margin: 12px 0 !important;
    pointer-events: none !important;
}

[data-bs-theme="dark"] .bb-content-loader-box {
    background-color: #1e1e2d !important;
}

/* Micro refresh spinner - further reduced size per user request */
.bb-micro-spinner,
.spinner-border.bb-micro-spinner,
.bb-table-loader-box .spinner-border,
.bb-content-loader-box .spinner-border,
.page-loader .spinner-border,
.bb-page-loader .spinner-border {
    width: 14px !important;
    height: 14px !important;
    border-width: 1.6px !important;
    border-style: solid !important;
    border-color: #6c757d !important;
    border-right-color: transparent !important;
    color: #6c757d !important;
    border-radius: 50% !important;
    animation: bb-spinner-border 0.65s linear infinite !important;
    pointer-events: none !important;
    display: inline-block !important;
    margin: 0 !important;
}

[data-bs-theme="dark"] .bb-micro-spinner,
[data-bs-theme="dark"] .spinner-border.bb-micro-spinner,
[data-bs-theme="dark"] .bb-table-loader-box .spinner-border,
[data-bs-theme="dark"] .bb-content-loader-box .spinner-border,
[data-bs-theme="dark"] .page-loader .spinner-border,
[data-bs-theme="dark"] .bb-page-loader .spinner-border {
    border-color: #92929f !important;
    border-right-color: transparent !important;
    color: #92929f !important;
}

@keyframes bb-spinner-border {
    to {
        transform: rotate(360deg);
    }
}

/* Smooth ushering in animation */
@keyframes bbUsherIn {
    0% {
        opacity: 0;
        transform: translateY(7px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.bb-usher-in {
    animation: bbUsherIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

tbody.bb-usher-in > tr {
    animation: bbUsherIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.bb-page-incoming {
    animation: bbUsherIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* ==========================================================================
   6. Deposit Form & Page Styling (Exact match to Image 1)
   ========================================================================== */

.bb-deposit-top-box,
.alert.bg-light-info {
    background-color: #f8f9fe !important;
    border: 1px solid #ebedf3 !important;
    border-radius: 12px !important;
    padding: 24px 20px !important;
    color: #3f4254 !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    line-height: 1.7 !important;
    box-shadow: none !important;
}

.bb-deposit-top-box hr,
.alert.bg-light-info hr {
    border: 0 !important;
    border-top: 1px solid #e4e6ef !important;
    margin: 16px 0 !important;
    opacity: 0.8 !important;
}

.bb-deposit-rules {
    color: #f64e60 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.card-deposit-box,
.card:has(#LTXKOBQxJOXggmLBEU) {
    border: 1px solid #eff2f5 !important;
    border-radius: 12px !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.card-deposit-box .card-header,
.card:has(#LTXKOBQxJOXggmLBEU) .card-header {
    border-bottom: 1px solid #eff2f5 !important;
    padding: 18px 24px !important;
    min-height: auto !important;
    background: #ffffff !important;
}

.card-deposit-box .card-title,
.card:has(#LTXKOBQxJOXggmLBEU) .card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #181c32 !important;
    margin: 0 !important;
}

.card-deposit-box .card-body,
.card:has(#LTXKOBQxJOXggmLBEU) .card-body {
    padding: 24px !important;
}

#LTXKOBQxJOXggmLBEU .d-flex.mb-5,
.bb-deposit-form-row {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    align-items: center !important;
}

/* Hide native select when select2 is active */
#LTXKOBQxJOXggmLBEU select.select2-hidden-accessible {
    display: none !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Dropdown styling */
#LTXKOBQxJOXggmLBEU select.form-select:not(.select2-hidden-accessible) {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    height: 44px !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: #3f4254 !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

#LTXKOBQxJOXggmLBEU .select2-container {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
}

#LTXKOBQxJOXggmLBEU .select2-container .select2-selection--single,
#LTXKOBQxJOXggmLBEU .select2-container--bootstrap5 .select2-selection {
    height: 44px !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: #3f4254 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

#LTXKOBQxJOXggmLBEU .select2-container .select2-selection__placeholder {
    color: #a1a5b7 !important;
    font-size: 14px !important;
}

/* Coin icons in Select2 selection and dropdown list */
.select2-container .select2-selection__rendered img,
.select2-container .select2-selection__rendered span img,
.select2-results__option img,
.select2-results__option span img {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    object-fit: contain !important;
    border-radius: 50% !important;
    margin-right: 10px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

.select2-container .select2-selection__rendered,
.select2-results__option {
    display: flex !important;
    align-items: center !important;
}

#LTXKOBQxJOXggmLBEU input#paySum,
#LTXKOBQxJOXggmLBEU input[name="paySum"] {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    height: 44px !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    color: #3f4254 !important;
    padding: 0 14px !important;
    margin-left: 0 !important;
    box-shadow: none !important;
}

#LTXKOBQxJOXggmLBEU input#paySum::placeholder {
    color: #a1a5b7 !important;
    font-size: 14px !important;
}

/* Yellow / Gold "$ Go to payment" button (Exact match to Image 1) */
#HWzqWgSEzCtoCTWc,
.btn-deposit-payment {
    background-color: #ffcb2b !important;
    background: #ffcb2b !important;
    border: none !important;
    border-color: #ffcb2b !important;
    color: #000000 !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 10px 32px !important;
    height: 44px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-shadow: none !important;
    transition: background-color 0.15s ease !important;
    cursor: pointer !important;
    min-width: 170px !important;
}

#HWzqWgSEzCtoCTWc:hover,
.btn-deposit-payment:hover {
    background-color: #f5be18 !important;
    border-color: #f5be18 !important;
    color: #000000 !important;
}

#HWzqWgSEzCtoCTWc:active,
.btn-deposit-payment:active {
    transform: scale(0.98) !important;
}

#HWzqWgSEzCtoCTWc .indicator-label,
.btn-deposit-payment .indicator-label {
    color: #000000 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ==========================================================================
   Crypto Deposit Select2 Custom Styling (Matches Image 2)
   ========================================================================== */

/* Force Select2 dropdown to ALWAYS open downwards directly below the input */
.card-deposit-box,
.card-deposit-box .card-body {
    overflow: visible !important;
}

.bb-deposit-form-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    overflow: visible !important;
}

.bb-deposit-form-row .select2-container {
    width: 50% !important;
    max-width: 50% !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.bb-deposit-form-row .select2-container .select2-dropdown,
.select2-container--open .select2-dropdown,
.select2-container--open .select2-dropdown--above,
.select2-container--open .select2-dropdown--below {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    min-width: 260px !important;
    margin-top: 4px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    background: #ffffff !important;
    overflow: hidden !important;
    z-index: 1060 !important;
}



/* Dropdown Search Input (Exact match to Image 2) */
.select2-container--default .select2-search--dropdown {
    padding: 8px 10px !important;
    background: #ffffff !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    height: 38px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #cbd5e1 !important;
    outline: none !important;
}

/* Results container */
.select2-container--default .select2-results > .select2-results__options {
    max-height: 330px !important;
    padding: 4px 0 !important;
}

/* Option Items */
.select2-container--default .select2-results__option {
    padding: 8px 14px !important;
    font-size: 14px !important;
    color: #334155 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: background 0.1s ease !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Selected Option Highlight (like Monero in Image 2) */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #f8fafc !important;
    border-top: 1px solid #facc15 !important;
    border-bottom: 1px solid #facc15 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

.select2-coin-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.select2-coin-item img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: contain;
    flex-shrink: 0;
}

.select2-coin-item span {
    font-size: 14px;
    line-height: 1.2;
    color: #1e293b;
}

/* Select2 Trigger Box */
.select2-container--default .select2-selection--single {
    height: 44px !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    padding-left: 12px !important;
    color: #3f4254 !important;
    font-size: 14px !important;
    line-height: 42px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 10px !important;
}

/* ==========================================================================
   Payment Confirmation Screen: Exact match to original BlackBet screenshot
   - Sidebar & Header remain visible and intact (Light Theme)
   - Deposit Payment container is compact: max-width 720px, left-aligned
   ========================================================================== */

#depositPaymentSection {
    margin-top: 15px !important;
    margin-bottom: 35px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 820px !important;
    width: 100% !important;
}

#depositPaymentSection .return-btn {
    background: #ffffff !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    padding: 7px 16px !important;
    font-weight: 600 !important;
    color: #181c32 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    height: 38px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

#depositPaymentSection .return-btn:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

#depositPaymentSection .warning-banner {
    background-color: #fef2f2 !important;
    border: 1px solid #fee2e2 !important;
    color: #ef4444 !important;
    border-radius: 6px !important;
    padding: 7px 14px !important;
    font-weight: 500 !important;
    font-size: 12.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 38px !important;
    min-height: 38px !important;
    flex-grow: 1 !important;
    white-space: nowrap !important;
}

#depositPaymentSection .payment-card {
    background: #ffffff !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 10px !important;
    padding: 26px 30px !important;
    margin-top: 15px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

#depositPaymentSection .payment-title {
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #181c32 !important;
    margin-bottom: 22px !important;
    letter-spacing: -0.01em !important;
}

#depositPaymentSection .field-label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #181c32 !important;
    margin-bottom: 6px !important;
}

#depositPaymentSection .amount-box {
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    height: 38px !important;
}

#depositPaymentSection .amount-currency {
    background: #f9fafb !important;
    padding: 0 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    border-right: 1px solid #e4e6ef !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
}

#depositPaymentSection .amount-value {
    padding: 0 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #181c32 !important;
    width: 70px !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
    background: #ffffff !important;
}

#depositPaymentSection .crypto-value {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #181c32 !important;
    margin-left: 12px !important;
}

#depositPaymentSection .address-input {
    width: 100% !important;
    height: 40px !important;
    background-color: #ffffff !important;
    border: 1px solid #e4e6ef !important;
    border-radius: 6px !important;
    padding: 0 42px 0 12px !important;
    font-family: monospace, monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #181c32 !important;
}

#depositPaymentSection .address-input:focus {
    border-color: #facc15 !important;
    outline: none !important;
}

#depositPaymentSection .info-banner {
    background-color: #dcfce7 !important;
    border: 1px solid #bbf7d0 !important;
    color: #16a34a !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
}