/* ==========================================

   MOSTPLAY PARTNERS

   COMMISSION SECTION CSS

========================================== */



/* ==========================================

   1. MAIN SECTION

========================================== */



.mp-commission {

    padding: 48px 18px;

    background: #ffffff;

    color: #071344;

    font-family: inherit;

}



.mp-commission *,

.mp-commission *::before,

.mp-commission *::after {

    box-sizing: border-box;

}



.mp-commission__inner {

    width: 100%;

    max-width: 1140px;

    margin: 0 auto;

}



.mp-commission__title {

    margin: 0 0 25px;

    text-align: center;

    font-size: clamp(28px, 4vw, 44px);

    font-weight: 800;

    line-height: 1.15;

}



/* ==========================================

   2. TABS AND TOOLBAR

========================================== */



.mp-commission__toolbar {

    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 18px;

}



.mp-commission__tabs {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    flex: 1;

    gap: 9px;

}



.mp-commission__tab {

    padding: 15px 12px;

    border: 0;

    border-radius: 7px;

    background: #e9f3ff;

    color: #071344;

    font: inherit;

    cursor: pointer;

    transition: background 0.2s ease;

}



.mp-commission__tab:hover {

    background: #d5e9ff;

}



.mp-commission__tab.is-active {

    background: #0961ec;

    color: #ffffff;

}



.mp-commission__period-label {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

}



.mp-commission__period {

    padding: 12px;

    border: 1px solid #cfe1fa;

    border-radius: 6px;

    background: #ffffff;

    color: #071344;

}



/* ==========================================

   3. PANELS

========================================== */



.mp-commission__panel {

    padding: 20px;

    border: 1px solid #d8e6fa;

    border-radius: 10px;

}



.mp-commission__panel[hidden] {

    display: none !important;

}



/* ==========================================

   4. OVERVIEW

========================================== */



.mp-commission__overview {

    display: grid;

    grid-template-columns: 1.5fr 1fr;

    gap: 25px;

    align-items: center;

}



.mp-commission__players {

    display: grid;

    gap: 15px;

}



.mp-commission__player {

    display: grid;

    grid-template-columns: 90px 1fr;

    gap: 12px;

    align-items: center;

}



.mp-commission__player-name {

    font-weight: 700;

}



.mp-commission__track {

    height: 16px;

    overflow: hidden;

    border-radius: 50px;

    background: #eaf2ff;

}



.mp-commission__fill {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: #163e90;

}



.mp-commission__fill--negative {

    background: #f04452;

}



.mp-commission__summary {

    display: grid;

    gap: 16px;

    padding: 18px;

    border-radius: 10px;

    background: #eaf3ff;

}



.mp-commission__metric {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 12px;

}



.mp-commission__metric strong {

    font-size: 26px;

}



.mp-commission__highlight {

    display: grid;

    gap: 5px;

    padding: 18px;

    border-radius: 10px;

    background: #f4b600;

}



.mp-commission__highlight strong {

    font-size: 34px;

}



.mp-commission__note,

.mp-breakdown-note {

    margin: 10px 0 0;

    text-align: right;

    font-size: 11px;

    color: #6175a3;

}



.mp-commission__empty {

    color: #6175a3;

}



/* ==========================================

   5. PLAYER BREAKDOWN TABLE

========================================== */



.mp-breakdown-table-wrap {

    overflow-x: auto;

    border: 1px solid #d8e6fa;

    border-radius: 9px;

}



.mp-breakdown-table {

    width: 100%;

    border-collapse: collapse;

    font-size: 14px;

    text-align: center;

}



.mp-breakdown-table th,

.mp-breakdown-table td {

    padding: 17px 10px;

    border: 1px solid #dce6f4;

}



.mp-breakdown-table thead th {

    background: #446fb6;

    color: #ffffff;

    font-weight: 700;

}



.mp-breakdown-table tbody tr:nth-child(even) {

    background: #f6f9ff;

}



.mp-breakdown-table tbody th {

    text-align: left;

    font-weight: 700;

}



