@charset "UTF-8";
/*
Trazeall - Midone Admin Template Style
------------------------------------------------------------------
Based on Midone Admin Template Design System
Color Palette: Slate neutrals + Blue-800 accent
Sidebar: Light theme (bg-white)
-------------------------------------------------------------------*/

/********************************************************************************************* 
CSS Variables - Midone Design System
*********************************************************************************************/
:root {
    /* Primary Colors */
    --primary: #1E40AF;
    --primary-hover: #1E3A8A;
    --primary-light: rgba(30, 64, 175, 0.2);
    
    /* Background Colors */
    --bg-main: #F1F5F9;
    --bg-card: #FFFFFF;
    --bg-sidebar: #FFFFFF;
    
    /* Typography Colors */
    --text-heading: #1E293B;
    --text-body: #475569;
    --text-muted: #94A3B8;
    --text-disabled: #CBD5E1;
    
    /* Border Colors */
    --border-default: #E2E8F0;
    --border-subtle: #F1F5F9;
    
    /* Semantic Colors */
    --success: #10B981;
    --success-light: rgba(16, 185, 129, 0.15);
    --warning: #F59E0B;
    --warning-light: rgba(245, 158, 11, 0.15);
    --danger: #EF4444;
    --danger-light: rgba(239, 68, 68, 0.15);
    --info: #0EA5E9;
    --info-light: rgba(14, 165, 233, 0.15);
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition: all 0.2s ease-in-out;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;
    
    /* Spacing */
    --sidebar-width: 250px;
    --sidebar-collapsed: 70px;
    --header-height: 64px;
    
    /* Legacy support - keeping for backward compatibility */
    --main-color: #1E40AF;
    --main-color-dark: #1E3A8A;
    --body-color: #475569;
    --heading-color: #1E293B;
}

/********************************************************************************************* 
1. Base Styles
*********************************************************************************************/
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    background-color: var(--bg-main);
    color: var(--text-body);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    vertical-align: middle;
    max-width: 100%;
}

a, a:hover, a:focus {
    text-decoration: none;
    cursor: pointer;
    color: var(--primary);
    transition: var(--transition);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-heading);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

p {
    margin: 0;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.rp_hide {
    display: none !important;
}

/********************************************************************************************* 
Loader Styles
*********************************************************************************************/
.rp_loader_wrapper {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(241, 245, 249, 0.8);
    backdrop-filter: blur(4px);
    transition: var(--transition);
}

.rp_loading .rp_loader_wrapper {
    opacity: 1;
    visibility: visible;
}

.rp_loader_wrapper > .rp_loader_inner {
    background-color: var(--bg-card);
    border-radius: var(--radius-full);
    padding: 12px 32px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.9);
    transition: var(--transition);
}

.rp_loading .rp_loader_wrapper > .rp_loader_inner {
    opacity: 1;
    transform: scale(1);
}

.rp_loader_wrapper > .rp_loader_inner p {
    margin: 0 0 0 12px;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 500;
}

.rp_loading .rp_main_wrapper > .rp_header_wrapper,
.rp_loading .rp_main_wrapper > .rp_sidebar_wrapper,
.rp_loading .rp_main_wrapper > .rp_content_wrapper {
    filter: blur(4px);
}

.rp_spinner {
    animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(270deg); }
}

