/* css/new/layout.css — shared layout & component styles */


/* ══════════════════════════════════════════════════════════════
   Layout / Shell (userarea.php)
   ══════════════════════════════════════════════════════════════ */

.section {
    max-width: 1280px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0px!important;
}

* {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
            font-family: var(--font-body);
            font-weight: 400;
            font-style: normal;
            font-size: var(--fs-lg);
            overflow-x: clip;
        }

        input, select {
            font-size: var(--fs-2xl)!important;
        }

        .ubuntu-light, .ubuntu-regular, .ubuntu-medium, .ubuntu-bold,
        .ubuntu-light-italic, .ubuntu-regular-italic, .ubuntu-medium-italic, .ubuntu-bold-italic { font-family: var(--font-body); }
        .ubuntu-light, .ubuntu-light-italic        { font-weight: 300; }
        .ubuntu-regular, .ubuntu-regular-italic    { font-weight: 400; }
        .ubuntu-medium, .ubuntu-medium-italic      { font-weight: 500; }
        .ubuntu-bold, .ubuntu-bold-italic          { font-weight: 700; }
        .ubuntu-light-italic, .ubuntu-regular-italic, .ubuntu-medium-italic, .ubuntu-bold-italic { font-style: italic; }

        .splide__pagination__page {
          width: 6px;
          height: 6px;
          border-radius: var(--radius-lg);
          background: var(--splide-pagination-inactive);
          opacity: 1;
          transition: all 0.3s ease;
        }

        .splide__pagination__page.is-active {
          width: 14px;
          height: 6px;
          background: var(--accent-color);
        }

