/*
==================================================
ULTRA HIGH-END PAYLINK UI
==================================================
*/

.rps-paylink-box {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px;

    margin-top: 25px;
    margin-bottom: 25px;

    border: 1px solid #eef2f7;

    box-shadow:
        0 10px 30px rgba(15,23,42,0.06);
}

/*
HEADER
*/

.rps-paylink-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 22px;
}

.rps-paylink-header h3 {

    margin: 0;

    font-size: 24px;

    font-weight: 700;

    color: #0f172a;
}

.rps-paylink-header p {

    margin-top: 6px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;
}

/*
PROFIT BADGE
*/

#rps_profit_preview {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    color: #ffffff !important;

    padding: 10px 18px;

    border-radius: 14px;

    font-size: 14px;

    font-weight: 700;

    min-width: 170px;

    box-shadow:
        0 8px 20px rgba(34,197,94,0.24);
}

/*
GRID
*/

.rps-field-grid {

    display: grid;

    grid-template-columns: 250px 250px;

    gap: 18px;

    margin-bottom: 20px;
}

/*
FIELD
*/

.rps-field label {

    display: block;

    margin-bottom: 12px;

    font-size: 15px;

    font-weight: 700;

    color: #0f172a;
}

/*
INPUT
*/

.rps-field input {

    width: 50%;

    height: 52px;

    border-radius: 14px;

    border: 1px solid #dbe4ee;

    background: #ffffff;

    padding: 0 16px;

    font-size: 16px;

    font-weight: 600;

    color: #0f172a;

    transition: all 0.25s ease;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.02);
}

.rps-field input:focus {

    outline: none;

    border-color: #3b82f6;

    box-shadow:
        0 0 0 5px rgba(59,130,246,0.10);
}

/*
BUTTON
*/

#rps_generate_paylink {

    height: 50px;

    border: none;

    border-radius: 14px;

    padding: 0 22px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow:
        0 10px 24px rgba(37,99,235,0.20);
}

#rps_generate_paylink:hover {

    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(37,99,235,0.35);
}

/*
PAYLINK OUTPUT
*/

#rps_paylink_output {

    margin-top: 18px;
}

#rps_paylink_output > div {

    display: flex;

    gap: 12px;
}

#rps_generated_link {

    flex: 1;

    height: 50px !important;

    border-radius: 14px !important;

    border: 1px solid #dbe4ee !important;

    font-size: 14px !important;

    padding: 0 16px !important;
}

#rps_copy_link {

    min-width: 85px;

    height: 50px;

    border: none;

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color: #fff;

    font-weight: 700;

    font-size: 13px;

    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow:
        0 8px 20px rgba(15,23,42,0.18);
}

/*
RESPONSIVE
*/

@media(max-width:768px){

.rps-paylink-header {

    flex-direction: column;

    align-items: flex-start;
}

.rps-field-grid {

    grid-template-columns: 1fr;
}
#rps_generated_link {
    width: -webkit-fill-available !important;
}

#rps_paylink_output > div {

    display: grid !important;

    gap: 10px;

    align-items: center;

    margin-top: 18px;
}

#rps_copy_link {

    padding: 0 22px;

    height: 50px;
}

}

/*
==================================================
PROFIT PREVIEW
==================================================
*/

#rps_profit_preview {
    margin-top: 10px;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
    color: #16a34a;
}

/*
==================================================
RESPONSIVE
==================================================
*/

@media(max-width:768px){

.rps-dashboard-wrapper {
    padding: 18px;
}

.rps-dashboard-table {
    
    overflow-x: auto;
}

.rps-total-profit {
    width: 100%;
    text-align: center;
}

}

/*
==================================================
TABLE WRAPPER
==================================================
*/
.rps-dashboard-wrapper {

    background: #ffffff;

    border-radius: 24px;

    padding: 28px;

    

    box-shadow:
        0 15px 40px rgba(15,23,42,0.06);

    border: 1px solid #eef2f7;
}
.rps-dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-bottom: 28px;
}
.rps-dashboard-subtitle {

    margin-top: 8px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;
}
.rps-total-profit {

    min-width: 180px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    color: #ffffff;

    font-size: 28px;

    font-weight: 800;

    box-shadow:
        0 15px 35px rgba(34,197,94,0.25);
}
.rps-table-wrapper {

    overflow-x: auto;

    border-radius: 20px;

    border: 1px solid #e2e8f0;

    background: #ffffff;
}

/*
==================================================
TABLE
==================================================
*/

.rps-dashboard-table {

    width: max-content;

    min-width: 100%;

    border-collapse: separate;

    border-spacing: 0;

    table-layout: auto;
}

.rps-dashboard-table thead {

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );
}

.rps-dashboard-table th {

    color: #ffffff;

    padding: 5px 10px;

    text-align: left;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.3px;

    border-right:
        1px solid rgba(255,255,255,0.08);
}

.rps-dashboard-table td {

    padding: 5px 10px;

    background: #ffffff;

    border-bottom:
        1px solid #eef2f7;

    border-right:
        1px solid #f1f5f9;

    vertical-align: top;

    font-size: 14px;

    line-height: 1.7;

    color: #334155;
}

.rps-dashboard-table tbody tr:hover td {

    background: #f8fafc;
}
.rps-store-link {

    color: #2563eb;

    font-weight: 700;

    text-decoration: none;
}

.rps-store-link:hover {

    text-decoration: underline;
}

/*
==================================================
PAGINATION
==================================================
*/

.rps-pagination {

    display: flex;

    justify-content: center;

    gap: 10px;

    margin-top: 28px;
}

.rps-pagination a {

    width: 25px;

    height: 25px;
    font-size: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #ffffff;

    color: #0f172a;

    text-decoration: none;

    font-weight: 700;

    border: 1px solid #e2e8f0;

    transition: all 0.25s ease;
}

.rps-pagination a:hover {

    transform: translateY(-2px);
}

.rps-pagination a.active {

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color: #ffffff;

    border-color: transparent;
}

@media(max-width:768px){

.rps-dashboard-header {

    flex-direction: column;

    align-items: center;
}

.rps-total-profit {

    width: auto;
    height: 45px;
    font-size: 21px;
}

.rps-dashboard-wrapper {

    padding: 18px;
}

}

.rps-tabs{
display:flex;
gap:10px;
margin-bottom:25px;
}

.rps-tabs a{
padding:10px 20px;
background:#f1f1f1;
border-radius:8px;
text-decoration:none;
font-weight:600;
color:#111;
}

.rps-tabs a.active{
background:#111;
color:#fff;
}

.rps-dashboard-table input{
border:none !important;
box-shadow:none !important;
outline:none !important;
background:transparent !important;
padding:0 !important;
}


.rps-balance-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:20px;
}

.rps-balance-card{
background:#fff;
padding:20px;
border-radius:14px;
box-shadow:0 2px 10px rgba(0,0,0,0.06);
}

.rps-balance-card span{
display:block;
font-size:13px;
color:#777;
margin-bottom:8px;
}

.rps-balance-card strong{
font-size:24px;
font-weight:700;
color:#111;
}