/* =========================================================
   NARAVIBE — style.css
   Rangi: Green #0B8457 | Deep Green #12442B | Navy Text #16233A | Gold #FBC834
   Font: Inter (consistent kila section)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
    --green:#0B8457;
    --green-light:#0FA968;
    --green-dark:#0A6B47;
    --green-deep:#12442B;
    --green-darkest:#0E2A1C;

    --green-pale:#E8F6EE;
    --green-paler:#F3FBF6;
    --green-line: rgba(11,132,87,0.16);

    --gold:#FBC834;

    --navy:#16233A;
    --navy-soft:#4A5A70;
    --muted:#7E8B93;

    --white:#FFFFFF;
    --line: rgba(22,35,58,0.08);

    --radius-lg:22px;
    --radius:16px;
    --radius-sm:11px;

    --shadow-card: 0 8px 26px rgba(14,60,40,0.09);
    --shadow-pop: 0 24px 60px rgba(10,40,26,0.35);

    --grad-btn: linear-gradient(135deg, #0FA968 0%, #0B8457 55%, #0A6B47 100%);
    --grad-dark-btn: linear-gradient(135deg, #1B5636 0%, #12442B 100%);
    --grad-hero: linear-gradient(180deg, #EFFAF3 0%, #F6FBF8 55%, #FFFFFF 100%);
    --grad-footer: linear-gradient(180deg, #E4F1E9 0%, #DCEEE3 100%);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
    font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:var(--green-paler);
    color:var(--navy);
    min-height:100vh;width:100%;
    overflow-x:hidden;
    display:flex;flex-direction:column;
}

h1,h2,h3,h4{font-family:'Inter', sans-serif;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--green);color:#fff;}
::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:var(--green-paler);}
::-webkit-scrollbar-thumb{background:var(--green);border-radius:10px;}
:focus-visible{outline:3px solid var(--green-light);outline-offset:2px;border-radius:6px;}

/* ============ LOGO ============ */
.brand-logo{display:inline-flex;flex-direction:column;gap:2px;white-space:nowrap;}
.logo-img{height:34px;width:auto;display:block;}
.logo-tag{font-size:9.5px;font-weight:600;letter-spacing:0.6px;color:var(--muted);margin-left:2px;}

/* ============ HEADER ============ */
.app-header{
    position:sticky;top:0;z-index:1000;
    background:
        radial-gradient(circle at 15% 0%, rgba(15,169,104,0.35), transparent 55%),
        radial-gradient(circle at 90% 100%, rgba(11,132,87,0.25), transparent 50%),
        linear-gradient(135deg, rgba(8,20,14,0.94) 0%, rgba(10,30,20,0.92) 50%, rgba(6,16,11,0.96) 100%);
    backdrop-filter: blur(10px);
    box-shadow:0 8px 26px rgba(4,20,12,0.35);
    border-bottom:1px solid rgba(15,169,104,0.25);
}
.app-header .logo-tag{color:rgba(255,255,255,0.6);}

.header-row-top{
    max-width:1320px;margin:0 auto;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;padding:14px 26px 10px;
}
.header-left{display:flex;align-items:center;justify-self:start;}