.mp-breakdown-table .is-negative {

    color: #f01824;

}



.mp-breakdown-table tfoot {

    background: #e8f2ff;

    font-weight: 800;

}



.mp-breakdown-summary {

    display: grid;

    grid-template-columns: 1fr 1fr 1.2fr;

    gap: 15px;

    margin-top: 18px;

    padding: 20px;

    border-radius: 10px;

    background: #eaf3ff;

}



.mp-breakdown-stat,

.mp-breakdown-commission {

    display: grid;

    align-content: center;

    gap: 10px;

}



.mp-breakdown-stat strong,

.mp-breakdown-commission strong {

    font-size: 30px;

}



.mp-breakdown-commission {

    padding: 16px 20px;

    border-radius: 10px;

    background: #f4b600;

}



/* ==========================================

   6. EARNINGS SIMULATOR

========================================== */



.mp-commission__panel[data-mp-panel="simulator"] {

    padding: 0;

    border: 0;

}



.mp-sim {

    display: grid;

    grid-template-columns: 1.14fr 0.86fr;

    gap: 15px;

    align-items: stretch;

    font-size: 14px;

}



.mp-sim__form,

.mp-sim__result {

    min-width: 0;

    padding: 18px;

    border: 1px solid #cfe3fc;

    border-radius: 10px;

}



.mp-sim__result {

    background: #eaf5ff;

}



/* ==========================================

   7. SIMULATOR HEADING AND RESET

========================================== */



.mp-sim__heading-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.mp-sim h3 {

    margin: 0 0 9px;

    font-size: 22px;

    font-weight: 800;

    line-height: 1.2;

}



.mp-sim h4 {

    margin: 0 0 12px;

    font-size: 16px;

}



.mp-sim__reset {

    padding: 5px;

    border: 0;

    background: transparent;

    color: #0869ff;

    cursor: pointer;

}



/* ==========================================

   8. CURRENCY AND QUICK SCENARIOS

========================================== */



.mp-sim__label {

    display: block;

    margin: 9px 0 5px;

}



.mp-sim__select {

    width: 100%;

    padding: 9px;

    border: 1px solid #cfe1fa;

    border-radius: 6px;

    background: #ffffff;

    color: #071344;

}



.mp-sim__scenarios {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

}



.mp-sim__scenario {

    padding: 10px 5px;

    border: 0;

    border-radius: 6px;

    background: #e9f4ff;

    color: #071344;

    cursor: pointer;

}



.mp-sim__scenario.is-active {

    background: #0870ff;

    color: #ffffff;

}



/* ==========================================

   9. SLIDERS AND NUMBER INPUTS

========================================== */



.mp-sim__control {

    margin-top: 17px;

}



.mp-sim__control-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 7px;

}



.mp-sim__control-top label {

    flex: 1;

}



.mp-sim__control-top label span {

    color: #0870ff;

}



.mp-sim__control-top input,

.mp-sim__fee-row input {

    width: 116px;

    max-width: 38%;

    padding: 8px;

    border: 1px solid #cfe1fa;

    border-radius: 6px;

    background: #ffffff;

    color: #071344;

    font: inherit;

    text-align: right;

}



.mp-sim input[type="range"] {

    display: block;

    width: 100%;

    margin: 0;

    accent-color: #0870ff;

    cursor: pointer;

}



.mp-sim__limits {

    display: flex;

    justify-content: space-between;

    margin-top: 3px;

    color: #57709d;

    font-size: 12px;

}



.mp-sim__tip {

    margin: 8px 0 0;

    padding: 8px 10px;

    border-radius: 6px;

    background: #eaf6ff;

    color: #6077a4;

    font-size: 12px;

}



/* ==========================================

   10. FEES AND BONUSES

========================================== */



.mp-sim__fees {

    margin-top: 16px;

    padding: 13px;

    border-radius: 8px;

    background: #eaf6ff;

}



.mp-sim__fee-row {

    display: grid;

    grid-template-columns: minmax(0, 1fr) 72px 120px;

    gap: 7px;

    align-items: center;

    margin-top: 6px;

}



