/* ==========================================================================
   UAEPC Smart Product Search — component styles (namespaced .us-)
   Self-contained: renders well on a navy hero OR a light page.
   Loaded on: /{lang}/search-test (test), later the home hero.
   ========================================================================== */
.us{
  --us-navy1:#0a0e1a; --us-navy2:#1a1f2e;
  --us-gold:#f5a623; --us-gold-dk:#d97706; --us-gold-tx:#d4900f; --us-gold-lt:#ffc966;
  --us-cream:#fff7e0; --us-cream2:#fff3cc; --us-cream-bd:#f5d680;
  --us-card:#ffffff; --us-bd:#e4e7ec; --us-bd2:#eef0f3;
  --us-tx1:#1a1a1a; --us-tx2:#5f6368; --us-tx3:#9aa0aa;
  --us-ok:#15803d; --us-ok-bg:#e9f7ee; --us-ok-bd:#b7e3c6;
  --us-radius:14px;
  font-family:'Vazirmatn','Segoe UI',Tahoma,system-ui,-apple-system,sans-serif;
  display:block;
}
.us *{box-sizing:border-box}

/* optional hero wrapper (data-hero="1") */
.us-hero{
  position:relative; overflow:hidden; border-radius:20px; margin-bottom:16px;
  padding:34px 24px 30px;
  background:
    radial-gradient(680px 300px at 78% -30%,rgba(245,166,35,.20),transparent 60%),
    radial-gradient(520px 260px at 8% 130%,rgba(245,166,35,.10),transparent 60%),
    linear-gradient(135deg,#0a0e1a,#1a1f2e 55%,#0a0e1a);
}
.us-hero{text-align:center}
.us-hero-h{margin:0 0 6px;color:#fff;font-size:24px;font-weight:800;letter-spacing:-.2px}
.us-hero-p{margin:0 auto 18px;color:#c3cad9;font-size:14px;line-height:1.7;max-width:58ch}
.us-hero-p .us-acc{color:var(--us-gold-lt)}

/* search input */
.us-box{position:relative;max-width:640px;margin-inline:auto;text-align:start}
.us-input{
  width:100%;height:54px;border:2px solid transparent;border-radius:13px;background:#fff;
  color:var(--us-tx1);font-family:inherit;font-size:16px;padding:0;padding-inline-start:18px;padding-inline-end:18px;outline:none;
  box-shadow:0 10px 28px -12px rgba(0,0,0,.45);transition:border-color .15s,box-shadow .15s;
  text-overflow:ellipsis;
}
.us-input::placeholder{color:#9aa0aa}
.us-input:focus{border-color:var(--us-gold);box-shadow:0 12px 32px -12px rgba(245,166,35,.5)}
/* kill the browser's native search "x" (no custom search icon anymore) */
.us-input::-webkit-search-cancel-button,.us-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.us-input::-ms-clear{display:none;width:0;height:0}

/* chips — uniform grid, 4/3/2 columns like the home category grid (12 items, no orphans) */
.us-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px auto 0;max-width:640px}
.us-chip{
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  background:#fff;color:#3a4048;border:1px solid var(--us-bd);border-radius:10px;
  padding:9px 6px;transition:.14s;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.us-chip:hover{background:var(--us-cream);border-color:var(--us-gold);color:var(--us-gold-dk)}
.us-chip.on{background:var(--us-gold);border-color:var(--us-gold-dk);color:#231600;font-weight:800}
/* quiet ghost style when the box sits on the navy hero */
.us-hero .us-chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#dfe4ee}
.us-hero .us-chip:hover{background:rgba(245,166,35,.14);border-color:rgba(245,166,35,.6);color:#fff}
.us-hero .us-chip.on{background:var(--us-gold);border-color:var(--us-gold);color:#231600}
@media (max-width:720px){.us-chips{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.us-chips{grid-template-columns:repeat(2,1fr);gap:6px}.us-chip{font-size:12px;padding:8px 6px}}

/* results */
.us-results{margin-top:4px}
.us-rhead{display:flex;align-items:center;gap:8px;margin:2px 2px 12px;color:var(--us-tx2);font-size:13.5px;flex-wrap:wrap}
.us-rhead .us-n{color:var(--us-tx1);font-weight:700}
.us-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:12px}

.us-card{background:var(--us-card);border:1px solid var(--us-bd);border-radius:var(--us-radius);padding:13px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.us-card:hover{border-color:var(--us-gold)}
.us-ctop{display:flex;gap:12px;align-items:flex-start}
.us-thumb{flex:0 0 50px;width:50px;height:50px;border-radius:11px;background:linear-gradient(160deg,#fff7e0,#ffedc2);border:1px solid var(--us-cream-bd);display:flex;align-items:center;justify-content:center;color:#b7863a}
.us-thumb svg{width:26px;height:26px}
.us-cbody{flex:1;min-width:0}
.us-cname{font-weight:700;font-size:14.5px;color:var(--us-tx1);line-height:1.35;word-break:break-word}
.us-cname mark{background:var(--us-cream2);color:var(--us-gold-dk);padding:0 1px;border-radius:3px}
.us-cmeta{margin-top:3px;font-size:12.5px;color:var(--us-tx2);font-variant-numeric:tabular-nums}
.us-cfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.us-grade{font-size:11.5px;font-weight:800;color:#7a5200;background:var(--us-cream);border:1px solid var(--us-cream-bd);border-radius:7px;padding:2px 8px;letter-spacing:.3px}
.us-stock{font-size:11.5px;color:var(--us-ok);font-weight:700}
.us-stock.out{color:#b91c1c}
.us-note{font-size:11.5px;color:var(--us-tx3)}
.us-cact{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px dashed var(--us-bd2);padding-top:11px}

.us-qty{display:inline-flex;align-items:center;border:1px solid var(--us-bd);border-radius:9px;overflow:hidden;background:#fff}
.us-qty button{width:30px;height:32px;border:none;background:#f6f7f9;color:var(--us-tx1);font-size:17px;line-height:1;cursor:pointer;transition:.12s;font-family:inherit}
.us-qty button:hover{background:var(--us-cream)}
.us-qty input{width:46px;height:32px;border:none;text-align:center;font-family:inherit;font-size:14px;font-variant-numeric:tabular-nums;-moz-appearance:textfield;background:transparent;outline:none;color:var(--us-tx1)}
.us-qty input::-webkit-outer-spin-button,.us-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.us-btn{cursor:pointer;font-family:inherit;font-size:13px;font-weight:800;color:#231600;background:linear-gradient(135deg,var(--us-gold),var(--us-gold-dk));border:none;border-radius:10px;padding:9px 13px;display:inline-flex;align-items:center;gap:6px;transition:.14s;box-shadow:0 4px 12px -4px rgba(217,119,6,.5);text-decoration:none}
.us-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.us-btn svg{width:15px;height:15px}

/* not found */
.us-nf{background:linear-gradient(135deg,var(--us-cream),var(--us-cream2));border:1px solid var(--us-cream-bd);border-radius:var(--us-radius);padding:15px 17px;margin-bottom:14px;display:flex;gap:12px;align-items:flex-start}
.us-nf .us-ic{flex:0 0 40px;width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--us-cream-bd);display:flex;align-items:center;justify-content:center;color:var(--us-gold-dk)}
.us-nf .us-ic svg{width:22px;height:22px}
.us-nf h3{margin:0 0 3px;font-size:15px;color:#8a5a06;overflow-wrap:break-word}
.us-nf p{margin:0;font-size:13px;color:#7a5f2e;line-height:1.6}
.us-nf .us-q{font-weight:800;color:#7a4e00}

/* price-list pointer (shown instead of in-stock cards when we DO have the item) */
.us-have{display:flex;align-items:center;gap:12px;padding:12px 15px;border-radius:13px;margin:0 0 14px;background:linear-gradient(135deg,#e9f7ee,#d7f0e0);border:1px solid #b7e3c6}
.us-have .us-ic{flex:0 0 34px;width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid #b7e3c6;display:flex;align-items:center;justify-content:center;color:#15803d}
.us-have .us-ic svg{width:19px;height:19px}
.us-have-tx{flex:1;min-width:0;font-weight:700;font-size:14px;color:#166534;overflow-wrap:break-word}
.us-have-btn{flex-shrink:0;background:#15803d;color:#fff;border-radius:10px;padding:9px 14px;font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap;transition:.14s}
.us-have-btn:hover{background:#11702f}
@media (max-width:480px){.us-have{flex-wrap:wrap}.us-have-btn{flex-basis:100%;text-align:center}}
.us-empty-lg{text-align:center;padding:26px 16px;font-size:14px;line-height:1.8;background:var(--us-card);border:1px dashed var(--us-bd);border-radius:var(--us-radius)}

.us-finding{display:flex;align-items:center;gap:12px;padding:18px;background:var(--us-card);border:1px solid var(--us-bd);border-radius:var(--us-radius);color:var(--us-tx2);font-size:14px}
.us-dot{width:18px;height:18px;border-radius:50%;border:2px solid #e7e2d3;border-top-color:var(--us-gold);animation:us-sp .6s linear infinite;flex-shrink:0}
@keyframes us-sp{to{transform:rotate(360deg)}}
.us-simhead{display:flex;align-items:center;gap:7px;margin:2px 2px 12px;font-size:13px;font-weight:800;color:var(--us-gold-dk);flex-wrap:wrap}
.us-simhead .us-star{color:var(--us-gold);width:16px;height:16px;flex-shrink:0}
.us-badge{background:var(--us-cream);border:1px solid var(--us-cream-bd);color:#8a5a06;border-radius:999px;padding:2px 9px;font-size:11px;font-weight:700}
.us-src .us-thumb,.us-thumb-src{background:linear-gradient(160deg,#eef4fc,#dce8fa);border-color:#cfe0f5;color:#3f74b8}
.us-src:hover{border-color:#8fb4e6}
.us-srctag{font-size:11.5px;font-weight:800;color:#1e5fa8;background:#eaf2fc;border:1px solid #cfe0f5;border-radius:7px;padding:2px 8px}

/* section banners that separate "in stock" from "we can source" */
.us-band{display:flex;align-items:center;gap:10px 12px;padding:12px 15px;border-radius:13px;margin:0 0 12px;flex-wrap:wrap}
.us-band .us-band-ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.us-band .us-band-ic svg{width:20px;height:20px}
.us-band-tx{min-width:0;flex:1 1 220px}
.us-band-t{font-weight:800;font-size:14.5px;line-height:1.4;overflow-wrap:break-word}
.us-band-s{font-size:12px;opacity:.92;margin-top:1px}
.us-band-tag{margin-inline-start:auto;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:3px 11px;font-size:11px;font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.us-band-src{background:linear-gradient(135deg,#2563a8,#3d82c8);color:#fff}
.us-band-stock{background:linear-gradient(135deg,#f5a623,#d97706);color:#231600}
.us-band-stock .us-band-ic{background:rgba(0,0,0,.13)}
.us-band-stock .us-band-tag{background:rgba(0,0,0,.14);border-color:rgba(0,0,0,.2);color:#231600}
.us-group{margin-bottom:22px}

/* per-card select checkbox */
.us-card{position:relative}
.us-check{display:inline-flex;align-items:center;cursor:pointer;flex-shrink:0}
.us-check input{position:absolute;opacity:0;width:1px;height:1px}
.us-checkbox{width:20px;height:20px;border:2px solid var(--us-bd);border-radius:6px;background:#fff;display:inline-flex;align-items:center;justify-content:center;transition:.13s}
.us-check input:checked + .us-checkbox{background:var(--us-gold);border-color:var(--us-gold-dk)}
.us-check input:checked + .us-checkbox::after{content:"";width:5px;height:9px;border:solid #231600;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px}
.us-check input:focus-visible + .us-checkbox{outline:3px solid rgba(245,166,35,.5);outline-offset:2px}
.us-card.sel{border-color:var(--us-gold);box-shadow:0 0 0 3px rgba(245,166,35,.16)}

/* "more" buttons */
.us-more{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--us-gold-dk);background:#fff;border:1px solid var(--us-cream-bd);border-radius:10px;padding:9px 15px;margin-top:10px;transition:.14s}
.us-more:hover{background:var(--us-cream);border-color:var(--us-gold)}
.us-more[disabled]{opacity:.6;cursor:default}
.us-more svg{width:15px;height:15px}
.us-more-wrap{text-align:center}

/* floating multi-select action bar */
.us-selbar{position:fixed;bottom:16px;inset-inline-start:50%;transform:translateX(50%);z-index:60;display:none;align-items:center;gap:14px;background:#0a0e1a;color:#fff;border:1px solid rgba(245,166,35,.42);border-radius:14px;padding:11px 15px;box-shadow:0 16px 40px -10px rgba(0,0,0,.6);max-width:94vw}
[dir="ltr"] .us-selbar{transform:translateX(-50%)}
.us-selbar.show{display:flex}
.us-selc{font-size:13.5px;font-weight:700;white-space:nowrap}
.us-selc b{color:var(--us-gold-lt);font-size:15px}
.us-selbar .us-btn{padding:9px 15px}
.us-selclear{background:transparent;color:#c3cad9;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:8px 12px;cursor:pointer;font-family:inherit;font-size:13px}
.us-selclear:hover{color:#fff;border-color:rgba(255,255,255,.4)}
@media (max-width:480px){.us-selbar{inset-inline:10px;transform:none;justify-content:space-between;bottom:10px}[dir="ltr"] .us-selbar{transform:none}.us-selc b{font-size:14px}}

/* MOQ notice line + below-minimum qty warning */
.us-moq{display:flex;align-items:center;gap:8px;font-size:12px;color:#8a5a06;background:var(--us-cream);border:1px solid var(--us-cream-bd);border-radius:10px;padding:8px 12px;margin:0 0 12px;line-height:1.6}
.us-moq svg{width:15px;height:15px;flex-shrink:0;color:var(--us-gold-dk)}
.us-qty.warn{border-color:#dc2626}
.us-qty.warn input{color:#b91c1c;font-weight:700}

/* add-to-quote-list button + quote-list bar */
.us-add{cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:800;color:var(--us-gold-dk);background:#fff;border:1.5px solid var(--us-cream-bd);border-radius:10px;padding:9px 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.14s;flex:1;min-width:0}
.us-add:hover{background:var(--us-cream);border-color:var(--us-gold)}
.us-add svg{width:14px;height:14px;flex-shrink:0}
.us-add.added{background:var(--us-ok-bg);border-color:var(--us-ok-bd);color:var(--us-ok)}
.us-bigcta.added{background:var(--us-ok-bg);color:var(--us-ok);box-shadow:none;border:1.5px solid var(--us-ok-bd)}
.us-selinfo{display:flex;flex-direction:column;gap:2px;min-width:0}
.us-selhint{font-size:11px;color:#aeb6c6;line-height:1.5;white-space:normal}
.us-selwarn{font-size:11px;color:#fca5a5;font-weight:700;line-height:1.5;white-space:normal}
.us-selwarn[hidden]{display:none}
.us-selbar{flex-wrap:wrap}
@media (max-width:560px){.us-selinfo{flex-basis:100%}}

.us-bigcta{width:100%;cursor:pointer;font-family:inherit;margin-top:14px;border:none;border-radius:var(--us-radius);background:linear-gradient(135deg,var(--us-gold),var(--us-gold-dk));color:#231600;padding:15px;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 8px 22px -8px rgba(217,119,6,.6);transition:.15s;text-decoration:none;overflow-wrap:break-word}
.us-bigcta:hover{transform:translateY(-1px);filter:brightness(1.04)}
.us-bigcta svg{width:19px;height:19px}

.us-empty{color:var(--us-tx2);font-size:13.5px;padding:6px 2px}

@media (prefers-reduced-motion:reduce){.us *{animation:none!important;transition:none!important}}
@media (max-width:560px){
  .us-hero{padding:24px 16px 22px;border-radius:16px}
  .us-hero-h{font-size:20px}
  .us-input{height:50px;font-size:15px}
}