.path {
    stroke-dasharray: 75;
    stroke-dashoffset: 0;
    transform-origin: center;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@keyframes colors {
    0% { stroke: var(--primary); }
    25% { stroke: var(--success); }
    50% { stroke: var(--danger); }
    75% { stroke: var(--warning); }
    100% { stroke: var(--info); }
}

@keyframes dash {
    0% { stroke-dashoffset: 75; }
    50% { stroke-dashoffset: 9; transform: rotate(135deg); }
    100% { stroke-dashoffset: 75; transform: rotate(450deg); }
}

/********************************************************************************************* 
Content Wrapper
*********************************************************************************************/
.rp_content_wrapper {
    margin-left: var(--sidebar-width);
    padding: 24px 32px;
    padding-top: calc(var(--header-height) + 24px);
    min-height: 100vh;
    transition: var(--transition);
}

/********************************************************************************************* 
2. Authentication Pages
*********************************************************************************************/
.rp_auth_body > .rp_main_wrapper {
    position: fixed;
    inset: 0;
    overflow: auto;
}

.rp_auth_wrapper {
    position: fixed;
    inset: 0;
    overflow: auto;
    background-color: var(--bg-main);
    text-align: center;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rp_auth_wrapper > .rp_auth_inner {
    text-align: left;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper {
    display: flex;
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_img {
    flex: 1;
    background: linear-gradient(135deg, #1E40AF 0%, #3B82F6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_img > img {
    max-width: 100%;
    max-height: 400px;
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_content {
    flex: 1;
    padding: 48px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_content .rp_auth_heading {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_content .rp_auth_sub_heading {
    font-size: 14px;
    margin-bottom: 32px;
    color: var(--text-muted);
    line-height: 1.6;
}

.rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_content .rp_auth_sub_heading > span {
    color: var(--primary);
    font-weight: 600;
}

.rp_auth_input_list {
    background-color: var(--bg-card);
    margin-bottom: 20px;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rp_auth_input_list > .rp_auth_input {
    position: relative;
}

.rp_auth_input_list > .rp_auth_input > input {
    border: 1px solid var(--border-default);
    padding: 16px 16px 16px 48px;
    height: 56px;
    color: var(--text-heading);
    font-size: 14px;
    width: 100%;
    outline: none;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    transition: var(--transition);
    background-color: var(--bg-card);
}

.rp_auth_input_list > .rp_auth_input:last-child > input {
    margin-bottom: 0;
}

.rp_auth_input_list > .rp_auth_input > input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.rp_auth_input_list > .rp_auth_input > input::placeholder {
    color: var(--text-muted);
}

.rp_auth_input_list > .rp_auth_input > .rp_auth_input_placeholder {
    position: absolute;
    color: var(--text-muted);
    display: block;
    top: 18px;
    left: 48px;
    pointer-events: none;
    transition: var(--transition);
    font-size: 14px;
}

.rp_auth_input_list > .rp_auth_input.hasvalue > input {
    padding: 24px 16px 8px 48px;
}

.rp_auth_input_list > .rp_auth_input.hasvalue > .rp_auth_input_placeholder {
    font-size: 11px;
    top: 8px;
    color: var(--primary);
    font-weight: 500;
}

.rp_auth_input_list > .rp_auth_input > .rp_input_icon {
    position: absolute;
    top: 20px;
    left: 16px;
}

.rp_auth_input_list > .rp_auth_input > .rp_input_icon svg path {
    fill: var(--text-muted);
}

.rp_forgot_remember {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

.rp_forgot_remember > div {
    flex: 1;
}

.rp_forgot_remember .rp_forgot {
    text-align: right;
}

.rp_forgot_remember .rp_forgot > a {
    color: var(--text-muted);
    font-size: 13px;
}

.rp_forgot_remember .rp_forgot > a:hover {
    color: var(--primary);
}

.rp_btn.rp_auth_btn {
    font-size: 14px;
    padding: 16px 24px;
    margin-bottom: 24px;
    width: 100%;
}

.rp_auth_footer {
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
}

.rp_auth_footer a {
    color: var(--primary);
    font-weight: 600;
}

/********************************************************************************************* 
3. Sidebar - Midone Light Theme with Icons
*********************************************************************************************/
.rp_sidebar_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    z-index: 1000;
    border-right: 1px solid var(--border-default);
    transition: var(--transition);
}

.rp_sidebar_wrapper > .rp_logo {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
}

.rp_sidebar_wrapper > .rp_logo > a {
    display: block;
}

.rp_sidebar_wrapper > .rp_logo > a > img {
    height: 32px;
    filter: none;
}

.rp_sidebar_close {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.rp_sidebar_close:hover {
    background-color: var(--bg-main);
    color: var(--text-heading);
}

.rp_sidebar_inner {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding: 12px;
}

.rp_sidebar_inner::-webkit-scrollbar {
    width: 4px;
}

.rp_sidebar_inner::-webkit-scrollbar-track {
    background: transparent;
}

.rp_sidebar_inner::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}

.rp_navbar {
    margin: 8px 0;
}

.rp_navbar > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rp_navbar > ul > li {
    display: block;
    margin-bottom: 4px;
}

.rp_navbar > ul > li > a {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: var(--transition);
    gap: 12px;
}

.rp_navbar > ul > li > a > .rp_icon,
.rp_navbar > ul > li > a > .nav_icon {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    flex-shrink: 0;
}

.rp_navbar > ul > li > a > .nav_icon svg {
    width: 20px;
    height: 20px;
}

.rp_navbar > ul > li > a:hover {
    background-color: var(--bg-main);
    color: var(--text-heading);
}

.rp_navbar > ul > li > a:hover > .rp_icon,
.rp_navbar > ul > li > a:hover > .nav_icon {
    opacity: 1;
}

/* Active state - Midone style with blue accent */
.rp_navbar > ul > li > a.active {
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.rp_navbar > ul > li > a.active > .rp_icon,
.rp_navbar > ul > li > a.active > .nav_icon {
    opacity: 1;
}

/* Nav Item Icon Colors */
.rp_navbar > ul > li > a .nav_icon svg {
    stroke: currentColor;
}

/* Override all nav item colors to use consistent Midone blue */
.rp_navbar > ul > li > a.active.nav_campaigns,
.rp_navbar > ul > li > a.nav_campaigns:hover,
.rp_navbar > ul > li > a.active.nav_automation,
.rp_navbar > ul > li > a.nav_automation:hover,
.rp_navbar > ul > li > a.active.nav_analytics,
.rp_navbar > ul > li > a.nav_analytics:hover,
.rp_navbar > ul > li > a.active.nav_integration,
.rp_navbar > ul > li > a.nav_integration:hover,
.rp_navbar > ul > li > a.active.nav_members,
.rp_navbar > ul > li > a.nav_members:hover,
.rp_navbar > ul > li > a.active.nav_errorlogs,
.rp_navbar > ul > li > a.nav_errorlogs:hover,
.rp_navbar > ul > li > a.active.nav_settings,
.rp_navbar > ul > li > a.nav_settings:hover {
    background-color: var(--primary-light);
    color: var(--primary);
}

/********************************************************************************************* 
4. Header - Midone Style
*********************************************************************************************/
.rp_header_wrapper {
    position: fixed;
    right: 0;
    top: 0;
    left: var(--sidebar-width);
    height: var(--header-height);
    background-color: var(--bg-card);
    display: flex;
    align-items: center;
    z-index: 999;
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.rp_sidebar_toggle {
    flex: none;
    width: 40px;
    height: 40px;
    margin-left: 16px;
    border-radius: var(--radius-md);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: var(--bg-main);
    transition: var(--transition);
}

.rp_sidebar_toggle:hover {
    background: var(--primary);
}

.rp_sidebar_toggle > span {
    width: 16px;
    height: 2px;
    background-color: var(--text-body);
    margin: 2px 0;
    border-radius: 2px;
    transition: var(--transition);
}

.rp_sidebar_toggle:hover > span {
    background-color: white;
}

.rp_sidebar_toggle > span:nth-child(2) { width: 12px; }
.rp_sidebar_toggle > span:nth-child(3) { width: 14px; }

.rp_header_wrapper > .rp_header_left {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 24px;
}

.rp_header_wrapper > .rp_header_left > .rp_header_title {
    flex: 1;
}

.rp_header_wrapper > .rp_header_left > .rp_header_title > h3 {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: var(--text-heading);
}

.rp_header_wrapper > .rp_header_right {
    flex: none;
    padding-right: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Header Action (Profile, Notifications) - Moved to Right */
.rp_header_action {
    display: flex;
    align-items: center;
}

.rp_header_action > .rp_headerAction_icon {
    margin-left: 16px;
    display: inline-block;
    vertical-align: middle;
}

/* Profile Dropdown */
.rp_profile_wrapper > .rp_profile_avatar {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.rp_profile_wrapper > .rp_profile_avatar:after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    margin-left: 8px;
}

.rp_profile_wrapper > .rp_profile_avatar > .rp_profile_initials {
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    text-transform: uppercase;
    color: white;
    background-color: var(--primary);
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--radius-full);
    display: inline-block;
    vertical-align: middle;
}

.rp_profile_wrapper > .rp_profile_avatar > .rp_profile_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.rp_header_wrapper > .rp_header_right {
    flex: none;
    padding-right: 24px;
}

/* Floating Action Button - Add Campaign */
.rp_fab_wrapper {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 998;
}

.rp_fab {
    width: 56px;
    height: 56px;
    background-color: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    outline: none;
}

.rp_fab:hover {
    background-color: var(--primary-hover);
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}

.rp_fab > .rp_icon {
    width: 24px;
    height: 24px;
}

.rp_fab_tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--text-heading);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.rp_fab_wrapper:hover .rp_fab_tooltip {
    opacity: 1;
    visibility: visible;
}

/* Legacy Add Campaign Button in Header (now hidden by default, visible on mobile) */
.rp_createCamp_btn {
    padding: 10px 20px;
    background-color: var(--primary);
    color: white;
    outline: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.rp_createCamp_btn:hover, .rp_createCamp_btn:focus {
    color: white;
    background-color: var(--primary-hover);
}

.rp_createCamp_btn > .rp_icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
}

/********************************************************************************************* 
5. Dashboard / Campaign List
*********************************************************************************************/
/* No Campaign State */
.rp_campaign_nodata {
    text-align: center;
    padding: 80px 24px;
}

.rp_campaign_nodata > .rp_icon {
    width: 160px;
    height: 160px;
    display: inline-block;
    margin-bottom: 24px;
    opacity: 0.6;
}

.rp_campaign_nodata > h1 {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.rp_campaign_nodata > p {
    font-size: 14px;
    margin-bottom: 24px;
    color: var(--text-muted);
}

.rp_campaign_nodata > .rp_createCamp_btn {
    display: inline-flex;
    padding: 14px 28px;
}

/* Dashboard Filter */
/* Original filter - now wrapped */ .rp_dashboard_filter_original_deprecated {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 14px 20px;
    background-color: var(--bg-card);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    border: 1px solid var(--border-default);
}

.rp_dashboard_filter .rp_filter_icon {
    margin-right: 12px;
}

.rp_dashboard_filter .rp_filter_icon > span {
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--text-muted);
    margin: 0 auto 2px;
    display: block;
}

.rp_dashboard_filter .rp_filter_icon > span:nth-child(2) { width: 10px; }
.rp_dashboard_filter .rp_filter_icon > span:nth-child(3) { width: 6px; margin-bottom: 0; }

.rp_dashboard_filter > p {
    margin: 0 12px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.rp_dashboard_filter .rp_input_wrapper {
    margin-bottom: 0;
}

.rp_dashboard_filter .rp_input_wrapper > .rp_input {
    height: auto;
    background-color: transparent;
    border: none;
    font-weight: 600;
    padding: 0;
    color: var(--text-heading);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.rp_nocampaign_filter {
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--text-muted);
    display: none;
}

.rp_nocampaign_filter.active {
    display: block;
}

/* Campaign Cards */
.rp_campaign_list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.rp_campaign_list > .rp_campaign {
    width: 25%;
    padding: 0 12px;
    margin-bottom: 24px;
}

@media(max-width:1600px) { .rp_campaign_list > .rp_campaign { width: 33.333%; } }
@media(max-width:1200px) { .rp_campaign_list > .rp_campaign { width: 50%; } }
@media(max-width:768px) { .rp_campaign_list > .rp_campaign { width: 100%; } }

.rp_campaign_list > .rp_campaign > .rp_campaign_inner {
    background-color: var(--bg-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    border-radius: 14px;
    border: 1px solid var(--border-default);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner:hover {
    box-shadow: 0 10px 25px rgba(30, 64, 175, 0.08), 0 4px 10px rgba(0,0,0,0.04);
    border-color: var(--primary-light);
    transform: translateY(-3px);
}

/* Campaign Type Colors - Gradient Top Border */
.rp_campaign_list > .rp_campaign.contest > .rp_campaign_inner { border-top: 3px solid transparent; background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(135deg, #f59e0b, #ef4444); background-origin: border-box; background-clip: padding-box, border-box; border-top: 3px solid var(--warning); }
.rp_campaign_list > .rp_campaign.giveaway > .rp_campaign_inner { border-top: 3px solid #EC4899; }
.rp_campaign_list > .rp_campaign.refer_friends > .rp_campaign_inner { border-top: 3px solid #8B5CF6; }

/* Campaign Dropdown */
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_dropdown {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_dropdown > .rp_camp_dd_icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: rgba(241, 245, 249, 0.6);
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_dropdown > .rp_camp_dd_icon:hover {
    background-color: var(--bg-main);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_dropdown > .rp_camp_dd_icon > span {
    width: 4px;
    height: 4px;
    display: inline-flex;
    background-color: var(--text-muted);
    border-radius: var(--radius-full);
    margin: 0 1px;
}

/* Campaign Body */
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body {
    padding: 28px 24px 24px;
    text-align: center;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-heading);
    letter-spacing: -0.2px;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_type {
    min-height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_type > .rp_camp_type_icon {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

/* Campaign Type Badge Colors */
.rp_campaign_list > .rp_campaign.contest > .rp_campaign_inner > .rp_camp_body > .rp_camp_type {
    color: #b45309;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.rp_campaign_list > .rp_campaign.giveaway > .rp_campaign_inner > .rp_camp_body > .rp_camp_type {
    color: #be185d;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(236, 72, 153, 0.06));
    border: 1px solid rgba(236, 72, 153, 0.15);
}

.rp_campaign_list > .rp_campaign.refer_friends > .rp_campaign_inner > .rp_camp_body > .rp_camp_type {
    color: #6d28d9;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.06));
    border: 1px solid rgba(139, 92, 246, 0.15);
}

/* Campaign Status */
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_status {
    color: var(--text-body);
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_status > span {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    margin-right: 6px;
    display: inline-block;
    transform: translateY(-1px);
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_status > span.neverend { background-color: var(--success); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_status > span.endingin { background-color: var(--warning); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); animation: pulse-dot 2s infinite; }
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_status > span.closed { background-color: var(--danger); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.08); }
}

/* Copy Script Button */
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_copyscript {
    color: var(--text-body);
    border: 1.5px solid var(--border-default);
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_copyscript:hover {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.04), rgba(30, 64, 175, 0.08));
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(30, 64, 175, 0.1);
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_body > .rp_camp_copyscript > .rp_icon {
    width: 14px;
    height: 14px;
    margin-left: 8px;
}

/* Campaign Footer */
.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_footer {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_footer > a {
    flex: 1;
    color: var(--text-body);
    font-weight: 600;
    font-size: 12px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-right: 1px solid var(--border-default);
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_footer > a:last-child {
    border-right: none;
}

.rp_campaign_list > .rp_campaign > .rp_campaign_inner > .rp_camp_footer > a:hover {
    background-color: var(--bg-card);
    color: var(--primary);
}

/********************************************************************************************* 
6. Buttons - Midone Style
*********************************************************************************************/
.rp_btn {
    display: inline-block;
    background-color: var(--primary);
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    font-weight: 500;
    text-align: center;
    border-radius: var(--radius-md);
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    transition: var(--transition);
}

.rp_btn:hover, .rp_btn:focus {
    color: white;
    background-color: var(--primary-hover);
}

.rp_btn_block {
    width: 100%;
    display: block;
}

.rp_btn_border {
    background-color: var(--bg-card);
    color: var(--text-body);
    border: 1px solid var(--border-default);
}

.rp_btn_border:hover, .rp_btn_border:focus {
    background-color: var(--bg-main);
    color: var(--text-heading);
}

.rp_btn_gray {
    background-color: var(--bg-main);
    color: var(--text-body);
    border: 1px solid var(--border-default);
}

.rp_btn_gray:hover, .rp_btn_gray:focus {
    background-color: var(--border-default);
    color: var(--text-heading);
}

.rp_btn_red {
    background-color: var(--danger);
}

.rp_btn_red:hover, .rp_btn_red:focus {
    background-color: #DC2626;
}

.rp_btn_green {
    background-color: var(--success);
}

.rp_btn_green:hover, .rp_btn_green:focus {
    background-color: #059669;
}

/********************************************************************************************* 
7. Form Inputs - Midone Style
*********************************************************************************************/
.rp_input_wrapper {
    margin-bottom: 20px;
    position: relative;
}

.rp_input_wrapper > label,
.rp_input_label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-body);
    margin-bottom: 6px;
}

.rp_input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    font-size: 14px;
    color: var(--text-heading);
    background-color: var(--bg-card);
    outline: none;
    transition: var(--transition);
}

.rp_input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.rp_input::placeholder {
    color: var(--text-muted);
}

.rp_input:disabled {
    background-color: var(--bg-main);
    color: var(--text-disabled);
    cursor: not-allowed;
}

textarea.rp_input {
    height: auto;
    min-height: 100px;
    resize: vertical;
}

select.rp_input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.rp_input_list_wrapper {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.rp_input_list_wrapper > .rp_input_wrapper {
    flex: 1;
    margin-bottom: 0;
}

/* Input with tooltip */
.rp_tooltip_wrapper {
    display: inline-block;
    position: relative;
    margin-left: 8px;
}

.rp_tooltip_icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--border-default);
    border-radius: var(--radius-full);
    cursor: help;
    font-size: 11px;
    color: var(--text-muted);
}

.rp_tooltip_content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-heading);
    color: white;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 100;
}

.rp_tooltip_wrapper:hover .rp_tooltip_content {
    opacity: 1;
    visibility: visible;
}

/********************************************************************************************* 
8. Cards/Panels - Midone Style
*********************************************************************************************/
.rp_box {
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.rp_box_header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.rp_box_header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
}

.rp_box_body {
    padding: 20px;
}

/********************************************************************************************* 
9. Data Tables - Midone Style
*********************************************************************************************/
.rp_datatable_wrapper {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

.rp_datatable,
.rp_dt_table {
    width: 100%;
    border-collapse: collapse;
}

.rp_datatable thead th,
.rp_dt_table thead th {
    background-color: var(--bg-main);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-default);
}

.rp_datatable tbody td,
.rp_dt_table tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-body);
    font-size: 14px;
}

.rp_datatable tbody tr:hover,
.rp_dt_table tbody tr:hover {
    background-color: var(--bg-main);
}

.rp_datatable tbody tr:last-child td,
.rp_dt_table tbody tr:last-child td {
    border-bottom: none;
}

/* DataTables Plugin Overrides */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    padding: 16px 20px;
}

.dataTables_wrapper .dataTables_filter input {
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    margin-left: 8px;
    outline: none;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-light);
}

.dataTables_wrapper .dataTables_length select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.dataTables_wrapper .dataTables_info {
    padding: 16px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 16px 20px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px;
    margin: 0 2px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default) !important;
    background: var(--bg-card) !important;
    color: var(--text-body) !important;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--bg-main) !important;
    color: var(--text-heading) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--primary) !important;
    color: white !important;
    border-color: var(--primary) !important;
}

/********************************************************************************************* 
10. Dropdowns - Midone Style
*********************************************************************************************/
.rp_dropdown_wrapper {
    position: relative;
    display: inline-block;
}

.rp_dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: var(--transition);
    z-index: 100;
}

.rp_dropdown_wrapper.open > .rp_dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.rp_dropdown_right {
    left: auto;
    right: 0;
}

.rp_dropdown_inner {
    padding: 8px 0;
}

.rp_dropdown_inner ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rp_dropdown_inner ul li a {
    display: block;
    padding: 10px 16px;
    color: var(--text-body);
    font-size: 14px;
    transition: var(--transition);
}

.rp_dropdown_inner ul li a:hover {
    background-color: var(--bg-main);
    color: var(--text-heading);
}

/********************************************************************************************* 
11. Badges - Midone Style
*********************************************************************************************/
.rp_badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
}

.rp_badge_primary { background-color: var(--primary-light); color: var(--primary); }
.rp_badge_success, .rp_badge_active { background-color: var(--success-light); color: var(--success); }
.rp_badge_warning, .rp_badge_pending { background-color: var(--warning-light); color: var(--warning); }
.rp_badge_danger, .rp_badge_inactive { background-color: var(--danger-light); color: var(--danger); }
.rp_badge_info { background-color: var(--info-light); color: var(--info); }
.rp_badge_admin { background-color: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.rp_badge_user { background-color: var(--bg-main); color: var(--text-muted); }
.rp_badge_moderator { background-color: var(--warning-light); color: var(--warning); }

/********************************************************************************************* 
12. Modals/Popups - Base definitions (overridden by modern_ui_system.css)
*********************************************************************************************/
.rp_popup_wrapper {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
    pointer-events: none;
}

.rp_popup_wrapper.active,
.rp_popup_wrapper.rp_popup_open,
body.show_popup .rp_popup_wrapper.rp_popup_open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.rp_popup_close_overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    pointer-events: all;
}

.rp_popup_inner {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    box-shadow:
        0 24px 64px -12px rgba(0, 0, 0, 0.22),
        0 8px 24px -4px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    max-width: 500px;
    width: 100%;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1;
    transform: scale(0.94) translateY(24px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    pointer-events: all;
}

.rp_popup_wrapper.active .rp_popup_inner,
.rp_popup_wrapper.rp_popup_open .rp_popup_inner,
body.show_popup .rp_popup_wrapper.rp_popup_open .rp_popup_inner {
    transform: scale(1) translateY(0);
}

.rp_popup_close_icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 10px;
    background: #f1f5f9;
    border: none;
    transition: all 0.2s ease;
    z-index: 10;
}

.rp_popup_close_icon:hover {
    background: #fee2e2;
    transform: rotate(90deg);
}

.rp_popup_close_icon span {
    width: 14px;
    height: 2px;
    background: #64748b;
    position: absolute;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.rp_popup_close_icon:hover span {
    background: #ef4444;
}

.rp_popup_close_icon span:first-child { transform: rotate(45deg); }
.rp_popup_close_icon span:last-child { transform: rotate(-45deg); }

.rp_popup_heading {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp_popup_heading_icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-light);
}

.rp_popup_heading_icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.rp_popup_heading h3,
.rp_popup_heading_text {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-heading);
    flex: 1;
}

.rp_popup_body {
    padding: 24px;
}

/* Make hidden forms visible in modals */
.rp_popup_body form.d-none {
    display: block !important;
}

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

.rp_popup_body .rp_input_wrapper {
    margin-bottom: 0;
}

.rp_popup_body .rp_input_wrapper label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-body);
    margin-bottom: 6px;
}

.rp_popup_body .rp_input_wrapper p {
    margin-top: 12px;
}

.rp_popup_body .rp_input_wrapper p a {
    color: var(--primary);
    font-size: 13px;
}

/* Delete Popup */
.rp_popup_delete .rp_delete_box {
    padding: 40px 24px;
    text-align: center;
}

.rp_popup_delete .rp_dbox_icon {
    margin-bottom: 20px;
}

.rp_popup_delete .rp_dbox_icon > img,
.rp_popup_delete .rp_dbox_icon > .rp_icon {
    width: 64px;
    height: 64px;
}

.rp_popup_delete .rp_dbox_detail h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-heading);
}

.rp_popup_delete .rp_dbox_detail p {
    color: var(--text-muted);
    margin-bottom: 24px;
    font-size: 14px;
}

.rp_popup_delete .rp_dbox_detail .p_delete {
    color: var(--danger);
    font-weight: 600;
}

.rp_popup_delete .rp_dbox_action {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.rp_popup_delete .rp_dbox_action .rp_btn {
    min-width: 120px;
}

/********************************************************************************************* 
13. Checkbox & Radio - Midone Style
*********************************************************************************************/
.rp_checkbox {
    margin-bottom: 16px;
}

.rp_checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.rp_checkbox label {
    position: relative;
    display: inline-block;
    padding-left: 28px;
    cursor: pointer;
    color: var(--text-body);
    font-size: 14px;
}

.rp_checkbox label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-sm);
    background-color: var(--bg-card);
    transition: var(--transition);
}

.rp_checkbox input[type="checkbox"]:checked + label::before {
    background-color: var(--primary);
    border-color: var(--primary);
}

.rp_checkbox label::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: var(--transition);
}

.rp_checkbox input[type="checkbox"]:checked + label::after {
    opacity: 1;
}

.rp_radio {
    margin-bottom: 12px;
}

.rp_radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.rp_radio label {
    position: relative;
    display: inline-block;
    padding-left: 28px;
    cursor: pointer;
    color: var(--text-body);
    font-size: 14px;
}

.rp_radio label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-full);
    background-color: var(--bg-card);
    transition: var(--transition);
}