body {
            background: var(--primary-background-color);
            color: var(--primary-text-color);
        }



        .offcanvas {
            background: var(--primary-background-color);
            color: var(--primary-text-color);
        }

        /* Offcanvas menu mobile — hanya tutup area konten, header & bottom nav tetap terlihat */
        @media (max-width: 767.98px) {
            #offcanvasExample.offcanvas {
                top: var(--offcanvas-top, 56px);
                bottom: var(--offcanvas-bottom, 58px);
                height: auto;
                max-height: none;
                z-index: 1045;
            }

            #offcanvasExample .offcanvas-body {
                min-height: 0;
                padding-bottom: 8px;
            }

            .offcanvas-backdrop {
                top: var(--offcanvas-top, 56px);
                bottom: var(--offcanvas-bottom, 58px);
                height: auto;
            }
        }

        .btn {
            font-size: var(--fs-lg);
        }

        .navbar {
            background: var(--navbar-bg);
        }

        .navbar.fixed-bottom {
            background: var(--bottom-navbar-bg);
        }

        @media (max-width: 575.98px) {
            .modal-fullscreen-sm-down {
                margin-bottom: 58px;
                height: calc(100% - 58px);
            }
            .modal-fullscreen-sm-down .modal-content {
                height: 100%;
                overflow-y: auto;
            }
        }
        @media (min-width: 576px) {
            #modal .modal-dialog {
                height: 80vh;
            }
            #modal .modal-content {
                height: 85%;
                overflow-y: auto;
                scrollbar-width: none;
                -ms-overflow-style: none;
            }
            #modal .modal-content::-webkit-scrollbar {
                display: none;
            }
        }

        .bottom-menu {
            color: var(--bottom-navbar-text-color, var(--primary-text-color));
        }

        .widget-profile {
            background: var(--widget-profile-bg-start);
            background: linear-gradient(180deg, var(--widget-profile-bg-start) 0%, var(--widget-profile-bg-end) 100%);
        }

        .secondary-text-color {
            color: var(--secondary-text-color);
        }

        .accent-text-color {
            color: var(--accent-text-color);
        }

        /* ID override (specificity > class) — username & balance boleh beda warna dari
           elemen lain yang kebetulan ikut pakai class .secondary-text-color/.accent-text-color */
        #username, #username-desktop {
            color: var(--username-text-color, var(--secondary-text-color));
        }

        #balance, #balance-desktop {
            color: var(--balance-text-color, var(--accent-text-color));
        }

        .primary-background-color {
            background: var(--primary-background-color);
            color: var(--primary-text-color);
        }

        .secondary-background-color {
            background: var(--secondary-background-color);
        }

        .ternary-background-color {
            background: var(--ternary-background-color);
        }

        .btn-deposit {
            background: var(--btn-deposit-color-start);
            background: linear-gradient(333deg, var(--btn-deposit-color-start) 0%, var(--btn-deposit-color-mid) 50%, var(--btn-deposit-color-end) 100%);
            border: none;
            color: var(--btn-deposit-text);
            font-weight: 500;
        }

        .btn-withdraw {
            background: var(--btn-withdraw-color-start);
            background: linear-gradient(333deg, var(--btn-withdraw-color-start) 50%, var(--btn-withdraw-color-end) 100%);
            border: none;
            color: var(--btn-withdraw-text);
        }

        .content-loader-wrap {
            margin: 8px 0;
        }

        #modal-content > .content-loader-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 240px;
            margin: 0;
        }

        @media (min-width: 768px) {
            .content-loader-wrap {
                margin-left: 0;
            }
        }
        @media (min-width: 992px) {
            .content-loader-wrap {
                margin-left: 0;
            }
        }

        .loader {
          width: 50px;
          padding: 12px;
          aspect-ratio: 1;
          border-radius: 50%;
          background: var(--accent-text-color);

          --_m:
            conic-gradient(#0000 10%, #000),
            linear-gradient(#000 0 0) content-box;

          -webkit-mask: var(--_m);
                  mask: var(--_m);

          -webkit-mask-composite: source-out;
                  mask-composite: subtract;

          animation: l3 1s infinite linear;
        }

        @keyframes l3 {
          to {
            transform: rotate(1turn);
          }
        }

        .tx-inline-loader {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 8px 0;
          margin: 0;
        }
        .tx-inline-loader .loader {
          width: 28px;
          padding: 6px;
        }

        .btn-menu{
            background-color: var(--btn-menu-bg, var(--ternary-background-color));
            color: var(--primary-text-color);
            border: none;
            overflow: hidden;
            height: 48px;
        }

        .btn-menu-img {
            height: 100%;
            width: auto;
            display:block;
        }

        .togel-detail-breadcrumb {
            color: var(--breadcrumb-color, #f4c21c);
            font-size: var(--fs-xl);
            font-weight: 700;
            line-height: 1.35;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .togel-detail-breadcrumb .sep {
            padding: 0 4px;
        }

        .breadcrumb-link {
            cursor: pointer;
            color: var(--breadcrumb-color, #f4c21c);
            transition: opacity 0.2s ease;
        }

        .breadcrumb-link:hover {
            opacity: 0.7;
        }

        .breadcrumb-current {
            color: var(--breadcrumb-color, #f4c21c);
            font-weight: 700;
        }

        .field-label {
            font-size: var(--fs-base);
            font-weight: 500;
            color: var(--secondary-text-color);
            margin-bottom: 6px;
        }

        .themed-input {
            width: 100%;
            /* background: var(--ternary-background-color); */
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            /* color: var(--primary-text-color); */
            font-size: var(--fs-lg);
            padding: 10px 14px;
            outline: none;
            transition: border-color .2s;
            appearance: none;
            -webkit-appearance: none;
        }
        .themed-input:focus {
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px var(--accent-bg-subtle);
        }
        .themed-input::placeholder {
            color: var(--input-placeholder-color, var(--muted-text-color));
        }

        .select-wrap {
            position: relative;
        }
        .select-wrap::after {
            content: '\F282';
            font-family: 'bootstrap-icons';
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--accent-color);
            pointer-events: none;
            font-size: var(--fs-base);
        }

        .btn-accent {
            width: 100%;
            padding: 12px;
            background: var(--accent-color);
            color: var(--btn-deposit-text);
            font-size: var(--fs-xl);
            font-weight: 700;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: opacity .2s;
        }
        .btn-accent:hover  { opacity: .85; }
        .btn-accent:active { opacity: .7; transform: scale(.98); }

        .themed-box {
            background: var(--card-bg, var(--ternary-background-color));
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 12px 14px;
        }

        .themed-table {
            width: 100%;
            border-collapse: collapse;
            font-size: var(--fs-base);
        }
        .themed-table thead th {
            font-size: var(--fs-sm);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: var(--muted-text-color);
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-color);
        }
        .themed-table tbody td {
            padding: 10px;
            border-bottom: 1px solid var(--border-subtle-color);
            color: var(--secondary-text-color);
            vertical-align: middle;
        }
        .themed-table tbody tr:hover td {
            background: var(--table-hover-bg);
        }

        .desktop-topbar {
            /* background: var(--secondary-background-color); */
            /* border-bottom: 1px solid var(--border-color); */
            height: 45px;
            padding: 0 12px;
        }

        .desktop-topbar-line {
            /* background: var(--secondary-background-color); */
            border-bottom: 1px solid var(--border-color);
            /* height: 45px; */
            padding: 0 12px;
        }

        .desktop-topbar-link {
            color: var(--topbar-link-color, var(--primary-text-color));
            text-decoration: none;
            font-size: var(--fs-base);
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: opacity 0.2s;
        }

        .desktop-topbar-link:hover {
            opacity: 0.75;
            color: var(--accent-text-color);
        }

        .desktop-mainnav {
            /* background: var(--navbar-bg); */
            padding: 0 12px;
            height: 85px;
            /* border-bottom: 1px solid var(--border-color); */
            position: sticky;
            top: 0;
            z-index: 1046;
            margin: 0;
        }

        .desktop-nav-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 0 17px;
            height: 100%;
            text-decoration: none;
            color: var(--navbar-text-color, var(--secondary-text-color));
            font-size: var(--fs-base);
            font-weight: 500;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            transition: all 0.2s;
            cursor: pointer;
        }

        .desktop-nav-link img {
            width: 40px;
            height: 40px;
            object-fit: contain;
            /* filter: grayscale(30%) brightness(0.8); */
            filter: none;
            transition: filter 0.2s;
        }

        .desktop-nav-link i {
            font-size: 34px;
            color: var(--navbar-text-color, var(--secondary-text-color));
            transition: color 0.2s;
        }

        .marquee-bar {
            background: var(--marquee-bg, var(--secondary-background-color));
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            height: 36px;
            padding: 0;
            gap: 0;
            font-size: var(--fs-md);
            width: 100%;
            margin: 0;
        }

        .marquee-bar .marquee-date {
            padding: 0 10px;
        }

        .marquee-date {
            white-space: nowrap;
            color: var(--marquee-date-color, var(--accent-text-color));
            font-weight: 500;
            flex-shrink: 0;
        }

        .marquee-text {
            flex: 1;
            overflow: hidden;
            color: var(--marquee-text-color, var(--secondary-text-color));
        }

        .marquee-runner {
            display: inline-block;
            white-space: nowrap;
            will-change: transform;
        }

        @keyframes mq-scroll {
            from { transform: translateX(var(--mq-start, 100vw)); }
            to   { transform: translateX(calc(-100% - 1px)); }
        }

        .header-search-wrap {
            position: relative;
            margin: 8px 0 8px;
        }

        .header-search-wrap i {
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--muted-text-color);
            font-size: var(--fs-lg);
        }

        .header-search-input {
            width: 100%;
            padding: 8px 12px 8px 32px;
            background: var(--search-bg, var(--ternary-background-color));
            border: 1px solid var(--secondary-background-color, #333);
            border-radius: var(--radius-sm);
            color: var(--primary-text-color, #fff);
            font-size: var(--fs-base);
            outline: none;
        }

        .header-search-input::placeholder {
            color: var(--muted-text-color);
        }

        /* ── Global search dropdown ── */
        .gs-dropdown {
            position: absolute;
            top: calc(100% + 4px);
            left: 0;
            right: 0;
            background: var(--secondary-background-color);
            border: 1px solid var(--border-color, rgba(255,255,255,.12));
            border-radius: var(--radius-md);
            z-index: 1300;
            max-height: 520px;
            overflow-y: auto;
            box-shadow: 0 6px 24px rgba(0,0,0,.45);
        }
        .gs-section {
            font-size: 11px;
            color: var(--muted-text-color);
            padding: 8px 12px 2px;
            text-transform: uppercase;
            letter-spacing: .06em;
        }
        .gs-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 8px;
            padding: 8px 10px 12px;
        }
        @media (min-width: 768px) {
            .gs-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
        }
        .gs-item {
            cursor: pointer;
            border-radius: var(--radius-lg);
            overflow: hidden;
            transition: transform .15s;
        }
        .gs-item:active { transform: scale(0.95); }
        .gs-item img {
            width: 100%;
            aspect-ratio: 2 / 3;
            object-fit: cover;
            display: block;
        }
        .gs-name {
            font-size: var(--fs-sm);
            color: var(--primary-text-color);
            padding: 4px 6px 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: var(--ternary-background-color);
        }
        .gs-pasaran-item {
            padding: 8px 14px;
            cursor: pointer;
            color: var(--primary-text-color);
            font-size: var(--fs-base);
            transition: background .15s;
        }
        .gs-pasaran-item:hover { background: var(--ternary-background-color); }
        .gs-empty, .gs-loading {
            padding: 18px;
            text-align: center;
            color: var(--muted-text-color);
            font-size: var(--fs-base);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        #lobbyMenuWrap .splide__pagination {
            bottom: .2em;
        }

        .lobby-menu {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 8px 4px;
            border-radius: var(--radius-xl);
            text-decoration: none;
            background: var(--menu-box-bg, transparent);
            border: 1px solid var(--menu-box-border-color, rgba(255,255,255,0.06));
            color: var(--secondary-text-color);
            transition: all 0.2s ease;
            width: 100%;
        }

        .lobby-menu img {
            width: 28px;
            height: 28px;
            object-fit: contain;
            filter: grayscale(40%) brightness(0.8);
            transition: filter 0.2s ease;
        }

        .lobby-menu small {
            font-size: var(--fs-sm);
            font-weight: 500;
            white-space: nowrap;
        }

        .lobby-menu.active {
            background: linear-gradient(145deg, var(--accent-bg-active) 0%, var(--accent-bg-subtle) 100%);
            border-color: var(--accent-border-subtle);
            color: var(--primary-text-color);
        }

        .lobby-menu.active img {
            filter: none;
        }

        .lobby-menu:active {
            transform: scale(0.94);
        }

        .desktop-nav-link:hover {
            color: var(--accent-color);
            border-bottom-color: var(--accent-color);
        }

        .desktop-nav-link:hover img,
        .desktop-nav-link:hover i {
            /* filter: none; */
            filter:grayscale(12%) brightness(0.8);
            color: var(--accent-color);
        }

        .desktop-nav-link.active {
            color: var(--nav-active-color, var(--accent-text-color));
            border-bottom-color: var(--accent-color);
        }

        .desktop-nav-link.active img {
            filter: none;
        }

        .desktop-nav-link.active i {
            color: var(--accent-color);
        }

        .desktop-topbar-user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--avatar-bg, var(--ternary-background-color));
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #content {
            padding-bottom: 70px;
            /* margin-top: 16px; */
            padding-top: 0;
        }

        @media (max-width: 767px) {
            #content {
                padding-left: .5rem!important;
                padding-right: .5rem!important;
            }
        }

        #content > .home-view:first-child {
            margin-top: 0;
            padding-top: 0;
        }

        #content > .home-view:first-child > .home-section:first-child {
            margin-top: 0;
        }

        @media (min-width: 768px) {
            #content {
                padding-bottom: 16px !important;
            }
        }

        @media (min-width: 768px) and (max-width: 1279px) {
            #content {
                padding-left: 32px !important;
                padding-right: 32px !important;
            }
            .p-2 {
                padding-left: 32px !important;
                padding-right: 32px !important;
            }
            .px-2 {
                padding-left: 32px !important;
                padding-right: 32px !important;
            }
            .marquee-bar {
                height: 38px;
                padding: 0 12px;
                gap: 10px;
                font-size: var(--fs-base);
                width: auto;
                margin: 5px 48px 0;
            }
            .marquee-bar .marquee-date {
                padding: 0;
            }
            .header-search-wrap {
                margin: 8px 48px;
            }
        }

        @media (min-width: 992px) {
            .desktop-topbar {
                padding-left: 12%;
                padding-right: 12%;
            }
            .desktop-mainnav {
                padding-left: 12%;
                padding-right: 12%;
                margin-left: 0;
                margin-right: 0;
            }
            .marquee-bar {
                margin-left: 10%;
                margin-right: 10%;
            }
            .header-search-wrap {
                margin-left: 10%;
                margin-right: 10%;
            }
        }

        .desktop-user-dropdown {
            position: absolute;
            top: 45px;
            right: 0;
            background: var(--dropdown-bg, var(--secondary-background-color));
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            min-width: 280px;
            z-index: 9998;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            display: none;
        }
        .desktop-user-dropdown.open {
            display: block;
        }
        .desktop-user-dropdown .btn-menu {
            border-radius: 0;
            border-bottom: 1px solid var(--border-subtle-color);
        }
        .desktop-user-dropdown .btn-menu:last-child {
            border-bottom: none;
        }

        /* ─── Template Picker ─────────────────────────────────────────────── */
        .tpl-picker-wrap { position: relative; }
        .tpl-picker-btn {
            display: flex; align-items: center; gap: 6px;
            padding: 4px 12px;
            background: var(--card-bg, var(--ternary-background-color));
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            color: var(--primary-text-color);
            font-size: var(--fs-sm); font-family: var(--font-body);
            cursor: pointer; white-space: nowrap;
            transition: background .15s;
        }
        .tpl-picker-btn:hover { background: var(--accent-bg-subtle); }
        .tpl-picker-swatch-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
        .tpl-picker-dropdown {
            display: none;
            position: absolute; top: calc(100% + 6px); left: 50%;
            transform: translateX(-50%);
            background: var(--dropdown-bg, var(--secondary-background-color));
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 24px rgba(0,0,0,0.4);
            z-index: 10000; min-width: 220px;
            max-height: 420px; overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .tpl-picker-dropdown::-webkit-scrollbar { display: none; }
        .tpl-picker-dropdown.open { display: block; }
        .tpl-picker-item {
            display: flex; align-items: center;
            height: 48px;
            padding: 0 16px;
            text-decoration: none;
            background-color: var(--card-bg, var(--ternary-background-color));
            color: var(--primary-text-color);
            font-size: var(--fs-base); font-family: var(--font-body);
            border-bottom: 1px solid var(--border-subtle-color);
            transition: background .1s; cursor: pointer;
            white-space: nowrap;
        }
        .tpl-picker-item:last-child { border-bottom: none; }
        .tpl-picker-item:hover { background: var(--accent-bg-subtle); color: var(--accent-text-color); }
        .tpl-picker-item.tpl-active { color: var(--accent-text-color); font-weight: 600; }

        .chat-dial-list {
            display: none;
            position: absolute; bottom: calc(100% + 8px); left: 50%;
            transform: translateX(-50%);
            flex-direction: column; gap: 8px;
            align-items: center;
            z-index: 10000;
        }
        .chat-dial-list.open { display: flex; }
        .chat-dial-item {
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--card-bg, var(--ternary-background-color));
            box-shadow: 0 4px 12px rgba(0,0,0,0.35);
            overflow: hidden;
        }
        .chat-dial-item img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }



