/* Stuff brand: palette tokens, the one loading animation, busy overlay and the Jalali date picker.
   Loaded on every Stuff page (panels, checkout, documents, login, RFQ). Change colors only here. */
:root {
	--stf-teal: #0e4b47;      /* سبزآبی تیره — primary buttons, active items */
	--stf-teal-d: #0a3835;
	--stf-teal-l: #7cc4d6;    /* سبزآبی روشن */
	--stf-teal-bg: #e3f2f6;
	--stf-orange: #f7a23b;    /* نارنجی روشن */
	--stf-orange-r: #f26a1b;  /* نارنجی قرمزتر — call to action */
	--stf-orange-bg: #fff0e6;
	--stf-gray: #6b7678;      /* طوسی */
	--stf-gray-l: #eef0ef;    /* خاکستری روشن */
	--stf-khaki: #bfb08a;     /* خاکی */
	--stf-khaki-bg: #f3f2ee;
}

/* ---------- loader: three boxes stacking (Stuff = goods), with a soft shimmer line ---------- */
.stf-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 48px 0 32px; color: var(--stf-gray); font-size: 13px; animation: stf-fade .2s ease both; }
.stf-loader-mark { position: relative; width: 52px; height: 44px; }
.stf-loader-mark i { position: absolute; width: 22px; height: 18px; border-radius: 5px; animation: stf-stack 1.5s cubic-bezier(.5, 0, .3, 1.4) infinite; }
.stf-loader-mark i:nth-child(1) { right: 2px; bottom: 0; background: var(--stf-teal); }
.stf-loader-mark i:nth-child(2) { left: 2px; bottom: 0; background: var(--stf-teal-l); animation-delay: .15s; }
.stf-loader-mark i:nth-child(3) { right: 15px; bottom: 21px; background: var(--stf-orange-r); animation-delay: .3s; }
.stf-loader-line { width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--stf-gray-l) 0%, var(--stf-teal-l) 50%, var(--stf-gray-l) 100%) 0 0 / 300% 100%; animation: stf-shim 1.2s linear infinite; }
.stf-loader.sm { flex-direction: row; padding: 0; gap: 8px; }
.stf-loader.sm .stf-loader-mark { width: 30px; height: 26px; }
.stf-loader.sm .stf-loader-mark i { width: 13px; height: 11px; border-radius: 3px; }
.stf-loader.sm .stf-loader-mark i:nth-child(3) { right: 8px; bottom: 13px; }
.stf-loader.sm .stf-loader-line { display: none; }
@keyframes stf-stack { 0% { transform: translateY(-16px); opacity: 0; } 25%, 75% { transform: none; opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@keyframes stf-shim { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes stf-fade { from { opacity: 0; } to { opacity: 1; } }

/* Busy: a thin progress bar on top of the page + the loader over the content (after a short delay). */
.stf-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100000; height: 3px; overflow: hidden; pointer-events: none; }
.stf-topbar i { position: absolute; top: 0; height: 100%; width: 35%; border-radius: 3px; background: linear-gradient(90deg, var(--stf-teal), var(--stf-orange-r)); animation: stf-run 1s ease-in-out infinite; }
@keyframes stf-run { from { right: -35%; } to { right: 100%; } }
.stf-veil { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .55); backdrop-filter: blur(1px); animation: stf-fade .2s ease both; }
.stf-veil .stf-loader { padding: 18px 22px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(14, 75, 71, .12); }
.stf-btn-busy { position: relative; color: transparent !important; pointer-events: none; }
.stf-btn-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; border-radius: 50%; animation: stf-spin .7s linear infinite; }
.stf-btn-busy.on-light::after { border-color: rgba(14, 75, 71, .25); border-top-color: var(--stf-teal); }
@keyframes stf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stf-loader-mark i, .stf-loader-line, .stf-topbar i { animation: none; } }