.rp_radio input[type="radio"]:checked + label::before {
    border-color: var(--primary);
}

.rp_radio label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: var(--radius-full);
    opacity: 0;
    transition: var(--transition);
}

.rp_radio input[type="radio"]:checked + label::after {
    opacity: 1;
}

/********************************************************************************************* 
14. Switch Toggle - Midone Style
*********************************************************************************************/
.rp_switch {
    position: relative;
    display: inline-block;
}

.rp_switch input {
    position: absolute;
    opacity: 0;
}

.rp_switch label {
    display: block;
    width: 40px;
    height: 22px;
    background-color: var(--border-default);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition);
}

.rp_switch label::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.rp_switch input:checked + label {
    background-color: var(--primary);
}

.rp_switch input:checked + label::after {
    left: 20px;
}

/********************************************************************************************* 
15. Tabs - Midone Style
*********************************************************************************************/
.rp_tab_wrapper {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 24px;
    overflow: hidden;
}

.rp_tab_list {
    border-bottom: 1px solid var(--border-subtle);
}

.rp_tab_list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.rp_tab_list ul li {
    flex: 1;
}

.rp_tab_list ul li a {
    display: block;
    padding: 16px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}

.rp_tab_list ul li a:hover {
    color: var(--text-heading);
    background-color: var(--bg-main);
}