.mp-sim__fee-rate {

    padding: 8px;

    border-radius: 5px;

    background: #deedfc;

    text-align: center;

}



.mp-sim__fee-row output {

    padding: 8px;

    border: 1px solid #cfe1fa;

    border-radius: 5px;

    background: #ffffff;

    text-align: right;

}



.mp-sim__fee-row input {

    width: 100%;

    max-width: none;

}



.mp-sim__fees small {

    display: block;

    margin-top: 5px;

    color: #6277a1;

    text-align: right;

}



/* ==========================================

   11. MONTHLY / YEARLY BUTTONS

========================================== */



.mp-sim__period {

    display: grid;

    grid-template-columns: 1fr 1fr;

    overflow: hidden;

    margin-bottom: 15px;

    border: 1px solid #cfe1fa;

    border-radius: 8px;

    background: #ffffff;

}



.mp-sim__period button {

    padding: 12px;

    border: 0;

    background: transparent;

    color: #071344;

    cursor: pointer;

}



.mp-sim__period button.is-active {

    border-radius: 7px;

    background: #0870ff;

    color: #ffffff;

}



/* ==========================================

   12. EARNINGS RESULTS

========================================== */



.mp-sim__subtitle {

    margin: -2px 0 18px;

    color: #6178a4;

}



.mp-sim__result-row {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 12px;

    margin: 11px 0;

}



.mp-sim__result-row strong {

    white-space: nowrap;

    text-align: right;

}



.mp-sim__result-row .is-negative {

    color: #ff2424;

}



.mp-sim__result-row--total {

    padding-top: 13px;

    border-top: 1px solid #cfe1fa;

    font-weight: 800;

}



/* ==========================================

   13. YELLOW COMMISSION CARD

========================================== */



.mp-sim__commission {

    display: grid;

    gap: 3px;

    margin-top: 16px;

    padding: 14px 16px;

    border-radius: 9px;

    background: #f4b600;

}



.mp-sim__commission strong {

    font-size: clamp(28px, 3vw, 40px);

    line-height: 1.15;

    overflow-wrap: anywhere;

}



/* ==========================================

   14. EXTRA RESULTS

========================================== */



.mp-sim__extra {

    display: flex;

    justify-content: space-between;

    gap: 12px;

    margin-top: 7px;

    padding: 9px 12px;

    border-radius: 6px;

    background: #ffffff;

    font-size: 12px;

}



.mp-sim__extra strong {

    text-align: right;

}



.mp-sim__formula {

    margin: 9px 0;

    padding: 9px;

    border-radius: 6px;

    background: #ffffff;

    text-align: center;

    font-size: 12px;

}



/* ==========================================

   15. CTA BUTTON

========================================== */



.mp-sim__cta {

    display: block;

    padding: 13px;

    border-radius: 7px;

    background: #086dff;

    color: #ffffff !important;

    text-align: center;

    text-decoration: none;

}



.mp-sim__cta:hover {

    background: #0057d8;

}



.mp-sim__disclaimer {

    margin: 10px 0 0;

    color: #6277a1;

    font-size: 10px;

}



/* ==========================================

   16. ACCESSIBILITY

========================================== */



.mp-commission__tab:focus-visible,

.mp-sim button:focus-visible,

.mp-sim input:focus-visible,

.mp-sim select:focus-visible,

.mp-sim__cta:focus-visible {

    outline: 3px solid #67a8ff;

    outline-offset: 2px;

}



/* ==========================================

   17. TABLET AND MOBILE

========================================== */



