/* ==========================================================
   1. SHARE KNOWLEDGE / EARN GOODIES
========================================================== */

.refer_goodies_section{
    width:100%;
    padding:clamp(36px, 5vw, 68px) 0;
    background:#fff;
    overflow:hidden;
}

.refer_goodies_container{
    max-width:1200px;
    margin-inline:auto;
    padding-inline:20px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:clamp(24px, 4vw, 56px);
    align-items:center;
}

/* ---------- left: media ---------- */

.refer_goodies_media{
    position:relative;
    min-width:0;
}

.refer_goodies_image{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

.refer_goodies_float{
    position:absolute;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-radius:12px;
    background:#fff;
    border:1px solid rgba(255,102,0,0.12);
    box-shadow:0 6px 20px rgba(20,20,43,.08);
    white-space:nowrap;
}

.refer_goodies_float div{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}

.refer_goodies_float strong{
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    color:var(--ink);
}

.refer_goodies_float span{
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:600;
    color:var(--primary);
}

.refer_goodies_float_icon{
    flex:none;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    border-radius:8px;
    background:rgba(255,102,0,.10);
    color:var(--primary);
    font-size:12px;
}

.refer_goodies_float--1{ top:2%; left:-10%; }
.refer_goodies_float--2{ top:40%; left:-12%; }
.refer_goodies_float--3{ top:76%; left:-10%; }

/* ---------- right: copy ---------- */

.refer_goodies_copy{
    min-width:0;
}

.refer_goodies_badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 14px;
    border:1px solid rgba(255,102,0,.28);
    border-radius:999px;
    background:rgba(255,102,0,.08);
    font-family:var(--font-sans);
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--primary);
}

.refer_goodies_title{
    margin-top:14px;
    font-family:var(--font-sans);
    font-size:clamp(22px, 3.2vw, 34px);
    font-weight:800;
    line-height:1.2;
    color:var(--ink);
}

.refer_goodies_title_accent{
    color:var(--primary);
}

.refer_goodies_desc{
    margin-top:12px;
    max-width:34rem;
    font-family:var(--font-sans);
    font-size:clamp(13px, 1.1vw, 15px);
    line-height:1.55;
    color:#555;
    font-weight:400;
}

.refer_goodies_desc strong{
    font-weight:700;
    color:var(--ink);
}

/* Compact Horizontal Goodies Points Cards */
.refer_goodies_points{
    margin-top:20px;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
}

.refer_goodies_point{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    background:#FFF8F3;
    border:1px solid rgba(255,102,0,0.15);
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.02);
    transition:transform 0.2s ease, border-color 0.2s ease;
}

.refer_goodies_point:hover{
    transform:translateY(-2px);
    border-color:rgba(255,102,0,0.35);
}

.refer_goodies_point div{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    min-width:0;
}

.refer_goodies_point div span{
    font-family:var(--font-sans);
    font-size:10.5px;
    color:#666;
    font-weight:500;
    line-height:1.2;
}

.refer_goodies_point div strong{
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:700;
    color:var(--ink);
    line-height:1.25;
}

.refer_goodies_point_icon{
    flex:none;
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:8px;
    background:rgba(255,102,0,.12);
    color:var(--primary);
    font-size:12.5px;
}

.refer_goodies_actions{
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.refer_goodies_cta,
.refer_goodies_ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 22px;
    border-radius:999px;
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    cursor:pointer;
    transition:
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        background var(--dur-base) var(--ease-out);
}

.refer_goodies_cta{
    border:none;
    background:var(--primary);
    color:#fff;
}

.refer_goodies_cta:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,102,0,.25);
}

.refer_goodies_ghost{
    border:1.5px solid rgba(0,0,0,.12);
    background:#fff;
    color:var(--ink);
}

.refer_goodies_ghost:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);
}

.refer_goodies_note{
    margin-top:14px;
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-family:var(--font-sans);
    font-size:12px;
    line-height:1.45;
    color:#666;
}

.refer_goodies_note i{
    flex:none;
    color:var(--primary);
    font-size:13px;
    margin-top:2px;
}

@media (max-width:900px){
    .refer_goodies_container{
        grid-template-columns:1fr;
    }

    .refer_goodies_float--1{ top:0%; left:-6%; }
    .refer_goodies_float--2{ top:40%; left:-8%; }
    .refer_goodies_float--3{ top:76%; left:-6%; }
}

