/* =============================================
   ZexPay Faucet Script v1.2 — Stylesheet
   ============================================= */

/* ---- VARIABLES ---- */
:root {
    --bg-main:#f0f4ff; --bg-card:#ffffff; --bg-navbar:#ffffff;
    --text-primary:#1a1a2e; --text-secondary:#555e7a; --text-muted:#8892a4;
    --border-color:#e4e9f2;
    --accent-blue:#2563eb; --accent-blue-hover:#1d4ed8;
    --accent-gradient:linear-gradient(135deg,#2563eb,#4f46e5);
    --shadow-card:0 4px 24px rgba(37,99,235,.08);
    --shadow-hover:0 8px 32px rgba(37,99,235,.15);
    --input-bg:#f8faff; --captcha-bg:#f0f4ff;
    --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
    --timer-bg:#eff6ff; --timer-text:#2563eb;
    --footer-bg:#1e293b; --footer-text:#94a3b8;
    --proof-bg:#f8faff; --step-icon-bg:#eff6ff;
    --banner-bg:#e8edff; --banner-text:#4f46e5;
}
[data-theme="dark"] {
    --bg-main:#0f1117; --bg-card:#1a1d2e; --bg-navbar:#161927;
    --text-primary:#e2e8f0; --text-secondary:#a0aec0; --text-muted:#64748b;
    --border-color:#2d3748;
    --accent-blue:#3b82f6; --accent-blue-hover:#2563eb;
    --accent-gradient:linear-gradient(135deg,#3b82f6,#6366f1);
    --shadow-card:0 4px 24px rgba(0,0,0,.3);
    --shadow-hover:0 8px 32px rgba(59,130,246,.2);
    --input-bg:#1e2235; --captcha-bg:#252840;
    --timer-bg:#1e2235; --timer-text:#60a5fa;
    --footer-bg:#0d0f1a; --footer-text:#64748b;
    --proof-bg:#1e2235; --step-icon-bg:#252840;
    --banner-bg:#252840; --banner-text:#818cf8;
}

/* ---- RESET ---- */
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg-main);color:var(--text-primary);transition:background .3s,color .3s;min-height:100vh;overflow-x:hidden;}
a{text-decoration:none;}
img{max-width:100%;height:auto;}

/* ---- NAVBAR ---- */
.navbar{
    background:var(--bg-navbar);
    box-shadow:0 2px 16px rgba(37,99,235,.07);
    padding:0 1.25rem;height:60px;
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:0;z-index:1000;
    transition:background .3s;
}
.navbar-brand{display:flex;align-items:center;gap:9px;}
.navbar-brand .logo-icon{width:36px;height:36px;background:var(--accent-gradient);border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px;flex-shrink:0;}
.navbar-brand .brand-text{font-size:1.1rem;font-weight:700;color:var(--text-primary);white-space:nowrap;}
.navbar-brand .brand-text span{color:var(--accent-blue);}

/* Desktop nav */
.desktop-nav{display:flex;align-items:center;gap:1.25rem;list-style:none;}
.desktop-nav a{color:var(--text-secondary);font-size:.875rem;font-weight:500;transition:color .2s;}
.desktop-nav a:hover{color:var(--accent-blue);}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.375rem;border-radius:8px;z-index:1001;}
.hamburger span{display:block;width:22px;height:2px;background:var(--text-primary);border-radius:2px;transition:all .3s;}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile dropdown */
.mobile-menu{
    display:none;position:fixed;top:60px;left:0;right:0;
    background:var(--bg-card);border-bottom:1px solid var(--border-color);
    box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:999;
    flex-direction:column;
    transform:translateY(-8px);opacity:0;
    transition:transform .25s,opacity .25s;pointer-events:none;
}
.mobile-menu.open{display:flex;transform:translateY(0);opacity:1;pointer-events:all;}
.mobile-menu a{padding:.875rem 1.5rem;color:var(--text-secondary);font-size:.9rem;font-weight:500;border-bottom:1px solid var(--border-color);transition:background .2s,color .2s;}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{background:var(--timer-bg);color:var(--accent-blue);}

