/* ===========================
   My Rewards Page
=========================== */

.my-rewards-page{

    padding:40px;

    background:#f4f8fc;

    min-height:100vh;

}

.rewards-container{

    max-width:1200px;

    margin:auto;

}

/* ===========================
   Header
=========================== */

.rewards-header{

    background:linear-gradient(
        135deg,
        #0f4fff,
        #3d7eff
    );

    color:white;

    border-radius:20px;

    padding:35px;

    text-align:center;

    margin-bottom:40px;

    box-shadow:0 15px 35px rgba(15,79,255,.18);

}

.header-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:40px;

    color:#0f4fff;

    margin-bottom:15px;

}

.rewards-header h1{

    font-size:34px;

    margin-bottom:10px;

    color:#d8f5e4;

}

.rewards-header p{

    opacity:.9;

    color:#d8f5e4;

}

/* ===========================
   Sections
=========================== */

.reward-section{

    margin-bottom:50px;

}

.reward-section h2{

    margin-bottom:25px;

    color:#173a74;

}

/* ===========================
   Grid
=========================== */

.reward-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

    gap:25px;

}

.reward-card{

    background:white;

    border-radius:20px;

    padding:25px;

    display:flex;

    flex-direction:column;

    gap:18px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.reward-card:hover{

    transform:translateY(-6px);

}

.reward-card.active{

    border-left:6px solid #0f9d58;

}

.reward-card.used{

    border-left:6px solid #0f4fff;

}

.reward-card.expired{

    border-left:6px solid #ef4444;

    opacity:.75;

}

.reward-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#eef4ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

}

.reward-content h3{

    color:#173a74;

    margin-bottom:10px;

}

.reward-content p{

    color:#777;

    margin:6px 0;

    font-size:15px;

}

.status{

    display:inline-block;

    margin-top:10px;

    padding:8px 16px;

    border-radius:30px;

    font-weight:600;

    font-size:13px;

}

.active-status{

    background:#d8f5e4;

    color:#0f9d58;

}

.used-status{

    background:#dfeaff;

    color:#0f4fff;

}

.expired-status{

    background:#ffe4e4;

    color:#ef4444;

}

.reward-btn{

    margin-top:auto;

    position: relative;

    border:none;

    background:#0f4fff;

    color:white;

    padding:14px;

    z-index: 1000;

    border-radius:12px;

    cursor:pointer;

    pointer-events: auto;

    font-weight:600;

    transition:.3s;

}



.reward-btn:hover{

    background:#0d3fd8;

}

.empty-state{

    background:white;

    border-radius:20px;

    padding:40px;

    text-align:center;

    color:#666;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

@media (max-width:768px){

    .my-rewards-page{

        padding:15px 12px;

        overflow-x:hidden;

    }

    .rewards-container{

        width:100%;

        max-width:100%;

       

    }

    /* ===========================
        Header
    =========================== */

    .rewards-header{

        padding:25px 18px;

        margin-bottom:30px;

        border-radius:18px;

    }

    .header-icon{

        width:70px;

        height:70px;

        font-size:30px;

    }

    .rewards-header h1{

        font-size:26px;

    }

    .rewards-header p{

        font-size:15px;

    }

    /* ===========================
        Section Titles
    =========================== */

    .reward-section{

        margin-bottom:35px;

    }

    .reward-section h2{

        font-size:30px;

        margin-bottom:18px;

    }

    /* ===========================
        Grid
    =========================== */

    .reward-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .reward-card{

        width:100%;

        box-sizing:border-box;

        padding:20px;

        border-radius:18px;

        gap:15px;
        

        margin-left:50px;

    }

    .reward-icon{

        width:58px;

        height:58px;

        font-size:28px;

        border-radius:14px;

        transform:translateX(30%);

    }

    .reward-content h3{

        font-size:1.8rem;

        line-height:1.3;

        word-break:break-word;

       

    }

    .reward-content p{

        font-size:15px;

       

    }

    .status{

        padding:7px 14px;

        font-size:12px;

      

    }

    /* ===========================
        Button
    =========================== */

    .reward-btn{

        width:100%;

        padding:14px;

        font-size:17px;

        border-radius:14px;

    }

    /* ===========================
        Empty State
    =========================== */

    .empty-state{

        padding:25px 18px;

        border-radius:18px;

        font-size:16px;

    }

}