@media (max-width:640px){

    .refer_goodies_section{
        padding:28px 0;
    }

    .refer_goodies_container{
        padding-inline:16px;
        gap:20px;
    }

    .refer_goodies_media{
        position:relative;
        width:100%;
        max-width:320px;
        margin-inline:auto;
        display:block;
    }

    .refer_goodies_float{
        position:absolute;
        padding:5px 10px;
        border-radius:8px;
        gap:6px;
        box-shadow:0 4px 12px rgba(20,20,43,.10);
    }

    .refer_goodies_float strong{
        font-size:10.5px;
    }

    .refer_goodies_float span{
        font-size:9.5px;
    }

    .refer_goodies_float_icon{
        width:22px;
        height:22px;
        font-size:10.5px;
        border-radius:5px;
    }

    .refer_goodies_float--1{ top:-3%; left:-6%; }
    .refer_goodies_float--2{ top:40%; left:-8%; }
    .refer_goodies_float--3{ top:78%; left:-6%; }

    .refer_goodies_copy{
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .refer_goodies_badge{
        font-size:11px;
        padding:5px 14px;
    }

    .refer_goodies_title{
        font-size:clamp(19px, 5.2vw, 25px);
        line-height:1.25;
        margin-top:10px;
        text-wrap:balance;
    }

    .refer_goodies_desc{
        font-size:clamp(13px, 3.2vw, 14.5px);
        line-height:1.55;
        margin-top:8px;
        text-wrap:balance;
    }

    .refer_goodies_points{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
        width:100%;
        margin-top:14px;
    }

    .refer_goodies_point{
        padding:8px 4px;
        gap:6px;
        border-radius:10px;
        flex-direction:column;
        text-align:center;
        align-items:center;
        justify-content:flex-start;
        box-sizing:border-box;
        min-width:0;
        overflow:hidden;
    }

    .refer_goodies_point_icon{
        flex:none;
        display:grid;
        place-items:center;
        width:28px;
        height:28px;
        border-radius:8px;
        background:rgba(255,102,0,.12);
        color:var(--primary);
        font-size:12px;
        margin:0 auto;
    }

    .refer_goodies_point div{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        min-width:0;
    }

    .refer_goodies_point div span{
        font-size:9.5px;
        line-height:1.2;
        white-space:normal;
        word-break:normal;
        display:block;
        width:100%;
    }

    .refer_goodies_point div strong{
        font-size:10.5px;
        line-height:1.2;
        white-space:normal;
        word-break:normal;
        overflow-wrap:break-word;
        display:block;
        width:100%;
    }

    .refer_goodies_actions{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        width:100%;
        max-width:320px;
        margin:16px auto 0;
    }

    .refer_goodies_actions > button{
        width:100%;
        height:44px;
        padding:0 16px;
        font-size:13px;
        font-weight:700;
        white-space:nowrap;
        border-radius:999px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:8px;
        box-sizing:border-box;
    }

    .refer_goodies_note{
        font-size:11.5px;
        line-height:1.45;
        display:flex;
        align-items:flex-start;
        justify-content:center;
        text-align:left;
        gap:8px;
        margin-top:14px;
        max-width:310px;
        margin-inline:auto;
    }

    .refer_goodies_note i{
        flex:0 0 auto;
        margin-top:2px;
        font-size:13px;
    }

    .refer_goodies_note span{
        flex:1;
        text-align:left;
        display:inline;
    }

}

/* ==========================================================
   2. REFERRAL ZONE + STATS
========================================================== */

.refer_zone_section{
    width:100%;
    padding:clamp(36px, 5vw, 68px) 0;
    background:#fff;
}

.refer_zone_container{
    max-width:1200px;
    margin-inline:auto;
    padding-inline:20px;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(24px, 4vw, 56px);
    align-items:start;
}

/* ---------- left: link + code ---------- */

.refer_zone_title{
    font-family:var(--font-sans);
    font-size:clamp(22px, 3.2vw, 34px);
    font-weight:800;
    line-height:1.2;
    color:var(--ink);
}

.refer_zone_title_accent{
    color:var(--primary);
}

.refer_zone_desc{
    margin-top:12px;
    max-width:30rem;
    font-family:var(--font-sans);
    font-size:clamp(13px, 1.1vw, 15px);
    line-height:1.55;
    color:#555;
}

.refer_zone_linkbox{
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:440px;
    padding:4px 4px 4px 14px;
    border:1.5px solid rgba(255,102,0,.25);
    border-radius:999px;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.03);
}

.refer_zone_linkicon{
    flex:none;
    color:var(--primary);
    font-size:13px;
}

.refer_zone_linkinput{
    flex:1;
    min-width:0;
    border:none;
    outline:none;
    background:transparent;
    font-family:var(--font-sans);
    font-size:13px;
    color:var(--ink);
}

