/* =====================================================
   ALBUKHR USER PROFILE CSS
   Clean Final v2
   PART 1
===================================================== */

/* =====================================
   RESET
===================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =====================================
   ROOT COLORS
===================================== */

:root{

    --primary:#0f7a3d;
    --primary-light:#19b35b;
    --primary-soft:#eef9f2;

    --white:#ffffff;

    --bg:#f5f7f6;

    --text:#111111;

    --text-light:#666666;

    --border:#e8ecea;

    --shadow:0 8px 24px rgba(0,0,0,.08);

    --radius:22px;

}

/* =====================================
   BODY
===================================== */

body{

    background:var(--bg);

    color:var(--text);

    font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

    overflow-x:hidden;

    padding-bottom:110px;

}

/* =====================================
   PAGE
===================================== */

.profile-page{

    width:100%;
    max-width:700px;

    margin:auto;

}

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

.profile-header{

    position:sticky;

    top:0;

    z-index:100;

    height:64px;

    padding:0 18px;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:space-between;

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

}

.profile-header h2{

    font-size:19px;

    font-weight:700;

    color:var(--text);

}

.back-btn,
.close-btn{

    width:42px;
    height:42px;

    border:none;

    border-radius:50%;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:17px;

    cursor:pointer;

    transition:.25s;

}

.back-btn:active,
.close-btn:active{

    transform:scale(.95);

}

/* =====================================
   HERO
===================================== */

.profile-hero{

    margin:18px;

    padding:28px 22px;

    background:#fff;

    border-radius:28px;

    box-shadow:var(--shadow);

    text-align:center;

}

/* =====================================
   AVATAR
===================================== */

.avatar-wrapper{

    position:relative;

    width:110px;

    margin:auto;

}

#profileAvatar{

    width:110px;
    height:110px;

    border-radius:50%;

    object-fit:cover;

    background:#eef9f2;

    border:4px solid #fff;

    box-shadow:
    0 8px 22px rgba(15,122,61,.18);

}

.change-photo{

    position:absolute;

    right:0;
    bottom:2px;

    width:34px;
    height:34px;

    border:none;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

}

/* =====================================
   USER DETAILS
===================================== */

.hero-details{

    margin-top:18px;

}

.hero-details h2{

    font-size:24px;

    font-weight:700;

    color:#111;

}

.hero-details p{

    margin-top:8px;

    color:#777;

    font-size:14px;

}

/* =====================================
   VERIFIED BADGE
===================================== */

.verified-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    margin-top:10px;

    padding:8px 16px;

    background:#eef9f2;

    color:var(--primary);

    border-radius:999px;

    font-size:13px;

    font-weight:700;

}

.verified-badge i{

    color:#19b35b;

}

/* =====================================
   CONTRIBUTOR ID
===================================== */

.contributor-id{

    margin-top:18px;

    padding:14px 16px;

    background:#f8faf9;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}

.contributor-id span{

    font-size:13px;

    color:#777;

}

.contributor-id strong{

    color:#111;

    font-size:15px;

}

.copy-btn{

    border:none;

    background:none;

    color:var(--primary);

    font-size:17px;

    cursor:pointer;

   }
/* =====================================================
   ALBUKHR USER PROFILE CSS
   Clean Final v2
   PART 2
===================================================== */

/* =====================================
   HERO ACTIONS
===================================== */

.hero-actions{

    display:flex;

    gap:14px;

    margin:0 18px 18px;

}

.hero-actions button{

    flex:1;

    height:48px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    transition:.25s ease;

}

.edit-profile-btn{

    background:var(--primary);

    color:#fff;

    box-shadow:0 8px 20px rgba(15,122,61,.18);

}

.edit-profile-btn:active{

    transform:scale(.97);

}

.share-profile-btn{

    background:#fff;

    color:var(--primary);

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

}

.share-profile-btn:active{

    transform:scale(.97);

}

.hero-actions i{

    margin-right:8px;

}

/* =====================================
   PROFILE CARD
===================================== */

.profile-card{

    background:#fff;

    margin:18px;

    padding:20px;

    border-radius:24px;

    box-shadow:var(--shadow);

}

/* =====================================
   CARD TITLE
===================================== */

.card-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:17px;

    font-weight:700;

    color:var(--text);

}

.card-title i{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:17px;

}

/* =====================================
   INFO LIST
===================================== */

.profile-info-list{

    display:flex;

    flex-direction:column;

}

/* =====================================
   INFO ROW
===================================== */

.info-row{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:14px 0;

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

}

