/* ===================================================================
   MJK — main stylesheet (moved out of index.html)
   Sections: base · cards · modals · chat · wallet · TON Toolkit · terms
   =================================================================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

@font-face {
    font-family: 'KM';
    src: url('/fonts/AB.woff2') format('woff2');
    font-display: swap;
}

body{
    position:relative;
    background:#000;
    color:#fff;
    font-family:KM;
    min-height:100vh;
    overflow-x:hidden;

    display:flex;
    flex-direction:column;
}

.top-decoration{
    position:absolute;
    top:0; left:0;
    width:100%; 
    height:250px;
    background:url("/images/UP2.jpg") center center/cover no-repeat;
    pointer-events:none;
}

.bottom-decoration{
    position:absolute;
    bottom:0; left:0;
    width:100%; 
    height:250px;
    background:url("/images/BM2.jpg") center center/cover no-repeat;
    pointer-events:none;
}

.container{
    position:relative;
    z-index:2;
    max-width:700px;
    margin:auto;
    padding:50px 30px 40px;
    flex:1;
    display:flex;
    flex-direction:column;
}

/* ─── LOGO ─── */
.logo{
    width:100px;
    object-fit:contain;
    display:block;
    margin:0 auto 20px;
    opacity:.95;
    mix-blend-mode:screen;
   aspect-ratio: 1 / 1;
    animation:floatLogo 3.8s ease-in-out infinite;
}

.logo.glitch{
    animation:
        floatLogo 3.8s ease-in-out infinite,
        logoGlitch 180ms steps(1);
}

@keyframes floatLogo{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
}