/* ---------- Jalali date picker (StuffUI.jdate): a click on a day picks it; no confirm button ---------- */
.stf-jd { position: fixed; z-index: 100020; width: 272px; padding: 10px; box-sizing: border-box; background: #fff; border: 1px solid #e3e6e5; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, .14); font-family: inherit; font-size: 13px; color: #1f2b2a; direction: rtl; }
.stf-jd-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.stf-jd-head select { flex: 1; height: 32px; min-width: 0; padding: 0 6px; border: 1px solid #e3e6e5; border-radius: 8px; background: #fff; font: inherit; }
.stf-jd-head button { width: 32px; height: 32px; flex: none; border: 1px solid #e3e6e5; border-radius: 8px; background: #fff; font-size: 16px; cursor: pointer; }
.stf-jd-week, .stf-jd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.stf-jd-week b { font-weight: 400; color: var(--stf-gray); font-size: 11px; padding: 4px 0; }
.stf-jd-days button { height: 32px; border: 0; border-radius: 8px; background: none; font: inherit; cursor: pointer; }
.stf-jd-days button:hover { background: var(--stf-teal-bg); }
.stf-jd-days button.on { background: var(--stf-teal); color: #fff; }
.stf-jd-days button.today { box-shadow: inset 0 0 0 1px var(--stf-teal-l); }
.stf-jd-days button:disabled { color: #c5cbca; cursor: default; background: none; }
.stf-jd-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.stf-jd-foot button { border: 0; background: none; color: var(--stf-teal); font: inherit; font-size: 12px; cursor: pointer; padding: 4px; }
input.stf-jd-in { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7678' stroke-width='1.7'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; background-size: 18px; padding-left: 36px !important; }

/* ---------- header icons + user menu (Shell::top_icons / user_menu) on every Stuff page ---------- */
.stf-um { position: relative; }
.stf-um-btn { width: 40px; height: 40px; padding: 0; border: 2px solid #dfe5e4; border-radius: 50%; background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.stf-um .f { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--stf-teal); color: #fff; font-style: normal; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.stf-um .f img { width: 100%; height: 100%; object-fit: cover; }
.stf-um.open .stf-um-btn, .stf-um-btn:hover { border-color: var(--stf-teal-l); }
.stf-um-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; width: 300px; padding: 12px; background: #fff; border: 1px solid #e3e8e7; border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, .13); direction: rtl; animation: stf-fade .15s ease both; }
.stf-um-pop hr { border: 0; border-top: 1px solid #eef1f0; margin: 10px 0; }
.stf-um-head { display: flex; align-items: center; gap: 10px; }
.stf-um-photo { position: relative; flex: none; cursor: pointer; }
.stf-um-photo .f { width: 46px; height: 46px; font-size: 18px; }
.stf-um-photo input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.stf-um-photo em { position: absolute; bottom: -2px; left: -2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 1px solid #dfe5e4; display: flex; align-items: center; justify-content: center; }
.stf-um-photo em svg { width: 12px; height: 12px; color: var(--stf-teal); }
.stf-um-photo.busy .f { opacity: .5; }
.stf-um-me { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.stf-um-me b { font-size: 14px; color: #1f2b2a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stf-um-me small { font-size: 12px; color: var(--stf-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* buy / sell toggle (left side) */
.stf-um-tg { flex: none; display: inline-flex; padding: 3px; border-radius: 999px; background: var(--stf-gray-l); }
.stf-um-tg a { padding: 5px 11px; border-radius: 999px; font-size: 12px; color: var(--stf-gray) !important; text-decoration: none; white-space: nowrap; }
.stf-um-tg a.on { background: var(--stf-teal); color: #fff !important; font-weight: 700; box-shadow: 0 2px 6px rgba(14, 75, 71, .25); }
.stf-um-tg a.join { color: var(--stf-orange-r) !important; }
/* plan + wallet boxes */
.stf-um-box { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid #e3e8e7; border-radius: 12px; color: #1f2b2a !important; text-decoration: none; }
.stf-um-box:hover { border-color: var(--stf-teal-l); background: #fbfdfd; }
.stf-um-box i { width: 34px; height: 34px; flex: none; border-radius: 10px; background: var(--stf-teal-bg); display: flex; align-items: center; justify-content: center; }
.stf-um-box i svg { width: 18px; height: 18px; color: var(--stf-teal); }
.stf-um-box.is-wallet i { background: var(--stf-orange-bg); } .stf-um-box.is-wallet i svg { color: var(--stf-orange-r); }
.stf-um-box span { flex: 1; display: flex; flex-direction: column; gap: 2px; } .stf-um-box b { font-size: 13px; font-weight: 600; } .stf-um-box small { font-size: 12px; color: var(--stf-gray); }
.stf-um-box em { font-style: normal; color: var(--stf-gray); }
/* rows */
.stf-um-pop nav { display: flex; flex-direction: column; }
.stf-um-pop nav a, .stf-um-out { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #1f2b2a !important; text-decoration: none; font-size: 13.5px; }
.stf-um-pop nav a svg, .stf-um-out svg { width: 18px; height: 18px; color: var(--stf-gray); flex: none; }
.stf-um-pop nav a:hover { background: var(--stf-teal-bg); }
.stf-um-out { color: #b42318 !important; } .stf-um-out svg { color: #b42318; } .stf-um-out:hover { background: #fdecea; }
.stf-um-login { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--stf-teal); border-radius: 10px; color: var(--stf-teal) !important; text-decoration: none; font-size: 13px; }
.stf-um-login svg { width: 18px; height: 18px; }

/* ---------- mobile bottom tab bar (Shell::tabbar) ---------- */
.stf-tabbar { display: none; }
@media (max-width: 860px) {
	.stf-tabbar { position: fixed; right: 0; left: 0; bottom: 0; z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #e3e8e7; box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); direction: rtl; }
	.stf-tabbar a, .stf-tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; color: var(--stf-gray) !important; text-decoration: none; font: inherit; font-size: 11px; cursor: pointer; }
	.stf-tabbar svg { width: 22px; height: 22px; }
	.stf-tabbar a.on { color: var(--stf-teal) !important; font-weight: 700; }
	body:has(.stf-tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
	body:has(.stf-tabbar) .sp-burger { display: none !important; }
	body:has(.stf-tabbar) .stf-explore, body:has(.stf-tabbar) .sp-top .stf-market { display: none !important; } /* search and «بازارگاه» live in the bottom bar */
	/* phones, top, right to left: messages · logo · notifications */
	.sp-top { justify-content: space-between; }
	.sp-top .sp-top-actions { display: contents; }
	.sp-top .stf-back, .sp-top .stf-market, .sp-top .stf-explore, .sp-top .stf-cart, .sp-top .sp-burger, .sp-top .sp-collapse, .sp-top .stf-um-btn, .sp-top .stf-um-login { display: none !important; }
	.sp-top .stf-help, .sp-top .stf-chat-btn, .sp-top > .sp-ai { order: 1; }
	.sp-top .stf-brand { order: 2; flex: 1; justify-content: center; margin: 0; }
	.sp-top .stf-brand > span { display: none; }
	.sp-top .sp-bell { order: 3; }
	.sp-top .stf-um { order: 4; width: 0; }
	/* the user menu opens from the bottom bar's photo */
	.sp-top .stf-um-pop { position: fixed; top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); left: 8px; right: 8px; width: auto; max-height: calc(100vh - 140px); overflow: auto; }
	/* bottom bar: icons only */
	.stf-bbar > a, .stf-bbar > button { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 0; background: none; color: #4b5856; position: relative; cursor: pointer; }
	.stf-bbar svg { width: 26px; height: 26px; }
	.stf-bbar .stf-tab-market svg { color: var(--stf-orange-r); }
	.stf-bb-me img, .stf-bb-me i { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--stf-teal); color: #fff; font-style: normal; font-weight: 700; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #cfe3df; }
	.stf-bbar .stf-tab-n { top: 6px; left: calc(50% - 20px); }
	.stf-tabbar .stf-tab-market svg { color: var(--stf-orange-r); }
	.stf-tabbar [data-menu] span { white-space: nowrap; font-size: 10px; letter-spacing: -.2px; }
	.stf-tabbar svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
	.stf-tab-cart { position: relative; } .stf-tab-n { position: absolute; top: 0; left: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--stf-orange-r); color: #fff; font-style: normal; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
	body:has(.stf-tabbar) .sp-draft, body:has(.stf-tabbar) .ssp-bar { bottom: calc(70px + env(safe-area-inset-bottom)); }
	.stf-um-pop { position: fixed; top: 60px; left: 10px; right: 10px; width: auto; max-height: calc(100vh - 150px); overflow-y: auto; }
	.sp-top-actions .sp-ico, .stf-um-btn { width: 36px; height: 36px; }
	.stf-um .stf-um-btn .f { width: 28px; height: 28px; }
}
/* The open user menu sits above everything on the page (the header's own stacking level is low). */
.sp-top:has(.stf-um.open), .sco-top:has(.stf-um.open) { z-index: 400; }
@media (max-width: 860px) {
	.stf-um.open::before { content: ""; position: fixed; inset: 0; background: rgba(15, 25, 24, .35); z-index: 0; }
	.stf-um-pop { z-index: 1; }
}

/* help icon: assistant · messages · support (Shell::help) */
.stf-help { position: relative; }
.stf-help-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 200; width: 300px; padding: 8px; background: #fff; border: 1px solid #e3e8e7; border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, .13); direction: rtl; display: flex; flex-direction: column; gap: 2px; animation: stf-fade .15s ease both; }
.stf-help-pop[hidden] { display: none; }
.stf-help-i { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: 12px; background: none; font: inherit; text-align: right; color: #1f2b2a !important; text-decoration: none; cursor: pointer; }
.stf-help-i:hover { background: #f3f8f7; }
.stf-help-i > i { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #eef5f4; color: var(--stf-teal); display: inline-flex; align-items: center; justify-content: center; }
.stf-help-i > i svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stf-help-i:first-child > i { background: linear-gradient(135deg, #0e4b47, #2c7f78); color: #fff; }
.stf-help-i span { display: flex; flex-direction: column; gap: 2px; } .stf-help-i b { font-size: 14px; } .stf-help-i small { font-size: 12px; color: #6b7678; line-height: 1.6; }
.sp-top:has(.stf-help.open), .sco-top:has(.stf-help.open) { z-index: 400; }
@media (max-width: 480px) { .stf-help-pop { position: fixed; top: 60px; left: 8px; right: 8px; width: auto; } }

/* code / password veil (ui.js: StuffUI.stepup, askPassword) */
.stf-veil { position: fixed; inset: 0; z-index: 10000; background: rgba(14, 30, 28, .45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: stf-fade .15s ease both; }
.stf-veil-b { width: min(380px, 100%); background: #fff; border-radius: 20px; padding: 22px 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .2); text-align: center; font-family: inherit; }
.stf-veil-t { display: block; font-size: 17px; margin-bottom: 6px; color: #1f2b2a; }
.stf-veil-p { margin: 0 0 16px; font-size: 13px; line-height: 1.9; color: #5b6866; }
.stf-otp6 { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.stf-otp6 span { height: 50px; border: 1.5px solid #e3e8e7; border-radius: 12px; background: #f6f8f8; display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700; }
.stf-otp6 span.on { border-color: var(--stf-teal); background: #fff; box-shadow: 0 0 0 2px rgba(14, 75, 71, .12); }
.stf-otp6 input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; font-size: 16px; caret-color: transparent; }
.stf-veil-m { min-height: 20px; margin: 10px 0 0; font-size: 12.5px; color: #6b7678; } .stf-veil-m.bad { color: #c2410c; } .stf-veil-m.ok { color: #1b7f4b; }
.stf-veil-a { display: flex; justify-content: space-between; margin-top: 8px; }
.stf-veil-l { border: 0; background: none; font: inherit; font-size: 13px; color: var(--stf-teal); cursor: pointer; text-decoration: underline; } .stf-veil-l:disabled { color: #9aa5a3; text-decoration: none; cursor: default; }
.stf-veil-f { display: flex; flex-direction: column; gap: 10px; } .stf-veil-f input { height: 46px; border: 1px solid #dfe5e4; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 15px; text-align: center; }
.stf-veil-btn { height: 46px; border: 0; border-radius: 12px; background: var(--stf-teal); color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .stf-veil-btn:disabled { opacity: .6; }

/* site pages: the buyer menu drawer (bottom bar «منو») */
.stf-mdrawer { position: fixed; inset: 0; z-index: 9000; direction: rtl; }
.stf-mdrawer[hidden] { display: none; }
.stf-mdrawer-shade { position: absolute; inset: 0; background: rgba(15, 30, 28, .3); }
.stf-mdrawer-b { position: absolute; top: 0; bottom: 0; right: 0; width: min(300px, 86vw); background: #fff; padding: 10px 10px calc(80px + env(safe-area-inset-bottom)); overflow: auto; display: flex; flex-direction: column; gap: 2px; animation: stf-fade .15s ease both; }
.stf-mdrawer-b header { display: flex; justify-content: space-between; align-items: center; padding: 8px 6px 12px; border-bottom: 1px solid #eef1f0; margin-bottom: 6px; } .stf-mdrawer-b header button { border: 0; background: none; font-size: 24px; cursor: pointer; color: #6b7678; }
.stf-mdrawer-b a { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; color: #1f2b2a !important; text-decoration: none; font-size: 14.5px; } .stf-mdrawer-b a:hover { background: #f3f8f7; }
.stf-mdrawer-b svg { width: 20px; height: 20px; fill: none; stroke: var(--stf-teal); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* «اپ استاف» sheet (app.js) */
.stfa { position: fixed; inset: 0; z-index: 9995; background: rgba(14, 30, 28, .4); display: flex; align-items: flex-end; justify-content: center; animation: stf-fade .2s ease both; font-family: inherit; }
.stfa-sheet { width: min(460px, 100%); background: #fff; border-radius: 22px 22px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .18); }
@media (min-width: 861px) { .stfa { align-items: center; } .stfa-sheet { border-radius: 22px; } }
.stfa-head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; } .stfa-head img { width: 48px; height: 48px; border-radius: 14px; } .stfa-head span { display: flex; flex-direction: column; } .stfa-head b { font-size: 16px; color: #1f2b2a; } .stfa-head small { font-size: 12.5px; color: #6b7678; }
.stfa-row { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e6ebea; border-radius: 16px; }
.stfa-row > i { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eef5f4; color: var(--stf-teal); display: inline-flex; align-items: center; justify-content: center; }
.stfa-row.done > i { background: #e6f6ee; color: #1b7f4b; }
.stfa-row svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stfa-row span { flex: 1; display: flex; flex-direction: column; gap: 3px; } .stfa-row b { font-size: 14px; color: #1f2b2a; } .stfa-row small { font-size: 12px; color: #6b7678; line-height: 1.8; }
.stfa-row button { flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--stf-teal); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.stfa-k { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-weight: 700; color: var(--stf-teal); } .stfa-k svg { width: 15px; height: 15px; }
.stfa-done { height: 46px; border: 1px solid #e6ebea; border-radius: 14px; background: #fff; font: inherit; font-weight: 700; color: #1f2b2a; cursor: pointer; margin-top: 4px; }

/* ---------- sign-in modal (StuffUI.login) ---------- */
html.stf-noscroll { overflow: hidden; }
.stf-auth { position: fixed; inset: 0; z-index: 100000; background: rgba(10, 24, 23, .62); display: flex; align-items: center; justify-content: center; padding: 16px; animation: stf-fade .18s ease both; }
.stf-auth-b { position: relative; width: min(420px, 100%); height: min(640px, calc(100vh - 32px)); background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.stf-auth-b iframe { width: 100%; height: 100%; border: 0; display: block; opacity: 0; transition: opacity .2s; }
.stf-auth.ready iframe { opacity: 1; } .stf-auth.ready .stf-loader { display: none; }
.stf-auth-b > .stf-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stf-auth-x { position: absolute; top: 10px; left: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f4f3; color: #1f2b2a; font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 600px) { .stf-auth { padding: 0; align-items: flex-end; } .stf-auth-b { width: 100%; height: 92vh; border-radius: 22px 22px 0 0; } }
.stf-veil-row { display: flex; gap: 10px; } .stf-veil-row .stf-veil-btn { flex: 1; } .stf-veil-btn.ghost { background: #fff; color: var(--stf-teal) !important; border: 1px solid #cfdad8; }

/* ---------- offline ---------- */
.stf-off { position: fixed; inset: 0; z-index: 100001; background: rgba(255, 255, 255, .97); display: flex; align-items: center; justify-content: center; padding: 20px; animation: stf-fade .2s ease both; font-family: inherit; }
.stf-off.out { opacity: 0; transition: opacity .25s; }
.stf-off-b { max-width: 380px; text-align: center; color: #1f2b2a; }
.stf-off-b b { display: block; font-size: 18px; margin: 8px 0 6px; } .stf-off-b p { margin: 0 0 18px; color: #5b6866; font-size: 13.5px; line-height: 1.9; }
.stf-off-b .stf-veil-btn { padding: 0 28px; }
.stf-off-art { width: 100%; max-width: 320px; height: auto; }
.stf-off-art .c { fill: none; stroke: #0e4b47; stroke-width: 6; stroke-linecap: round; }
.stf-off-art .plug rect, .stf-off-art .sock rect { fill: #0e4b47; } .stf-off-art .plug path { stroke: #9aa5a3; stroke-width: 4; stroke-linecap: round; } .stf-off-art .sock circle { fill: #fff; }
.stf-off-art .plug { animation: stf-off-tug 1.6s ease-in-out infinite; transform-origin: 122px 118px; }
.stf-off-art .sp path { stroke: #f59e0b; stroke-width: 3.5; stroke-linecap: round; animation: stf-off-spark 1s steps(2, end) infinite; }
.stf-off-art .shoe { animation: stf-off-step 1.6s ease-in-out infinite; } .stf-off-art .shoe path { fill: #374151; } .stf-off-art .shoe .leg { fill: none; stroke: #6b7280; stroke-width: 12; stroke-linecap: round; } .stf-off-art .shoe .sole { fill: none; stroke: #111827; stroke-width: 4; stroke-linecap: round; }
@keyframes stf-off-tug { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(-6px) rotate(-4deg); } }
@keyframes stf-off-spark { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stf-off-step { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .stf-off-art * { animation: none !important; } }
/* ---------- header (phones): notifications right · logo centre · messages left; logo scaled, never cropped ---------- */
.stf-brand { flex-shrink: 0; overflow: visible; }
.stf-brand img { height: auto !important; max-height: 34px; width: auto; max-width: 150px; object-fit: contain; flex: none; display: block; }
@media (max-width: 860px) {
	.sp-top .sp-top-actions { display: contents !important; }
	.sp-top .sp-bell { order: 1 !important; }
	.sp-top .stf-brand { order: 2 !important; }
	.sp-top .stf-help, .sp-top .stf-chat-btn, .sp-top > .sp-ai { order: 3 !important; }
	.sp-top .stf-brand img { max-height: 30px; max-width: 120px; }
}
.stf-bb-me i svg, .stf-um-btn i svg, .stf-um-photo i svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* ---------- no picture: the Stuff mark ---------- */
.stf-noimg, .sco-img:not(:has(img)), .bp-thumb:not(:has(img)), .op-thumb:not(:has(img)) { display: inline-block; background: #f3f6f5 var(--stf-noimg) center / 46% no-repeat; border-radius: 10px; }
.stf-noimg { width: 100%; aspect-ratio: 1; }
.sco-img:not(:has(img)) svg, .bp-thumb:not(:has(img)) svg { opacity: 0; }

/* ---------- installed app on a desktop: a back button and the bottom bar, like the phone ---------- */
@media (display-mode: standalone) and (min-width: 861px) {
	.stf-back { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #dfe5e4; border-radius: 10px; }
	.stf-back[hidden] { display: inline-flex !important; }
	.stf-tabbar { position: fixed; right: 0; left: 0; bottom: 0; z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 120px); justify-content: center; padding: 6px 4px; background: #fff; border-top: 1px solid #e3e8e7; box-shadow: 0 -4px 16px rgba(0, 0, 0, .05); direction: rtl; }
	.stf-bbar > a, .stf-bbar > button { display: flex; align-items: center; justify-content: center; min-height: 46px; border: 0; background: none; color: #4b5856; position: relative; cursor: pointer; border-radius: 12px; }
	.stf-bbar > a:hover, .stf-bbar > button:hover { background: #f3f6f5; }
	.stf-tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
	.stf-bbar .stf-tab-market svg { color: var(--stf-orange-r); }
	.stf-bb-me img, .stf-bb-me i { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: var(--stf-teal); color: #fff; font-style: normal; }
	.stf-tab-n { position: absolute; top: 4px; left: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--stf-orange-r); color: #fff; font-style: normal; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
	body:has(.stf-tabbar) { padding-bottom: 64px; }
	body:has(.stf-tabbar) .sco-bar { bottom: 58px; }
}
/* ---------- password fields ---------- */
.stf-pw { position: relative; display: block; width: 100%; }
.stf-pw > input { width: 100%; box-sizing: border-box; padding-left: 44px !important; }
.stf-pw-eye { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; background: none; color: #6b7678; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.stf-pw:has(.stf-pw-warn:not([hidden])) .stf-pw-eye { top: 23px; }
.stf-pw-eye:hover { color: var(--stf-teal); background: #f1f5f4; }
.stf-pw-eye svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stf-pw-warn { display: block; margin-top: 5px; font-size: 12px; color: #c2410c; text-align: right; }
.stf-pw.bad > input { border-color: #f0a37a !important; }
/* ---------- searchable lists (StuffUI: every select with more than 7 choices, every field with suggestions) ---------- */
select.stf-cb-native { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; overflow: hidden; }
.stf-cb { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; height: auto; padding: 0 12px; border: 1px solid #dfe5e4; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; color: #1f2b2a; text-align: right; cursor: pointer; box-sizing: border-box; }
.stf-cb::after { content: ""; width: 8px; height: 8px; border-left: 1.8px solid #6b7678; border-bottom: 1.8px solid #6b7678; transform: rotate(-45deg) translateY(-2px); flex: none; }
.stf-cb.empty span { color: #8a9593; } .stf-cb:focus-visible { outline: 2px solid var(--stf-teal); outline-offset: 1px; } .stf-cb:disabled { background: #f4f6f6; cursor: default; }
.stf-cb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stf-cb-pop { position: fixed; z-index: 100020; background: #fff; border: 1px solid #dfe5e4; border-radius: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .14); padding: 8px; box-sizing: border-box; font-family: inherit; animation: stf-fade .12s ease both; }
.stf-cb-q { width: 100%; height: 40px; box-sizing: border-box; border: 1px solid #dfe5e4; border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; margin-bottom: 6px; background: #f6f8f8; }
.stf-cb-q:focus { outline: 0; border-color: var(--stf-teal); background: #fff; }
.stf-cb-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.stf-cb-list button { display: block; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13.5px; text-align: right; color: #1f2b2a; cursor: pointer; }
.stf-cb-list button:hover, .stf-cb-list button.on { background: #eef5f4; color: var(--stf-teal); }
.stf-cb-list p { margin: 8px; color: #8a9593; font-size: 13px; text-align: center; }
/* ---------- table filters: one button, a sheet (phones) / a modal (desktop) ---------- */
.stf-fbtn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; margin: 0 0 12px; border: 1px solid #dfe5e4; border-radius: 10px; background: #fff; font: inherit; font-size: 13.5px; color: #1f2b2a; cursor: pointer; }
.stf-fbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.stf-fbtn i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--stf-teal); color: #fff; font-style: normal; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
form.stf-fx:not(.open) { display: none !important; }
form.stf-fx.open { display: flex !important; flex-direction: column; gap: 10px; position: fixed; z-index: 100003; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, 92vw); max-height: 86vh; overflow: auto; margin: 0; padding: 16px; background: #fff; border: 0; border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); box-sizing: border-box; }
form.stf-fx.open .bp-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
form.stf-fx.open .bp-frow > * { min-width: 0; }
.stf-fx-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #eef1f0; }
.stf-fx-head b { font-size: 15px; } .stf-fx-head button { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #4b5856; }
form.stf-fx:not(.open) .stf-fx-head, form.stf-fx:not(.open) .stf-fx-done { display: none; }
.stf-fx-done { height: 44px; border: 0; border-radius: 12px; background: var(--stf-teal); color: #fff; font: inherit; font-weight: 700; cursor: pointer; margin-top: 4px; }
.stf-fx-shade { position: fixed; inset: 0; z-index: 100002; background: rgba(10, 24, 23, .45); animation: stf-fade .15s ease both; }
@media (max-width: 600px) {
	form.stf-fx.open { top: auto; bottom: 0; left: 0; right: 0; transform: none; width: 100%; max-height: 85vh; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
	form.stf-fx.open .bp-frow { grid-template-columns: 1fr; }
}
/* the «set a password» prompt can be closed (asked again in a few days) */
.stf-veil-b { position: relative; }
.stf-veil-x { position: absolute; top: 10px; left: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f1f4f3; color: #4b5856; font-size: 20px; line-height: 1; cursor: pointer; }
.stf-veil-x:hover { background: #e4eae9; }
/* one eye only: hide the browser's own reveal button (Edge) */
input::-ms-reveal, input::-ms-clear { display: none; }
@media (display-mode: standalone) {
	.sp-top .stf-back { display: inline-flex !important; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border: 1px solid #dfe5e4; border-radius: 10px; background: #fff; color: #1f2b2a; cursor: pointer; order: 0 !important; }
}

/* «+ استعلام» in the header */
.stf-rfqbtn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--stf-orange-r, #f97316); color: #fff !important; text-decoration: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; flex: none; }
.stf-rfqbtn:hover { filter: brightness(.95); }
@media (max-width: 860px) {
	.sp-top .stf-rfqbtn { order: 4 !important; width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
	.sp-top .stf-rfqbtn span { display: none; }
	.sp-top .stf-help, .sp-top .stf-chat-btn, .sp-top > .sp-ai { order: 5 !important; }
	.sp-top .stf-rail-t { order: 0 !important; }
}
/* the rail's «منو» in the header (public pages) */
.stf-rail-t { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; flex: none; width: 56px; height: 48px; padding: 0; border: 0; background: none; color: #1f2b2a; cursor: pointer; font: inherit; }
.stf-rail-t svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.stf-rail-t small { font-size: 10.5px; line-height: 1.3; color: #4b5856; }
/* user menu: «پیشخوان خرید / پیشخوان فروش» */
.stf-um-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 8px; background: #fff4e8; border: 1px solid #fde0bf; border-radius: 12px; }
.stf-um-switch a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 9px; color: #7c3d06 !important; text-decoration: none; font-size: 13px; font-weight: 600; }
.stf-um-switch a svg { width: 17px; height: 17px; } .stf-um-switch a.on { background: #fff; color: var(--stf-teal) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.stf-um-switch a:only-child { grid-column: 1 / -1; }
/* WordPress / WooCommerce text for screen readers («قیمت اصلی … بود»): never on screen */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; clip: auto; clip-path: none; }

/* phones: step buttons of the RFQ form and answers stay in view above the bottom bar */
@media (max-width: 860px) {
  body:has(.stf-tabbar) .srq-actions { position: sticky; bottom: calc(70px + env(safe-area-inset-bottom)); z-index: 40; background: #fff; padding: 10px 0; box-shadow: 0 -8px 16px -10px rgba(0, 0, 0, .15); }
}

/* ---------- messages (errors, warnings, confirmations): top right, Stuff palette, dark text — phones and desktop ---------- */
.sco-toast, .sp-toast, .stf-toast, .srq-toast, .ssp-toasts { position: fixed !important; top: calc(70px + env(safe-area-inset-top)) !important; right: 16px !important; left: auto !important; bottom: auto !important; transform: none !important; z-index: 100010 !important; }
.sco-toast, .sp-toast, .stf-toast, .srq-toast, .ssp-toast { width: min(380px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 14px !important; border-radius: 12px !important; background: #fff4e8 !important; color: #1f2b2a !important; border: 1px solid #fde0bf !important; border-inline-start: 4px solid #f97316 !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .12) !important; font-size: 13.5px; line-height: 1.8; text-align: right; animation: stf-toast-in .22s ease both; }
.sco-toast.ok, .sp-toast.ok, .stf-toast.ok, .ssp-toast:not(.err), .srq-toast:not(.is-bad) { background: #effaf4 !important; border-color: #bfe6d0 !important; border-inline-start-color: #1b7f4b !important; }
.ssp-toasts { display: flex; flex-direction: column; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.ssp-toasts .ssp-toast { position: static !important; width: auto; }
@keyframes stf-toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .sco-toast, .sp-toast, .stf-toast, .srq-toast, .ssp-toasts { top: calc(64px + env(safe-area-inset-top)) !important; right: 12px !important; } }

/* Stuff's question / text box modal */
.stf-veil-in { width: 100%; box-sizing: border-box; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #dfe5e4; border-radius: 12px; font: inherit; font-size: 14px; resize: vertical; text-align: right; }
.stf-veil-btn.danger { background: #c2410c; }

/* the header's collapse button (panels: the side menu; marketplace: the rail) — far right, the side menu's width */
.stf-mini-t { width: 48px; height: 40px; border: 1px solid #e3e8e7 !important; border-radius: 12px; background: #fff !important; }
.stf-mini-t:hover, .stf-rail-t:hover { color: var(--stf-teal) !important; background: #f1f6f5 !important; }
.stf-rail-t small { display: none; }
@media (max-width: 860px) { .sp-top .stf-mini-t { display: none !important; } }
/* warnings and errors: a clear orange, dark text */
.sco-toast:not(.ok), .sp-toast:not(.ok), .stf-toast:not(.ok), .srq-toast.is-bad, .ssp-toast.err { background: #fdba74 !important; border-color: #fb923c !important; border-inline-start-color: #c2410c !important; color: #1c1917 !important; font-weight: 600; box-shadow: 0 12px 30px rgba(194, 65, 12, .28) !important; }
/* Iran's national plate (car / motorcycle) */
.stf-plate-w .stf-plate-moto { display: none; }
.stf-plate-w[data-moto] .stf-plate-car { display: none; }
.stf-plate-w[data-moto] .stf-plate-moto { display: inline-flex; }
/* the direct (chat) icon: a light, calm teal instead of the strong gradient */
.sp-ai.stf-chat-btn { background: #e6f2ef !important; color: #0E4B47 !important; border: 1px solid #cfe4df !important; box-shadow: none !important; }
.sp-ai.stf-chat-btn:hover { background: #d8ebe6 !important; }

/* wallet: the amount in Toman (bold) and its Rial equivalent */
.sw-toman { color: #c2410c; font-weight: 800; }
.sw-rial { margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; font-size: 13px; color: #44403c; }
.sw-rial b { color: #0E4B47; font-size: 15px; }

/* Persian text starts on the right: menus, notes and dialogs are not centred */
.stf-um-switch a { justify-content: flex-start; padding-inline: 10px; }
.stf-veil-b, .stf-veil-b p, .stf-veil-b h3 { text-align: start; }
.op-muted { text-align: start !important; }
.stf-drop { text-align: start; }

/* standard fields: every dropdown has a chevron, the same border, radius and height */
:where(select:not(.stf-cb-native):not([multiple]):not([size])) { -webkit-appearance: none; appearance: none; min-height: 40px; padding-block: 0; padding-inline: 12px 34px; border: 1px solid #dfe5e4; border-radius: 10px; font: inherit; color: #1f2b2a; cursor: pointer; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7678' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px; background-position: left 12px center; }
:where(select:focus-visible), :where(input:not([type=checkbox]):not([type=radio]):focus-visible), :where(textarea:focus-visible) { outline: 2px solid rgba(14, 75, 71, .25); outline-offset: 1px; border-color: var(--stf-teal, #0E4B47); }
:where(input[type=text], input[type=tel], input[type=number], input[type=search], input[type=email], input[type=password], input:not([type]), textarea) { border: 1px solid #dfe5e4; border-radius: 10px; font: inherit; color: #1f2b2a; background-color: #fff; box-sizing: border-box; }
:where(input[type=text], input[type=tel], input[type=number], input[type=search], input[type=email], input[type=password], input:not([type])) { min-height: 40px; padding-inline: 12px; }
:where(textarea) { padding: 10px 12px; }

/* pagers */
.op-pager, .stf-tpager { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 14px 0; flex-wrap: wrap; }
.op-pager a { min-width: 34px; height: 34px; padding: 0 8px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; border: 1px solid #e3e8e7; color: #1f2b2a !important; text-decoration: none; font-size: 13px; }
.op-pager a.on { background: var(--stf-teal, #0E4B47); border-color: var(--stf-teal, #0E4B47); color: #fff !important; }
.op-pager small { margin-inline-start: 8px; color: #6b7678; font-size: 12px; }

/* a notice inside the site */
.stf-ntf { display: flex; flex-direction: column; gap: 3px; text-decoration: none; cursor: pointer; color: inherit; } .stf-ntf small { font-size: 12px; opacity: .85; font-weight: 400; }

/* phones and the web app: the menu button lives in the bottom bar only */
@media (max-width: 860px) {
	body:has(.stf-bbar) .stf-rail-t, body:has(.stf-bbar) .sp-top .sp-burger, body:has(.stf-bbar) .sp-top .sp-collapse { display: none !important; }
	.stf-bbar { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* «کدام ستون فایل شما کدام فیلد است» */
.stf-map { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 30, 28, .45); }
.stf-map-b { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 18px; border-radius: 16px; background: #fff; font-size: 13.5px; }
.stf-map-b h3 { margin: 0 0 4px; font-size: 16px; } .stf-map-b > p { margin: 0 0 12px; color: #6b7678; font-size: 12.5px; line-height: 1.8; }
.stf-map-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #eef1f0; } .stf-map-r i { color: #dc2626; font-style: normal; }
.stf-map-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.stf-map-a button { height: 40px; padding: 0 18px; border: 1px solid #0E4B47; border-radius: 10px; background: #0E4B47; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .stf-map-a button[data-no] { background: #fff; color: #0E4B47; }

/* the plate: one horizontal box, the same size for cars and motorcycles */
.stf-plate-w .stf-plate { box-sizing: border-box; width: 100%; max-width: 280px; height: 46px; align-items: stretch; gap: 0; padding: 0 6px; border: 2px solid #1c1917; border-radius: 8px; background: #fff; direction: ltr; }
.stf-plate-w .stf-plate-car { display: flex; } .stf-plate-w[data-moto] .stf-plate-moto { display: flex; }
.stf-plate-w .stf-plate input, .stf-plate-w .stf-plate select { box-sizing: border-box; min-width: 0; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; font: inherit; font-size: 18px; font-weight: 800; text-align: center; text-align-last: center; }
.stf-plate-w .stf-plate .n2 { flex: 2 1 0; } .stf-plate-w .stf-plate .n3 { flex: 3 1 0; } .stf-plate-w .stf-plate .n5 { flex: 5 1 0; }
.stf-plate-w .stf-plate select { flex: 0 0 1.6em; width: 1.6em; -webkit-appearance: none; appearance: none; background-image: none !important; cursor: pointer; }
.stf-plate-ir { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; margin-inline-start: 6px; padding-inline-start: 6px; border-inline-start: 2px solid #1c1917; }
.stf-plate-moto .stf-plate-ir { flex: 3 1 0; margin: 0 6px 0 0; padding: 0 6px 0 0; border-inline-start: 0; border-inline-end: 2px solid #1c1917; }
.stf-plate-ir small { font-size: 9px; line-height: 1.1; font-weight: 700; text-align: center; }
.stf-plate-w .stf-plate .stf-plate-ir input { height: 24px !important; width: 100%; flex: none; }

/* the bell's two tabs */
.sp-bell-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid #eef1f0; }
.sp-bell-tabs button { flex: 1; padding: 8px 6px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 13px; color: #6b7678; cursor: pointer; }
.sp-bell-tabs button.on { border-bottom-color: #0E4B47; color: #0E4B47; font-weight: 700; }
.sp-bell-tabs i { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 999px; background: #f97316; color: #fff; font-size: 10.5px; font-style: normal; line-height: 16px; }

/* the buyer's confirmation of delivery */
.sp-tick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; padding: 8px 10px; border-radius: 10px; background: #e6f6ec; color: #166534; font-size: 13.5px; } .sp-tick small { color: #4b5856; }
.op-part { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 10px; border: 1px solid #e3e8e7; border-radius: 10px; } .op-part .op-row { flex-wrap: wrap; }

/* «مالی» (Figma) */
.fn { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; }
.fn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fn-top { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #eef1f0; }
.fn-top button { height: 42px; border: 0; border-radius: 9px; background: none; font: inherit; color: #6b7678; cursor: pointer; } .fn-top button.on { background: #fff; color: #1f2b2a; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.fn-per { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; } .fn-per b { flex: none; font-weight: 600; }
.fn-per button { flex: none; height: 36px; padding: 0 18px; border: 1px solid #cfd8d6; border-radius: 999px; background: #fff; font: inherit; cursor: pointer; } .fn-per button.on { background: #0E4B47; border-color: #0E4B47; color: #fff; }
.fn-g4 { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 12px; } .fn-g4.b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fn-c { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px; border: 1px solid #e3e8e7; border-radius: 14px; background: #fff; }
.fn-c header { display: flex; align-items: center; gap: 6px; } .fn-c header b { font-size: 14px; color: #4b5856; } .fn-c header em { font-style: normal; font-size: 12px; color: #6b7678; margin-inline-start: auto; } .fn-c header > svg:last-child { color: #8a9593; } .fn-c header b + svg { margin-inline-start: auto; }
.fn-c > small { color: #6b7678; font-size: 12px; } .fn-c p { margin: 0; font-size: 17px; font-weight: 800; } .fn-c p small { font-size: 11.5px; font-weight: 400; color: #6b7678; }
.fn-w { background: #effbf5; border-color: #bfe9d3; } .fn-w header svg { color: #0E4B47; } .fn-w-a { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-inline-start: auto; }
.fn-b { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border: 1px solid #0E4B47; border-radius: 9px; background: #fff; color: #0E4B47 !important; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none; cursor: pointer; }
.fn-w-r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .fn-w-r span { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; } .fn-w-r .g { background: #bff0d8; } .fn-w-r .y { background: #fdf3b5; } .fn-w-r small { font-size: 11.5px; font-weight: 400; } .fn-w-r b { font-size: 14px; }
.fn-fl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fn-fl select { width: auto; flex: 0 1 auto; max-width: 180px; height: 38px; min-height: 38px; font-size: 13px; } .fn-fl .stf-cb { flex: 0 1 180px; width: auto; min-height: 38px; }
.fn-amt { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid #dfe5e4; border-radius: 10px; background: #fff; } .fn-amt b { font-weight: 500; } .fn-amt small { color: #6b7678; } .fn-amt input { width: 110px; height: 30px; min-height: 30px; font-size: 13px; }
.fn-se { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px solid #e3e8e7; border-radius: 14px; background: #fff; }
.fn-se label { flex: 1 1 240px; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border: 1.5px solid #cfd8d6; border-radius: 10px; } .fn-se label input { flex: 1; min-width: 0; height: 100%; min-height: 0; border: 0 !important; background: none; box-shadow: none !important; outline: 0; }
.fn-se > input { flex: 0 1 130px; width: 130px; height: 40px; min-height: 40px; }
.fn-x { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid #16a34a; border-radius: 10px; background: #effbf5; color: #166534; font: inherit; font-weight: 600; cursor: pointer; }
.fn-k { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid #e3e8e7; } .fn-k button { flex: none; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; color: #6b7678; cursor: pointer; } .fn-k button.on { border-bottom-color: #1f2b2a; color: #1f2b2a; font-weight: 700; }
.fn-t { overflow-x: auto; border: 1px solid #e3e8e7; border-radius: 14px; background: #fff; }
.fn-t table { width: 100%; border-collapse: collapse; } .fn-t th { padding: 11px 8px; background: #f6f8f8; font-size: 12.5px; font-weight: 700; white-space: nowrap; text-align: center; } .fn-t td { padding: 11px 8px; border-top: 1px solid #eef1f0; font-size: 12.5px; text-align: center; white-space: nowrap; } .fn-t tbody tr:nth-child(even) td { background: #fafbfb; }
.fn-no { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
.fn-p { display: inline-block; padding: 2px 10px; border: 1px solid; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .fn-p.g { background: #e6f6ec; border-color: #86d9ac; color: #15803d; } .fn-p.r { background: #fde8e8; border-color: #f5b1b1; color: #b91c1c; } .fn-p.y { background: #fef6d8; border-color: #f3d76a; color: #92600a; } .fn-p.n { background: #f1f3f3; border-color: #dfe5e4; color: #4b5856; }
.fn-d { white-space: nowrap; } .fn-i { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-start: 4px; border: 1px solid #dfe5e4; border-radius: 8px; background: #fff; color: #1f2b2a; } .fn-i svg { width: 17px; height: 17px; }
.fn-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; } .fn-pg button { min-width: 32px; height: 32px; border: 1px solid #e3e8e7; border-radius: 8px; background: #fff; font: inherit; cursor: pointer; } .fn-pg button.on { background: #f97316; border-color: #f97316; color: #fff; }
.fn-e { padding: 34px; text-align: center; color: #6b7678; border: 1px solid #e3e8e7; border-radius: 14px; background: #fff; } .fn-u { margin: 6px 0 0; font-size: 11.5px; color: #6b7678; }
@media (max-width: 1100px) { .fn-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fn-g4.b { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
	.fn-g4, .fn-g4.b { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .fn-g4 > * { flex: 0 0 80%; scroll-snap-align: start; }
	.fn-fl { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .fn-fl > * { flex: none; }
	.fn-se > input { flex: 1 1 40%; width: auto; } .fn-x { flex: 1 1 100%; justify-content: center; }
	.fn-t { border: 0; background: none; overflow: visible; } .fn-t table, .fn-t tbody, .fn-t tr, .fn-t td { display: block; width: 100%; } .fn-t thead { display: none; }
	.fn-t tr { margin-bottom: 10px; padding: 6px 12px; border: 1px solid #e3e8e7; border-radius: 12px; background: #fff; }
	.fn-t td, .fn-t tbody tr:nth-child(even) td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 0; background: none; white-space: normal; text-align: start; } .fn-t td::before { content: attr(data-l); color: #6b7678; font-size: 12px; }
}

/* «لاگ عملیات» and «مدیریت فایل‌ها» */
.rc { display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; }
.rc-filters { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid #e3e8e7; border-radius: 14px; background: #fff; } .rc-filters h2 { margin: 0; font-size: 14px; }
.rc-frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .rc-frow > input { flex: 0 1 130px; width: 130px; height: 38px; min-height: 38px; }
.rc-f { flex: 1 1 200px; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 38px; border: 1px solid #dfe5e4; border-radius: 10px; background: #fff; } .rc-f small { flex: none; color: #6b7678; font-size: 12px; }
.rc-f select, .rc-f input { flex: 1; min-width: 0; width: 100%; height: 36px; min-height: 36px; border: 0 !important; background-color: transparent; box-shadow: none !important; font-size: 13px; } .rc-f .stf-cb { flex: 1; min-width: 0; border: 0; }
.rc-log td { white-space: normal !important; } .rc-d { text-align: start !important; } .rc-d b { font-weight: 600; }
.rc-u { display: inline-flex; align-items: center; gap: 6px; } .rc-u i { width: 8px; height: 8px; border-radius: 50%; flex: none; } .rc-u i.g { background: #16a34a; } .rc-u i.o { background: #f97316; }
.rc-space { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 14px; border: 1px solid #e3e8e7; border-radius: 14px; background: #fff; } .rc-space > div:first-child { display: flex; flex-wrap: wrap; gap: 4px 10px; } .rc-space span { color: #4b5856; }
.rc-space em { font-style: normal; font-weight: 800; font-size: 15px; } .rc-bar { grid-column: 1 / -1; height: 9px; border-radius: 999px; background: #eef1f0; overflow: hidden; } .rc-bar i { display: block; height: 100%; border-radius: 999px; } .rc-space .sp-btn { grid-column: 1 / -1; justify-self: start; }
.rc-space.g em { color: #15803d; } .rc-space.g .rc-bar i { background: #16a34a; } .rc-space.o em { color: #c2570c; } .rc-space.o .rc-bar i { background: #f97316; } .rc-space.r em { color: #b91c1c; } .rc-space.r .rc-bar i { background: #dc2626; }
.fn-k small { font-size: 11px; color: #8a9593; }
.rc-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.rc-file { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px; border: 1px solid #e3e8e7; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; } .rc-file b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; } .rc-file small { color: #6b7678; font-size: 11.5px; }
.rc-th { display: grid; place-items: center; height: 96px; margin-bottom: 4px; border-radius: 8px; background: #f1f6f5; color: #0E4B47; font-weight: 700; overflow: hidden; } .rc-th img { width: 100%; height: 100%; object-fit: cover; } .rc-th.k-doc { background: #fff4e8; color: #c2570c; } .rc-th.k-video { background: #eef2ff; color: #4338ca; }
@media (max-width: 860px) { .rc-frow > input { flex: 1 1 40%; width: auto; } .rc-f { flex-basis: 100%; } }

/* a place on the map */
.stf-geo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; width: 100%; box-sizing: border-box; flex-basis: 100%; }
.stf-geo-b { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid #0E4B47; border-radius: 10px; background: #fff; color: #0E4B47; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.stf-geo-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.stf-geo-s { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; } .stf-geo-s b { color: #15803d; } .stf-geo-s small { color: #6b7678; font-size: 12px; } .stf-geo-l { display: inline-flex; gap: 8px; } .stf-geo-l a { color: #0E4B47; text-decoration: underline; }
.stf-mapx { position: fixed; inset: 0; z-index: 100003; display: flex; align-items: center; justify-content: center; padding: 12px; background: rgba(15, 30, 28, .5); font-size: 13.5px; }
.stf-mapx-b { display: flex; flex-direction: column; gap: 8px; width: min(640px, 100%); max-height: calc(100dvh - 24px); padding: 12px; box-sizing: border-box; border-radius: 16px; background: #fff; color: #1f2b2a; }
.stf-mapx-b header { display: flex; align-items: center; justify-content: space-between; } .stf-mapx-b header b { font-size: 15px; } .stf-mapx-b header button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: #f1f3f3; font-size: 20px; line-height: 1; cursor: pointer; }
.stf-mapx-m { position: relative; flex: 1 1 auto; min-height: 240px; height: 50dvh; overflow: hidden; border-radius: 12px; background: #e8eeee; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .stf-mapx-m.on { cursor: grabbing; }
.stf-mapx-m [data-mx-tiles] img { position: absolute; top: 0; left: 0; width: 256px !important; height: 256px !important; max-width: none !important; margin: 0; border: 0; border-radius: 0; pointer-events: none; }
.stf-mapx-pin { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -38px 0 0 -19px; pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); } .stf-mapx-pin svg { width: 100%; height: 100%; fill: #f97316; stroke: #fff; stroke-width: 1; }
.stf-mapx-z { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; } .stf-mapx-z button { width: 38px; height: 38px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); font-size: 21px; line-height: 1; cursor: pointer; color: #1f2b2a; }
.stf-mapx-c { position: absolute; left: 4px; bottom: 2px; padding: 0 4px; background: rgba(255, 255, 255, .8); font-size: 10px; color: #333; pointer-events: none; }
.stf-mapx-off { position: absolute; inset: auto 12px 26px; margin: 0; padding: 8px 10px; border-radius: 8px; background: #fff; text-align: center; direction: rtl; font-size: 12.5px; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.stf-mapx-h { margin: 0; font-size: 12px; color: #6b7678; }
.stf-mapx-r { display: flex; flex-wrap: wrap; gap: 8px; } .stf-mapx-r input { flex: 1 1 200px; min-width: 0; height: 40px; min-height: 40px; padding: 0 10px; box-sizing: border-box; border: 1px solid #cfd8d6; border-radius: 10px; font: inherit; font-size: 12.5px; }
.stf-mapx-gps { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid #0E4B47; border-radius: 10px; background: #fff; color: #0E4B47; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .stf-mapx-gps svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .stf-mapx-gps.wait { opacity: .6; }
.stf-mapx-e { min-height: 0; color: #b91c1c; font-size: 12px; } .stf-mapx-e:empty { display: none; }
.stf-mapx-b footer { display: flex; align-items: center; gap: 8px; } .stf-mapx-b footer span { margin-inline-end: auto; font-size: 11.5px; color: #6b7678; }
.stf-mapx-b footer button { height: 42px; padding: 0 16px; border: 1px solid #f97316; border-radius: 10px; background: #f97316; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .stf-mapx-b footer button.ghost { background: #fff; color: #4b5856; border-color: #cfd8d6; }
@media (max-width: 560px) { .stf-mapx { padding: 0; align-items: stretch; } .stf-mapx-b { width: 100%; max-height: 100dvh; border-radius: 0; } .stf-mapx-m { height: auto; } .stf-mapx-gps { flex: 1 1 100%; } .stf-mapx-b footer span { display: none; } .stf-mapx-b footer button { flex: 1; } }

.stf-plate-w .stf-plate input::placeholder { color: #c3cbca; font-weight: 600; opacity: 1; }
.stf-plate-w .stf-plate select:invalid, .stf-plate-w .stf-plate select.empty { color: #c3cbca; }

.stf-mapx-s { position: relative; flex: 1 1 200px; min-width: 0; display: block; } .stf-mapx-s input { width: 100%; }
.stf-mapx-s [data-mx-res] { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 3; max-height: 220px; overflow: auto; padding: 4px; border: 1px solid #dfe5e4; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); } .stf-mapx-s [data-mx-res][hidden] { display: none; }
.stf-mapx-s [data-mx-res] button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 12.5px; line-height: 1.7; text-align: start; cursor: pointer; } .stf-mapx-s [data-mx-res] button:hover { background: #f1f6f5; } .stf-mapx-s [data-mx-res] small { display: block; padding: 8px 10px; color: #6b7678; }

/* many filters live in one window */
.fn-fb { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 1px solid #cfd8d6; border-radius: 10px; background: #fff; font: inherit; font-weight: 600; cursor: pointer; } .fn-fb svg { width: 18px; height: 18px; } .fn-fb i { min-width: 18px; padding: 0 5px; border-radius: 999px; background: #f97316; color: #fff; font-size: 11px; font-style: normal; line-height: 18px; text-align: center; }
.fn-flm { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 30, 28, .45); }
.fn-flm-b { display: flex; flex-direction: column; gap: 10px; width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 18px; box-sizing: border-box; border-radius: 16px; background: #fff; font-size: 13.5px; } .fn-flm-b h3 { margin: 0; font-size: 16px; }
.fn-flm-b label { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 10px; } .fn-flm-b select, .fn-flm-b input { width: 100%; height: 40px; min-height: 40px; box-sizing: border-box; }
.fn-flm-a { display: flex; gap: 8px; justify-content: flex-end; margin-top: 6px; } .fn-flm-a button { height: 40px; padding: 0 18px; border: 1px solid #0E4B47; border-radius: 10px; background: #0E4B47; color: #fff; font: inherit; font-weight: 700; cursor: pointer; } .fn-flm-a button[data-fl-clear] { margin-inline-end: auto; background: #fff; color: #0E4B47; }
@media (max-width: 560px) { .fn-flm { padding: 0; align-items: flex-end; } .fn-flm-b { width: 100%; border-radius: 16px 16px 0 0; } }

.stf-plate-w .stf-plate select:has(option[value=""]:checked) { color: #c3cbca; font-weight: 600; }

/* «could not load»: a picture, a sentence and a way on */
.stf-fail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 20px; text-align: center; background: #fff; border: 1px solid #e3e8e7; border-radius: 16px; color: #5b6b69; }
.stf-fail svg { width: 96px; height: 96px; }
.stf-fail b { color: #0E4B47; font-size: 16px; }
.stf-fail p { margin: 0 auto 6px; max-width: 420px; line-height: 1.9; font-size: 13px; }
.stf-fail-b { height: 42px; padding: 0 22px; border: 0; border-radius: 10px; background: #0E4B47; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.stf-fail-b:focus-visible { outline: 3px solid #F28C28; outline-offset: 2px; }
.stf-cb-list button.stf-cb-free { color: var(--stf-teal); font-weight: 700; border-bottom: 1px dashed #dfe5e4; border-radius: 8px 8px 0 0; }
input[data-cb-list] { cursor: pointer; padding-left: 34px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 10px center; background-size: 16px; }
input[data-cb-list][readonly] { background-color: #fff; }