html, body {
  height: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}
  /* ===== FREE PRODUCT STYLE ===== */
.price-old{
  color:#dc2626;               /* qizil */
  text-decoration: line-through;
  font-weight: 900;
  font-size: 13px;
}

.free-badge{
  display:inline-block;
  margin-left:6px;
  padding:2px 8px;
  border-radius:999px;
  background:#16a34a;           /* yashil */
  color:#ffffff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.3px;
}

/* Cart ichida chiroyli joylashish */
.cart-item-subrow{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:2px;
}
  /* ===== Real / clean receipt typography ===== */
:root{
  --rc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --rc-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#paymentModal .modal{
  background:#ffffff !important;
  color:#111827 !important;
  border:1px solid #e5e7eb;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

#paymentModal .modal-title{
  font-family: var(--rc-font);
  font-weight: 900;
  letter-spacing: .2px;
}

#paymentModal .modal-content{
  font-family: var(--rc-font);
}

.receipt-paper{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
}

.receipt-head{
  display:flex; justify-content:space-between; gap:12px; align-items:flex-start;
}

.receipt-brand{
  font-weight:900; font-size:14px;
}
.receipt-meta{
  font-size:12px; color:#6b7280;
}
.receipt-id{
  font-family: var(--rc-mono);
  font-size:12px;
  color:#374151;
  text-align:right;
}

.rc-hr{
  border:0; border-top:1px dashed #d1d5db; margin:12px 0;
}

.rc-section-title{
  font-weight:900;
  font-size:12px;
  color:#111827;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.rc-row{
  display:flex; justify-content:space-between; gap:10px; margin:6px 0;
  font-size:13px;
}
.rc-row b{ font-weight:500; }