@keyframes logoGlitch{

    0%{
        filter:none;
    }

    20%{
        filter:
            drop-shadow(5px 0 #00ffff)
            drop-shadow(-5px 0 #ff0055);
    }

    40%{
        filter:
            contrast(2)
            brightness(1.4)
            drop-shadow(-8px 0 #00ffff)
            drop-shadow(8px 0 #ff0055);
    }

    60%{
        filter:none;
    }

    80%{
        filter:
            hue-rotate(20deg)
            saturate(2);
    }

    100%{
        filter:none;
    }
}

.name{
    text-align:center;
    font-size:30px;
    font-weight:900;
    letter-spacing:.04em;
    margin-bottom:8px;
color:#ffffffe5 ;
}

.tagline{
    text-align:center;
    max-width:420px;
    margin:0 auto 40px;
    font-size:13.5px;
    line-height:1.55;
    letter-spacing:.02em;
    color:rgba(255,255,255,.62);
}



/* ─── SECTIONS ───────────────────────────────────────── */

.sections{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.section-card{
    display:flex;
    flex-direction:column;
    gap:0;
}

/* Section header — Level 1 */
.section-card-header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:14px;
    padding:4px 0;
}

.section-card-icon{
    width:34px;
    height:34px;
    object-fit:contain;
    flex-shrink:0;
    opacity:.85;
    filter: brightness(0) invert(1);
}

.section-card-title{
    font-size:20px;
    font-weight:700;
    color:#fff;
    flex:1;
    letter-spacing:.01em;
}

/* help button */
.help-btn{
    width:24px;
    height:24px;
    background:transparent;
    border:1px solid #333;
    border-radius:50%;
    color:#666;
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.2s;
    flex-shrink:0;
}

.help-btn:hover{ border-color:#555; color:#aaa; }
.help-btn.active{ border-color:#666; color:#ccc; }

/* Help panel */
.help-panel{
    overflow:hidden;
    max-height:0;
    transition:max-height .35s ease, padding .35s ease;
    padding:0 0;
    margin-bottom:0;
}

.help-panel.open{
    max-height:120px;
    margin-bottom:12px;
}

.help-text{
    font-size:13px;
    color:#666;
    line-height:1.7;
    padding-left:12px;
}

.item-label{ color:#fff; }

.item-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.item-flag{
    font-size:21px;
    line-height:1;
}

.item-label{
    font-size:14px;
    color:#c0c0c0;
    font-weight:500;
    transition:color .15s;
}

.item-sublabel{
    font-size:12px;
    color:#ffffff51;
    margin-top:2px;
}

.item-price{
    color:#e8c97a;
    font-weight:700;
    font-size:14px;
}

.buy-btn, .request-btn{
    position:relative;
    border: 1px solid #ffffffa0;
    background:transparent;
    color:#ffffffa0;
    padding:5px 12px;
    border-radius:.45rem;
    cursor:pointer;
    font-size:12px;
    white-space:nowrap;
    font-family:KM;
    transition:color .2s, background .2s;
    z-index:0;
}

.buy-btn::before, .request-btn::before{
    opacity: 0.15;
    content:""; 
    position:absolute;
    inset:0;
    border-radius:.45rem;
    padding:1px;
    background: #fff;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation: var(--btn-anim, none);
    pointer-events:none;
}

.buy-btn:hover, .request-btn:hover{
    background:#fff;
    color:#000;
}

.buy-btn:hover::before, .request-btn:hover::before{
    display:none;
}


/* ─── PRODUCT ACTIONS: [↓ Docs] [Images] | [Buy] ──────── */

.feature-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left:auto;
}

.feature-actions-secondary{
    display:flex;
    align-items:center;
    gap:6px;
}

.action-divider{
    width:1px;
    align-self:stretch;
    min-height:26px;
    background:linear-gradient(to bottom, transparent, rgba(255,255,255,.32), transparent);
    flex-shrink:0;
}

/* quiet secondary buttons */
.aux-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:5px 10px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:.45rem;
    background:transparent;
    color:#ffffff8c;
    font-size:11.5px;
    font-family:KM;
    white-space:nowrap;
    text-decoration:none;
    cursor:pointer;
    transition:color .2s, border-color .2s, background .2s;
}

.aux-btn:hover{
    color:#fff;
    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.07);
}

/* Buy stands out: solid fill, larger, soft glow */
.buy-btn{
    background:#fff;
    color:#000;
    border-color:#fff;
    padding:8px 24px;
    font-size:13.5px;
    font-weight:700;
    box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 0 18px rgba(255,255,255,.28);
    transition:background .2s, border-color .2s, box-shadow .2s, transform .15s;
}

.buy-btn:hover{
    background:#e8c97a;
    border-color:#e8c97a;
    color:#000;
    box-shadow:0 0 0 1px rgba(232,201,122,.3), 0 0 22px rgba(232,201,122,.45);
    transform:translateY(-1px);
}

@media (max-width:480px){
    .feature-actions{ width:100%; }
    .feature-actions-secondary{ flex:1; }
    .feature-actions-secondary .aux-btn{ flex:1; padding:8px 6px; }
    .feature-actions .buy-btn{ flex:1.2; }
}

/* images slideshow popup (reuses the contact-modal look) */
.contact-box.gallery-box{
    width:min(820px, 94vw);
    padding:16px 16px 16px;
    gap:12px;
}

.gallery-stage{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:180px;
    border-radius:10px;
    background:#000;
    overflow:hidden;
    touch-action:pan-y;
}

.gallery-stage img{
    display:block;
    width:100%;
    max-height:70vh;
    object-fit:contain;
    transition:opacity .2s;
    user-select:none;
    -webkit-user-drag:none;
}

.gallery-stage img.fading{ opacity:0; }

.gallery-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(0,0,0,.55);
    color:#fff;
    font-size:20px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s, border-color .2s;
}

.gallery-nav:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.4); }
.gallery-nav.prev{ left:10px; }
.gallery-nav.next{ right:10px; }

.gallery-footer{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
}

.gallery-counter{
    font-size:12px;
    color:#888;
    min-width:36px;
    text-align:center;
}

.gallery-dots{
    display:flex;
    gap:7px;
}

.gallery-dot{
    width:8px;
    height:8px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    background:transparent;
    cursor:pointer;
    transition:background .2s, border-color .2s;
}

.gallery-dot.active{ background:#fff; border-color:#fff; }

@media (max-width:480px){
    .gallery-nav{ width:32px; height:32px; font-size:18px; }
}

/* ─── FEATURE CARDS (image + animated stats) ───────────── */

.feature-list{
    display:flex;
    flex-direction:column;
    gap:22px;
}

.feature-card{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.feature-banner{
    position:relative;
    container-type:inline-size;
    aspect-ratio:1024 / 360;
    border-radius:14px;
    overflow:hidden;
    background:#070707;
    border:1px solid rgba(255,255,255,.09);
}

.feature-banner > img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Right-hand strip reserved for the animated stats:
   150px of the 1024px artwork, kept proportional at any width.
   The stats share one grid cell and take turns, one at a time. */
.stat-rail{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:35.6%;               /* 150 / 1024 */
    display:grid;
    place-items:center;
    padding:2% 1%;
    color:#fff;
    pointer-events:none;
}

.stat{
    grid-area:1 / 1;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    line-height:1.1;
    max-width:100%;
    overflow-wrap:anywhere;
    color:#fff;
    opacity:0;
    text-shadow:0 1px 10px rgba(0,0,0,.9);
    animation:statTurn 9s ease-in-out infinite both;   /* 3 stats x 3s */
    animation-delay:calc(var(--i) * 3s);
}

.stat-pre,
.stat-label{
    font-size:10px;                          /* fallback */
    font-size:clamp(9.5px, 2.9cqw, 14px);   /* scales with the banner */
    color:rgba(255,255,255,.82);
    letter-spacing:.04em;
}

.stat-pre{ margin-bottom:.6em; }
.stat-label{ margin-top:.4em; }

.stat-value{
    font-size:18px;                          /* fallback */
    font-size:clamp(15px, 6.2cqw, 38px);    /* ≈19px on a phone, ≈38px at 700px wide */
    font-weight:800;
    letter-spacing:.01em;
    color:#fff;
}

.stat-value.word{
    font-size:14px;                          /* fallback */
    font-size:clamp(13px, 4.6cqw, 28px);
}

/* each stat: fade in (0.5s) → hold (2.5s) → fade out, then the next one */
@keyframes statTurn{
    0%        { opacity:0; transform:translateY(10px) scale(.96); }
    5.5%,27.8%{ opacity:1; transform:none; }
    33.3%,100%{ opacity:0; transform:translateY(-6px) scale(.98); }
}

@media (prefers-reduced-motion:reduce){
    .stat-rail{ grid-template-rows:repeat(3, 1fr); }
    .stat{ grid-area:auto; animation:none; opacity:1; transform:none; }
    .stat-pre, .stat-label{ font-size:clamp(8px, 2.2cqw, 11px); }
    .stat-value{ font-size:clamp(11px, 4.2cqw, 26px); }
    .stat-value.word{ font-size:clamp(10.5px, 3.4cqw, 20px); }
}

/* Coming-soon product: blurred art, nothing reserved on it */
.feature-banner.soon > img{
    filter:blur(9px) brightness(.55);
    transform:scale(1.1);
}

.soon-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:.6em;
    text-align:center;
    color:#fff;
    text-shadow:0 2px 12px rgba(0,0,0,.8);
}

.soon-name{
    font-size:20px;
    font-size:clamp(16px, 4.6cqw, 32px);
    font-weight:800;
    letter-spacing:.04em;
}

.soon-tag{
    font-size:11px;
    font-size:clamp(9px, 1.9cqw, 13px);
    padding:.4em 1.1em;
    border:1px solid rgba(255,255,255,.4);
    border-radius:999px;
    background:rgba(0,0,0,.35);
    letter-spacing:.06em;
}

.feature-info{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:0 2px;
}

.feature-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}

.feature-desc{
    font-size:13px;
    line-height:1.7;
    color:#8a8a8a;
}

.section-divider{
    background:linear-gradient(to right, transparent, #1a1a1a 30%, #1a1a1a 70%, transparent);
}

/* ─── CHAT BUTTON ───────────────────────────────────── */

.chat-trigger-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:0 auto 14px;
    padding:7px 18px;
    background:rgba(20,20,20,0.55);
    border:1px solid rgba(255,255,255,0.13);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    border-radius:10px;
    color:#ffffffa0;
    font-size:13px;
    font-family:KM;
    cursor:pointer;
    transition:border-color .2s, color .2s, background .2s;
    white-space:nowrap;
    width:fit-content;
    letter-spacing:.01em;
}

.chat-trigger-btn:hover{
    border-color:rgba(255,255,255,0.3);
    color:#fff;
    background:rgba(30,30,30,0.7);
}

.chat-trigger-btn .chat-dot{
    width:7px;
    height:7px;
    background:#4ade80;
    border-radius:50%;
    animation:pulse-dot 2s ease-in-out infinite;
    flex-shrink:0;
}

@keyframes pulse-dot{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.5; transform:scale(.75); }
}

