.referral-hero {
    position: relative;
    width: 100%;
    background: var(--brand-navy);
    color: var(--white);
    padding: 20px 60px;
    border-radius: 24px;
    /* height: 200px; */
    overflow: hidden;
}

/* Texture Overlay */
.referral-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.08"/%3E%3C/svg%3E');
    pointer-events: none;
    z-index: 1;
}

.referral-content {
    position: relative;
    z-index: 2;
}

.referral-hero h1 {
    font-size: 3rem;
    line-height: 1.1;
    margin-bottom: 20px;
}
.referral-hero p{
    font-size: 0.89rem;
}
.referral-hero p strong {
    color: var(--sky-blue);
}

.text-teal {
    color: var(--brand-teal);
}

.referral-content .badge-active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.referral-input-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    padding: 8px 8px 8px 20px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin: 20px 0;
    max-width: 600px;
}

.link-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
}

.copy-btn {
    background: var(--brand-teal);
    color: var(--white);
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
}

.referral-stats {
    display: flex;
    gap: 30px;
    font-size: 1rem;
}

/* Responsive Layout */
@media (max-width: 768px) {
    .referral-hero {
        padding: 30px;
    }

    .referral-hero h1 {
        font-size: 2rem;
    }

    .referral-input-box {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .copy-btn {
        width: 100%;
    }
}

/* Container Layout */
.referral-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

/* Card Styling */
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all 0.2s ease;
}

.stat-card:hover {
  border-color: var(--brand-navy);
  box-shadow: 0 4px 12px rgba(0, 26, 114, 0.08);
}

.stat-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-main);
  border-radius: 10px;
  color: var(--sky-blue);
  font-size: 1.25rem;
}

.stat-card__title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 4px 0;
}

.stat-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.2;
}

.stat-card__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0 0 3px 0;
}

/* Trends */
.stat-card__trend {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-card__trend--positive {
  color: var(--brand-teal);
}



/* Mobile Responsive adjustment */
@media (max-width: 640px) {
  .referral-dashboard {
    grid-template-columns: 1fr;
  }
}


/* SECTION */



.flec-referral-card{
    background:var(--white);
    border-radius:20px;
    padding:36px;
    width:100%;
    max-width:900px;
    border:1px solid var(--border);
    box-shadow:0 10px 30px rgba(0,0,0,0.04);

}



/* TITLE */

.flec-referral-title{

    display:flex;
    align-items:center;

    gap:10px;

    font-size:20px;
    font-weight:600;

    color:var(--text-main);

    margin-bottom:30px;

}



/* STEPS */

.flec-referral-steps{

    display:flex;

    flex-direction:column;

    gap:32px;

}



/* STEP */

.flec-referral-step{

    display:flex;

    gap:18px;

}



/* ICON */

.flec-referral-step-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

    flex-shrink:0;

}



/* ICON COLORS */

.flec-referral-icon-blue{

    background:rgba(59,130,246,0.12);

    color:var(--sky-blue);

}

.flec-referral-icon-green{

    background:rgba(0,175,102,0.12);

    color:var(--brand-teal);

}

.flec-referral-icon-orange{

    background:rgba(245,158,11,0.12);

    color:#F59E0B;

}



/* STEP BODY */

.flec-referral-step-body{

    display:flex;

    flex-direction:column;

}



/* STEP LABEL */

.flec-referral-step-label{

    font-size:11px;

    letter-spacing:.08em;

    font-weight:600;

    color:var(--sky-blue);

}



/* HEADING */

.flec-referral-step-heading{

    font-size:16px;

    font-weight:600;

    color:var(--text-main);

    margin:6px 0;

}



/* TEXT */

.flec-referral-step-text{

    font-size:14px;

    color:var(--text-muted);

    line-height:1.6;

    max-width:620px;

}



/* LINK PILL */

.flec-referral-link-pill{

    margin-top:12px;

    display:inline-block;

    padding:8px 14px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--brand-navy);

    font-size:13px;

    font-weight:500;

}



/* BADGE */

.flec-referral-badge{

    margin-top:12px;

    display:inline-block;

    padding:7px 14px;

    border-radius:999px;

    background:rgba(0,175,102,0.12);

    color:var(--brand-teal);

    font-size:13px;

    font-weight:500;

}



/* INFO BOX */

.flec-referral-info-box{

    margin-top:30px;

    padding:16px;

    border-radius:14px;

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

    background:#F8FAFC;

    font-size:13px;

    color:var(--text-muted);

    line-height:1.6;

}



/* TERMS LINK */

.flec-referral-terms-link{

    color:var(--brand-navy);

    font-weight:500;

    text-decoration:none;

}



/* RESPONSIVE */

@media (max-width:768px){

    .flec-referral-card{

        padding:24px;

    }

    .flec-referral-step{

        gap:14px;

    }

    .flec-referral-step-icon{
        width:36px;
        height:36px;
        font-size:16px;

    }

}





.flec-ref-table-card{
    background:var(--white);
    border-radius:18px;
    border:1px solid var(--border);
    overflow:hidden;
}


/* HEADER */

.flec-ref-table-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 24px;
    border-bottom:1px solid var(--border);
}

.flec-ref-table-title{
    font-size:18px;
    font-weight:600;
    color:var(--text-main);
}

.flec-ref-table-controls{
    display:flex;
    gap:12px;
}


/* SEARCH */

.flec-ref-table-search input{
    padding:9px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:#F1F5F9;
    font-size:14px;
}


/* FILTER */

.flec-ref-table-filters{
    display:flex;
    background:#F1F5F9;
    padding:4px;
    border-radius:10px;
}

.flec-ref-table-filter{
    border:none;
    background:none;
    padding:7px 14px;
    font-size:13px;
    cursor:pointer;
    border-radius:8px;
}

.flec-ref-table-filter.active{
    background:var(--brand-navy);
    color:white;
}


/* TABLE */

.flec-ref-table{
    width:100%;
    border-collapse:collapse;
}

.flec-ref-table thead{
    background:#F8FAFC;
}

.flec-ref-table th{
    text-align:left;
    padding:14px 24px;
    font-size:12px;
    letter-spacing:.08em;
    color:#64748b;
}

.flec-ref-table td{
    padding:16px 24px;
    border-top:1px solid var(--border);
    font-size:14px;
}


/* USER */

.flec-ref-table-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.flec-ref-table-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    color:white;
    font-size:13px;
}

.flec-ref-avatar-purple{background:#7C3AED;}
.flec-ref-avatar-blue{background:#1D4ED8;}
.flec-ref-avatar-orange{background:#D97706;}
.flec-ref-avatar-green{background:#16A34A;}
.flec-ref-avatar-red{background:#DC2626;}
.flec-ref-avatar-navy{background:#001A72;}

.flec-ref-table-name{
    font-weight:500;
}

.flec-ref-table-email{
    font-size:12px;
    color:var(--text-muted);
}


/* STATUS */

.flec-ref-status-paid{
    background:rgba(0,175,102,0.15);
    color:var(--brand-teal);
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
    white-space: nowrap;
}

.flec-ref-status-pending{
    background:rgba(245,158,11,0.15);
    color:#B45309;
    padding:6px 12px;
    border-radius:999px;
    font-size:12px;
}


/* EARNED */

.flec-ref-earned{
    color:var(--brand-teal);
    font-weight:600;
}

.flec-ref-earned.pending{
    color:#6B7280;
}


/* MOBILE */

@media(max-width:900px){

.flec-ref-table-controls{
    flex-direction:column;
    gap:8px;
}

.flec-ref-table-wrapper{
    overflow-x:auto;
}

}