.header-nav{
    display:flex;align-items:center;gap:2px;
    background:rgba(255,255,255,0.07);
    padding:5px;border-radius:30px;
    border:1px solid rgba(255,255,255,0.10);
    justify-self:center;
}
.header-nav a{
    color:rgba(255,255,255,0.72);font-weight:600;font-size:13.5px;
    padding:9px 18px;border-radius:24px;
    transition:all .22s ease;
    display:flex;align-items:center;gap:6px;
}
.header-nav a:hover{color:#fff;}
.header-nav a.active{background:#fff;color:var(--green-dark);box-shadow:0 3px 10px rgba(0,0,0,0.25);}

.header-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-self:end;}

.btn-login-top{
    background:rgba(0,0,0,0.55);
    color:#fff;font-weight:700;font-size:13px;
    padding:10px 22px;border-radius:26px;
    border:1px solid rgba(255,255,255,0.14);cursor:pointer;
    display:flex;align-items:center;gap:8px;
    transition:all .22s ease;
}
.btn-login-top svg{flex-shrink:0;}
.btn-login-top:hover{background:rgba(0,0,0,0.75);border-color:rgba(255,255,255,0.28);}

.nav-toggle{
    display:none;
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    width:40px;height:40px;border-radius:10px;
    cursor:pointer;flex-shrink:0;
}
.nav-toggle span{
    width:17px;height:2px;background:#fff;border-radius:2px;
    transition:all .25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---- Row 2: live / withdraw / balance ---- */
.header-row-bottom{
    padding:0 26px 16px;
}
.header-row-bottom-inner{
    max-width:1320px;margin:0 auto;
    display:flex;align-items:center;justify-content:center;
    gap:12px;flex-wrap:wrap;
}

.online-indicator{
    display:flex;align-items:center;gap:8px;
    font-size:12.5px;font-weight:700;color:#8FF0C2;
    padding:9px 18px;border-radius:24px;
    background:rgba(15,169,104,0.14);
    border:1.5px solid rgba(92,224,160,0.35);
}
.online-dot{
    width:8px;height:8px;background:#5CE0A0;border-radius:50%;
    box-shadow:0 0 8px rgba(92,224,160,0.8);
    animation:pulse-dot 1.6s infinite;flex-shrink:0;
}
.online-indicator strong{color:#fff;font-weight:800;}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.6);}}

.btn-withdraw-top{
    background:var(--grad-btn);
    color:#fff;font-weight:700;font-size:13px;
    padding:11px 22px;border-radius:26px;border:none;cursor:pointer;
    box-shadow:0 8px 18px rgba(11,132,87,0.4);
    display:flex;align-items:center;gap:8px;
    transition:all .22s ease;
}
.btn-withdraw-top svg{flex-shrink:0;}
.btn-withdraw-top:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(11,132,87,0.5);}

.balance-pill{
    background:rgba(0,0,0,0.5);
    border:1px solid rgba(255,255,255,0.12);
    color:#fff;
    padding:8px 20px;border-radius:24px;
    display:flex;align-items:center;gap:10px;
    cursor:pointer;min-width:170px;
    transition:all .22s ease;
}
.balance-pill:hover{border-color:rgba(92,224,160,0.5);}
.balance-pill .bp-text{display:flex;flex-direction:column;line-height:1.3;}
.balance-pill .bp-label{font-size:8.5px;letter-spacing:1.3px;text-transform:uppercase;color:rgba(255,255,255,0.5);font-weight:700;}
.balance-pill .bp-amount{font-size:13.5px;font-weight:800;color:var(--gold);}
.balance-pill .bp-eye{display:flex;align-items:center;opacity:0.85;flex-shrink:0;}

/* ============ HERO ============ */
.hero-section{
    background:var(--grad-hero);
    padding:5px 24px 34px;text-align:center;position:relative;overflow:hidden;
}
.hero-eyebrow{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--grad-dark-btn);
    color:#fff;font-weight:700;font-size:11.5px;letter-spacing:0.8px;
    padding:9px 20px;border-radius:24px;
    margin-bottom:24px;text-transform:uppercase;
    box-shadow:0 8px 18px rgba(18,68,43,0.25);
}
.hero-title{
    font-size:clamp(26px, 4.4vw, 44px);
    font-weight:800;color:var(--navy);
    line-height:1.28;max-width:820px;margin:0 auto 16px;
    letter-spacing:-0.5px;
}
.hero-title .accent{color:var(--green);}
.hero-sub{
    max-width:600px;margin:0 auto;color:var(--navy-soft);
    font-size:15.5px;line-height:1.75;font-weight:500;
}
.hero-divider{
    width:70px;height:4px;margin:24px auto 0;
    background:var(--green);border-radius:6px;
}

/* ============ MAIN / LIST ============ */
#main-page{flex:1;background:#fff;}
.content-wrapper{max-width:1320px;margin:0 auto;padding:36px 28px 20px;}

.section-label-row{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:22px;flex-wrap:wrap;gap:12px;
}
.section-label{
    font-size:13px;font-weight:800;letter-spacing:1.1px;
    text-transform:uppercase;color:var(--navy);
    display:flex;align-items:center;gap:10px;
}
.section-label::before{content:"";width:24px;height:4px;background:var(--green);border-radius:4px;display:inline-block;}

.btn-customer-services{
    display:flex;align-items:center;gap:8px;
    background:#fff;border:1.5px solid var(--line);
    color:var(--navy);font-weight:700;font-size:12.5px;
    padding:10px 18px;border-radius:24px;cursor:pointer;
    transition:all .22s ease;
}
.btn-customer-services svg{flex-shrink:0;}
.btn-customer-services:hover{border-color:var(--green);color:var(--green);}

.content-list{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
    gap:22px;width:100%;
}

/* ============ USER CARD ============ */
.user-card{
    background:var(--white);
    border-radius:var(--radius-lg);
    padding:20px;
    box-shadow:var(--shadow-card);
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
    transition:all .28s ease;
}
.user-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(14,60,40,0.14);
    border-color:var(--green-line);
}
.user-card::before{
    content:"";position:absolute;
    left:-46px;bottom:-46px;
    width:180px;height:180px;border-radius:50%;
    background:radial-gradient(circle, rgba(15,169,104,0.30) 0%, rgba(15,169,104,0.12) 45%, transparent 72%);
    z-index:0;pointer-events:none;
}
.user-card::after{
    content:"";position:absolute;
    left:20px;bottom:-70px;
    width:220px;height:140px;border-radius:50%;
    background:radial-gradient(ellipse, rgba(11,132,87,0.14) 0%, transparent 70%);
    z-index:0;pointer-events:none;
}
.card-top,.user-details,.action-row,.usd-row{position:relative;z-index:1;}