/* ─── CHATBOT OVERLAY ────────────────────────────────── */

.chat-overlay{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
}

.chat-overlay.open{
    opacity:1;
    pointer-events:all;
}

.chat-window{
    width:min(420px, 95vw);
    max-height:min(640px, 90vh);
    display:flex;
    flex-direction:column;
    border-radius:16px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 24px 80px rgba(0,0,0,.7);
    transform:translateY(20px) scale(.97);
    transition:transform .28s ease, opacity .25s;
    opacity:0;
    background:#0a0a0a;
}

.chat-overlay.open .chat-window{
    transform:translateY(0) scale(1);
    opacity:1;
}

/* header & footer decoration — same bg images */
.chat-header{
    height:72px;
    position:relative;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.chat-header::after{
    content:"";
    position:absolute;
    inset:0;
}

.chat-header-content{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:0 16px;
}

.chat-header-title{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:15px;
    font-weight:700;
    color:#fff;
    letter-spacing:.02em;
}

.chat-header-dot{
    width:8px;
    height:8px;
    background:#4ade80;
    border-radius:50%;
    animation:pulse-dot 2s ease-in-out infinite;
}

.chat-close-btn{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
    width:28px;
    height:28px;
    color:#fff;
    font-size:14px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .2s;
    line-height:1;
}

.chat-close-btn:hover{ background:rgba(255,255,255,.2); }

/* messages area */
.chat-messages{
    flex:1;
    overflow-y:auto;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:0;
    scrollbar-width:thin;
    scrollbar-color:#222 transparent;
}

.chat-messages::-webkit-scrollbar{ width:4px; }
.chat-messages::-webkit-scrollbar-track{ background:transparent; }
.chat-messages::-webkit-scrollbar-thumb{ background:#222; border-radius:4px; }

.chat-msg{
    max-width:82%;
    padding:9px 13px;
    border-radius:12px;
    font-size:13.5px;
    line-height:1.6;
    animation:msgIn .2s ease;
}

@keyframes msgIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}

.chat-msg.bot{
    align-self:flex-start;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#d0d0d0;
    border-bottom-left-radius:4px;
}

.chat-msg.user{
    align-self:flex-end;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    border-bottom-right-radius:4px;
}

.chat-typing{
    align-self:flex-start;
    display:flex;
    gap:4px;
    padding:10px 14px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
    border-bottom-left-radius:4px;
    animation:msgIn .2s ease;
}

.chat-typing span{
    width:6px;
    height:6px;
    background:#666;
    border-radius:50%;
    animation:typingBounce 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2){ animation-delay:.2s; }
.chat-typing span:nth-child(3){ animation-delay:.4s; }

@keyframes typingBounce{
    0%,80%,100%{ transform:translateY(0); opacity:.4; }
    40%{ transform:translateY(-5px); opacity:1; }
}

/* quick questions */
.chat-questions{
    padding:10px 16px 12px;
    display:flex;
    flex-direction:column;
    gap:6px;
    border-top:1px solid rgba(255,255,255,.06);
    flex-shrink:0;
}

.chat-q-label{
    font-size:11px;
    color:#444;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:2px;
}

.chat-q-btn{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;
    color:#999;
    font-size:12.5px;
    font-family:KM;
    padding:8px 12px;
    cursor:pointer;
    text-align:left;
    transition:background .15s, color .15s, border-color .15s;
    line-height:1.4;
}

.chat-q-btn:hover{
    background:rgba(255,255,255,.09);
    border-color:rgba(255,255,255,.18);
    color:#ddd;
}

.chat-q-btn:disabled{
    opacity:.35;
    cursor:default;
    pointer-events:none;
}

/* chat footer decoration */
.chat-footer{
    height:44px;
    position:relative;
    flex-shrink:0;
}

.chat-footer::after{
    content:"";
    position:absolute;
    inset:0;

}

/* ─── FOOTER ────────────────────────────────────────── */

footer{
    text-align:center;
    margin-top:auto;
    padding-top:40px;
}

.socials{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:15px;
    z-index:3;
    isolation: isolate;
}

.socials a{
    width:35px;
    height:35px;
    background:rgba(180,180,180,.07);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    isolation: isolate;
    border:1px solid #242424;
    border-radius:10px;
    padding:7px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.socials a img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    filter: brightness(0) invert(1);
}

/* TradingView keeps the inverted look it had as a section icon */
.socials a img[src$="TV.svg"]{
    filter: brightness(9.1) invert(1);
}


.copyright{
    padding:6px 10px;
    background: rgba(20, 20, 20, 0.55);
    border: 1px solid rgba(255,255,255,0.10);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    isolation: isolate;
    border-radius:10px;
    color:#ffffff8f;
    font-size:13px;
    width:fit-content;
    white-space:nowrap;
    position: absolute;
    display: block;
    margin: auto;
    bottom: 15px;
    left: 1px;
    right: 1px;
}

/* ─── CONTACT MODAL ─────────────────────────────────── */

.contact-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.65);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s;
}

