/* ================================================
   BUTTONS & INTERACTIVE ELEMENTS
   ================================================ */

.btn {
	font-family: var(--font-family);
	padding: 0.55rem 1rem;
	border: 1px solid rgba(255, 96, 128, 0.28);
	background: rgba(12, 4, 8, 0.85);
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	min-width: 10ch;
	cursor: pointer;
	transition: 
		background var(--transition-fast), 
		box-shadow var(--transition-fast), 
		border-color var(--transition-fast), 
		transform var(--transition-fast);
}

.btn:hover,
.btn:focus {
	background: rgba(255, 43, 69, 0.18);
	border-color: rgba(255, 122, 158, 0.45);
	box-shadow: 0 0 18px rgba(255, 43, 69, 0.24);
	outline: none;
}

.btn:active {
	transform: scale(0.98);
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Action Button Groups */
.actions {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1rem;
	flex-wrap: wrap;
}

.actions .btn {
	min-width: 0;
	width: auto;
}

/* Primary Button Variant */
.btn--primary {
	background: rgba(255, 43, 69, 0.15);
	border-color: var(--accent);
}

.btn--primary:hover,
.btn--primary:focus {
	background: rgba(255, 43, 69, 0.28);
	box-shadow: 0 0 24px rgba(255, 43, 69, 0.38);
}

/* Secondary Button Variant */
.btn--secondary {
	background: rgba(7, 17, 25, 0.58);
	border-color: rgba(255, 96, 128, 0.18);
}

/* Danger Button Variant */
.btn--danger {
	background: rgba(180, 0, 25, 0.25);
	border-color: rgba(255, 60, 80, 0.4);
	color: #ff6b9d;
}

.btn--danger:hover,
.btn--danger:focus {
	background: rgba(180, 0, 25, 0.4);
	box-shadow: 0 0 18px rgba(255, 60, 80, 0.32);
}