/* ==== BASE LAYOUT ==== */
#profile_mainblock .center {
    margin-top: 84px;
}

.profile_dashboard {
    display: flex;
    justify-content: center;
    color: #fff;
    font-family: "Inter", sans-serif;
}

.profile_container {
    display: grid;
    /* Adjust ratio: smaller left (45%) / larger right (55%) */
    grid-template-columns: 1fr 0.8fr;
    gap: 2rem;
    width: 100%;
    max-width: 1440px;
    align-items: start;
}

.profile_left {
    padding: 0 24px;
    border-radius: 16px;
    border: 1px solid rgba(234, 236, 239, 0.08);
    background: var(--Graphite-Gray, #1e2329);
}

/* ==== CARDS ==== */
.profile_card {
    padding: 1.5rem 0;
}

.profile_section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ==== LEFT SIDE ==== */
.profile_header {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile_user {
    padding: 24px 0;
    border-bottom: 1px solid rgba(234, 236, 239, 0.08);
}

.profile_user_info {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 4px;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    text-transform: capitalize;
}

.profile_user_header {
    display: flex;
    align-items: center;
    gap: 24px;
    justify-content: start;
}

.profile_avatar {
    width: 120px;
    height: 120px;
    aspect-ratio: 1/1;
    border-radius: 100px;
    object-fit: cover;
}

.profile_userinfo p {
    margin: 0.2rem 0;
    color: #a1a1aa;
}

.profile_email,
.profile_username {
    color: var(--Muted-Gray, #8b949e);
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 140% */
    display: flex;
    align-items: center;
    gap: 4px;
}

.profile_name {
    color: var(--Silver-White, #eaecef);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
}

.profile_btn_outline {
    display: flex;
    height: 32px;
    padding: 0 12px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 32px;
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.04) 100%
        ),
        #1e2329;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px #1e2329,
        0 0 1px 1.5px rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
    color: var(--Silver-White, #eaecef);
    font-family: Montserrat;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 150% */
    margin-top: 23px;
    transition: all 0.3s ease;
}

.profile_btn_outline:hover {
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.08) 100%
        ),
        #1e2329;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.08),
        0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px #1e2329,
        0 0 1px 1.5px rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.3);
    transform: translateY(-1px);
}

/* ==== BETS ==== */
.profile_stats {
    padding: 24px 0;
    border-bottom: 1px solid rgba(234, 236, 239, 0.08);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile_stats_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.profile_stat {
    display: flex;
    padding: 16px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: -26px;
    flex: 1 0 0;
    border-radius: 16px;
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.04) 100%
        ),
        #1e2329;
}