@media (max-width: 800px) {



    .mp-commission__toolbar {

        display: block;

    }



    .mp-commission__tabs {

        grid-template-columns: 1fr;

    }



    .mp-commission__period-label {

        justify-content: flex-end;

        margin-top: 12px;

    }



    .mp-commission__overview,

    .mp-sim {

        grid-template-columns: 1fr;

    }



    /* Player breakdown cards */



    .mp-breakdown-table-wrap {

        overflow: visible;

        border: 0;

    }



    .mp-breakdown-table,

    .mp-breakdown-table tbody {

        display: block;

    }



    .mp-breakdown-table thead,

    .mp-breakdown-table tfoot {

        display: none;

    }



    .mp-breakdown-table tbody tr {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 12px;

        margin-bottom: 10px;

        padding: 16px;

        border: 1px solid #d8e6fa;

        border-radius: 10px;

        background: #f7fbff !important;

    }



    .mp-breakdown-table tbody th {

        grid-column: 1 / -1;

        padding: 0 0 6px;

        border: 0;

    }



    .mp-breakdown-table tbody td {

        display: grid;

        gap: 5px;

        padding: 0;

        border: 0;

        font-weight: 700;

        text-align: left;

        overflow-wrap: anywhere;

    }



    .mp-breakdown-table tbody td::before {

        content: attr(data-label);

        color: #6178a4;

        font-size: 11px;

        font-weight: 400;

    }



    .mp-breakdown-summary {

        grid-template-columns: 1fr 1fr;

    }



    .mp-breakdown-commission {

        grid-column: 1 / -1;

    }



}



/* ==========================================

   18. SMALL MOBILE

========================================== */



@media (max-width: 480px) {



    .mp-commission {

        padding: 25px 12px;

    }



    .mp-commission__title {

        font-size: 25px;

    }



    .mp-commission__panel {

        padding: 12px;

    }



    .mp-commission__player {

        grid-template-columns: 72px 1fr;

    }



    .mp-sim__form,

    .mp-sim__result {

        padding: 12px;

    }



    .mp-sim__heading-row h3 {

        font-size: 19px;

    }



    .mp-sim__fee-row {

        grid-template-columns: minmax(0, 1fr) 52px 94px;

        gap: 4px;

        font-size: 11px;

    }



    .mp-sim__fee-row output,

    .mp-sim__fee-rate {

        padding: 7px 3px;

    }



    .mp-sim__result-row {

        font-size: 12px;

    }



    .mp-sim__commission strong {

        font-size: 30px;

    }



}







/* ==========================================

   MOSTPLAY PARTNERS

   MOBILE COMMISSION TAB DROPDOWN

========================================== */



/* Hide mobile dropdown on desktop */

.mp-commission__mobile-selector {

    display: none;

}



/* ==========================================

   MOBILE VIEW

========================================== */



@media (max-width: 767px) {



    /* Hide the three desktop tab buttons */

    .mp-commission__tabs {

        display: none;

    }



    /* Display dropdown */

    .mp-commission__mobile-selector {

        display: block;

        width: 100%;

    }



    .mp-commission__toolbar {

        display: block;

        width: 100%;

    }



    .mp-commission__mobile-select {

        display: block;

        width: 100%;

        height: 44px;

        padding: 0 42px 0 14px;



        color: #071746;

        background-color: #ffffff;



        border: 1px solid #cfe0ff;

        border-radius: 8px;



        font-family: inherit;

        font-size: 14px;

        font-weight: 500;



        cursor: pointer;

        outline: none;



        appearance: none;

        -webkit-appearance: none;



        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23284eaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

        background-repeat: no-repeat;

        background-position: right 12px center;

        background-size: 18px;

    }



    .mp-commission__mobile-select:focus {

        border-color: #0866f5;

        box-shadow: 0 0 0 3px rgba(8, 102, 245, 0.12);

    }



}





/* ==========================================

   MOSTPLAY PARTNERS

   CUSTOM CURRENCY DROPDOWN

========================================== */



.mp-sim__currency-dropdown {

    position: relative;

    width: 100%;

}



/* Keep the original select for JS compatibility */

.mp-sim__native-select {

    position: absolute !important;

    width: 1px !important;

    height: 1px !important;

    padding: 0 !important;

    margin: 0 !important;

    opacity: 0 !important;

    pointer-events: none !important;

    overflow: hidden !important;

}



