/* Ninja Quick Buy v2 — light, fast COD/quick-order popup. Self-contained. */
.ninja-qb-overlay{
  --g:var(--qb-accent,#C8A96E); --g7:var(--qb-accent-d,#9c7f46);
  --ink:#2a2521; --ink2:#756c60; --line:#e0d4c0; --cream:#fdfbf7; --surface:#fff; --ok:#3a8f5b; --err:#c0392b;
  position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(14,10,6,.82);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
  font-family:inherit;direction:rtl}
.ninja-qb-overlay.is-open{opacity:1;visibility:visible}
*[class^="ninja-qb"]{box-sizing:border-box}
.ninja-qb-overlay [hidden]{display:none!important}

.ninja-qb-modal{background:var(--cream);width:100%;max-width:450px;border-radius:20px;
  position:relative;box-shadow:0 40px 90px rgba(0,0,0,.5);border:1px solid rgba(200,169,110,.25);
  max-height:94vh;display:flex;flex-direction:column;overflow:hidden;
  transform:translateY(16px) scale(.98);transition:transform .3s cubic-bezier(.2,.7,.3,1);text-align:right}
.ninja-qb-overlay.is-open .ninja-qb-modal{transform:none}

/* header: X on the LEFT, title on the right */
.ninja-qb-head{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}
.ninja-qb-close{order:0;flex:0 0 auto;width:34px;height:34px;border:0;background:rgba(0,0,0,.05);border-radius:50%;
  font-size:16px;color:var(--ink);cursor:pointer;transition:.2s;display:grid;place-items:center}
.ninja-qb-close:hover{background:var(--err);color:#fff;transform:rotate(90deg)}
.ninja-qb-title{order:1;flex:1;margin:0;font-size:1.06rem;font-weight:800;color:var(--ink)}

.ninja-qb-scroll{overflow-y:auto;padding:16px 22px 22px}

.ninja-qb-product{display:flex;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:16px}
.ninja-qb-img{width:72px;height:72px;object-fit:cover;background:#f3ede3;border-radius:10px;flex:0 0 auto;padding:5px}
.ninja-qb-name{font-weight:700;color:var(--ink);font-size:.97rem;line-height:1.4}
.ninja-qb-price{color:var(--g7);font-weight:800;margin-top:4px}

.ninja-qb-form{display:flex;flex-direction:column;gap:11px}

.ninja-qb-qty{display:flex;align-items:center;justify-content:space-between;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:8px 14px}
.ninja-qb-qty>span{font-weight:700;color:var(--ink2);font-size:.9rem}
.ninja-qb-stepper{display:flex;align-items:center;gap:6px}
.ninja-qb-stepper button{width:34px;height:34px;border:1px solid var(--line);background:var(--cream);border-radius:9px;
  font-size:1.1rem;font-weight:700;color:var(--ink);cursor:pointer;transition:.2s}
.ninja-qb-stepper button:hover{border-color:var(--g);color:var(--g7)}
.ninja-qb-stepper input{width:50px;text-align:center;padding:.5em;font-weight:700;border:1px solid var(--line);border-radius:8px;-moz-appearance:textfield}
.ninja-qb-stepper input::-webkit-outer-spin-button,.ninja-qb-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* icon fields */
.ninja-qb-field{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line);
  border-radius:12px;padding:0 14px;transition:border .2s,box-shadow .2s;position:relative}
.ninja-qb-field:focus-within{border-color:var(--g);box-shadow:0 0 0 3px rgba(200,169,110,.16)}
.ninja-qb-field>i{color:var(--g7);font-size:.95rem;width:18px;text-align:center;flex:0 0 auto}
.ninja-qb-field input,.ninja-qb-field select,.ninja-qb-field textarea,
.ninja-qb-city-wrap input,.ninja-qb-city-wrap select{
  border:0!important;background:transparent!important;padding:.9em 0!important;flex:1;width:100%;
  font:inherit;font-size:.95rem;color:var(--ink);outline:none!important;text-align:right;box-shadow:none!important}
.ninja-qb-city-wrap{flex:1}
.ninja-qb-field select{-webkit-appearance:none;appearance:none;cursor:pointer}
.ninja-qb-field--select::after{content:"\f078";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;inset-inline-start:14px;top:50%;transform:translateY(-50%);color:var(--ink2);font-size:.72rem;pointer-events:none}
.ninja-qb-field--area{align-items:flex-start}
.ninja-qb-field--area>i{margin-top:15px}
.ninja-qb-field textarea{resize:vertical;min-height:50px}
.ninja-qb-field:has(.is-err){border-color:var(--err)!important;background:#fff6f5}

/* coupon */
.ninja-qb-coupon-toggle{background:none;border:0;color:var(--g7);font-weight:700;font-size:.88rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:2px 0}
.ninja-qb-coupon-toggle:hover{text-decoration:underline}
.ninja-qb-coupon-box{display:flex;gap:8px;margin-top:8px}
.ninja-qb-coupon-box .ninja-qb-field{flex:1}
.ninja-qb-coupon-apply{flex:0 0 auto;background:var(--ink);color:#fff;border:0;border-radius:10px;
  padding:0 18px;font-weight:700;font-size:.85rem;cursor:pointer;transition:.2s}
.ninja-qb-coupon-apply:hover{background:#000}
.ninja-qb-coupon-msg{font-size:.82rem;font-weight:700;margin-top:6px}
.ninja-qb-coupon-msg.ok{color:var(--ok)}
.ninja-qb-coupon-msg.err{color:var(--err)}

/* payment methods */
.ninja-qb-pay-label{display:block;font-weight:800;font-size:.88rem;color:var(--ink);margin-bottom:8px}
.ninja-qb-methods{display:flex;flex-direction:column;gap:8px}
.ninja-qb-method{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:12px;
  padding:12px 14px;cursor:pointer;transition:.2s;background:var(--surface)}
.ninja-qb-method:hover{border-color:var(--g)}
.ninja-qb-method.is-on{border-color:var(--g);background:#fbf4e6;box-shadow:0 0 0 2px rgba(200,169,110,.18)}
.ninja-qb-method input{accent-color:var(--g);width:18px;height:18px}
.ninja-qb-method i{color:var(--g7)}
.ninja-qb-method span{font-weight:700;font-size:.9rem}
.ninja-qb-wallet{margin-top:10px;background:#fbf4e6;border:1px dashed var(--g);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.ninja-qb-wallet-note{font-size:.84rem;color:var(--ink2);line-height:1.6;margin:0}
.ninja-qb-wallet-num{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.ninja-qb-wallet-num b{font-size:1rem;color:var(--ink);direction:ltr}
.ninja-qb-wallet-num small{display:block;color:var(--ink2);font-size:.72rem}
.ninja-qb-copy{background:var(--g);color:#fff;border:0;border-radius:8px;padding:6px 12px;font-size:.78rem;font-weight:700;cursor:pointer}
.ninja-qb-upload{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px dashed var(--line);border-radius:10px;padding:12px;cursor:pointer;font-size:.85rem;color:var(--ink2);font-weight:700}
.ninja-qb-upload:hover{border-color:var(--g);color:var(--g7)}
.ninja-qb-upload i{color:var(--g7)}
.ninja-qb-upload input{display:none}
.ninja-qb-upload.has-file{border-style:solid;border-color:var(--ok);color:var(--ok)}

/* totals */
.ninja-qb-totals{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;display:flex;flex-direction:column;gap:6px}
.ninja-qb-row{display:flex;align-items:center;justify-content:space-between;font-size:.9rem;color:var(--ink2);font-weight:700}
.ninja-qb-row--disc{color:var(--ok)}
.ninja-qb-row--total{font-size:1.05rem;color:var(--ink);margin-top:2px}
.ninja-qb-total-val{color:var(--g7);font-size:1.35rem;font-weight:800}

.ninja-qb-submit{margin-top:6px;background:var(--g);color:#fff;border:0;border-radius:999px;
  padding:1em;font-size:1.02rem;font-weight:800;cursor:pointer;transition:.25s;box-shadow:0 10px 26px rgba(200,169,110,.34)}
.ninja-qb-submit:hover{background:var(--g7);transform:translateY(-2px)}
.ninja-qb-submit:disabled{opacity:.65;cursor:not-allowed;transform:none}
.ninja-qb-cod{text-align:center;color:var(--ink2);font-size:.8rem;margin:8px 0 0}
.ninja-qb-cod i{color:var(--g7)}
.ninja-qb-msg{background:#fdecea;color:var(--err);border-radius:10px;padding:.7em 1em;font-size:.86rem;font-weight:700}

/* success */
.ninja-qb-done{padding:40px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.ninja-qb-check svg{width:96px;height:96px}
.ninja-qb-check__c{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:151;stroke-dashoffset:151;animation:qbCircle .6s ease forwards}
.ninja-qb-check__m{stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:qbMark .35s .55s ease forwards}
@keyframes qbCircle{to{stroke-dashoffset:0}}
@keyframes qbMark{to{stroke-dashoffset:0}}
.ninja-qb-done-msg{font-size:1.05rem;font-weight:800;color:var(--ink);margin:14px 0 4px;line-height:1.7;opacity:0;animation:qbFade .4s .9s forwards}
.ninja-qb-done-num{color:var(--ink2);font-size:.85rem;opacity:0;animation:qbFade .4s 1s forwards}
.ninja-qb-done-btn{margin-top:14px;display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:.8em 1.8em;font-weight:700;opacity:0;animation:qbFade .4s 1.1s forwards}
.ninja-qb-done-btn:hover{background:#000;color:#fff}
@keyframes qbFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:480px){
  .ninja-qb-modal{max-width:100%;border-radius:18px}
  .ninja-qb-head{padding:16px 18px 12px}
  .ninja-qb-scroll{padding:14px 16px 18px}
}