/* Fiesta Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	font-weight: 700;
	font-size: 1rem;
	border-radius: 12px;
	border: none;
	cursor: pointer;
	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	position: relative;
	overflow: hidden;
	font-family: "Inter", sans-serif;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;
}

	/* Shine effect on hover */
	.btn::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
		opacity: 0;
		transition: opacity .3s ease;
	}

	.btn:hover::before {
		opacity: 1;
	}

/* Primary button - Orange gradient */
.btn--primary {
	background: linear-gradient(135deg, #F26922 0%, #FF8B4D 100%);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(242, 105, 34, 0.4);
}

	.btn--primary:hover {
		box-shadow: 0 6px 20px rgba(242, 105, 34, 0.5);
		transform: translateY(-2px);
	}

	.btn--primary:focus {
		outline: none;
		box-shadow: 0 0 0 4px rgba(242, 105, 34, 0.2);
		transform: scale(0.98);
	}

/* Secondary button - Green gradient */
.btn--secondary {
	background: linear-gradient(135deg, #227D41 0%, #2D9B54 100%);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(34, 125, 65, 0.4);
}

	.btn--secondary:hover {
		box-shadow: 0 6px 20px rgba(34, 125, 65, 0.5);
		transform: translateY(-2px);
	}

	.btn--secondary:focus {
		outline: none;
		box-shadow: 0 0 0 4px rgba(34, 125, 65, 0.2);
		transform: scale(0.98);
	}

/* Danger button - Red gradient */
.btn--danger {
	background: linear-gradient(135deg, #FF4500 0%, #DC3545 100%);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(255, 69, 0, 0.4);
}

	.btn--danger:hover {
		box-shadow: 0 6px 20px rgba(255, 69, 0, 0.5);
		transform: translateY(-2px);
	}

	.btn--danger:focus {
		outline: none;
		box-shadow: 0 0 0 4px rgba(255, 69, 0, 0.2);
		transform: scale(0.98);
	}

/* Block button - full width */
.btn--block {
	width: 100%;
}

/* Disabled state */
.btn:disabled,
.btn--disabled {
	pointer-events: none;
	background: #BFC7D0 !important;
	color: #fff !important;
	box-shadow: none !important;
	opacity: 0.6;
}