.rp_tab_list ul li.active a {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.rp_tab_content_wrapper {
    padding: 24px;
}

.rp_tab_content {
    display: none;
}

.rp_tab_content.active {
    display: block;
}

/********************************************************************************************* 
16. Analytics Page
*********************************************************************************************/
.rp_analytics_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.rp_analytics_head > .rp_analy_title > h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-heading);
}

.rp_analytics_head > .rp_analy_selectcamp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp_analytics_head > .rp_analy_selectcamp > span {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-body);
}

.rp_analytics_head > .rp_analy_selectcamp > .rp_input_wrapper {
    margin-bottom: 0;
    min-width: 220px;
}

.rp_analytics_graph {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.rp_analytics_graph > .rp_analytics_big {
    flex: 1;
}

.rp_analytics_graph > .rp_analytics_small {
    width: 280px;
    flex: none;
}

.rp_abox {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    padding: 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    position: relative;
    border-top: 3px solid var(--primary);
}

.rp_abox.signup { border-top-color: var(--success); }
.rp_abox.share { border-top-color: var(--warning); }
.rp_abox.referral { border-top-color: #EC4899; }

.rp_abox_title {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
}

.rp_icon_counter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp_icon_counter > .rp_ic_icon > img,
.rp_icon_counter > .rp_ic_icon > svg {
    width: 48px;
    height: 48px;
}

.rp_icon_counter > .rp_ic_content > h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--text-heading);
}

.rp_icon_counter > .rp_ic_content > p {
    font-size: 13px;
    color: var(--text-muted);
}

.rp_icon_counter_list {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
}

.rp_graph_filter_wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.rp_filter_wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rp_filter_wrapper .rp_input_wrapper {
    margin-bottom: 0;
    min-width: 150px;
}

/********************************************************************************************* 
17. Profile Page
*********************************************************************************************/
.rp_profile_wrapper {
    display: flex;
    gap: 24px;
    max-width: 900px;
    align-items: flex-start;
}

.rp_profile_wrapper > .rp_profile_image {
    width: 280px;
    flex: none;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
}

.rp_profile_wrapper > .rp_profile_image > .rp_profile_icon {
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto 16px;
    border-radius: var(--radius-full);
}

.rp_profile_wrapper > .rp_profile_image > .rp_profile_icon .rp_pro_initials {
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: var(--primary);
    color: white;
    font-size: 32px;
    font-weight: 600;
    display: block;
    border-radius: var(--radius-full);
}

.rp_profile_wrapper > .rp_profile_image > .rp_profile_icon img {
    width: 100px;
    height: 100px;
    position: absolute;
    border-radius: var(--radius-full);
    top: 0;
    left: 0;
    object-fit: cover;
}

.rp_profile_wrapper > .rp_profile_image > p {
    margin: 0;
    font-size: 14px;
    color: var(--text-muted);
}

.rp_profile_wrapper > .rp_profile_detail {
    flex: 1;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
}

/********************************************************************************************* 
18. Campaign Creation Steps
*********************************************************************************************/
.rp_process_wrapper {
    margin-bottom: 48px;
}

.rp_process_wrapper > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rp_process_wrapper > ul > li {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 100px;
    padding: 0 16px;
}

.rp_process_wrapper > ul > li::before {
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--border-default);
    position: absolute;
    left: 50%;
    top: 28px;
    z-index: -1;
}

.rp_process_wrapper > ul > li:last-child::before {
    display: none;
}

.rp_process_wrapper > ul > li > .rp_step_number {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted);
    border: 2px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background-color: var(--bg-card);
    transition: var(--transition);
}