.refer_zone_copylink{
    flex:none;
    padding:8px 18px;
    border:none;
    border-radius:999px;
    background:var(--primary);
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    transition:background var(--dur-base) var(--ease-out);
}

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

.refer_zone_coderow{
    margin-top:20px;
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
}

.refer_zone_codelabel{
    font-family:var(--font-sans);
    font-size:13.5px;
    font-weight:700;
    color:var(--ink);
}

.refer_zone_codebox{
    display:flex;
    align-items:center;
    gap:14px;
    padding:7px 16px;
    border:1.5px dashed rgba(255,102,0,.45);
    border-radius:999px;
    background:#FFF8F3;
}

.refer_zone_code{
    font-family:var(--font-sans);
    font-size:14px;
    font-weight:800;
    letter-spacing:.03em;
    color:var(--primary);
}

.refer_zone_copycode{
    border:none;
    background:transparent;
    font-family:var(--font-sans);
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    color:var(--primary);
    cursor:pointer;
}

.refer_zone_copycode:hover{
    text-decoration:underline;
}

/* ---------- right: stats ---------- */

.refer_zone_stats_title{
    font-family:var(--font-sans);
    font-size:clamp(22px, 3.2vw, 34px);
    font-weight:800;
    line-height:1.2;
    color:var(--ink);
}

.refer_zone_community{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:8px;
    padding:5px 14px;
    border:1px solid rgba(255,102,0,.22);
    border-radius:999px;
    background:#FFF8F3;
    font-family:var(--font-sans);
    font-size:11.5px;
    font-weight:500;
    line-height:1.4;
    color:#555;
}

.refer_zone_community strong{
    font-weight:800;
    color:var(--primary);
}

.refer_zone_community i{
    font-size:11.5px;
    color:var(--primary);
}

/* Compact Horizontal 2x2 Stats Cards */
.refer_zone_stats{
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.refer_zone_stat{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    background:#FFF8F3;
    border:1px solid rgba(255,102,0,0.15);
    border-radius:12px;
    box-shadow:0 2px 8px rgba(0,0,0,0.02);
    transition:transform 0.2s ease, border-color 0.2s ease;
}

.refer_zone_stat:hover{
    transform:translateY(-2px);
    border-color:rgba(255,102,0,0.35);
}

.refer_zone_stat div{
    display:flex;
    flex-direction:column;
    line-height:1.2;
    min-width:0;
}

.refer_zone_stat strong{
    font-family:var(--font-sans);
    font-size:20px;
    font-weight:800;
    color:var(--ink);
}

.refer_zone_stat span{
    font-family:var(--font-sans);
    font-size:11px;
    color:#666;
    font-weight:500;
}

.refer_zone_stat_icon{
    flex:none;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:8px;
    background:rgba(255,102,0,0.12);
    color:var(--primary);
    font-size:14px;
}

.refer_zone_redeem{
    margin-top:20px;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 24px;
    border:none;
    border-radius:999px;
    background:var(--primary);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.refer_zone_redeem:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,102,0,.25);
}

@media (max-width:900px){
    .refer_zone_container{
        grid-template-columns:1fr;
        gap:32px;
    }
}

@media (max-width:640px){

    .refer_zone_section{
        padding:28px 0;
    }

    .refer_zone_container{
        padding-inline:16px;
        gap:24px;
    }

    .refer_zone_left,
    .refer_zone_right{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .refer_zone_title,
    .refer_zone_stats_title{
        font-size:clamp(19px, 5.2vw, 25px);
        text-wrap:balance;
    }

    .refer_zone_desc{
        font-size:clamp(13px, 3.2vw, 14.5px);
        line-height:1.55;
        margin-top:8px;
        text-wrap:balance;
    }

    .refer_zone_linkbox{
        width:100%;
        max-width:100%;
        padding:4px 4px 4px 14px;
        gap:8px;
        margin-top:14px;
    }

    .refer_zone_linkinput{
        font-size:13px;
    }

    .refer_zone_copylink{
        padding:8px 16px;
        font-size:12.5px;
    }

    .refer_zone_coderow{
        width:100%;
        justify-content:center;
        gap:10px;
        margin-top:14px;
    }

    .refer_zone_codelabel{
        font-size:13px;
    }

    .refer_zone_codebox{
        padding:7px 14px;
        gap:10px;
    }

    .refer_zone_code{
        font-size:14px;
    }

    .refer_zone_copycode{
        font-size:12.5px;
    }

    .refer_zone_community{
        font-size:12px;
        padding:5px 14px;
        margin-top:8px;
    }

    .refer_zone_stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        width:100%;
        margin-top:14px;
    }

    .refer_zone_stat{
        padding:10px 12px;
        gap:8px;
        border-radius:10px;
        text-align:left;
    }

    .refer_zone_stat strong{
        font-size:19px;
    }

    .refer_zone_stat span{
        font-size:11.5px;
    }

    .refer_zone_stat_icon{
        width:28px;
        height:28px;
        font-size:12.5px;
        border-radius:6px;
    }

    .refer_zone_redeem{
        max-width:280px;
        margin-top:18px;
        padding:11px 24px;
        font-size:13.5px;
    }

}