/* ══════════════════════════════════════════════════════════════
   Transaksi (transaksi.php)
   ══════════════════════════════════════════════════════════════ */

/* ── Hidden radio util ─────────────────────── */
.tx-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Header / Tabs ─────────────────────────── */
.tx-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 0; border-bottom: 1px solid var(--border-color);
}
.tx-tabs { display: flex; gap: 24px; }
.tx-tab-label {
  cursor: pointer; font-size: var(--fs-xl); font-weight: 600;
  color: var(--muted-text-color); padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
/* ── Close Button ──────────────────────────── */
.tx-btn-close {
  background: var(--accent-color); border: none;
  cursor: pointer;
  width: 32px; height: 32px;
  margin-bottom: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--btn-deposit-text);
  font-size: var(--fs-3xl); font-weight: 600; line-height: 1;
  transition: background .15s, color .15s;
}
.tx-btn-close:hover { background: var(--btn-close-hover-bg); color: var(--accent-color); }
.tx-btn-close:active {
  background: none;
  color: var(--accent-color);
  transform: scale(.92);
}

/* Active tab — CSS sibling selector */
#tx-kind-deposit:checked  ~ div .tx-tab-label[for="tx-kind-deposit"],
#tx-kind-withdraw:checked ~ div .tx-tab-label[for="tx-kind-withdraw"],
#tx-kind-rekening:checked ~ div .tx-tab-label[for="tx-kind-rekening"] {
  color: var(--tx-tab-active-color, var(--accent-color));
  border-bottom-color: var(--tx-tab-active-color, var(--accent-color));
}