.rc-item-name{
  flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.rc-total{
  display:flex; justify-content:space-between; gap:10px;
  border-top:1px solid #e5e7eb; margin-top:8px; padding-top:10px;
  font-size:14px; font-weight:900;
}
.rc-total .amt{ color:#111827; font-family: var(--rc-mono); }

.pay-note{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:12px;
}

.pay-note .title{
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:6px;
  color:#111827;
}

.pay-card{
  margin-top:10px;
  background:#fff;
  border:1px dashed #cbd5e1;
  border-radius:12px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.pay-card .label{ font-size:12px; color:#6b7280; }
.pay-card .num{ font-family: var(--rc-mono); font-weight:900; font-size:14px; color:#111827; }
.pay-card .copybtn{
  border:none; border-radius:999px; padding:8px 12px;
  background:#111827; color:#fff; font-weight:800; cursor:pointer;
}
.delivery-prize-block{
  margin-top:12px;
  background:#fff;
  border-radius:16px;
  padding:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;
  gap:12px;
  align-items:center;
}
.delivery-prize-img{
  width:54px;
  height:54px;
  border-radius:12px;
  background:#f3f4f6;
  overflow:hidden;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.delivery-prize-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.delivery-prize-info{flex:1; min-width:0;}
.delivery-prize-date{
  font-size:16px;
  font-weight:500;
  color:#111827;
  line-height:1.25;
}
.delivery-prize-name{
  margin-top:6px;
  font-size:13px;
  font-weight:500;
  color:#374151;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.delivery-prize-block{
  margin-top:12px;
  background:#fff;
  border-radius:16px;
  padding:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column; /* ✅ 2 ta item pastma-past */
  gap:10px;
}

.delivery-prize-item{
  display:flex;
  gap:12px;
  align-items:center;
}
/* ===== RECEIPT FREE STYLE ===== */
.rc-price-old{
  color:#dc2626;               /* qizil */
  text-decoration: line-through;
  font-weight:500;
  font-size:13px;
  margin-right:6px;
}

.rc-free-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  background:#16a34a;           /* yashil */
  color:#ffffff;
  font-size:11px;
  font-weight:500;
  letter-spacing:.3px;
}

.small-muted{ font-size:12px; color:#6b7280; line-height:1.6; }

    .product-img{width:100%;height:100%;object-fit:contain;display:block}
    *{margin:0;padding:0;box-sizing:border-box}
    body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f5f5f5;padding-bottom:80px}

    /* HEADER */
    .header{background:#fff;position:sticky;top:0;z-index:40;box-shadow:0 2px 4px rgba(0,0,0,.1);padding:15px}
    .header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}
    .city-btn{display:flex;align-items:center;gap:8px;border:none;background:none;font-size:14px;font-weight:600;cursor:pointer}
    .contest-btn{background:linear-gradient(to right,#fbbf24,#f97316);color:#581c87;padding:8px 16px;border-radius:20px;font-weight:700;font-size:12px;border:none;cursor:pointer;animation:pulse 2s infinite;box-shadow:0 4px 6px rgba(0,0,0,.2)}
    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.8}}
    .search-bar{display:flex;gap:10px}
    .search-wrapper{position:relative;flex:1}
    .search-input{width:100%;padding:12px 12px 12px 40px;border-radius:12px;border:none;background:#f3f4f6;font-size:14px}
    .search-icon{position:absolute;left:12px;top:12px;color:#9ca3af}
    .heart-btn{padding:12px;background:#f3f4f6;border-radius:12px;border:none;cursor:pointer;font-size:20px}

    /* MODAL */
    .modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;padding:20px}
    .modal{background:linear-gradient(135deg,#7c3aed,#ec4899);border-radius:24px;max-width:450px;width:100%;padding:30px;color:#fff;position:relative;animation:scaleIn .3s ease}
    @keyframes scaleIn{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
    .modal-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2);border:none;padding:8px;border-radius:50%;cursor:pointer;color:#fff;font-size:20px;width:36px;height:36px;line-height:20px}
    .modal-content{text-align:center}
    .modal-emoji{animation:bounce 1s infinite}
    @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    .modal-title{font-size:32px;font-weight:700;}
    .modal-subtitle{font-size:18px;}
    .prizes-grid{background:rgba(255,255,255,.2);border-radius:16px;padding:10px;margin-bottom:25px;backdrop-filter:blur(10px)}
    .prizes-title{font-weight:700;margin-bottom:15px;font-size:18px}
    .prize-items{display:grid;grid-template-columns:1fr 1fr;gap:12px; display: none;}
    .prize-item{background:rgba(255,255,255,.3);border-radius:12px;padding:15px}
    .prize-item.grand{grid-column:span 2}
    .prize-emoji{font-size:36px;margin-bottom:5px}
    .prize-name{font-size:14px;font-weight:600}
    .prize-desc{font-size:11px;margin-top:4px}
    .attempts-badge{background:#fbbf24;color:#581c87;border-radius:12px;padding:12px;margin-bottom:25px;font-weight:800}
    .modal-btn{width:100%;background:#fff;color:#7c3aed;padding:16px;border-radius:12px;font-weight:900;font-size:18px;border:none;cursor:pointer;transition:all .2s;box-shadow:0 4px 6px rgba(0,0,0,.2)}
    .modal-btn:hover{transform:scale(1.05)}

    /* GAME MODAL */
    .game-modal{background:linear-gradient(135deg,#5b21b6,#4338ca)}
    .game-header{text-align:center;margin-bottom:25px}
    .game-title{font-size:28px;font-weight:900;margin-bottom:10px}
    .attempts-counter{background:rgba(255,255,255,.2);border-radius:20px;padding:8px 16px;display:inline-block;font-weight:800}

    /* SPIN BUTTON */
    .spin-btn{width:100%;padding:16px;border-radius:12px;font-weight:900;font-size:18px;border:none;cursor:pointer;transition:all .2s;background:linear-gradient(to right,#fbbf24,#f59e0b);color:#581c87;box-shadow:0 4px 6px rgba(0,0,0,.2);margin-top:16px}
    .spin-btn:disabled{background:#6b7280;cursor:not-allowed}
    .spin-btn:not(:disabled):hover{transform:scale(1.05)}

    /* WON PRIZES */
    .won-prizes{margin-top:16px}
    .won-prizes-title{font-weight:800;font-size:14px;margin-bottom:8px}
    .won-prizes-row{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding:4px 0 2px}
    .won-prize-item{min-width:110px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.2);display:flex;align-items:center;gap:6px;flex-shrink:0}
    .won-prize-emoji{font-size:20px}
    .won-prize-name{font-size:11px;font-weight:700;line-height:1.2}
    .empty-prizes{text-align:center;color:rgba(255,255,255,.6);padding:16px 0;font-size:12px}

    /* RESULT MODAL */
    .result-modal{background:linear-gradient(135deg,#10b981,#059669)}
    .result-modal.none{background:linear-gradient(135deg,#6b7280,#4b5563)}
    .result-modal.grand{background:linear-gradient(to right,#7c3aed,#a855f7);position:relative;overflow:hidden}
    .result-emoji{font-size:100px;margin-bottom:20px;animation:bounceResult .5s ease}
    @keyframes bounceResult{0%{transform:scale(0)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
    .result-title{font-size:36px;font-weight:900;margin-bottom:10px}
    .result-subtitle{font-size:24px;font-weight:900;margin-bottom:20px}
    .promo-box,.contact-box{background:rgba(255,255,255,.3);border-radius:16px;padding:20px;margin-bottom:12px;backdrop-filter:blur(10px)}
    .promo-code{font-size:24px;font-weight:900;letter-spacing:1px;word-break:break-all}

    /* BANNER / PRODUCTS */
    .main-section{padding-bottom:70px}
    .banner{padding:15px}
    .banner-content{background:linear-gradient(to right,#7c3aed,#a855f7);border-radius:16px;padding:30px;color:#fff;position:relative;overflow:hidden}
    .banner-content h2{font-size:28px;font-weight:900;margin-bottom:8px}
    .banner-content p{font-size:14px}
    .banner-content .big{font-size:20px;font-weight:900}
    .banner-emoji{position:absolute;right:20px;top:20px;font-size:60px;opacity:.2}
    .products-section{padding:15px}
    .section-title{font-size:20px;font-weight:900;margin-bottom:15px;color:#111827}
    .products-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .product-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.1)}
    .product-image{position:relative;background:linear-gradient(135deg,#faf5ff,#fce7f3);height:176px;display:flex;align-items:center;justify-content:center}
    .discount-badge{position:absolute;top:8px;left:8px;background:linear-gradient(to right,#fbbf24,#f59e0b);color:#581c87;padding:4px 8px;border-radius:8px;font-size:11px;font-weight:900}
    .product-info{padding:12px}
    .product-name{font-size:14px;font-weight:600;margin-bottom:8px;height:40px;overflow:hidden;color:#1f2937}
    .product-price{font-size:18px;font-weight:900;margin-bottom:8px;color:#111827}
    .add-cart-btn{width:100%;background:#ede9fe;color:#7c3aed;padding:10px;border-radius:8px;font-size:14px;font-weight:800;border:none;cursor:pointer;transition:transform .2s}
    .add-cart-btn:active{transform:scale(.95)}

    /* CART */
    .cart-section{padding:15px;padding-bottom:90px}
    .cart-header-line{background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:12px}
    #cartCountText{font-size:16px;color:#111827}
    .cart-items-list{background:#fff;border-radius:16px;padding:12px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:16px}
    .cart-empty{font-size:14px;color:#6b7280;text-align:center;padding:16px 0}
    .cart-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid #e5e7eb}
    .cart-item:last-child{border-bottom:none}
    .cart-item-image{width:90px;height:60px;border-radius:12px;background:#f3f4f6;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
    .cart-item-image img{height:100%;object-fit:cover;display:block}
    .cart-item-info{flex:1}
    .cart-item-main-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
    .cart-item-main-price{font-size:16px;font-weight:700;color:#7c3aed}
    .cart-item-name{font-size:13px;font-weight:700;color:#111827;margin-bottom:4px}
    .cart-item-subrow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
    .old-price{text-decoration:line-through;color:#9ca3af;font-size:12px}
    .free-label{font-size:11px;font-weight:900;padding:2px 6px;border-radius:999px;background:#22c55e;color:#f9fafb}
    .cart-item-qty{display:inline-flex;align-items:center;gap:10px;border-radius:999px;background:#f3f4f6;padding:4px 10px;font-size:13px;margin-top:2px}
    .cart-item-qty button{width:20px;height:20px;border-radius:999px;border:none;background:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;cursor:default}

    .cart-summary-card{background:#fff;border-radius:16px;padding:14px 16px 10px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:12px}
    .cart-summary-title{font-size:15px;font-weight:500;color:#111827;margin-bottom:10px}
    .cart-summary-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;color:#374151}
    .cart-summary-row.total{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:8px;font-weight:500}
    .cart-summary-row.total span:last-child{color:#7c3aed;font-size:15px}
    .cart-bottom-bar{background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
    .cart-bottom-info{display:flex;flex-direction:column;gap:2px}
    .cart-bottom-price{font-size:16px;font-weight:550;color:#7c3aed}
    .cart-bottom-count{font-size:12px;color:#6b7280}
    .cart-bottom-btn{padding:10px 16px;border-radius:999px;border:none;background:#7c3aed;color:#fff;font-size:14px;font-weight:550;cursor:pointer}

    /* CHECKOUT */
    .checkout-section{padding:10px 15px 100px}
    .checkout-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
    .checkout-back{width:32px;height:32px;border-radius:999px;border:none;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
    .checkout-title{font-size:18px;font-weight:700;color:#111827}
    .delivery-card{background:#fff;border-radius:16px;padding:14px 16px 16px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:14px}
    .delivery-title{font-size:15px;font-weight:650;color:#111827;margin-bottom:10px}
    .delivery-subtitle{font-size:13px;color:#6b7280;margin-bottom:6px}
    .pickup-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:5px 10px;border-radius:999px;background:#f3f4ff;color:#4c1d95;font-weight:800;margin-bottom:10px; display: none;}
    .pickup-chip span{font-weight:900}
    .pickup-card{border-radius:12px;background:#f9fafb;padding:10px 12px 12px;margin-bottom:12px}
    .pickup-title{font-size:13px;font-weight:700;margin-bottom:2px}
    .pickup-address{font-size:12px;color:#111827;margin-bottom:2px}
    .pickup-note{font-size:11px;color:#6b7280;margin-bottom:10px}
    .pickup-change-btn{width:100%;border-radius:10px;border:none;background:#e5e7eb;padding:8px 10px;font-size:13px;font-weight:650;color:#111827;cursor:pointer}

    .receiver-card{margin-top:4px;border-radius:12px;background:#f9fafb;padding:10px 12px;cursor:pointer}
    .receiver-row{display:flex;align-items:center;gap:10px}
    .receiver-icon{width:32px;height:32px;border-radius:999px;background:#e0f2fe;display:flex;align-items:center;justify-content:center;font-size:18px}
    .receiver-info{display:flex;flex-direction:column;gap:2px}
    .receiver-name{font-size:13px;font-weight:700;color:#111827}
    .receiver-phone{font-size:12px;color:#4b5563}
    /* .placeholder{color:#9ca3af} */

    .checkout-summary-card{background:#fff;border-radius:16px;padding:14px 16px 16px;box-shadow:0 1px 3px rgba(0,0,0,.08);margin-bottom:70px}
    .checkout-summary-title{font-size:15px;font-weight:600;margin-bottom:10px}
    .checkout-summary-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;color:#374151}
    .checkout-summary-row.total{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:8px;font-weight:900}
    .checkout-summary-row.total span:last-child{color:#7c3aed;font-size:15px}
    /* Chegirma qatorini yashirish */
.checkout-summary-row.discount,
.checkout-summary-row--discount,
.checkout-summary-row[data-type="discount"]{
  display: none !important;
}
    .checkout-bottom-bar{position:fixed;left:0;right:0;bottom:70px;padding:8px 15px;z-index:45}
    /* .checkout-bottom-bar>div{background:#fff;border-radius:999px;padding:6px 8px 6px 12px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:space-between;gap:10px} */
    .checkout-bottom-info{display:flex;flex-direction:column;gap:2px}
    .checkout-bottom-count{font-size:11px;color:#6b7280}
    .checkout-bottom-total{font-size:16px;font-weight:900;color:#111827}
    .checkout-bottom-btn{border:none;border-radius:999px;padding:10px 14px;font-size:13px;font-weight:900;background:#7c3aed;color:#fff;cursor:pointer}

    /* Recipient modal */
    .recipient-modal{background:#fff;color:#111827}
    .recipient-modal .modal-title{color:#111827;margin-bottom:12px}
    .recipient-modal .modal-btn{background:#7c3aed;color:#f9fafb;box-shadow:none;margin-top:10px}
    .recipient-modal-content{text-align:left}
    .form-group{margin-bottom:10px}
    .form-group label{display:block;font-size:12px;font-weight:900;color:#4b5563;margin-bottom:4px}
    .form-group input{width:100%;border-radius:10px;border:1px solid #e5e7eb;padding:8px 10px;font-size:14px;outline:none}
    .form-group input:focus{border-color:#7c3aed}

    /* Bottom nav */
    .bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;padding:8px;z-index:50}
    .nav-items{display:flex;justify-content:space-around}
    .nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 16px;background:none;border:none;cursor:pointer;color:#6b7280}
    .nav-item span:first-child{font-size:24px}
    .nav-label{font-size:11px;font-weight:700}

    /* Map overlay */
    .overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(3px);display:none;z-index:999}
    .overlay.open{display:block}
    #mapFull{position:absolute;inset:0}
    .closeOverlay{position:absolute;top:12px;right:12px;border:0;background:rgba(17,24,39,.8);color:#f9fafb;border-radius:999px;padding:8px 10px;cursor:pointer;z-index:1000;font-size:16px}
    .sheet{position:absolute;left:16px;right:16px;bottom:16px;background:#fff;border-radius:14px;box-shadow:0 -8px 24px rgba(0,0,0,.35);padding:10px 12px;display:flex;align-items:center;gap:10px;z-index:1000}
    .sheet .sel{flex:1}
    .sheet .title{font-weight:900;font-size:14px;color:#111827}
    .sheet .sub{font-size:12px;color:#6b7280;margin-top:2px}
    .sheet .btn{flex:0 0 auto;min-width:120px;padding:10px 12px;border-radius:12px;border:0;cursor:pointer;background:#7c3aed;color:white;font-weight:900;font-size:13px}
    .hidden{display:none!important}

    /* ===== KALESO (WHEEL) ===== */
    .wheel-game{width:100%;display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:10px}
    .wheel-wrap{position:relative;width:min(860px,92%);margin:0 auto}
    #wheelCanvas{width:100%;height:auto;aspect-ratio:1/1;border-radius:999px;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.12);box-shadow:0 18px 60px rgba(0,0,0,.35);display:block}
    .wheel-pointer{position:absolute;left:50%;top:-10px;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:30px solid #ffd400;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35));z-index:5}
    .wheel-pointer::after{content:"";position:absolute;left:50%;top:18px;transform:translateX(-50%);width:10px;height:10px;border-radius:50%;}
    .wheel-center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 14px 40px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:6;overflow:hidden;border:5px solid rgba(255,212,0,.95)}
    .wheel-center-logo img{width:100%;height:100%;object-fit:cover;display:block}

    /* ===== SHARE WIDGET (RESULT MODAL ichida) ===== */
    .share-widget{font-family:'Rubik',system-ui,-apple-system,sans-serif;text-align:left}
    .share-widget .title{font-family:'Nunito',sans-serif;font-weight:900;font-size:14px;color:rgba(255,255,255,.95);line-height:1.6;margin-bottom:12px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
    .share-widget .btn-share,.share-widget .btn-reward{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 14px;border-radius:999px;border:none;cursor:pointer;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.15);transition:all .2s ease;position:relative;overflow:hidden}
    .share-widget .btn-share::after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:shine 2.5s infinite}
    @keyframes shine{0%{left:-100%}100%{left:200%}}
    .share-widget .btn-share:disabled,.share-widget .btn-reward:disabled{opacity:.45;cursor:not-allowed;transform:none}
    .share-widget .btn-share:disabled::after{display:none}
    .share-widget .btn-icons{display:flex;align-items:center;gap:2px}
    .share-widget .btn-icons img{width:28px;height:28px;object-fit:contain}
    .share-widget .btn-share-label{font-family:'Nunito',sans-serif;font-weight:900;font-size:16px;color:#0d5090;letter-spacing:.3px}
    .share-widget .gift-img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
    .share-widget .btn-reward-label{font-family:'Nunito',sans-serif;font-weight:900;font-size:16px;color:#1480c8;letter-spacing:.3px}
    .share-widget .progress-wrap{margin:10px 0}
    .share-widget .progress-box{background:transparent;border:2px solid rgba(255,255,255,.25);border-radius:999px;height:50px;position:relative;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.2) inset}
    .share-widget .progress-fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg,#1480c8,#22c1e0);border-radius:999px;transition:width .7s cubic-bezier(.4,0,.2,1);box-shadow:0 0 20px rgba(34,193,224,.35)}
    .share-widget .progress-fill::after{content:"";position:absolute;top:7px;left:10px;right:10px;height:7px;background:rgba(255,255,255,.2);border-radius:999px}
    .share-widget .progress-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Nunito',sans-serif;font-weight:900;font-size:18px;color:#ff4444;text-shadow:0 1px 4px rgba(0,0,0,.3);z-index:2;letter-spacing:.8px;transition:color .5s}
    .share-widget .progress-pct.filling{color:#fff}

    /* Share bottom sheet */
    .share-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:200;backdrop-filter:blur(3px)}
    .share-ov.on{display:block;animation:fo .2s ease}
    @keyframes fo{from{opacity:0}to{opacity:1}}
    .share-sheet{position:fixed;bottom:0;left:0;right:0;z-index:201;background:#fff;border-radius:26px 26px 0 0;padding:10px 20px 46px;transform:translateY(100%);transition:transform .36s cubic-bezier(.34,1.2,.64,1);font-family:'Rubik',sans-serif}
    .share-sheet.on{transform:translateY(0)}
    .share-handle{width:44px;height:4px;background:#e0e0e0;border-radius:2px;margin:0 auto 16px}
    .share-sheet-title{font-family:'Nunito',sans-serif;font-weight:900;font-size:16px;color:#111;text-align:center;margin-bottom:14px}
    .share-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
    .share-app-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border-radius:18px;border:none;cursor:pointer;background:#f4f6fa;font-size:12px;font-weight:800;color:#333;transition:all .18s ease}
    .share-app-btn:hover{background:#e8f0ff;transform:translateY(-2px)}
    .share-app-btn:active{transform:scale(.94)}
    .share-app-btn img{width:46px;height:46px;border-radius:14px;object-fit:cover}
    .share-other-ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}
    .share-cancel{width:100%;padding:14px;border-radius:999px;border:none;background:#f0f0f0;color:#777;font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;cursor:pointer}
    .share-cancel:hover{background:#e4e4e4}

    /* Success modal */
    .succ-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:260;align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(6px)}
    .succ-bg.on{display:flex;animation:fo .25s ease}
    .succ-box{background:linear-gradient(145deg,#1060a0,#062440);border:1px solid rgba(246,201,78,.3);border-radius:28px;padding:34px 26px;max-width:330px;width:100%;text-align:center;animation:pop .4s cubic-bezier(.34,1.56,.64,1);box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:'Rubik',sans-serif}
    @keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
    .succ-gift{font-size:56px;display:block;margin-bottom:10px;animation:gf 1.5s ease-in-out infinite}
    @keyframes gf{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
    .succ-box h2{font-family:'Nunito',sans-serif;font-weight:900;color:#f6c94e;font-size:28px;margin-bottom:10px}
    .succ-box p{color:#cce8f8;font-size:14px;line-height:1.7;margin-bottom:18px}
    .btn-succ-close{width:100%;padding:14px;border-radius:999px;border:none;background:linear-gradient(135deg,#f6c94e,#e8a010);color:#3a2000;font-family:'Nunito',sans-serif;font-weight:900;font-size:15px;cursor:pointer;transition:all .2s}
    .btn-succ-close:hover{transform:translateY(-2px)}
    #cnv{position:fixed;inset:0;pointer-events:none;z-index:300}
    /* 5-urinish: 2 ta sovrin rasm */
.prize-top-row{
  display:flex;
  justify-content:center;
  gap:18px;
  margin:10px 0 18px;
}
.prize-top-img{
  width:120px;
  height:120px;
  border-radius:18px;
  background:rgba(255,255,255,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.prize-top-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
/* iOS Safari input focus zoom fix */
input, textarea, select {
  font-size: 16px !important;
}

/* sizdagi maxsus inputlar ham */
.name-input,
.search-input,
#recipientNameInput,
#recipientPhoneInput,
.inputVBRSC {
  font-size: 16px !important;
}
:root{
  --w-bg:#ffffff;
  --w-border:#e6e6e6;
  --w-text:#111;
  --w-muted:#6b7280;
  --w-accent:#1d4ed8;
  --w-bot:#f3f4f6;
  --w-user:#1d4ed8;
  --w-user-text:#fff;
  --w-shadow: 0 12px 40px rgba(0,0,0,.18);
  --radius: 14px;
}
 /* ===== SUMMARY ICHIDAGI TEX SUPPORT ===== */
 .summary-support-btn{
  margin-top:12px;
  width:100%;
  height:44px;

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

  border:none;
  border-radius:12px;
  cursor:pointer;

  background: linear-gradient(135deg,#1eb42f,#4fbd80);
  color:#fff;
  font-size:14px;
  font-weight:900;
  letter-spacing:.3px;

  box-shadow:0 10px 26px rgba(37,99,235,.28);
  position:relative;
  overflow:hidden;

  transition:transform .18s ease, box-shadow .18s ease;
}

/* Hover */
.summary-support-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(37,99,235,.35);
}

/* Click */
.summary-support-btn:active{
  transform:scale(.98);
}

/* Yaltirash animatsiya */
.summary-support-btn::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );
  transform:skewX(-18deg);
  animation:summaryShine 2.8s infinite;
}

@keyframes summaryShine{
  0%{ left:-120%; }
  60%{ left:160%; }
  100%{ left:160%; }
}

/* Yashil online dot */
.ssd-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#ff0000;
  box-shadow:0 0 0 rgba(255, 225, 0, 0.6);
  animation:ssdPulse 1.5s infinite;
}

@keyframes ssdPulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 12px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

.ssd-text{
  white-space:nowrap;
}


    /* Widget window */
    .cw{
      position:fixed; right:18px; bottom:84px;
      width:min(370px, calc(100vw - 36px));
      height:520px;
      background:var(--w-bg);
      border:1px solid var(--w-border);
      border-radius: var(--radius);
      box-shadow: var(--w-shadow);
      display:none;
      flex-direction:column;
      overflow:hidden;
      z-index:9999;
    }
    .cw.open{ display:flex; }

    /* Header */
    .cw-h{
      padding:12px 12px;
      background: #0f172a;
      color:#fff;
      display:flex; align-items:center; justify-content:space-between;
      gap:10px;
    }
    .cw-title{ display:flex; align-items:center; gap:10px; }
    .cw-dot{
      width:10px; height:10px; border-radius:99px; background:#22c55e;
      box-shadow:0 0 0 3px rgba(34,197,94,.25);
    }
    .cw-h h3{ margin:0; font-size:15px; font-weight:700; }
    .cw-h .sub{ font-size:12px; color:#cbd5e1; margin-top:1px; }
    .cw-x{
      width:34px; height:34px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; background:rgba(255,255,255,.12);
    }

    /* Messages */
    .cw-m{
      flex:1;
      padding:12px;
      background:linear-gradient(180deg,#f8fafc, #ffffff);
      overflow:auto;
    }
    .msg{ display:flex; margin:10px 0; }
    .msg.bot{ justify-content:flex-start; }
    .msg.user{ justify-content:flex-end; }

    .bubble{
      max-width: 86%;
      padding:10px 12px;
      border-radius: 16px;
      font-size:14px;
      line-height:1.35;
      white-space:pre-wrap;
      color:var(--w-text);
      border:1px solid var(--w-border);
      background:var(--w-bot);
    }
    .user .bubble{
      background:var(--w-user);
      color:var(--w-user-text);
      border-color: transparent;
    }
    .meta{
      font-size:11px;
      color:var(--w-muted);
      margin-top:4px;
      padding:0 4px;
    }

    /* Typing indicator */
    .typing{
      display:inline-flex;
      gap:4px;
      align-items:center;
    }
    .typing i{
      width:6px; height:6px; border-radius:99px;
      background:#94a3b8;
      display:inline-block;
      animation: bounce 1.1s infinite ease-in-out;
    }
    .typing i:nth-child(2){ animation-delay:.15s; }
    .typing i:nth-child(3){ animation-delay:.3s; }
    @keyframes bounce{
      0%, 80%, 100%{ transform: translateY(0); opacity:.6; }
      40%{ transform: translateY(-5px); opacity:1; }
    }

    /* Input */
    .cw-f{
      padding:10px;
      border-top:1px solid var(--w-border);
      background:#fff;
      display:flex; gap:8px; align-items:center;
    }
    .cw-in{
      flex:1;
      border:1px solid var(--w-border);
      border-radius: 12px;
      padding:10px 12px;
      font-size:14px;
      outline:none;
    }
    .cw-send{
      width:42px; height:42px; border-radius:12px;
      background:var(--w-accent);
      border:none; color:#fff;
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
    }
    .cw-send:disabled{ opacity:.55; cursor:not-allowed; }

    /* Small */
    @media (max-height: 700px){
      .cw{ height: min(520px, calc(100vh - 120px)); }
    }
    #paymentModal .modal{
      max-height: 86vh;
      overflow: auto;
    }
    /* ===== REAL THERMAL RECEIPT LOOK ===== */
    :root{
      --rc-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
      --rc-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
    }
    
    #paymentModal .modal{
      background:#fff !important;
      color:#0b0f19 !important;
      border:1px solid #e5e7eb;
      box-shadow: 0 18px 50px rgba(0,0,0,.22);
      max-height: 86vh;
      overflow: auto;
    }
    
    #paymentModal .modal-title{
      font-family: var(--rc-sans);
      font-weight: 900;
      letter-spacing: .2px;
    }
    
    .receipt-paper{
      background:#ffffff;
      border:1px solid #e5e7eb;
      border-radius:12px;
      padding:14px 14px 12px;
    }
    
    /* thermal vibe */
    .receipt-thermal{
      font-family: var(--rc-mono);
      font-size: 12.5px;
      line-height: 1.35;
      letter-spacing: .2px;
    }
    
    .rc-topbrand{
      text-align:center;
      margin-bottom: 8px;
    }
    .rc-topbrand .logo{
      font-family: var(--rc-mono);
      font-weight: 900;
      font-size: 14px;
      letter-spacing: 1.2px;
    }
    .rc-topbrand .sub{
      font-size: 11px;
      color:#374151;
      margin-top:2px;
    }
    
    .rc-mini{
      display:flex;
      justify-content:space-between;
      gap:10px;
      color:#111827;
    }
    .rc-mini span{ white-space:nowrap; }
    
    .rc-dash{
      border:0;
      border-top: 1px dashed #9ca3af;
      margin: 10px 0;
    }
    
    .rc-sec{
      margin-top: 6px;
    }
    .rc-sec .ttl{
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
      margin-bottom: 6px;
    }
    
    .rc-line{
      display:flex;
      justify-content:space-between;
      gap:10px;
    }
    .rc-line .k{ color:#111827; }
    .rc-line .v{ font-weight:900; }
    
    .rc-muted{
      color:#374151;
      font-size: 11.5px;
      margin-top: 2px;
    }
    
    .rc-total{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:10px;
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed #9ca3af;
    }
    .rc-total .k{
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    .rc-total .v{
      font-weight: 900;
      font-size: 14px;
    }
    
    /* Payment card area */
    .pay-note{
      background:#fff;
      border:1px dashed #cbd5e1;
      border-radius:12px;
      padding:12px;
      margin-top: 12px;
    }
    
    .pay-note .title{
      font-family: var(--rc-mono);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 11px;
      margin-bottom: 8px;
    }
    
    .pay-card{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      padding:10px 10px;
      border-radius:10px;
      border:1px solid #e5e7eb;
    }
    
    .pay-card .label{
      font-family: var(--rc-mono);
      font-size: 11px;
      color:#374151;
    }
    .pay-card .num{
      font-family: var(--rc-mono);
      font-weight: 900;
      font-size: 14px;
      letter-spacing: .8px;
    }
    
    /* Icon copy button */
    .copybtn{
      display:inline-flex;
      align-items:center;
      gap:8px;
      border:1px solid #111827;
      border-radius:999px;
      padding:8px 12px;
      background:#111827;
      color:#fff;
      font-family: var(--rc-sans);
      font-weight: 900;
      cursor:pointer;
      transition: transform .12s ease, opacity .12s ease;
    }
    .copybtn:hover{ transform: translateY(-1px); }
    .copybtn:active{ transform: translateY(0); opacity:.9; }
    .copybtn svg{ width:16px; height:16px; fill:#fff; }
    
    /* Nice status text */
    #tgStatus{
      font-family: var(--rc-sans);
    }
    /* ===== PAYMENT BLOCK STYLE ===== */
    .pay-note{
      background:#fff;
      border:1px dashed #cbd5e1;
      border-radius:14px;
      padding:12px;
    }
    
    .pay-alert{
      background:#f0f9ff;
      border:1px solid #bae6fd;
      color:#0b3b63;
      padding:10px 12px;
      border-radius:12px;
      font-weight:500;
      font-size:13px;
      margin-bottom:10px;
    }
    
    .pay-note .title{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:1px;
      font-size:11px;
      margin-bottom:8px;
      color:#111827;
    }
    
    .pay-card.nice{
      border:1px solid #e5e7eb;
      border-radius:14px;
      padding:12px;
    }
    
    /* Label + logos in one row */
    .label-row{
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
    }
    .label-row .label{
      font-size:12px;
      color:#6b7280;
      font-weight:800;
    }
    
    .brand-row.inline{
      display:flex;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
    }
    .brand-ico{
      height:30px;
      width:auto;
      object-fit:contain;
      opacity:.95;
    }
    
    /* Card number + copy + badge in one row */
    .pay-row{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:nowrap;
      overflow-x:auto;           /* juda tor ekranda ham 1 qator bo'lib qoladi */
      -webkit-overflow-scrolling: touch;
    }
    .pay-row::-webkit-scrollbar{ height:0; }
    
    /* Card number: bigger, 1 line */
    .pay-row .num{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
      font-weight:700;
      font-size:16px;
      letter-spacing:1.1px;
      color:#111827;
      white-space:nowrap;
      line-height:1;
    }
    
    /* Copy button: small & pretty */
    .copybtn.tiny{
      padding:6px 9px;
      border-radius:10px;
      border:1px solid #3e4146;
      background:#ffffff;
      color:#686060;
      font-weight:900;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:7px;
      font-size:12px;
      flex:0 0 auto;
    }
    .copybtn.tiny svg{ width:14px; height:14px; fill:#353535; }
    
    /* "Copied" badge */
    .copied-badge{
      display:inline-flex;
      align-items:center;
      font-weight:900;
      font-size:10px;
      color:#065f46;
      background:#dcfce7;
      border:1px solid #86efac;
      border-radius:999px;
      opacity:0;
      transform: translateY(2px);
      transition: opacity .18s ease, transform .18s ease;
      pointer-events:none;
      white-space:nowrap;
    }
    .copied-badge.on{ opacity:1; transform: translateY(0); }