/* ==========================================
   NEXORA PREMIUM REWARDS
   Matches CareLink Premium Theme
========================================== */

:root{

    --navy:#0B1F3A;
    --navy-light:#163A70;
    --gold:#D4AF37;
    --gold-soft:#F5E8B5;
    --white:#FFFFFF;
    --bg:#F7F9FC;
    --text:#1D2A3A;
    --muted:#72809A;
    --success:#16A34A;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Poppins",sans-serif;

}

body.rewards-page{

    background:
    radial-gradient(circle at top,#ffffff,#F7F9FC 70%);

    color:var(--text);

    min-height:100vh;

    padding:0 0 120px;

}

/* ==========================================
   HEADER
========================================== */

.rewards-header{

    position:sticky;
    top:0;
    z-index:1000;

    height:90px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px 24px;

    background:#fff;

    border-bottom:1px solid rgba(212,175,55,.15);

}

.rewards-header button{

    position:absolute;
    left:20px;

    width:58px;
    height:58px;

    border:none;

    border-radius:18px;

    background:#fff;

    color:var(--navy);

    font-size:24px;

    cursor:pointer;

    box-shadow:
    0 10px 28px rgba(0,0,0,.08);

}

.rewards-header h2{

    font-size:30px;

    font-weight:800;

    color:var(--navy);

}

/* ==========================================
   WALLET CARD
========================================== */

.rewards-card{

    position:relative;

    overflow:hidden;

    margin:24px 18px;

    padding:36px 28px;

    border-radius:30px;

    background:

    linear-gradient(

    145deg,

    rgba(255,255,255,.96),

    rgba(247,249,252,.96)

    );

    border:1px solid rgba(212,175,55,.35);

    box-shadow:

    0 18px 45px rgba(11,31,58,.08);

    text-align:center;

}

.rewards-card::before{

    content:"";

    position:absolute;

    top:-90px;
    right:-90px;

    width:220px;
    height:220px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(212,175,55,.18),

    transparent 70%

    );

}

.rewards-card h1{

    position:relative;
    z-index:2;

    font-size:52px;

    font-weight:800;

    color:var(--navy);

    margin-bottom:10px;

}

.rewards-card p{

    position:relative;
    z-index:2;

    font-size:16px;

    color:var(--muted);

    line-height:1.7;

}

/* ==========================================
   SHARED PREMIUM CARDS
========================================== */

.reward-level,
.reward-card{

    margin:20px 18px;

    background:#fff;

    border-radius:28px;

    border:1px solid rgba(212,175,55,.25);

    padding:28px;

    box-shadow:

    0 14px 35px rgba(0,0,0,.06);

}

.reward-level h3,
.reward-card h3{

    font-size:30px;

    font-weight:800;

    color:var(--navy);

    margin-bottom:18px;

}

.reward-level p,
.reward-card p{

    color:var(--muted);

    font-size:16px;

    line-height:1.8;

}

.reward-level b,
.reward-card b{

    color:var(--success);

}

/* ==========================================
   FAQ
========================================== */

.reward-card details{

    width:100%;

}

.reward-card summary{

    list-style:none;

    cursor:pointer;

    display:flex;
    justify-content:space-between;
    align-items:center;

    font-size:20px;

    font-weight:700;

    color:var(--navy);

}

.reward-card summary::-webkit-details-marker{

    display:none;

}

.reward-card details[open] summary{

    margin-bottom:18px;

}

/* ==========================================
   WAYS TO EARN
========================================== */

.reward-card ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.reward-card li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 20px;

    border-radius:20px;

    background:#fff;

    border:1px solid rgba(212,175,55,.22);

    box-shadow:

    0 8px 22px rgba(0,0,0,.05);

    font-size:15px;

    font-weight:600;

    color:var(--navy);

}

.reward-card li b{

    color:var(--success);

    font-size:22px;

}

/* ==========================================
   WITHDRAW BUTTON
========================================== */

.withdraw-btn{

    width:100%;

    height:60px;

    margin-top:24px;

    border:none;

    border-radius:20px;

    cursor:pointer;

    background:

    linear-gradient(

    135deg,

    var(--navy),

    var(--navy-light)

    );

    border:1px solid var(--gold);

    color:#fff;

    font-size:17px;

    font-weight:700;

    box-shadow:

    0 14px 30px rgba(11,31,58,.20);

    transition:.25s;

}

.withdraw-btn:hover{

    transform:translateY(-2px);

}

.withdraw-btn:disabled{

    background:#d7dce7;

    border:none;

    color:#8a94a8;

    box-shadow:none;

    cursor:not-allowed;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.rewards-header h2{

    font-size:28px;

}

.rewards-card{

    margin:20px 16px;

    padding:32px 24px;

}

.rewards-card h1{

    font-size:44px;

}

.reward-card,
.reward-level{

    margin:18px 16px;

    padding:22px;

}

.reward-card h3,
.reward-level h3{

    font-size:26px;

}

.reward-card li{

    padding:16px 18px;

}

}