/* Dropdown trigger */

.mp-sim__currency-trigger {

    display: flex;

    align-items: center;

    justify-content: space-between;



    width: 100%;

    min-height: 42px;

    padding: 10px 14px;



    background: #ffffff;

    border: 1px solid #cfe1fa;

    border-radius: 7px;



    color: #071344;

    font: inherit;

    text-align: left;



    cursor: pointer;



    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease;

}



.mp-sim__currency-trigger:hover {

    border-color: #0870ff;

}



.mp-sim__currency-trigger:focus-visible,

.mp-sim__currency-trigger[aria-expanded="true"] {

    outline: none;

    border-color: #0870ff;

    box-shadow: 0 0 0 3px rgba(8, 112, 255, 0.15);

}



/* Arrow */

.mp-sim__currency-arrow {

    width: 9px;

    height: 9px;



    border-right: 2px solid #071344;

    border-bottom: 2px solid #071344;



    transform: translateY(-2px) rotate(45deg);



    transition: transform 0.2s ease;

}



.mp-sim__currency-trigger[aria-expanded="true"]

.mp-sim__currency-arrow {

    transform: translateY(2px) rotate(225deg);

}



/* Dropdown options container */

.mp-sim__currency-options {

    position: absolute;

    top: calc(100% + 4px);

    left: 0;

    right: 0;

    z-index: 100;



    padding: 4px;



    background: #ffffff;

    border: 1px solid #cfe1fa;

    border-radius: 7px;



    box-shadow: 0 10px 24px rgba(7, 19, 68, 0.12);

}



.mp-sim__currency-options[hidden] {

    display: none !important;

}



/* Individual currency options */

.mp-sim__currency-option {

    padding: 10px 12px;



    background: #ffffff;

    color: #071344;



    border-radius: 4px;



    cursor: pointer;



    transition:

        background-color 0.2s ease,

        color 0.2s ease;

}



/* Requested hover color */

.mp-sim__currency-option:hover,

.mp-sim__currency-option.is-keyboard-active {

    background-color: #0870ff;

    color: #ffffff;

}



/* Selected currency: no forced blue background */

.mp-sim__currency-option[aria-selected="true"]:not(:hover):not(.is-keyboard-active) {

    background-color: #ffffff;

    color: #071344;

    font-weight: 600;

}



/* Mobile */

@media (max-width: 767px) {

    .mp-sim__currency-trigger {

        min-height: 44px;

    }



    .mp-sim__currency-option {

        padding: 12px;

    }

}



@media (prefers-reduced-motion: reduce) {

    .mp-sim__currency-trigger,

    .mp-sim__currency-arrow,

    .mp-sim__currency-option {

        transition: none;

    }

}





/* ==========================================

   CURRENCY DROPDOWN - HOVER ONLY

========================================== */



/* Normal state for ALL options */

.mp-sim__currency-option,

.mp-sim__currency-option[aria-selected="true"] {

    background-color: #ffffff;

    color: #071344;

    font-weight: 400;



    transition:

        background-color 0.2s ease,

        color 0.2s ease;

}



/* Blue ONLY on hover or keyboard navigation */

.mp-sim__currency-option:hover,

.mp-sim__currency-option.is-keyboard-active {

    background-color: #0870ff;

    color: #ffffff;

}



/* Prevent selected option from staying blue */

.mp-sim__currency-option[aria-selected="true"]:not(:hover):not(.is-keyboard-active) {

    background-color: #ffffff;

    color: #071344;

    font-weight: 400;

}







/* ==========================================

   MOBILE COMMISSION TAB DROPDOWN

========================================== */