.contact-overlay.open{
    opacity:1;
    pointer-events:all;
}

.contact-box{
    width:min(360px, 92vw);
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    padding:24px 22px 20px;
    display:flex;
    flex-direction:column;
    gap:14px;
    box-shadow:0 24px 80px rgba(0,0,0,.8);
    transform:translateY(18px) scale(.97);
    transition:transform .25s ease, opacity .22s;
    opacity:0;
}

.contact-overlay.open .contact-box{
    transform:translateY(0) scale(1);
    opacity:1;
}

.contact-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.contact-title{
    font-size:17px;
    font-weight:700;
    color:#fff;
    letter-spacing:.02em;
}

.contact-desc{
    font-size:13px;
    color:#888;
    line-height:1.7;
}

.contact-btns{
    display:flex;
    gap:10px;
}

.contact-action-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 10px;
    border-radius:10px;
    font-size:13.5px;
    font-family:KM;
    font-weight:600;
    cursor:pointer;
    text-decoration:none;
    transition:opacity .2s, transform .15s;
}

.contact-action-btn img{
    width:22px;
    height:22px;
    object-fit:contain;
    filter:brightness(0) invert(1);
}

.contact-action-btn:hover{ opacity:.85; transform:translateY(-1px); }

.contact-action-btn.telegram{
    background:#229ED9;
    color:#fff;
    border:none;
}