.rp_process_wrapper > ul > li > .rp_step_title {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.rp_process_wrapper > ul > li.rp_step_active > .rp_step_number {
    color: var(--primary);
    border-color: var(--primary);
}

.rp_process_wrapper > ul > li.rp_step_active > .rp_step_title {
    color: var(--text-heading);
}

.rp_process_wrapper > ul > li.rp_step_completed > .rp_step_number {
    color: white;
    border-color: var(--primary);
    background-color: var(--primary);
}

.rp_process_wrapper > ul > li.rp_step_completed > .rp_step_title {
    color: var(--primary);
}

.rp_process_wrapper > ul > li.rp_step_completed::before {
    background-color: var(--primary);
}

/* Campaign Type Selection */
.rp_campaign_type {
    margin-bottom: 48px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.rp_campaign_type > .wp_camp_type_item {
    display: inline-flex;
}

.rp_campaign_type > .wp_camp_type_item > input {
    position: absolute;
    left: -999999px;
}

.rp_campaign_type > .wp_camp_type_item > label {
    background-color: var(--bg-card);
    width: 180px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.rp_campaign_type > .wp_camp_type_item > label:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.rp_campaign_type > .wp_camp_type_item > label > img {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
}

.rp_campaign_type > .wp_camp_type_item > label > span {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
}

.rp_campaign_type > .wp_camp_type_item.contest > input:checked ~ label { border-color: var(--warning); background-color: var(--warning-light); }
.rp_campaign_type > .wp_camp_type_item.contest > input:checked ~ label > span { color: var(--warning); }

.rp_campaign_type > .wp_camp_type_item.giveaway > input:checked ~ label { border-color: #EC4899; background-color: rgba(236, 72, 153, 0.1); }
.rp_campaign_type > .wp_camp_type_item.giveaway > input:checked ~ label > span { color: #EC4899; }

.rp_campaign_type > .wp_camp_type_item.refer_friends > input:checked ~ label { border-color: #8B5CF6; background-color: rgba(139, 92, 246, 0.1); }
.rp_campaign_type > .wp_camp_type_item.refer_friends > input:checked ~ label > span { color: #8B5CF6; }

/* Campaign Detail Form */
.rp_camp_detail_form {
    max-width: 700px;
    margin: 0 auto;
}

.rp_camp_detail_form .rp_input_wrapper > .rp_input {
    background-color: var(--bg-card);
}

.rp_step_content_wrapper {
    display: none;
}

.rp_step_content_wrapper#rp_step_1 {
    display: block;
}

.rp_step_heading {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 24px;
    color: var(--text-heading);
}

/********************************************************************************************* 
19. Autoresponders / Integration Page
*********************************************************************************************/
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul {
    list-style: none;
    padding: 0;
    margin: -12px;
    display: flex;
    flex-wrap: wrap;
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li {
    width: 20%;
    padding: 12px;
    position: relative;
}

@media (max-width:1400px) { .rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li { width: 25%; } }
@media (max-width:1024px) { .rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li { width: 33.333%; } }
@media (max-width:768px) { .rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li { width: 50%; } }
@media (max-width:480px) { .rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li { width: 100%; } }

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    font-size: 14px;
    background-color: var(--bg-card);
    text-align: center;
    color: var(--text-body);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition);
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.active > a,
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a:hover {
    opacity: 1;
    border-color: var(--primary);
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a > .icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Individual Autoresponder Icons using SVG backgrounds */
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Aweber > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%234B9CD3'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EAW%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.GetResponse > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%2300BAFF'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EGR%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Mailchimp > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23FFE01B'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='%23241C15' font-size='16' font-weight='bold'%3EMC%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Sendlane > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%231A82E2'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ESL%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.ActiveCampaign > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23356AE6'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EAC%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.ConvertKit > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23FB6970'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ECK%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Drip > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23E3AF00'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EDR%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Hubspot > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23FF7A59'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EHS%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.MailerLite > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%2309C269'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EML%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Sendinblue > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%230092FF'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ESB%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.CampaignMonitor > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23509CF6'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ECM%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.ConstantContact > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23285e8e'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ECC%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Infusionsoft > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%2325a364'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EIS%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.iContact > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%234caf50'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EiC%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Benchmark > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23f15a24'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EBM%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.MarketHero > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%236366f1'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EMH%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Sendloop > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%2300b894'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ESP%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.SendReach > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%23e74c3c'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ESR%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Sendy > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%232ecc71'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3ESD%3C/text%3E%3C/svg%3E");
}

.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a.Verticalresponse > .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='20' fill='%239b59b6'/%3E%3Ctext x='24' y='30' text-anchor='middle' fill='white' font-size='16' font-weight='bold'%3EVR%3C/text%3E%3C/svg%3E");
}

/********************************************************************************************* 
20. Automation Center
*********************************************************************************************/
.rp_automation_nav {
    margin-bottom: 24px;
}

.rp_automation_nav > ul {
    list-style: none;
    padding: 0;
    margin: -8px;
    display: flex;
    flex-wrap: wrap;
}

.rp_automation_nav > ul > li {
    flex: 1;
    min-width: 180px;
    padding: 8px;
}

.rp_automation_nav > ul > li > a {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--transition);
}

.rp_automation_nav > ul > li > a > img {
    margin-right: 12px;
    width: 32px;
    height: 32px;
}

.rp_automation_nav > ul > li > a:hover {
    border-color: var(--primary);
    color: var(--text-heading);
}

.rp_automation_nav > ul > li.active > a {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.rp_automation_form {
    max-width: 900px;
    margin: 0 auto 40px;
}

/********************************************************************************************* 
21. Members Page
*********************************************************************************************/
.rp_members_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.rp_members_title h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.rp_members_title p {
    color: var(--text-muted);
    font-size: 14px;
}

.rp_members_actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.rp_members_actions .rp_btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Stats Grid */
.rp_stats_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.rp_stat_card {
    border-radius: var(--radius-lg);
    padding: 20px;
    color: white;
}

.rp_stat_card h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: inherit;
}

.rp_stat_card p {
    opacity: 0.9;
    font-size: 13px;
}

.stat_card_purple { background: linear-gradient(135deg, var(--primary) 0%, #3B82F6 100%); }
.stat_card_green { background: linear-gradient(135deg, #059669 0%, var(--success) 100%); }
.stat_card_orange { background: linear-gradient(135deg, #D97706 0%, var(--warning) 100%); }
.stat_card_red { background: linear-gradient(135deg, #DC2626 0%, var(--danger) 100%); }

@media (max-width:1200px) { .rp_stats_grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:576px) { .rp_stats_grid { grid-template-columns: 1fr; } }

/* Action Buttons */
.rp_action_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    margin: 0 2px;
    cursor: pointer;
    transition: var(--transition);
}

.rp_action_btn:hover { transform: translateY(-2px); }
.rp_action_btn.edit { background-color: var(--info-light); color: var(--info); }
.rp_action_btn.edit:hover { background-color: var(--info); color: white; }
.rp_action_btn.delete { background-color: var(--danger-light); color: var(--danger); }
.rp_action_btn.delete:hover { background-color: var(--danger); color: white; }
.rp_action_btn.activity { background-color: var(--success-light); color: var(--success); }
.rp_action_btn.activity:hover { background-color: var(--success); color: white; }
.rp_action_btn.toggle { background-color: var(--warning-light); color: var(--warning); }
.rp_action_btn.toggle:hover { background-color: var(--warning); color: white; }

/********************************************************************************************* 
22. Alert Messages / Toast Notifications - Midone Style Enhanced
*********************************************************************************************/
.rp_alert_wrapper {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 380px;
    pointer-events: none;
}

/* Toast Notification Styles - Enhanced */
.rp_toast {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--primary);
    animation: toastSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    pointer-events: auto;
}

.rp_toast::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: linear-gradient(90deg, var(--primary), transparent);
    animation: toastProgress 4s linear forwards;
}

.rp_toast.success { 
    border-left-color: var(--success); 
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16, 185, 129, 0.05) 100%);
}
.rp_toast.success::before { background: linear-gradient(90deg, var(--success), transparent); }

.rp_toast.warning { 
    border-left-color: var(--warning); 
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.05) 100%);
}
.rp_toast.warning::before { background: linear-gradient(90deg, var(--warning), transparent); }

.rp_toast.error { 
    border-left-color: var(--danger); 
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(239, 68, 68, 0.05) 100%);
}
.rp_toast.error::before { background: linear-gradient(90deg, var(--danger), transparent); }

.rp_toast.info { 
    border-left-color: var(--info); 
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(14, 165, 233, 0.05) 100%);
}
.rp_toast.info::before { background: linear-gradient(90deg, var(--info), transparent); }

.rp_toast_icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rp_toast.success .rp_toast_icon { background-color: var(--success); color: white; }
.rp_toast.warning .rp_toast_icon { background-color: var(--warning); color: white; }
.rp_toast.error .rp_toast_icon { background-color: var(--danger); color: white; }
.rp_toast.info .rp_toast_icon { background-color: var(--info); color: white; }

.rp_toast_content {
    flex: 1;
    min-width: 0;
    padding-top: 2px;
}

.rp_toast_title {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-heading);
    margin-bottom: 4px;
}

.rp_toast_message {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.rp_toast_close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    transition: var(--transition);
    flex-shrink: 0;
    background-color: var(--bg-main);
    margin-top: -2px;
}

.rp_toast_close:hover {
    background-color: var(--danger-light);
    color: var(--danger);
    transform: rotate(90deg);
}

@keyframes toastSlideIn {
    from { transform: translateX(120%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(120%); opacity: 0; }
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

.rp_toast.closing {
    animation: toastSlideOut 0.3s ease-in forwards;
}

/* Legacy alert styles (for backwards compatibility) */
.rp_alert {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 16px 20px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 400px;
    border-left: 4px solid var(--primary);
    animation: toastSlideIn 0.3s ease-out;
    pointer-events: auto;
}

.rp_alert.success { border-left-color: var(--success); }
.rp_alert.warning { border-left-color: var(--warning); }
.rp_alert.error { border-left-color: var(--danger); }

.rp_alert_content {
    flex: 1;
}

.rp_alert_title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-heading);
    margin-bottom: 2px;
}

.rp_alert_message,
.rp_alert_success,
.rp_alert_error {
    font-size: 13px;
    color: var(--text-body);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    animation: toastSlideIn 0.3s ease-out;
}

.rp_alert_success {
    background-color: var(--success-light);
    color: var(--success);
    border-left: 4px solid var(--success);
}

.rp_alert_error {
    background-color: var(--danger-light);
    color: var(--danger);
    border-left: 4px solid var(--danger);
}

/********************************************************************************************* 
23. Editor - Campaign Widget Builder
*********************************************************************************************/
.rp_editor_wrapper {
    min-height: 600px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    display: flex;
    overflow: hidden;
}

.rp_editor_wrapper > .rp_editor_sidebar {
    width: 380px;
    flex: none;
    border-right: 1px solid var(--border-default);
    background-color: var(--bg-main);
}

.rp_editor_wrapper > .rp_editor_preview {
    flex: 1;
    padding: 32px;
    background-color: var(--bg-card);
}

.rp_edsid_widget > .rp_edsid_title {
    background-color: var(--bg-card);
    margin: 0;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-heading);
}

.rp_edsid_widget > .rp_edsid_title > span {
    flex: 1;
}

.rp_edsid_widget > .rp_edsid_content {
    padding: 16px 20px;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-default);
}