@media (max-width: 767px) {



    /* Dropdown container */

    .mp-commission__mobile-dropdown {

        position: relative;

        width: 100%;

        margin-bottom: 15px;

    }



    /* Selected tab trigger */

    .mp-commission__mobile-trigger {

        display: flex;

        align-items: center;

        justify-content: space-between;



        width: 100%;

        min-height: 44px;

        padding: 11px 15px;



        background: #ffffff;

        color: #071344;



        border: 1px solid #cbdfff;

        border-radius: 8px;



        font-size: 14px;

        font-weight: 400;

        cursor: pointer;

    }



    .mp-commission__mobile-trigger:focus-visible {

        outline: 2px solid #0870ff;

        outline-offset: 2px;

    }



    /* Dropdown arrow */

    .mp-commission__mobile-arrow {

        width: 8px;

        height: 8px;



        border-right: 2px solid #071344;

        border-bottom: 2px solid #071344;



        transform: rotate(45deg);

        transition: transform 0.2s ease;

    }



    .mp-commission__mobile-trigger[aria-expanded="true"]

    .mp-commission__mobile-arrow {

        transform: rotate(225deg);

    }



    /* Dropdown options container */

    .mp-commission__mobile-options {

        position: absolute;

        top: calc(100% + 5px);

        left: 0;



        width: 100%;

        padding: 5px;



        background: #ffffff;

        border: 1px solid #cbdfff;

        border-radius: 8px;



        box-shadow: 0 8px 20px rgba(7, 19, 68, 0.12);



        z-index: 100;

    }



    .mp-commission__mobile-options[hidden] {

        display: none;

    }



    /* All options, including selected */

    .mp-commission__mobile-option,

    .mp-commission__mobile-option[aria-selected="true"] {

        display: block;



        width: 100%;

        padding: 11px 12px;



        background: #ffffff;

        color: #071344;



        border: 0;

        border-radius: 5px;



        text-align: left;

        font-size: 14px;

        font-weight: 400;



        cursor: pointer;



        transition:

            background-color 0.2s ease,

            color 0.2s ease;

    }



    /* Blue only while hovered or keyboard-focused */

    .mp-commission__mobile-option:hover,

    .mp-commission__mobile-option:focus-visible {

        background: #0870ff;

        color: #ffffff;

    }



}





/* ==========================================

   COMMISSION TABS

   DESKTOP / MOBILE VISIBILITY FIX

========================================== */



/* Desktop: show normal tabs, hide mobile dropdown */

.mp-commission .mp-commission__tabs {

    display: flex;

}



.mp-commission .mp-commission__mobile-dropdown {

    display: none;

}



/* Mobile: hide normal tabs, show custom dropdown */

@media screen and (max-width: 767px) {



    .mp-commission .mp-commission__tabs {

        display: none;

    }



    .mp-commission .mp-commission__mobile-dropdown {

        display: block;

        width: 100%;

        position: relative;

    }



    .mp-commission .mp-commission__mobile-trigger {

        display: flex;

        align-items: center;

        justify-content: space-between;

        width: 100%;

        padding: 13px 15px;

        background: #ffffff;

        color: #001044;

        border: 1px solid #c9dcff;

        border-radius: 8px;

        font: inherit;

        cursor: pointer;

        text-align: left;

        transition: border-color 0.2s ease;

    }



    .mp-commission .mp-commission__mobile-trigger:focus-visible {

        outline: 2px solid #0870ff;

        outline-offset: 2px;

    }



    .mp-commission .mp-commission__mobile-arrow {

        width: 9px;

        height: 9px;

        border-right: 2px solid #001044;

        border-bottom: 2px solid #001044;

        transform: rotate(45deg);

        transition: transform 0.2s ease;

        margin-right: 4px;

    }



    .mp-commission .mp-commission__mobile-trigger[aria-expanded="true"]

    .mp-commission__mobile-arrow {

        transform: rotate(225deg);

    }



    .mp-commission .mp-commission__mobile-options {

        position: absolute;

        top: calc(100% + 5px);

        left: 0;

        right: 0;

        z-index: 50;

        padding: 5px;

        background: #ffffff;

        border: 1px solid #c9dcff;

        border-radius: 8px;

        box-shadow: 0 8px 24px rgba(0, 16, 68, 0.12);

    }



    .mp-commission .mp-commission__mobile-options[hidden] {

        display: none;

    }



    .mp-commission .mp-commission__mobile-option {

        display: block;

        width: 100%;

        padding: 11px 12px;

        border: none;

        border-radius: 5px;

        background: transparent;

        color: #001044;

        font: inherit;

        text-align: left;

        cursor: pointer;

        transition:

            background-color 0.2s ease,

            color 0.2s ease;

    }



    /* Only hovered/focused option becomes blue */

    .mp-commission .mp-commission__mobile-option:hover,

    .mp-commission .mp-commission__mobile-option:focus-visible {

        background: #0870ff;

        color: #ffffff;

        outline: none;

    }



    /* Selected option stays normal */

    .mp-commission .mp-commission__mobile-option[aria-selected="true"]:not(:hover):not(:focus-visible) {

        background: transparent;

        color: #001044;

    }

}