/* ── Body ──────────────────────────────────── */
.tx-body { padding: 16px; }
.tx-gap  { display: flex; flex-direction: column; gap: 16px; }

/* ── Toggle buttons — method & pgw ─────────── */
.tx-method-wrap { display: flex; gap: 8px; }
.tx-pgw-wrap { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tx-pgw-wrap::-webkit-scrollbar { display: none; }

.tx-method-label,
.tx-pgw-label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--card-bg, var(--ternary-background-color));
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  color: var(--secondary-text-color);
  font-size: var(--fs-base); font-weight: 700;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.tx-method-label { padding: 10px 12px; min-height: 52px; line-height: 1.25; flex: 0 0 auto; }
#tx-deposit-method-wrap:not(.tx-method-compact) .tx-method-label { flex: 1; }
.tx-pgw-label { padding: 6px 14px; border-radius: 20px; }

.tx-method-label:hover,
.tx-pgw-label:hover { border-color: var(--accent-color); color: var(--primary-text-color); }

.tx-method-label.active,
.tx-pgw-label.active {
  background: var(--accent-color);
  color: var(--btn-deposit-text); border-color: var(--accent-color); font-weight: 700;
}

/* ── Info text ───────────────────────────────── */
.tx-info-text {
  font-size: var(--fs-base); color: var(--muted-text-color); margin: 0; line-height: 1.6;
}
.tx-info-text strong { color: var(--accent-color); }

/* ── Section / field labels ─────────────────── */
.tx-section-label {
  font-size: var(--fs-md); font-weight: 600; text-transform: uppercase;
  letter-spacing: .6px; color: var(--muted-text-color); margin-bottom: 8px;
}
.tx-field-label {
  font-size: var(--fs-base); font-weight: 500; color: var(--secondary-text-color);
  margin-bottom: 6px;
}

/* ── Crypto form ────────────────────────────── */
/* Detail Bonus: hidden on mobile, visible on desktop */
.tx-crypto-bd-desktop { display: none; }
@media (min-width: 480px) {
  .tx-crypto-bd-desktop { display: block; }
  .tx-crypto-bd-mobile  { display: none !important; }
}

/* Two-column rows: stack on mobile, side-by-side on desktop */
.tx-crypto-nominal-row {
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 480px) {
  .tx-crypto-nominal-row { flex-direction: row; align-items: flex-start; }
  .tx-crypto-nominal-col { flex: 1; min-width: 0; }
}

/* Post-wallet: fields + QR */
.tx-crypto-wallet-layout {
  display: flex; flex-direction: column; gap: 16px;
}
.tx-crypto-wallet-fields {
  display: flex; flex-direction: column; width: 100%;
}
.tx-crypto-network-addr-row {
  display: flex; flex-direction: column;
}
.tx-crypto-network-col,
.tx-crypto-addr-col {
  display: flex;
  flex-direction: column;
}
.tx-crypto-field-group {
  flex: 0 0 auto;
}
@media (min-width: 480px) {
  .tx-crypto-wallet-fields { gap: 0; }
  .tx-crypto-network-addr-row {
    flex-direction: row;
    align-items: flex-end;
  }
  .tx-crypto-network-col { flex: 0 0 33%; max-width: 33%; }
  .tx-crypto-addr-col { flex: 1; min-width: 0; padding-left: 8px; }
  .tx-crypto-network-addr-row .form-select,
  .tx-crypto-network-addr-row .tx-crypto-addr-input-row .form-select,
  .tx-crypto-network-addr-row .tx-crypto-addr-input-row .form-control {
    height: 38px;
    min-height: 38px;
  }
  .tx-crypto-network-addr-row .tx-copy-note-slot {
    min-height: 0;
    margin-top: 0;
    height: 0;
    overflow: visible;
  }
  .tx-crypto-wallet-fields > #tx-crypto-txid-section {
    margin-top: 8px;
  }
  .tx-crypto-wallet-layout.has-qr {
    flex-direction: row; align-items: flex-start; gap: 16px;
  }
  .tx-crypto-wallet-layout.has-qr .tx-crypto-wallet-fields {
    flex: 1; min-width: 0;
  }
  .tx-crypto-wallet-layout.has-qr .tx-crypto-qr-wrap {
    flex: 0 0 180px; align-self: flex-start;
  }
}
.tx-crypto-addr-input-row {
  display: flex; gap: 8px; align-items: center;
}
.tx-crypto-addr-input-row .form-select,
.tx-crypto-addr-input-row .form-control { flex: 1; min-width: 0; }