.card-top{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start;}
.avatar-wrap{position:relative;flex-shrink:0;width:58px;height:58px;}
.profile-img{
    width:58px;height:58px;border-radius:50%;object-fit:cover;
    border:2.5px solid var(--green);
    box-shadow:0 4px 12px rgba(14,60,40,0.18);
    display:block;
}
.avatar-dot{
    position:absolute;right:-1px;bottom:-1px;
    width:15px;height:15px;border-radius:50%;
    background:var(--green);border:2.5px solid #fff;
    box-shadow:0 0 0 1px rgba(11,132,87,0.3);
}
.user-info{flex:1;min-width:0;}
.user-name{font-weight:800;font-size:16.5px;color:var(--navy);display:inline-flex;align-items:center;gap:7px;}
.user-flag{font-size:17px;line-height:1;display:inline-flex;align-items:center;}
.flag-icon{
    width:20px;height:auto;border-radius:3px;
    box-shadow:0 0 0 1px rgba(22,35,58,0.12);
    vertical-align:middle;display:inline-block;
    object-fit:cover;
}
.chat-user-name .flag-icon{width:18px;margin-right:2px;}
.status-text{font-size:12px;color:var(--green);margin-top:5px;font-weight:700;display:flex;align-items:center;gap:5px;}
.status-text::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
.rating-row{display:flex;align-items:center;gap:5px;margin-top:5px;font-size:13px;color:var(--navy-soft);font-weight:700;}
.star{color:var(--gold);}

.date-badge{
    background:var(--green-pale);color:var(--green);
    font-size:11.5px;font-weight:700;
    padding:7px 12px;border-radius:20px;
    display:flex;align-items:center;gap:6px;white-space:nowrap;
    flex-shrink:0;
}
.date-badge svg{flex-shrink:0;}

