/* ==========================================================================
   app.css — CLEANED
   Purpose: Keep exact current design while removing unused legacy blocks.
   What changed:
     • Removed old countdown tiles (.flip/.unit/.tile) and legacy hero styles not used.
     • Kept category chips (.chipbar/.chip) and filter pills (.pill).
     • Kept hero-slider (content-height version).
     • Kept both quick-order-section (legacy) + qo-card (new) to avoid regressions.
     • No color/spacing changes — design preserved 1:1.
   ========================================================================== */

:root{
  --bg: #f8fafc; /* slate-50 */
  --fg: #0f172a; /* slate-900 */
  --muted: #64748b; /* slate-500 */
  --line: #e2e8f0; /* slate-200 */
  --card: #ffffff;

  /* Brand palette */
  --brand: #4f46e5; /* Indigo-600 */
  --brand-600: #4338ca; /* Indigo-700 */
  --brand-dark: #3730a3; /* Indigo-800 */
  --brand-light: #e0e7ff; /* Indigo-100 */
  --brand-rgb: 79, 70, 229; /* Indigo-600 RGB */

  --danger: #ef4444; /* red-500 */
  --radius: 16px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(2,8,23,.05);
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--bg); color:var(--fg); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
a{ color:inherit; text-decoration:none }
img{ display:block; width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }
input,select{ font:inherit }

.app{ max-width:1200px; margin:0 auto; padding-bottom:calc(64px + env(safe-area-inset-bottom)); }