/* Shared box style */
.tx-crypto-bonus-box,
.tx-crypto-info-box {
  background: var(--card-bg, var(--ternary-background-color));
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.tx-crypto-bonus-box { padding: 12px 14px; }
.tx-crypto-info-box  { padding: 10px 14px; font-size: var(--fs-base); }

.tx-crypto-bonus-title {
  font-size: var(--fs-base); font-weight: 700; color: var(--accent-color);
  margin-bottom: 10px;
}
.tx-crypto-bonus-grid {
  display: grid; grid-template-columns: auto auto 1fr; gap: 4px 8px;
  font-size: var(--fs-md); color: var(--secondary-text-color);
}
.tx-crypto-bonus-grid span:nth-child(3n+2) { color: var(--muted-text-color); }
.tx-crypto-info-label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted-text-color); margin-bottom: 4px;
}
/* QR wrap */
.tx-crypto-qr-wrap {
  background: var(--card-bg, var(--ternary-background-color));
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 16px; display: flex; justify-content: center;
}
.tx-crypto-qr-inner {
  width: 180px; height: 180px;
  background: var(--qr-bg); border-radius: var(--radius-sm);
  display: block; object-fit: contain;
}

.tx-crypto-alert {
  color: #fff; font-size: 12px; padding: 12px 14px;
  border-radius: var(--radius-md); background-color: var(--alert-danger-bg, #ee5f5b); text-align: center;
}
.tx-crypto-rate-expired {
  font-size: 11px; color: var(--accent-color); margin-top: 4px;
}
.tx-field-msg {
  font-size: var(--fs-sm); color: var(--color-debit, #ef5350);
}
.tx-field-msg--success {
  color: var(--color-kredit, #66bb6a);
}
.tx-pgw-success-overlay {
  position: absolute; inset: 0;
  background: var(--color-kredit-bg, #1b3a2a);
  border: 1px solid var(--color-kredit, #66bb6a);
  border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; z-index: 10;
}
.tx-pgw-success-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--color-kredit, #66bb6a);
  color: #fff; font-size: 1.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.tx-pgw-success-text {
  font-size: var(--fs-base, 1rem); font-weight: 600;
  color: var(--color-kredit, #66bb6a); text-align: center; padding: 0 16px;
}

/* ── Salin button ───────────────────────────── */
.tx-btn-salin {
  flex-shrink: 0; padding: 0 14px; height: 38px;
  background: var(--accent-color); color: var(--btn-deposit-text);
  border: none; border-radius: var(--radius-md); font-size: var(--fs-base); font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: opacity .2s;
}
.tx-btn-salin:hover { opacity: .85; }
.tx-btn-salin--copied {
  background: #2d8a4e !important;
  color: #fff !important;
}
.tx-copy-note {
  display: block;
  font-size: 12px;
  color: #5cb85c;
  line-height: 1.3;
}
.tx-copy-note-slot {
  flex-shrink: 0;
}
.tx-copy-note-slot .tx-copy-note {
  white-space: nowrap;
}

/* ── Submit button ───────────────────────────── */
.tx-btn-submit {
  width: 100%; padding: 13px;
  background: var(--accent-color);
  color: var(--btn-deposit-text); font-size: var(--fs-xl); font-weight: 700;
  border: none; border-radius: var(--radius-md); cursor: pointer;
  transition: opacity .2s;
}
.tx-btn-submit:hover { opacity: .85; }
.tx-btn-submit + .tx-crypto-alert { margin-top: 12px; }

/* ── Rekening table ─────────────────────────── */
.tx-rek-table {
  width: 100%; border-collapse: collapse; font-size: var(--fs-base);
}
.tx-rek-table thead th {
  text-align: left; font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted-text-color); padding: 0 10px 8px; border-bottom: 1px solid var(--border-color);
}
.tx-rek-table thead th:last-child { text-align: center; }
.tx-rek-table tbody tr {
  border-bottom: 1px solid var(--border-subtle-color);
  transition: background .15s;
}
.tx-rek-table tbody tr:last-child { border-bottom: none; }
.tx-rek-table tbody tr:hover { background: var(--table-hover-bg); }
.tx-rek-table tbody td {
  padding: 10px; color: var(--secondary-text-color);
  vertical-align: middle;
}
.tx-rek-table .bank-name {
  font-weight: 700; color: var(--tx-table-accent-color, var(--accent-text-color)); min-width: 72px;
}
.tx-rek-table td:last-child { text-align: center; }
.tx-rek-radio {
  width: 16px; height: 16px; accent-color: var(--accent-color); cursor: pointer;
}

/* ── Rekening add-form row ───────────────────── */
.tx-rek-add-section { margin-top: 0; }
.tx-rek-add-row {
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 480px) {
  .tx-rek-add-row { flex-direction: row; align-items: flex-end; }
  .tx-rek-add-row > div { flex: 1; }
}

/* ── Withdraw two-column layout ─────────────── */
#tx-wd-method-wrap,
#tx-rek-method-wrap {
  display: flex;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  align-items: center;
}
#tx-va-bank-group {
  flex-wrap: wrap;
}
#tx-va-bank-group .tx-method-label {
  flex: 0 0 calc(50% - 4px);
}
.tx-wd-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tx-wd-form-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#tx-wd-bank-allowed,
#tx-wd-crypto-allowed {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tx-wd-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tx-wd-submit {
  width: 100%;
  margin-top: 14px;
}
.tx-wd-check-rate {
  width: 100%;
  margin-top: 0;
}
.tx-wd-terms { font-size: var(--fs-base); padding: 1rem;}
@media (min-width: 480px) {
  .tx-wd-layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 16px;
    align-items: start;
  }
  .tx-wd-form-col {
    min-height: 0;
  }
  #tx-wd-bank-allowed,
  #tx-wd-crypto-allowed {
    min-height: 0;
  }
}
/* Jumlah IDR + USDT row */
.tx-wd-amount-row {
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 480px) {
  .tx-wd-amount-row { flex-direction: row; }
  .tx-wd-amount-row > div { flex: 1; }
}