.info-row:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.info-row span{

    font-size:14px;

    color:var(--text-light);

}

.info-row strong{

    font-size:15px;

    font-weight:600;

    color:var(--text);

    text-align:right;

    word-break:break-word;

}

/* =====================================
   STATUS COLORS
===================================== */

.status-active{

    color:#18b25b !important;

}

.status-pending{

    color:#ff9800 !important;

}

.status-inactive{

    color:#999 !important;

}

.status-danger{

    color:#d32f2f !important;

}

/* =====================================
   BADGES
===================================== */

.status-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:76px;

    padding:6px 12px;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

}

.status-badge.success{

    background:#eaf9f0;

    color:#18b25b;

}

.status-badge.warning{

    background:#fff6dd;

    color:#f5a300;

}

.status-badge.danger{

    background:#fdecec;

    color:#d32f2f;

}

.status-badge.neutral{

    background:#f3f4f6;

    color:#666;

}
/* =====================================================
   ALBUKHR USER PROFILE CSS
   Clean Final v2
   PART 3
===================================================== */


/* =====================================
   WALLET GRID
===================================== */

.wallet-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}


/* =====================================
   WALLET ITEM
===================================== */

.wallet-item{

    background:#f8fbf9;

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

    border-radius:18px;

    padding:18px 16px;

    text-align:center;

    transition:.25s ease;

}

.wallet-item:active{

    transform:scale(.98);

}

.wallet-label{

    display:block;

    color:var(--text-light);

    font-size:13px;

    margin-bottom:10px;

}

.wallet-item h2{

    font-size:24px;

    font-weight:700;

    color:var(--primary);

    line-height:1.2;

}


/* =====================================
   STATS GRID
===================================== */

.stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}


/* =====================================
   STAT BOX
===================================== */

.stat-box{

    background:#f8fbf9;

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

    border-radius:18px;

    padding:18px 14px;

    text-align:center;

    transition:.25s ease;

}

.stat-box:active{

    transform:scale(.98);

}


/* =====================================
   STAT ICON
===================================== */

.stat-box i{

    width:52px;

    height:52px;

    margin:auto;

    margin-bottom:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:20px;

}


/* =====================================
   STAT VALUE
===================================== */

.stat-box h3{

    font-size:22px;

    font-weight:700;

    color:var(--text);

    margin-bottom:6px;

}


/* =====================================
   STAT LABEL
===================================== */

.stat-box span{

    display:block;

    color:var(--text-light);

    font-size:13px;

    line-height:1.35;

}


/* =====================================
   SMALL ANIMATION
===================================== */

.wallet-item:hover,
.stat-box:hover{

    box-shadow:0 10px 24px rgba(15,122,61,.08);

    transform:translateY(-2px);

}


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

@media(max-width:420px){

.wallet-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.wallet-item h2{

font-size:21px;

}

.stat-box h3{

font-size:20px;

}

}
/* =====================================================
   ALBUKHR USER PROFILE CSS
   Clean Final v2
   PART 4
===================================================== */


/* =====================================
   MENU LIST
===================================== */

.menu-list{

    display:flex;
    flex-direction:column;

}


/* =====================================
   MENU ITEM
===================================== */

.menu-item{

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

    padding:16px 0;

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

}

.menu-item:last-child{

    border-bottom:none;

}


/* =====================================
   MENU LEFT
===================================== */

.menu-left{

    display:flex;
    align-items:center;
    gap:14px;

}

.menu-left i{

    width:38px;
    height:38px;

    border-radius:12px;

    background:var(--primary-soft);

    color:var(--primary);

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

    font-size:16px;

}

.menu-left span{

    font-size:15px;

    color:var(--text);

    font-weight:600;

}


/* =====================================
   RIGHT ICON
===================================== */

.menu-item .fa-angle-right{

    color:#999;

    font-size:15px;

}


/* =====================================
   QUICK ACTIONS GRID
===================================== */

.quick-actions-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}


/* =====================================
   QUICK BUTTON
===================================== */

.quick-btn{

    border:none;

    background:#f8fbf9;

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

    border-radius:18px;

    padding:20px 12px;

    cursor:pointer;

    transition:.25s ease;

}

.quick-btn:hover{

    background:#eef9f2;

}

.quick-btn:active{

    transform:scale(.97);

}

.quick-btn i{

    display:block;

    font-size:24px;

    color:var(--primary);

    margin-bottom:10px;

}

.quick-btn span{

    display:block;

    font-size:14px;

    font-weight:600;

    color:var(--text);

}