/* ==========================================

   COMMISSION DESKTOP TABS

   RESTORE ORIGINAL EQUAL-WIDTH LAYOUT

========================================== */



@media screen and (min-width: 768px) {



    .mp-commission .mp-commission__tabs {

        display: flex;

        width: 100%;

        gap: 9px;

    }



    .mp-commission .mp-commission__tab {

        flex: 1 1 0;

        min-width: 0;

        text-align: center;

        white-space: nowrap;

    }



    .mp-commission .mp-commission__mobile-dropdown {

        display: none;

    }



}





/* ==========================================

   OVERVIEW PLAYER PROGRESS ANIMATION

========================================== */





/* ==========================================

   OVERVIEW PROGRESS BAR ANIMATION

========================================== */





/* ==========================================

   OVERVIEW PROGRESS BAR ANIMATION

   Smooth and Lightweight

========================================== */



.mp-commission .mp-commission__fill {

    transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);

}



@media (prefers-reduced-motion: reduce) {

    .mp-commission .mp-commission__fill {

        transition: none;

    }

}







/* ==========================================

   MOSTPLAY PARTNERS

   DESKTOP COMMISSION TABS — PILL DESIGN

========================================== */



@media (min-width: 769px) {



    /* Outer pill with yellow gradient border */

    .mp-commission__tabs {

        display: flex;

        align-items: stretch;

        width: 100%;

        gap: 6px;



        padding: 5px;



        border: 2px solid transparent;

        border-radius: 100px;



        background:

            linear-gradient(#0f45c9, #001956) padding-box,

            linear-gradient(

                120deg,

                #fff7a3 0%,

                #ffdf00 25%,

                #ffb900 50%,

                #fff3a0 75%,

                #d59a00 100%

            ) border-box;



        box-sizing: border-box;

        overflow: hidden;

    }



    /* All three tabs */

    .mp-commission__tabs .mp-commission__tab {

        flex: 1 1 0;

        min-width: 0;



        padding: 17px 12px;



        border: 0;

        border-radius: 100px;



        background: transparent;

        color: #aebccc;



        font-size: 17px;

        font-weight: 500;

        line-height: 1.3;

        text-align: center;



        cursor: pointer;



        transition:

            background-color 0.25s ease,

            color 0.25s ease,

            box-shadow 0.25s ease;

    }



    /* Hover — inactive tabs only */

    .mp-commission__tabs .mp-commission__tab:not(.is-active):hover {

        background: rgba(8, 112, 255, 0.14);

        color: #ffffff;

    }



    /* Active tab — blue pill */

    .mp-commission__tabs .mp-commission__tab.is-active,

    .mp-commission__tabs .mp-commission__tab[aria-selected="true"] {

        background: linear-gradient(

            180deg,

            #0870ff 0%,

            #0055e8 100%

        );



        color: #ffffff;

        box-shadow: 0 3px 12px rgba(0, 85, 232, 0.18);

    }



    /* Keyboard accessibility */

    .mp-commission__tabs .mp-commission__tab:focus-visible {

        outline: 2px solid #ffffff;

        outline-offset: -5px;

    }

}



/* Reduced-motion accessibility */

@media (prefers-reduced-motion: reduce) {

    .mp-commission__tabs .mp-commission__tab {

        transition: none;

    }

}







/* ==========================================

   COMMISSION TABS — COMPACT PILL WIDTH

   Desktop only

========================================== */



@media (min-width: 769px) {



    .mp-commission__tabs {

        width: 100%;

        max-width: 730px;

        margin-left: auto;

        margin-right: auto;

        flex: 0 1 730px;

    }



    .mp-commission__toolbar {

        display: flex;

        justify-content: center;

        width: 100%;

    }



    .mp-commission__tabs .mp-commission__tab {

        flex: 1 1 0;

        min-width: 0;

    }



}







/* Hide the unused percentage box in the bonus row */

.mp-sim__fee-row:has(input[data-sim-number="bonus"])

.mp-sim__fee-percent,

.mp-sim__fee-row:has(input[data-sim-number="bonus"])

.mp-sim__fee-rate {

    visibility: hidden;

}





/* ==========================================

   SIMULATOR INFORMATION ICONS

========================================== */



.mp-sim__info {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 16px;

    height: 16px;

    margin-left: 7px;

    border-radius: 50%;

    background: #0870ff;

    color: #ffffff;

    font-size: 12px;

    font-weight: 700;

    line-height: 1;

    cursor: help;

    vertical-align: middle;

    flex-shrink: 0;

    outline-offset: 3px;

}



/* Tooltip */



.mp-sim__info::after {

    content: attr(data-tooltip);

    position: absolute;

    left: 50%;

    bottom: calc(100% + 10px);

    transform: translate(-50%, 5px);

    width: max-content;

    max-width: min(230px, 75vw);

    padding: 9px 12px;

    border-radius: 7px;

    background: #071c4c;

    color: #ffffff;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.5;

    white-space: normal;

    text-align: left;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition: opacity 0.2s ease,

                transform 0.2s ease,

                visibility 0.2s ease;

    z-index: 30;

}



.mp-sim__info:hover::after,

.mp-sim__info:focus-visible::after {

    opacity: 1;

    visibility: visible;

    transform: translate(-50%, 0);

}







/* ==========================================

   CONSISTENT SIMULATOR INFO ICONS

========================================== */



.mp-sim__control-top .mp-sim__info,

.mp-sim__tip .mp-sim__info,

.mp-sim__fee-row .mp-sim__info {

    display: inline-flex;

    align-items: center;

    justify-content: center;



    width: 16px;

    height: 16px;

    min-width: 16px;



    background: #0870ff;

    color: #ffffff;



    border-radius: 50%;



    font-family: Arial, sans-serif;

    font-size: 11px;

    font-weight: 700;

    font-style: normal;

    line-height: 1;



    vertical-align: middle;

    flex-shrink: 0;

}



/* Icons beside labels */

.mp-sim__control-top .mp-sim__info {

    margin-left: 5px;

}



/* Icons inside instruction boxes */

.mp-sim__tip .mp-sim__info {

    margin-right: 5px;

}



/* Align instruction text */

.mp-sim__tip {

    display: flex;

    align-items: center;

    gap: 3px;

}







/* Commission per player information icon */



.mp-sim__extra .mp-sim__info {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: 5px;

    vertical-align: middle;

}









/* ==========================================

   MOSTPLAY — LOCAL NUMBER INPUT SPACING

   Fix overlap between digits and arrows

   Bengali, Hindi and Nepali only

========================================== */



.mp-commission .mp-local-input-display {

    box-sizing: border-box !important;



    /* Reserve space for native up/down arrows */

    padding-right: 32px !important;



    /* Keep the localized digits right-aligned */

    justify-content: flex-end !important;

    text-align: right !important;



    white-space: nowrap !important;

    pointer-events: none !important;

}



/* Keep number arrows visible and usable */

.mp-commission input.mp-local-input-masked {

    padding-right: 8px !important;

}



/* Smaller inputs on mobile */

@media (max-width: 767px) {

    .mp-commission .mp-local-input-display {

        padding-right: 29px !important;

    }

}