/* ===================================================================
   B2BConnect Theme — Design tokens
   Paleta: grafite-marinho + azul confiança + verde negócio + âmbar urgência
   Tipografia: Space Grotesk (display) + Inter (corpo)
   =================================================================== */

:root {
	--b2b-ink: #0b1220;
	--b2b-ink-soft: #37415a;
	--b2b-bg: #f6f7f9;
	--b2b-surface: #ffffff;
	--b2b-border: #e4e7ec;
	--b2b-blue: #2563eb;
	--b2b-blue-dark: #1d4ed8;
	--b2b-green: #059669;
	--b2b-amber: #d97706;
	--b2b-red: #dc2626;
	--b2b-muted: #6b7280;

	--b2b-radius: 12px;
	--b2b-radius-lg: 18px;
	--b2b-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 8px 24px -12px rgba(11, 18, 32, 0.12);
	--b2b-shadow-hover: 0 4px 10px rgba(11, 18, 32, 0.06), 0 16px 32px -14px rgba(11, 18, 32, 0.16);

	--font-display: 'Space Grotesk', 'Inter', sans-serif;
	--font-body: 'Inter', system-ui, sans-serif;

	--b2b-header-h: 64px;
	--b2b-bottomnav-h: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.b2b-app {
	margin: 0;
	font-family: var(--font-body);
	color: var(--b2b-ink);
	background: var(--b2b-bg);
	line-height: 1.5;
	padding-bottom: var(--b2b-bottomnav-h);
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 8px;
}

button, input, textarea, select {
	font-family: var(--font-body);
	font-size: 15px;
}

img { max-width: 100%; display: block; }

.b2b-main { min-height: 60vh; }

/* Layout helpers */
.b2b-container {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 16px;
}

.b2b-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Focus visible acessivel */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--b2b-blue);
	outline-offset: 2px;
}

/* Botões */
.b2b-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 14.5px;
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
	white-space: nowrap;
}
.b2b-btn:active { transform: scale(0.98); }
.b2b-btn-primary { background: var(--b2b-blue); color: #fff; }
.b2b-btn-primary:hover { background: var(--b2b-blue-dark); }
.b2b-btn-secondary { background: var(--b2b-surface); color: var(--b2b-ink); border-color: var(--b2b-border); }
.b2b-btn-secondary:hover { border-color: var(--b2b-blue); color: var(--b2b-blue); }
.b2b-btn-ghost { background: transparent; color: var(--b2b-ink-soft); padding: 8px 12px; }
.b2b-btn-ghost:hover { background: rgba(37, 99, 235, 0.08); color: var(--b2b-blue); }
.b2b-btn-block { width: 100%; }
.b2b-btn-sm { padding: 7px 14px; font-size: 13px; }
.b2b-btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Badges / pills */
.b2b-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	background: rgba(37, 99, 235, 0.1);
	color: var(--b2b-blue-dark);
}
.b2b-pill-amber { background: rgba(217, 119, 6, 0.12); color: var(--b2b-amber); }
.b2b-pill-green { background: rgba(5, 150, 105, 0.12); color: var(--b2b-green); }
.b2b-pill-muted { background: #eef0f3; color: var(--b2b-muted); }
.b2b-pill-locked { background: #f1f2f5; color: var(--b2b-ink-soft); }

.b2b-card {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	box-shadow: var(--b2b-shadow);
}

/* ===================== Header ===================== */
.b2b-header {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--b2b-header-h);
	background: rgba(246, 247, 249, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--b2b-border);
	display: flex;
	align-items: center;
}
.b2b-header-inner {
	max-width: 1160px;
	margin: 0 auto;
	width: 100%;
	padding: 0 16px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.b2b-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.02em;
	color: var(--b2b-ink);
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.b2b-logo span { color: var(--b2b-blue); }
.b2b-header-search {
	flex: 1;
	max-width: 460px;
	display: none;
}
.b2b-header-search input {
	width: 100%;
	padding: 9px 14px;
	border-radius: 999px;
	border: 1px solid var(--b2b-border);
	background: #fff;
}
.b2b-header-nav {
	display: none;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}
.b2b-header-nav a {
	padding: 8px 12px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--b2b-ink-soft);
}
.b2b-header-nav a:hover { background: rgba(37,99,235,0.08); color: var(--b2b-blue); }
.b2b-header-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

@media (min-width: 860px) {
	.b2b-header-search { display: block; }
	.b2b-header-nav { display: flex; }
	.b2b-header-actions { margin-left: 0; }
}

/* ===================== Hero (home) ===================== */
.b2b-hero {
	padding: 56px 0 40px;
	text-align: center;
}
.b2b-hero h1 {
	font-size: clamp(28px, 5vw, 44px);
	max-width: 760px;
	margin: 0 auto 12px;
}
.b2b-hero p {
	color: var(--b2b-ink-soft);
	font-size: 17px;
	max-width: 560px;
	margin: 0 auto 28px;
}
.b2b-hero-search {
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--b2b-border);
	border-radius: 999px;
	padding: 6px 6px 6px 20px;
	box-shadow: var(--b2b-shadow);
}
.b2b-hero-search input {
	flex: 1;
	border: none;
	outline: none;
	font-size: 15px;
	background: transparent;
}
.b2b-hero-stats {
	display: flex;
	justify-content: center;
	gap: 32px;
	margin-top: 32px;
	flex-wrap: wrap;
}
.b2b-hero-stat strong {
	display: block;
	font-family: var(--font-display);
	font-size: 24px;
}
.b2b-hero-stat span { font-size: 13px; color: var(--b2b-muted); }

