/* =========================================================
   PrzelicznikWag — components.css
   Przyciski, karty, formularze, badge.
   ========================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	font: inherit;
	font-weight: 600;
	font-size: var(--fs-md);
	line-height: 1;
	color: white;
	background: var(--c-primary);
	border: 2px solid var(--c-primary);
	border-radius: var(--rad-md);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
	box-shadow: var(--shadow-xs);
}
.btn:hover {
	background: var(--c-primary-dark);
	border-color: var(--c-primary-dark);
	color: white;
	box-shadow: var(--shadow-blue);
	transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
	background: transparent;
	color: var(--c-primary);
	border-color: var(--c-line);
	box-shadow: none;
}
.btn--ghost:hover {
	background: var(--c-primary-xsoft);
	border-color: var(--c-primary-soft);
	color: var(--c-primary-dark);
	box-shadow: none;
}

.btn--small { padding: 0.55em 1em; font-size: var(--fs-sm); }

.card {
	background: white;
	border: 1px solid var(--c-line);
	border-radius: var(--rad-lg);
	padding: var(--sp-4);
	box-shadow: var(--shadow-xs);
	transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.card:hover {
	border-color: var(--c-primary-soft);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.card__title { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }
.card__desc  { color: var(--c-muted); margin: 0; font-size: var(--fs-sm); }

.input, .select, .textarea {
	width: 100%;
	padding: 0.75em 0.9em;
	font: inherit;
	font-size: var(--fs-md);
	color: var(--c-ink);
	background: white;
	border: 1.5px solid var(--c-line);
	border-radius: var(--rad-md);
	transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input:hover, .select:hover, .textarea:hover {
	border-color: var(--c-primary-soft);
	background: var(--c-primary-xsoft);
}
.input:focus, .select:focus, .textarea:focus {
	outline: none;
	border-color: var(--c-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
	background: white;
}

.badge {
	display: inline-block;
	padding: 0.25em 0.75em;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--c-primary-dark);
	background: var(--c-primary-soft);
	border-radius: var(--rad-pill);
}