.user-details{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    margin-bottom:16px;
}
.detail-box{
    background:var(--green-paler);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:10px 9px;
    display:flex;flex-direction:column;gap:5px;
    min-width:0;
}
.detail-box .db-icon{color:var(--green);display:flex;align-items:center;gap:4px;}
.detail-box .db-label{font-size:9.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.3px;}
.detail-box .db-value{font-size:12px;color:var(--navy);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.action-row{display:flex;gap:10px;align-items:stretch;}
.btn-chat{
    flex:1;
    background:#fff;color:var(--green);
    border:1.6px solid var(--green);
    padding:13px 14px;border-radius:var(--radius-sm);
    font-weight:700;font-size:12.5px;cursor:pointer;
    transition:all .22s ease;
    display:flex;align-items:center;justify-content:center;gap:6px;
    white-space:nowrap;
    box-sizing:border-box;
}
.btn-chat:hover{background:var(--green);color:#fff;}
.btn-chat svg{flex-shrink:0;}

.price-tag{
    flex:1;
    background:var(--grad-btn);
    color:#fff;padding:13px 14px;border-radius:var(--radius-sm);
    font-weight:800;font-size:13.5px;
    box-shadow:0 6px 16px rgba(11,132,87,0.3);
    display:flex;align-items:center;justify-content:center;
    box-sizing:border-box;border:1.6px solid transparent;
}
.usd-row{display:flex;justify-content:flex-end;margin-top:8px;}
.usd-equivalent{font-size:10.5px;color:var(--muted);font-weight:600;}

/* ============ PAGINATION ============ */
.pagination{
    grid-column:1/-1;
    display:flex;justify-content:center;align-items:center;gap:14px;
    padding:30px 0 12px;
}
.page-btn{
    background:var(--green-deep);color:#fff;border:none;
    padding:11px 22px;border-radius:24px;font-weight:700;font-size:13px;
    cursor:pointer;transition:all .22s ease;min-width:80px;
}
.page-btn:hover:not(:disabled){background:var(--green);transform:scale(1.04);}
.page-btn:disabled{opacity:0.35;cursor:not-allowed;}
.page-info{
    color:var(--navy);font-weight:700;font-size:13.5px;
    background:var(--green-paler);padding:9px 18px;border-radius:20px;
    border:1px solid var(--line);
}

/* ============ GENERIC INFO PAGE ============ */
.info-page{
    flex:1;background:var(--green-paler);
    display:flex;align-items:flex-start;justify-content:center;
    padding:44px 20px 60px;
}
.info-card{
    background:#fff;max-width:620px;width:100%;
    border-radius:26px;box-shadow:var(--shadow-card);
    border:1px solid var(--line);padding:38px 34px;
    position:relative;overflow:hidden;
}
.info-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:var(--grad-btn);}
.info-icon{
    width:64px;height:64px;border-radius:18px;background:var(--grad-btn);
    display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:18px;
    box-shadow:0 10px 24px rgba(11,132,87,0.3);
}
.info-card h1{font-size:24px;color:var(--navy);margin-bottom:14px;font-weight:800;}
.info-card p{color:var(--navy-soft);font-size:14.5px;line-height:1.85;margin-bottom:14px;}
.info-card p strong{color:var(--navy);}
.welcome-banner{
    background:var(--green-pale);border:1px solid var(--green-line);
    border-radius:14px;padding:14px 16px;margin-bottom:18px;
    font-size:13.5px;color:var(--green-dark);font-weight:700;
}
.info-divider{height:1px;background:var(--line);margin:20px 0;}
.info-buttons{display:flex;flex-direction:column;gap:12px;margin-top:22px;}
.balance-warn{
    background:var(--green-pale);border:1px solid var(--green-line);
    border-radius:14px;padding:16px;text-align:center;margin-bottom:18px;
}
.balance-warn .bw-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700;}
.balance-warn .bw-amount{font-size:30px;font-weight:800;color:var(--green);display:block;margin-top:4px;}