@media(max-width:640px){
    .hamburger{display:flex;}
    .desktop-nav{display:none;}
}

/* ---- BANNERS ---- */
/* 728x90 desktop only */
.banner-728{display:flex;justify-content:center;margin:1.25rem auto 0;max-width:1240px;padding:0 1rem;}
.banner-728 .banner-inner{width:728px;min-height:90px;overflow:hidden;border-radius:10px;}
.banner-728 .banner-placeholder{width:728px;min-height:90px;background:var(--banner-bg);border:2px dashed var(--accent-blue);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--banner-text);font-weight:600;font-size:.95rem;}
@media(max-width:768px){.banner-728{display:none!important;}}

/* 468x60 desktop only */
.banners-468{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1240px;margin:2rem auto;padding:0 1rem;}
.banner-468{min-height:60px;border-radius:10px;overflow:hidden;}
.banner-468 .banner-inner{display:block;}
.banner-468 .banner-placeholder{height:60px;background:var(--banner-bg);border:2px dashed var(--accent-blue);color:var(--banner-text);font-weight:600;font-size:.875rem;display:flex;align-items:center;justify-content:center;border-radius:10px;}
@media(max-width:768px){.banners-468{display:none!important;}}

/* 300x250 inside claim card — PC + Mobile */
.banner-300-inline{
    width:300px;max-width:100%;height:250px;
    border-radius:10px;overflow:hidden;
    margin:1.25rem auto 0;
    display:flex;align-items:center;justify-content:center;
}
.banner-300-placeholder{
    background:var(--banner-bg);border:2px dashed var(--accent-blue);
    color:var(--banner-text);font-weight:600;font-size:.875rem;
    flex-direction:column;gap:.5rem;text-align:center;
    width:100%;height:100%;
}