/* ===================== Categorias (chips) ===================== */
.b2b-section { padding: 32px 0; }
.b2b-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 16px;
}
.b2b-section-head h2 { font-size: 20px; }
.b2b-section-head a { font-size: 14px; color: var(--b2b-blue); font-weight: 600; }

.b2b-category-scroll {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}
.b2b-category-scroll::-webkit-scrollbar { display: none; }
.b2b-category-chip {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--b2b-border);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.b2b-category-chip:hover { border-color: var(--b2b-blue); color: var(--b2b-blue); }
.b2b-category-chip.active { background: var(--b2b-ink); color: #fff; border-color: var(--b2b-ink); }

/* ===================== Grid de pedidos ===================== */
.b2b-grid {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 16px;
}
@media (min-width: 640px) { .b2b-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .b2b-grid { grid-template-columns: repeat(3, 1fr); } }

.b2b-request-card {
	background: var(--b2b-surface);
	border: 1px solid var(--b2b-border);
	border-radius: var(--b2b-radius-lg);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.b2b-request-card:hover { box-shadow: var(--b2b-shadow-hover); transform: translateY(-2px); }
.b2b-request-card-top { display: flex; justify-content: space-between; gap: 8px; }
.b2b-request-title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 600;
	margin: 0;
}
.b2b-request-excerpt {
	color: var(--b2b-ink-soft);
	font-size: 14px;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.b2b-request-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 13px;
	color: var(--b2b-muted);
}
.b2b-request-meta span { display: inline-flex; align-items: center; gap: 4px; }
.b2b-request-protected {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12.5px;
	color: var(--b2b-ink-soft);
	background: #f4f5f7;
	border-radius: 999px;
	padding: 5px 10px;
	width: fit-content;
}
.b2b-request-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed var(--b2b-border);
}
.b2b-request-actions { display: flex; gap: 6px; }
.b2b-icon-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	color: var(--b2b-muted);
	font-size: 13px;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 8px;
}
.b2b-icon-btn:hover { background: #f1f2f5; color: var(--b2b-ink); }
.b2b-icon-btn.liked { color: var(--b2b-red); }
.b2b-match-score {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	font-size: 13px;
	color: var(--b2b-green);
}

/* ===================== Filtros ===================== */
.b2b-filters-bar {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 4px 0 16px;
}
.b2b-filters-bar select, .b2b-filters-bar input {
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--b2b-border);
	background: #fff;
	font-size: 13.5px;
	flex: 0 0 auto;
}

/* ===================== Score circular (signature element) ========= */
.b2b-score-ring {
	position: relative;
	width: 84px;
	height: 84px;
	flex-shrink: 0;
}
.b2b-score-ring svg { transform: rotate(-90deg); }
.b2b-score-ring-value {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.b2b-score-ring-value strong { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.b2b-score-ring-value span { font-size: 10px; color: var(--b2b-muted); }
.b2b-score-ring-sm { width: 44px; height: 44px; }
.b2b-score-ring-sm .b2b-score-ring-value strong { font-size: 13px; }
.b2b-score-ring-sm .b2b-score-ring-value span { display: none; }

/* ===================== Página de pedido ===================== */
.b2b-request-detail { padding: 24px 0 60px; }
.b2b-breadcrumb { font-size: 13px; color: var(--b2b-muted); margin-bottom: 16px; }
.b2b-request-hero { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .b2b-request-hero { grid-template-columns: 2fr 1fr; } }
.b2b-request-body h1 { font-size: 26px; }
.b2b-request-description { white-space: pre-line; color: var(--b2b-ink-soft); line-height: 1.7; }
.b2b-side-panel { display: flex; flex-direction: column; gap: 16px; }
.b2b-info-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--b2b-border); font-size: 14px; }
.b2b-info-row:last-child { border-bottom: none; }
.b2b-info-row span:first-child { color: var(--b2b-muted); }