/* ── Panel box (form containers) ─────────────── */
.tx-box {
  background: var(--card-bg, var(--ternary-background-color));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1rem;
}

/* ── Terms ───────────────────────────────────── */
.tx-terms ul { margin: 0; padding: 0 0 0 1.2em; list-style: none; display: block; }
.tx-terms ul li { margin: 0 0 2px; }
.tx-terms p { margin: 0 0 4px; }

/* ── Deposit two-column: form kiri, ketentuan kanan ─ */
.tx-dp-layout { display: flex; flex-direction: column; gap: 16px; }
#tx-bank-col2,
#tx-crypto-col2 {
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}
#tx-bank-col2 #tx-terms-bank {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
}
@media (min-width: 480px) {
  .tx-dp-layout {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 16px;
    align-items: start;
  }
  /* Semua form → kolom 1, baris 1 (overlap — hanya 1 yg visible) */
  #tx-deposit-pgw-form,
  #tx-deposit-bank-form,
  #tx-deposit-crypto-form { grid-column: 1; grid-row: 1; }
  /* Terms non-crypto → kolom 2, baris 1 */
  #tx-terms-qris,
  #tx-terms-va { grid-column: 2; grid-row: 1; padding: 0.5rem;}
  /* Wrapper kolom kanan bank: bonus detail + terms */
  #tx-bank-col2 {
    grid-column: 2; grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* Wrapper kolom kanan crypto: bonus detail + terms dalam 1 grid cell */
  #tx-crypto-col2 {
    grid-column: 2; grid-row: 1;
    flex-direction: column;
    gap: 16px;
  }
}



/* ══════════════════════════════════════════════════════════════
   CMS (cms.php)
   ══════════════════════════════════════════════════════════════ */

.cms-wrap {
    display: flex;
    position: relative;
    min-height: 100%;
  }

  /* ── Close button ── */
  .cms-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    width: 32px;
    height: 32px;
    background: var(--accent-color);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--btn-deposit-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--fs-3xl);
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .cms-close-btn:hover { background: var(--btn-close-hover-bg); color: var(--accent-color); }
  .cms-close-btn:active { background: none; }

  /* ── Left sidebar ── */
  .cms-sidebar {
    width: 175px;
    flex-shrink: 0;
    background: var(--sidebar-bg, var(--secondary-background-color));
    padding-bottom: 16px;
  }
  .cms-sidebar-logo {
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
  }
  .cms-sidebar-logo img {
    height: 36px;
    width: auto;
    display: block;
  }
  .cms-nav-item {
    padding: 12px 22px;
    font-size: var(--fs-lg);
    color: var(--cms-nav-color, var(--muted-text-color, #888));
    cursor: pointer;
    transition: color .15s;
    white-space: nowrap;
  }
  .cms-nav-item:hover { color: var(--cms-nav-hover-color, var(--secondary-text-color)); }
  .cms-nav-item.active { color: var(--cms-nav-active-color, var(--primary-text-color)); font-weight: 500; }

  /* ── Right content ── */
  .cms-main {
    flex: 1;
    padding: 22px 48px 24px 24px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .cms-main::-webkit-scrollbar { display: none; }
  .cms-pane { display: none; }
  .cms-pane.active { display: block; }
  .cms-pane-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--primary-text-color);
    margin-bottom: 16px;
  }
  .cms-body {
    color: var(--secondary-text-color);
    font-size: var(--fs-lg);
    line-height: 1.75;
  }
  .cms-body p { margin-bottom: 10px; }
  .cms-body p:last-child { margin-bottom: 0; }
  .cms-sub {
    color: var(--accent-color);
    font-size: var(--fs-base);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 14px 0 6px;
  }

  /* ── Tabel dari konten API ── */
  .cms-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 12px 0;
  }
  .cms-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-base);
    margin: 0;
  }
  .cms-body table th {
    padding: 9px 12px;
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted-text-color);
    background: var(--table-header-bg, var(--ternary-background-color));
    border: none;
    border-bottom: 2px solid var(--accent-color);
    text-align: left;
  }
  .cms-body table td {
    padding: 9px 12px;
    border: none;
    border-bottom: 1px solid var(--border-subtle-color);
    color: var(--secondary-text-color);
    vertical-align: top;
    line-height: 1.55;
  }
  .cms-body table tbody tr:last-child td { border-bottom: none; }
  .cms-body table tbody tr:nth-child(odd)  td { background: var(--primary-background-color); }
  .cms-body table tbody tr:nth-child(even) td { background: var(--secondary-background-color); }
  .cms-body table tbody tr:hover td { background: var(--accent-bg-subtle); }
  .cms-body table a { color: var(--accent-color); text-decoration: none; }

  /* Bank list */
  .cms-bank-list { display: flex; flex-direction: column; gap: 7px; }
  .cms-bank-item {
    background: var(--card-bg, var(--ternary-background-color));
    border: 1px solid var(--border-color);
    border-radius: 7px;
    padding: 9px 14px;
    font-size: var(--fs-base);
    color: var(--primary-text-color);
  }
  .cms-bank-item i { color: var(--accent-color); }

  /* Contact list */
  .cms-contact-list { display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
  .cms-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--card-bg, var(--ternary-background-color));
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 12px 16px;
    text-decoration: none;
    transition: border-color .2s;
  }
  .cms-contact-item:hover { border-color: var(--accent-color); }
  .cms-contact-icon { font-size: 22px; color: var(--accent-color); flex-shrink: 0; }
  .cms-contact-label { font-size: var(--fs-sm); color: var(--muted-text-color); }
  .cms-contact-value { font-size: var(--fs-lg); font-weight: 600; color: var(--primary-text-color); }

  /* Mobile header (logo + X) — hidden on desktop */
  .cms-mobile-header { display: none; }
  /* Tabs wrapper — transparent on desktop, scrollable on mobile */
  .cms-sidebar-tabs { display: contents; }

  /* Mobile: sidebar becomes top tab bar */
  @media (max-width: 575.98px) {
    .cms-wrap { flex-direction: column; }

    .cms-sidebar {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .cms-sidebar-logo { display: none; }

    .cms-mobile-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border-color);
      flex-shrink: 0;
    }
    .cms-mobile-header img {
      height: 30px;
      width: auto;
      display: block;
    }
    /* Tab bar row */
    .cms-sidebar-tabs {
      display: flex;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .cms-sidebar-tabs::-webkit-scrollbar { display: none; }

    .cms-nav-item {
      white-space: nowrap;
      padding: 11px 16px;
      border-bottom: 2px solid transparent;
      font-size: var(--fs-base);
    }
    .cms-nav-item.active { border-bottom-color: var(--accent-color); }
    .cms-main { padding: 16px; }
  }



