/* tgapp — base: layout, structure, mechanics (v1) */

/* ── Reset ──────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text;user-select:text}
html,body{height:100%;overflow:hidden}
body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--tg-theme-text-color,#1a1a2e);
    line-height:1.4;
    display:flex;flex-direction:column;
}

/* ── Splash ─────────────────────────────────────────── */
.app-splash{
    position:fixed;inset:0;z-index:9999;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    transition:opacity .3s;
}
.app-splash.hidden{opacity:0;pointer-events:none}
.splash-spinner{width:36px;height:36px;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.splash-text{margin-top:12px;font-size:14px;font-family:-apple-system,sans-serif}

/* ── Search bar ─────────────────────────────────────── */
.search-bar{
    position:sticky;top:0;z-index:50;
    padding:8px 12px 6px;
    padding-top:calc(var(--sa-top,0px) + var(--csa-top,0px) + 8px);
    flex-shrink:0;
}
.search-wrap{
    position:relative;display:flex;align-items:center;
    padding:0 12px;
    transition:box-shadow .2s,background .2s;
}
.search-icon{flex-shrink:0;margin-right:8px}
.search-input{
    flex:1;border:none;background:none;outline:none;
    font-size:16px;padding:10px 0;
}

/* ── Breadcrumbs ────────────────────────────────────── */
.breadcrumbs{
    display:flex;align-items:center;gap:2px;
    padding:6px 12px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    flex-shrink:0;scrollbar-width:none;
    min-height:0;max-height:44px;
    transition:max-height .25s cubic-bezier(.4,0,.2,1),padding .25s,opacity .25s;
}
.breadcrumbs:empty{max-height:0;padding-top:0;padding-bottom:0;opacity:0}
.breadcrumbs::-webkit-scrollbar{display:none}
.bc-arrow{font-size:11px;flex-shrink:0;margin:0 1px}
.badge{
    display:inline-flex;align-items:center;gap:5px;
    padding:8px 14px;border-radius:22px;
    font-size:13px;font-weight:600;
    white-space:nowrap;cursor:pointer;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .15s;
    flex-shrink:0;border:none;user-select:none;
    position:relative;overflow:hidden;
}
.badge-x{
    display:inline-flex;align-items:center;justify-content:center;
    width:16px;height:16px;border-radius:50%;
    font-size:11px;line-height:1;margin-left:3px;
}

/* ── Scrollable content ─────────────────────────────── */
.content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px 100px}

/* ── Section heading ────────────────────────────────── */
.section-title{
    display:flex;align-items:center;gap:10px;
    font-size:13px;font-weight:700;
    text-transform:uppercase;letter-spacing:.8px;
    margin-bottom:10px;padding:0 4px;
}
.section-title::before,.section-title::after{content:'';flex:1;height:1px}
.section-title::before{max-width:24px}

/* ── City list ──────────────────────────────────────── */
.cities-list{display:flex;flex-direction:column;gap:8px}
.city-card{
    cursor:pointer;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
    position:relative;overflow:hidden;
    display:flex;flex-direction:row;align-items:center;
    gap:14px;padding:14px 16px;
    animation:citySlideIn .4s cubic-bezier(.22,1,.36,1) forwards;opacity:0;
}
@keyframes citySlideIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}
.city-icon-wrap{
    width:48px;height:48px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.city-icon{font-size:22px;line-height:1}
.city-info{flex:1;min-width:0}
.city-card .city-name{font-size:16px;font-weight:700;line-height:1.25}
.city-card .city-meta{font-size:13px;font-weight:500;margin-top:2px}
.city-arrow{font-size:20px;font-weight:300;flex-shrink:0;transition:transform .2s}
.city-card:active .city-arrow{transform:translateX(3px)}

/* ── Product list ───────────────────────────────────── */
.product-list{display:flex;flex-direction:column;gap:8px}
.product-card{
    overflow:hidden;position:relative;cursor:pointer;opacity:0;
    animation:cardIn .45s cubic-bezier(.34,1.56,.64,1) forwards;
    transition:box-shadow .3s,border-left-color .3s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.34,1.56,.64,1);
}
.product-card.is-expanded{cursor:default}
@keyframes cardIn{to{opacity:1;transform:none}}