.contact-options{display:flex;flex-direction:column;gap:12px;margin:18px 0;}
.contact-option{
    display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;
    border:1.5px solid var(--line);background:var(--green-paler);
    transition:all .22s ease;
}
.contact-option:hover{border-color:var(--green);transform:translateX(4px);background:#fff;}
.contact-option-icon{
    width:44px;height:44px;border-radius:12px;background:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 10px rgba(14,60,40,0.12);flex-shrink:0;
}
.contact-option-text h3{font-size:15px;color:var(--navy);margin-bottom:2px;font-weight:700;}
.contact-option-text p{font-size:12px;color:var(--muted);margin:0;}
.contact-option-arrow{margin-left:auto;color:var(--green);font-size:18px;font-weight:800;}
.contact-info-text{
    background:var(--green-paler);border-radius:12px;padding:14px 16px;
    font-size:12.5px;color:var(--navy-soft);line-height:1.8;
}

/* ============ MESSAGING / CHAT PAGE ============ */
/* Ukurasa wa chat: flex column inayojaza dynamic viewport height (100dvh),
   ili chat-input-bar isipande/kufunika ujumbe wakati keyboard ya simu inafunguka. */
body[data-page="chat"]{
    height:100dvh;
    overflow:hidden;
}
body[data-page="chat"] #chat-details-container{
    flex:1;display:flex;flex-direction:column;min-height:0;
}
body[data-page="chat"] .app-header{flex-shrink:0;}

.chat-header-details{
    background:#fff;border-bottom:1px solid var(--line);
    display:flex;align-items:center;gap:14px;padding:16px 22px;
    flex-shrink:0;
}
.back-btn{
    color:var(--navy);cursor:pointer;
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
    background:var(--green-paler);border-radius:12px;transition:all .2s ease;flex-shrink:0;
}
.back-btn:hover{background:var(--green-pale);color:var(--green);}
.chat-profile-img{width:44px;height:44px;border-radius:14px;object-fit:cover;border:2px solid var(--green-pale);}
.chat-user-name{color:var(--navy);font-weight:800;font-size:15.5px;}
.chat-status{color:var(--green);font-size:11.5px;font-weight:700;margin-top:2px;display:flex;align-items:center;gap:5px;}
.chat-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block;}

.chat-body{
    flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    max-width:640px;width:100%;margin:0 auto;
    padding:20px 18px 24px;
    background:
        radial-gradient(circle at 8% 0%, rgba(11,132,87,0.05), transparent 40%),
        radial-gradient(circle at 95% 100%, rgba(11,132,87,0.05), transparent 40%);
}

.chat-bubble-row{display:flex;margin-bottom:6px;}
.chat-bubble-row.received{justify-content:flex-start;}
.chat-bubble-row.system{justify-content:center;}

