/* =============================================
   KL VIP Levels — Table Styles
   Parengcashper dark navy design system
   ============================================= */

/* ── Wrapper ─────────────────────────────── */
.kl-vip-wrap {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Table reset ─────────────────────────── */
.kl-vip-table {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    table-layout: fixed;
}

/* Kill ALL borders from theme */
.kl-vip-table,
.kl-vip-table thead,
.kl-vip-table tbody,
.kl-vip-table tfoot,
.kl-vip-table tr,
.kl-vip-table th,
.kl-vip-table td {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
}

/* Reset box-shadow only on structural elements (not td — separator uses inset shadow) */
.kl-vip-table,
.kl-vip-table thead,
.kl-vip-table tbody,
.kl-vip-table tfoot,
.kl-vip-table tr,
.kl-vip-table th {
    box-shadow: none !important;
}

/* ── Header ──────────────────────────────── */
.kl-vip-table thead tr {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

.kl-vip-table th {
    padding: 14px 20px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    text-align: left;
    background: transparent !important;
    white-space: nowrap;
}

/* Column widths — fixed layout guarantees header/cell alignment */
.kl-vip-th-rank   { width: 70px; }
.kl-vip-th-level  { width: auto; }
.kl-vip-th-reward { width: 200px; text-align: center !important; white-space: nowrap; }
.kl-vip-th-usd    { width: 150px; text-align: center !important; white-space: nowrap; }

/* ── Rows ────────────────────────────────── */
.kl-vip-row {
    transition: background 0.2s ease;
    position: relative;
    background: transparent !important;
}

/* Separator between rows */
.kl-vip-row + .kl-vip-row td {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.kl-vip-row:hover td {
    background: rgba(255, 255, 255, 0.02) !important;
}

/* Active row highlight */
.kl-vip-row.kl-vip-active td {
    background: rgba(59, 130, 246, 0.04) !important;
}

.kl-vip-row.kl-vip-active td:first-child {
    position: relative;
}

.kl-vip-row.kl-vip-active td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #3b82f6;
    border-radius: 0 2px 2px 0;
}

/* ── Cells ───────────────────────────────── */
.kl-vip-table td {
    padding: 16px 20px;
    vertical-align: middle;
    background: transparent;
}

/* Rank cell — width controlled by th, just adjust padding */
.kl-vip-td-rank {
    padding-right: 8px;
}

.kl-vip-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.kl-vip-icon-wrap svg {
    display: block;
}

/* Level cell — inner div handles flex, NOT the td */
.kl-vip-td-level {
    /* plain td — no flex */
}

.kl-vip-level-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.kl-vip-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.kl-vip-sub {
    font-size: 13px;
    font-weight: 700;
    opacity: 0.7;
    white-space: nowrap;
}

.kl-vip-next-badge {
    display: inline-block;
    background: #f59e0b;
    color: #000;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Reward cell */
.kl-vip-td-reward {
    text-align: center !important;
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* USD cell */
.kl-vip-td-usd {
    text-align: center !important;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0.6;
}

/* ── Responsive ──────────────────────────── */
@media ( max-width: 540px ) {
    .kl-vip-table th,
    .kl-vip-table td {
        padding: 13px 14px;
    }

    .kl-vip-td-rank { width: 52px; padding-right: 4px; }

    .kl-vip-icon-wrap { width: 36px; height: 36px; }
    .kl-vip-icon-wrap svg { width: 28px !important; height: 28px !important; }

    .kl-vip-name { font-size: 13px; }
    .kl-vip-td-reward { font-size: 14px; }

    .kl-vip-th-usd,
    .kl-vip-td-usd { display: none; }
}