.contact-action-btn.email{
background: linear-gradient(135deg,
  #ff2d55 0%,
  #ff5a5f 22%,
  #fbbc05 55%,
  #34a853 78%,
  #4285f4 100%
);
    color:#ffffff;
}

.contact-ton-btn{
    background:transparent;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    color:#555;
    font-size:13px;
    font-family:KM;
    padding:10px;
    cursor:pointer;
    transition:border-color .2s, color .2s;
    text-align:center;
}

.contact-ton-btn:hover{
    border-color:rgba(255,255,255,.2);
    color:#777;
}

/* ─── PAYMENT LABELS ─────────────────────────────────── */

.payment-labels {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 18px;
    max-width: 100%;
}

.pay-label {
    display: flex;
    align-items: center;
    height: 34px;
    border-radius: 8px;
    overflow: hidden;
    background: transparent;
    font-weight: 500;
    letter-spacing: .05em;
    flex-shrink: 1;
    min-width: 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    isolation: isolate;
}

.pay-label-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 100%;
    flex-shrink: 0;
}

.pay-label-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.pay-label-divider {
    width: 1px;
    height: 55%;
    opacity: .3;
    flex-shrink: 0;
}

.pay-label-text {
    padding: 3px 8px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height:1.2;
}

.pay-label-text span:first-child {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
}

.pay-label-text span:last-child {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .07em;
    opacity: .6;
}