/* Compact header — always visible */
.p-compact{display:flex;align-items:center;gap:10px;padding:11px 12px;transition:background .15s}
.p-photo{
    width:56px;height:56px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px;flex-shrink:0;overflow:hidden;
    transition:width .3s cubic-bezier(.4,0,.2,1),height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1);
}
.product-card.is-expanded .p-photo{width:72px;height:72px;border-radius:16px}
.p-photo img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.p-photo.img-ready img{opacity:1}
.p-photo.img-loading{
    background:linear-gradient(90deg,#ebebeb 25%,#d4d4d4 50%,#ebebeb 75%);
    background-size:200% 100%;
    animation:photoShimmer 1.4s ease-in-out infinite;
}
@keyframes photoShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.p-compact-info{flex:1;min-width:0}
.p-compact-name{font-size:16px;font-weight:700;line-height:1.25}
.p-compact-meta{font-size:13px;margin-top:2px;font-weight:500}
.p-rating{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:12px;line-height:1}
.p-rating-stars{letter-spacing:1px;font-size:11px}
.p-rating-val{font-weight:700}
.p-chevron{
    font-size:12px;flex-shrink:0;
    transition:transform .3s cubic-bezier(.4,0,.2,1),color .3s;
}
.product-card.is-expanded .p-chevron{transform:rotate(180deg)}

/* Expand zone */
.p-expand{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.product-card.is-expanded .p-expand{max-height:140px}
.p-expand-inner{padding:0 14px 14px;padding-top:12px}
.p-controls{display:flex;align-items:center;gap:6px}
.p-select{
    flex:1;min-width:0;
    padding:9px 26px 9px 12px;
    border-radius:12px;
    font-size:14px;font-weight:500;
    appearance:none;-webkit-appearance:none;
    background-repeat:no-repeat;background-position:right 8px center;
    cursor:pointer;
    transition:border-color .2s,box-shadow .2s,background .2s;
}
.p-select:disabled{opacity:.35;cursor:default}
.btn-add{
    width:44px;height:44px;
    border:none;border-radius:12px;
    color:#fff;font-size:22px;font-weight:700;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .35s,box-shadow .2s;
    position:relative;overflow:hidden;
}
.btn-add:disabled{opacity:.35;cursor:default;transform:none;box-shadow:none}
.btn-add:not(:disabled):active{transform:scale(.8)}
.btn-add.added{animation:addPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes addPop{0%{transform:scale(.8)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
.btn-add .ripple{
    position:absolute;border-radius:50%;
    background:rgba(255,255,255,.4);
    transform:scale(0);animation:ripple .4s ease-out;pointer-events:none;
}
@keyframes ripple{to{transform:scale(2.5);opacity:0}}

/* ── Loading skeleton ───────────────────────────────── */
.skeleton-card{border-radius:18px;padding:14px}
.skeleton-card .sk-row{
    height:14px;border-radius:8px;
    background-size:200% 100%;
    animation:shimmer 1.4s ease-in-out infinite;
    margin-bottom:8px;
}
.skeleton-card .sk-row:first-child{width:55%}
.skeleton-card .sk-row:nth-child(2){width:75%;animation-delay:.12s}
.skeleton-card .sk-row:last-child{width:35%;margin-bottom:0;animation-delay:.24s}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Empty / error states ───────────────────────────── */
.state-msg{text-align:center;padding:48px 20px}
.state-msg .state-icon{font-size:48px;margin-bottom:14px}
.state-msg p{font-size:15px}

/* ── Floating cart bar ──────────────────────────────── */
.cart-bar{
    position:fixed;bottom:0;left:0;right:0;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 16px;
    padding-bottom:var(--sa-bottom,0px);
    height:calc(64px + var(--sa-bottom,0px));
    z-index:100;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
    border-radius:18px 18px 0 0;
}
.cart-bar.visible{transform:translateY(0)}
.cart-bar.bump{animation:barBump .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes barBump{0%,100%{transform:translateY(0)}35%{transform:translateY(-8px)}65%{transform:translateY(-2px)}}
.cart-bar-info{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.cart-bar-icon{font-size:20px}
.cart-bar-dot{opacity:.6}
.cart-bar-count{font-weight:400}
.cart-bar-count.pop{animation:countPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes countPop{0%{transform:scale(.6)}50%{transform:scale(1.3)}100%{transform:scale(1)}}
.cart-bar-btn{
    border-radius:10px;font-size:14px;font-weight:600;padding:8px 16px;cursor:pointer;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .15s;
}
.cart-bar-btn:active{transform:scale(.9)}

/* ── Cart bottom sheet ──────────────────────────────── */
.cart-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);z-index:200;
    opacity:0;pointer-events:none;transition:opacity .25s;
}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-sheet{
    position:fixed;bottom:0;left:0;right:0;max-height:65vh;
    border-radius:22px 22px 0 0;z-index:210;
    display:flex;flex-direction:column;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.12);
}
.cart-sheet.open{transform:translateY(0)}
.cart-sheet-handle{width:36px;height:4px;border-radius:2px;margin:8px auto 0;flex-shrink:0}
.cart-sheet-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 8px;flex-shrink:0}
.cart-sheet-title{font-size:17px;font-weight:600}
.cart-sheet-close{border:none;background:none;font-size:18px;cursor:pointer;padding:4px}
.cart-sheet-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 16px;max-height:calc(65vh - 100px)}
.cart-item{
    display:flex;align-items:center;gap:10px;padding:10px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
    transition:transform .2s ease,opacity .2s;
    position:relative;
}
.cart-item:last-child{border-bottom:none}
.cart-item.removing{opacity:0;transform:translateX(-100%);max-height:0;padding:0;overflow:hidden;transition:opacity .25s,transform .25s,max-height .3s .1s,padding .3s .1s}
.cart-item .swipe-del{
    position:absolute;right:0;top:0;bottom:0;width:70px;
    color:#fff;font-size:13px;font-weight:600;
    display:flex;align-items:center;justify-content:center;
    border-radius:0 10px 10px 0;
    opacity:0;transition:opacity .15s;pointer-events:none;
}
.cart-item .ci-photo{
    width:42px;height:42px;border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;flex-shrink:0;overflow:hidden;
}
.cart-item .ci-photo img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.cart-item .ci-photo.img-ready img{opacity:1}
.cart-item .ci-photo.img-loading{
    background:linear-gradient(90deg,#ebebeb 25%,#d4d4d4 50%,#ebebeb 75%);
    background-size:200% 100%;
    animation:photoShimmer 1.4s ease-in-out infinite;
}
.cart-item .ci-info{flex:1;min-width:0}
.cart-item .ci-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item .ci-meta{font-size:12px}
.cart-item .ci-lock-note{font-size:11px;margin-top:4px;opacity:.75}
.cart-item .ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.cart-item .ci-price{font-size:14px;font-weight:600}
.qty-row{display:flex;align-items:center;gap:0;border-radius:10px;overflow:hidden}
.qty-btn{
    width:30px;height:28px;border:none;
    font-size:16px;font-weight:700;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s,transform .15s cubic-bezier(.34,1.56,.64,1);
}
.qty-btn:active{transform:scale(.85)}
.qty-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.qty-val{min-width:28px;text-align:center;font-size:14px;font-weight:600;padding:0 2px}
.qty-val.changed{animation:qPulse .25s ease}
@keyframes qPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.btn-remove{border:none;background:none;font-size:16px;cursor:pointer;opacity:.5;transition:opacity .15s;padding:2px}
.btn-remove:active{opacity:1}
.cart-sheet-footer{padding:12px 16px;padding-bottom:calc(12px + var(--sa-bottom,0px));flex-shrink:0;display:none}
.cart-sheet-footer.has-items{display:block}
.cart-sheet-total{display:flex;justify-content:space-between;font-size:16px;font-weight:600;margin-bottom:10px}
.btn-order{
    width:100%;padding:14px;border:none;border-radius:12px;
    color:#fff;font-size:16px;font-weight:700;cursor:pointer;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
    letter-spacing:.3px;
}
.btn-order:active{transform:scale(.95)}

/* ── Order success ──────────────────────────────────── */
.order-success{
    position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .3s;pointer-events:none;
}
.order-success.show{opacity:1;pointer-events:auto}
.order-success .os-box{
    border-radius:20px;padding:36px 44px;text-align:center;
    transform:scale(.5);transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.order-success.show .os-box{transform:scale(1)}
.order-success .os-icon{font-size:56px;margin-bottom:12px;animation:successBounce .6s .15s cubic-bezier(.34,1.56,.64,1) both}
@keyframes successBounce{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
.order-success .os-text{font-size:18px;font-weight:600}

/* ── Debug button ───────────────────────────────────── */
.debug-btn{
    position:fixed;top:calc(var(--sa-top,0px) + var(--csa-top,0px) + 8px);right:8px;z-index:9999;
    width:28px;height:28px;border-radius:6px;
    border:none;font-size:14px;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;opacity:.35;transition:opacity .2s;
}
.debug-btn:active{opacity:1}
.debug-modal{
    position:fixed;inset:0;z-index:10000;
    background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;padding:16px;
}
.debug-modal .dm-box{
    width:100%;max-width:500px;height:75vh;
    background:#1a1a2e;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;
}
.debug-modal .dm-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:12px 16px;border-bottom:1px solid #333;color:#0f0;font-size:14px;font-weight:600;
}
.debug-modal .dm-actions{display:flex;gap:4px}
.debug-modal .dm-header button{
    padding:4px 10px;border-radius:4px;border:1px solid #555;background:#222;color:#ccc;font-size:12px;cursor:pointer;
}
.debug-modal .dm-logs{
    flex:1;overflow-y:auto;padding:10px 14px;
    font-family:'Courier New',monospace;font-size:11px;color:#0f0;white-space:pre-wrap;word-break:break-all;
}

/* ── Particles & effects ────────────────────────────── */
.confetti-particle{
    position:fixed;width:6px;height:6px;border-radius:50%;
    pointer-events:none;z-index:9000;
    animation:confettiBurst .55s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes confettiBurst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--px),var(--py)) scale(0);opacity:0}}
.pulse-ring{position:absolute;inset:-4px;border-radius:inherit;border:2px solid;animation:pulseRing .5s ease-out forwards;pointer-events:none}
@keyframes pulseRing{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.fly-dot{position:fixed;width:10px;height:10px;border-radius:50%;z-index:9999;pointer-events:none;transition:all .55s cubic-bezier(.25,.1,.25,1)}
.tap-flash{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:5;animation:tapFlash .3s ease-out forwards}
@keyframes tapFlash{0%{opacity:1}50%{opacity:.5}100%{opacity:0}}
.city-card,.product-card{transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s}

/* ── API Loader ─────────────────────────────────────── */
.api-loader{
    position:fixed;top:0;left:0;right:0;height:5px;z-index:10000;
    overflow:hidden;opacity:0;transition:opacity .15s;pointer-events:none;
}
.api-loader.active{opacity:1}
.api-loader::before{
    content:'';display:block;height:100%;width:40%;
    border-radius:2px;
    animation:loaderSlide 1s ease-in-out infinite;
}
@keyframes loaderSlide{0%{transform:translateX(-100%)}100%{transform:translateX(350%)}}

/* ── Responsive ─────────────────────────────────────── */
@media(max-width:360px){
    .p-controls{flex-wrap:wrap}
    .p-select{min-width:calc(50% - 28px)}
}

/* ── Payment screen ─────────────────────────────────────────── */
.payment-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.5);z-index:300;
    opacity:0;pointer-events:none;transition:opacity .25s;
}
.payment-overlay.open{opacity:1;pointer-events:auto}

.payment-screen{
    position:fixed;bottom:0;left:0;right:0;
    max-height:90vh;
    border-radius:22px 22px 0 0;z-index:310;
    display:flex;flex-direction:column;
    transform:translateY(100%);
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
    box-shadow:0 -8px 40px rgba(0,0,0,.15);
    overflow:hidden;
    background:var(--tg-theme-bg-color,#fff);
    color:var(--tg-theme-text-color,#1a1a2e);
}
.payment-screen.open{transform:translateY(0)}

.payment-header{
    display:flex;align-items:center;gap:10px;
    padding:14px 16px 10px;flex-shrink:0;
    border-bottom:1px solid rgba(0,0,0,.07);
    background:var(--tg-theme-bg-color,#fff);
}
.pm-back-btn{
    border:none;background:none;font-size:22px;font-weight:300;
    cursor:pointer;padding:2px 6px;line-height:1;flex-shrink:0;
    transition:transform .15s;
}
.pm-back-btn:active{transform:scale(.85)}
.pm-header-center{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pm-title{font-size:16px;font-weight:700;line-height:1.2}
.pm-countdown{display:flex;align-items:center;gap:5px;font-size:12px}
.pm-countdown-label{opacity:.6}
.pm-countdown-value{font-weight:700;font-variant-numeric:tabular-nums}
.pm-countdown-value.urgent{color:#e74c3c;animation:urgentPulse 1s ease-in-out infinite}
@keyframes urgentPulse{0%,100%{opacity:1}50%{opacity:.5}}

.payment-body{
    flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:14px 16px;
}
.payment-footer{
    padding:12px 16px;padding-bottom:calc(12px + var(--sa-bottom,0px));
    flex-shrink:0;
    background:var(--tg-theme-bg-color,#fff);
}

/* Order summary row */
.pm-order-summary{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:14px;font-size:15px;
}
.pm-order-cost{font-weight:700;font-size:17px}

/* Payment method cards */
.pm-methods{display:flex;flex-direction:column;gap:8px}
.pm-card{
    display:flex;align-items:center;gap:12px;
    width:100%;padding:13px 14px;
    border-radius:14px;cursor:pointer;
    text-align:left;font-size:15px;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
    border:none;
    background:var(--tg-theme-secondary-bg-color,#f5f5f5);
    color:var(--tg-theme-text-color,#1a1a2e);
}
.pm-card:not([disabled]):active{transform:scale(.97)}
.pm-card--disabled{opacity:.45;cursor:default}
.pm-card-icon{font-size:20px;flex-shrink:0;width:28px;text-align:center}
.pm-card-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-card-currency{opacity:.6;font-size:13px}
.pm-card-amount{font-weight:700}
.pm-card-hint{display:block;font-size:11px;opacity:.6;font-weight:400;margin-top:2px}
.pm-card-arrow{font-size:18px;font-weight:300;flex-shrink:0;opacity:.5}

/* Loading state */
.pm-loading{display:flex;justify-content:center;padding:40px 0}
.pm-spinner{
    width:28px;height:28px;border-radius:50%;
    border:3px solid rgba(0,0,0,.1);border-top-color:currentColor;
    animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Balance confirm */
.pm-confirm-block{border-radius:14px;padding:14px;margin-bottom:14px;background:var(--tg-theme-secondary-bg-color,#f5f5f5)}
.pm-confirm-row{display:flex;justify-content:space-between;padding:6px 0;font-size:15px;border-bottom:1px solid rgba(0,0,0,.06)}
.pm-confirm-row:last-child{border-bottom:none}
.pm-confirm-row--warn strong{color:#e74c3c}

/* Payment details */
.pay-details{border-radius:14px;padding:14px;margin-bottom:14px;background:var(--tg-theme-secondary-bg-color,#f5f5f5)}
.pay-details-label{font-size:13px;opacity:.6;margin-bottom:10px;margin-top:0}
.pay-card-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pay-card-number{font-size:18px;font-weight:700;font-family:monospace;letter-spacing:1.5px}
.btn-copy{
    border:none;background:none;cursor:pointer;font-size:16px;padding:4px;
    transition:transform .15s;flex-shrink:0;
}
.btn-copy:active{transform:scale(.85)}
.pay-amount-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pay-amount-label{font-size:13px;opacity:.6}
.pay-amount-value{font-size:15px;font-weight:700}
.btn-pay-invoice{
    display:block;width:100%;margin-top:14px;
    padding:13px;border-radius:12px;
    text-align:center;font-size:15px;font-weight:700;
    text-decoration:none;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
}
.btn-pay-invoice:active{transform:scale(.97)}

/* Waiting indicator */
.pm-waiting{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0}
.pm-waiting-spinner{
    width:32px;height:32px;border-radius:50%;
    border:3px solid rgba(0,0,0,.1);border-top-color:currentColor;
    animation:spin .9s linear infinite;
}
.pm-waiting-label{font-size:13px;opacity:.6;margin:0}

/* Success / Expired */
.pm-success,.pm-expired{
    display:flex;flex-direction:column;align-items:center;
    text-align:center;padding:36px 20px;
}
.pm-success-icon,.pm-expired-icon{font-size:52px;margin-bottom:12px;
    animation:successBounce .6s .1s cubic-bezier(.34,1.56,.64,1) both}
.pm-success-title,.pm-expired-title{font-size:19px;font-weight:700;margin:0 0 6px}
.pm-success-sub,.pm-expired-sub{font-size:14px;opacity:.6;margin:0}

/* Confirm & close buttons */
.btn-confirm-balance,.btn-pm-close{
    width:100%;padding:14px;border:none;border-radius:12px;
    background:var(--tg-theme-button-color,#FF6B35);color:var(--tg-theme-button-text-color,#fff);
    font-size:16px;font-weight:700;cursor:pointer;
    transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}
.btn-confirm-balance:active,.btn-pm-close:active{transform:scale(.95)}