.rp_edsid_widget > .rp_edsid_content .rp_input_wrapper {
    margin-bottom: 12px;
}

.rp_edsid_widget > .rp_edsid_content .rp_input_wrapper:last-child {
    margin-bottom: 0;
}

.rp_edsid_switch_wrapper,
.rp_edsid_color_wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.rp_edsid_switch_wrapper > span,
.rp_edsid_color_wrapper > span {
    flex: 1;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-body);
}

/********************************************************************************************* 
24. Points System
*********************************************************************************************/
.rp_points_wrapper {
    max-width: 700px;
    padding: 32px;
    margin: 0 auto 32px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
}

.rp_points_wrapper > h1 {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 32px;
    color: var(--text-heading);
}

.rp_points_wrapper > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rp_points_wrapper > ul > li {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle);
}

.rp_points_wrapper > ul > li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.rp_points_wrapper > ul > li > label > .pt_label {
    font-size: 14px;
    color: var(--text-body);
    font-weight: 600;
    min-width: 80px;
}

.rp_points_wrapper > ul > li > .pt_list {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 8px;
}

.rp_points_wrapper > ul > li > .pt_list > .pt_list_item > label {
    width: 40px;
    height: 40px;
    line-height: 38px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-default);
    text-align: center;
    color: var(--text-muted);
    font-weight: 600;
    display: block;
    cursor: pointer;
    transition: var(--transition);
}

.rp_points_wrapper > ul > li > .pt_list > .pt_list_item > label:hover {
    border-color: var(--primary-light);
}

.rp_points_wrapper > ul > li > .pt_list > .pt_list_item > input:checked ~ label {
    background-color: var(--primary);
    color: white;
    border-color: var(--primary);
}

.rp_points_wrapper > ul > li > .pt_custom_input > input {
    width: 100px;
    height: 40px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    outline: none;
}

/********************************************************************************************* 
24.5. Settings Page Wrapper - Midone Style
*********************************************************************************************/
.rp_settings_wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.rp_settings_sidebar {
    width: 260px;
    flex-shrink: 0;
}

.rp_settings_content {
    flex: 1;
    min-width: 0;
}

.rp_settings_sidebar_inner {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    padding: 20px;
}

.rp_settings_sidebar_inner > h3 {
    margin: 0 0 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
}

.rp_settings_sidebar_nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rp_settings_nav_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition);
}

.rp_settings_nav_item:hover {
    background-color: var(--bg-main);
    color: var(--text-heading);
}

.rp_settings_nav_item.active {
    background-color: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
}

.rp_settings_box {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    overflow: hidden;
}

.rp_settings_header {
    padding: 25px 30px;
    border-bottom: 1px solid var(--border-subtle);
}

.rp_settings_header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-heading);
}

.rp_settings_header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 14px;
}

.rp_settings_body {
    padding: 30px;
}

.rp_settings_section {
    margin-bottom: 40px;
}

.rp_settings_section > h3 {
    font-size: 16px;
    color: var(--text-heading);
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
}

.rp_form_actions {
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

/* Responsive Settings */
@media (max-width: 992px) {
    .rp_settings_wrapper {
        flex-direction: column;
    }
    
    .rp_settings_sidebar {
        width: 100%;
    }
    
    .rp_settings_sidebar_nav {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .rp_settings_nav_item {
        flex: 1;
        min-width: 150px;
        justify-content: center;
    }
}

/********************************************************************************************* 
25. Social Share Selection
*********************************************************************************************/
.rp_social_wrapper {
    max-width: 700px;
    margin: 0 auto 32px;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 32px;
}

.rp_social_wrapper > h3 {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--text-heading);
}

.rp_social_wrapper > ul {
    list-style: none;
    padding: 0;
    margin: -8px;
    display: flex;
    flex-wrap: wrap;
}

.rp_social_wrapper > ul > li {
    padding: 8px;
}

.rp_social_wrapper > ul > li > input {
    position: absolute;
    left: -999999px;
}

.rp_social_wrapper > ul > li > label {
    width: 150px;
    height: 48px;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    color: white;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    cursor: pointer;
    opacity: 0.4;
    transition: var(--transition);
}

.rp_social_wrapper > ul > li > input:checked ~ label {
    opacity: 1;
}

.rp_social_wrapper > ul > li > label > .rp_icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
}