.chat-info-banner{
    background:var(--grad-btn);color:#fff;
    font-size:12px;font-weight:700;padding:11px 18px;border-radius:16px;
    margin:0 0 22px;text-align:center;line-height:1.6;
    box-shadow:0 8px 20px rgba(11,132,87,0.22);
    display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.chat-info-banner svg{flex-shrink:0;}

.chat-bubble{
    max-width:78%;
    padding:13px 16px;border-radius:18px;
    font-size:14px;line-height:1.6;
    box-shadow:0 4px 14px rgba(14,60,40,0.08);
}
.chat-bubble.received{
    background:#fff;border:1px solid var(--line);
    border-bottom-left-radius:5px;color:var(--navy);
}
.typing-bubble{padding:15px 18px;}
.typing-dots{display:flex;gap:5px;align-items:center;}
.typing-dots span{
    width:7px;height:7px;border-radius:50%;background:var(--green);
    display:inline-block;animation:typingBounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2){animation-delay:0.15s;}
.typing-dots span:nth-child(3){animation-delay:0.3s;}
@keyframes typingBounce{
    0%,60%,100%{transform:translateY(0);opacity:0.45;}
    30%{transform:translateY(-5px);opacity:1;}
}
.chat-typing-label{
    font-size:11.5px;color:var(--muted);font-style:italic;font-weight:600;
    margin:6px 0 22px 4px;
}
.chat-timestamp{
    font-size:11px;color:var(--muted);font-weight:600;
    margin:7px 0 4px 4px;
}

.chat-input-bar{
    position:sticky;bottom:0;flex-shrink:0;
    background:#fff;border-top:1px solid var(--line);
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    box-shadow:0 -6px 20px rgba(14,60,40,0.06);
    z-index:60;
}
.chat-input-inner{
    max-width:640px;margin:0 auto;
    display:flex;align-items:center;gap:10px;
}
.chat-text-input{
    flex:1;border:1.5px solid var(--line);background:var(--green-paler);
    border-radius:24px;padding:13px 18px;font-size:14px;
    font-family:inherit;color:var(--navy);outline:none;
    transition:border-color .2s ease;
}
.chat-text-input:focus{border-color:var(--green);}
.chat-send-btn{
    background:var(--grad-btn);color:#fff;border:none;
    width:46px;height:46px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;flex-shrink:0;
    box-shadow:0 6px 16px rgba(11,132,87,0.35);
    transition:all .22s ease;
}
.chat-send-btn:hover{transform:scale(1.06);}
.chat-send-btn svg{margin-left:-1px;}

/* ============ BUTTONS (shared) ============ */
.btn-register{
    background:var(--grad-btn);color:#fff;border:none;
    padding:14px 22px;border-radius:16px;font-weight:800;font-size:14.5px;
    cursor:pointer;width:100%;
    box-shadow:0 10px 24px rgba(11,132,87,0.3);
    transition:all .22s ease;
    display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-register:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(11,132,87,0.4);}
.btn-back{
    background:transparent;color:var(--navy);border:2px solid var(--line);
    padding:12px 22px;border-radius:16px;font-weight:700;font-size:14px;
    cursor:pointer;width:100%;transition:all .22s ease;
}
.btn-back:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ============ LOGIN FORM ============ */
.login-form{margin-top:6px;}
.form-group{margin-bottom:16px;text-align:left;}
.form-label{
    display:block;font-size:12.5px;font-weight:700;color:var(--navy);
    margin-bottom:7px;
}
.form-input-wrap{position:relative;display:flex;align-items:center;}
.form-input{
    width:100%;border:1.5px solid var(--line);background:var(--green-paler);
    border-radius:14px;padding:13px 16px;font-size:14px;
    font-family:inherit;color:var(--navy);outline:none;
    transition:border-color .2s ease;
}
.form-input:focus{border-color:var(--green);}
.form-input-wrap .form-input{padding-right:44px;}
.password-toggle{
    position:absolute;right:12px;top:50%;transform:translateY(-50%);
    background:none;border:none;color:var(--muted);cursor:pointer;
    display:flex;align-items:center;padding:4px;
    transition:color .2s ease;
}
.password-toggle:hover{color:var(--green);}
.login-footer-note{
    text-align:center;font-size:13px;color:var(--navy-soft);
    margin-top:20px;font-weight:500;
}
.login-footer-note a{color:var(--green);font-weight:700;}
.login-footer-note a:hover{text-decoration:underline;}

/* ============ WHATSAPP HANGING BUTTON ============ */
#whatsapp-popup{
    position:fixed;bottom:26px;right:26px;z-index:9998;
    display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;
}
#whatsapp-popup img{
    width:58px;height:58px;border-radius:50%;background:#fff;padding:11px;
    box-shadow:0 10px 28px rgba(14,60,40,0.3);border:3px solid #fff;
    animation:float-wa 3s ease-in-out infinite;transition:transform .22s ease;
}
#whatsapp-popup:hover img{transform:scale(1.08);}
@keyframes float-wa{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.whatsapp-label{
    background:var(--green-deep);color:#fff;font-size:10.5px;font-weight:700;
    padding:5px 12px;border-radius:20px;white-space:nowrap;
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
}

/* ============ DOWNLOAD APP BUTTON (kushoto) ============ */
#download-app-popup{
    position:fixed;bottom:26px;left:26px;z-index:9998;
    display:none;align-items:center;
}
#download-app-btn{
    display:flex;align-items:center;gap:9px;
    background:var(--grad-btn);color:#fff;border:none;
    padding:13px 20px 13px 16px;border-radius:30px;
    font-weight:700;font-size:13px;cursor:pointer;
    box-shadow:0 10px 28px rgba(11,132,87,0.4);
    animation:float-wa 3s ease-in-out infinite;
    transition:transform .22s ease;
    white-space:nowrap;
}
#download-app-btn:hover{transform:scale(1.045);}
#download-app-btn svg{flex-shrink:0;}
#download-app-close{
    position:absolute;top:-8px;left:-8px;
    width:22px;height:22px;border-radius:50%;
    background:#fff;color:var(--navy);border:1.5px solid var(--line);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,0.2);
    z-index:1;transition:all .2s ease;
}
#download-app-close:hover{background:var(--navy);color:#fff;}