/* =====================================================
   3. TRANSPARENCY / REFERRAL RULES
===================================================== */

.refer_rules_section{
    width:100%;
    padding:clamp(36px, 4.5vw, 56px) 0;
    background:#FFF8F3;
}

.refer_rules_container{
    max-width:760px;
    margin-inline:auto;
    padding-inline:20px;
    text-align:center;
}

.refer_rules_icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 14px rgba(255,102,0,.15);
    color:var(--primary);
    font-size:19px;
}

.refer_rules_title{
    margin-top:16px;
    font-family:var(--font-sans);
    font-size:clamp(20px, 3vw, 30px);
    font-weight:800;
    line-height:1.2;
    color:var(--ink);
}

.refer_rules_title_accent{
    color:var(--primary);
}

.refer_rules_desc{
    margin-top:10px;
    font-family:var(--font-sans);
    font-size:clamp(12px, 1.1vw, 14.5px);
    line-height:1.6;
    color:#555;
    max-width:580px;
    margin-inline:auto;
}

.refer_rules_link{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 18px;
    border-radius:999px;
    background:rgba(255,102,0,0.08);
    border:1px solid rgba(255,102,0,0.22);
    font-family:var(--font-sans);
    font-size:12.5px;
    font-weight:700;
    color:var(--primary);
    text-decoration:none;
    transition:gap var(--dur-base) var(--ease-out), background 0.2s ease;
}

.refer_rules_link:hover{
    gap:12px;
    background:rgba(255,102,0,0.14);
}

@media (max-width:640px){
    .refer_rules_section{
        padding:26px 0;
    }
    .refer_rules_container{
        padding-inline:16px;
    }
    .refer_rules_icon{
        width:40px;
        height:40px;
        font-size:17px;
        border-radius:10px;
    }
    .refer_rules_title{
        font-size:clamp(18px, 5vw, 24px);
        margin-top:12px;
        text-wrap:balance;
    }
    .refer_rules_desc{
        font-size:clamp(13px, 3.2vw, 14.5px);
        line-height:1.55;
        margin-top:8px;
        text-wrap:balance;
    }
    .refer_rules_link{
        font-size:13px;
        padding:7px 18px;
        margin-top:16px;
    }
}

/* =====================================================
   4. FINAL CTA
===================================================== */

.refer_final_section{
    width:100%;
    padding:clamp(36px, 5vw, 64px) 0;
    background:#fff;
}

.refer_final_container{
    max-width:1000px;
    margin-inline:auto;
    padding-inline:20px;
    text-align:center;
}

.refer_final_title{
    font-family:var(--font-sans);
    font-size:clamp(20px, 3vw, 32px);
    font-weight:800;
    line-height:1.2;
    text-wrap:balance;
    color:var(--ink);
}

.refer_final_title_accent{
    color:var(--primary);
}

.refer_final_desc{
    margin-top:12px;
    max-width:620px;
    margin-inline:auto;
    font-family:var(--font-sans);
    font-size:clamp(12.5px, 1.1vw, 14.5px);
    line-height:1.6;
    color:#555;
}

.refer_final_cta{
    margin-top:20px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 24px;
    border:none;
    border-radius:999px;
    background:var(--primary);
    font-family:var(--font-sans);
    font-size:13px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    transition:
        background var(--dur-base) var(--ease-out),
        transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.refer_final_cta:hover{
    background:var(--primary-hover);
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,102,0,.25);
}

@media (max-width:640px){
    .refer_final_section{
        padding:28px 0;
    }
    .refer_final_container{
        padding-inline:16px;
    }
    .refer_final_title{
        font-size:clamp(18px, 5vw, 24px);
        text-wrap:balance;
    }
    .refer_final_desc{
        font-size:clamp(13px, 3.2vw, 14.5px);
        line-height:1.55;
        margin-top:8px;
        text-wrap:balance;
    }
    .refer_final_cta{
        font-size:13.5px;
        padding:11px 24px;
        margin-top:16px;
    }
}