/* =====================================
   TOGGLE SWITCH
===================================== */

.switch{

    position:relative;

    display:inline-block;

    width:50px;

    height:28px;

}

.switch input{

    opacity:0;

    width:0;

    height:0;

}

.slider{

    position:absolute;

    inset:0;

    cursor:pointer;

    background:#d6d6d6;

    border-radius:999px;

    transition:.3s;

}

.slider::before{

    content:"";

    position:absolute;

    width:22px;

    height:22px;

    left:3px;

    top:3px;

    background:#fff;

    border-radius:50%;

    transition:.3s;

}

.switch input:checked + .slider{

    background:var(--primary);

}

.switch input:checked + .slider::before{

    transform:translateX(22px);

}

/* =====================================
   LOGOUT SECTION
===================================== */

.logout-section{
    padding:24px 20px 35px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.logout-button{
    width:100%;
    max-width:340px;
    height:54px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    border:none;
    outline:none;
    border-radius:18px;

    background:linear-gradient(
        135deg,
        #0f7a3d,
        #169b50
    );

    color:#fff;
    font-size:16px;
    font-weight:700;

    cursor:pointer;
    transition:.25s ease;

    box-shadow:0 10px 25px rgba(15,122,61,.25);
}

.logout-button:hover{
    transform:translateY(-2px);
}

.logout-button:active{
    transform:scale(.98);
}

.logout-button i{
    font-size:18px;
}

/* =====================================
   WALLET ADDRESS
===================================== */

#walletAddress{

    font-size:13px;

    word-break:break-all;

}


/* =====================================
   SECURITY LABEL
===================================== */

.security-label{

    color:#18b25b;

    font-weight:700;

}


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

@media(max-width:480px){

.quick-actions-grid{

grid-template-columns:1fr 1fr;

}

.menu-left span{

font-size:14px;

}

.quick-btn{

padding:16px 10px;

}

.quick-btn i{

font-size:21px;

}

}

/* ===============================
FOOTER
=============================== */

.profile-footer{

    text-align:center;

    padding:30px 20px;

    color:#666;

}

.footer-logo{

    width:70px;

    height:70px;

    object-fit:contain;

    display:block;

    margin:0 auto 15px;

    border-radius:18px;

    box-shadow:0 8px 20px rgba(15,122,61,.15);

}

.profile-footer h3{

    font-size:20px;

    color:#222;

    margin-bottom:8px;

}

.profile-footer p{

    font-size:14px;

    color:#666;

    line-height:1.6;

    margin-bottom:10px;

}

.profile-footer small{

    font-size:12px;

    color:#999;

}

/* ==========================================
   ANIMATIONS
========================================== */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(12px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

.profile-card,
.profile-hero,
.hero-actions,
.logout-section,
.profile-footer{

    animation:fadeIn .35s ease;

}

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

@media (max-width:480px){

.profile-header h2{

font-size:18px;

}

.profile-card{

margin:14px;
padding:18px;

}

.wallet-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr 1fr;

}

.quick-actions-grid{

grid-template-columns:1fr 1fr;

}

.avatar-wrapper img{

width:92px;
height:92px;

}

}

/* ==========================================
   TABLETS
========================================== */

@media (min-width:768px){

.profile-page{

max-width:720px;
margin:auto;

}

.wallet-grid{

grid-template-columns:repeat(2,1fr);

}

.stats-grid{

grid-template-columns:repeat(4,1fr);

}

.quick-actions-grid{

grid-template-columns:repeat(4,1fr);

}

}

/* ==========================================
   UTILITIES
========================================== */

.hidden{
display:none!important;
}

.text-success{
color:#18b25b!important;
}

.text-danger{
color:#d93025!important;
}

.text-warning{
color:#f59e0b!important;
}

.text-center{
text-align:center;
}

.mt-10{
margin-top:10px;
}

.mt-20{
margin-top:20px;
}

.mb-10{
margin-bottom:10px;
}

.mb-20{
margin-bottom:20px;
}

/* ==========================================
   END OF FILE
   ALBUKHR USER PROFILE CSS
   VERSION 1.0 CLEAN FINAL
========================================== */

/* ==========================
   DISABLED QUICK BUTTON
========================== */

.disabled-btn{

    opacity:.55;

    filter:grayscale(.2);

    position:relative;

}

.disabled-btn::after{

    content:"Soon";

    position:absolute;

    top:8px;
    right:8px;

    background:#f59e0b;
    color:#fff;

    font-size:9px;
    font-weight:700;

    padding:2px 6px;

    border-radius:20px;

}