.profile_stat_value {
    cursor: pointer;
    outline: none;
    color: white !important;
    text-decoration: none !important;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.profile_stat_icon {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background: var(--Crimson-Pulse, #ff3358);
}

.profile_stat_label {
    color: var(--Muted-Gray, #8b949e);
    text-align: center;
    font-family: Inter;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 180% */
}

.profile_stat_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.profile_stat_footer div {
    color: var(--Muted-Gray, #8b949e);
    text-align: center;
    font-family: Inter;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 180% */
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    flex-direction: column;
}

.profile_bets {
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-top: 1rem;
}

.profile_bet-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
}

.profile_red {
    color: #ef4444;
}

.profile_substats {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #a1a1aa;
}

/* ==== REFERRAL ==== */
.profile_right {
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    border-radius: 16px;
    border: 1px solid rgba(234, 236, 239, 0.08);
    background: var(--Graphite-Gray, #1e2329);
}

.profile_notifications {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 16px;
    align-self: stretch;
    border-bottom: 1px solid rgba(234, 236, 239, 0.08);
}

.profile_section_title {
    color: var(--Silver-White, #eaecef);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: capitalize;
}

.profile_switch_group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
}

.profile_switch_group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    align-self: stretch;
    width: 100%;
    overflow: hidden;
    color: var(--Silver-White, #eaecef);
    text-overflow: ellipsis;
    font-family: Montserrat;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 160% */
    text-transform: capitalize;
}

.checkbox-wrapper-2 .ikxBAC {
    appearance: none;
    background-color: #dfe1e4;
    border-radius: 72px;
    border-style: none;
    flex-shrink: 0;
    height: 20px;
    margin: 0;
    position: relative;
    width: 30px;
}

.checkbox-wrapper-2 .ikxBAC::before {
    bottom: -6px;
    content: "";
    left: -6px;
    position: absolute;
    right: -6px;
    top: -6px;
}

.checkbox-wrapper-2 .ikxBAC,
.checkbox-wrapper-2 .ikxBAC::after {
    transition: all 100ms ease-out;
}

.checkbox-wrapper-2 .ikxBAC::after {
    background-color: #fff;
    border-radius: 50%;
    content: "";
    height: 14px;
    left: 3px;
    position: absolute;
    top: 3px;
    width: 14px;
}

.checkbox-wrapper-2 input[type="checkbox"] {
    cursor: default;
}

.checkbox-wrapper-2 .ikxBAC:hover {
    background-color: #c9cbcd;
    transition-duration: 0s;
}

.checkbox-wrapper-2 .ikxBAC:checked {
    background-color: #6e79d6;
}

.checkbox-wrapper-2 .ikxBAC:checked::after {
    background-color: #fff;
    left: 13px;
}

.checkbox-wrapper-2 :focus:not(.focus-visible) {
    outline: 0;
}

.checkbox-wrapper-2 .ikxBAC:checked:hover {
    background-color: #535db3;
}

.profile_delivery {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 16px;
    align-self: stretch;
}

.profile_referral {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile_referral_title {
    color: var(--Silver-White, #eaecef);
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    text-transform: capitalize;
}

.profile_referral_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: center;
}

.profile_ref_item {
    display: flex;
    padding: 16px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: -26px;
    flex: 1 0 0;
    border-radius: 16px;
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.04) 100%
        ),
        #1e2329;
}

.profile_ref_label {
    color: var(--Muted-Gray, #8b949e);
    text-align: center;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 180% */
}

.profile_ref_input_group {
    display: flex;
    height: 74px;
    padding: 8px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border-radius: 16px;
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.04) 100%
        ),
        #1e2329;
}

.profile_ref_input {
    min-width: 100% !important;

    display: flex;
    padding: 7px 8px;
    justify-content: center;
    text-align: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 9px;
    outline: none;
    border: none !important;
    background: var(--Graphite-Gray, #1e2329);
    overflow: hidden;
    color: var(--Muted-Gray, #8b949e) !important;
    text-overflow: ellipsis !important;
    font-family: Montserrat;
    font-size: 12px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 150% */
    text-transform: capitalize;
}

.profile_input {
    flex: 1;
    padding: 0.6rem;
    border-radius: 0.5rem;
    border: none;
    background: #0f0f10;
    color: #ccc;
    font-size: 0.9rem;
}

.profile_btn_primary {
    margin-top: 24px !important;
    display: flex;
    height: 32px;
    padding: 0 16px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    align-self: stretch;
    border-radius: 32px;
    background: linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.04) 100%
        ),
        #1e2329 !important;
    box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px #1e2329,
        0 0 1px 1.5px rgba(0, 0, 0, 0.24), 0 2px 2px 0 rgba(0, 0, 0, 0.24) !important;
    color: var(--Silver-White, #eaecef) !important;
    font-family: Montserrat;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 16px; /* 160% */
    text-transform: capitalize;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
        background: var(--Binance-Yellow, #f0890b) !important;
        color: var(--Silver-White, #eaecef) !important;
    }
}

.profile_btn_copy {
    color: var(--Binance-Yellow, #f0890b);
    text-align: center;
    font-family: Inter;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 140% */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    &:hover {
        color: var(--Binance-Yellow, #f0890b);
        text-align: center;
        font-family: Inter;
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: 14px; /* 140% */
    }
}

.profile_btn-primary:hover {
    background-color: #1e4fd3;
}

.profile_btn-primary.wide {
    width: 100%;
    margin-top: 1rem;
}

/* ==== RIGHT SIDE ==== */
.profile_toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.profile_toggle-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    color: #ddd;
}

/* ==== FORM ==== */
.profile_form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--Muted-Gray, #8b949e);
    font-family: Montserrat;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px; /* 150% */
}

.profile_form input {
    font-size: 15px !important;
    min-width: 100% !important;
    display: flex;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 32px;
    border: 1px solid var(--Graphite-Gray, #1e2329);
    background: var(--Night-Black, #0b0e11);
}

.profile_form_row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.profile_form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.profile_form-group label {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* ==== RESPONSIVE ==== */
@media (max-width: 1024px) {
    .profile_container {
        grid-template-columns: 1fr;
    }

    .profile_referral_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet */
@media (max-width: 768px) {
    .profile_container {
        gap: 1rem;
        padding: 0 1rem;
    }

    .profile_left,
    .profile_right {
        padding: 16px;
    }

    .profile_avatar {
        width: 100px;
        height: 100px;
    }

    .profile_name {
        font-size: 14px;
        line-height: 20px;
    }

    .profile_email,
    .profile_username {
        font-size: 14px;
        line-height: 12px;
    }

    .profile_section_title,
    .profile_referral_title {
        font-size: 14px;
        line-height: 20px;
    }

    .profile_stats_grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .profile_stat {
        padding: 12px;
    }

    .profile_referral_grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .profile_ref_item {
        padding: 12px;
    }

    .profile_form_row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .profile_right {
        gap: 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .profile_dashboard {
        padding: 0 0.5rem;
    }

    .profile_container {
        gap: 0.75rem;
        padding: 0;
    }

    .profile_left,
    .profile_right {
        padding: 12px;
    }

    .profile_user_header {
        flex-direction: row;
        text-align: center;
        gap: 12px;
    }

    .profile_avatar {
        width: 100px;
        height: 100px;
    }

    .profile_userinfo {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .profile_name {
        font-size: 14px;
        line-height: 18px;
    }

    .profile_email,
    .profile_username {
        font-size: 14px;
        justify-content: center;
    }

    .profile_btn_outline {
        width: 100%;
        height: 36px;
        margin-top: 12px;
        font-size: 11px;
    }

    .profile_section_title,
    .profile_referral_title {
        font-size: 13px;
        line-height: 18px;
    }

    .profile_stats {
        padding: 16px 0;
        gap: 12px;
    }

    .profile_stats_grid {
        gap: 8px;
    }

    .profile_stat {
        padding: 10px;
    }

    .profile_stat_label,
    .profile_ref_label {
        font-size: 12px;
        line-height: 14px;
    }

    .profile_stat_footer {
        gap: 8px;
    }

    .profile_stat_footer div {
        font-size: 12px;
        line-height: 14px;
    }

    .profile_notifications {
        gap: 12px;
    }

    .profile_switch_group {
        gap: 6px;
    }

    .profile_switch_group label {
        font-size: 9px;
        line-height: 14px;
    }

    .profile_delivery {
        gap: 12px;
    }

    .profile_referral {
        gap: 12px;
    }

    .profile_referral_grid {
        gap: 8px;
    }

    .profile_ref_item {
        padding: 10px;
    }

    .profile_ref_input_group {
        height: auto;
        min-height: 64px;
        padding: 6px;
        gap: 6px;
    }

    .profile_ref_input {
        font-size: 11px !important;
        padding: 6px;
        line-height: 16px;
    }

    .profile_btn_primary {
        margin-top: 16px;
        height: 36px;
        font-size: 11px;
    }

    .profile_btn_copy {
        font-size: 9px;
        line-height: 12px;
    }

    .profile_form {
        font-size: 11px;
        gap: 6px;
    }

    .profile_form input {
        padding: 8px 10px;
        font-size: 13px;
    }

    .profile_form_row {
        gap: 0.5rem;
    }

    .checkbox-wrapper-2 .ikxBAC {
        height: 18px;
        width: 26px;
    }

    .checkbox-wrapper-2 .ikxBAC::after {
        height: 12px;
        width: 12px;
    }

    .checkbox-wrapper-2 .ikxBAC:checked::after {
        left: 11px;
    }

    .profile_right {
        padding: 16px 12px;
        gap: 16px;
    }
}

/* Extra small mobile */
@media (max-width: 360px) {
    .profile_dashboard {
        padding: 0 0.25rem;
    }

    .profile_left,
    .profile_right {
        padding: 10px;
    }

    .profile_avatar {
        width: 90px;
        height: 90px;
    }

    .profile_name {
        font-size: 14px;
        line-height: 16px;
    }

    .profile_email,
    .profile_username {
        font-size: 12px;
        line-height: 11px;
    }

    .profile_section_title,
    .profile_referral_title {
        font-size: 12px;
        line-height: 16px;
    }

    .profile_stat,
    .profile_ref_item {
        padding: 8px;
    }

    .profile_btn_outline,
    .profile_btn_primary {
        height: 32px;
        font-size: 13px;
        padding: 0 10px;
    }

    .profile_form input {
        padding: 6px 8px;
        font-size: 13px;
    }
}