/* TOGEL BETTING VIEW STYLES */
.togel-betting-container {
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--dark-bg);
}

.tb-header {
    display: flex;
    gap: 10px;
    align-items: center;
}

.tb-header-tab {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    background: #1a1a2e;
    color: #fff;
    border: 1px solid transparent;
}

.tb-header-tab.active {
    background: #1a1a2e;
    border: 1px solid var(--gold);
    color: var(--gold);
}

.tb-schedule-bar {
    width: 100%;
    min-height: 34px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid #335078;
    border-radius: 6px;
    background: linear-gradient(90deg, #102340, #0b182d);
    color: #fff;
    cursor: pointer;
    text-align: left;
}
.tb-schedule-bar:hover { border-color: var(--gold); }
.tb-schedule-title {
    color: var(--gold);
    font-weight: 800;
    white-space: nowrap;
}
.tb-schedule-detail {
    overflow: hidden;
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-schedule-arrow { color: #94a3b8; font-size: 0.72rem; }
.tb-schedule-status-open { color: #34d399; }
.tb-schedule-status-closed { color: #f87171; }

.tb-market-official-banner {
    width: min(100%, 800px);
    aspect-ratio: 800 / 152;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid #335078;
    border-radius: 7px;
    background: #0a192f;
}
.tb-market-official-banner[hidden] { display: none !important; }
.tb-market-official-banner a,
.tb-market-official-banner img {
    display: block;
    width: 100%;
    height: 100%;
}
.tb-market-official-banner img { object-fit: cover; }

.togel-schedule-modal-panel { max-width: 680px; }
.togel-schedule-modal-body { max-height: 72vh; overflow-y: auto; }
.togel-schedule-note {
    margin-bottom: 10px;
    padding: 9px 10px;
    border: 1px solid #334b70;
    border-radius: 6px;
    background: #0a192f;
    color: #cbd5e1;
    font-size: 0.78rem;
}
.togel-schedule-list { display: grid; gap: 8px; }
.togel-schedule-card {
    display: grid;
    grid-template-columns: minmax(120px, 1.25fr) minmax(160px, 1.75fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid #2b4365;
    border-radius: 7px;
    background: #0d1d35;
}
.togel-schedule-market { color: #fff; font-size: 0.86rem; font-weight: 800; }
.togel-schedule-hours { margin-top: 3px; color: #aebdd1; font-size: 0.74rem; }
.togel-schedule-days { color: #d5dfed; font-size: 0.76rem; line-height: 1.35; }
.togel-schedule-badge {
    min-width: 68px;
    padding: 5px 7px;
    border-radius: 999px;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 900;
}
.togel-schedule-badge.open { background: rgba(16, 185, 129, .14); color: #34d399; border: 1px solid #158a68; }
.togel-schedule-badge.closed { background: rgba(239, 68, 68, .12); color: #f87171; border: 1px solid #a93c4a; }
.togel-schedule-loading { padding: 22px; color: #94a3b8; text-align: center; }

.tb-header-search {
    margin-left: auto;
    background: #0f0f1a;
    border-radius: 20px;
    padding: 5px 15px;
    flex: 1;
    max-width: 200px;
}

.tb-search-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    outline: none;
    font-size: 0.9rem;
}

.tb-markets-scroll {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 10px;
    scrollbar-width: none; /* Firefox */
}

.tb-markets-scroll::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}

.tb-market {
    background: #2a2a40;
    color: #a0a0b0;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tb-market.active {
    background: transparent;
    border: 1px solid #ffcc00;
    color: #ffcc00;
}

.tb-market.active i {
    color: #ffcc00;
}

.tb-filters {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 8px;
}

.tb-bet-mode-tabs {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid #334b70;
    border-radius: 7px;
    background: #0c1930;
}
.tb-bet-mode-tab {
    flex: 1;
    min-height: 38px;
    padding: 8px 9px;
    border: 0;
    border-right: 1px solid #334b70;
    background: #12223d;
    color: #aab9cf;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}
.tb-prize-mode-tab[hidden],
#pi-prize123-section[hidden] {
    display: none !important;
}
.tb-bet-mode-tab:last-child { border-right: 0; }
.tb-bet-mode-tab:hover { background: #1b3154; color: #fff; }
.tb-bet-mode-tab.active[data-mode="discount"] { background: #f2b500; color: #10213b; }
.tb-bet-mode-tab.active[data-mode="full"] { background: #1976b9; color: #fff; }
.tb-bet-mode-tab.active[data-mode="bb"] { background: #057e78; color: #fff; }
.tb-bet-mode-tab.active[data-mode^="prize"] { background: #6d3eb3; color: #fff; }
.tb-bet-mode-tabs.has-prize-modes { overflow-x: auto; scrollbar-width: thin; }
.tb-prize-info-btn {
    flex: 1;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #dca900;
    border-radius: 5px;
    background: #10203b;
    color: #ffcc00;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.tb-prize-info-btn:hover { background: #1b3154; }

.tb-select {
    padding: 8px 12px;
    border-radius: 6px;
    background: #fff;
    color: #333;
    border: none;
    font-weight: 600;
    outline: none;
}

.tb-select-primary {
    background: #ffcc00; /* yellow-ish discount */
    flex: 1;
}

.tb-info-banner {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 8px;
    overflow: hidden;
    border: 1px solid #31496d;
    border-radius: 5px;
    background: #0a172d;
}

.tb-info-item {
    min-width: 0;
    padding: 7px 6px;
    background: #10203b;
    color: #dfe8f8;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tb-info-market { color: #ffc400; letter-spacing: .02em; }
.tb-info-period { color: #ffc400; }
.tb-info-type { color: #ffc400; }

.tb-game-types {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding: 0;
    border: 0;
}

.tb-game-type-select {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 7px 30px 7px 10px;
    border: 1px solid #dca900;
    border-radius: 5px;
    background: #10203b;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}
.tb-game-type-select:focus { box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.22); }

.tb-type-tab {
    padding: 10px 15px;
    color: #aaa;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.tb-type-tab.active {
    color: #fff;
    background: #2a2a40;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.tb-grid-container {
    background: #0a192f;
    border: 1px solid #233554;
    border-radius: 4px;
    padding: 0;
    overflow: hidden;
}

.tb-grid-header {
    display: grid;
    grid-template-columns: 25px 80px 1fr 25px;
    background: #0a192f;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid #233554;
}

.tb-grid-header-row2 {
    display: grid;
    grid-template-columns: 25px 80px 1fr 25px;
    background: #0a192f;
    border-bottom: 1px solid #233554;
}

.tb-cell {
    padding: 6px 1px;
    width: 100%;
    height: 100%;
    display: grid;
    align-items: center;
}
.tb-cell > * {
    width: 100%;
    display: block;
    box-sizing: border-box;
}
.tb-grid-header > .tb-cell,
.tb-grid-header-row2 > .tb-cell {
    padding: 6px 1px;
}
.tb-col-bet-multi {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 74px;
    box-sizing: border-box;
}
.tb-col-bet-title {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tb-clear-table-btn {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    z-index: 10;
    width: auto !important;
    white-space: nowrap !important;
    padding: 3px 7px;
    border: 1px solid #ef4444;
    border-radius: 4px;
    background: #991b1b;
    color: #fde047;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    transition: all 0.15s ease;
}

.tb-clear-table-btn:hover,
.tb-clear-table-btn:focus-visible {
    background: #dc2626;
    color: #fef08a;
    outline: none;
    transform: translateY(-50%) scale(1.04);
}

.tb-autobet-input {
    background: #fff;
    color: #0f172a;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    padding: 6px 0;
    font-weight: bold;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    display: block;
}
.tb-autobet-input:focus {
    outline: 2px solid #ffcc00;
}
.tb-autobet-input::placeholder {
    color: #888;
}

.tb-quick-number-input {
    height: 30px;
    background: #fff;
    color: #0f172a;
    border: none;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 0 3px;
}

.tb-quick-number-input:focus {
    outline: 2px solid #ffcc00;
}

.tb-quick-number-input::placeholder {
    color: #888;
    font-weight: 600;
}

.tb-quick-number-check {
    width: 16px !important;
    height: 16px;
    justify-self: center;
    align-self: center;
    accent-color: #ffcc00;
    cursor: pointer;
}

.tb-row {
    display: grid;
    grid-template-columns: 25px 80px 1fr 25px;
    background: #112240;
    border-bottom: 1px solid #233554;
}
.tb-row-bets, .tb-autobet-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 2px;
    width: 100%;
    padding: 0 2px;
}

.tb-row-id {
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    text-align: center;
    align-self: center;
}
.tb-bb-check {
    align-self: center;
}

.tb-number-inputs {
    width: 100%;
    padding: 0 2px;
}

.tb-num-box {
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: 38px;
    background: #fff;
    border: none;
    border-radius: 4px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
    padding: 0;
}

.tb-num-box:focus {
    outline: 2px solid #ffcc00;
}

.tb-bet-input {
    width: 100%;
    display: block;
    box-sizing: border-box;
    height: 38px;
    background: #fff;
    border: none;
    border-radius: 4px;
    padding: 0;
    font-weight: 700;
    font-size: 0.85rem;
    color: #0f172a;
    text-align: center;
}

.tb-bet-input:disabled {
    background: #233554;
    color: #8892b0;
    cursor: not-allowed;
    opacity: 1;
}

.tb-bet-input::placeholder {
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 600;
}

.tb-text-val {
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}

.tb-btn-add-row {
    width: 100%;
    background: #2a2a40;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 700;
    margin-top: 15px;
    cursor: pointer;
}

.tb-btn-add-row:hover {
    background: #363652;
}

.tb-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tb-total-text {
    background: #11111a;
    padding: 12px;
    border-radius: 6px;
    text-align: right;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.tb-btn-confirm {
    background: #ffcc00; /* Purple */
    color: #0a192f;
    border: none;
    padding: 15px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(255, 204, 0, 0.4);
}

.tb-btn-confirm:hover {
    background: #e6b800;
}

/* History Tabs */
.history-tab-btn {
    flex: 1;
    background: #112240;
    color: #8892b0;
    border: 1px solid #233554;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.history-tab-btn.active {
    background: #0a192f;
    color: #ffcc00;
    border-color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
}

.btn-detail-invoice {
    display: inline-block;
    background: #233554;
    color: #ffcc00;
    border: 1px solid #ffcc00;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-detail-invoice:hover {
    background: #ffcc00;
    color: #0a192f;
}


/* Pagination History */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 20px;
}
.page-btn {
    background: #112240;
    color: #fff;
    border: 1px solid #233554;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
}
.page-btn:hover:not(:disabled) {
    background: #233554;
    border-color: #ffcc00;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
}
.page-btn.active {
    background: #ffcc00;
    color: #0a192f;
    border-color: #ffcc00;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
}
.page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* History Tab Box */
.history-tab-content {
    border: 1px solid #ffcc00;
    border-radius: 8px;
    padding-top: 10px;
    background: #0a192f;
    margin-top: 10px;
    overflow: hidden;
}
.history-tab-content .sim-table-responsive {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .togel-betting-container {
        padding: 15px 8px;
        border-radius: 8px;
    }
    .tb-grid-header, .tb-grid-header-row2 {
        font-size: 0.75rem;
    }
    .tb-filters { gap: 6px; margin-bottom: 6px; }
    .tb-bet-mode-tab { min-height: 35px; padding: 7px 6px; font-size: 0.72rem; }
    .tb-prize-info-btn { min-height: 35px; padding: 7px 9px; font-size: 0.76rem; }
    .tb-info-banner { margin-bottom: 6px; }
    .tb-info-item { padding: 6px 3px; font-size: 0.75rem; }
    .tb-game-type-select { font-size: 0.8rem; }
    .tb-schedule-bar {
        grid-template-columns: 1fr auto;
        gap: 5px;
        padding: 6px 8px;
    }
    .tb-schedule-title { display: none; }
    .tb-schedule-detail { font-size: 0.66rem; }
    .togel-schedule-card {
        grid-template-columns: 1fr auto;
        gap: 6px 8px;
    }
    .togel-schedule-days { grid-column: 1 / -1; }
}