/* ================= Header (hide on scroll) ================ */
header.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(8px);
  transition:transform .28s ease;
}
header.header.hide{ transform:translateY(-100%); }
.header-inner{ display:flex; align-items:center; gap:10px; padding:10px 14px; max-width:1200px; margin:0 auto; }
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.logo .mark{ width:28px; height:28px; border-radius:9px; background:linear-gradient(135deg,#38bdf8 0%,#0ea5e9 60%,#22d3ee 100%); box-shadow:var(--shadow); position:relative; }
.logo .mark:after{ content:""; position:absolute; inset:6px; border-radius:6px; background:#fff; mix-blend-mode:overlay; opacity:.4 }

.searchbar{ flex:1; display:flex; align-items:center; gap:8px; background:#f8fafc; border:1px solid var(--line); padding:8px 10px; border-radius:999px; box-shadow:0 1px 0 rgba(2,8,23,.02); max-width:620px; }
.searchbar input{ border:0; outline:0; background:transparent; width:100%; font-size:14px; }
.header-actions{ display:flex; align-items:center; gap:8px; }
.icon-btn{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); position:relative }
.badge{ position:absolute; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; display:grid; place-items:center; border:2px solid #fff; top:-6px; right:-6px; }

/* ================= Hero (new slider only) ================ */
.hero-slider {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 12px auto 4px auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.hero-slider .slides-wrap { position: relative; border-radius: 20px; overflow: hidden; }
.hero-slider .slide { position: relative; display: none; padding: 24px 40px; }
.hero-slider .slide.active { display: block; animation: fadeIn .25s ease-in; }
.hero-slider .slide .overlay { position:absolute; inset:0; z-index:1; }
.hero-slider .slide .slide-content { position:relative; z-index:2; max-width:560px; }
.hero-slider .slide .slide-content h2 { font-size:18px; margin:0 0 8px 0; }
.hero-slider .slide .slide-content p { margin:0 0 16px 0; }
.hero-slider .slides-dots {
  position:absolute; left:0; right:0; bottom:12px; z-index:3;
  display:flex; justify-content:center; gap:8px;
}

.hero-slider .slides-dots button {
  width:8px; height:8px; border-radius:999px; border:none;
  background:#cbd5e1; opacity:.9; cursor:pointer;
}
.btn{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 8px; border-radius:12px; border:1px solid transparent; background:var(--brand); color:#fff; font-size: 14px; font-weight:600; box-shadow:var(--shadow); }
.btn.secondary{ background:#fff; color:var(--brand-600); border-color:var(--line); }
.btn[disabled]{ opacity:.6; cursor:not-allowed }
.hero-slider .slides-dots button.active { background:#4f46e5; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
@media (max-width:1024px){ .hero-slider .slide{ padding:20px 40px } }
@media (max-width:768px){ .hero-slider .slide{ padding:12px 25px } .hero-slider .slide .slide-content{ max-width:100% } }

/* ================= Category Chips & Filters ================ */
.chipbar{ padding:8px 12px; display:flex; gap:8px; overflow:auto hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.chip{ flex:0 0 auto; scroll-snap-align:start; border:1px solid var(--line); background:#fff; padding:8px 12px; border-radius:999px; font-size:13px; color:#64748b; white-space:nowrap }
.chip.active{ background:#f2f1ff; color:#4c43e1; border-color:#8780f5 }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.pill{ border:1px solid var(--line); padding:8px 12px; border-radius:999px; font-size:13px; }
.pill.active{ background:#ecfeff; color:#4c43e1; border-color:#8780f5 }

/* ================= Products Grid & Cards ================ */
.products{ padding:8px 16px 16px; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; max-width:1200px; margin:0 auto; }
@media (min-width:600px){ .products{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column }
.thumb{ position:relative; background:#f1f5f9; }
.thumb::before{ content:""; display:block; padding-top:100%; }
.thumb img{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; }
.fav{ position:absolute; top:8px; right:8px; background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:999px; width:36px; height:36px; display:grid; place-items:center }
.info{ padding:10px 12px; display:flex; flex-direction:column; gap:8px; }
.title{ font-weight:600; font-size:14px; line-height:1.25; height:2.6em; overflow:hidden; }
.price{ font-weight:800; font-size:14px; display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
.price del{ color:#ef4444; font-weight:600; margin-left:0; text-decoration:line-through; text-decoration-color:#ef4444; text-decoration-thickness:1.5px; font-size:12px; opacity:.95 }
.sale{ position:absolute; left:8px; top:8px; background:rgba(255,255,255,.8); color:#a11f1f; border:1px solid #a11f1f; padding:4px 8px; font-size:12px; border-radius:999px }
.actions{ margin-top:6px; display:flex; gap:8px }
.btn-sm{ flex:1; display:inline-flex; justify-content:center; align-items:center; gap:8px; padding:7px 8px; border-radius:12px; font-weight:600; border:1px solid var(--line); background:#fff }
.btn-sm.primary{ background:var(--fg); color:#fff; border-color:transparent }

/* ================= Bottom Tabbar ================ */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--line);
  padding: env(safe-area-inset-bottom) 0 0;
}
.tabs{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); }
.tab{ padding:8px 0 10px; display:flex; align-items:center; justify-content:center; color:#94a3b8; }
.tab i{ width:46px; height:32px; border-radius:999px; display:grid; place-items:center; transition:.18s; }
.tab svg{ pointer-events:none }
.tab.active{ color:#0f172a; }
.tab.active i{ background:#0f172a10; box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(2,8,23,.06); border:1px solid #0f172a14; }

/* ================= Drawers, Sheets, Overlay ================ */
.overlay{ position:fixed; inset:0; background:rgba(2,8,23,.5); opacity:0; pointer-events:none; transition:.25s; z-index:80 }
.overlay.show{ opacity:1; pointer-events:all }
.drawer{ position:fixed; top:0; right:-100%; width:min(420px,100%); height:100%; background:#fff; border-left:1px solid var(--line); box-shadow: -10px 0 30px rgba(2,8,23,.15); transition:.3s; z-index:90; display:flex; flex-direction:column }
.drawer.show{ right:0 }
.drawer header{ padding:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between }
.list{ flex:1; overflow:auto; padding:10px 14px; display:flex; flex-direction:column; gap:12px }
.row{ display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:8px }

.sheet{ position:fixed; left:0; right:0; bottom:-100%; background:#fff; border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(2,8,23,.12); transition:.28s; z-index:85; border-top-left-radius:18px; border-top-right-radius:18px; max-height:88vh; overflow:auto }
.sheet.show{ bottom:0 }
.sheet .handle{ width:48px; height:4px; border-radius:999px; background:#e2e8f0; margin:8px auto }
.sheet .inner{ padding: 6px 16px 16px; display:grid; gap:12px }

.toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(20px); bottom:80px; background:rgba(2,8,23,.9); color:#fff; padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.28s; z-index:100; font-size:14px }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0) }

/* ================= Utilities & Product Detail ================ */
.muted{ color:var(--muted); font-size:13px }
.kv{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }

.deal-box{ border:1px solid var(--line); border-radius:16px; padding:12px; background:#fff; box-shadow:var(--shadow) }
.deal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.deal-title{ font-weight:700; font-size:14px }
.deal-price{ display:flex; gap:8px; align-items:baseline; font-weight:800 }
.deal-price .now{ color:var(--brand-600); font-size:18px }
.deal-price del{ color:#ef4444; font-weight:600; font-size:12px }

.gallery{ display:grid; gap:8px; grid-template-columns:repeat(3,1fr); }
.gitem{ position:relative; border:1px solid var(--line); border-radius:12px; overflow:hidden }
.gitem::before{ content:""; display:block; padding-top:100%; }
.gitem img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

.video { border-radius: 12px; overflow: hidden; border: 1px solid var(--line); max-width: 100%; display: inline-block; line-height: 0; }
.video iframe { max-width: 100%; border: 0; }

@media (min-width:1024px){
  #quickView{ left:50%; right:auto; bottom:auto; top:120%; transform:translateX(-50%); width:min(800px,92vw); border-radius:18px; border:1px solid var(--line); box-shadow:0 20px 40px rgba(2,8,23,.18); }
  #quickView.show{ top:10%; }
  .gallery{ grid-template-columns:repeat(4,1fr); }
}

/* ================= Footer ================ */
.site-footer-main { max-width: 1200px; margin: 20px auto; padding: 20px; text-align: center; border-top: 1px solid var(--line); }
.footer-links { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.footer-links a { color: var(--muted); font-size: 14px; font-weight: 500; }
.footer-links a:hover { color: var(--brand); }
.site-footer-main p { font-size: 13px; color: var(--muted); margin: 0; }

/* ================= QuickView extra media ================ */
.additional-images-container { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.additional-images-container img { display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--line); }

.product-description { line-height:1.6; color:var(--muted); font-size:14px; margin:12px 4px 4px; }
.product-description p { margin:0 0 10px 0; }
.product-description p:last-child { margin-bottom:0; }
.product-description ul, .product-description ol { padding-left:20px; margin-bottom:10px; }
.product-description b, .product-description strong { color:var(--fg); font-weight:600; }

/* ================= Loader & Cart summary ================ */
.loader { text-align:center; padding:20px; font-weight:500; color:var(--muted); }

.cart-summary { border-top:1px solid var(--line); padding:12px 14px; display:grid; gap:10px; }
.summary-row { display:flex; align-items:center; justify-content:space-between; font-size:14px; }
.summary-row.total { font-size:16px; font-weight:600; margin-top:5px; }

/* ================= Quick Order (legacy + new) ================ */
.quick-order-section { border:1px solid var(--line); border-radius:16px; padding:20px; margin-top:20px; background-color: var(--bg); box-shadow: var(--shadow-sm); }
.quick-order-section h3 { font-size:20px; font-weight:700; color:var(--fg); margin:0 0 10px; }
.quick-order-section .quick-order-desc { font-size:14px; color:var(--muted); margin-bottom:20px; line-height:1.5; }
.quick-order-section .payment-options { display:flex; gap:15px; margin-bottom:20px; }
.quick-order-section .payment-option { display:flex; align-items:center; gap:8px; font-size:15px; color:var(--fg); cursor:pointer; }
.quick-order-section .payment-option input[type="radio"] { width:18px; height:18px; border:1px solid var(--line); border-radius:50%; appearance:none; outline:none; cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; }
.quick-order-section .payment-option input[type="radio"]:checked { border-color: var(--brand); }
.quick-order-section .payment-option input[type="radio"]:checked::before { content:''; width:10px; height:10px; background-color: var(--brand); border-radius:50%; display:block; }
.quick-order-section .contact-inputs { display:grid; gap:12px; margin-bottom:20px; }
.quick-order-section .contact-inputs input { width:100%; padding:12px 15px; border:1px solid var(--line); border-radius:10px; font-size:15px; color:var(--fg); background-color: var(--bg); transition: border-color .2s, box-shadow .2s; }
.quick-order-section .contact-inputs input::placeholder { color:var(--muted); }
.quick-order-section .contact-inputs input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .2); outline:none; }
.quick-order-section .btn-quick-order { width:100%; padding:14px 20px; font-size:16px; font-weight:600; border-radius:12px; background-color: var(--brand); color:#fff; border:none; cursor:pointer; transition: background-color .2s, transform .1s; }
.quick-order-section .btn-quick-order:hover { background-color: var(--brand); transform: translateY(-1px); }
.quick-order-section .btn-quick-order:disabled { background-color: var(--muted); cursor:not-allowed; transform:none; }

/* New unified */
.qo-card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;box-shadow:0 2px 10px rgba(15,23,42,.06);display:grid;gap:12px}
.qo-title{margin:0;font-weight:800;font-size:18px}
.qo-desc{margin:0;color:var(--muted);font-size:13px}
.qo-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qo-label{font-weight:600;}
.qty-control{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px}
.qty-btn{width:40px;height:40px;display:grid;place-items:center;background:#f8fafc;border-radius:999px;cursor:pointer;font-size:18px;line-height:1;transition:transform .08s ease,background .15s ease;border:none}
.qty-btn:hover{background:#eef2ff}
.qty-btn:active{transform:scale(.96)}
.qty-input{width:72px;text-align:center;border:none;outline:none;font-weight:700;font-size:16px;background:transparent;color:var(--text)}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input[type=number]{-moz-appearance:textfield}
.stock-badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1}
.stock-badge.ok{background:#ecfeff;color:#0e7490;border:1px solid #a5f3fc}
.stock-badge.out{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.qo-totals{border-top:1px dashed var(--line);padding-top:10px;display:grid;gap:8px}
.qo-totals .row{display:flex;align-items:center;justify-content:space-between}
.qo-totals .row span{color:var(--muted)}
.qo-totals .row strong{font-weight:700}
.qo-totals .row.grand{padding-top:6px;border-top:1px solid var(--line)}
.qo-totals .row.grand strong{font-size:18px}

/* ================= Confirm & Success Popups ================ */
.confirm-modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);display:none;align-items:center;justify-content:center;z-index:1000}
.confirm-modal{background:#fff;border-radius:16px;width:min(420px,92vw);padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.confirm-modal h3{margin:0 0 8px;font-weight:800}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}

.confirm-popup{ position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.6); padding: 20px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.confirm-popup.show{ opacity:1; visibility:visible; }
.confirm-popup-content{ background:#fff; border-radius:20px; padding:24px; width:100%; max-width:420px; text-align:left; box-shadow:0 10px 25px rgba(0,0,0,.1); transform:scale(.96); transition:transform .25s; }
.confirm-popup.show .confirm-popup-content{ transform:scale(1); }
.confirm-icon{ width:64px; height:64px; margin:0 auto 10px auto; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#eef2ff; color:var(--brand-600); border:1px solid var(--line); }
.confirm-popup h2{ font-size:22px; font-weight:800; color:var(--fg); margin:6px 0 12px 0; text-align:center; }
.confirm-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }
.confirm-actions .btn{ padding:10px 14px; border-radius:12px; font-weight:700; }
.confirm-popup .order-summary{ background:#f8fafc; border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0 14px 0; }
.confirm-popup .order-summary h4{ margin:0 0 8px 0; font-size:14px; font-weight:700; color:var(--fg); }
#popupConfirmDetails p{ margin:4px 0; font-size:14px; color:var(--muted); }
#popupConfirmDetails strong{ color:var(--fg); font-weight:600; }

.success-popup { position: fixed; inset: 0; z-index: 11000; display: flex; align-items: center; justify-content: center; background-color: rgba(15, 23, 42, 0.6); padding: 20px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.success-popup.show { opacity: 1; visibility: visible; }
.success-popup-content { background-color: #fff; border-radius: 20px; padding: 30px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); transform: scale(0.95); transition: transform 0.3s ease; }
.success-popup.show .success-popup-content { transform: scale(1); }
.success-icon { width: 80px; height: 80px; margin: 0 auto 20px auto; background-color: #dcfce7; color: #22c55e; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.success-popup h2 { font-size: 24px; font-weight: 700; color: var(--fg); margin: 0 0 10px 0; }
.success-popup .success-message { font-size: 15px; color: var(--muted); line-height: 1.6; margin-bottom: 25px; }
.order-summary { background-color: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: 15px; text-align: left; margin-bottom: 25px; }
.order-summary h4 { margin: 0 0 10px 0; font-size: 14px; font-weight: 600; color: var(--fg); }
#popupOrderDetails p { margin: 4px 0; font-size: 14px; color: var(--muted); }
#popupOrderDetails strong { color: var(--fg); font-weight: 500; }
.btn-popup-close { width: 100%; padding: 12px; background-color: var(--brand); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; }
/* --- QuickView Header Redesign --- */
.quickview-header {
    padding: 16px 4px 4px 4px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}

.quickview-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
    color: var(--fg);
}

.quickview-price-container {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.quickview-current-price {
    font-size: 28px;
    font-weight: 800;
    color: var(--brand);
}

.quickview-old-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--danger);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.quickview-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.meta-pill {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
}

.category-pill {
    background-color: #f1f5f9; /* slate-100 */
    color: #475569; /* slate-600 */
}

.stock-pill.in-stock {
    background-color: #ecfdf5; /* green-50 */
    color: #166534; /* green-800 */
}

.stock-pill.out-of-stock {
    background-color: #fef2f2; /* red-50 */
    color: #991b1b; /* red-800 */
    font-weight: 600;
}


/* == QPay bank grid: smaller labels/icons, better mobile == */
.banks{
  display:grid; gap:10px; margin-top:10px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.bank{
    display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:5px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-sm); text-align:center; transition: transform .08s ease;
}
.bank .ico{
  width:52px; height:52px; border-radius:50%;
}
.bank .label{
  font-size:12px;               /* 13 → 12 */
  font-weight:600;
  color:var(--fg);
  line-height:1.1;
  max-width:100%;
  white-space:nowrap;            /* нэг мөр */
  overflow:hidden;
  text-overflow:ellipsis;        /* урт бол ... */
}

/* Mobile-д бүр жаахан багасгая */
@media (max-width: 480px){
  .banks{ gap:8px; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .bank{ padding:8px; border-radius:10px; }
  .bank .ico{ width:46px; height:46px; }
  .bank .label{ font-size:11px; }
}


/* ==== QPay bank grid (server.js style) ==== */
.qpay-bank-grid{
  display:grid; gap:12px; margin-top:8px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.qpay-bank{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:10px; border-radius:12px; background:#fff; border:1px solid var(--line);
  box-shadow: var(--shadow-sm); text-align:center; transition: transform .08s ease;
}
.qpay-bank:active{ transform: scale(.98); }
.qpay-bank .ico{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; background:#fff; border:1px solid var(--line);
}
.qpay-bank .ico img{ width:100%; height:100%; object-fit:cover; display:block; }
.qpay-bank .label{ font-size:13px; font-weight:600; color:var(--fg); line-height:1.2 }









/* ========== QPay Polished UI ========== */
.qpay-box{display:grid;gap:16px}
.qpay-grid{
  display:grid;gap:16px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px){
  .qpay-grid{grid-template-columns: 1fr 1fr}
}
.qpay-card{
  background: var(--card, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(2,8,23,.06);
  padding: 16px;
}
.qpay-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.qpay-card-title{font-weight:700;font-size:16px}
.qpay-sub{font-size:10px;color:var(--muted,#64748b)}
.qpay-qr-wrap{display:flex;justify-content:center;align-items:center;margin:8px 0 12px}
.qpay-qr-img{
  width:100%; max-width:320px; height:auto; display:block;
  border-radius:14px; border:1px solid var(--line,#e2e8f0); background:#fff;
  transition: transform .18s ease;
}
.qpay-qr-link:hover .qpay-qr-img{ transform: translateY(-2px) }
.qpay-qr-placeholder{
  width:280px;height:280px;border-radius:14px;border:1px dashed var(--line);display:grid;place-items:center;color:var(--muted)
}
.qpay-btn{
  display:block; text-align:center; font-weight:600;
  padding:12px 14px; border-radius:12px;
  background: linear-gradient(180deg, var(--brand,#0ea5e9), var(--brand-600,#0284c7));
  color:#fff; text-decoration:none;
  box-shadow: 0 8px 18px rgba(2,132,199,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.qpay-btn:active{ transform: translateY(1px) }
.qpay-btn:hover{ box-shadow: 0 10px 22px rgba(2,132,199,.32) }
.qpay-status{
  margin-top:10px; text-align:center; font-size:12px; color:var(--muted);
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.qpay-status .dot{
  width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5;display:inline-block;
  animation: qpay-bounce 1.2s infinite ease-in-out;
}
.qpay-status .dot:nth-child(2){ animation-delay:.15s }
.qpay-status .dot:nth-child(3){ animation-delay:.3s }
@keyframes qpay-bounce{
  0%,80%,100%{ transform:scale(0) }
  40%{ transform:scale(1) }
}

.qpay-transfer .qpay-kv{display:grid;gap:10px}
.qpay-kv-row{display:flex;justify-content:space-between;gap:12px;align-items:center}
.qpay-kv-row span{color:var(--muted);font-size:13px}
.qpay-copyline{display:flex;gap:8px;align-items:center}
.qpay-copy{
  font-size:12px; padding:6px 10px; border-radius:10px; border:1px solid var(--line);
  background:#fff; color:var(--fg,#0f172a); cursor:pointer;
}
.qpay-copy.sm{ padding:4px 8px }
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}

.qpay-bank-grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
.qpay-bank{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--line); border-radius:12px; padding:10px;
  background:#fff; text-decoration:none; color:inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.qpay-bank:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(2,8,23,.06);
  border-color: rgba(2,132,199,.35);
}
.qpay-bank-ico{
  width:34px;height:34px;border-radius:10px;overflow:hidden;display:grid;place-items:center;
  background:#f8fafc;border:1px solid var(--line)
}
.qpay-bank-ico img{width:100%;height:100%;object-fit:contain}
.qpay-bank-name{font-size:13px;font-weight:600}


/* --- QPay transfer list (aligned, clean) --- */
.qpay-list{display:flex;flex-direction:column;border-radius:12px;overflow:hidden}
.qpay-row{
  display:grid; align-items:center;
  grid-template-columns: clamp(90px,22vw,140px) 1fr 88px; /* label · value · copy */
  column-gap:12px; padding:5px 0;
  border-bottom:1px dashed var(--line, #e2e8f0);
}
.qpay-row:last-child{border-bottom:0}
.qpay-label{color:var(--muted,#64748b);font-size:13px}
.qpay-value{font-size:14px; word-break:break-word}
.qpay-value.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.qpay-copy,
.qpay-copy.sm{
  justify-self:end; min-width:84px; text-align:center;
  font-size:12px; padding:3px 5px; border-radius:10px;
  border:1px solid var(--line,#e2e8f0); background:#fff; color:var(--fg,#0f172a);
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.qpay-copy:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(2,8,23,.06);border-color:rgba(2,132,199,.35)}
.qpay-copy:active{transform:translateY(0)}
.qpay-copy-spacer{width:84px;justify-self:end} /* copy баганад зай нөөцлөх */
.qpay-note{margin-top:12px;text-align:center;font-size:10px;color:var(--muted,#64748b)}


.qpay-tatah{
  align-items: center;
  min-width:84px; text-align:center;
  font-size:14px; font-weight: bold; padding:6px 10px; border-radius:10px;
  border:2px solid var(--line,#eee); background:#fff; color:var(--fg,#0f172a);
  
}





/* --- QuickView action row (Add to Cart / Favorite / Buy Now) --- */
.quickview-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px }
.quickview-actions .btn{ flex:1 1 auto }
@media (min-width: 768px){
  .quickview-actions .btn{ flex:0 0 auto }
}