/* ============ MODALS ============ */
.modal{
    position:fixed;inset:0;background:rgba(14,42,28,0.55);backdrop-filter:blur(6px);
    z-index:99999;display:none;align-items:center;justify-content:center;padding:20px;
}
.modal-content{
    background:#fff;border-radius:26px;padding:38px 32px 32px;max-width:440px;width:100%;
    text-align:center;box-shadow:var(--shadow-pop);animation:modalSlide .3s ease;
    position:relative;max-height:90vh;overflow-y:auto;
}
@keyframes modalSlide{from{transform:scale(0.92) translateY(24px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}
.modal-close{
    position:absolute;top:16px;right:18px;font-size:24px;cursor:pointer;
    color:var(--muted);background:none;border:none;transition:color .2s;
}
.modal-close:hover{color:var(--green);}
.modal-icon{
    width:60px;height:60px;border-radius:18px;margin:0 auto 14px;background:var(--grad-btn);
    display:flex;align-items:center;justify-content:center;font-size:26px;
    box-shadow:0 10px 22px rgba(11,132,87,0.3);
}
.modal-content h2{color:var(--navy);font-size:21px;margin-bottom:14px;font-weight:800;}
.contact-subtitle{color:var(--muted);font-size:13.5px;margin-bottom:6px;}
.modal-balance-display{background:var(--green-paler);padding:14px;border-radius:14px;margin-bottom:14px;}
.modal-balance-label{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:0.6px;}
.modal-balance-amount{display:block;font-size:28px;font-weight:900;color:var(--green);margin-top:2px;}
.modal-divider{height:1px;background:var(--line);margin:14px 0;}
.modal-content p{color:var(--navy-soft);font-size:14.5px;line-height:1.75;}
.modal-small-text{font-size:12.5px !important;color:var(--muted) !important;}
.modal-buttons{display:flex;flex-direction:column;gap:11px;margin-top:20px;}

/* ============ FOOTER ============ */
.site-footer{
    width:100%;margin-top:auto;
    background:var(--grad-footer);
    color:var(--navy);padding:48px 28px 0;position:relative;overflow:hidden;
}
.footer-illustration{
    position:absolute;right:40px;bottom:70px;
    display:flex;align-items:flex-end;opacity:0.9;
    pointer-events:none;
}
.footer-content{
    max-width:1300px;margin:0 auto;position:relative;z-index:2;
    display:grid;grid-template-columns:1.3fr 1fr 1.1fr;
    gap:32px;padding-bottom:34px;
}
.footer-logo-block p{color:var(--navy-soft);font-size:12.5px;line-height:1.8;margin-top:12px;max-width:280px;}
.footer-socials{display:flex;gap:10px;margin-top:16px;}
.footer-socials a{
    width:34px;height:34px;border-radius:10px;background:var(--green);
    color:#fff;display:flex;align-items:center;justify-content:center;
    transition:all .2s ease;box-shadow:0 4px 10px rgba(11,132,87,0.25);
}
.footer-socials a:hover{background:var(--green-deep);transform:translateY(-2px);}
.footer-section h4{
    font-size:13.5px;letter-spacing:0.3px;color:var(--navy);margin-bottom:16px;font-weight:800;
}
.footer-section ul{list-style:none;}
.footer-section ul li{margin-bottom:11px;}
.footer-section ul li a{
    color:var(--navy-soft);font-size:13.5px;font-weight:600;transition:all .2s ease;
    display:inline-flex;align-items:center;gap:9px;
}
.footer-section ul li a svg{flex-shrink:0;color:var(--green);}
.footer-section ul li a:hover{color:var(--green);padding-left:3px;}
.footer-contact-item{margin-bottom:16px;}
.footer-contact-item .fc-title{
    color:var(--green-dark);font-weight:800;font-size:13.5px;
    display:flex;align-items:center;gap:9px;margin-bottom:4px;
    cursor:pointer;transition:all .2s ease;
}
.footer-contact-item .fc-title:hover{color:var(--green);padding-left:3px;}
.footer-contact-item .fc-title svg{flex-shrink:0;}
.footer-contact-item p{color:var(--navy-soft);font-size:12.5px;line-height:1.6;margin:0;}
.footer-bottom{
    background:var(--green);color:#fff;text-align:center;
    padding:16px 20px;font-size:12.5px;font-weight:600;
    position:relative;z-index:2;
}

/* ============ RESPONSIVE ============ */
@media screen and (max-width:1080px){
    .footer-content{grid-template-columns:1fr 1fr;}
    .footer-illustration{display:none;}
}

@media screen and (max-width:900px){
    .header-row-top{padding:12px 18px 8px;}
    .header-row-bottom{padding:0 18px 14px;}
    .header-left{gap:12px;}
}

@media screen and (max-width:768px){
    /* Grid inayotumika desktop haihitajiki tena simu; flex inahakikisha
       logo iko mwisho-kushoto na hamburger menu iko mwisho-kulia kabisa. */
    .header-row-top{
        display:flex;align-items:center;justify-content:space-between;
    }
    .header-left{justify-self:auto;}
    .header-right{justify-self:auto;}

    .nav-toggle{display:flex;}
    .header-nav{
        position:absolute;top:100%;left:16px;right:16px;
        flex-direction:column;align-items:stretch;
        background:#0A2016;border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:8px;
        box-shadow:0 16px 34px rgba(4,20,12,0.5);display:none;gap:4px;margin-top:10px;
    }
    .header-nav.open{display:flex;}
    .header-nav a{text-align:center;padding:12px;}
    .header-row-bottom-inner{justify-content:flex-start;}
    .hero-section{padding:38px 18px 26px;}
    .content-wrapper{padding:26px 16px 6px;}
    .content-list{grid-template-columns:1fr;}
    .info-card{padding:28px 22px;}
    .footer-content{grid-template-columns:1fr;text-align:left;gap:26px;}
}

@media screen and (max-width:480px){
    .logo-img{height:28px;}
    .btn-login-top span{display:none;}
    .btn-login-top{padding:10px;border-radius:12px;}
    .btn-withdraw-top{padding:9px 14px;font-size:12px;}
    .hero-title{font-size:23px;}
    .hero-sub{font-size:13.5px;}
    .user-card{padding:16px;}
    .action-row{flex-direction:column;}
    .action-row .price-tag{order:1;}
    .action-row .btn-chat{order:2;}
    .usd-row{justify-content:center;order:3;}
    .info-card{padding:24px 18px;}
    #whatsapp-popup img{width:50px;height:50px;padding:9px;}
    #download-app-popup{left:14px;bottom:20px;max-width:calc(100vw - 90px);}
    #download-app-btn{padding:11px 16px 11px 13px;font-size:11.5px;gap:7px;}
    .modal-content{padding:30px 22px 26px;}
    .chat-bubble{max-width:88%;}
}