.rp_social_wrapper > ul > li.facebook > label { background-color: #4267B2; }
.rp_social_wrapper > ul > li.twitter > label { background-color: #1DA1F2; }
.rp_social_wrapper > ul > li.tumblr > label { background-color: #35465C; }
.rp_social_wrapper > ul > li.linkedin > label { background-color: #0077B5; }
.rp_social_wrapper > ul > li.pinterest > label { background-color: #E60023; }
.rp_social_wrapper > ul > li.reddit > label { background-color: #FF4500; }

/********************************************************************************************* 
26. Select Layout
*********************************************************************************************/
.rp_select_layout {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 48px;
    flex-wrap: wrap;
    gap: 24px;
}

.rp_select_layout > h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-heading);
}

.rp_select_layout > .rp_select_layout_list {
    display: flex;
    gap: 16px;
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > input {
    position: absolute;
    left: -99999px;
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > label {
    width: 140px;
    height: 140px;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > label:hover {
    border-color: var(--primary-light);
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > label > svg {
    margin-bottom: 12px;
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > label > span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > input:checked ~ label {
    background-color: var(--primary);
    border-color: var(--primary);
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > input:checked ~ label > svg path {
    fill: white;
}

.rp_select_layout > .rp_select_layout_list > .rp_select_layout_list_item > input:checked ~ label > span {
    color: white;
}

/********************************************************************************************* 
27. Mobile Sidebar Overlay
*********************************************************************************************/
.rp_sidebar_overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.rp_sidebar_overlay.active,
body.sidebar_open .rp_sidebar_overlay {
    opacity: 1;
    visibility: visible;
}

/********************************************************************************************* 
28. Responsive Styles
*********************************************************************************************/
@media (max-width: 1024px) {
    .rp_sidebar_wrapper {
        transform: translateX(-100%);
    }
    
    .rp_sidebar_wrapper.active,
    body.sidebar_open .rp_sidebar_wrapper {
        transform: translateX(0);
    }
    
    .rp_sidebar_close {
        display: block;
    }
    
    .rp_header_wrapper {
        left: 0;
    }
    
    .rp_sidebar_toggle {
        display: flex;
    }
    
    .rp_content_wrapper {
        margin-left: 0;
    }
    
    .rp_analytics_graph {
        flex-direction: column;
    }
    
    .rp_analytics_graph > .rp_analytics_small {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .rp_analytics_graph > .rp_analytics_small > .rp_abox {
        margin-bottom: 0;
    }
}

@media (max-width: 768px) {
    .rp_content_wrapper {
        padding: 16px;
        padding-top: calc(var(--header-height) + 16px);
    }
    
    .rp_header_wrapper > .rp_header_left {
        padding: 0 12px;
    }
    
    .rp_header_wrapper > .rp_header_right {
        padding-right: 12px;
    }
    
    .rp_createCamp_btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .rp_createCamp_btn > .rp_icon {
        margin-right: 4px;
    }
    
    .rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper {
        flex-direction: column;
    }
    
    .rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_img {
        padding: 24px;
        min-height: 200px;
    }
    
    .rp_auth_wrapper > .rp_auth_inner > .rp_auth_content_wrapper > .rp_auth_content {
        padding: 24px;
    }
    
    .rp_profile_wrapper {
        flex-direction: column;
    }
    
    .rp_profile_wrapper > .rp_profile_image {
        width: 100%;
    }
    
    .rp_input_list_wrapper {
        flex-direction: column;
        gap: 0;
    }
    
    .rp_input_list_wrapper > .rp_input_wrapper {
        margin-bottom: 16px;
    }
    
    .rp_analytics_graph > .rp_analytics_small {
        grid-template-columns: 1fr;
    }
    
    .rp_process_wrapper > ul > li {
        min-width: 60px;
        padding: 0 8px;
    }
    
    .rp_process_wrapper > ul > li > .rp_step_number {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .rp_process_wrapper > ul > li > .rp_step_title {
        font-size: 10px;
    }
    
    .rp_editor_wrapper {
        flex-direction: column;
    }
    
    .rp_editor_wrapper > .rp_editor_sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border-default);
    }
}

@media (max-width: 576px) {
    .rp_header_wrapper > .rp_header_left > .rp_header_title > h3 {
        font-size: 14px;
    }
    
    .rp_members_header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .rp_members_actions {
        width: 100%;
    }
    
    .rp_members_actions .rp_btn {
        flex: 1;
        justify-content: center;
    }
}

/********************************************************************************************* 
29. Utility Classes
*********************************************************************************************/
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }
.mt-5 { margin-top: 24px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mb-5 { margin-bottom: 24px !important; }

.p-0 { padding: 0 !important; }
.p-3 { padding: 12px !important; }
.p-4 { padding: 16px !important; }
.p-5 { padding: 24px !important; }

.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-none { display: none !important; }

.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.items-center { align-items: center !important; }

.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }

.w-full { width: 100% !important; }
.h-full { height: 100% !important; }

.rounded { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--primary) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.bg-danger { background-color: var(--danger) !important; }
.bg-light { background-color: var(--bg-main) !important; }

/********************************************************************************************* 
30. Additional UI Fixes - Midone Consistency
*********************************************************************************************/

/* File Input Styling */
input[type="file"] {
    display: none;
}

.rp_file_upload_wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rp_file_upload_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--bg-card);
    color: var(--text-body);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.rp_file_upload_btn:hover {
    border-color: var(--primary);
    background-color: var(--primary-light);
    color: var(--primary);
}

/* Override default file input button in forms */
input[type="file"]::-webkit-file-upload-button {
    display: none;
}

/* Profile Page Enhancements */
.rp_profile_wrapper {
    display: flex;
    gap: 24px;
    max-width: 900px;
    align-items: flex-start;
}

.rp_profile_wrapper > .rp_profile_image {
    width: 280px;
    flex: none;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
}

.rp_profile_wrapper > .rp_profile_image > .rp_profile_icon {
    width: 120px;
    height: 120px;
    position: relative;
    margin: 0 auto 20px;
    border-radius: var(--radius-full);
}

.rp_profile_wrapper > .rp_profile_image > .rp_profile_icon .rp_pro_initials {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: var(--primary);
    color: white;
    font-size: 40px;
    font-weight: 600;
    display: block;
    border-radius: var(--radius-full);
}

.rp_profile_wrapper > .rp_profile_image > .rp_profile_icon img {
    width: 120px;
    height: 120px;
    position: absolute;
    border-radius: var(--radius-full);
    top: 0;
    left: 0;
    object-fit: cover;
}

.rp_profile_wrapper > .rp_profile_image > p {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-heading);
}

/* Profile Image Upload Button */
.rp_profile_wrapper > .rp_profile_image label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background-color: var(--bg-main);
    color: var(--text-body);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
}

.rp_profile_wrapper > .rp_profile_image label:hover {
    border-color: var(--primary);
    background-color: var(--primary-light);
    color: var(--primary);
}

.rp_profile_wrapper > .rp_profile_detail {
    flex: 1;
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 32px;
}

/* Members Stats Cards - Midone Style (Override Gradients) */
.rp_stats_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.rp_stat_card {
    border-radius: var(--radius-lg);
    padding: 24px;
    background-color: var(--bg-card);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--primary);
    box-shadow: var(--shadow-sm);
}

.rp_stat_card h3 {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--text-heading);
}

.rp_stat_card p {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
}

/* Different accent colors for stat cards */
.stat_card_purple,
.rp_stat_card:nth-child(1) { border-left-color: var(--primary); }
.stat_card_green,
.rp_stat_card:nth-child(2) { border-left-color: var(--success); }
.stat_card_orange,
.rp_stat_card:nth-child(3) { border-left-color: var(--warning); }
.stat_card_red,
.rp_stat_card:nth-child(4) { border-left-color: var(--danger); }

/* Override inline gradient backgrounds */
.stat_card_purple,
.stat_card_green,
.stat_card_orange,
.stat_card_red {
    background: var(--bg-card) !important;
    color: var(--text-heading) !important;
}

.stat_card_purple h3,
.stat_card_green h3,
.stat_card_orange h3,
.stat_card_red h3 {
    color: var(--text-heading) !important;
}

.stat_card_purple p,
.stat_card_green p,
.stat_card_orange p,
.stat_card_red p {
    color: var(--text-muted) !important;
}

/* Analytics Stats - Override colored borders */
.rp_abox {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    padding: 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    position: relative;
    border-top: 3px solid var(--primary);
}

.rp_abox.signup { border-top-color: var(--success); }
.rp_abox.share { border-top-color: var(--info); }
.rp_abox.referral { border-top-color: var(--warning); }

/* Error Logs Stats Cards */
.rp_errorlog_stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.rp_errorlog_stat {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--primary);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.rp_errorlog_stat.errors { border-left-color: var(--danger); }
.rp_errorlog_stat.warnings { border-left-color: var(--warning); }
.rp_errorlog_stat.info { border-left-color: var(--info); }
.rp_errorlog_stat.debug { border-left-color: var(--success); }

/* Automation Cards - Consistent Blue Theme */
.rp_automation_nav > ul > li > a {
    background-color: var(--bg-card);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-body);
    transition: var(--transition);
}

.rp_automation_nav > ul > li > a > img,
.rp_automation_nav > ul > li > a > svg {
    margin-right: 12px;
    width: 32px;
    height: 32px;
}

.rp_automation_nav > ul > li > a:hover {
    border-color: var(--primary);
    color: var(--text-heading);
}

.rp_automation_nav > ul > li.active > a {
    background-color: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

/* Autoresponder Icons - Ensure visibility */
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li > a > .icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: var(--radius-full);
    font-size: 18px;
    font-weight: 700;
    color: white;
}

/* Individual autoresponder colors */
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.Aweber > a > .icon { background-color: #4B9CD3; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.GetResponse > a > .icon { background-color: #00BAFF; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.Mailchimp > a > .icon { background-color: #FFE01B; color: #241C15; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.Sendlane > a > .icon { background-color: #1A82E2; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.ActiveCampaign > a > .icon { background-color: #356AE6; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.ConvertKit > a > .icon { background-color: #FB6970; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.Drip > a > .icon { background-color: #E3AF00; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.Hubspot > a > .icon { background-color: #FF7A59; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.MailerLite > a > .icon { background-color: #09C269; }
.rp_autoresponder_wrapper > .rp_autoresponder_list > ul > li.Sendinblue > a > .icon { background-color: #0092FF; }

/* Upload Area Styling */
.rp_upload_area {
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    background-color: var(--bg-main);
    transition: var(--transition);
    cursor: pointer;
}

.rp_upload_area:hover {
    border-color: var(--primary);
    background-color: var(--primary-light);
}

.rp_upload_area .rp_upload_icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--text-muted);
}

.rp_upload_area p {
    color: var(--text-muted);
    font-size: 14px;
}

.rp_upload_area .rp_upload_btn {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 24px;
    background-color: var(--primary);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 500;
}

/* Override d-none in popup forms */
.rp_popup_body .d-none,
.rp_popup_wrapper .d-none,
.rp_popup_inner .d-none {
    display: block !important;
}

/* Fix hidden forms in autoresponder modals */
.hs_right_section {
    display: block !important;
}

.hs_right_section .rp_input_wrapper {
    margin-bottom: 16px;
}

/* Radio buttons styling improvement */
.rp_radio {
    margin-bottom: 12px;
}

.rp_radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.rp_radio label {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    padding-left: 28px;
    cursor: pointer;
    color: var(--text-body);
    font-size: 14px;
}

.rp_radio label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-default);
    border-radius: var(--radius-full);
    background-color: var(--bg-card);
    transition: var(--transition);
}

.rp_radio input[type="radio"]:checked + label::before {
    border-color: var(--primary);
}

.rp_radio label::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 8px;
    background-color: var(--primary);
    border-radius: var(--radius-full);
    opacity: 0;
    transition: var(--transition);
}