/* ---- HERO ---- */
.hero-section{
    display:flex;align-items:center;justify-content:center;
    padding:1.5rem 1rem;min-height:480px;position:relative;overflow:hidden;
    background:radial-gradient(ellipse at 60% 40%,rgba(37,99,235,.07) 0%,transparent 70%),var(--bg-main);
}
.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero-deco-left,.hero-deco-right{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:1rem;opacity:.85;}
.hero-deco-left{left:1.5rem;}
.hero-deco-right{right:1.5rem;}
.crypto-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:900;color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.15);animation:float 3s ease-in-out infinite;}
.crypto-icon:nth-child(2){animation-delay:.8s;}
.crypto-icon:nth-child(3){animation-delay:1.6s;}
.ci-btc{background:linear-gradient(135deg,#f7931a,#ffb74d);}
.ci-eth{background:linear-gradient(135deg,#627eea,#8b9ff7);}
.ci-usdt{background:linear-gradient(135deg,#26a17b,#4dd9ac);}
.ci-ltc{background:linear-gradient(135deg,#bfbbbb,#9e9e9e);}
.ci-zxp{background:var(--accent-gradient);}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@media(max-width:900px){
    .hero-deco-left,.hero-deco-right{display:none;}
    .hero-section{min-height:auto;padding:1.5rem 1rem;}
}

/* ---- CLAIM CARD ---- */
.claim-card{
    background:var(--bg-card);border-radius:20px;
    box-shadow:var(--shadow-card);padding:2rem 1.75rem;
    width:100%;max-width:500px;
    position:relative;z-index:1;
    border:1px solid var(--border-color);
    transition:background .3s,box-shadow .3s;
    /* KEY: center on all screens */
    margin-left:auto;margin-right:auto;
}
.claim-card-logo{text-align:center;margin-bottom:.5rem;}
.claim-card-logo .logo-box{width:56px;height:56px;background:var(--accent-gradient);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.7rem;font-weight:900;margin-bottom:.625rem;}
.claim-card-logo h1{font-size:1.7rem;font-weight:800;}
.claim-card-logo h1 span{color:var(--accent-blue);}
.claim-card-logo p{font-size:.85rem;color:var(--text-secondary);margin-top:.25rem;line-height:1.5;}

/* Form */
.form-group{margin-top:1.1rem;}
.input-wrap{position:relative;}
.input-wrap svg{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:var(--text-muted);width:16px;height:16px;}
.form-input{width:100%;padding:.825rem 1rem .825rem 2.75rem;border:1.5px solid var(--border-color);border-radius:10px;background:var(--input-bg);color:var(--text-primary);font-size:.9rem;transition:border .2s,background .3s;outline:none;}
.form-input:focus{border-color:var(--accent-blue);}
.form-input::placeholder{color:var(--text-muted);}

/* Captcha */
.captcha-box{
    background:var(--captcha-bg);border-radius:10px;
    padding:.7rem .875rem;border:1.5px solid var(--border-color);
    display:flex;align-items:center;gap:.75rem;
    transition:background .3s;flex-wrap:wrap;
}
.captcha-label{font-size:.82rem;color:var(--text-secondary);}
.captcha-label strong{display:block;font-size:.82rem;color:var(--text-primary);font-weight:600;margin-bottom:2px;}
.captcha-icons{display:flex;gap:.4rem;flex-wrap:nowrap;}
.captcha-icon-btn{
    width:44px;height:44px;border:2px solid var(--border-color);border-radius:10px;
    background:var(--bg-card);cursor:pointer;display:flex;align-items:center;
    justify-content:center;font-size:1.3rem;transition:all .2s;user-select:none;flex-shrink:0;
}
.captcha-icon-btn:hover{border-color:var(--accent-blue);transform:scale(1.06);}
.captcha-icon-btn.selected{border-color:var(--accent-blue);background:var(--accent-blue);color:#fff;transform:scale(1.08);box-shadow:0 4px 12px rgba(37,99,235,.3);}

/* Buttons */
.btn-claim{width:100%;padding:.9rem;background:var(--accent-gradient);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:1.1rem;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:opacity .2s,transform .2s;letter-spacing:.02em;}
.btn-claim:hover:not(:disabled){opacity:.92;transform:translateY(-1px);}
.btn-claim:disabled{opacity:.7;cursor:not-allowed;}
.btn-claim-again{width:100%;padding:.9rem;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:opacity .2s,transform .2s;}
.btn-claim-again:hover{opacity:.92;transform:translateY(-1px);}

/* Timer */
.timer-box{display:none;background:var(--timer-bg);border:1.5px solid var(--accent-blue);border-radius:12px;padding:1rem;text-align:center;margin-top:1.1rem;}
.timer-label{font-size:.78rem;color:var(--timer-text);font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.timer-count{font-size:2.2rem;font-weight:900;color:var(--timer-text);line-height:1;}
.timer-sub{font-size:.73rem;color:var(--text-muted);margin-top:.25rem;}

/* Daily limit */
.daily-limit-box{text-align:center;padding:1.5rem .5rem;margin-top:1rem;}
.daily-limit-box .dl-icon{font-size:2.75rem;margin-bottom:.625rem;}
.daily-limit-box h3{font-size:1.1rem;font-weight:800;margin-bottom:.4rem;}
.daily-limit-box p{font-size:.85rem;color:var(--text-secondary);line-height:1.6;}
.daily-limit-box .dl-sub{color:var(--text-muted);font-size:.78rem;margin-top:.2rem;}
.dl-progress{height:6px;background:var(--border-color);border-radius:6px;margin-top:1rem;overflow:hidden;}
.dl-bar{height:100%;background:var(--accent-gradient);border-radius:6px;transition:width .5s;}

/* Alert */
.alert-box{padding:.8rem 1rem;border-radius:10px;font-size:.85rem;font-weight:500;margin-top:1rem;display:none;align-items:center;gap:.5rem;}
.alert-success{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0;}
.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;}
.alert-warning{background:#fef3c7;color:#92400e;border:1px solid #fde68a;}
[data-theme="dark"] .alert-success{background:#064e3b;color:#6ee7b7;border-color:#047857;}
[data-theme="dark"] .alert-error{background:#450a0a;color:#fca5a5;border-color:#7f1d1d;}
[data-theme="dark"] .alert-warning{background:#451a03;color:#fde68a;border-color:#92400e;}

/* ---- MAIN CONTENT / CARDS ---- */
.main-content{max-width:1240px;margin:2rem auto;padding:0 1rem;}
.cards-grid{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:1.25rem;}
@media(max-width:1024px){.cards-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:640px){
    .cards-grid{grid-template-columns:1fr;}
    .main-content{margin:1.5rem auto;}
}

/* Content cards */
.content-card{background:var(--bg-card);border-radius:16px;box-shadow:var(--shadow-card);padding:1.25rem;border:1px solid var(--border-color);transition:box-shadow .2s,background .3s;}
.content-card:hover{box-shadow:var(--shadow-hover);}
.card-header{display:flex;align-items:center;gap:.625rem;margin-bottom:1.1rem;}
.card-icon{width:26px;height:26px;color:var(--accent-blue);}
.card-header h3{font-size:.95rem;font-weight:700;}

/* Referral */
.ref-desc{font-size:.85rem;color:var(--text-secondary);margin-bottom:.875rem;line-height:1.55;}
.ref-link-wrap{display:flex;gap:.5rem;align-items:center;}
.ref-link-input{flex:1;padding:.575rem .75rem;background:var(--input-bg);border:1.5px solid var(--border-color);border-radius:8px;font-size:.73rem;color:var(--text-secondary);outline:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn-copy{width:36px;height:36px;background:var(--accent-blue);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s;}
.btn-copy:hover{background:var(--accent-blue-hover);}
.ref-stats{display:grid;grid-template-columns:1fr 1fr;gap:.625rem;margin:.875rem 0;}
.ref-stat{background:var(--proof-bg);border-radius:10px;padding:.625rem;display:flex;align-items:center;gap:.5rem;}
.stat-icon{font-size:1.2rem;}
.stat-label{font-size:.7rem;color:var(--text-muted);}
.stat-value{font-size:.9rem;font-weight:800;color:var(--text-primary);}
.btn-share{width:100%;padding:.7rem;background:transparent;border:1.5px solid var(--accent-blue);border-radius:10px;color:var(--accent-blue);font-weight:600;font-size:.85rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:all .2s;}
.btn-share:hover{background:var(--accent-blue);color:#fff;}

/* Proof list */
.proof-list{display:flex;flex-direction:column;gap:.55rem;}
.proof-item{display:flex;align-items:center;gap:.625rem;padding:.575rem .75rem;background:var(--proof-bg);border-radius:10px;}
.proof-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent-gradient);color:#fff;font-weight:700;font-size:.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.proof-email{font-size:.78rem;color:var(--text-secondary);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.proof-amount{font-weight:700;font-size:.78rem;color:var(--success);white-space:nowrap;flex-shrink:0;}
.proof-time{font-size:.7rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;}
.btn-view-more{width:100%;padding:.575rem;background:transparent;border:1.5px solid var(--border-color);border-radius:8px;color:var(--accent-blue);font-size:.78rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:.625rem;transition:all .2s;}
.btn-view-more:hover{border-color:var(--accent-blue);background:var(--timer-bg);}

/* How steps */
.how-steps{display:flex;flex-direction:column;gap:.875rem;}
.how-step{display:flex;align-items:flex-start;gap:.75rem;}
.how-step-icon{width:44px;height:44px;border-radius:12px;background:var(--step-icon-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}
.how-step-icon .step-num{position:absolute;top:-5px;right:-5px;width:17px;height:17px;background:var(--accent-blue);color:#fff;font-size:.62rem;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.how-step-icon svg{width:20px;height:20px;color:var(--accent-blue);}
.how-step-content h4{font-size:.85rem;font-weight:700;margin-bottom:2px;}
.how-step-content p{font-size:.76rem;color:var(--text-secondary);line-height:1.45;}

/* ---- FOOTER ---- */
.site-footer{background:var(--footer-bg);color:var(--footer-text);padding:1.25rem 1.5rem;margin-top:2rem;}
.footer-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:.875rem;flex-wrap:wrap;}
.footer-left,.footer-right{font-size:.78rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;}
.footer-center{font-size:.78rem;text-align:center;flex:1;}
.footer-center a{color:var(--footer-text);margin:0 .25rem;}
.footer-center a:hover{color:var(--accent-blue);}
.dark-toggle{background:transparent;border:1.5px solid var(--footer-text);border-radius:8px;padding:.3rem .625rem;cursor:pointer;display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--footer-text);transition:all .2s;white-space:nowrap;}
.dark-toggle:hover{border-color:var(--accent-blue);color:var(--accent-blue);}

/* ---- VPN overlay ---- */
.vpn-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem;}
.vpn-modal{background:var(--bg-card);border-radius:20px;padding:2rem 1.5rem;text-align:center;max-width:380px;width:100%;}
.vpn-modal .vpn-icon{font-size:2.75rem;margin-bottom:.875rem;}
.vpn-modal h2{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;color:var(--danger);}
.vpn-modal p{font-size:.85rem;color:var(--text-secondary);line-height:1.6;}

/* ---- SPINNER / TOAST ---- */
.spinner{width:17px;height:17px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;}
@keyframes spin{to{transform:rotate(360deg);}}
.toast-container{position:fixed;top:68px;right:1rem;z-index:9998;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100vw - 2rem);}
.toast{padding:.75rem 1rem;border-radius:10px;font-size:.85rem;font-weight:500;color:#fff;min-width:200px;max-width:300px;box-shadow:0 4px 20px rgba(0,0,0,.15);animation:slideIn .3s ease;display:flex;align-items:center;gap:.5rem;word-break:break-word;}
.toast-success{background:#10b981;}
.toast-error{background:#ef4444;}
.toast-warning{background:#f59e0b;}
@keyframes slideIn{from{transform:translateX(100px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* =============================================
   MOBILE RESPONSIVE — Complete Fix
   ============================================= */

/* Tablet: 768px */
@media(max-width:768px){
    .navbar{padding:0 1rem;height:58px;}
    .hero-section{padding:1.25rem .75rem;}
    .claim-card{max-width:100%;border-radius:16px;padding:1.5rem 1.25rem;}
    .main-content{padding:0 .75rem;}
    .cards-grid{gap:1rem;}
    .site-footer{padding:1.25rem 1rem;}
    .footer-inner{flex-direction:column;text-align:center;gap:.75rem;}
    .footer-center{order:1;width:100%;}
    .footer-left{order:0;justify-content:center;width:100%;}
    .footer-right{order:2;justify-content:center;width:100%;}
}

/* Mobile: 640px */
@media(max-width:640px){
    .cards-grid{grid-template-columns:1fr;}
    .content-card{padding:1.1rem;}
    /* Proof item — handle overflow on small screens */
    .proof-item{flex-wrap:wrap;gap:.4rem;}
    .proof-email{min-width:0;width:100%;order:1;}
    .proof-amount{order:2;}
    .proof-time{order:3;}
}

/* Small Mobile: 480px */
@media(max-width:480px){
    .claim-card{padding:1.25rem .875rem;border-radius:14px;}
    .claim-card-logo .logo-box{width:50px;height:50px;font-size:1.5rem;}
    .claim-card-logo h1{font-size:1.45rem;}
    .claim-card-logo p{font-size:.8rem;}
    /* Captcha stacks vertically */
    .captcha-box{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.625rem .75rem;}
    .captcha-icons{gap:.35rem;width:100%;justify-content:flex-start;}
    .captcha-icon-btn{width:48px;height:48px;font-size:1.4rem;}
    .timer-count{font-size:1.9rem;}
    /* Ref stats single col on tiny screens */
    .ref-stats{grid-template-columns:1fr;}
    /* Toast smaller */
    .toast{min-width:160px;font-size:.8rem;}
    /* Footer */
    .footer-center{font-size:.73rem;}
    .footer-left,.footer-right{font-size:.73rem;}
}

/* Extra small: 360px */
@media(max-width:360px){
    .navbar-brand .brand-text{font-size:1rem;}
    .claim-card{padding:1rem .75rem;}
    .captcha-icon-btn{width:44px;height:44px;font-size:1.25rem;}
    .btn-claim,.btn-claim-again{font-size:.9rem;padding:.8rem;}
    .banner-300-inline{height:200px;}
}