.b2b-locked-box {
	background: #f4f5f7;
	border-radius: var(--b2b-radius);
	padding: 16px;
	text-align: center;
	font-size: 13.5px;
	color: var(--b2b-ink-soft);
}

/* Comentários */
.b2b-comment { padding: 14px 0; border-bottom: 1px solid var(--b2b-border); }
.b2b-comment-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--b2b-muted); margin-bottom: 4px; }
.b2b-comment-body { font-size: 14.5px; }

/* Formulários */
.b2b-form-group { margin-bottom: 16px; }
.b2b-form-group label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 6px; }
.b2b-form-group input, .b2b-form-group textarea, .b2b-form-group select {
	width: 100%;
	padding: 11px 14px;
	border-radius: 10px;
	border: 1px solid var(--b2b-border);
	background: #fff;
}
.b2b-form-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .b2b-form-row-2 { grid-template-columns: 1fr 1fr; } }
.b2b-auth-card { max-width: 420px; margin: 60px auto; padding: 32px; }
.b2b-alert { padding: 12px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }
.b2b-alert-error { background: #fef2f2; color: var(--b2b-red); }
.b2b-alert-success { background: #ecfdf5; color: var(--b2b-green); }

/* ===================== Dashboard / painel ===================== */
.b2b-panel-layout { display: grid; grid-template-columns: 1fr; gap: 20px; padding: 24px 0 60px; }
@media (min-width: 900px) { .b2b-panel-layout { grid-template-columns: 220px 1fr; } }
.b2b-panel-nav { display: flex; flex-direction: column; gap: 4px; }
.b2b-panel-nav a { padding: 10px 14px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--b2b-ink-soft); }
.b2b-panel-nav a.active, .b2b-panel-nav a:hover { background: #fff; color: var(--b2b-blue); box-shadow: var(--b2b-shadow); }
.b2b-status-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 20px; }
.b2b-status-tab { padding: 8px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--b2b-border); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.b2b-status-tab.active { background: var(--b2b-ink); color: #fff; border-color: var(--b2b-ink); }
.b2b-list-item { background: #fff; border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius); padding: 16px; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.b2b-empty-state { text-align: center; padding: 60px 20px; color: var(--b2b-muted); }
.b2b-empty-state h3 { color: var(--b2b-ink); }

/* Reputação */
.b2b-reputation-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; padding: 24px; }
.b2b-reputation-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; margin-top: 20px; }
@media (min-width: 640px) { .b2b-reputation-stats { grid-template-columns: repeat(4,1fr); } }
.b2b-stat-box { background: #fff; border: 1px solid var(--b2b-border); border-radius: var(--b2b-radius); padding: 16px; text-align: center; }
.b2b-stat-box strong { display: block; font-family: var(--font-display); font-size: 22px; }
.b2b-stat-box span { font-size: 12.5px; color: var(--b2b-muted); }
.b2b-badges-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.b2b-badge-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; text-align: center; }
.b2b-badge-chip .icon { font-size: 28px; }
.b2b-badge-chip .label { font-size: 11px; color: var(--b2b-muted); }

/* ===================== Bottom nav (mobile) ===================== */
.b2b-bottom-nav {
	position: fixed;
	bottom: 0; left: 0; right: 0;
	height: var(--b2b-bottomnav-h);
	background: #fff;
	border-top: 1px solid var(--b2b-border);
	display: flex;
	z-index: 50;
}
.b2b-bottom-nav a {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 11px;
	color: var(--b2b-muted);
}
.b2b-bottom-nav a.active { color: var(--b2b-blue); }
.b2b-bottom-nav .icon { font-size: 20px; }
@media (min-width: 860px) { .b2b-bottom-nav { display: none; } body.b2b-app { padding-bottom: 0; } }

/* ===================== Footer ===================== */
.b2b-footer { border-top: 1px solid var(--b2b-border); padding: 40px 0 80px; margin-top: 40px; color: var(--b2b-muted); font-size: 13.5px; }
@media (min-width: 860px) { .b2b-footer { padding-bottom: 40px; } }
.b2b-footer a { color: var(--b2b-ink-soft); }

/* Toast */
.b2b-toast {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--b2b-ink);
	color: #fff;
	padding: 12px 18px;
	border-radius: 999px;
	font-size: 13.5px;
	z-index: 100;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.b2b-toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}