/* ══════════════════════════════════════════════════════════════
   Menu (menu.php)
   ══════════════════════════════════════════════════════════════ */

.custom-select-wrap {
    position: relative;
  }
  .custom-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--card-bg, var(--ternary-background-color));
    border: 1px solid var(--border-color);
    border-radius: 50px;
    padding: 14px 20px;
    color: var(--primary-text-color);
    font-size: var(--fs-lg);
    font-weight: 500;
    width: 100%;
    cursor: pointer;
  }
  .custom-select-btn i {
    color: var(--accent-color);
  }
  .custom-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--card-bg, var(--ternary-background-color));
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    z-index: 999;
  }
  .custom-select-dropdown.open {
    display: block;
  }
  .custom-select-option {
    padding: 12px 20px;
    color: var(--secondary-text-color);
    font-size: var(--fs-lg);
    cursor: pointer;
  }
  .custom-select-option:hover,
  .custom-select-option.active {
    background: var(--accent-bg-subtle);
    color: var(--accent-color);
  }

  @media (min-width: 768px) {
    .menu-page-wrap { margin: 0; }
    .custom-select-wrap {
      display: inline-block;
    }
    .custom-select-btn {
      width: auto;
      min-width: 185px;
      border-radius: 20px;
      padding: 5px 12px 5px 10px;
      font-weight: 700;
    }
    .custom-select-dropdown {
      min-width: 185px;
      border-radius: var(--radius-xl);
    }
  }
  @media (min-width: 992px) {
    .menu-page-wrap { margin: 0; }
  }



/* ══════════════════════════════════════════════════════════════
   Statement (statement.php)
   ══════════════════════════════════════════════════════════════ */

.stmt-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
.stmt-table thead tr {
    border-bottom: 2px solid var(--accent-color) !important;
}
.stmt-table thead th {
    padding: 10px 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--table-header-bg, var(--ternary-background-color));
    color: var(--secondary-text-color);
    border-bottom: none !important;
    border-top: none !important;
}
.stmt-table tbody td {
    padding: 9px 8px;
    font-size: var(--fs-base);
    border: none !important;
    vertical-align: middle;
}
.stmt-table tbody tr:nth-child(odd)  td { background: var(--primary-background-color); }
.stmt-table tbody tr:nth-child(even) td { background: var(--secondary-background-color); }