/* Tether — green border only */
.pay-label.tether {
    border: 1px solid #26A17B;
    color: #ffffffb2;
   background: #26a17b19;
}
.pay-label.tether .pay-label-divider { background: #26A17B; }

/* Rial border only */
.pay-label.rial {
    border: 1px solid #ffffffb2;
    color: #ffffffb2;
   background: #ffffff12;
}
.pay-label.rial .pay-label-divider { background: #ffffff12; }

/* ─── PERSIAN LANGUAGE PROMPT ───────────────────────── */

.fa-prompt-overlay{
    position:fixed;
    inset:0;
    z-index:3000;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding-bottom:30px;
    pointer-events:none;
    opacity:0;
    transition:opacity .3s ease;
}

.fa-prompt-overlay.show{
    opacity:1;
    pointer-events:all;
}

.fa-prompt-box{
    background:#111;
    border:1px solid rgba(255,255,255,.15);
    border-radius:16px;
    padding:18px 20px 16px;
    width:min(340px, 92vw);
    display:flex;
    flex-direction:column;
    gap:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.8);
    transform:translateY(30px);
    transition:transform .3s ease;
}

.fa-prompt-overlay.show .fa-prompt-box{
    transform:translateY(0);
}

.fa-prompt-text{
    font-size:14px;
    color:#ccc;
    line-height:1.6;
    text-align:center;
}

.fa-prompt-btns{
    display:flex;
    gap:8px;
    justify-content:center;
}

.fa-prompt-btn{
    flex:1;
    padding:9px 0;
    border-radius:9px;
    font-size:13px;
    font-family:KM;
    font-weight:600;
    cursor:pointer;
    transition:opacity .2s;
    border:none;
    max-width:120px;
}

.fa-prompt-btn:hover{ opacity:.8; }

.fa-prompt-btn.yes{
    background:#fff;
    color:#000;
}

.fa-prompt-btn.no{
    background:rgba(255,255,255,.1);
    color:#aaa;
    border:1px solid rgba(255,255,255,.15);
}

/* TON — blue border only */
.pay-label.ton {
    border: 1px solid #0088CC;
    color: #ffffffb2;
    background: #0088cc15;
}
.pay-label.ton .pay-label-divider { background: #0088CC; }

/* ─── TON WALLET (Gram payment) ─────────────────────── */

:root{ --tc-z-index:5000; }   /* keep TON Connect's own modal above ours */

.contact-action-btn[hidden]{ display:none; }

.contact-action-btn.gram{
    flex:none;
    width:100%;
    background:#0088cc26;
    border:1px solid #0088CC;
    color:#fff;
}

.contact-action-btn.gram img{ filter:none; }

.wallet-chip{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:-6px auto 14px;
    padding:5px 12px;
    background:rgba(0,136,204,.12);
    border:1px solid rgba(0,136,204,.55);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    border-radius:10px;
    color:#ffffffd0;
    font-size:12px;
    font-family:KM;
    cursor:pointer;
    width:fit-content;
    white-space:nowrap;
    transition:background .2s, color .2s;
}

.wallet-chip:hover{ background:rgba(0,136,204,.22); color:#fff; }
.wallet-chip[hidden]{ display:none; }

.wallet-connect-row{
    display:flex;
    justify-content:center;
    min-height:44px;
}

.wallet-status{
    font-size:12.5px;
    color:#888;
    text-align:center;
    line-height:1.6;
}

.wallet-error{
    font-size:12.5px;
    color:#ff6b6b;
    line-height:1.6;
}

.wallet-status[hidden], .wallet-error[hidden]{ display:none; }

.wallet-address{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:10px;
    background:rgba(255,255,255,.04);
}

.wallet-address[hidden]{ display:none; }

.wallet-address-label{ font-size:11px; color:#777; }

.wallet-address-value{
    font-size:12px;
    color:#ddd;
    line-height:1.5;
    word-break:break-all;
    user-select:all;
}

.gram-buy-btn{
    padding:11px 10px;
    border:none;
    border-radius:10px;
    background:#fff;
    color:#000;
    font-family:KM;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    transition:opacity .2s;
}

.gram-buy-btn:disabled{ opacity:.3; cursor:not-allowed; }
.gram-buy-btn[hidden]{ display:none; }

/* ─── TERMS NOTICE (cookie / terms banner) ───────────── */
#mjk-terms-notice{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%) translateY(140%);
    opacity:0;
    width:min(94%, 480px);
    background:rgba(15,15,15,.85);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.12);
    border-radius:14px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    padding:18px 20px;
    z-index:99999;
    font-family:'KM', Arial, sans-serif;
    color:#fff;
    pointer-events:none;
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
}
#mjk-terms-notice.mjk-show{
    transform:translateX(-50%) translateY(-28px);
    opacity:1;
    pointer-events:auto;
}
#mjk-terms-notice .mjk-title{
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
    margin-bottom:6px;
    color:#fff;
}
#mjk-terms-notice .mjk-desc{
    font-size:12.5px;
    line-height:1.6;
    color:rgba(255,255,255,.65);
    margin-bottom:10px;
}
#mjk-terms-notice .mjk-desc a{
    color:#fff;
    text-decoration:underline;
    text-underline-offset:2px;
    opacity:.9;
}
#mjk-terms-notice .mjk-desc a:hover{
    opacity:1;
}
#mjk-terms-notice .mjk-actions{
    display:flex;
    justify-content:flex-end;
}
#mjk-terms-notice .mjk-accept-btn{
    background:#fff;
    color:#000;
    border:1px solid #fff;
    border-radius:8px;
    padding:8px 18px;
    font-family:'KM', Arial, sans-serif;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    letter-spacing:.02em;
    transition:opacity .2s, transform .15s;
}
#mjk-terms-notice .mjk-accept-btn:hover{
    opacity:.85;
}
#mjk-terms-notice .mjk-accept-btn:active{
    transform:scale(.97);
}
@media (max-width:480px){
    #mjk-terms-notice{ width:92%; padding:16px 16px; }
}