.rp_radio input[type="radio"]:checked + label::after {
    opacity: 1;
}


/* ===========================================
   MODAL SYSTEM - See modern_ui_system.css for unified styles
   =========================================== */

/* Ensure modal-overlay.active works (legacy support) */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

/* ===========================================
   DASHBOARD SEARCH & FILTER ENHANCEMENT
   =========================================== */
.rp_dashboard_filter_wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #ffffff;
    border-radius: 14px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
}

.rp_search_box {
    position: relative;
    flex: 1;
    min-width: 280px;
}

.rp_search_box .rp_search_icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.2s ease;
}

.rp_search_box .rp_search_input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    background: #f8fafc;
    border: 2px solid transparent;
    border-radius: 10px;
    transition: all 0.25s ease;
    outline: none;
}

.rp_search_box .rp_search_input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.rp_search_box .rp_search_input:focus {
    background: #ffffff;
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.rp_search_box:focus-within .rp_search_icon {
    color: #3b82f6;
}

.rp_dashboard_filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.rp_dashboard_filter p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
}

.rp_dashboard_filter .rp_input_wrapper {
    min-width: 160px;
}

.rp_dashboard_filter .rp_input {
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
}

.rp_dashboard_filter .rp_input:hover {
    border-color: #cbd5e1;
}

.rp_dashboard_filter .rp_input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Hide default filter icon since we're using CSS icon */
.rp_filter_icon {
    display: none;
}

/* No results message styling */
.rp_nocampaign_filter,
.rp_nosearch_result {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
    font-size: 15px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #e2e8f0;
    margin-bottom: 20px;
}

.rp_nosearch_result.active {
    display: block;
}

/* Responsive */
@media (max-width: 640px) {
    .rp_dashboard_filter_wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .rp_search_box {
        min-width: 100%;
    }
    
    .rp_dashboard_filter {
        justify-content: flex-start;
    }
}

/* ===========================================
   FIX: Overflow control
   =========================================== */

body {
    overflow-x: hidden;
}

.rp_popup_wrapper {
    overflow: hidden;
}

.rp_popup_close_overlay {
    overflow: hidden;
}

/* ===========================================
   PROFESSIONAL SEARCH & FILTER BAR
   =========================================== */

.rp_dashboard_filter_wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

/* Search Box - Left side */
.rp_search_box {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    border-right: 1px solid #e2e8f0;
}

.rp_search_box .rp_search_icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.2s ease;
    width: 18px;
    height: 18px;
}

.rp_search_box .rp_search_input {
    width: 100%;
    padding: 14px 44px 14px 46px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    background: transparent;
    border: none;
    outline: none;
    transition: all 0.2s ease;
}

.rp_search_box .rp_search_input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.rp_search_box .rp_search_input:focus {
    background: #f8fafc;
}

.rp_search_box:focus-within .rp_search_icon {
    color: #3b82f6;
}

/* Clear/Reset button inside search box */
.rp_search_clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    background: #e2e8f0;
    border: none;
    padding: 0;
    transition: all 0.2s ease;
}

.rp_search_clear:hover {
    background: #cbd5e1;
}

.rp_search_clear svg {
    width: 12px;
    height: 12px;
    color: #64748b;
}

.rp_search_box.has-value .rp_search_clear {
    display: flex;
}

/* Filter Section - Right side */
.rp_dashboard_filter {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: #f8fafc;
    flex-shrink: 0;
}

.rp_dashboard_filter .rp_filter_icon {
    display: none;
}

.rp_dashboard_filter p {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
}

.rp_dashboard_filter .rp_input_wrapper {
    min-width: 130px;
}

.rp_dashboard_filter .rp_input {
    padding: 8px 32px 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    color: #1e293b;
}

.rp_dashboard_filter .rp_input:hover {
    border-color: #cbd5e1;
}

.rp_dashboard_filter .rp_input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

/* Responsive */
@media (max-width: 640px) {
    .rp_dashboard_filter_wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .rp_search_box {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .rp_dashboard_filter {
        justify-content: space-between;
    }
}

/* ===========================================
   MODAL SIZE OVERRIDES
   =========================================== */

/* Award points modal - wider */
.rp_popup_wrapper[data-popup="award_points"] .rp_popup_inner,
.rp_popup_wrapper .rp_popup_inner.rp_popup_large,
#viewpointsModal .rp_popup_inner {
    max-width: 540px !important;
}

/* Delete/Confirm modals - compact */
.rp_popup_delete .rp_popup_inner,
.rp_popup_confirm .rp_popup_inner {
    max-width: 420px !important;
}

/* Modal content padding */
.rp_popup_inner .rp_delete_box {
    padding: 32px 24px !important;
}

.rp_popup_inner .rp_popup_heading {
    padding: 18px 24px !important;
    border-bottom: 1px solid #e2e8f0;
}

.rp_popup_inner .rp_popup_body {
    padding: 24px !important;
}

/* Buttons in modal - compact */
.rp_popup_inner .rp_dbox_action {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-top: 24px !important;
}

.rp_popup_inner .rp_dbox_action .rp_btn {
    min-width: 120px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
}

/* Payout modal - specific fix */
.payout-modal .payout-modal-content {
    max-width: 420px !important;
    width: 90% !important;
}

.payout-modal .payout-modal-body {
    padding: 32px 28px !important;
}

.payout-modal .payout-modal-actions {
    gap: 12px !important;
}

.payout-modal .payout-modal-btn {
    min-width: 130px !important;
    padding: 14px 20px !important;
    font-size: 14px !important;
}

/* ===========================================
   FIX: Orders page modal - exclude from narrow width
   =========================================== */

/* Orders page modals should keep their own styles */
#refundModal .modal-content {
    max-width: 480px !important;
}

/* ===========================================
   FIX: Automation/Trigger Email Modals - WIDER for CKEditor
   =========================================== */

/* Automation modals need more width for email editor */
.rp_popup_wrapper[data-popup="automation"] .rp_popup_inner,
.rp_popup_wrapper[data-popup="trigger"] .rp_popup_inner,
.rp_popup_wrapper.rp_popup_automation .rp_popup_inner,
.rp_popup_wrapper .rp_popup_inner.automation-modal,
#addTriggerModal .rp_popup_inner,
#editTriggerModal .rp_popup_inner,
.trigger-modal .rp_popup_inner {
    max-width: 700px !important;
    width: 95% !important;
}

/* Ensure CKEditor container has proper height */
.rp_popup_inner .cke,
.rp_popup_inner .cke_contents,
.rp_popup_inner .cke_wysiwyg_frame {
    min-height: 200px !important;
}

.rp_popup_inner #email_content_editor,
.rp_popup_inner .email-content-editor,
.rp_popup_inner textarea.rp_ckedtr {
    min-height: 200px !important;
    width: 100% !important;
}

/* ===========================================
   FIX: Toast duration & progress bar visibility
   =========================================== */

/* Override in toast.css - let me update it properly */

/* ===========================================
   FIX: Automation/Trigger Modals - EXCLUDE from narrow width
   These modals need wider width for CKEditor
   =========================================== */

.rp_trigger_popup .rp_popup_inner,
.rp_popup_wrapper.rp_trigger_popup .rp_popup_inner,
#automationModal .rp_popup_inner,
#editModal .rp_popup_inner,
[id*="TriggerModal"] .rp_popup_inner,
.rp_popup_wrapper[id*="automation"] .rp_popup_inner {
    max-width: 700px !important;
    width: 95% !important;
}

/* CKEditor textarea — layout hints when showing */
.rp_trigger_popup textarea,
#automationModal textarea,
#editModal textarea,
.rp_popup_inner textarea[id*="ckedit"] {
    min-height: 180px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* NOTE: display/visibility/opacity removed — CKEditor hides the
       textarea in WYSIWYG mode using inline style; forcing display:block
       !important here was overriding that and showing the raw textarea
       instead of the rich text editor. */
}

/* Only force-show the textarea when CKEditor uses source mode */
.rp_trigger_popup textarea.cke_source,
#automationModal textarea.cke_source,
#editModal textarea.cke_source,
.rp_popup_inner textarea[id*="ckedit"].cke_source {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* CKEditor container styling */
.rp_trigger_popup .cke,
#automationModal .cke,
#editModal .cke {
    display: block !important;
    visibility: visible !important;
}

/* Fix form group layout in automation modals */
.rp_trigger_popup .rp_input_box,
#automationModal .rp_input_box,
#editModal .rp_input_box {
    margin-bottom: 16px;
}

/* ===========================================
   FIX: modal-overlay.active state
   =========================================== */

.modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}