.stmt-col-date   { white-space: nowrap; color: var(--color-tanggal, #8bc34a); }
/* .stmt-col-desc   { width: 1%; white-space: nowrap; } */
.stmt-col-desc   { color: var(--primary-text-color); }
.stmt-col-date-col   { width: 110px; }
.stmt-col-debit-col  { width: 130px; }
.stmt-col-kredit-col { width: 130px; }
.stmt-col-pm-col     { width: 140px; }
.stmt-col-bal-col    { width: 140px; }
/* stmt-col-desc-col: tanpa width = sisa ruang */

@media (min-width: 768px) {
    .stmt-col-pm-col { width: 0; }
}

@media (max-width: 767.98px) {
    .stmt-col-date-col   { width: 86px; }
    .stmt-col-debit-col,
    .stmt-col-kredit-col { width: 0; }
    .stmt-col-pm-col     { width: 110px; }
    .stmt-col-bal-col    { width: 110px; }
}

/* Utility warna debit/kredit/balance — pakai CSS var dari setiap template */
.val-debit   { color: var(--color-debit,   #ef5350); }
.val-kredit  { color: var(--color-kredit,  #66bb6a); }
.val-balance { color: var(--color-balance, #42a5f5); }

/* Warna tanggal seragam untuk history & statement */
.history-table .col-tanggal { color: var(--color-tanggal, #8bc34a) !important; }

/* Alias lama — tidak dihapus agar backward-compatible */
.stmt-positive    { color: var(--color-balance, #42a5f5); }
.stmt-negative    { color: var(--color-debit,   #ef5350); }
.stmt-zero        { color: var(--secondary-text-color); }
.stmt-kredit-val  { color: var(--color-kredit,  #66bb6a); }

.stmt-row-clickable { cursor: pointer; user-select: none; }
.stmt-row-clickable:hover td { background: var(--accent-bg-subtle) !important; }

.stmt-sub  td { font-size: var(--fs-md); }
.stmt-sub2 td { font-size: var(--fs-md); }
.stmt-indent1 { display: inline-block; width: 16px; }
.stmt-indent2 { display: inline-block; width: 32px; }

.stmt-toggle-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    margin-right: 4px;
    font-size: 9px;
    color: var(--muted-text-color);
    transition: transform 0.18s;
}
.stmt-toggle-icon.open { transform: rotate(90deg); }

.stmt-row-provider td { font-size: var(--fs-md); }
.stmt-row-provider .stmt-col-desc {
    padding-left: 28px;
    color: var(--secondary-text-color);
}

@media (max-width: 480px) {
    .stmt-col-date   { width: 86px; font-size: var(--fs-md); }
    .stmt-col-pm     { width: 110px; }
    .stmt-col-debit  { width: 90px; }
    .stmt-col-kredit { width: 90px; }
    .stmt-col-bal    { width: 110px; }
}



/* ══════════════════════════════════════════════════════════════
   History (history.php)
   ══════════════════════════════════════════════════════════════ */

.history-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}
.history-table thead th {
    padding: 10px 8px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--table-header-bg, var(--ternary-background-color));
    color: var(--secondary-text-color);
    border-bottom: 2px solid var(--accent-color) !important;
    border-top: none !important;
}
.history-table tbody td {
    padding: 9px 8px;
    font-size: var(--fs-md);
    border: none !important;
    vertical-align: middle;
}
.history-table tbody tr:nth-child(odd) td  { background: var(--table-stripe-odd-bg, var(--primary-background-color)); }
.history-table tbody tr:nth-child(even) td { background: var(--table-stripe-even-bg, var(--secondary-background-color)); }
.history-table tbody tr:hover td { background: var(--accent-bg-subtle); }
.history-table .col-pm { white-space: nowrap; }
.history-table .h-col-date    { width: 15%; }
.history-table .h-col-pasaran { width: 20%; }
.history-table .h-col-betid   { width: 20%; }
.history-table .h-col-deskripsi { width: 15%; }
.history-table .h-col-pm      { width: 10%; }
.history-table .h-col-debit   { width: 9%; }
.history-table .h-col-kredit  { width: 9%; }
.history-table .h-col-balance { width: 12%; }
.history-table .pm-positive { color: var(--color-kredit); }
.history-table .pm-negative { color: var(--color-debit); }
.history-table .pm-neutral  { color: var(--secondary-text-color); }
.history-table .val-debit   { color: var(--color-debit,   #ef5350) !important; }
.history-table .val-kredit  { color: var(--color-kredit,  #66bb6a) !important; }
.history-table .val-balance { color: var(--color-balance, #42a5f5) !important; }
.history-mobile-meta { font-size: var(--fs-sm); }
.history-mobile-betid {
    font-size: var(--fs-xs);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* Header bar */
.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: var(--table-header-bg, var(--ternary-background-color));
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.history-header-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--primary-text-color);
    display: flex;
    align-items: center;
    gap: 7px;
}
.history-header-filter {
    display: flex;
    align-items: center;
    gap: 8px;
}
.history-filter-label {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--muted-text-color);
    white-space: nowrap;
}
.history-filter-select {
    font-size: var(--fs-sm);
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--input-bg, var(--secondary-background-color));
    color: var(--primary-text-color);
    cursor: pointer;
    outline: none;
}
.history-filter-select:focus {
    border-color: var(--accent-color);
}

/* Pagination bar */
.history-paging,
.referral-paging {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 0 2px;
    font-size: var(--fs-md);
    color: var(--secondary-text-color);
}
.history-paging .h-pages,
.referral-paging .h-pages {
    display: flex;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.history-paging .h-pages li button,
.referral-paging .h-pages li button {
    min-width: 30px;
    padding: 3px 7px;
    font-size: var(--fs-md);
    border: 1px solid var(--accent-color);
    background: transparent;
    color: var(--secondary-text-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.history-paging .h-pages li button:hover:not(:disabled),
.referral-paging .h-pages li button:hover:not(:disabled) {
    background: var(--accent-color);
    color: var(--primary-text-color);
}
.history-paging .h-pages li button.active,
.referral-paging .h-pages li button.active {
    background: var(--accent-color);
    color: var(--primary-text-color);
    font-weight: 700;
}
.history-paging .h-pages li button:disabled,
.referral-paging .h-pages li button:disabled {
    opacity: 0.35;
    cursor: default;
}
/* Self-contained responsive — works even without Bootstrap utilities */
@media (min-width: 576px) {
    .history-table .d-sm-none       { display: none         !important; }
    .history-table .d-sm-table-cell { display: table-cell   !important; }
}
@media (max-width: 575.98px) {
    .history-table .d-none          { display: none         !important; }
    .history-table { table-layout: auto; }
}
@media (min-width: 768px) {
    .history-table .d-md-none        { display: none         !important; }
    .history-table .d-md-table-cell  { display: table-cell   !important; }
}
@media (max-width: 767.98px) {
    .history-table .d-md-table-cell  { display: none         !important; }
}

/* Section constraint overrides — must come last to win over media-query margins */
.section.marquee-bar {
    width: auto;
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}
.section.header-search-wrap {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Remove horizontal padding from .section elements that also have .p-2.
   Uses two-class specificity (0,2,0) to beat .p-2's (0,1,0) !important rule. */
.section.p-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (max-width: 767px) {
    :root {
        --fs-sm:    10px;
        --fs-md:    11px;
        --fs-base:  12px;
        --fs-lg:    13px;
        --fs-xl:    14px;
        --fs-2xl:   15px;
        --fs-3xl:   16px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Modal Syarat & Ketentuan (#modal-syarat)
   ══════════════════════════════════════════════════════════════ */
#modal-syarat .modal-content {
  background: var(--primary-background-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
}
#modal-syarat .syarat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-color);
  background: var(--secondary-background-color, var(--primary-background-color));
}
#modal-syarat .syarat-header img {
  height: 36px;
  object-fit: contain;
}
#modal-syarat .syarat-header .syarat-title {
  font-size: var(--fs-lg, 15px);
  font-weight: 700;
  color: var(--primary-text-color);
  text-align: right;
}
#modal-syarat .syarat-body {
  padding: 20px;
  max-height: 55vh;
  overflow-y: auto;
  color: var(--primary-text-color);
  font-size: var(--fs-base, 14px);
  line-height: 1.7;
}
#modal-syarat .syarat-body::-webkit-scrollbar { width: 4px; }
#modal-syarat .syarat-body::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}
#modal-syarat .syarat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid var(--border-color);
  background: var(--secondary-background-color, var(--primary-background-color));
}
#modal-syarat .btn-syarat-reject {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  padding: 8px 20px;
  font-weight: 600;
  font-size: var(--fs-base, 14px);
  display: flex;
  align-items: center;
  gap: 6px;
}
#modal-syarat .btn-syarat-reject:hover { background: #a93226; }
#modal-syarat .btn-syarat-agree {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: var(--radius-md, 8px);
  padding: 8px 28px;
  font-weight: 700;
  font-size: var(--fs-base, 14px);
  display: flex;
  align-items: center;
  gap: 6px;
}
#modal-syarat .btn-syarat-agree:hover { background: #1e8449; }
#modal-syarat .welcome-block {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

/* ══════════════════════════════════════════════════════════════
   Toast notifications (toast() / toastAction() di main.js)
   ══════════════════════════════════════════════════════════════ */
.toastify.toast-success { background: #27ae60; }
.toastify.toast-error { background: #c0392b; }
.toast-action-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-action-btn {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md, 8px);
  padding: 4px 12px;
  font-size: var(--fs-sm, 12px);
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
}
.toast-action-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}