to get desktop table /
mobile card view. Each | needs a `data-label="..."` attr
so the card can show "Label: value" stacked on phones.
============================================================ */
@media (max-width: 720px) {
.as-table-cards { border-collapse: separate; border-spacing: 0; }
.as-table-cards thead { display: none; }
.as-table-cards tbody { display: flex; flex-direction: column; gap: 10px; }
.as-table-cards tr {
display: flex; flex-direction: column;
gap: 6px;
padding: 14px;
background: #fff;
border: 1px solid var(--as-border);
border-radius: 12px;
box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.as-table-cards tr:hover { background: #fff; }
.as-table-cards td {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 12px;
padding: 4px 0 !important;
border: none !important;
font-size: 13px;
text-align: right;
}
.as-table-cards td::before {
content: attr(data-label);
flex-shrink: 0;
flex-basis: 38%;
font-size: 11.5px;
font-weight: 600;
color: var(--as-text-muted);
text-transform: uppercase;
letter-spacing: .5px;
text-align: left;
padding-top: 1px;
}
.as-table-cards td:empty,
.as-table-cards td[data-label=""] { display: none; }
/* No label = full-width row (used for action buttons) */
.as-table-cards td.actions {
text-align: center;
padding-top: 8px !important;
margin-top: 4px;
border-top: 1px solid #f1f5f9 !important;
gap: 6px;
}
.as-table-cards td.actions::before { display: none; }
.as-table-cards td.actions .as-btn-ghost,
.as-table-cards td.actions .as-btn-primary,
.as-table-cards td.actions a,
.as-table-cards td.actions button {
flex: 1;
}
/* Outer wrapper doesn't scroll on mobile in this mode */
.as-table-wrap:has(.as-table-cards) { overflow: visible; }
}
/* ============================================================
Reports — locked export button + responsive trend chart
============================================================ */
.as-btn-ghost.is-locked {
color: var(--as-text-muted);
background: #f8fafc;
border-style: dashed;
}
.as-btn-ghost.is-locked:hover {
background: #eff6ff;
color: var(--as-primary, #1d4ed8);
border-color: var(--as-primary, #1d4ed8);
border-style: solid;
}
.as-pro-pill {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 2px 7px;
font-size: 10px;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;
color: #fff;
background: linear-gradient(135deg, #f59e0b, #b45309);
border-radius: 999px;
line-height: 1.4;
}
/* Trend chart on mobile — let SVG scale; reduce height a bit */
@media (max-width: 720px) {
.as-trend-chart svg { height: 220px; }
.as-chart-legend { flex-wrap: wrap; gap: 8px; font-size: 11.5px; }
/* Reports stat-grid: 2 columns instead of 4 */
.as-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.as-report-tile { padding: 14px; }
.as-report-tile .val { font-size: 18px; }
.as-report-tile .val.val-sm { font-size: 14px; }
/* Donut row stacks under the panel head on phones */
.as-donut-row { flex-direction: column; align-items: stretch; }
.as-donut-multi { margin: 0 auto; }
}
@media (max-width: 480px) {
.as-stat-grid { grid-template-columns: 1fr; }
.as-report-tile .as-spark { display: none; } /* free up vertical space */
}
/* ============================================================
Dashboard plan + usage strip
============================================================ */
.as-plan-strip { padding: 18px 22px; }
.as-plan-strip-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.as-plan-strip-head-main {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
/* Chevron is decorative on desktop (full strip always open); only matters on mobile */
.as-plan-strip-chev {
display: none;
width: 18px; height: 18px;
color: var(--as-text-muted);
transition: transform .2s;
flex-shrink: 0;
}
.as-plan-strip.is-collapsed .as-plan-strip-chev { transform: rotate(-90deg); }
.as-plan-strip-eyebrow {
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
color: var(--as-text-muted);
}
.as-plan-strip-name {
margin: 4px 0 0;
font-size: 19px;
font-weight: 800;
color: var(--as-text);
display: inline-flex;
align-items: center;
gap: 8px;
}
.as-plan-strip-badge {
background: #f1f5f9;
color: var(--as-text-muted);
font-size: 10.5px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 999px;
}
.as-plan-strip-meters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.as-plan-meter-row {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px; margin-bottom: 6px;
}
.as-plan-meter-row .lbl { font-size: 12px; color: var(--as-text-muted); font-weight: 600; }
.as-plan-meter-row .val { font-size: 13.5px; font-weight: 700; color: var(--as-text); }
.as-plan-meter-bar {
width: 100%;
height: 6px;
border-radius: 999px;
background: #f1f5f9;
overflow: hidden;
}
.as-plan-meter-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
transition: width .3s ease;
}
.as-plan-meter.is-warn .as-plan-meter-bar > span { background: linear-gradient(90deg, #f59e0b, #d97706); }
.as-plan-meter.is-danger .as-plan-meter-bar > span { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.as-plan-meter.is-danger .as-plan-meter-row .val { color: var(--as-danger, #dc2626); }
/* Mobile: collapse the meters by default. Tap on the head to expand.
Chevron + cursor only appear on mobile so it's clearly tappable. */
@media (max-width: 720px) {
.as-plan-strip { padding: 14px 16px; }
.as-plan-strip-head { margin-bottom: 0; row-gap: 10px; }
.as-plan-strip.is-collapsed .as-plan-strip-meters { display: none; }
.as-plan-strip:not(.is-collapsed) .as-plan-strip-head { margin-bottom: 14px; }
.as-plan-strip-head-main {
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.as-plan-strip-chev { display: inline-block; }
}
/* ============================================================
Chat — presence dot, typing indicator, quick replies
============================================================ */
/* Avatar with a small bottom-right status dot */
.as-presence-avatar { position: relative; }
.as-presence-dot {
position: absolute;
bottom: -1px; right: -1px;
width: 11px; height: 11px;
border-radius: 50%;
background: #cbd5e1;
border: 2px solid #fff;
transition: background .2s;
}
.as-presence-dot.is-online { background: #22c55e; }
.as-chat-presence-status {
font-size: 11.5px;
color: var(--as-text-muted);
}
.as-chat-presence-status:not(:empty) ~ .ref::before,
.as-chat-presence-status:not(:empty) + span::before { content: '· '; margin: 0 4px; }
/* Typing indicator row (sits between thread and input) */
.as-chat-typing {
display: flex; align-items: flex-end; gap: 8px;
padding: 6px 16px 4px;
}
.as-chat-typing[hidden] { display: none; }
.as-typing-bubble {
display: inline-flex;
gap: 4px;
padding: 10px 14px;
background: #f1f5f9;
border-radius: 18px;
border-bottom-left-radius: 4px;
}
.as-typing-bubble .dot {
width: 6px; height: 6px;
background: #94a3b8;
border-radius: 50%;
animation: as-typing-bounce 1.4s infinite ease-in-out both;
}
.as-typing-bubble .dot:nth-child(2) { animation-delay: .15s; }
.as-typing-bubble .dot:nth-child(3) { animation-delay: .30s; }
@keyframes as-typing-bounce {
0%, 80%, 100% { transform: scale(.6); opacity: .4; }
40% { transform: scale(1); opacity: 1; }
}
/* Quick reply chips */
.as-chat-quick-replies {
display: flex;
gap: 6px;
padding: 6px 16px 8px;
overflow-x: auto;
scrollbar-width: thin;
border-top: 1px solid #f1f5f9;
}
.as-chat-quick-replies::-webkit-scrollbar { height: 4px; }
.as-chat-quick-replies::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.as-qr-chip {
flex-shrink: 0;
padding: 6px 12px;
font-size: 12.5px;
font-weight: 500;
color: var(--as-primary, #1d4ed8);
background: #eff6ff;
border: 1px solid #dbeafe;
border-radius: 999px;
cursor: pointer;
transition: background .15s, border-color .15s, transform .12s;
white-space: nowrap;
font-family: inherit;
}
.as-qr-chip:hover {
background: #dbeafe;
border-color: #93c5fd;
}
.as-qr-chip:active { transform: scale(.96); }
/* ============================================================
RFQ form — product context card + seller pill
============================================================ */
.as-rfq-product-card { display: flex; flex-direction: column; gap: 14px; }
.as-rfq-product {
display: flex; gap: 14px; align-items: flex-start;
padding: 4px 0;
}
.as-rfq-product .thumb {
width: 88px; height: 88px;
border-radius: 10px;
object-fit: cover;
background: #f1f5f9;
flex-shrink: 0;
}
.as-rfq-product .thumb-fallback {
display: inline-flex; align-items: center; justify-content: center;
color: var(--as-text-muted);
}
.as-rfq-product .thumb-fallback svg { width: 32px; height: 32px; }
.as-rfq-product .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.as-rfq-product .title {
font-size: 15px; font-weight: 700; color: var(--as-text);
line-height: 1.3;
}
.as-rfq-product .meta { display: flex; gap: 6px; flex-wrap: wrap; }
.as-rfq-product .price {
font-size: 16px; font-weight: 800; color: #0f172a;
}
.as-rfq-product .price .unit {
font-size: 12px; font-weight: 500; color: var(--as-text-muted);
}
.as-rfq-seller-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: linear-gradient(135deg, #ecfdf5, #f0f9ff);
border: 1px solid #bbf7d0;
border-radius: 10px;
font-size: 13px;
color: #065f46;
}
.as-rfq-seller-pill svg { width: 18px; height: 18px; flex-shrink: 0; }
.as-rfq-seller-pill strong { color: #0f172a; font-weight: 700; }
/* ============================================================
Reports — date range picker
============================================================ */
.as-report-date-form {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 4px 4px 10px;
border: 1px solid var(--as-border);
border-radius: 10px;
background: #fff;
flex-wrap: wrap;
}
.as-report-date-ico {
color: var(--as-text-muted);
display: inline-flex;
}
.as-report-date-ico svg { width: 16px; height: 16px; }
.as-report-date-input {
border: 0;
background: transparent;
padding: 6px 4px;
font: inherit;
font-size: 13px;
color: var(--as-text);
min-width: 130px;
cursor: pointer;
}
.as-report-date-input:focus { outline: 0; }
.as-report-date-sep { color: var(--as-text-muted); font-size: 13px; }
.as-report-date-form .as-btn-primary { padding: 6px 14px; font-size: 13px; }
@media (max-width: 720px) {
.as-report-date-form { width: 100%; justify-content: space-between; }
.as-report-date-input { flex: 1; min-width: 0; }
}
/* ============================================================
Clickable table rows
============================================================ */
.as-row-link { cursor: pointer; transition: background-color .12s; }
.as-row-link:hover { background-color: #f8fafc; }
/* ============================================================
Admin payments — top customers strip
============================================================ */
.as-top-customers {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 10px;
}
.as-top-customer {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--as-border);
border-radius: 10px;
background: #fff;
text-decoration: none;
color: inherit;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.as-top-customer:hover {
border-color: var(--as-primary, #2563eb);
box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
transform: translateY(-1px);
}
.as-top-customer .rank {
flex-shrink: 0;
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #f59e0b, #fbbf24);
color: #fff;
font-weight: 700; font-size: 12px;
}
.as-top-customer:nth-child(1) .rank { background: linear-gradient(135deg, #facc15, #f59e0b); }
.as-top-customer:nth-child(2) .rank { background: linear-gradient(135deg, #94a3b8, #64748b); }
.as-top-customer:nth-child(3) .rank { background: linear-gradient(135deg, #d97706, #b45309); }
.as-top-customer .info { flex: 1; min-width: 0; }
.as-top-customer .info .name {
font-weight: 600; font-size: 13px; color: var(--as-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-top-customer .info .email {
font-size: 11.5px; color: var(--as-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-top-customer .totals { text-align: right; flex-shrink: 0; }
.as-top-customer .totals .amt { font-weight: 700; font-size: 13px; color: #0f766e; }
.as-top-customer .totals .count { font-size: 11px; color: var(--as-text-muted); }
/* ============================================================
Payment detail — back link + 2-column grid
============================================================ */
.as-pd-back {
display: inline-flex; align-items: center; gap: 6px;
margin: -4px 0 12px;
color: var(--as-text-muted);
text-decoration: none;
font-size: 13px; font-weight: 500;
}
.as-pd-back:hover { color: var(--as-primary, #2563eb); }
.as-pd-back svg { width: 16px; height: 16px; }
.as-pf-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 16px;
align-items: start;
}
.as-pf-left, .as-pf-right { display: flex; flex-direction: column; gap: 16px; }
.as-pf-card-head {
padding: 14px 18px 6px;
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.as-pf-card-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.as-pf-card-sub { font-size: 12px; color: var(--as-text-muted); }
.as-pd-specs { padding: 4px 18px 16px; }
.as-pd-specs .row {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0; gap: 12px;
border-bottom: 1px solid #f1f5f9;
}
.as-pd-specs .row:last-child { border-bottom: 0; }
.as-pd-specs .lbl { font-size: 12.5px; color: var(--as-text-muted); }
.as-pd-specs .val { font-size: 13px; font-weight: 500; text-align: right; word-break: break-word; }
@media (max-width: 860px) {
.as-pf-grid { grid-template-columns: 1fr; }
}
/* ============================================================
Product detail — multi-branch availability callout
============================================================ */
.as-pd-branches {
display: flex; align-items: flex-start; gap: 12px;
margin: 14px 0 4px;
padding: 12px 14px;
background: linear-gradient(135deg, #eff6ff, #f0f9ff);
border: 1px solid rgba(29,78,216,.15);
border-radius: 12px;
}
.as-pd-branches-icon {
width: 34px; height: 34px;
border-radius: 10px;
background: rgba(29,78,216,.12);
color: var(--as-primary, #1d4ed8);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.as-pd-branches-icon svg { width: 18px; height: 18px; }
.as-pd-branches-body { flex: 1; min-width: 0; }
.as-pd-branches-label {
font-size: 12.5px;
color: var(--as-text-muted);
margin-bottom: 8px;
}
.as-pd-branches-label strong {
color: var(--as-primary, #1d4ed8);
font-weight: 800;
}
.as-pd-branches-list {
display: flex; flex-wrap: wrap; gap: 6px;
}
.as-pd-branch-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: #fff;
border: 1px solid rgba(29,78,216,.2);
border-radius: 999px;
font-size: 12px;
font-weight: 600;
color: var(--as-text);
}
.as-pd-branch-pill.is-primary {
background: var(--as-primary, #1d4ed8);
color: #fff;
border-color: var(--as-primary, #1d4ed8);
}
.as-pd-branch-tag {
background: rgba(255,255,255,.22);
color: #fff;
font-size: 10px;
font-weight: 800;
letter-spacing: .4px;
padding: 2px 6px;
border-radius: 999px;
margin-left: 2px;
}
/* ============================================================
Legal pages — Privacy + Terms (standalone, no app shell)
============================================================ */
.as-legal-body {
margin: 0;
background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
color: var(--as-text);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
min-height: 100vh;
min-height: 100dvh;
}
.as-legal-header {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 18px 32px;
background: linear-gradient(135deg, #061a3d, #0a2a5e, #0d3680);
color: #fff;
flex-wrap: wrap;
}
.as-legal-brand {
display: flex; align-items: center; gap: 12px;
text-decoration: none;
color: #fff;
}
.as-legal-nav {
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.as-legal-nav-link {
color: rgba(255,255,255,.82);
text-decoration: none;
padding: 8px 14px;
border-radius: 8px;
font-size: 13.5px;
font-weight: 600;
transition: background .15s, color .15s;
}
.as-legal-nav-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.as-legal-nav-link.is-active { background: rgba(255,255,255,.14); color: #fff; }
.as-legal-header .as-btn-primary {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #fff;
}
.as-legal-header .as-btn-ghost {
background: rgba(255,255,255,.10);
color: #fff;
border-color: rgba(255,255,255,.22);
}
.as-legal-header .as-btn-ghost:hover {
background: rgba(255,255,255,.18);
border-color: rgba(255,255,255,.32);
color: #fff;
}
.as-legal {
max-width: 880px;
margin: 0 auto;
padding: 28px 20px 60px;
}
.as-legal-card {
background: #fff;
border: 1px solid var(--as-border);
border-radius: 18px;
padding: 36px 40px;
box-shadow: 0 8px 32px -16px rgba(15, 42, 110, .14);
}
.as-legal-eyebrow {
display: inline-block;
background: rgba(29,78,216,.08);
color: var(--as-primary, #1d4ed8);
font-size: 11px;
font-weight: 800;
letter-spacing: 1.4px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
margin-bottom: 14px;
}
.as-legal h1 {
margin: 0 0 12px;
font-size: 32px;
font-weight: 800;
color: #0f172a;
letter-spacing: -.4px;
line-height: 1.2;
}
.as-legal-lead {
margin: 0 0 12px;
color: var(--as-text-muted);
font-size: 15px;
line-height: 1.6;
}
.as-legal-meta {
margin: 0 0 28px;
color: var(--as-text-muted);
font-size: 13px;
}
.as-legal-meta strong { color: var(--as-text); font-weight: 700; }
.as-legal-toc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 18px;
padding: 16px 18px;
background: #f8fafc;
border: 1px solid var(--as-border);
border-radius: 12px;
margin: 0 0 32px;
}
.as-legal-toc a {
color: var(--as-text);
text-decoration: none;
font-size: 13.5px;
font-weight: 500;
padding: 4px 0;
border-bottom: 1px solid transparent;
transition: color .15s, border-color .15s;
}
.as-legal-toc a:hover {
color: var(--as-primary, #1d4ed8);
border-bottom-color: var(--as-primary, #1d4ed8);
}
.as-legal section {
margin-bottom: 28px;
scroll-margin-top: 80px; /* anchor jumps clear the sticky header */
}
.as-legal h2 {
font-size: 19px;
font-weight: 800;
color: #0f172a;
margin: 0 0 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--as-border);
}
.as-legal p, .as-legal ul, .as-legal ol {
font-size: 14.5px;
line-height: 1.65;
color: #334155;
margin: 0 0 12px;
}
.as-legal ul, .as-legal ol { padding-left: 24px; }
.as-legal li { margin-bottom: 6px; }
.as-legal a.as-link { color: var(--as-primary, #1d4ed8); }
.as-legal code {
background: #f1f5f9;
color: #0f172a;
padding: 2px 6px;
border-radius: 4px;
font-size: 12.5px;
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.as-legal strong { color: #0f172a; font-weight: 700; }
.as-legal em { font-style: italic; color: #475569; }
.as-legal-footer {
margin: 32px auto 0;
text-align: center;
font-size: 12.5px;
color: var(--as-text-muted);
display: flex; align-items: center; justify-content: center;
gap: 10px; flex-wrap: wrap;
}
.as-legal-footer a {
color: var(--as-text-muted);
text-decoration: none;
font-weight: 600;
}
.as-legal-footer a:hover { color: var(--as-primary, #1d4ed8); }
/* Responsive — phones */
@media (max-width: 720px) {
.as-legal-header { padding: 14px 16px; gap: 10px; }
.as-legal-header .as-brand-text { display: none; } /* brand mark only on small screens */
.as-legal-nav-link { padding: 6px 10px; font-size: 13px; }
.as-legal { padding: 18px 12px 50px; }
.as-legal-card { padding: 24px 20px; border-radius: 14px; }
.as-legal h1 { font-size: 24px; }
.as-legal h2 { font-size: 17px; }
.as-legal p, .as-legal ul, .as-legal ol { font-size: 14px; }
.as-legal-toc { grid-template-columns: 1fr; gap: 4px; padding: 12px 14px; }
.as-legal-toc a { padding: 6px 0; font-size: 13px; }
}
@media (max-width: 480px) {
.as-legal-header { flex-direction: column; align-items: stretch; padding: 14px; }
.as-legal-brand { justify-content: center; }
.as-legal-nav { justify-content: center; }
}
/* ============================================================
Multi-location chips on the compare table + card "+N" badge
============================================================ */
/* Inline chip strip inside a comparison table cell */
.as-row-locs {
display: inline-flex; flex-wrap: wrap; gap: 4px;
margin-top: 4px;
}
.as-row-locs .loc-chip {
display: inline-flex; align-items: center;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 600;
color: var(--as-text);
background: #f1f5f9;
border-radius: 999px;
line-height: 1.3;
}
.as-row-locs .loc-chip.is-main {
background: rgba(29,78,216,.12);
color: var(--as-primary, #1d4ed8);
}
.as-row-locs .loc-chip-count {
display: inline-flex; align-items: center;
padding: 2px 8px;
font-size: 10.5px;
font-weight: 700;
color: var(--as-text-muted);
border-radius: 999px;
border: 1px dashed var(--as-border);
}
/* Marketplace card — "+3" tag next to main location */
.as-card-loc-more {
margin-left: 4px;
background: rgba(29,78,216,.12);
color: var(--as-primary, #1d4ed8);
font-size: 10.5px;
font-weight: 700;
padding: 1px 7px;
border-radius: 999px;
line-height: 1.3;
}
/* ============================================================
Marketplace filter — text-location + min/max price pair
============================================================ */
/* Dual-thumb price range slider: two overlapping range inputs with a
shared track + filled segment. Inputs are transparent (only the thumbs
are interactive); the JS keeps min ≤ max and updates the fill region. */
.as-mp-price-range {
display: flex; flex-direction: column;
background: #fff;
border: 1px solid var(--as-border);
border-radius: 10px;
padding: 6px 12px 8px;
min-height: 42px;
min-width: 0;
justify-content: center;
gap: 4px;
}
.as-mp-pr-labels {
display: flex; align-items: baseline; justify-content: space-between;
gap: 8px;
font-size: 11px;
line-height: 1.2;
}
.as-mp-pr-labels .lbl { color: var(--as-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.as-mp-pr-labels .val { color: var(--as-text); font-weight: 700; font-size: 12px; }
.as-mp-pr-slider {
position: relative;
height: 22px;
margin-top: 22px; /* room for the value bubbles above the track */
}
/* Live value badge that follows each thumb. JS positions it via `left`. */
.as-mp-pr-bubble {
position: absolute;
bottom: calc(100% + 4px);
transform: translateX(-50%);
background: #0f172a;
color: #fff;
font-size: 10.5px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
white-space: nowrap;
pointer-events: none;
line-height: 1.4;
box-shadow: 0 2px 6px rgba(15,23,42,.18);
z-index: 4;
}
.as-mp-pr-bubble::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: #0f172a;
}
.as-mp-pr-slider .track,
.as-mp-pr-slider .fill {
position: absolute;
top: 50%; transform: translateY(-50%);
height: 4px;
border-radius: 999px;
pointer-events: none;
}
.as-mp-pr-slider .track {
left: 0; right: 0;
background: #e2e8f0;
}
.as-mp-pr-slider .fill {
left: 0; right: 0;
background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
.as-mp-pr-thumb {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 22px;
margin: 0;
background: transparent;
appearance: none;
-webkit-appearance: none;
pointer-events: none; /* track is non-interactive; thumbs override */
outline: none;
}
.as-mp-pr-thumb.min { z-index: 2; }
.as-mp-pr-thumb.max { z-index: 3; }
.as-mp-pr-thumb::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.as-mp-pr-thumb::-moz-range-track { background: transparent; height: 4px; }
.as-mp-pr-thumb::-webkit-slider-thumb {
-webkit-appearance: none;
pointer-events: auto;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #1d4ed8;
box-shadow: 0 2px 6px rgba(15,23,42,.18);
cursor: pointer;
margin-top: -7px;
transition: transform .12s, box-shadow .12s;
}
.as-mp-pr-thumb::-moz-range-thumb {
pointer-events: auto;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
border: 2px solid #1d4ed8;
box-shadow: 0 2px 6px rgba(15,23,42,.18);
cursor: pointer;
}
.as-mp-pr-thumb:focus::-webkit-slider-thumb,
.as-mp-pr-thumb:active::-webkit-slider-thumb { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(29,78,216,.18); }
.as-mp-pr-thumb:focus::-moz-range-thumb,
.as-mp-pr-thumb:active::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(29,78,216,.18); }
.as-mp-loc-input {
position: relative;
display: flex; align-items: center;
background: #fff;
border: 1px solid var(--as-border);
border-radius: 10px;
padding: 0 12px 0 36px;
min-height: 42px;
min-width: 0;
transition: border-color .12s, box-shadow .12s;
}
.as-mp-loc-input:focus-within {
border-color: var(--as-primary);
box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.as-mp-loc-input > svg {
position: absolute; left: 12px; top: 50%;
transform: translateY(-50%);
width: 14px; height: 14px;
color: var(--as-text-muted);
}
.as-mp-loc-input input {
flex: 1; min-width: 0;
border: none; background: transparent;
font-size: 13.5px;
color: var(--as-text);
outline: none;
padding: 8px 0;
}
/* ============================================================
Product form — available-locations chip input
============================================================ */
.as-loc-chips {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 10px;
border: 1px solid var(--as-border);
border-radius: 10px;
background: #fff;
min-height: 44px;
transition: border-color .12s, box-shadow .12s;
}
.as-loc-chips:focus-within {
border-color: var(--as-primary);
box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.as-loc-chips .chips { display: contents; }
.as-loc-chips .chip {
display: inline-flex; align-items: center; gap: 6px;
background: #eff6ff;
color: var(--as-primary, #1d4ed8);
padding: 4px 6px 4px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 600;
line-height: 1.2;
}
.as-loc-chips .chip-x {
background: rgba(29,78,216,.18);
color: var(--as-primary, #1d4ed8);
border: 0;
width: 18px; height: 18px;
border-radius: 50%;
font-size: 14px;
line-height: 1;
cursor: pointer;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
}
.as-loc-chips .chip-x:hover { background: rgba(29,78,216,.32); }
.as-loc-chips input {
flex: 1; min-width: 120px;
border: 0;
outline: none;
background: transparent;
font-size: 13.5px;
color: var(--as-text);
padding: 4px 6px;
}
/* RFQ form — clickable suggestion chips (seller's branches) */
.as-loc-suggest {
display: inline-flex;
align-items: center;
margin: 0 6px 4px 0;
padding: 3px 10px;
font-size: 11.5px;
font-weight: 600;
color: var(--as-primary, #1d4ed8);
background: rgba(29,78,216,.08);
border: 1px solid rgba(29,78,216,.18);
border-radius: 999px;
cursor: pointer;
transition: background .12s, border-color .12s;
}
.as-loc-suggest:hover {
background: rgba(29,78,216,.16);
border-color: rgba(29,78,216,.32);
}
/* ============================================================
Supplier rating — display + input
============================================================ */
/* Display: 5 grey stars overlaid by gold stars clipped to width.
Works for any fractional rating (e.g. 4.3 → 86% fill). */
.as-stars-display {
position: relative;
display: inline-block;
font-size: 16px;
letter-spacing: 2px;
line-height: 1;
vertical-align: middle;
/* Track + fill share the same character glyphs so they overlap perfectly */
}
.as-stars-display .track {
color: #e2e8f0;
}
.as-stars-display .fill {
position: absolute;
inset: 0;
overflow: hidden;
width: 0;
color: #f59e0b;
white-space: nowrap;
}
.as-stars-display.is-empty .track { color: #cbd5e1; }
.as-pd-supplier .rating { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.as-pd-supplier .rating .stars-num { font-size: 13.5px; font-weight: 700; color: var(--as-text); }
.as-pd-supplier .rating .reviews { font-size: 12.5px; color: var(--as-text-muted); }
/* Input: 10 radios (5 stars × {half, full}) styled as one row of stars.
Reversed in DOM so adjacent-sibling CSS can highlight from the right.
`.full` is a full star slot, `.half` overlays the left half. */
.as-stars-input {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
font-size: 30px;
line-height: 1;
user-select: none;
}
.as-stars-input input { display: none; }
.as-stars-input label {
cursor: pointer;
color: #e2e8f0;
transition: color .12s;
}
.as-stars-input label.full { padding: 0 1px; }
.as-stars-input label.half {
margin-right: -16px; /* slide left half over preceding full star */
width: 15px;
overflow: hidden;
direction: rtl; /* show only the left half of the glyph */
}
/* On hover/checked, light up that star AND every star to its right (which
means LATER in DOM, since the row is row-reverse). */
.as-stars-input label:hover,
.as-stars-input label:hover ~ label,
.as-stars-input input:checked ~ label {
color: #f59e0b;
}
/* Rate-this-supplier section on the product page */
.as-pd-rate {
margin: 18px 20px 4px;
padding: 16px 18px;
border: 1px dashed var(--as-border);
border-radius: 12px;
background: #fafbfc;
}
.as-pd-rate-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.as-pd-rate-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--as-text); }
.as-pd-rate-sub { font-size: 12.5px; color: var(--as-text-muted); }
.as-pd-rate-body {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 480px) {
.as-pd-rate { margin: 16px; padding: 14px 14px; }
.as-pd-rate-body { gap: 10px; }
.as-stars-input { font-size: 28px; }
.as-pd-rate-body .as-btn-primary { flex: 1; min-width: 0; justify-content: center; }
}
/* ============================================================
Mobile: hide scrollbars everywhere (scroll still works)
------------------------------------------------------------
On phones the visible scrollbar takes up valuable horizontal
space and breaks the "native app" look. Hiding it on mobile
keeps overflow scrolling functional but invisible.
============================================================ */
@media (max-width: 860px) {
/* WebKit (iOS Safari, Chrome, Edge) */
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; }
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track { background: transparent !important; }
/* Firefox */
* { scrollbar-width: none !important; }
/* IE / older Edge */
* { -ms-overflow-style: none !important; }
}
|