/* ─── TON TOOLKIT: tool picker ───────────────────────── */

.tool-option{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:12px;
    background:rgba(255,255,255,.03);
    color:#fff;
    text-decoration:none;
    transition:border-color .2s, background .2s, transform .15s;
}

.tool-option:hover{
    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.07);
    transform:translateY(-1px);
}

.tool-option-icon{
    width:38px;
    height:38px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    color:#fff;
}

.tool-option-icon svg{ width:20px; height:20px; }

.tool-option-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;
}

.tool-option-title{ font-size:14px; font-weight:700; }
.tool-option-desc{ font-size:12px; color:#888; line-height:1.5; }
.tool-option-arrow{ font-size:22px; line-height:1; color:#666; flex-shrink:0; }

/* ─── TON TOOLKIT: slide-up help sheet ───────────────── */

.contact-overlay.sheet-overlay{ align-items:flex-end; }

.sheet-box{
    width:min(560px, 100vw);
    max-height:85vh;
    max-height:85dvh;
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:10px 22px calc(20px + env(safe-area-inset-bottom, 0px));
    background:#0d0d0d;
    border:1px solid rgba(255,255,255,.12);
    border-bottom:none;
    border-radius:20px 20px 0 0;
    box-shadow:0 -24px 80px rgba(0,0,0,.8);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.2,.8,.2,1);
}

.contact-overlay.open .sheet-box{ transform:translateY(0); }

.sheet-grab{
    width:38px;
    height:4px;
    margin:0 auto 4px;
    border-radius:4px;
    background:rgba(255,255,255,.22);
    flex-shrink:0;
}

.sheet-body{
    overflow-y:auto;
    overscroll-behavior:contain;
    display:flex;
    flex-direction:column;
    gap:20px;
    padding-right:2px;
}

.help-tool h3{
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin-bottom:8px;
    letter-spacing:.02em;
}

.help-tool ol{
    padding-left:20px;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.help-tool li{
    font-size:13px;
    line-height:1.7;
    color:#9a9a9a;
}

.help-note{
    margin-top:8px;
    font-size:12px;
    line-height:1.6;
    color:#e8c97a;
}

@media (prefers-reduced-motion:reduce){
    .sheet-box{ transition:none; }
}